/* Système visuel de l'accueil GMR — généré par tools/build_gmr_home.py.
   NE PAS ÉDITER À LA MAIN : relancer le script après une nouvelle maquette.

   Les jetons sont éclatés selon ce dont ils dépendent RÉELLEMENT : la
   variante gouverne typo/cartes/rythme des sections, le thème du héros
   gouverne le héros et les sections 02/03, la vue gouverne la largeur.

   Les jetons de thème portent la variante dans leur sélecteur parce que les
   deux maquettes emploient les MÊMES noms pour des valeurs différentes
   (`--hbd`, `--hstroke`, `--htrack`). Un bloc non qualifié laisserait la
   dernière maquette générée repeindre l'autre. */

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: #0E100B; }
* { box-sizing: border-box; }
a { color: #3F6B1F; text-decoration: none; }
a:hover { color: #15170F; }
::selection { background: #77BD43; color: #15170F; }
@keyframes gmrDrawPath { from { stroke-dashoffset: 830; } to { stroke-dashoffset: 0; } }
@keyframes gmrNodeOn { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes gmrReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gmrRevealX { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { [data-anim] { animation: none !important; } }
@keyframes gmrDraw { from { stroke-dashoffset: 340; } to { stroke-dashoffset: 0; } }
@keyframes gmrLit { from { opacity: 0; transform: scale(0.35); } to { opacity: 1; transform: scale(1); } }
@keyframes gmrBloom { 0% { opacity: 0; } 28% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gmrWord { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-anim], [data-anim] * { animation: none !important; } }

/* Cadre de page — déclarations communes aux maquettes. */
.gmr-page {
  container-type: inline-size;
  max-width: var(--page-max, 100%);
  margin: 0 auto;
  background: #FAFAF6;
  color: #22221E;
  font-family: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Cadre propre à la maquette v1. */
[data-variante="A"] .gmr-page,
[data-variante="B"] .gmr-page,
[data-variante="C"] .gmr-page {
  box-shadow: 0 0 0 1px #2C2F24;
}

/* Conteneurs conditionnels — remplacent les <sc-if> de la maquette. */
.gmr-when { display: none; }
[data-variante="A"] .gmr-when[data-when~="variante:A"] { display: contents; }
[data-variante="B"] .gmr-when[data-when~="variante:B"] { display: contents; }
[data-variante="C"] .gmr-when[data-when~="variante:C"] { display: contents; }
[data-variante="D"] .gmr-when[data-when~="variante:D"] { display: contents; }
[data-cta="conseiller"] .gmr-when[data-when~="cta:conseiller"] { display: contents; }
[data-cta="soumission"] .gmr-when[data-when~="cta:soumission"] { display: contents; }
[data-notes="1"] .gmr-when[data-when~="notes"] { display: contents; }

/* Jetons par variante (typographie, cartes, rythme des surfaces).
   Propres à la maquette v1 : l'itération 3 code sa typo en dur. */
[data-variante="A"] {
  --hf: 'Khand', 'Bahnschrift SemiCondensed', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --h1: clamp(46px, 7.4cqw, 100px);
  --h2: clamp(32px, 4.4cqw, 56px);
  --h2b: clamp(28px, 3.2cqw, 42px);
  --h3: clamp(26px, 2.4cqw, 32px);
  --htr: 0.01em;
  --hlh: 0.9;
  --ct: 27px;
  --cti: 22px;
  --cmin: 290px;
  --imin: 240px;
  --cr: 20px;
  --cri: 18px;
  --cpad: 26px 28px 24px;
  --cpadi: 20px 22px;
  --s5-bg: #15170F;
  --s5-fg: #F4F4EE;
  --s5-acc: #9BD46B;
  --s5-acc-solide: #3F6B1F;
  --s5-c: #20221a;
  --s5-c2: #292b23;
  --s5-bd: #34362e;
  --s5-bd2: #4b4c45;
  --s5-bd3: #6e6f68;
  --s5-m2: #adada7;
  --s5-m: #c3c3bd;
  --s6-bg: #FAFAF6;
  --s6-fg: #22221E;
  --s6-acc: #3F6B1F;
  --s6-acc-solide: #9BD46B;
  --s6-c: #efefeb;
  --s6-c2: #e7e7e3;
  --s6-bd: #dcdcd8;
  --s6-bd2: #c6c6c2;
  --s6-bd3: #a4a4a0;
  --s6-m2: #676763;
  --s6-m: #52524e;
  --s7-bg: #15170F;
  --s7-fg: #F4F4EE;
  --s7-acc: #9BD46B;
  --s7-acc-solide: #3F6B1F;
  --s7-c: #20221a;
  --s7-c2: #292b23;
  --s7-bd: #34362e;
  --s7-bd2: #4b4c45;
  --s7-bd3: #6e6f68;
  --s7-m2: #adada7;
  --s7-m: #c3c3bd;
  --s8-bg: #FFFFFF;
  --s8-fg: #22221E;
  --s8-acc: #3F6B1F;
  --s8-acc-solide: #9BD46B;
  --s8-c: #f4f4f4;
  --s8-c2: #ebebeb;
  --s8-bd: #e0e0e0;
  --s8-bd2: #cacac9;
  --s8-bd3: #a7a7a5;
  --s8-m2: #696966;
  --s8-m: #535350;
  --s9-bg: #15170F;
  --s9-fg: #F4F4EE;
  --s9-acc: #9BD46B;
  --s9-acc-solide: #3F6B1F;
  --s9-c: #20221a;
  --s9-c2: #292b23;
  --s9-bd: #34362e;
  --s9-bd2: #4b4c45;
  --s9-bd3: #6e6f68;
  --s9-m2: #adada7;
  --s9-m: #c3c3bd;
}

[data-variante="B"] {
  --hf: 'Archivo Black', 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --h1: clamp(36px, 5cqw, 66px);
  --h2: clamp(25px, 3cqw, 39px);
  --h2b: clamp(23px, 2.5cqw, 32px);
  --h3: clamp(20px, 1.8cqw, 25px);
  --htr: 0.015em;
  --hlh: 1;
  --ct: 21px;
  --cti: 18px;
  --cmin: 420px;
  --imin: 190px;
  --cr: 13px;
  --cri: 10px;
  --cpad: 22px 26px 22px;
  --cpadi: 16px 18px;
  --s5-bg: #15170F;
  --s5-fg: #F4F4EE;
  --s5-acc: #9BD46B;
  --s5-acc-solide: #3F6B1F;
  --s5-c: #20221a;
  --s5-c2: #292b23;
  --s5-bd: #34362e;
  --s5-bd2: #4b4c45;
  --s5-bd3: #6e6f68;
  --s5-m2: #adada7;
  --s5-m: #c3c3bd;
  --s6-bg: #15170F;
  --s6-fg: #F4F4EE;
  --s6-acc: #9BD46B;
  --s6-acc-solide: #3F6B1F;
  --s6-c: #20221a;
  --s6-c2: #292b23;
  --s6-bd: #34362e;
  --s6-bd2: #4b4c45;
  --s6-bd3: #6e6f68;
  --s6-m2: #adada7;
  --s6-m: #c3c3bd;
  --s7-bg: #FAFAF6;
  --s7-fg: #22221E;
  --s7-acc: #3F6B1F;
  --s7-acc-solide: #9BD46B;
  --s7-c: #efefeb;
  --s7-c2: #e7e7e3;
  --s7-bd: #dcdcd8;
  --s7-bd2: #c6c6c2;
  --s7-bd3: #a4a4a0;
  --s7-m2: #676763;
  --s7-m: #52524e;
  --s8-bg: #FFFFFF;
  --s8-fg: #22221E;
  --s8-acc: #3F6B1F;
  --s8-acc-solide: #9BD46B;
  --s8-c: #f4f4f4;
  --s8-c2: #ebebeb;
  --s8-bd: #e0e0e0;
  --s8-bd2: #cacac9;
  --s8-bd3: #a7a7a5;
  --s8-m2: #696966;
  --s8-m: #535350;
  --s9-bg: #15170F;
  --s9-fg: #F4F4EE;
  --s9-acc: #9BD46B;
  --s9-acc-solide: #3F6B1F;
  --s9-c: #20221a;
  --s9-c2: #292b23;
  --s9-bd: #34362e;
  --s9-bd2: #4b4c45;
  --s9-bd3: #6e6f68;
  --s9-m2: #adada7;
  --s9-m: #c3c3bd;
}

[data-variante="C"] {
  --hf: 'Khand', 'Bahnschrift SemiCondensed', 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --h1: clamp(52px, 8.6cqw, 122px);
  --h2: clamp(36px, 5.2cqw, 66px);
  --h2b: clamp(30px, 3.8cqw, 48px);
  --h3: clamp(28px, 2.8cqw, 38px);
  --htr: -0.012em;
  --hlh: 0.84;
  --ct: 30px;
  --cti: 24px;
  --cmin: 330px;
  --imin: 265px;
  --cr: 26px;
  --cri: 24px;
  --cpad: 32px 32px 30px;
  --cpadi: 26px 26px;
  --s5-bg: #FAFAF6;
  --s5-fg: #22221E;
  --s5-acc: #3F6B1F;
  --s5-acc-solide: #9BD46B;
  --s5-c: #efefeb;
  --s5-c2: #e7e7e3;
  --s5-bd: #dcdcd8;
  --s5-bd2: #c6c6c2;
  --s5-bd3: #a4a4a0;
  --s5-m2: #676763;
  --s5-m: #52524e;
  --s6-bg: #FFFFFF;
  --s6-fg: #22221E;
  --s6-acc: #3F6B1F;
  --s6-acc-solide: #9BD46B;
  --s6-c: #f4f4f4;
  --s6-c2: #ebebeb;
  --s6-bd: #e0e0e0;
  --s6-bd2: #cacac9;
  --s6-bd3: #a7a7a5;
  --s6-m2: #696966;
  --s6-m: #535350;
  --s7-bg: #15170F;
  --s7-fg: #F4F4EE;
  --s7-acc: #9BD46B;
  --s7-acc-solide: #3F6B1F;
  --s7-c: #20221a;
  --s7-c2: #292b23;
  --s7-bd: #34362e;
  --s7-bd2: #4b4c45;
  --s7-bd3: #6e6f68;
  --s7-m2: #adada7;
  --s7-m: #c3c3bd;
  --s8-bg: #15170F;
  --s8-fg: #F4F4EE;
  --s8-acc: #9BD46B;
  --s8-acc-solide: #3F6B1F;
  --s8-c: #20221a;
  --s8-c2: #292b23;
  --s8-bd: #34362e;
  --s8-bd2: #4b4c45;
  --s8-bd3: #6e6f68;
  --s8-m2: #adada7;
  --s8-m: #c3c3bd;
  --s9-bg: #FAFAF6;
  --s9-fg: #22221E;
  --s9-acc: #3F6B1F;
  --s9-acc-solide: #9BD46B;
  --s9-c: #efefeb;
  --s9-c2: #e7e7e3;
  --s9-bd: #dcdcd8;
  --s9-bd2: #c6c6c2;
  --s9-bd3: #a4a4a0;
  --s9-m2: #676763;
  --s9-m: #52524e;
}

/* Jetons par thème du héros — v1 (héros + sections 02 et 03). */
[data-variante="A"][data-theme-hero="nuit"],
[data-variante="B"][data-theme-hero="nuit"],
[data-variante="C"][data-theme-hero="nuit"] {
  --hbg: #15170F;
  --hfg: #F4F4EE;
  --hacc: #9BD46B;
  --htitre: #77BD43;
  --hstroke: #77BD43;
  --htrack: #2C2F24;
  --hring: #F4F4EE;
  --hcore: #15170F;
  --hm: #c3c3bd;
  --hm2: #adada7;
  --hbd: #393a33;
  --p2-bg: #FFFFFF;
  --p2-fg: #22221E;
  --p2-acc: #3F6B1F;
  --p2-c: #f4f4f4;
  --p2-c2: #ebebeb;
  --p2-bd: #e0e0e0;
  --p2-bd2: #cacac9;
  --p2-bd3: #a7a7a5;
  --p2-m2: #696966;
  --p2-m: #535350;
  --p3-bg: #15170F;
  --p3-fg: #F4F4EE;
  --p3-acc: #9BD46B;
  --p3-c: #20221a;
  --p3-c2: #292b23;
  --p3-bd: #34362e;
  --p3-bd2: #4b4c45;
  --p3-bd3: #6e6f68;
  --p3-m2: #adada7;
  --p3-m: #c3c3bd;
  --p3-sbg: #77BD43;
  --p3-sfg: #15170F;
}

[data-variante="A"][data-theme-hero="jour"],
[data-variante="B"][data-theme-hero="jour"],
[data-variante="C"][data-theme-hero="jour"] {
  --hbg: #FAFAF6;
  --hfg: #22221E;
  --hacc: #3F6B1F;
  --htitre: #4E9427;
  --hstroke: #15170F;
  --htrack: #DCDCD2;
  --hring: #15170F;
  --hcore: #77BD43;
  --hm: #52524e;
  --hm2: #676763;
  --hbd: #d7d7d3;
  --p2-bg: #15170F;
  --p2-fg: #F4F4EE;
  --p2-acc: #9BD46B;
  --p2-c: #20221a;
  --p2-c2: #292b23;
  --p2-bd: #34362e;
  --p2-bd2: #4b4c45;
  --p2-bd3: #6e6f68;
  --p2-m2: #adada7;
  --p2-m: #c3c3bd;
  --p3-bg: #FAFAF6;
  --p3-fg: #22221E;
  --p3-acc: #3F6B1F;
  --p3-c: #efefeb;
  --p3-c2: #e7e7e3;
  --p3-bd: #dcdcd8;
  --p3-bd2: #c6c6c2;
  --p3-bd3: #a4a4a0;
  --p3-m2: #676763;
  --p3-m: #52524e;
  --p3-sbg: #15170F;
  --p3-sfg: #F4F4EE;
}

/* Jetons par thème du héros — itération 3 (vocabulaire distinct). */
[data-variante="D"][data-theme-hero="nuit"] {
  --hbg: #15170F;
  --hfg: #F4F4EE;
  --hacc: #9BD46B;
  --hm: #c3c3bd;
  --hm2: #adada7;
  --hbd: #34362e;
  --htitre: #77BD43;
  --hstroke: #FFFFFF;
  --hring: #FFFFFF;
  --htrack: #32342c;
  --hbulle: 0.13;
  --hglow: drop-shadow(0 0 6px rgba(119,189,67,0.85)) drop-shadow(0 0 18px rgba(119,189,67,0.4));
  --p2bg: #FFFFFF;
  --p2fg: #22221E;
  --p2acc: #3F6B1F;
  --p2m: #535350;
  --p2bd: #e0e0e0;
  --p2c2: #ebebeb;
  --p3bg: #15170F;
  --p3fg: #F4F4EE;
  --p3m: #c3c3bd;
  --p3m2: #adada7;
  --p3c: #20221a;
  --p3bd: #34362e;
  --p3sbg: #77BD43;
  --p3sfg: #15170F;
}

[data-variante="D"][data-theme-hero="jour"] {
  --hbg: #FAFAF6;
  --hfg: #22221E;
  --hacc: #3F6B1F;
  --hm: #52524e;
  --hm2: #676763;
  --hbd: #dcdcd8;
  --htitre: #3F6B1F;
  --hstroke: #15170F;
  --hring: #15170F;
  --htrack: #dededa;
  --hbulle: 0.16;
  --hglow: drop-shadow(0 3px 6px rgba(21,23,15,0.26));
  --p2bg: #15170F;
  --p2fg: #F4F4EE;
  --p2acc: #9BD46B;
  --p2m: #c3c3bd;
  --p2bd: #34362e;
  --p2c2: #292b23;
  --p3bg: #FAFAF6;
  --p3fg: #22221E;
  --p3m: #52524e;
  --p3m2: #676763;
  --p3c: #efefeb;
  --p3bd: #dcdcd8;
  --p3sbg: #15170F;
  --p3sfg: #F4F4EE;
}

/* Vue : la revue mobile contraint la page à une largeur de téléphone. */
[data-vue="desktop"] { --page-max: 100%; }
[data-vue="mobile"] { --page-max: 390px; }

/* Survol et focus — traduits des attributs style-hover / style-focus de la maquette. */
.gh1:hover { background: #22251C; color: #F4F4EE; }
.gh2:hover { color: #F4F4EE; }
.gh3:hover { background: #8FD35C; color: #15170F; }
.gh4:hover { background: var(--hfg, #F4F4EE); color: var(--hbg, #15170F); }
.gh5:hover { border-color: #77BD43; }
.gh6:hover { border-color: #77BD43; background: var(--s5-c2); color: var(--s5-fg, #F4F4EE); }
.gh7:hover { color: #15170F; }
.gh8:hover { border-color: #77BD43; color: var(--s9-fg, #F4F4EE); }
.gh9:hover { background: #15170F; color: #FFFFFF; }
.gh10:hover { background: #22221E; color: #FFFFFF; }
.gh11:hover { border-color: #77BD43; background: #22251C; color: #F4F4EE; }
.gh12:hover { border-color: #77BD43; color: #F4F4EE; }
.gh13:hover { background: #8FD35C; }
.gf1:focus-visible { outline: 3px solid #4E9427; outline-offset: 3px; }
.gf2:focus-visible { outline: 3px solid #77BD43; outline-offset: 3px; }
.gf3:focus-visible { outline: 3px solid #3F6B1F; outline-offset: 3px; }
.gf4:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }