/* ============================================================
   OFA inc. — « Selon les règles de l'art » — styles.css (manifeste v3, 2026-11-01)
   Mobile d'abord (390×844, contrôlé à 375×667), les media queries ajoutent.
   Jetons §2 seulement · Literata seule (§3) · angles droits partout · aucun dégradé, halo ni ombre colorée.
   html.reduce (OS ou ?reduce=1) est lue ici, par site.js et par main.js.
   ============================================================ */

/* ---------- Police : Literata variable (opsz 7-72, wght 400-700), romain seulement, auto-hébergée ---------- */
@font-face {
  font-family: 'Literata';
  src: url(fonts/literata-latin-ext.woff2) format('woff2');
  font-weight: 400 600;   /* mêmes descripteurs que la face latin : un seul jeu segmenté par unicode-range */ font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  src: url(fonts/literata-texte.woff2) format('woff2');   /* instance romain 400-600, opsz 12-24, sous-ensemble latin (43 Ko) */
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2009, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+202F, U+20AC, U+2192;
}
/* Titres, chiffres et grandes lettres : Mona Sans (décision d'Imad, 2026-11-01). QA 2026-11-03 : instance wdth 87-125 %,
   graisse fixée à 650, sous-ensemble aux seuls caractères des titres + alphabet (22,7 Ko au lieu de 71), préchargée pour le H1.
   Les demandes 640 (titres) et 700 (grands signes) tombent sur la même graisse 650, sans synthèse. */
@font-face {
  font-family: 'Mona Sans';
  src: url(fonts/mona-sans-titres.woff2) format('woff2');
  font-weight: 600 700; font-stretch: 87% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mona repli';
  src: local('Arial');
  size-adjust: 100%;
}
/* Repli calé sur Literata (mesuré au navigateur) : CLS < 0,1 pendant l'échange */
@font-face {
  font-family: 'Literata repli';
  src: local('Georgia');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ---------- Jetons (manifeste v3 §2) : l'identité du logo + une gamme profonde ---------- */
:root {
  --abysse:     #050C1B;   /* nouveau v3 : fonds sombres, brume de la 3D */
  --nuit:       #0B172C;
  --navy:       #1A2842;   /* logo, mesuré */
  --navy-2:     #283751;
  --trait:      #7F95AE;   /* nouveau v3 : lignes du tracé régulateur seulement (jamais texte) */
  --brume:      #AAB1BE;
  --argent:     #D9D9DA;   /* logo, mesuré */
  --argent-vif: #EFF0F3;   /* nouveau v3 : bouton principal sur sombre */
  --blanc:      #FFFFFF;
  --gris:       #F0F1F3;
  --ardoise:    #535E72;
  --filet:      #D2D4D8;

  --gout: 24px;
  --hh: 56px;
  --sur: env(safe-area-inset-top, 0px);

  /* §4 bis */
  --e-sort:   cubic-bezier(.23, 1, .32, 1);
  --e-move:   cubic-bezier(.77, 0, .175, 1);
  --e-tiroir: cubic-bezier(.32, .72, 0, 1);
  --e-rev:    cubic-bezier(.16, 1, .3, 1);

  --gm-y: 16px;
  --gm-dur: .7s;
  --gm-stagger: 60ms;
  --gm-ease: cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 359px) { :root { --gout: 16px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--abysse); }
body {
  margin: 0; background: var(--blanc); color: var(--navy);
  font-family: 'Literata', 'Literata repli', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto; font-synthesis: none;
  font-weight: 400; font-size: 17px; line-height: 27px;
  overflow-x: clip;
}
/* Titres en Mona Sans (Imad, 2026-11-01) ; Literata reste au texte courant */
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: 'Mona Sans', 'Mona repli', Arial, sans-serif; font-stretch: 87%; font-weight: 640; }
h1 { font-size: 34px; line-height: 38px; letter-spacing: -0.025em; }
h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
h3 { font-size: 17px; line-height: 27px; }          /* v3 §3 : le H3 des listes à la taille du corps */
p, li, summary { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 380px) { h1 { font-size: 32px; line-height: 36px; } }

/* Grands signes (v3 §3) : chiffres 15 · 3 · 2 et lettres O · F · A */
.signe { display: block; font-family: 'Mona Sans', 'Mona repli', Arial, sans-serif; font-stretch: 125%; font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gout); }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--argent-vif); color: var(--navy); padding: 12px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.note { font-size: 14px; line-height: 20px; }

/* ---------- Logo (SVG) ---------- */
.logo { width: 100%; height: auto; fill: currentColor; overflow: visible; }
.logo-complet { aspect-ratio: 406 / 151.8; }
.logo-simple  { aspect-ratio: 406 / 119.6; }

/* ---------- Le plan (tracé régulateur + contours + pleins, v3 §5) ---------- */
.hero-plan, .vue-svg, .appel-plan, .page-plan { overflow: visible; }
.tete-trace { display: none; }
.hero-plan .trace, .vue-svg .trace, .appel-plan .trace, .page-plan .trace { color: var(--trait); opacity: .70; transition: opacity .4s var(--e-sort); }
.hero-plan .contours, .vue-svg .contours, .appel-plan .contours, .page-plan .contours { color: var(--argent); opacity: .95; transition: opacity .4s var(--e-sort); }
.hero-plan .plein, .vue-svg .plein, .appel-plan .plein { color: var(--argent); opacity: 0; transition: opacity .4s var(--e-sort); }
/* Sans JS (pas de gm-on), sous reduce, ou quand la 3D n'arrive pas (html.ouvrage2d) : l'ouvrage 2D */
html:not(.gm-on) .plein, html.reduce .plein, html.ouvrage2d .hero-plan .plein, .vue-svg .plein, .plein-on .plein { opacity: 1; }
html:not(.gm-on) .trace, html.reduce .trace, html.ouvrage2d .hero-plan .trace, .vue-svg .trace, .plein-on .trace { opacity: .18; }
.vue-svg .contours, .plein-on .contours { opacity: 0; }
html.ouvrage2d .hero-plan .contours { opacity: 0; }
/* Balayages du tracé (v3 §6.2), sous gm-on, une fois ; plus joués avec l'affiche (2026-11-06) */
@keyframes trace-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ofa-fondu { from { opacity: 0; } to { opacity: 1; } }
html.gm-on:not(.reduce):not(.affiche) .hero-plan .t1 { animation: trace-in .7s var(--e-move) both; }
html.gm-on:not(.reduce):not(.affiche) .hero-plan .t2 { animation: trace-in .6s var(--e-move) .12s both; }
html.gm-on:not(.reduce):not(.affiche) .hero-plan .t3 { animation: trace-in .6s var(--e-move) .22s both; }
html.gm-on:not(.reduce):not(.affiche) .hero-plan .t4 { animation: trace-in .6s var(--e-move) .32s both; }
html.gm-on:not(.reduce):not(.affiche) .hero-plan .t5 { animation: trace-in .5s var(--e-move) .42s both; }
html.gm-on:not(.reduce):not(.affiche) .hero-plan .contours { animation: ofa-fondu .4s var(--e-sort) .52s both; }
/* Appel final et pages intérieures : balayage de l'élément entier à l'entrée (site.js pose .trace-on puis .plein-on) */
html.gm-on:not(.reduce) .a-tracer { clip-path: inset(0 100% 0 0); }
html.gm-on:not(.reduce) .a-tracer.trace-on { clip-path: inset(0 0 0 0); transition: clip-path .9s var(--e-move); }

/* ---------- Boutons : aplats, angles droits ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 24px; border: 1px solid transparent; border-radius: 0;
  font-weight: 600; font-size: 17px; line-height: 22px; text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .16s var(--e-sort), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-argent  { background: var(--argent-vif); color: var(--navy); }
.btn-contour { border-color: var(--argent); color: var(--blanc); background: transparent; }
.btn-navy    { background: var(--navy); color: var(--blanc); }
.btn-ligne   { border-color: var(--navy); color: var(--navy); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn-argent:hover  { background: var(--argent); }
  .btn-contour:hover { background: var(--navy); }
  .btn-navy:hover    { background: var(--navy-2); }
  .btn-ligne:hover   { background: var(--gris); }
}
html.reduce .btn:active { transform: none; }

/* ---------- En-tête : abysse opaque, logo dès le haut (v3 §4) ---------- */
.hdr { position: sticky; top: 0; z-index: 56; background: var(--abysse); color: var(--argent); padding-top: var(--sur); }
.hdr-in { height: var(--hh); max-width: 1248px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 16px; }
.hdr-logo { display: block; width: 76px; padding: 11px 0; margin-right: auto; color: var(--argent); }
.hdr-appel, .hdr-menu { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 0; padding: 0; cursor: pointer; transition: transform .16s var(--e-sort); }
.hdr-appel { background: var(--argent-vif); color: var(--navy); }
.hdr-appel svg { width: 20px; height: 20px; }
.hdr-menu { background: transparent; }
.hdr-menu span { grid-area: 1 / 1; width: 22px; height: 2px; background: var(--argent); transition: transform .24s var(--e-sort), opacity .2s ease; }
.hdr-menu span:nth-child(1) { transform: translateY(-7px); }
.hdr-menu span:nth-child(3) { transform: translateY(7px); }
.hdr-menu[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.hdr-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-menu[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
.hdr-appel:active, .hdr-menu:active { transform: scale(.97); }
.nav-bureau { display: none; }

.panneau {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--hh) + var(--sur)); z-index: 55; overflow-y: auto;
  background: var(--nuit); color: var(--blanc); padding: 24px var(--gout) 32px;
  opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: opacity .24s var(--e-sort), transform .24s var(--e-sort), visibility 0s linear .24s;
}
.panneau.ouvert { opacity: 1; transform: none; visibility: visible; transition: opacity .36s var(--e-tiroir), transform .36s var(--e-tiroir), visibility 0s; }
html.reduce .panneau, html.reduce .panneau.ouvert { transform: none; }
.panneau-liens { list-style: none; }
.panneau-liens a { display: flex; align-items: center; min-height: 52px; font-size: 22px; line-height: 28px; font-weight: 600; text-decoration: none; color: var(--blanc); }
.panneau-liens a[aria-current="page"] { color: var(--argent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.panneau-lang { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; font-weight: 600; color: var(--brume); }
.panneau-actions { display: grid; gap: 12px; margin-top: 24px; }
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

/* ---------- Héros « Du plan à l'ouvrage » (v3 §4, §6) ---------- */
.hero { position: relative; background: var(--abysse); color: var(--blanc); padding-bottom: 40px; display: flex; flex-direction: column; }
.hero-scene { position: relative; height: clamp(220px, calc(100vh - 544px), 300px); height: clamp(220px, calc(100svh - 544px), 300px); overflow: hidden; }
.hero-plan, .hero-affiche { position: absolute; left: 50%; top: 42%; width: 120.4%;   /* lisse à 94 % de la largeur (juge 2026-11-01, n° 5) */
  height: auto; aspect-ratio: 520 / 188; transform: translate(-50%, -50%); transition: opacity .12s var(--e-sort); }
/* 2026-11-06 : l'affiche, image fixe du rendu 3D final, remplace le plan tant que la 3D n'a pas relayé (et si elle échoue).
   Sa boîte est celle de .hero-plan (le cadrage 3D y est ancré), décalée comme la caméra (3,5 % de la scène, poserHero) ;
   l'image y est placée en % de cette boîte, mesurés sur le rendu (390 × 844 et 1440 × 900). */
.hero-affiche { display: none; margin-left: 3.5%; pointer-events: none; }
html.affiche .hero-affiche { display: block; }
html.affiche .hero-plan { opacity: 0 !important; }
.hero-affiche img { position: absolute; left: 5.564%; top: -4.786%; width: 83.059%; max-width: none; height: auto; aspect-ratio: 780 / 534; }
.hero-3d { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .2s var(--e-sort); }
.hero-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.hero-3d canvas:active { cursor: grabbing; }
.hero-3d canvas:focus-visible, .scene-vue canvas:focus-visible { outline: 2px solid var(--argent-vif); outline-offset: -4px; }
html:not(.h3d) .hero-3d { display: none; }
html.menu-ouvert .hero-3d, html.menu-ouvert .hero-plan, html.menu-ouvert .hero-affiche { opacity: 0 !important; }
.hero-texte { position: relative; z-index: 1; }
.hero-ligne { width: 280px; height: auto; aspect-ratio: 404 / 26; margin-top: 8px; fill: var(--argent); }
.hero h1 { margin-top: 12px; }
.hero-actions { display: grid; gap: 12px; margin-top: 24px; }
.trust { list-style: none; display: flex; flex-wrap: wrap; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--brume); }
.trust li { white-space: nowrap; }
.trust li:not(:last-child)::after { content: "·"; margin: 0 8px; }
@keyframes ofa-monter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
html.gm-on:not(.reduce) .hero .hero-actions { animation: ofa-monter .6s var(--e-rev) .30s both; }
html.gm-on:not(.reduce) .hero .trust        { animation: ofa-monter .6s var(--e-rev) .36s both; }

/* Titres de section : mots sous masque (site.js) */
.mots .mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.mots .mot-in { display: inline-block; transform: translateY(112%); transition: transform .72s var(--e-rev); transition-delay: calc(var(--i, 0) * 45ms); }
.mots.mots-vus .mot-in { transform: none; }
html.reduce .mots .mot-in { transform: none; transition: none; }

/* ---------- Sections ---------- */
.sec { padding: 96px 0; }
.bg-blanc { background: var(--blanc); }
.bg-gris  { background: var(--gris); }
.tete { max-width: 720px; }
.tete p { margin-top: 12px; max-width: 60ch; }
.tete + * { margin-top: 48px; }
.mesure { max-width: 65ch; }

/* Bande RBQ + chapeau (v3 §8.3) */
.cred { background: var(--navy); color: var(--blanc); padding: 40px 0 48px; }
.cred .chapeau { max-width: 60ch; margin-bottom: 24px; }
.cred ul { list-style: none; display: grid; gap: 8px; font-weight: 600; }
.cred strong { font-weight: inherit; }

/* ---------- Liste éditoriale (v3 §10.1) : rangs posés au trait, sans carte ---------- */
.rangs, .etapes, .blocs, .faq { list-style: none; }
.rang, .etapes li, .bloc, .faq details { position: relative; padding: 28px 0; }
.rang::before, .etapes li::before, .bloc::before, .faq details::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--filet);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--e-move);
}
.rangs > :last-child, .etapes > :last-child, .blocs > :last-child, .faq > :last-child { border-bottom: 1px solid var(--filet); }
.gm-in.rang::before, .etapes li.gm-in::before, .bloc.gm-in::before, .faq details.gm-in::before,
html:not(.gm-on) .rang::before, html:not(.gm-on) .etapes li::before, html:not(.gm-on) .bloc::before, html:not(.gm-on) .faq details::before,
html.reduce .rang::before, html.reduce .etapes li::before, html.reduce .bloc::before, html.reduce .faq details::before { transform: none; }
.rang p, .etapes p, .bloc p { margin-top: 8px; max-width: 60ch; }
.etiquette { display: block; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ardoise); }
.rang .etiquette { margin-top: 12px; }
.rang .etiquette.avant { margin: 0 0 8px; }
.bloc ul { margin-top: 12px; padding-left: 20px; }
.bloc li + li { margin-top: 4px; }
.suite { margin-top: 40px; }
.suite .btn { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .rang, .bloc { transition: background-color .2s ease; }
  .bg-blanc .rang:hover, .bg-blanc .bloc:hover { background: var(--gris); }
  .bg-gris .rang:hover, .bg-gris .bloc:hover { background: var(--blanc); }
}

/* Approche : ligne d'aplomb + repères, aucun numéro (v3 §8.7) */
.etapes { position: relative; padding-left: 28px; }
.etapes::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--ardoise); transform-origin: 50% 0; transform: scaleY(var(--aplomb, 1)); }
.etapes li > h3 { position: relative; }
.etapes li > h3::before { content: ""; position: absolute; left: -28px; top: 13px; width: 12px; height: 1px; background: var(--ardoise); }

/* ---------- Vue éclatée « Trois lettres » (v3 §7) ---------- */
#valeurs { background: var(--abysse); color: var(--blanc); }
/* QA 2026-11-03 B-2 : titre et introduction hors de la zone épinglée ; la scène collante ne porte que l'objet, l'aide et la valeur */
#valeurs > .wrap { padding-top: 64px; }
.scene { padding: 32px 0 64px; }
.scene-in { display: grid; gap: 24px; }
.scene-vue { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 10; }
.scene-vue canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity .32s var(--e-sort); cursor: grab; }
.scene-vue canvas:active { cursor: grabbing; }
.vue-svg { position: absolute; left: 50%; top: 50%; width: 92%; height: auto; aspect-ratio: 520 / 188; transform: translate(-50%, -50%); transition: opacity .32s var(--e-sort); }
.scene-vue.pret3d canvas { opacity: 1; }
.scene-vue.pret3d .vue-svg { opacity: 0; visibility: hidden; }
.valeurs-panneau { display: grid; gap: 24px; }
.valeur .lettre { color: var(--argent); }
.valeur h3 { margin-top: 8px; }
.valeur p { margin-top: 8px; }
.rappel { display: none; font-family: 'Mona Sans', 'Mona repli', Arial, sans-serif; font-stretch: 125%; font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; color: var(--argent); }
.aide { display: none; font-size: 14px; line-height: 20px; color: var(--brume); }
.scene-vue .aide { position: absolute; top: 100%; left: 0; margin: 8px 0 0; }
.pret3d .aide { display: block; }
#valeurs.pret3d .scene-vue { margin-bottom: 28px; }
@media (max-width: 767px) {
  .scene-vue { margin-inline: calc(-1 * var(--gout)); width: calc(100% + 2 * var(--gout)); max-width: none; aspect-ratio: 1 / 1; }   /* juge n° 7 : place pour les pièces levées */
  .scene-vue .aide { left: var(--gout); }
}
.mode-scene .scene-piste { position: relative; height: 280vh; height: 280svh; }
.mode-scene .scene { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); padding: 16px 0; display: flex; align-items: center; overflow: hidden; }
.mode-scene .scene-in { gap: 16px; width: 100%; }
@media (max-width: 767px) and (max-height: 700px) {
  .scene-vue { aspect-ratio: 4 / 3; }
  .mode-scene .scene-in { gap: 10px; }
  .mode-scene .scene-tete p { margin-top: 8px; }
}
.mode-scene .valeurs-panneau { display: grid; gap: 0; }
.mode-scene .valeur, .mode-scene .rappel { grid-area: 1 / 1; display: block; align-self: start; opacity: 0; transform: translateY(8px); transition: opacity .12s var(--e-sort), transform .12s var(--e-sort); }
.mode-scene .valeur.actif, .mode-scene .rappel.actif { opacity: 1; transform: none; transition: opacity .24s var(--e-sort) .08s, transform .24s var(--e-sort) .08s; }
.sentinelle { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* ---------- Chiffres en grands signes (v3 §8.5) : chaque chiffre monte sous un masque, aucun compteur ---------- */
.chiffres-bande { background: var(--abysse); color: var(--blanc); padding: 32px 0 96px; }
.chiffres { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.chiffre b { overflow: hidden; color: var(--argent); }
.chiffre b span { display: block; }
html.gm-on:not(.reduce) .chiffre:not(.gm-done) b span { transform: translateY(100%); }
html.gm-on:not(.reduce) .chiffre.gm-in b span { transform: none; transition: transform .8s var(--e-rev) calc(var(--gm-d, 0ms) + 80ms); }
.chiffre .lib { display: block; margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--brume); }
.chiffres-clair { margin-top: 64px; }
.chiffres-clair .chiffre b { color: var(--navy); }
.chiffres-clair .chiffre .lib { color: var(--ardoise); }

/* ---------- Fondateur ---------- */
.fondateur p { margin-top: 16px; }
.fondateur p:first-child { margin-top: 0; }
.fondateur .signe { font-family: inherit; font-stretch: normal; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--ardoise); }

/* ---------- Territoire : liste typographique (v3 §8.9) ---------- */
.zones { list-style: none; display: flex; flex-wrap: wrap; font-size: 22px; line-height: 34px; color: var(--navy); }
.zones li { white-space: nowrap; }
.zones li:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--ardoise); }
.zones li.fort { font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { padding: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 18px 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; transition: transform .2s var(--e-sort); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .reponse { padding: 0 0 24px; }
@keyframes ofa-reponse { from { opacity: 0; } to { opacity: 1; } }
.faq details[open] .reponse { animation: ofa-reponse .2s ease both; }
html.reduce .faq details[open] .reponse, html.reduce .faq summary::after { animation: none; transition: none; }

/* ---------- Appel final : le plan puis l'ouvrage, en 2D (v3 §8.11) ---------- */
.appel { background: var(--abysse); color: var(--blanc); padding: 64px 0 72px; }
.appel-plan-boite { width: 100%; max-width: 560px; aspect-ratio: 520 / 188; margin: 0 0 32px; }
.appel-plan { width: 100%; height: 100%; }
.appel h2 { max-width: 720px; }
.appel p { margin-top: 12px; max-width: 60ch; }
.appel .hero-actions { margin-top: 24px; }
.appel.appel-suite { padding-top: 0; }
.appel.appel-suite .hero-actions { margin-top: 0; }

/* ---------- Pages intérieures : héros abysse + bande de plan (v3 §10.3) ---------- */
.page-hero { background: var(--abysse); color: var(--blanc); padding: 0 0 56px; }
.page-plan-boite { height: 150px; overflow: hidden; position: relative; }
.page-plan { position: absolute; left: 50%; top: 50%; width: 112%; height: auto; aspect-ratio: 520 / 188; transform: translate(-50%, -50%); }
.ariane { font-size: 14px; line-height: 20px; color: var(--blanc); }
.ariane a { color: var(--blanc); display: inline-block; padding: 12px 0; min-width: 44px; }
.page-hero h1 { margin-top: 8px; max-width: 900px; }
.page-hero .chapeau { margin-top: 16px; max-width: 65ch; }

/* Services */
.apres-blocs { margin-top: 32px; }
.liste-raisons { padding-left: 20px; }
.liste-raisons li + li { margin-top: 10px; }

/* À propos */
.valeurs-claires { list-style: none; display: grid; gap: 40px; }
.valeurs-claires .lettre { color: var(--navy); }
.valeurs-claires h3 { margin-top: 12px; }
.valeurs-claires p { margin-top: 8px; }
.mission p + p { margin-top: 16px; }

/* Soumission */
.contact { display: grid; gap: 48px; }
.infos { list-style: none; display: grid; gap: 16px; margin-top: 24px; }
.infos .etiquette { color: var(--ardoise); }
.infos .val { display: block; font-weight: 600; }
.infos a.val { display: inline-flex; align-items: center; min-height: 44px; }
.contact-info p { margin-top: 12px; }
.formulaire .sous { margin-top: 8px; }
.formulaire .requis { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ardoise); }
.champ { margin-top: 20px; }
.champ label { display: block; font-weight: 600; margin-bottom: 8px; }
.champ input, .champ select, .champ textarea {
  display: block; width: 100%; min-height: 56px; padding: 14px 16px;
  font: inherit; color: var(--navy); background: var(--blanc);
  border: 1px solid var(--ardoise); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 150px; resize: vertical; }
.champ select {
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A2842' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--navy); outline-offset: 2px; }
.champ ::placeholder { color: var(--ardoise); opacity: 1; }
.etoile { color: var(--navy); }
.formulaire .btn { width: 100%; margin-top: 28px; }
.confid { margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--ardoise); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Pied ---------- */
.pied { background: var(--abysse); color: var(--brume); padding: 56px 0 32px; font-size: 14px; line-height: 20px; }
.pied-grille { display: grid; gap: 32px; }
.pied-logo { width: 96px; color: var(--argent); margin-bottom: 16px; }
.pied-h { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--blanc); margin-bottom: 4px; }
.pied a { display: flex; align-items: center; min-height: 44px; color: var(--brume); text-decoration: none; }
.pied p + p { margin-top: 4px; }
.pied-bas { display: grid; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--navy-2); }
@media (hover: hover) and (pointer: fine) { .pied a:hover { color: var(--blanc); } }

/* ============================================================
   Élargissement (secondaire) — on ajoute, on ne réordonne rien
   ============================================================ */
@media (min-width: 768px) {
  body { font-size: 18px; line-height: 29px; }
  h1 { font-size: 44px; line-height: 48px; }
  h2 { font-size: 32px; line-height: 38px; }
  h3 { font-size: 18px; line-height: 29px; }
  .note, .trust, .etiquette, .ariane, .pied, .aide, .chiffre .lib, .fondateur .signe, .formulaire .requis, .pied-h, .confid { font-size: 15px; line-height: 22px; }
  .btn { font-size: 18px; min-height: 52px; }
  .hero-actions { grid-template-columns: auto auto; justify-content: start; }
  .hero-affiche img { left: -28.642%; top: -4.488%; width: 122.956%; aspect-ratio: 1512 / 718; }
  .cred ul { grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; }
  .rang, .bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; padding: 40px 0; }
  .rang > h3, .bloc > h3 { grid-column: 1; grid-row: 1 / span 3; }
  .rang > :not(h3), .bloc > :not(h3) { grid-column: 2; }
  .rang > p:first-of-type, .bloc > p:first-of-type, .bloc > ul { margin-top: 0; }
  .rang .etiquette.avant { grid-column: 2; grid-row: 2; margin: 12px 0 0; }
  .etapes li { padding: 40px 0; }
  .valeurs-claires { grid-template-columns: repeat(3, 1fr); }
  .chiffres { max-width: 900px; }
  .contact { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .pied-grille { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  .pied-bas { grid-template-columns: 1fr auto; }
  .page-plan-boite { height: 180px; }
}
@media (min-width: 1024px) {
  :root { --hh: 72px; --gout: 40px; }
  h1 { font-size: 68px; line-height: 70px; }
  h2 { font-size: 40px; line-height: 46px; }
  .signe, .rappel { font-size: 128px; line-height: 120px; }
  .zones { font-size: 18px; line-height: 29px; font-weight: 600; }
  .sec { padding: 160px 0; }
  .tete + * { margin-top: 64px; }
  .hdr-in { max-width: 1200px; padding: 0 var(--gout); gap: 0; }
  .hdr-logo { width: 96px; padding: 10px 0; }
  .hdr-appel, .hdr-menu { display: none; }
  .panneau { display: none; }
  .nav-bureau { display: flex; align-items: center; gap: 8px; }
  .nav-bureau ul { list-style: none; display: flex; gap: 4px; margin-right: 16px; }
  .nav-bureau ul a, .nav-bureau .lang { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--blanc); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s ease; }
  .nav-bureau ul a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
  .nav-bureau .lang { color: var(--brume); margin-right: 8px; }
  .nav-bureau .btn { min-height: 44px; padding: 0 20px; font-size: 15px; }

  /* Héros bureau (v3 §4.2) : la scène couvre tout le héros, l'objet en haut à droite, le texte en bas à gauche.
     Écart noté : le texte est ancré en bas (et non centré) pour qu'aucune ligne du tracé ne passe sous lui. */
  .hero { min-height: calc(100vh - var(--hh)); min-height: calc(100svh - var(--hh)); padding: 0; justify-content: flex-end; }
  .hero-scene { position: absolute; inset: 0; height: auto; }
  /* juge n° 8 : objet au tiers haut-droit (x 70 %, y 40 %, ~700 px), texte en bas à gauche, en diagonale */
  .hero-plan, .hero-affiche { left: 71%; top: 27%; width: min(820px, 57vw); }
  .hero-texte { padding-bottom: 96px; }
  .hero-texte > * { max-width: 900px; }
  .hero-ligne { width: 280px; }

  /* Grille éditoriale (v3 §10.2) : titre sur toute la largeur (2 lignes au plus), introduction collante à gauche,
     contenu à droite (5/7). Le titre en colonne étroite passait à 3-4 lignes : écart noté (v2). */
  .edito { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .edito > .tete { display: contents; }
  .edito > .tete h2 { grid-column: 1 / -1; grid-row: 1; max-width: 900px; }
  .edito > .tete .tete-col { grid-column: 1; grid-row: 2 / span 4; margin-top: 64px; position: sticky; top: calc(var(--hh) + 48px); }
  .edito > .tete .tete-col p { margin-top: 0; }
  .tete-trace { display: block !important; width: 280px; height: auto; aspect-ratio: 520 / 188; margin-top: 40px; color: var(--trait); opacity: .6; }
  .edito > :not(.tete) { grid-column: 2; }
  .edito > .tete + * { grid-row: 2; margin-top: 64px; }

  /* Pages intérieures : texte à gauche, plan à droite */
  .page-hero { position: relative; padding: 72px 0 96px; min-height: 480px; }
  .page-plan-boite { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; height: auto; }
  .page-plan { width: min(560px, 92%); left: 50%; }
  .page-hero .wrap { position: relative; }
  .page-hero .wrap > * { max-width: 680px; }

  /* Vue éclatée, bureau : texte à gauche, objet à droite ; une valeur à la fois, en grand signe */
  .scene-in { grid-template-columns: 40% 1fr; column-gap: 64px; row-gap: 0; align-items: start; }
  #valeurs > .wrap { padding-top: 112px; }
  .valeurs-panneau { grid-column: 1; grid-row: 1; margin-top: 0; align-self: center; }
  .scene-vue { grid-column: 2; grid-row: 1; align-self: center; max-width: 640px; justify-self: end; }
  .appel-plan-boite { margin-bottom: 48px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .mode-scene .valeur p { display: none; }
}

/* Mouvement réduit : le contenu reste, le déplacement disparaît */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}