/*
 * Drache d'Avril — Pied de page.
 *
 * Réf design : Figma node 14552:3605 (version "new").
 * Tokens consommés depuis theme.json via var(--wp--preset--*).
 * pink-light du Figma = token rouge-07 ; ink = bleu-02.
 * Motif du haut = symbole du logo (recoloré en ink). Wordmark = SVG texte.
 */

.site-footer {
	position: relative;
	color: var(--wp--preset--color--rouge-07, #fef2f5);

	/* Remonte le footer par-dessus le dernier bloc du main : le trou drache
	   révèle alors ce bloc (cf. --footer-cloud-* dans main.css :root). */
	margin-top: calc(-1 * var(--footer-cloud-height));

	/* Nudge vertical du wordmark (hauteur de coupe ; positif = descend). */
	--footer-wordmark-offset: 4%;

	/* Remontée du masque : le haut plat du drache déborde le bord pour
	   éviter un liseré de fond au-dessus du trou. */
	--footer-cloud-shift: -16px;
}

/* Le dernier bloc du main réserve la hauteur du nuage : son fond est ce que
   le trou drache laisse voir, et son contenu ne passe pas sous le footer.
   !important volontaire : les blocs Gutenberg posent leur padding en style
   INLINE (réglage Dimensions du bloc), qu'aucune spécificité de sélecteur ne
   peut battre. C'est le seul cas du thème où !important est justifié, et il est
   borné à cette réserve structurelle. La hauteur du nuage (~223px) dépasse de
   toute façon le padding-bottom d'une section, donc le contenu garde sa marge. */
.site-main > :last-child {
	padding-bottom: var(--footer-cloud-height) !important;
}

/* Filet de sécurité : si le main n'a aucun bloc enfant (page vide, ou home en
   cours d'intégration), il n'y a pas de :last-child à réserver et le footer
   remonterait dans le vide. On réserve alors la hauteur directement sur le main.
   :not(:has(> *)) cible l'absence d'enfant ÉLÉMENT (les retours à la ligne du
   template restent des nœuds texte, donc :empty ne matcherait pas). */
.site-main:not(:has(> *)) {
	min-height: var(--footer-cloud-height);
}

/*
 * Fond violet, percé en forme de drache au sommet (le motif révèle
 * l'arrière-plan, pas une forme pleine). Le masque n'agit que sur ce calque :
 * le contenu (Instagram, textes, wordmark) passe au-dessus et reste visible.
 * mask-composite: exclude = on retire la zone drache du fond.
 */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wp--preset--color--bleu-02, #404999);
	-webkit-mask: url(../img/drache.svg) center var(--footer-cloud-shift, -16px) / var(--footer-cloud-width) no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: url(../img/drache.svg) center var(--footer-cloud-shift, -10px) / var(--footer-cloud-width) no-repeat, linear-gradient(#000 0 0);
	mask-composite: exclude;
}

/* Le contenu passe au-dessus du fond masqué. */
.site-footer__top,
.site-footer__inner,
.site-footer__wordmark {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------- Haut : drache + insta --- */

.site-footer__top {
	/* Réserve la hauteur du badge Insta (×1.5) pour que les textes passent dessous. */
	min-height: 230px;
}

.footer-insta {
	position: absolute;
	top: -48px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	display: block;
	width: 270px; /* badge ×1.5 (glyphe ~120px + mot en arc autour) */
	color: var(--wp--preset--color--bleu-02, #404999);
	transition: color 0.2s ease;
}
.footer-insta:hover,
.footer-insta:focus-visible {
	color: var(--wp--preset--color--violet, #7631FF);
}
.footer-insta svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Lettres du mot « INSTAGRAM » (suivent currentColor). */
.insta-letter {
	fill: currentColor;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
	font-size: 24px;
}

/* Glyphe : même rebond que le logo du header (scale + rotation, easing ressort). */
.insta-badge__glyph {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 2s var(--dda-spring);
}
.footer-insta:hover .insta-badge__glyph,
.footer-insta:focus-visible .insta-badge__glyph {
	transform: scale(1.2) rotate(-4deg);
}

/* Lettres : rebond en cascade au survol (une après l'autre). */
.footer-insta:hover .insta-letter,
.footer-insta:focus-visible .insta-letter {
	animation: insta-letter-pop 0.55s ease-out both;
	animation-delay: calc(var(--i) * 0.06s);
}
/* Un seul rebond : la lettre monte, repasse une fois sous le repos, se pose. */
@keyframes insta-letter-pop {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-8px); }
	70%  { transform: translateY(3px); }
	100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.insta-badge__glyph { transition: none; }
	.footer-insta:hover .insta-badge__glyph,
	.footer-insta:focus-visible .insta-badge__glyph { transform: none; }
	.footer-insta:hover .insta-letter,
	.footer-insta:focus-visible .insta-letter { animation: none; }
}

/* ------------------------------------------------- Bloc liens (corps) --- */

.site-footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--6-xl, 5rem);
	max-width: 1680px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--4-xl, 3rem) var(--wp--preset--spacing--6-xl, 5rem);
}

/* Listes de menus : reset commun. */
.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-menu a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md, 1rem); /* nav/sm = 12px */
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--rouge-07, #fef2f5);
	transition: color 0.2s ease;
}
.footer-menu a:hover,
.footer-menu a:focus-visible {
	color: var(--wp--preset--color--yellow, #ffffab);
}

/* Zone marque (gauche). */
.footer-brand {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs, .5rem);
	max-width: 420px;
}
.footer-brand__title {
	margin: 0;
	max-width: 12ch;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--2-xl, 2rem);
	line-height: 1.1;
	color: var(--wp--preset--color--yellow, #ffffab);
}
.footer-brand__baseline {
	margin: 0;
	max-width: 320px;
	font-family: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	font-size: var(--wp--preset--font-size--md, 1rem);
	line-height: 1.5;
	color: var(--wp--preset--color--rouge-07, #fef2f5);
}
/* Menu marque : liens alignés en ligne. */
.footer-brand__nav {
	margin-top: var(--wp--preset--spacing--md, 1rem);
}
.footer-brand__nav .footer-menu {
	display: flex;
	flex-flow: row wrap;
	gap: var(--wp--preset--spacing--lg, 1.25rem);
}

/* Zone aide (droite). */
.footer-help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--md, 1rem);
	text-align: right;
}
.footer-help__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xl, 1.5rem); /* labels/l-lg = 24px */
	color: var(--wp--preset--color--rouge-07, #fef2f5);
}
.footer-help__nav .footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs, .25rem);
	align-items: flex-start;
}
.footer-help .footer-menu a {
	color: var(--wp--preset--color--pink, #f8c9de);
}

/* Sous-bar légale. */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--md, 1rem);
}
.footer-legal__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm, 0.75rem);
}
.footer-legal__menu a {
	font-family: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	text-decoration: none;
	color: var(--wp--preset--color--pink, #f8c9de);
	transition: color 0.2s ease;
}
.footer-legal__menu a:hover,
.footer-legal__menu a:focus-visible {
	color: var(--wp--preset--color--yellow, #ffffab);
}
.footer-copy {
	font-family: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
	color: #fff;
	opacity: 0.4;
}

/* --------------------------------------------------- Wordmark XXL bas --- */

.site-footer__wordmark {
	position: relative;
	/* Hauteur intrinsèque du SVG ≈ 28vw (105vw × 320/1200) ; 26vw ne coupe
	   que le bas des lettres. Même valeur desktop / mobile. */
	height: 26vw;
	overflow: hidden;
	z-index: 0;
}
.footer-wordmark {
	position: absolute;
	top: 0;
	left: 50%;
	width: 105vw;
	height: auto;
	/* Centré horizontalement (translateX -50%) ; l'offset agit en vertical
	   pour régler la hauteur de coupe du mot (positif = descend). */
	transform: translate(-50%, var(--footer-wordmark-offset, 0px));
}
.footer-wordmark text {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
}
.footer-wordmark__solid {
	fill: var(--wp--preset--color--blanc, #fff);
}
.footer-wordmark__outline {
	fill: transparent;
	stroke: var(--wp--preset--color--lilas, #e5b0fe);
	stroke-width: 2.5;
	paint-order: stroke;
}

/* « Bisous » : élément séparé, calé sur la largeur du nuage, superposé au
   sommet de « Bécots » (top réglable). */
.footer-bisous {
	position: absolute;
	top: 8%;
	left: 50%;
	z-index: 0;
	width: var(--footer-cloud-width);
	transform: translateX(-50%) rotate(-2deg);
	pointer-events: none;
}
.footer-bisous__svg {
	display: block;
	width: 100%;
	height: auto;
}
.footer-bisous__svg text {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: 700;
}

/* =================================================== Mobile (<1024px) === */
@media (max-width: 768px) {
	.site-footer__inner {
		padding-top: 0;
	}
}
@media (max-width: 1024px) {
	.site-footer__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--wp--preset--spacing--2-xl, 2rem);
		padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.footer-brand {
		align-items: center;
		max-width: none;
	}
	.footer-brand__title,
	.footer-brand__baseline {
		max-width: 36ch;
	}

	.footer-help {
		align-items: center;
		text-align: center;
		width: 100%;
	}
	/* Liens d'aide sur 2 colonnes (comme la maquette mobile). */
	.footer-help__nav .footer-menu {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: var(--wp--preset--spacing--md, 1rem) var(--wp--preset--spacing--2-xl, 2rem);
		justify-content: center;
		align-items: start;
	}
	.footer-legal {
		justify-content: center;
	}

	/*
	 * « Bisous » DÉCOUPLÉ de la largeur du nuage.
	 *
	 * La règle de base lui donne var(--footer-cloud-width), qui vaut 27,8vw en
	 * bureau (le plafond de 400 px mord) mais 80vw en mobile. « Bécots », lui,
	 * reste à 105vw partout : « Bisous » se retrouvait deux fois trop gros en
	 * proportion et passait sous « Bécots » au lieu de le coiffer.
	 *
	 * 27,8vw est exactement ce que la variable vaut à 1440 : le rapport entre les
	 * deux mots redevient celui du bureau. Le max-width de 240 px qui était ici
	 * traitait le symptôme, pas la cause.
	 */
	.footer-bisous {
		width: 40vw;
		top: 4%;
	}

	/* Badge Insta ramené à une taille mobile (le ×2 desktop déborderait). */
	.footer-insta {
		width: 220px;
		/*
		 * −64, la même valeur qu'au-dessus de 1280. Valeur d'Hubert, à l'œil.
		 *
		 * J'avais posé ici un calcul qui centrait le badge dans le trou. Il
		 * faisait ce qu'il annonçait, mais le centre géométrique n'est pas le
		 * centre optique : le drache est bombé en haut et échancré en bas, donc
		 * le badge y paraissait bas. Une valeur en dur est le bon outil quand
		 * c'est l'œil qui tranche.
		 */
		top: -64px;
	}
	.site-footer__top {
		min-height: 190px;
	}
}

/* ============================================== Grand écran (≥1280px) === */
/* Placé en fin de fichier : une media query n'augmente pas la spécificité,
   donc ces règles doivent venir APRÈS les règles de base pour les emporter. */
@media (min-width: 1280px) {
	/* Bloc haut sorti du flux : __inner démarre tout en haut du footer.
	   Le badge Insta (absolute) reste centré au sommet, au-dessus des colonnes. */
	.site-footer__top {
		position: absolute;
		inset: 0 0 auto 0;
		min-height: 0;
		z-index: 2;
	}

	.footer-insta {
		top: -64px;
	}
	/* Écart central = largeur du nuage ; + 40px de marge interne côté nuage. */
	.site-footer__inner {
		gap: var(--footer-cloud-width);
		padding-bottom: 0;
	}
	.footer-brand {
		padding-right: var(--wp--preset--spacing--3-xl, 2.5rem);
	}
	.footer-help {
		padding-left: var(--wp--preset--spacing--3-xl, 2.5rem);
	}
	.footer-bisous {
		top: 16%;
	}
	/* Tout le bloc wordmark remonte de 40px ; la marge négative raccourcit le
	   footer d'autant, donc le bas du wordmark reste collé au bas du footer. */
	.site-footer__wordmark {
		margin-top: -24px;
	}
}