/*
 * Fragment footer_bottom — la barre du bas d'un pied de page.
 *
 * ELLE EST LIVREE AVEC SON BALISAGE, et c'est la condition posee par la lecon
 * payee sur mobile_panel : mutualiser le balisage en laissant chaque hote
 * styler ce qu'il rend a coute 4 796 o gzip au rayon navbar, dont 1 378 en
 * pures regles de reprise. Les compositions ne reglent ici que leur GEOMETRIE
 * — filet, espacement, ordre au repli — jamais l'habillage.
 *
 * Engagement 5 : aucun hexadecimal, replis compris.
 */

.ivy-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem clamp( 1rem, 3vw, 2.5rem );
	color: currentColor;
	font-size: var( --ivy-legal-size, var( --ivy-font-body ) );
}

/*
 * LE CONTRAT DE LA FAMILLE « color ».
 *
 * Elle n'ecrit jamais `color: {{VALUE}}` : elle pose `--ivy-<partie>-color`
 * sur l'element de la partie, et c'est la feuille qui doit la lire. Les trois
 * parties de la barre du bas sont `copyright`, `agency` et `legal_links` ;
 * cette feuille lisait `--ivy-legal-color`, un nom que rien n'ecrit. Les trois
 * reglages de couleur etaient donc muets sur les six pieds de page a la fois
 * — le client posait sa couleur, le repli s'affichait.
 *
 * Le repli est `inherit` et pas un token : la barre du bas prend la couleur du
 * pied qui l'accueille tant que personne ne la regle, ce qui est le
 * comportement que les six produits attendaient deja.
 */

/*
 * Le copyright au centre, les deux autres aux extremites.
 *
 * `order` porte la mise en page pour que l'ORDRE DU DOM reste l'ordre de
 * lecture — menu legal, copyright, signature — qui est ce qu'un lecteur
 * d'ecran annonce et ce que la tabulation suit.
 */
.ivy-footer__bottom .ivy-footer__legal-links {
	order: 1;
	color: var( --ivy-legal_links-color, inherit );
}

.ivy-footer__bottom .ivy-footer__copyright {
	order: 2;
	margin: 0;
	color: var( --ivy-copyright-color, inherit );
	text-align: center;
}

.ivy-footer__bottom .ivy-footer__agency {
	order: 3;
	color: var( --ivy-agency-color, inherit );
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

/*
 * Le combinateur d'enfant n'est pas decoratif : `.ivy-footer__legal-links ul`
 * pese 0-2-1 et attraperait aussi les sous-listes, a specificite superieure.
 * Une regle qui veut dire « la liste de premier niveau » doit le dire.
 */
.ivy-footer__bottom .ivy-footer__legal-links > .ivy-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem clamp( 0.75rem, 2vw, 1.5rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-footer__bottom a {
	color: inherit;
	text-decoration: none;
}

/* Cible tactile : 44 px est le plancher retenu partout dans ce depot. */
.ivy-footer__bottom :is( .ivy-footer__legal-menu a, .ivy-footer__agency-link ) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
}

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

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

.ivy-footer__bottom .ivy-footer__agency-logo {
	display: block;
	width: auto;
	max-width: var( --ivy-agency-logo-max-width, 9rem );
	max-height: var( --ivy-agency-logo-max-height, 1.75rem );
	object-fit: contain;
}

@media ( max-width: 767px ) {
	/*
	 * Les trois blocs s'empilent. C'est le fragment qui le decide, et non
	 * chaque hote : les six produits du rayon veulent le meme repli, et
	 * laisser chacun l'ecrire est exactement ce qui a coute 1 378 o de regles
	 * de reprise au rayon navbar.
	 */
	.ivy-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.ivy-footer__bottom .ivy-footer__copyright {
		text-align: start;
	}
}