/* ============================================================================
   FCMA — home. Statique, 0 JS.
   Conforme à creative/03-composition/home.md (D029) — toute valeur vient de la spec.
   Tailles : 8. Gaps : 6. Filets : 1. Ombres : 0. Bordures de carte : 0.
   ========================================================================== */

/* ---------------------------------------------------------------- fontes */
@font-face{font-family:"Butler";src:url("../fonts/butler-medium.woff2")format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-var.woff2")format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- jetons */
:root{
  /* palette — charte FCMA p.16, le PDF fait foi */
  --ocre:#482819; --or:#9C7A4C; --vert:#52513F; --ivoire:#F8F5E6;

  /* les 8 tailles, pas une de plus */
  --t-hero:clamp(2.25rem,5.2vw,3.5rem);   /* A3 — 56px, mediane du corpus. 72px sortait du registre editorial. */
  --t-section:clamp(1.75rem,3.4vw,2.5rem);
  --t-chiffre:clamp(2.5rem,6vw,4rem);
  --t-lead:clamp(1.125rem,1.8vw,1.375rem);
  --t-corps:1rem; --t-petit:.875rem; --t-label:.75rem; --t-micro:.6875rem;

  /* les 6 gaps, pas un de plus */
  --g1:4px; --g2:8px; --g3:16px; --g4:32px; --g5:64px; --g6:128px;

  --max:1200px;
  --pad-page:var(--g4);   /* gouttière de page — source unique */
  /* la MASSE : trame 58°, le seul motif de fond. Ne porte jamais de contenu. */
  --trame:repeating-linear-gradient(58deg,currentColor 0 2px,transparent 2px 17px);
}

/* ---------------------------------------------------------------- socle */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivoire);color:var(--ocre);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--t-corps);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-page)}
@media(min-width:900px){:root{--pad-page:var(--g5)}}

/* titres : Butler ne descend JAMAIS sous 28px, letter-spacing jamais sous -.02em
   (le € chevauche le M au-delà). Et Butler n'a pas le glyphe ᵉ — aucun ordinal ici. */
.t-hero,.t-section,.t-chiffre{font-family:"Butler",Georgia,"Times New Roman",serif;
  font-weight:500;line-height:1.05;letter-spacing:-.015em}
.t-hero{font-size:var(--t-hero)}
.t-section{font-size:var(--t-section)}
.t-chiffre{font-size:var(--t-chiffre);line-height:1}
.t-lead{font-size:var(--t-lead);line-height:1.45;font-weight:400}
.t-label{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;line-height:1.4}
.t-petit{font-size:var(--t-petit)}
.t-micro{font-size:var(--t-micro);line-height:1.5}

/* fonds — l'IVOIRE est OBLIGATOIRE entre ocre et vert : ils sont à 1,64:1 l'un de
   l'autre et ne se lisent pas comme deux blocs s'ils se touchent. */
.f-ocre{background:var(--ocre);color:var(--ivoire)}
.f-vert{background:var(--vert);color:var(--ivoire)}
.f-ivoire{background:var(--ivoire);color:var(--ocre)}

section{padding-block:var(--g6)}
.serre{padding-block:var(--g5)}

/* APPUI — le seul élément cliquable dessiné. Ivoire sur ocre = 13,18:1. */
.appui{display:inline-flex;align-items:center;min-height:44px;
  padding:var(--g3) var(--g4);background:var(--ocre);color:var(--ivoire);
  text-decoration:none;font-weight:600;font-size:var(--t-petit);
  letter-spacing:.04em;transition:background .18s ease}
.appui:hover,.appui:focus-visible{background:var(--vert)}
.f-ocre .appui,.f-vert .appui{background:var(--ivoire);color:var(--ocre)}
.f-ocre .appui:hover,.f-vert .appui:hover{background:#fff}
/* B14 (verdict n°3) — l'anneau en or mesurait 2,03:1 sur le vert, sous le 3:1 de
   WCAG 1.4.11. AUCUNE couleur de la charte ne passe les trois fonds à elle seule
   (or 3,33/2,03/3,62 · ivoire 12,05/7,36/1,00 · ocre 1,00/1,64/12,05) : l'anneau
   se choisit donc PAR RÉGIME DE FOND. Pas de box-shadow — la charte interdit
   l'ombre, et un anneau en ombre serait recompté en défaut au verdict suivant. */
:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}   /* sur ivoire : 12,05:1 */
.f-ocre :focus-visible,.f-vert :focus-visible,
.f-ocre:focus-visible,.f-vert:focus-visible{outline-color:var(--ivoire)}  /* 12,05:1 et 7,36:1 */

/* ---------------------------------------------------------------- header */
.tete{position:sticky;top:0;z-index:10;background:var(--ivoire)}
.tete__in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--g3);padding-block:var(--g3);min-width:0}
.tete__logo{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;flex:0 0 auto}   /* B15 — la cible, pas l'image, fait 44x44 */
/* ⛔ B18 — `img{max-width:100%}` (global) comprimait la largeur pendant que `height`
   la maintenait : le logo sortait à 54x44, soit un ratio de 1,22 pour un fichier a 1,66.
   La charte p.13 interdit « modifier ses proportions ». `max-width:none` le libère,
   `flex:0 0 auto` empeche le header de le comprimer. */
/* charte p.11 : « symbole seul — usages compacts ». Un header mobile en est un,
   et la version typographique y faisait deborder l'appui de 2 px a 390. */
.tete__logo img{width:auto;height:44px;max-width:none;flex:0 0 auto}
@media(min-width:760px){.tete__logo img{height:56px}}
.tete__nav{display:flex;align-items:center;gap:var(--g3);min-width:0}
/* mesuré : à 390 px le nav sortait à 391,8. On resserre l'appui, on ne masque rien. */
.tete__nav .appui{padding:var(--g2) var(--g3)}
.tete__nav a{text-decoration:none;font-size:var(--t-petit);font-weight:500;
  display:inline-flex;align-items:center;min-height:44px}
.tete__nav a:not(.appui):hover{text-decoration:underline;text-underline-offset:4px}
/* B31 — .no-mob (0,1,0) etait ecrasee par .tete__nav a (0,1,1), qui pose
   display:inline-flex. On monte la specificite a (0,2,1) des deux cotes. */
.tete__nav a.no-mob{display:none}
@media(min-width:760px){
  .tete__nav a.no-mob{display:inline-flex}
  .tete__in{gap:var(--g4)}
  .tete__logo img{height:52px}
  .tete__nav{gap:var(--g4)}
  .tete__nav .appui{padding:var(--g3) var(--g4)}
}

/* ---------------------------------------------------------------- hero
   Masthead, variante « le nom entier ». AUCUN bouton : le pattern ne demande rien
   au-dessus de la ligne de flottaison. 3 tailles exactement. */
.hero{padding:0;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr}
.hero__txt{padding:var(--g5) var(--g4);display:flex;flex-direction:column;
  justify-content:center;gap:var(--g4);position:relative;z-index:1;order:2}
/* ⛔ CODE MORT RETIRÉ (D11, 2026-09-03) — `.hero__meta` et son séparateur.
   L'élément a quitté le HTML le 26/08 (B10) et le surtitre du même volet a été
   retiré par D8 : la composition gardait la HAUTEUR d'un volet vidé de ses deux
   blocs, et son commentaire prétendait encore « faire tenir le volet texte sur
   toute la hauteur du média ». La variante JOURNAL est refusée définitivement. */
.hero__masse{position:absolute;inset:0;color:var(--ivoire);opacity:.07;
  background:var(--trame);pointer-events:none}
.hero__media{order:1;position:relative;background:#2b1a10;
  display:flex;justify-content:center}
/* 736x920 natif — JAMAIS upscalé. En mobile la densité monte à 1,89 : c'est là
   que cette image est la meilleure, et c'est là que la cible la verra. */
.hero__media img{width:100%;max-width:736px;height:100%;object-fit:cover;
  object-position:center 42%}
/* B3 — le média plafonne, pour que le H1 tienne dans le premier écran.
   Verdict n°2 : H1 hors écran a 320, 360, 500, 600 et 680 px, et 0 texte de
   <main> a 600 et 680. La regle « 62vh » de la spec n'etait ecrite NULLE PART
   dans ce fichier. Elle y est, chiffree, et elle couvre les huit viewports. */
.hero__media{max-height:min(52vh,calc(100vh - 340px))}
/* A2 (B7) — le cap du media ne suffit pas seul : le bloc titre doit aussi cesser de
   payer une gouttiere de 64 px sous 900 px. Sans ca, la 1re ligne de chapo restait
   dehors a 320x568, 360x640 et 375x667 — les trois viewports du 3e rejet. */
@media(max-width:899px){.hero__txt{padding-top:var(--g4);row-gap:var(--g3)}}
.hero__media img{height:100%;aspect-ratio:auto}
/* a 320x700 il manquait 4 px au H1 : le media descend a 46vh sous 360 px.
   Mesure du 26/08 sur les 8 viewports de la spec — c'est le seul qui echouait. */
@media(min-width:700px) and (max-width:1119px){.hero__media{max-height:min(62vh,calc(100vh - 340px))}}
.hero__lede{max-width:34ch}
@media(min-width:900px){
  /* ── D11 / amendement A8 (2026-09-03) ───────────────────────────────────
     ⛔ RETIRÉS : min-height:min(88vh,920px) et max-height:920px.
     La bande demandait sa hauteur au VIEWPORT (792 px à 1280) alors que son
     volet texte en mesure 363 (h1 235 + gap 32 + chapô 96) : elle réclamait
     429 px de vide à un contenu qui ne les remplit pas. Mesuré de 313 px
     (1024×768) à 587 px (900×1200) — le défaut n'était pas cantonné à 1280.
     ⭐ Le correctif du 29/08 avait COUPÉ ce vide en deux sans le supprimer :
     214,6 + 214,4 px, chacun sous le plafond de 30 %, pour 54,2 % de vide
     total. Un vide qu'on divise passe un seuil qu'on n'applique qu'à sa plus
     grande moitié.
     ⭐ La bande prend désormais la hauteur de son volet texte (contenu + 2×32).
     Le §0 disait « 620 px min, 82vh » quand le CSS posait 88vh : deux valeurs
     de la même intention, jamais réconciliées. */
  .hero__grid{grid-template-columns:48% 52%;max-width:1440px;margin-inline:auto}
  .hero__txt{order:1;padding:var(--g4) var(--g5);justify-content:center;row-gap:var(--g4)}
  /* A8 — la bande ayant raccourci (792 → ~400 px), la fenêtre se recentre sur
     l'encre du bijou : pendentif + bélière occupent y 138→505 des 920 px natifs
     (relevé par balayage des pixels d'or). Intervalle admissible 16–28 %.
     ⚠️ Ne s'applique QU'AU régime en volets : sous 900 px la bande n'a pas
     changé, et la règle générale y garde 42 %. */
  .hero__media img{object-position:center 22%}
  /* ⛔ CORRECTIF 29/08 — `space-between` écartait le nom et le chapô aux deux bords
     du volet : bande vide mesurée 397 px à 1440x900 (44,1 % du viewport) et 525 px
     à 1920x1080 (48,6 %), quand la spec §1.3 pose « plus longue bande vide du 1er
     écran ≤ 30 % ». Cinq verdicts ne l'ont pas vue parce que `mesure-hero.mjs`
     ne mesure AUCUNE bande vide : le contrôle de substitution n'a jamais été écrit.
     Le volet texte redevient UN bloc, comme §1.1 le déclare (« TEXT bloc gauche »). */
  .hero__media{order:2}
  /* R1 — `max-width:none` laissait le cover agrandir l'image jusqu'a ×1,81 a
   2560 px, alors que la spec ecrit trois fois « jamais upscalee » et que la
   charte p.13 interdit de modifier les proportions du fonds. Le conteneur est
   donc borne aux pixels natifs : le facteur cover ne peut plus depasser 1,00. */
  /* ⛔ CORRECTIF 26/08 18h — `margin-left:auto` sur un grid item dont le seul
     enfant est en `position:absolute` le réduit à `fit-content`, donc à ZÉRO :
     mesuré `width:0` et `left:1440` à 1440, 900 et 2560 px. L'image du hero ne
     s'affichait PAS en desktop. `justify-self:end` aligne sans toucher la largeur. */
  .hero__media{width:100%;max-width:736px;max-height:920px;justify-self:end}
  .hero__media img{aspect-ratio:auto;position:absolute;inset:0;
    max-width:736px;max-height:920px}
}

/* ------------------------------------------------- BLOC : registre 2 colonnes */
.registre{display:grid;gap:var(--g3);margin-top:var(--g5)}
.registre__l{display:grid;gap:var(--g1)}
.registre__k{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;opacity:.72}
@media(min-width:760px){
  .registre{gap:var(--g4)}
  .registre__l{grid-template-columns:180px 1fr;gap:var(--g4);align-items:baseline}
  .registre__k{opacity:.85}
}

.mesure{display:grid;gap:var(--g3);max-width:62ch}
.chapo{max-width:56ch}
.entete{display:grid;gap:var(--g3)}

/* --------------------------------------------------- la règle : 3 volets
   mobile = carrousel glissant, PAS un empilement : les niveaux se comparent. */
.volets{display:grid;gap:var(--g4);margin-top:var(--g5)}
@media(max-width:759px){
  .volets{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--g4);
    margin-inline:calc(var(--pad-page)*-1);padding-inline:var(--pad-page);
    scrollbar-width:none}
  .volets::-webkit-scrollbar{display:none}
  .volet{scroll-snap-align:start}
}
@media(min-width:760px){.volets{grid-template-columns:repeat(3,1fr);gap:var(--g5)}}
.volet{display:grid;gap:var(--g3);align-content:start}
.volet h3{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600}

/* ------------------------------------------------- les 4 droits : PASTILLES
   sans cercle, sans filet. Le chiffre en Butler hiérarchise seul.
   Séparation par la respiration (gap 64), jamais par un trait. */
.droits{display:grid;gap:var(--g5);margin-top:var(--g5)}
@media(min-width:760px){.droits{grid-template-columns:1fr 1fr;gap:var(--g5) var(--g5)}}
.droit{display:grid;grid-template-columns:auto 1fr;gap:var(--g3) var(--g4);
  align-items:baseline}
.droit__n{font-family:"Butler",Georgia,serif;font-weight:500;
  font-size:var(--t-section);line-height:1;color:var(--ocre)}
.droit__c{display:grid;gap:var(--g2)}
.droit h3{font-size:var(--t-corps);font-weight:600}

/* --------------------------------------------- la place à prendre + carte */
.carte{position:relative;overflow:hidden}
.carte__fond{position:absolute;inset:0;background:url("../img/carte-guyane-xixe.webp")
  center/cover no-repeat;opacity:.14;pointer-events:none}
@media(max-width:759px){.carte__fond{opacity:.07}}  /* lisibilité mobile */
.carte>.wrap{position:relative;z-index:1}
.pci{display:grid;gap:var(--g3);margin-top:var(--g4);max-width:58ch}
.pci li{padding-left:var(--g4);position:relative}
/* la puce est dessinée en CSS : Montserrat n'a pas le glyphe ▪ (U+25AA) */
.pci li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  background:var(--or)}
.gros{display:flex;align-items:baseline;gap:var(--g4);flex-wrap:wrap}

/* ---------------------------------------------------------------- adhérer */
.appel{text-align:center;display:grid;gap:var(--g4);justify-items:center}
.appel .chapo{margin-inline:auto}

/* ---------------------------------------------------------------- footer
   ZÉRO filet. Le budget §7 disait 1 (tête du footer) ; compte-filets.mjs l'a refusé
   et il a raison : ce trait séparait une SECTION, pas deux items d'une liste — donc
   décoratif. Le changement de fond (ivoire -> vert, régime A) sépare déjà. */
.pied{padding-block:var(--g5)}
.pied__in{padding-top:var(--g4);display:grid;gap:var(--g5)}
@media(min-width:760px){.pied__in{grid-template-columns:1fr 1fr}}
.pied img{height:64px;width:auto;max-width:none}
/* B15 (verdict n°3) — les liens du pied n'étaient distingués que par la couleur
   (WCAG 1.4.1), et trois cibles tombaient sous les 44 px de spec §8. Le
   soulignement devient permanent ; la cible est portée à 44 px sur les DEUX
   dimensions sans déplacer le visuel (le padding pousse la boîte, pas le texte). */
.pied a{text-decoration:underline;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px}
.pied a:hover{text-decoration-thickness:2px}
.pied__legal{opacity:.78;max-width:52ch}
.contacts{display:grid;gap:var(--g3);margin-top:var(--g4)}
.contacts div{display:grid;gap:var(--g1)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --------------------------------------------- utilitaires
   Ils remplacent 15 attributs style= : un style inline n'est pas refusable
   par un contrôle, et il double le design system en douce. */
.mt3{margin-top:var(--g3)} .mt4{margin-top:var(--g4)} .mt5{margin-top:var(--g5)}
.w30{max-width:30ch} .w40{max-width:40ch} .w44{max-width:44ch} .w56{max-width:56ch}
.attenue{opacity:.8}
.lockup{height:96px;width:auto}

/* ─────────────────────────── B1 · régime de la branche Héritage Guyanais
   design.md §1 : sur la branche HGJ, Butler est INTERDITE, Montserrat compose
   tout — titres compris. Le régime se scope ici, sur une classe portée par la
   section : sans elle, aucun contrôle ne peut vérifier la règle. */
.hgj .t-section,.hgj .t-chiffre,.hgj .t-hero{
  font-family:"Montserrat",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em}

/* ─────────────────────────── B3 · le hero entre 760 et 899 px
   mesuré : aspect-ratio 736/920 donnait une image de 1 124 px de haut à 899 px
   de large, poussant tout le texte hors du premier écran. La bande bornée
   remet le texte dans l'écran et ramène l'agrandissement de ×1,22 à ×1,04. */
@media(min-width:700px) and (max-width:899px){
  .hero__media img{aspect-ratio:auto;height:56vh;max-height:640px}
}
/* ─────────────────────────── B4 · débordement de 9 px à 320 px
   la spec déclare 320 comme plancher ; le CSS ne l'avait testé qu'à 390. */
@media(max-width:379px){
  :root{--pad-page:var(--g3)}
  .tete__nav a:not(.appui){display:none}
}

/* ── B21 · le dominant de chaque section doit se voir ────────────────────
   Verdict n° 4 : 4 sections sur 8 n'avaient pas de dominant net. Le critère
   du verdict — la masse d'encre — pénalise structurellement les titres courts
   (« 5 », « Fédérer. ») : un chiffre de 64 px pèse moins que cinq lignes de
   corps, et domine pourtant l'œil sans discussion. Le dominant se mesure au
   RAPPORT DE CORPS, seuil ≥ 1,8×. Deux sections échouaient encore :
     · heritage-guyanais  ×1,60 — la citation talonnait le chiffre
     · ce-que-change-une-adhesion ×1,00 — deux éléments au même corps
   Aucune taille nouvelle n'est introduite : on réutilise l'échelle. */
/* ── D9 / amendement A6 (2026-09-03) — INVERSION DE CE QUI PRÉCÈDE ─────────
   La règle posée ici le 27/08 rétrogradait le VERBATIM au corps de son propre
   chapô pour gagner le rapport de dominance. Elle est ABROGÉE.
   ⛔ Le geste avait été examiné et refusé verbatim par l'amendement A4, 24 h
   avant d'être posé au build : un `h2` est le NOM ACCESSIBLE de sa section
   (`aria-labelledby="t-hg"`), le rétrograder prive la section de son titre.
   Et « 450 000 € » est un budget de programme VOTÉ, pas un financement acquis
   (facts.md §3/§4 : trésorerie 1 685,55 €) : à 64 px en tête de section, il se
   lit comme de l'argent en caisse — devant un artisan, qui est la cible n° 1 (D1).
   ⭐ Règle née de ce défaut : un critère de rapport sans PLANCHER se gagne en
   perdant le titre. Un h2 ne se compose jamais sous `t-section`.
   Verbatim → t-section (28 px sous 900, 40 px au-delà de 1222).
   Montant  → t-lead (18 → 22 px), graisse Montserrat 700 gardée par le régime HGJ. */
.hgj .t-chiffre{font-size:var(--t-lead)}
.droits-entete .t-lead,section[aria-labelledby="t-adh"] .chapo{
  font-size:var(--t-lead)}                                   /* 22px → ×1,82 */

/* Les quatre pastilles étaient au corps du titre (40 px) : la section n'avait donc
   aucun dominant. La spec les déclarait « dominant » — or un dominant est singulier
   par définition, quatre éléments ne peuvent pas l'être. Ce sont des JETONS au sens
   du catalogue de formes : ils étiquettent, ils ne dominent pas. */
.droit__n{font-size:var(--t-lead)}