/**
 * Pied de page.
 * Emplacement : assets/css/components/footer.css
 */

.site-footer {
	position: relative;
	overflow: hidden;
	background-color: var(--e4y-cream);
}

/* Filet multicolore en haut du footer. */
.site-footer__rule {
	height: 4px;
	background: linear-gradient(
		to right,
		var(--e4y-sand)   0    14%,
		var(--e4y-green)  14%  28%,
		var(--e4y-amber)  28%  42%,
		var(--e4y-orange) 42%  52%,
		var(--e4y-green)  52%  70%,
		var(--e4y-amber)  70%  100%
	);
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-6);
	padding-block: var(--space-7);
}


/* ------------------------------------------------------------
   Logo
   ------------------------------------------------------------ */

.site-footer__logo {
	display: inline-block;
	line-height: 0;
}

.site-footer__mark {
	width: auto;
	height: 150px;  /* SVG viewBox 148×162 : cercle sur ~104px + texte baseline */
}


/* ------------------------------------------------------------
   Titres et listes
   ------------------------------------------------------------ */

.site-footer__heading {
	margin-block-end: var(--space-1);  /* 4 px entre le titre et la liste */
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	font-weight: var(--fw-bold);
	color: var(--e4y-green);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);  /* resserré : 4 px entre les liens */
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list a {
	font-size: var(--fs-body);  /* Figma : 16 px (était --fs-small = 14 px) */
	color: var(--e4y-green);
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
}

.site-footer__text {
	max-width: 40ch;
	margin-block-end: var(--space-4);
	font-size: var(--fs-small);
	color: var(--e4y-green);  /* Figma : même vert que le reste du footer */
}


/* ------------------------------------------------------------
   Signature et mentions
   ------------------------------------------------------------ */

.site-footer__baseline {
	max-width: 22ch;
	font-size: var(--fs-lead);  /* Figma : 18 px ≈ --fs-lead borne basse */
	font-weight: var(--fw-regular);  /* Figma : Book (regular), pas semibold */
	line-height: 1.1;               /* Figma : line-height 100 %, très serré */
	color: var(--e4y-green);
}

.site-footer__legal {
	margin-block-start: var(--space-6);   /* espace entre baseline et le filet */
	padding-block-start: var(--space-4);
	font-size: var(--fs-caption);
	color: var(--e4y-green);
	border-block-start: 1px solid var(--e4y-green);
}


/* ------------------------------------------------------------
   Arc décoratif
   ------------------------------------------------------------ */

.site-footer__arc {
	position: absolute;
	right: -300px;
	bottom: -400px;
	width: 600px;
	height: 600px;
	border-radius: var(--radius-full);
	/* Quadrant visible : CSS 289°–360° (entre le bas x=1157 et la droite y=175).
	   Orange en bas, ambré au centre, vert en haut. */
	background: conic-gradient(
		from 0deg at center,
		transparent        0deg    289.5deg,
		var(--e4y-orange)  289.5deg 313deg,
		var(--e4y-amber)   313deg   342deg,
		var(--e4y-green)   342deg   360deg
	);
	/* Masque anneau ~28 px (rayon intérieur 272, extérieur 300) */
	-webkit-mask: radial-gradient(circle at center, transparent 271px, black 272px 299px, transparent 300px);
	mask: radial-gradient(circle at center, transparent 271px, black 272px 299px, transparent 300px);
	pointer-events: none;
}


/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 900px) {

	.site-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--space-5) var(--space-8);  /* row 24px (espace logo→baseline), col 64px */
		padding-block: var(--space-6) var(--space-5);
		grid-template-areas:
			'brand nav newsletter'
			'baseline nav newsletter'
			'legal legal legal';
		align-items: start;
	}

	.site-footer__brand      { grid-area: brand; }
	.site-footer__nav        { grid-area: nav; }
	.site-footer__newsletter { grid-area: newsletter; }
	.site-footer__baseline   { grid-area: baseline; }
	.site-footer__legal      { grid-area: legal; }

	.site-footer__mark {
		height: 150px;
	}

}


/* ============================================================
   Mobile — l'arc redevient un accent de coin

   À 600 px de diamètre sur un écran de 402, il traversait la baseline et la
   mention légale, qui se lisaient par-dessus une bande orange. Réduit de
   moitié et repoussé dans l'angle, il redevient ce qu'il est sur desktop :
   une signature discrète. Le trait suit la même réduction, sans quoi il
   paraîtrait deux fois plus épais.
   ============================================================ */

@media (max-width: 899px) {

	/* Centre calé sur le bord droit, 20 px sous le bas : le quart de cercle
	   visible est celui qui porte les couleurs, et son sommet passe juste sous
	   le filet de la mention légale. Tout diamètre plus grand rattrape le texte
	   — l'arc s'élargit à mesure qu'il monte vers son sommet. */
	.site-footer__arc {
		right: -100px;
		bottom: -120px;
		width: 200px;
		height: 200px;
		-webkit-mask: radial-gradient(circle at center, transparent 90px, black 91px 99px, transparent 100px);
		mask: radial-gradient(circle at center, transparent 90px, black 91px 99px, transparent 100px);
	}

	/* La baseline n'a plus à se serrer sur 22 caractères : la colonne est
	   étroite, elle se replie d'elle-même. */
	.site-footer__baseline {
		max-width: none;
	}

}