/* =============================================================
   GESTION WEB FRANCE — CHARTE
   Variables, typographie, grille. Aucun composant ici.
   ============================================================= */

/* -------------------------------------------------------------
   POLICES — auto-hébergées, aucune requête externe
   -------------------------------------------------------------
   Ni Google Fonts, ni CDN : les fichiers sont servis par le site
   lui-même. Deux conséquences, et les deux comptent :

   — RGPD : aucune adresse IP de visiteur n'est transmise à un tiers,
     ce qui a valu des condamnations à des sites français ;
   — vitesse : pas de résolution DNS ni de connexion vers un autre
     domaine avant que le texte puisse s'afficher.

   Ce sont des polices VARIABLES : un seul fichier par famille couvre
   toutes les graisses de 100 à 900. Deux fichiers, 71 Ko en tout,
   là où six fichiers statiques en auraient pesé plus du double.

   font-display:swap : le texte s'affiche immédiatement dans la police
   système, puis bascule. Jamais de page blanche en attendant.
   ------------------------------------------------------------- */
@font-face{
	font-family:'Manrope';
	src:url('../fonts/manrope-var.woff2') format('woff2');
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
		U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
		U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
	font-family:'Inter';
	src:url('../fonts/inter-var.woff2') format('woff2');
	font-weight:100 900;
	font-style:normal;
	font-display:swap;
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
		U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
		U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
	/* --- Couleurs ------------------------------------------- */
	--gw-encre:#10171f;          /* anthracite bleuté — sections fortes */
	--gw-encre-clair:#1b2530;
	--gw-cuivre:#c2762c;         /* accent principal — chaleur, artisanat */
	--gw-cuivre-clair:#e09a44;
	--gw-cuivre-sombre:#9c5c1c;

	/* Le cuivre principal est fait pour les traits et les bordures.
	   Rempli et surmonté de blanc, il ne donne que 3,55 de contraste,
	   sous le seuil de 4,5 exigé pour un texte. Cette nuance-ci, à
	   peine plus dense, atteint 4,98 : c'est elle qui remplit les
	   boutons et tout aplat portant du texte blanc. */
	--gw-cuivre-action:#a35f1e;
	--gw-creme:#f8f6f3;          /* fond clair, légèrement chaud */
	--gw-blanc:#ffffff;
	/* ⚠ RÈGLE DU PROJET : on n'écrit pas en gris.
	   Ces valeurs ont été descendues deux fois. Un texte de contenu
	   se lit en encre, pas en gris moyen : le confort de lecture
	   prime sur la nuance décorative entre deux niveaux de texte.
	   Le peu d'écart qui reste suffit à hiérarchiser. */
	--gw-texte:#141a21;
	--gw-texte-doux:#2b333c;
	--gw-gris:#48525d;
	--gw-ligne:#e4e0da;

	/* --- Typographie ---------------------------------------- */
	--gw-titre:'Manrope','Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,sans-serif;
	--gw-corps:'Inter','Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif;
	--gw-mono:ui-monospace,'Cascadia Mono','SF Mono',Menlo,monospace;

	/* --- ÉCHELLE TYPOGRAPHIQUE ------------------------------
	   NEUF crans, et pas un de plus.
	   Le site en comptait vingt-huit, dont quinze paires séparées
	   par un demi-pixel : l'œil ne distingue pas 17 de 17,5, mais
	   il ressent le désordre que cela produit.

	   Toute nouvelle règle DOIT piocher ici. Écrire une valeur en
	   dur, c'est ajouter un vingt-neuvième cran.
	   ------------------------------------------------------- */
	--t-titre-page:clamp(32px,4.6vw,52px);   /* h1 */
	--t-titre-section:clamp(26px,3.4vw,38px);/* h2 de section */
	--t-titre-bloc:clamp(23px,2.6vw,29px);   /* h2 dans le texte */
	--t-sous-titre:23.5px;                   /* h3 */
	--t-carte:21px;                          /* titre de carte */
	--t-accroche:20.5px;                     /* chapô, phrase forte */
	--t-corps:19px;                          /* LE texte */
	--t-second:17px;                         /* mentions, liens secondaires */
	--t-label:14.5px;                        /* étiquettes, surtitres */

	/* --- Rythme --------------------------------------------- */
	/* La colonne de lecture est passée de 760 à 880 px, et le corps
	   de 17,5 à 19 px EN MÊME TEMPS. Élargir seul aurait allongé la
	   ligne à une centaine de signes, au-delà de ce que l'œil suit
	   sans effort : c'est la taille du texte qui doit croître avec
	   la colonne, sinon on gagne en surface ce qu'on perd en
	   lisibilité. */
	--gw-large:1240px;
	--gw-etroit:880px;
	--gw-gouttiere:24px;
	--gw-rayon:10px;
	--gw-rayon-large:16px;

	/* --- Profondeur ----------------------------------------- */
	--gw-ombre:0 1px 2px rgba(16,23,31,.04),0 8px 24px rgba(16,23,31,.07);
	--gw-ombre-forte:0 2px 4px rgba(16,23,31,.06),0 18px 40px rgba(16,23,31,.12);

	/* --- Mouvement ------------------------------------------ */
	--gw-transition:.18s cubic-bezier(.4,0,.2,1);
}

/* -------------------------------------------------------------
   BASE
   ------------------------------------------------------------- */
.gw{
	font-family:var(--gw-corps);
	font-size:var(--t-corps);
	line-height:1.7;
	color:var(--gw-texte);
	background:var(--gw-blanc);
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}

.gw h1,.gw h2,.gw h3,.gw h4,.gw h5{
	font-family:var(--gw-titre);
	font-weight:700;
	/* ☠️ INTERLIGNE FLUIDE, ET NON UN RATIO UNIQUE.
	   Le site appliquait 1,15 à TOUS les titres, du h1 de 52 px au h3 de
	   23,5. Or un ratio constant ne peut pas convenir aux deux : à 52 px
	   il laisse un trou entre les lignes, et à 32 px sur mobile — où le
	   même h1 passe sur quatre lignes — il les serre trop.

	   `calc(1em + 0.28rem)` ajoute une hauteur FIXE de 4,5 px à la taille
	   du texte. Le ratio se règle donc tout seul, dans le bon sens :
	     52 px → 1,10   ·   38 px → 1,13   ·   32 px → 1,16   ·   23,5 → 1,21
	   🪤 Attention : la base rem de ce site est à 10 px, pas 16. `.5rem`
	   vaut donc 5 px — un `.28rem` calculé pour du 16 px serrait trop.
	   Plus le titre est gros, plus il se resserre. C'est la règle
	   typographique de base, et elle vaut à toutes les largeurs d'écran. */
	line-height:calc(1em + .5rem);
	letter-spacing:-.02em;
	color:var(--gw-encre);
	margin:0 0 .55em;
	text-wrap:balance;          /* évite les titres à une seule veuve */
}
.gw h1{font-size:var(--t-titre-page);}
.gw h2{font-size:var(--t-titre-section);}
.gw h3{font-size:var(--t-sous-titre);}
.gw h4{font-size:var(--t-accroche);}

/* text-wrap:pretty interdit qu'un mot seul tombe en fin de
   paragraphe. Le défaut ne pourra donc plus revenir, même si les
   textes changent plus tard. */
.gw p,.gw li{text-wrap:pretty;}

/* ☠️ PAS DE « balance » DANS UNE COLONNE DE TEXTE SUIVI.
   -------------------------------------------------------------
   Il y était, pour éviter les dernières lignes trop courtes. Mais
   « balance » raccourcit TOUTES les lignes d'un paragraphe pour les
   égaliser entre elles : un paragraphe de deux lignes s'arrêtait à
   58 % de la colonne pendant que son voisin allait à 93 %. Mesuré :
   21 points d'écart en moyenne, 35 sur un article.

   Dans un texte suivi, ce qui compte n'est pas que les lignes d'un
   paragraphe soient égales entre elles, c'est qu'elles aillent
   toutes au même bord que celles du paragraphe d'à côté. Le corps
   de texte reste donc en « pretty », qui ne touche qu'à la dernière
   ligne.

   « balance » garde tout son sens là où le bloc est court et centré
   — chapô, appel à l'action, carte : il n'y a pas de colonne
   voisine à laquelle s'aligner. C'est la liste ci-dessous. */
.gw .gw-facon p,
.gw .gw-domaine p,
.gw .gw-etape p,
.gw .gw-chapo,
.gw .gw-accueil-asi__texte,
.gw .gw-passerelle__texte,
.gw .gw-asi-rappel__texte,
.gw .gw-definition__texte,
.gw .gw-passage__texte{text-wrap:balance;}
/* 1,15 em sous un paragraphe, c'était moins d'une ligne d'écart :
   deux paragraphes se lisaient comme un seul bloc. À 1,35 em, la
   séparation se voit sans que le texte se disperse. */
.gw p{margin:0 0 1.35em;}
.gw p:last-child{margin-bottom:0;}
.gw strong{font-weight:600;color:var(--gw-encre);}

/* -------------------------------------------------------------
   UNE MISE EN VALEUR NE SE COUPE JAMAIS EN DEUX
   -------------------------------------------------------------
   Un passage en gras qui commence en fin de ligne et se termine
   sur la suivante casse la lecture : l'œil voit deux fragments au
   lieu d'une idée. Dans un bloc centré, le morceau orphelin se
   retrouve seul au milieu de la ligne — c'est encore pire.

   inline-block rend le segment indivisible : s'il ne tient pas
   sur la ligne en cours, il passe à la suivante ENTIER.

   Et s'il est plus large que la colonne, il se replie normalement
   à l'intérieur de lui-même : aucun risque de débordement.

   Volontairement posé sur .gw, donc partout — contenu rédigé
   comme textes des gabarits. Les titres en sont exclus : ils sont
   déjà traités par text-wrap:balance. */
.gw p strong, .gw p b, .gw p em,
.gw li strong, .gw li b, .gw li em,
.gw figcaption strong, .gw figcaption em,
.gw blockquote strong, .gw blockquote em,
.gw dd strong, .gw dd em{
	display:inline-block;
}

.gw a{
	color:var(--gw-cuivre-sombre);
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-thickness:1px;
	transition:color var(--gw-transition);
}
.gw a:hover{color:var(--gw-cuivre);}

.gw ul,.gw ol{margin:0 0 1.15em;padding-left:1.3em;}
.gw li{margin-bottom:.4em;}

.gw img{max-width:100%;height:auto;display:block;}

/* Accessibilité : la cible du clavier doit toujours se voir. */
.gw :focus-visible{
	outline:3px solid var(--gw-cuivre);
	outline-offset:3px;
	border-radius:3px;
}

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion:reduce){
	.gw *,.gw *::before,.gw *::after{
		animation-duration:.01ms !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}

/* -------------------------------------------------------------
   GRILLE
   ------------------------------------------------------------- */
.gw-conteneur{
	width:100%;
	max-width:var(--gw-large);
	margin-inline:auto;
	padding-inline:var(--gw-gouttiere);
}
.gw-conteneur--etroit{max-width:var(--gw-etroit);}

/* ⚖️ DEUX RÉGLAGES À NE PAS CONFONDRE.
   -------------------------------------------------------------
   L'air dont le TEXTE a besoin (entre paragraphes, avant les
   titres) n'a rien à voir avec le rembourrage d'un BLOC. Les deux
   ont été réglés ensemble, et le résultat était faux dans les deux
   sens : à 72 px le texte étouffait, à 100 px les blocs courts —
   l'appel à l'action surtout — flottaient dans le vide.

   Le texte respire donc dans .gw-page__corps et dans les marges de
   titres ; les blocs, eux, restent contenus. */
.gw-section{padding-block:clamp(50px,6vw,84px);}
.gw-section--encre{background:var(--gw-encre);color:#ffffff;}
.gw-section--encre h2,.gw-section--encre h3{color:#fff;}
.gw-section--creme{background:var(--gw-creme);}

.gw-grille{display:grid;gap:clamp(28px,3.4vw,44px);}
.gw-grille--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.gw-grille--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.gw-grille--4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* -------------------------------------------------------------
   UTILITAIRES — le strict nécessaire, pas un framework
   ------------------------------------------------------------- */
/* Cuivre SOMBRE sur fond clair : le cuivre vif ne donne que 3,4:1 de
   contraste sur du blanc, en dessous du seuil de lisibilité. Sur fond
   encre, c'est l'inverse, et la règle suivante rétablit le cuivre clair. */
.gw-surtitre{
	display:inline-block;
	font-family:var(--gw-titre);
	font-size:var(--t-corps);
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--gw-cuivre-sombre);
	margin-bottom:16px;
}
/* Sur fond encre, c'est l'inverse : le cuivre sombre y disparaît,
   le cuivre clair y ressort. Les deux cas sont couverts, sinon
   l'un des deux est toujours illisible. */
.gw-section--encre .gw-surtitre,
.gw-hero .gw-surtitre,
.gw-page__entete .gw-surtitre,
.gw-asi__entete .gw-surtitre{color:var(--gw-cuivre-clair);}

.gw-chapo{
	text-wrap:balance;
	font-size:var(--t-accroche);
	color:var(--gw-texte-doux);
	line-height:1.6;
}
.gw-section--encre .gw-chapo{
	text-wrap:balance;color:#ffffff;}

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.gw-lecteur-seul{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);
	white-space:nowrap;border:0;
}

/* -------------------------------------------------------------
   RESPONSIVE — mobile-first dans l'esprit, dégradé par paliers
   ------------------------------------------------------------- */
@media (max-width:1000px){
	.gw-grille--4{grid-template-columns:repeat(2,minmax(0,1fr));}
	.gw-grille--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:660px){
	.gw{font-size:16px;}
	.gw-grille--2,.gw-grille--3,.gw-grille--4{grid-template-columns:1fr;}
	:root{--gw-gouttiere:18px;}
}