/**
 * CBS Theme — pied de page
 */

.site-footer {
	background-color: var(--cbs-primary);
	color: var(--cbs-silver-400);
	padding-block: var(--cbs-section-py);
	margin-top: auto;
	/* Référence de largeur pour le full-bleed de .site-footer__logos : le
	   footer fait exactement la largeur utile du document, barre de défilement
	   verticale exclue, contrairement à 100vw. Voir le commentaire du bloc. */
	container-type: inline-size;
}

.site-footer__grid {
	display: grid;
	gap: var(--cbs-space-10) var(--cbs-grid-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
		align-items: start;
	}
}

.site-footer__heading {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-xs);
	font-weight: 600;
	letter-spacing: var(--cbs-tracking-wider);
	text-transform: uppercase;
	color: var(--cbs-white);
	margin: 0 0 var(--cbs-space-4);
}

.site-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cbs-space-3);
}

.site-footer__menu ul {
	list-style: none;
	margin: var(--cbs-space-2) 0 0 var(--cbs-space-4);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cbs-space-2);
}

.site-footer__menu a {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	color: var(--cbs-silver-300);
	text-decoration: none;
	transition: color var(--cbs-transition-base);
}

/* Cibles tactiles : les liens du pied de page ne faisaient que 15 à 18 px de
   haut. On les passe en blocs de 40 px minimum au doigt, sans changer ni la
   taille du texte ni l'espacement visuel de la liste (le gap est absorbé par
   la marge négative). */
@media (max-width: 1023px) {
	.site-footer__menu {
		gap: 0;
	}

	.site-footer__menu ul {
		gap: 0;
	}

	.site-footer__menu a,
	.site-footer__legal-menu a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
	color: var(--cbs-gold);
}

.site-footer__menu a:focus-visible {
	outline: 2px solid var(--cbs-gold);
	outline-offset: 2px;
}

.site-footer__logo-text {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h3);
	font-weight: 600;
	color: var(--cbs-white);
	margin: 0 0 var(--cbs-space-4);
	line-height: var(--cbs-leading-snug);
}

/* Col 1 — textes descriptifs */
.site-footer__brand-desc {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	color: var(--cbs-silver-300);
	margin: 0 0 var(--cbs-space-2);
	line-height: var(--cbs-leading-relaxed);
}

.site-footer__brand-territory {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	color: var(--cbs-silver-400);
	margin: 0;
	line-height: var(--cbs-leading-relaxed);
}

/* Ligne de bas pleine largeur */
.site-footer__bottom {
	margin-top: var(--cbs-space-12);
	text-align: left;
}

.site-footer__divider {
	border: none;
	border-top: 1px solid var(--cbs-silver-700);
	margin: 0 0 var(--cbs-space-8);
}

.site-footer__catchphrase {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-h4);
	font-style: italic;
	color: var(--cbs-silver-200);
	margin: 0 0 var(--cbs-space-4);
	line-height: var(--cbs-leading-snug);
	text-align: left;
}

.site-footer__copyright {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-small);
	color: var(--cbs-silver-400);
	margin: 0;
	line-height: var(--cbs-leading-relaxed);
}

.site-footer__bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cbs-space-4);
	margin-top: var(--cbs-space-4);
}

/* Liens légaux */
.site-footer__legal-nav {
	margin-top: var(--cbs-space-4);
}

.site-footer__legal-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbs-space-6);
}

.site-footer__legal-menu a {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-xs);
	color: var(--cbs-silver-500);
	text-decoration: none;
	transition: color var(--cbs-transition-base);
}

.site-footer__legal-menu a:hover,
.site-footer__legal-menu a:focus-visible {
	color: var(--cbs-silver-300);
}

.site-footer__legal-menu a:focus-visible {
	outline: 2px solid var(--cbs-gold);
	outline-offset: 2px;
}

/* ——— Bande de logos et certifications ———
   Alimentée par le repeater ACF `cbs_footer_logos` (option). Zone absente du
   markup tant que le champ est vide : le pied de page reste alors inchangé.
   Les logos sont posés à même le footer sombre, sans pastille : les fichiers
   doivent donc être fournis en fond transparent ou en fond sombre. */
/* Géométrie IDENTIQUE au bloc « logos du groupe » d'ARS et à la boutique
   (21/09/2026, Hugo : passer d'un site à l'autre ne doit rien changer sur ce
   bloc ; source : /projets/ars/.../template-parts/footer/group-logos.php,
   même CSS que cb-boutique/layout/footer.css) :
   - largeur du conteneur Tailwind d'ARS (paliers 640 / 768 / 1024 / 1280 /
     1536 px, 1 rem de marge de chaque côté), d'où la sortie du .cbs-container
     par marges négatives (calc(50% - 50cqw), full-bleed) ;
   - 50cqw et pas 50vw : 100vw compte la barre de défilement verticale, la bande
     dépassait donc de la moitié de sa largeur à droite et faisait apparaître une
     barre horizontale sur toutes les pages. 100cqw = largeur du footer, barre
     exclue (container-type: inline-size posé sur .site-footer) ;
   - filets haut et bas blanc 10 %, 3 rem de padding vertical (py-12) ;
   - liste centrée, en colonne sous 768 px (gap 1,5 rem), en ligne au-delà
     (2 rem entre lignes, 3 rem entre colonnes), chaque logo dans une colonne
     de calc(33,333 % - 3 rem), logos de 8 rem (h-32). */
.site-footer__logos {
	margin-top: var(--cbs-space-12);
	margin-inline: calc(50% - 50cqw);
	padding-block: 3rem;
	border-top: 1px solid color-mix(in srgb, var(--cbs-white) 10%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--cbs-white) 10%, transparent);
}

.site-footer__logos-list {
	--cbs-footer-logos-max: none;
	list-style: none;
	width: 100%;
	max-width: var(--cbs-footer-logos-max);
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.site-footer__logos-list {
		--cbs-footer-logos-max: 640px;
	}
}

@media (min-width: 768px) {
	.site-footer__logos-list {
		--cbs-footer-logos-max: 768px;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2rem 3rem;
	}
}

@media (min-width: 1024px) {
	.site-footer__logos-list {
		--cbs-footer-logos-max: 1024px;
	}
}

@media (min-width: 1280px) {
	.site-footer__logos-list {
		--cbs-footer-logos-max: 1280px;
	}
}

@media (min-width: 1536px) {
	.site-footer__logos-list {
		--cbs-footer-logos-max: 1536px;
	}
}

.site-footer__logos-item {
	flex: 0 1 auto;
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.site-footer__logos-item {
		width: auto;
		flex-basis: calc(33.333% - 3rem);
	}
}

.site-footer__logos-link {
	display: block;
	line-height: 0;
	transition: opacity var(--cbs-transition-base);
}

.site-footer__logos-link:hover,
.site-footer__logos-link:focus-visible {
	opacity: 0.75;
}

.site-footer__logos-link:focus-visible {
	outline: 2px solid var(--cbs-gold);
	outline-offset: 4px;
}

/* Fondu blanc → couleur au survol (grs-4s9, repris de la boutique CB).
   `.site-footer__logo-swap` : la base donne la taille, la colorée est posée
   dessus en absolu et passe de 0 à 1 d'opacité pendant que la base fait
   l'inverse. Pas de JS, les deux fichiers sont dans le HTML (lazy).
   Sans `image_hover`, ni le conteneur ni `--swap` ne sont émis : le logo
   garde le comportement d'origine, opacité 0,75 au survol du lien. */
.site-footer__logo-swap {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.site-footer__logo-swap .site-footer__logo {
	transition: opacity var(--cbs-transition-base);
}

/* Remplit le conteneur, donc exactement la boîte du logo de base ; object-fit
   absorbe un léger écart de proportions entre les deux fichiers. */
.site-footer__logo-swap .site-footer__logo--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.site-footer__logo-swap:hover .site-footer__logo--hover,
.site-footer__logos-link:focus-visible .site-footer__logo--hover {
	opacity: 1;
}

.site-footer__logo-swap:hover .site-footer__logo:not(.site-footer__logo--hover),
.site-footer__logos-link:focus-visible .site-footer__logo:not(.site-footer__logo--hover) {
	opacity: 0;
}

/* Le fondu remplace l'assombrissement : un logo coloré à 0,75 serait terne. */
.site-footer__logos-item--swap .site-footer__logos-link:hover,
.site-footer__logos-item--swap .site-footer__logos-link:focus-visible {
	opacity: 1;
}

/* Hauteur normalisée : les fichiers vont de 458x241 à 1280x1280, sans quoi le
   carré de l'Unistra écraserait les logos horizontaux.
   8 rem (128 px) depuis le 21/09/2026 : même taille que sur ARS et la
   boutique (h-32), après 6 rem le 17/09 et 4,5 rem avant. */
.site-footer__logo {
	display: block;
	height: 8rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

/* Liseré clair (case « Liseré clair » du repeater) : le logo Conseil et Gestion
   a le même fond teal que le pied de page, sans ce trait il se fond dedans.
   Posé sur le logo (ou la paire logo/survol), pas sur le lien, pour suivre
   exactement la boîte de l'image. Rayon calé sur les coins du PNG à 6 rem. */
.site-footer__logos-item--outlined .site-footer__logo-swap,
.site-footer__logos-item--outlined > .site-footer__logo,
.site-footer__logos-item--outlined > .site-footer__logos-link > .site-footer__logo {
	/* Mêmes valeurs que le liseré du logo Académie sur ARS (ring-white/50, rounded-xl). */
	border: 1px solid color-mix(in srgb, var(--cbs-white) 50%, transparent);
	border-radius: 0.75rem;
}

/* Empilés sous 768 px (règles au-dessus, comme ARS) : même hauteur de logo
   qu'en desktop. */
@media (max-width: 767.98px) {
	.site-footer__logo {
		height: 8rem;
	}
}