/*
 * La feuille de la vitrine.
 *
 * Elle n'existait pas : les dix pages portaient chacune leur propre bloc
 * <style>, identique a 3 446 caracteres pres sur huit d'entre elles. Un
 * changement de nuance se faisait donc dix fois, et une page finissait toujours
 * par diverger - `--sur-accent`, par exemple, n'etait declare que dans
 * index.html, si bien que le signe des neuf autres pages se dessinait en NOIR
 * sur l'indigo au lieu du creme.
 *
 * La politique de securite servie autorise `style-src 'self'`, donc un fichier
 * du meme domaine ne coute aucune permission nouvelle, et il se met en cache.
 *
 * Les valeurs suivent `src/app.css` : c'est la meme charte, sur deux projets de
 * deploiement distincts. Avant de toucher une teinte : `node brand/contraste.mjs`.
 */

/* EB Garamond, servie depuis notre domaine: aucune requete tierce, jamais.
   Licence SIL OFL 1.1, texte dans /fonts/. */
@font-face {
	font-family: 'EB Garamond Variable';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('/fonts/eb-garamond-latin.woff2') format('woff2-variations');
}

:root {
	color-scheme: light;
	/* Le papier est descendu d'un cran et la surface a cesse d'etre blanche : un
	   fond chaud recouvert de cartes en #ffffff, c'est un papier annonce et
	   jamais vu. */
	--fond: #f7f4ec;
	--surface: #fffdf8;
	--surface-2: #f0ebdf;
	--texte: #1b1a17;
	--texte-2: #5e5a52;
	/* Des filets, et non un noir transparent : sur un papier chaud, une bordure
	   en rgba() tire vers le gris et refroidit chaque bord de la page. */
	--bordure: #ded5c4;
	--bordure-forte: #b7ab95;
	--accent: #453fa0;
	--accent-fort: #332e7a;
	--accent-fond: #eceaf7;
	--sur-accent: #ffffff;
	--ok: #146b54;

	--titre: 'EB Garamond Variable', Georgia, 'Times New Roman', serif;
	--corps: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--fond: #17161b;
		--surface: #201f27;
		--surface-2: #292830;
		--texte: #eceaf0;
		--texte-2: #b2afbc;
		--bordure: rgba(255, 255, 255, 0.12);
		--bordure-forte: rgba(255, 255, 255, 0.22);
		--accent: #a9a3f2;
		--accent-fort: #c4bffb;
		--accent-fond: #2b2842;
		/* Sur l'accent clair du theme sombre, le blanc ne donne que 3.10:1. */
		--sur-accent: #1a1830;
		--ok: #6bcfad;
	}
}

* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	/* La taille du corps suit celle que le lecteur a choisie dans son navigateur.
	   1,0625rem vaut exactement les 17 px d avant a la taille par defaut : rien ne
	   bouge tant que le lecteur ne demande rien, et tout suit quand il demande. */
	font: 1.0625rem/1.65 var(--corps);
	/*
	 * Un mot plus long que sa ligne emporte le document vers la droite. Mesure du
	 * 2026-08-22 : a 320 px en texte agrandi, l'accueil partait a 1088 px pour un
	 * ecran de 320. `break-word` ne coupe QUE ce qui deborderait et ne touche pas
	 * la taille min-content, donc aucun ecran large ne bouge.
	 */
	overflow-wrap: break-word;
}
h1,
h2,
h3 {
	font-family: var(--titre);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}
a {
	color: var(--accent);
}
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

/* Les references mesurees le 2026-08-11 tiennent leur contenu dans 1 240 a
   1 320 px ; cette page en faisait 992. */
.conteneur {
	max-width: 74rem;
	margin: 0 auto;
	/*
	 * Le blanc lateral est plafonne : en texte agrandi la racine double, donc
	 * 1,25 rem vaut 40 px de chaque cote et retire 80 px d'une ligne de 320.
	 * Mesure du 2026-08-23 : c'est ce qui faisait casser la soudure de
	 * « cabinet d'analyse : » sur /charges-cabinet-regime-fiscal, la coupure
	 * tombant sur l'insecable faute de place. A 16 px de racine les deux termes
	 * valent 20, donc rien ne bouge nulle part a taille normale.
	 */
	padding: 0 min(1.25rem, 20px);
}

/*
 * Le bloc encadre : un filet, aucun rayon, et la place pleine du signe posee
 * sur le filet du haut, un peu a droite - jamais au milieu, comme dans le
 * signe. C'est le seul motif que cette identite repete.
 */
.bloc {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--bordure);
	/* Le blanc lateral est plafonne : en rem il retire 96 px d une ligne de 320
	   quand le lecteur double sa taille de texte. */
	padding: 1.4rem min(1.5rem, 24px);
}
.bloc::before {
	content: '';
	position: absolute;
	top: -4px;
	left: 2.4rem;
	width: 7px;
	height: 7px;
	background: var(--accent);
}
.bloc h3 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}
.bloc p {
	margin: 0;
	color: var(--texte-2);
	font-size: 0.98rem;
}

/* L'intitule qui s'efface devant ce qu'il annonce. */
.lib {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--texte-2);
}

/* ------------------------------- l'en-tete ------------------------------- */

header.page {
	border-bottom: 1px solid var(--bordure);
	padding: 1rem 0;
	background: var(--surface);
}
header.page .conteneur {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.logo {
	display: inline-grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	background: var(--accent);
	color: var(--sur-accent);
	font-family: var(--titre);
	font-size: 1.25rem;
	text-decoration: none;
}
header.page .marque {
	font-family: var(--titre);
	font-size: 1.2rem;
	text-decoration: none;
	color: var(--texte);
}

/* ------------------------------- le document ----------------------------- */

main {
	padding: 2.6rem 0 1rem;
}
/* La prose garde sa justification etroite : 74 rem est la largeur de la PAGE,
   pas celle d'une ligne de texte. */
.doc {
	max-width: 46rem;
}
.doc h1 {
	font-size: clamp(1.9rem, 4vw, 2.5rem);
	margin: 0 0 0.4rem;
}
.maj {
	color: var(--texte-2);
	font-size: 0.95rem;
	margin: 0 0 2rem;
}
.doc h2 {
	font-size: 1.35rem;
	margin: 2.4rem 0 0.8rem;
}
.doc h3 {
	font-size: 1.08rem;
	margin: 1.4rem 0 0.5rem;
}
.doc p {
	margin: 0 0 1rem;
}
/* Le retrait de la puce est plafonne en pixels : en rem il DOUBLE avec la taille
   de texte du lecteur et retirait 42 px d une ligne de 320 - assez pour que la
   coupure tombe sur l insecable de « d inexactitudes ; » sur /cgu. A 16 px de
   racine les deux termes valent 21, donc rien ne bouge a taille normale. */
.doc ul {
	margin: 0 0 1rem;
	padding-left: min(1.3rem, 21px);
}
.doc li {
	margin-bottom: 0.4rem;
}
.doc strong {
	color: var(--texte);
}
/* La liste de champs des mentions legales : un libelle, une valeur, sans
   puce. */
.champs {
	list-style: none;
	margin: 0 0 0.9rem;
	padding: 0;
	display: grid;
	/* Une grille SANS piste declaree en recoit une implicite `auto`, dont le
	   plancher est la min-content de la cellule - et `overflow-wrap` ne descend
	   PAS une min-content. « www.cloudflare.com » tenait donc 344 px et emportait
	   la page de 44 px sur /mentions-legales a 320 px en texte agrandi. */
	grid-template-columns: minmax(0, 1fr);
	gap: 0.35rem;
}
.champs li {
	color: var(--texte-2);
}
.champs strong {
	color: var(--texte);
	font-weight: 600;
}
.encart {
	background: var(--accent-fond);
	border: 1px solid var(--bordure);
	padding: 1rem 1.2rem;
	margin: 0 0 1.4rem;
	color: var(--texte);
}
.encart p {
	margin: 0;
}
.retour {
	display: inline-block;
	margin: 2rem 0 0;
	font-size: 0.98rem;
}

/* ------------------------------- le pied --------------------------------- */

footer {
	border-top: 1px solid var(--bordure);
	margin-top: 3rem;
	padding: 2rem 0 2.6rem;
	color: var(--texte-2);
	font-size: 0.92rem;
}
footer .conteneur {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	justify-content: space-between;
}
footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
}