/*
 * `escale` — `signature` recentree : trois colonnes au centre, reseaux sous
 * les coordonnees, nom de marque centre.
 *
 * Engagement 5 : aucun hexadecimal, replis compris.
 */

.ivy-footer--escale {
	padding: clamp( 3.5rem, 7vw, 6rem ) max( 1.25rem, calc( ( 100% - 106rem ) / 2 ) ) 1.75rem;
	background: transparent;
	color: var( --ivy-ink, rgb( 17 17 17 ) );
}

.ivy-footer--escale .ivy-footer__inner {
	display: grid;
	/* Trois colonnes AU CENTRE, texte centre : aucune moitie de pied vide. */
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	justify-items: center;
	max-inline-size: 64rem;
	margin-inline: auto;
	text-align: center;
	gap: clamp( 1.5rem, 3vw, 3rem );
	padding-block-end: clamp( 2.5rem, 5vw, 4rem );
}

/*
 * LE MOT DE MARQUE, et le piege qui va avec.
 *
 * `overflow-wrap: break-word` et NON `anywhere`. Les deux coupent un mot trop
 * long pour sa ligne, donc la protection contre le debordement est identique.
 * Mais `anywhere` fait compter les points de coupure dans la taille MIN-CONTENT :
 * mesure sur un titre a 76,8 px, la largeur min-content tombe de 378 px a
 * 50 px. Tout conteneur qui se dimensionne sur min-content referme alors le mot
 * sur une lettre — 55 produits du catalogue s'etaient effondres au sabotage.
 */
.ivy-footer--escale .ivy-footer__wordmark {
	margin: 0;
	overflow-wrap: break-word;
	color: var( --ivy-wordmark-color, rgb( 17 17 17 ) );
	font-size: var( --ivy-font-display );
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 0.86;
	text-align: center;
}

@media ( max-width: 900px ) {
	.ivy-footer--escale .ivy-footer__inner {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.ivy-footer--escale .ivy-footer__inner {
		grid-template-columns: minmax( 0, 1fr );
		gap: 2rem;
	}
}

/* Les colonnes ne se laissent pas dimensionner par leur contenu. */
.ivy-footer--escale .ivy-footer__inner > * {
	min-inline-size: 0;
}

.ivy-footer--escale .ivy-footer__column-title {
	/* Intitule de colonne : role h5 (20 px au bureau), decision d'Alex du 26/09/2026. */
	font-size: var( --ivy-font-h5 );
	margin: 0 0 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ivy-footer--escale .ivy-footer__nav > .ivy-footer__menu,
.ivy-footer--escale .ivy-footer__nav-secondary > .ivy-footer__menu,
.ivy-footer--escale .ivy-footer__contact-lines,
.ivy-footer--escale .ivy-footer__social {
	display: grid;
	/* 8 px entre deux cibles empilees : le plancher tenu par footer.spec. */
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-footer--escale .ivy-footer__social {
	grid-auto-flow: column;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* Les icones sur une ligne, dans une pastille ronde a filet. */
.ivy-footer--escale .ivy-footer__social a {
	border: 1px solid color-mix( in srgb, currentColor 35%, transparent );
	border-radius: 50%;
}

.ivy-footer--escale .ivy-footer__social svg,
.ivy-footer--escale .ivy-footer__social i { width: 1.05rem; height: 1.05rem; fill: currentColor; }

.ivy-footer--escale :is( .ivy-footer__menu a, .ivy-footer__contact a ) {
	display: inline-flex;
	align-items: center;
	/* Cible tactile de 44 px, le plancher du depot. */
	min-height: 2.75rem;
	color: inherit;
	text-decoration: none;
}

.ivy-footer--escale .ivy-footer__social a {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	color: inherit;
}

.ivy-footer--escale a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.ivy-footer--escale a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ivy-footer--escale .ivy-footer__contact {
	font-style: normal;
}

.ivy-footer--escale .ivy-footer__contact-line {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.ivy-footer--escale .ivy-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: var( --ivy-contact-icon-size, 1.125rem );
	block-size: var( --ivy-contact-icon-size, 1.125rem );
}

.ivy-footer--escale .ivy-footer__contact-icon :is( svg, i ) {
	inline-size: 100%;
	block-size: 100%;
	font-size: inherit;
}

.ivy-footer--escale .ivy-footer__rule {
	border-block-start: 1px solid var( --ivy-rule-border-color, rgb( 17 17 17 / 0.16 ) );
	margin-block-start: clamp( 2rem, 4vw, 3.5rem );
}

/*
 * La barre du bas appartient au fragment footer_bottom, qui livre sa feuille
 * avec son balisage. Cette composition ne regle que sa GEOMETRIE.
 */
.ivy-footer--escale .ivy-footer__bottom {
	padding-block-start: 1.5rem;
}

/* Au repli, la barre suit l'axe du pied : centree, comme tout le reste. */
@media ( max-width: 767px ) {
	.ivy-footer--escale .ivy-footer__bottom {
		align-items: center;
	}

	.ivy-footer--escale .ivy-footer__bottom .ivy-footer__copyright {
		text-align: center;
	}

	.ivy-footer--escale .ivy-footer__bottom :is( .ivy-footer__legal-links > .ivy-footer__legal-menu, .ivy-footer__agency ) {
		justify-content: center;
	}
}

/*
 * Contrat de la famille « color » : elle pose `--ivy-<partie>-color` sur
 * l'element de la partie, jamais `color:`. Cette feuille lisait des noms
 * inventes, donc tous ses reglages de couleur etaient MUETS. Les titres de
 * colonne partagent une classe mais sont des parties distinctes : une regle
 * chacune, sous son ancetre. Le pourquoi est dans PASSATION.md §3.
 */
.ivy-footer--escale .ivy-footer__nav {
	color: var( --ivy-menu-color, currentColor );
}

.ivy-footer--escale .ivy-footer__nav .ivy-footer__column-title {
	color: var( --ivy-nav_title-color, currentColor );
}

.ivy-footer--escale .ivy-footer__nav-secondary {
	color: var( --ivy-menu_secondary-color, currentColor );
}

.ivy-footer--escale .ivy-footer__nav-secondary .ivy-footer__column-title {
	color: var( --ivy-secondary_title-color, currentColor );
}

.ivy-footer--escale .ivy-footer__contact {
	color: var( --ivy-contact-color, currentColor );
}

.ivy-footer--escale .ivy-footer__contact .ivy-footer__column-title {
	color: var( --ivy-contact_title-color, currentColor );
}

.ivy-footer--escale .ivy-footer__contact-icon {
	color: var( --ivy-contact_icon-color, currentColor );
}

.ivy-footer--escale .ivy-footer__social a {
	color: var( --ivy-social-color, currentColor );
}

.ivy-footer--escale .ivy-footer__social-block .ivy-footer__column-title {
	color: var( --ivy-social_title-color, currentColor );
}