/* =====================================================================
   Salon des Maires de Guyane 2026
   Systeme « LA TRAVERSEE ».

   Le site descend de la MATIERE vers la DONNEE, parce que c'est le sujet :
   l'ecoresponsabilite et l'intelligence artificielle arrivent ensemble.
     1-3  papier chaud, composition d'affiche imprimee, filets epais
     4    la charniere : la canopee se resout en trame de points
     5-8  bleu nuit, regime de donnee : registres, filets fins, mono
     9    le formulaire, ou les deux regimes se superposent

   Couleurs et assets repris de la marque (releves sur salondesmairesguyane.fr).
   Pas de header de landing : une barre de progression editoriale.
   ===================================================================== */

:root{
  /* CHARTE OFFICIELLE 2026 (fichier « CODE COULEUR SDM 2026 » fourni par le client) */
  --nuit:#021228;           /* blanc dessus 18.75:1 */
  --nuit-2:#07182B;         /* variante d'alternance, blanc dessus 17.88:1 */
  --vert:#6fb92c;           /* 7.73:1 sur nuit · exige un texte NUIT dessus (blanc = 2.43:1) */
  --cyan:#2bb8c9;           /* 7.86:1 sur nuit · idem, texte nuit dessus */
  --sable:#c9b8a2;          /* 9.7:1 sur nuit · excellent fond clair chaud, texte nuit dessus */
  /* Le vert et le cyan de charte ne passent pas en petit texte sur fond clair
     (2.2:1) : ils y sont remplaces par leurs variantes encre. */
  --vert-encre:#3F6D19;     /* 5.65:1 sur papier */
  --cyan-encre:#187582;     /* 4.94:1 sur papier */

  --papier:#F7F5F1;
  --papier-2:#EFEBE4;
  --blanc:#FFFFFF;
  --texte:#0E1B26;
  --sourdine:#4A5560;       /* 6.99:1 sur papier */
  --filet:#0E1B26;
  --filet-fin:#D8D2C7;
  --filet-clair:rgba(247,245,241,.26);

  --titre:"Archivo","Helvetica Neue",Arial,sans-serif;
  --corps:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1280px;
  --gouttiere:34px;
  --colonne-gap:28px;
  --barre:92px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:calc(var(--barre) + 12px)}

body{
  margin:0;background:var(--papier);color:var(--texte);
  font-family:var(--corps);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--titre);font-weight:800;margin:0;line-height:1;letter-spacing:-.032em;text-transform:uppercase}
/* UNE seule echelle pour tous les titres de section : c'est elle qui donne le
   rythme de la page. Aucune section ne redefinit sa taille. */
.jour h2,.nuit h2,.venir h2,.echange h2,.partenaires h2,.infos h2,.enjeux h2,
.jours h2,.rappel h2,.corps-page h2,.page h2,.tete h1{
  font-size:clamp(2rem,4.4vw,3.25rem);line-height:.98;letter-spacing:-.03em;
  /* Un titre de section occupe 8 colonnes : assez large pour ne jamais
     couper un mot court tout seul, assez court pour rester lisible. */
  grid-column:1 / span 8;max-width:none;text-wrap:balance;
}
.z > .accroche{grid-column:1 / span 7;max-width:none}
/* Second titre dans une meme section : un cran en dessous, meme famille. */
.titre-suite{font-size:clamp(1.5rem,2.9vw,2.15rem)!important;margin-top:66px;line-height:1.02}
a{color:var(--vert-encre);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

::selection{background:var(--vert);color:var(--nuit)}
:root{caret-color:var(--vert-encre);accent-color:var(--vert-encre)}
:focus-visible{outline:2px solid var(--vert-encre);outline-offset:3px}
html{scrollbar-color:var(--nuit) var(--papier-2);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--papier-2)}
::-webkit-scrollbar-thumb{background:var(--nuit);border:3px solid var(--papier-2)}
.chiffre{font-variant-numeric:tabular-nums}

/* ================================================================
   LA GRILLE. Une seule, 12 colonnes, pour TOUTE la page.
   Chaque section s'y aligne : plus aucune ne redefinit sa largeur
   ni ses colonnes. Les decoupes sont des multiples de colonnes.
   ================================================================ */
.z{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gouttiere);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--colonne-gap);
}
/* Par defaut, un enfant direct occupe toute la grille. */
.z > *{grid-column:1 / -1;min-width:0}
/* Les decoupes autorisees, toutes calees sur les memes colonnes. */
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-5{grid-column:span 5}
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
.col-9{grid-column:span 9}
.col-3{grid-column:span 3}
.z.etroite > *{grid-column:2 / 12}
.saut{position:absolute;left:-9999px;top:0;background:var(--nuit);color:#fff;padding:.7rem 1.1rem;z-index:300}
.saut:focus{left:0}

/* ============================================ LA BARRE (remplace le header)
   Absente sur l'affiche, elle apparait a la traversee. Elle porte le chapitre
   courant, pas une rangee de liens et un bouton pilule. */
.barre{
  /* PIEGE : le modificateur de regime s'appelait `nuit`, comme la classe de
     section `.nuit` (padding 94px + position:relative). La barre heritait donc
     du style d'une SECTION, sortait de `fixed` et poussait toute la page de
     189px. Un modificateur doit etre prefixe par son bloc. */
  position:fixed;top:0;left:0;right:0;z-index:200;height:var(--barre);
  display:flex;align-items:center;
  /* Opaque : une barre translucide laisse transparaitre les blocs de la page
     et se salit au defilement. */
  background:var(--papier);
  border-bottom:1px solid var(--filet);
  transform:translateY(-100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.barre.vue{transform:none}
.barre.barre-nuit{background:var(--nuit);border-bottom-color:var(--filet-clair)}
.barre-z{max-width:var(--maxw);margin:0 auto;padding:0 34px;width:100%;display:flex;align-items:center;gap:18px}
.barre img{height:46px;width:auto;position:relative;top:4px}
.barre .sombre{display:none}
.barre.barre-nuit .sombre{display:block}
.barre.barre-nuit .clair{display:none}
/* Le chapitre courant : c'est l'information de la barre, elle doit se lire
   d'un coup d'oeil. Le numero porte, le titre suit. */
.chapitre{
  display:flex;align-items:center;gap:17px;margin:0;
  white-space:nowrap;overflow:hidden;min-width:0;
}
/* Le numero et le titre partagent la meme ligne optique : meme line-height,
   alignement au centre, et un pave fixe pour que le titre ne bouge pas d'un
   chapitre a l'autre. */
.chapitre b{
  font-family:var(--titre);font-weight:800;font-size:1.9rem;letter-spacing:-.01em;
  color:var(--vert-encre);font-variant-numeric:tabular-nums;line-height:1;
  min-width:2.1ch;text-align:right;
}
.chapitre span{
  font-family:var(--titre);font-weight:700;font-size:1.4rem;letter-spacing:-.018em;
  color:var(--texte);overflow:hidden;text-overflow:ellipsis;line-height:1.05;
}
.barre.barre-nuit .chapitre b{color:var(--vert)}
.barre.barre-nuit .chapitre span{color:#fff}
/* un filet entre la marque et le chapitre, pour poser la hierarchie */
.chapitre::before{
  content:"";width:1px;height:34px;background:var(--filet-fin);
  margin-right:7px;flex:none;
}
.barre.barre-nuit .chapitre::before{background:rgba(247,245,241,.28)}
.barre .appel{
  margin-left:auto;font-family:var(--corps);font-size:1.02rem;font-weight:600;
  color:var(--texte);text-decoration:none;white-space:nowrap;flex:none;
  border:2px solid var(--vert-encre);padding:.72rem 1.5rem;border-radius:2px;
  transition:background .16s ease;
}
.barre .appel:hover{background:var(--vert-encre);color:#fff;text-decoration:none}
.barre.barre-nuit .appel{color:#fff;border-color:var(--vert)}
.barre.barre-nuit .appel:hover{background:var(--vert);color:var(--nuit)}
/* jauge de traversee : une ligne qui se remplit, pas un gadget */
.jauge{position:absolute;left:0;bottom:-2px;height:4px;background:var(--vert-encre);width:var(--avance,0%);transition:width .12s linear}
.barre.barre-nuit .jauge{background:var(--cyan)}

/* ================================================== 1 · L'AFFICHE
   Composition reprise de l'affiche officielle 2026 : logo centre avec le
   bandeau vert du millesime, titre centre, la Guyane a gauche, et les dates
   en tres grand a droite sous un trait vert. */
.affiche{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;padding:calc(var(--barre) + 44px) 0 54px;
  background:var(--nuit);color:#fff;
}
.affiche::before{
  content:"";position:absolute;left:-14%;bottom:-26%;width:78%;height:92%;
  background:radial-gradient(ellipse at center,rgba(43,184,201,.19),transparent 62%);
  pointer-events:none;transform-origin:40% 60%;
}
.affiche .z{position:relative;z-index:2;width:100%}

/* le bloc de marque, centre, comme en tete d'affiche */
.enseigne{grid-column:1 / span 4;display:flex;margin-bottom:34px}
.enseigne img{height:86px;width:auto}
.enseigne .millesime{
  display:inline-block;background:var(--vert);color:var(--nuit);
  font-family:var(--titre);font-weight:800;font-size:1.02rem;letter-spacing:.12em;
  padding:.16em .62em .2em;
}

/* Le titre occupe des colonnes, pas une largeur en `ch` : un `max-width:18ch`
   posait un 3e axe d'alignement dans une page qui en avait deja deux. */
.affiche h1{
  grid-column:1 / span 10;
  /* 10vw garde « TRANSFORME » sous la largeur de zone a toutes les tailles :
     226px pour 276px disponibles a 320px, contre 286px auparavant. */
  font-size:clamp(2rem,10vw,5.4rem);line-height:.9;color:#fff;
  max-width:none;margin:0;text-wrap:balance;
}
.affiche .theme{
  grid-column:1 / span 7;
  margin:22px 0 0;font-family:var(--titre);font-weight:600;text-transform:none;
  font-size:clamp(1.05rem,2.3vw,1.6rem);line-height:1.2;color:#fff;
  max-width:none;letter-spacing:-.015em;
}
.affiche .theme .fin{display:block;color:var(--cyan)}

/* le bas de l'affiche : la Guyane a gauche, les dates a droite */
/* Le bas de l'affiche reprend les 12 colonnes de la page : les dates et la
   Guyane tombent sur les memes lignes que toutes les autres sections. */
.pied-affiche{
  grid-column:1 / -1;margin-top:38px;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);
  align-items:end;
}
.pied-affiche > .quand{grid-column:1 / span 6;align-self:end}
.pied-affiche > .territoire{grid-column:9 / span 4;align-self:end;margin-bottom:-26px}
.territoire{position:relative;margin:0;display:block}
.territoire img{width:100%;max-width:none;height:auto;border-radius:3px;display:block}
.territoire figcaption{
  margin-top:10px;text-align:center;
  font-family:var(--mono);font-size:.68rem;color:rgba(247,245,241,.5);
}

.quand{text-align:left}
.quand .jours{
  margin:0;display:flex;align-items:flex-start;gap:.1em;
  font-family:var(--titre);font-weight:900;letter-spacing:-.045em;line-height:.84;
  font-size:clamp(2.875rem,14.5vw,7rem);color:#fff;
}
.quand .jours .nombres{white-space:nowrap}
.quand .jours .mois{
  font-size:.34em;line-height:1.02;letter-spacing:-.01em;font-weight:800;
  font-style:italic;margin-top:.06em;
}
.quand .barre-verte{height:4px;background:var(--vert);margin:6px 0 16px;max-width:none}
.quand .ou{font-family:var(--titre);font-weight:600;font-size:clamp(1rem,2.05vw,1.36rem);line-height:1.25;color:#fff;margin:0}
.quand .ou b{font-weight:800;text-transform:uppercase;letter-spacing:-.02em}
.quand .ou .ville{display:block}

.invite{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.bouton{white-space:nowrap}
.affiche .apres{margin:18px 0 0;font-family:var(--mono);font-size:.78rem;color:rgba(247,245,241,.68)}

/* le cartouche « propulse par », comme sur l'affiche */
.propulse{
  position:absolute;right:120px;bottom:26px;z-index:2;
  background:var(--papier);color:var(--nuit);padding:9px 15px;
  font-family:var(--titre);font-weight:800;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.25;text-align:center;
}
.propulse span{display:block;font-size:.58rem;font-weight:600;letter-spacing:.16em;opacity:.72}

/* ------------------------------------------------------------------
   L'ouverture s'anime en une seule sequence, dans l'ordre de lecture :
   la marque, le titre qui se devoile, le theme, le territoire qui s'allume,
   les dates, le trait qui se tire, l'appel. Puis deux respirations lentes
   et continues, tirees de l'illustration : la lueur du fleuve et le halo.
   Tout est desactive sous prefers-reduced-motion, et l'etat final est
   celui du HTML : sans animation, la page est deja juste.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference){
  .enseigne{animation:smg-monte .8s cubic-bezier(.16,1,.3,1) backwards}

  /* le titre se devoile par le bas, comme une affiche qu'on decouvre */
  .affiche h1{
    animation:smg-devoile 1.05s cubic-bezier(.16,1,.3,1) .1s backwards;
    will-change:clip-path,transform;
  }
  .affiche .theme{animation:smg-monte .85s cubic-bezier(.16,1,.3,1) .42s backwards}

  /* le territoire arrive, puis sa lueur respire sans fin */
  .territoire img{
    animation:smg-parait 1.1s cubic-bezier(.16,1,.3,1) .5s backwards,
              smg-lueur 7s ease-in-out 1.7s infinite;
  }
  .quand .jours{animation:smg-monte .8s cubic-bezier(.16,1,.3,1) .62s backwards}
  /* le trait se tire sous les dates */
  .quand .barre-verte{
    animation:smg-trait .75s cubic-bezier(.16,1,.3,1) .82s backwards;
    transform-origin:left center;
  }
  .quand .ou{animation:smg-monte .8s cubic-bezier(.16,1,.3,1) .92s backwards}
  .invite{animation:smg-monte .8s cubic-bezier(.16,1,.3,1) 1.02s backwards}
  .propulse{animation:smg-monte .8s cubic-bezier(.16,1,.3,1) 1.12s backwards}

  /* le halo du fleuve, tres lent, sous tout le reste */
  .affiche::before{animation:smg-halo 11s ease-in-out 1s infinite}
}

@keyframes smg-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes smg-devoile{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(10px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes smg-parait{
  from{opacity:0;transform:translateY(22px) scale(.965)}
  to{opacity:1;transform:none}
}
@keyframes smg-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes smg-lueur{
  0%,100%{filter:drop-shadow(0 0 26px rgba(43,184,201,.16))}
  50%    {filter:drop-shadow(0 0 46px rgba(111,185,44,.30))}
}
@keyframes smg-halo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* ============================ L'INVITATION : l'ouverture appelle a VENIR
   Un salon se vend par ce qu'on y gagne, pas par ce qu'on y lit. */
.invite{margin-top:42px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.invite .apres{font-family:var(--mono);font-size:.78rem;color:rgba(247,245,241,.72)}

/* Le bloc « pourquoi venir » : aplat terracotta, le seul de la page.
   Il rechauffe la traversee juste avant qu'elle bascule dans la donnee. */
.venir{background:var(--vert);color:var(--nuit);padding:76px 0}
.venir h2{color:var(--nuit)}
.venir .accroche{margin-top:20px;max-width:58ch;color:rgba(2,18,40,.86)}
.raisons{margin-top:46px;border-top:1px solid rgba(2,18,40,.32)}
.raisons li{padding:16px 0;border-bottom:1px solid rgba(2,18,40,.22)}
.raisons h3{
  font-family:var(--titre);font-weight:800;font-size:1.14rem;color:var(--nuit);
  text-transform:uppercase;letter-spacing:-.018em;line-height:1.16;
}
.raisons p{margin:0;color:rgba(2,18,40,.84);font-size:1rem}
.venir .actions{margin-top:40px}

/* ============================================ REGIME 1 : LA MATIERE (papier) */
.jour{background:var(--papier);padding:78px 0}
.jour.pair{background:var(--papier-2)}
.jour h2{color:var(--nuit)}
.jour h2 em{font-style:normal;color:var(--vert-encre)}
.jour .accroche{margin-top:22px;max-width:60ch;color:var(--sourdine);font-size:1.05rem}

/* 2 · le mot : portrait et parole, gabarit d'article */
.mot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);align-items:start;margin-top:8px}
.mot > figure{grid-column:span 3}
.mot > .mot-texte{grid-column:5 / span 8}
.mot figure{margin:0}
.mot img{width:100%;height:auto}
.mot figcaption{margin-top:14px;font-size:.87rem;color:var(--sourdine);line-height:1.45}
.mot figcaption b{display:block;font-family:var(--titre);font-weight:700;color:var(--nuit);font-size:1rem;text-transform:none}
.mot-texte > p:first-of-type::first-letter{
  float:left;font-family:var(--titre);font-weight:900;font-size:3.6rem;line-height:.8;
  padding:.05em .11em 0 0;color:var(--vert-encre);
}
.mot-texte p{max-width:64ch}
.mot-source{margin-top:24px;padding-top:15px;border-top:1px solid var(--filet-fin);font-size:.85rem;color:var(--sourdine);max-width:64ch}

/* 3 · le theme : composition d'affiche, filets epais */
.theme-bloc{margin-top:34px;border-top:2px solid var(--filet);padding-top:34px;
  grid-column:1 / span 10;column-count:2;column-gap:var(--colonne-gap)}
.theme-bloc p{break-inside:avoid;color:#2C3C43}

/* =================================== 4 · LA CHARNIERE : la matiere devient donnee */
.charniere{position:relative;overflow:hidden;background:var(--nuit);isolation:isolate;min-height:64svh;display:flex;align-items:flex-end}
.charniere .photo{position:absolute;inset:0;z-index:0}
.charniere .photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(1.1) brightness(.86)}
.charniere .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(168deg,var(--nuit) 8%,var(--vert-encre) 74%,var(--cyan-encre) 100%);
  mix-blend-mode:color;opacity:.86}
/* la trame : des points qui mangent l'image en descendant */
.charniere .photo::before{
  content:"";position:absolute;inset:0;z-index:2;
  background-image:radial-gradient(circle at center,var(--nuit) 45%,transparent 46%);
  background-size:10px 10px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 14%,rgba(0,0,0,.55) 48%,#000 84%);
          mask-image:linear-gradient(to bottom,transparent 14%,rgba(0,0,0,.55) 48%,#000 84%);
}
.charniere .z{position:relative;z-index:3;padding-top:120px;padding-bottom:78px;width:100%}
.charniere p{
  grid-column:1 / span 8;
  margin:0;max-width:none;font-family:var(--titre);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.1rem);line-height:1.02;letter-spacing:-.03em;color:#fff;
}
.charniere p em{font-style:normal;color:var(--cyan)}

/* =========================================== REGIME 2 : LA DONNEE (bleu nuit) */
.nuit{background:var(--nuit);color:#fff;padding:76px 0}
.nuit.creuse{background:var(--nuit-2)}
.nuit h2{color:#fff}
.nuit h2 em{font-style:normal;color:var(--cyan)}
.nuit .accroche{margin-top:20px;max-width:62ch;color:rgba(255,255,255,.84)}

/* le registre : la donnee se lit en lignes, jamais en cartes */
.registre{margin-top:44px;border-top:1px solid var(--filet-clair)}
.registre li,.registre > div{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);
  row-gap:8px;padding:22px 0;border-bottom:1px solid var(--filet-clair);align-items:baseline;
}
.registre .rang{grid-column:span 1}
.registre h3{grid-column:span 3}
.registre p{grid-column:5 / span 8}
.registre .cle{grid-column:span 3}
.registre .valeur{grid-column:5 / span 8}
.registre .rang{font-family:var(--mono);font-size:.76rem;color:var(--cyan)}
.registre h3{
  font-family:var(--corps);font-weight:600;font-size:1.04rem;text-transform:none;
  letter-spacing:0;line-height:1.3;color:#fff;
}
.registre p{margin:0;color:rgba(255,255,255,.78);font-size:.98rem}
.registre .cle{
  font-family:var(--mono);font-size:.78rem;color:var(--cyan);
  grid-column:1 / 3;
}
.registre .valeur{margin:0;color:rgba(255,255,255,.88);white-space:pre-line;overflow-wrap:anywhere}

/* les deux journees : deux colonnes inegales, filet vertical */
.deux{margin-top:46px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);border-top:2px solid var(--filet-clair)}
.deux > div:first-child{grid-column:span 7}
.deux > div:last-child{grid-column:span 5}
.deux > div{padding:32px 0 34px;min-width:0}
.deux > div + div{padding-left:var(--colonne-gap);border-left:1px solid var(--filet-clair)}
.deux h3{font-family:var(--titre);font-size:1.3rem;font-weight:800;margin-bottom:13px;color:var(--cyan);text-transform:uppercase;letter-spacing:-.02em}
.deux p{color:rgba(255,255,255,.84);margin:0}
.actions{margin-top:38px;display:flex;flex-wrap:wrap;gap:14px}

/* partenaires : tuiles regulieres, sur le regime nuit */
.soutiens{margin:30px 0 14px;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--cyan)}
.bande{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;padding-top:20px;border-top:1px solid var(--filet-clair)}
.bande img{height:74px;width:auto;max-width:176px;object-fit:contain;background:#fff;padding:12px 17px;box-sizing:border-box}
.note{margin-top:30px;font-size:.9rem;color:var(--sourdine);max-width:62ch}
.nuit .note,.charniere .note{color:rgba(255,255,255,.7)}

/* questions */
.questions{margin-top:58px;border-top:1px solid var(--filet-clair)}
.questions details{border-bottom:1px solid var(--filet-clair)}
.questions summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-family:var(--corps);font-weight:600;font-size:1.02rem;color:#fff;
}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--cyan);border-bottom:1.5px solid var(--cyan);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.questions details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.questions p{padding-bottom:20px;margin:0;color:rgba(255,255,255,.8);max-width:70ch}

/* ================================ 9 · LA SUPERPOSITION : les deux regimes ensemble */
.echange{position:relative;background:var(--papier);padding:76px 0;overflow:hidden}
.echange::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at center,rgba(2,18,40,.22) 45%,transparent 46%);
  background-size:10px 10px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 62%);
          mask-image:linear-gradient(to bottom,#000,transparent 62%);
}
.echange .z{position:relative;z-index:1}
.echange h2{color:var(--nuit)}
.echange .accroche{margin-top:20px;max-width:60ch;color:var(--sourdine)}

.formulaire{grid-column:1 / span 8;margin-top:40px;display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--colonne-gap);row-gap:20px}
.champ{grid-column:span 4}
.champ.large{grid-column:1 / -1}
.champ{display:flex;flex-direction:column;gap:7px;min-width:0}
.champ.large{grid-column:1 / -1}
.champ label{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--nuit)}
.champ .obligatoire{color:var(--vert-encre)}
.champ input,.champ select,.champ textarea{
  font-family:var(--corps);font-size:1rem;color:var(--texte);background:var(--blanc);
  border:1px solid var(--filet-fin);border-radius:0;padding:.82rem .9rem;width:100%;
}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--vert-encre);outline-offset:0}
.accord{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--sourdine)}
.accord input{width:auto;margin-top:4px;flex:none}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.avis{padding:16px 18px;margin-top:30px;font-size:.95rem;border:1px solid}
.avis-ok{background:#E7F0EA;color:#16563B;border-color:#A8CCB7}
.avis-ko{background:#FBEBE5;color:#8A3419;border-color:#E5BCA9}
.avis ul{margin:8px 0 0;padding-left:18px;list-style:disc}

/* ---------------------------------------------------------------- Boutons */
.bouton{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--corps);font-size:.94rem;font-weight:600;
  padding:.85rem 1.5rem;border:2px solid transparent;border-radius:0;
  cursor:pointer;text-decoration:none;transition:background .16s,border-color .16s,color .16s;
}
.bouton:hover{text-decoration:none}
.bouton svg{width:16px;height:16px;flex:none}
.bouton-encre{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.bouton-encre:hover{background:#000A14;border-color:#000A14}
.bouton-vert{background:var(--vert);color:var(--nuit);border-color:var(--vert)}
.bouton-vert:hover{background:var(--cyan);border-color:var(--cyan)}
.bouton-vide{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.bouton-vide:hover{border-color:#fff}
/* variantes de l'aplat terracotta (declarees ici : .bouton ecrase toute
   border-color posee avant lui) */
.bouton-papier{background:var(--nuit);color:var(--papier);border-color:var(--nuit)}
.bouton-papier:hover{background:#000A14;border-color:#000A14}
.bouton-trait{background:transparent;color:var(--nuit);border-color:rgba(2,18,40,.55)}
.bouton-trait:hover{border-color:var(--nuit);background:rgba(2,18,40,.08)}

/* ---------------------------------------------------------------- Pied */
.pied{background:var(--nuit-2);color:rgba(255,255,255,.74);padding:58px 0 30px;font-size:.94rem}
.pied-haut{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);row-gap:34px}
.pied-haut > div:first-child{grid-column:span 5}
.pied-haut > div:nth-child(2){grid-column:7 / span 3}
.pied-haut > div:nth-child(3){grid-column:10 / span 3}
.pied img{height:30px;width:auto;margin-bottom:16px}
.pied-titre{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--cyan);margin-bottom:14px}
.pied a{color:rgba(255,255,255,.88)}
.pied li{margin-bottom:9px}
.pied-bas{margin-top:42px;padding-top:20px;border-top:1px solid var(--filet-clair);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem;color:rgba(255,255,255,.58)}

/* ------------------------------------------------------ Pages internes */
.tete{background:var(--nuit);color:#fff;padding:calc(var(--barre) + 72px) 0 62px;position:relative;overflow:hidden}
.tete h1{font-size:clamp(1.7rem,7.6vw,3rem);max-width:none;grid-column:1 / span 9}
.tete p{margin-top:18px;max-width:60ch;color:rgba(255,255,255,.84);text-transform:none}
.page{padding:86px 0}
.attente{margin-top:38px;padding:28px 30px;background:var(--blanc);border:2px solid var(--filet);max-width:68ch}
.attente h3{font-size:1.1rem;margin-bottom:10px;color:var(--nuit);text-transform:none;letter-spacing:0}
.attente p{margin:0;color:var(--sourdine)}
.journee{margin-top:44px}
.journee-tete{display:flex;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--filet)}
.journee-tete .rang{font-family:var(--mono);font-size:.78rem;color:var(--vert-encre)}
.journee-tete .date{font-family:var(--titre);font-size:1.25rem;font-weight:800;color:var(--nuit)}
.seance{display:grid;grid-template-columns:96px minmax(0,1fr);gap:22px;padding:18px 0;border-bottom:1px solid var(--filet-fin)}
.seance .heure{font-family:var(--mono);font-size:.86rem;color:var(--nuit)}
.seance .intitule{font-weight:600;margin-bottom:3px}
.seance .genre{font-size:.87rem;color:var(--sourdine)}
/* Le registre existe en deux regimes. Sur les pages internes il est sur papier :
   sans cette variante, le texte reste blanc et devient invisible (piege d'inversion). */
.page .registre{border-top-color:var(--filet-fin)}
.page .registre li,.page .registre > div{border-bottom-color:var(--filet-fin)}
.page .registre .rang{color:var(--vert-encre)}
.page .registre h3{color:var(--nuit)}
.page .registre p{color:var(--sourdine)}
.page .registre .cle{color:var(--vert-encre)}
.page .registre .valeur{color:var(--sourdine)}

.rappel{background:var(--nuit-2);color:#fff;padding:60px 0}
.rappel h2{max-width:18ch;color:#fff}
.rappel p{margin-top:14px;max-width:60ch;color:rgba(255,255,255,.84)}
.rappel .bouton{margin-top:26px}

/* ---------------------------------------------------------- Adaptatif */
@media (max-width:1000px){
  .mot{grid-template-columns:220px minmax(0,1fr);gap:38px}
  .mot > :nth-child(n){grid-column:auto}
  .theme-bloc{column-count:1}
  .pied-haut{grid-template-columns:1fr 1fr}
  /* PIEGE : un `grid-column: 7 / span 3` herite d'une grille a 12 colonnes cree
     des colonnes implicites des que le conteneur repasse a 1 ou 2 colonnes, et
     la largeur explose (472px mesures a 360px de viewport). Toute media query
     qui redefinit grid-template-columns DOIT liberer le placement des enfants. */
  .pied-haut > div:nth-child(n){grid-column:auto}
}
@media (max-width:900px){
  /* Entre 640 et 900px, un titre sur 8 colonnes d'une grille deja etroite
     tombait dans une colonne de ~420px : mesure a 7, 9 et meme 10 lignes.
     Sous cette largeur, les titres et les chapos prennent toute la zone.
     Double `:nth-child(n)` pour passer devant les placements numerotes. */
  .z > h2:nth-child(n):nth-child(n),
  .z > .accroche:nth-child(n):nth-child(n),
  .z > .chapo:nth-child(n):nth-child(n),
  .affiche h1, .affiche .theme{grid-column:1 / -1}
}
@media (max-width:820px){
  /* 11 gouttieres de 28px = 308px : au-dela d'une certaine etroitesse la grille
     a 12 colonnes ne rentre plus dans la zone et pousse tout hors ecran. */
  :root{--colonne-gap:16px}
  .raisons li{grid-template-columns:1fr;gap:6px}
  .mot{grid-template-columns:1fr;gap:26px}
  .mot figure{max-width:250px}
  .registre li,.registre > div{grid-template-columns:minmax(0,3ch) minmax(0,1fr);gap:6px 20px}
  .registre p{grid-column:2}
  .registre .cle{grid-column:1 / -1}
  .deux{grid-template-columns:1fr}
  .deux > div:nth-child(n),.publics > div:nth-child(n),.equipe > div:nth-child(n),
  .registre > :nth-child(n),.formulaire > :nth-child(n),
  .z > h2:nth-child(n),.z > .chapo:nth-child(n){grid-column:auto}
  .deux > div{padding:28px 0}
  .deux > div + div{padding:28px 0;border-left:0;border-top:1px solid var(--filet-clair)}
  .formulaire{grid-template-columns:1fr}
  .seance{grid-template-columns:1fr;gap:5px}
  .barre .chapitre span{display:none}
  .barre .chapitre::before{display:none}
  .barre img{height:34px;top:3px}
  .barre .chapitre b{font-size:1.5rem}
  .barre .appel{padding:.55rem .95rem;font-size:.92rem}
}
@media (max-width:640px){
  body{font-size:16px}
  /* Sous 640px on abandonne les 12 colonnes : une seule colonne pleine largeur.
     Tout placement numerote doit alors etre libere, sinon il ouvre des colonnes
     implicites (double specificite pour passer devant les regles de placement). */
  .z{padding:0 22px;grid-template-columns:minmax(0,1fr);column-gap:0}
  .z > :nth-child(n):nth-child(n){grid-column:1 / -1}
  /* Filet seulement : `break-word` ne coupe un mot que s'il ne tient pas seul
     sur une ligne, et sans trait d'union. `anywhere` + `hyphens:auto` cassaient
     les titres en plein milieu (« TRANS-FORME »). */
  h1,h2,h3,.theme{overflow-wrap:break-word;hyphens:manual}
  .barre-z{padding:0 22px}
  .jour,.nuit,.echange,.venir{padding:62px 0}
  .charniere .z{padding-top:110px;padding-bottom:110px}
  .affiche{min-height:auto;padding:calc(var(--barre) + 46px) 0 42px}
  .enseigne img{height:60px}

  .bande img{height:58px;padding:9px 12px}
  .pied-haut{grid-template-columns:1fr;gap:28px}
  .pied-haut > div{grid-column:auto}
  .pied-bas{flex-direction:column;gap:7px}
}

/* ==================================================================
   BLOCS AJOUTES AVEC LE DOSSIER DE COMMERCIALISATION (2026-09-08)
   ================================================================== */

/* La carte officielle de la Guyane remplace le visuel provisoire */
.territoire img{width:100%;max-width:none;height:auto;filter:drop-shadow(0 0 34px rgba(43,184,201,.22))}
.territoire figcaption{display:none}

/* Photo de section, pleine largeur contenue */
.cliche{margin:38px 0 0;position:relative}
.cliche img{width:100%;height:auto;display:block}
.cliche figcaption{
  margin-top:10px;font-family:var(--mono);font-size:.72rem;color:var(--sourdine);
}
.nuit .cliche figcaption{color:rgba(247,245,241,.6)}

/* L'exergue : la citation du president, en grand */
.exergue{
  margin:0 0 34px;font-family:var(--titre);font-weight:800;text-transform:none;
  font-size:clamp(1.35rem,3.2vw,2.15rem);line-height:1.18;letter-spacing:-.02em;
  color:var(--nuit);max-width:24ch;
}
.exergue span{color:var(--vert-encre)}

/* Deux publics cote a cote sur l'aplat vert */
.publics{margin-top:44px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);row-gap:var(--colonne-gap)}
.publics > div{grid-column:span 6}
.publics > div{padding:30px 0 34px;min-width:0}

.publics h3{
  font-family:var(--titre);font-weight:800;font-size:1.16rem;text-transform:uppercase;
  letter-spacing:-.018em;color:var(--nuit);margin-bottom:20px;
}
.publics ul li{padding:14px 0;border-top:1px solid rgba(2,18,40,.18)}
.publics ul li:first-child{border-top:0}
.publics b{display:block;font-weight:700;color:var(--nuit);margin-bottom:3px}
.publics p{margin:0;color:rgba(2,18,40,.8);font-size:.96rem}

/* Les tarifs : un tableau de stands, pas des cartes identiques */
.tarifs{margin-top:40px;border-top:1px solid var(--filet-clair)}
.tarifs > div{
  display:grid;grid-template-columns:minmax(0,20ch) minmax(0,12ch) minmax(0,1fr);
  gap:10px 34px;padding:20px 0;border-bottom:1px solid var(--filet-clair);align-items:baseline;
}
.tarifs .nom{font-family:var(--titre);font-weight:800;font-size:1.02rem;color:#fff;text-transform:uppercase;letter-spacing:-.015em}
.tarifs .nom small{display:block;font-family:var(--corps);font-weight:400;font-size:.82rem;text-transform:none;letter-spacing:0;color:rgba(247,245,241,.62);margin-top:3px}
.tarifs .prix{font-family:var(--titre);font-weight:800;font-size:1.32rem;color:var(--vert);font-variant-numeric:tabular-nums}
.tarifs .compris{margin:0;color:rgba(247,245,241,.78);font-size:.93rem}
.tarifs-note{margin-top:22px;font-size:.88rem;color:rgba(247,245,241,.66);max-width:64ch}

/* Les deux offres partenaires */
.offres{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.offre{border:2px solid var(--filet-clair);padding:28px 26px;min-width:0}
.offre.phare{border-color:var(--vert)}
.offre h3{font-family:var(--titre);font-weight:800;font-size:1.5rem;color:#fff;text-transform:uppercase}
.offre .prix{font-family:var(--titre);font-weight:800;font-size:2rem;color:var(--vert);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.offre .sous{font-size:.9rem;color:var(--cyan);margin-bottom:18px}
.offre ul li{padding:9px 0;border-top:1px solid var(--filet-clair);font-size:.94rem;color:rgba(247,245,241,.84)}
.offre ul li:first-child{border-top:0}

/* Les contacts nommes */
.equipe{margin-top:40px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colonne-gap);border-top:2px solid var(--filet-clair)}
.equipe > div{grid-column:span 4}
.equipe > div{padding:24px 0 26px;min-width:0}
.equipe > div + div{padding-left:var(--colonne-gap);border-left:1px solid var(--filet-clair)}
.equipe .nom{font-family:var(--titre);font-weight:800;font-size:1.1rem;color:#fff;text-transform:uppercase;letter-spacing:-.015em}
.equipe .role{font-family:var(--mono);font-size:.72rem;color:var(--cyan);margin:5px 0 12px}
.equipe p{margin:0 0 4px;font-size:.94rem;color:rgba(247,245,241,.86)}
.equipe a{color:rgba(247,245,241,.86)}
.equipe-pied{margin-top:26px;font-size:.92rem;color:rgba(247,245,241,.7)}

/* Le plan d'implantation */
.plan{margin-top:38px;background:#fff;padding:18px;border:1px solid var(--filet-fin)}
.plan-cadre{overflow-x:auto;overscroll-behavior-x:contain}
.plan img{width:100%;height:auto;display:block;min-width:560px}
.plan-aide{margin-top:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--sourdine)}
@media (min-width:661px){.plan-aide{display:none}}
.plan-legende{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.84rem;color:var(--sourdine)}
.plan-legende span{display:inline-flex;align-items:center;gap:7px}
.plan-legende i{width:11px;height:11px;display:block;flex:none}

@media (max-width:820px){
  .publics{grid-template-columns:1fr}
  .publics > div{padding:26px 0}
  .publics > div + div{padding:26px 0;border-left:0;border-top:1px solid rgba(2,18,40,.3)}
  .tarifs > div{grid-template-columns:minmax(0,1fr) minmax(0,10ch);gap:6px 18px}
  .tarifs .compris{grid-column:1 / -1}
  .offres{grid-template-columns:1fr}
  .equipe{grid-template-columns:1fr}
  .equipe > div{border-right:0;border-bottom:1px solid var(--filet-clair);padding:20px 0}
  .equipe > div + div{padding-left:0}
  .equipe > div:last-child{border-bottom:0}
}

/* Tarifs masques : « Sur demande » n'est pas un montant, il ne prend pas
   la graisse ni la couleur d'un prix. */
.prix.sur-demande{
  font-family:var(--corps);font-weight:600;font-size:1rem;
  color:var(--cyan);letter-spacing:0;
}
.offre .prix.sur-demande{font-size:1.15rem}

/* ==================================================================
   LE MOTIF DE L'AFFICHE : le maillage de constellation.
   L'illustration officielle porte un reseau de points relies dans le
   haut de la carte. C'est la signature graphique de l'edition : on la
   rejoue en fond des sections sombres, tres discretement.
   ================================================================== */
.nuit,.charniere,.tete,.affiche{position:relative;isolation:isolate}
.nuit::before,.tete::before,.affiche::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(43,184,201,.20), transparent 46%),
    radial-gradient(circle at 88% 8%,  rgba(111,185,44,.16), transparent 42%),
    radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.72), transparent 100%),
    radial-gradient(2px 2px at 34% 12%, rgba(255,255,255,.58), transparent 100%),
    radial-gradient(2.5px 2.5px at 52% 26%, rgba(43,184,201,.85), transparent 100%),
    radial-gradient(2px 2px at 71% 15%, rgba(255,255,255,.62), transparent 100%),
    radial-gradient(2.5px 2.5px at 86% 30%, rgba(111,185,44,.80), transparent 100%),
    radial-gradient(2px 2px at 26% 62%, rgba(255,255,255,.42), transparent 100%),
    radial-gradient(2px 2px at 63% 74%, rgba(43,184,201,.60), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 44%,  rgba(255,255,255,.34), transparent 100%),
    radial-gradient(1.5px 1.5px at 44% 52%, rgba(111,185,44,.42), transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 58%, rgba(255,255,255,.30), transparent 100%),
    radial-gradient(1.5px 1.5px at 94% 46%, rgba(43,184,201,.40), transparent 100%);
}
.nuit > .z,.tete > .z,.affiche > .z{position:relative;z-index:1}
/* l'affiche porte le motif sur son ::after (son ::before tient deja le halo) */
.affiche::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
/* Les lignes du maillage, tracees en biais comme sur l'illustration. */
.nuit::after{
  content:"";position:absolute;left:0;right:0;top:0;height:260px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(103deg, transparent 49.7%, rgba(43,184,201,.34) 50%, transparent 50.3%),
    linear-gradient(72deg,  transparent 49.7%, rgba(111,185,44,.28) 50%, transparent 50.3%),
    linear-gradient(118deg, transparent 49.8%, rgba(255,255,255,.16) 50%, transparent 50.2%),
    linear-gradient(56deg,  transparent 49.8%, rgba(43,184,201,.18) 50%, transparent 50.2%);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent);
          mask-image:linear-gradient(to bottom,#000,transparent);
}

/* ==================================================================
   LES BLOCS. La page etait entierement plate : du texte et des filets,
   aucun contenant. Les contenus qui se comparent (publics, journees,
   contacts) prennent un fond et un filet, pour exister comme blocs.
   ================================================================== */
.deux > div,.equipe > div{
  background:rgba(247,245,241,.045);
  border:1px solid var(--filet-clair);
  padding:30px 30px 32px;
}
.deux > div + div,.equipe > div + div{border-left:1px solid var(--filet-clair);padding-left:30px}
.publics > div{
  background:var(--papier);
  border:1px solid rgba(2,18,40,.14);
  padding:30px 30px 32px;
}
.publics > div + div{border-left:1px solid rgba(2,18,40,.16);padding-left:30px}
/* Une bande de couleur en tete de bloc : la signature de l'edition. */
.deux > div,.publics > div,.equipe > div{position:relative;overflow:hidden}
.deux > div::before,.publics > div::before,.equipe > div::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--vert),var(--cyan));
}

/* Le registre gagne une trame de fond, pour ne plus flotter. */
.registre{background:rgba(247,245,241,.03);padding:0 22px;border:1px solid var(--filet-clair)}
.page .registre{background:rgba(2,18,40,.03);border-color:var(--filet-fin)}

/* ==================================================================
   REVELATION AU DEFILEMENT.
   Regle de securite : les etats initiaux ne s'appliquent QUE si le JS
   a pose la classe `anime` sur <html>. Sans JS, sans observateur ou
   sous prefers-reduced-motion, tout est visible d'emblee : on ne masque
   jamais du contenu en pariant sur un script.
   ================================================================== */
@media (prefers-reduced-motion:no-preference){
  html.anime .revele{opacity:0;transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  html.anime .revele.vu{opacity:1;transform:none}
  /* les enfants d'une liste arrivent en cascade */
  html.anime .revele .registre > *,
  html.anime .revele .raisons li,
  html.anime .revele .publics > div,
  html.anime .revele .deux > div,
  html.anime .revele .equipe > div,
  html.anime .revele .bande img{
    opacity:0;transform:translateY(16px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
  }
  html.anime .revele.vu .registre > *,
  html.anime .revele.vu .raisons li,
  html.anime .revele.vu .publics > div,
  html.anime .revele.vu .deux > div,
  html.anime .revele.vu .equipe > div,
  html.anime .revele.vu .bande img{opacity:1;transform:none}
  html.anime .revele.vu .registre > *:nth-child(1){transition-delay:.04s}
  html.anime .revele.vu .registre > *:nth-child(2){transition-delay:.08s}
  html.anime .revele.vu .registre > *:nth-child(3){transition-delay:.12s}
  html.anime .revele.vu .registre > *:nth-child(4){transition-delay:.16s}
  html.anime .revele.vu .registre > *:nth-child(5){transition-delay:.20s}
  html.anime .revele.vu .registre > *:nth-child(6){transition-delay:.24s}
  html.anime .revele.vu .publics > div:nth-child(2),
  html.anime .revele.vu .deux > div:nth-child(2),
  html.anime .revele.vu .equipe > div:nth-child(2){transition-delay:.1s}
  html.anime .revele.vu .equipe > div:nth-child(3){transition-delay:.2s}
  /* la bande de couleur d'un bloc se tire quand le bloc arrive */
  html.anime .revele .deux > div::before,
  html.anime .revele .publics > div::before,
  html.anime .revele .equipe > div::before{transform:scaleX(0);transform-origin:left;
    transition:transform .6s cubic-bezier(.16,1,.3,1) .15s}
  html.anime .revele.vu .deux > div::before,
  html.anime .revele.vu .publics > div::before,
  html.anime .revele.vu .equipe > div::before{transform:scaleX(1)}
}

/* ==================================================================
   LE MANIFESTE. Le theme du salon est son message : il etait traite
   comme un titre de section suivi de deux colonnes de texte. Il passe
   en typographie monumentale, une ligne par fragment, sur le petrole
   de l'affiche, avec le territoire en filigrane derriere.
   ================================================================== */
.manifeste{padding:96px 0 84px;position:relative;overflow:hidden}
/* le territoire officiel, tres grand : seules ses parties lumineuses ressortent
   du petrole grace a la fusion `screen`. Element dedie et non pseudo-element :
   `.nuit::after` porte deja le maillage et imposait sa geometrie. */
.territoire-fond{
  position:absolute;z-index:0;pointer-events:none;
  right:-4%;top:50%;transform:translateY(-50%);
  width:min(44vw,560px);aspect-ratio:900/1232;
  background:url("carte-guyane.png") center/contain no-repeat;
  opacity:.78;mix-blend-mode:screen;
}
.manifeste > .z{position:relative;z-index:1}

.cri{grid-column:1 / -1;display:block;margin:0;max-width:none;
  font-size:clamp(2.3rem,6.4vw,5.1rem);line-height:.96;letter-spacing:-.035em;
  text-transform:uppercase;color:#fff;text-wrap:balance}
.cri .cri-ligne{display:block;position:relative;padding-left:calc(var(--rang) * 3.2vw)}
/* la derniere ligne, « et elle-meme », est le retournement du propos :
   elle prend le cyan et l'italique du logo */
.cri .cri-ligne:last-child{color:var(--cyan)}
.cri em{font-style:italic;color:var(--vert)}
/* un trait court devant chaque ligne, comme les affluents du fleuve */
.cri .cri-ligne::before{
  content:"";position:absolute;left:calc(var(--rang) * 3.2vw - 1.6vw);top:.52em;
  width:1.05vw;height:3px;background:var(--vert);opacity:.85;
}
.cri .cri-ligne:first-child::before{display:none}

.manifeste .theme-bloc{
  grid-column:1 / span 8;margin-top:52px;border-top:1px solid var(--filet-clair);
  padding-top:30px;column-count:2;column-gap:var(--colonne-gap);
}
.manifeste .theme-bloc p{color:rgba(255,255,255,.82);break-inside:avoid}

/* la cascade : chaque ligne monte a son tour quand la section arrive */
@media (prefers-reduced-motion:no-preference){
  html.anime .revele .cri .cri-ligne{
    opacity:0;transform:translateY(24px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--rang) * .11s);
  }
  html.anime .revele.vu .cri .cri-ligne{opacity:1;transform:none}
}

@media (max-width:820px){
  .manifeste{padding:78px 0 70px}
  .territoire-fond{
    top:0;transform:none;right:-22%;
    width:60vw;opacity:.2;
  }
  .cri .cri-ligne{padding-left:0}
  .cri .cri-ligne::before{display:none}
  .manifeste .theme-bloc{column-count:1;margin-top:36px}
}

/* ==================================================================
   LES PHOTOS. Elles etaient posees brutes, pleine largeur, sans aucun
   traitement : quatre rectangles identiques dans la page. Elles
   arrivent desormais en duotone petrole-cyan et retrouvent leur
   couleur quand la section se revele. La couleur devient un evenement.
   ================================================================== */
.cliche{overflow:hidden}
.cliche img{filter:saturate(.35) contrast(1.05);transition:filter 1.2s cubic-bezier(.16,1,.3,1) .1s}
.cliche::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(142deg,var(--nuit) 4%,var(--cyan-encre) 58%,var(--vert-encre) 100%);
  mix-blend-mode:color;opacity:.9;
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1) .1s;
}
/* un angle de cadre, repris du trait vert de l'affiche */
.cliche::before{
  content:"";position:absolute;left:0;top:0;width:76px;height:76px;z-index:2;
  border-top:3px solid var(--vert);border-left:3px solid var(--vert);
  opacity:0;transform:translate(10px,10px);
  transition:opacity .7s ease .5s,transform .7s cubic-bezier(.16,1,.3,1) .5s;
}
.revele.vu .cliche img{filter:none}
.revele.vu .cliche::after{opacity:0}
.revele.vu .cliche::before{opacity:1;transform:none}
/* sans revelation (JS absent, reduced-motion), les photos sont d'emblee
   en couleur : on ne masque jamais l'information derriere une animation */
html:not(.anime) .cliche img{filter:none}
html:not(.anime) .cliche::after{opacity:0}
html:not(.anime) .cliche::before{opacity:1;transform:none}

/* ==================================================================
   LA BANDE DES COMMUNES. Le salon s'adresse aux 22 communes de Guyane :
   la liste defile, en fond de la charniere, comme un generique.
   ================================================================== */
.communes{background:var(--nuit-2);padding:38px 0 42px;position:relative;overflow:hidden}
.communes-intro{
  margin:0 0 22px;padding:0 var(--gouttiere);max-width:var(--maxw);
  margin-left:auto;margin-right:auto;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);
}
.communes-intro b{color:#fff;font-weight:500}
.communes-piste{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.communes ul{
  display:flex;gap:0;list-style:none;margin:0;padding:0;width:max-content;
  animation:smg-defile 68s linear infinite;
}
.communes li{
  font-family:var(--titre);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,2.1vw,1.7rem);letter-spacing:-.02em;
  color:rgba(255,255,255,.62);white-space:nowrap;padding:0 26px;
  display:flex;align-items:center;gap:26px;
}
.communes li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--vert);opacity:.6}
@keyframes smg-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .communes ul{animation:none;flex-wrap:wrap;width:auto}
}
.communes:hover ul{animation-play-state:paused}
@media (max-width:640px){.communes{padding:28px 0 30px}}


/* ==================================================================
   LA GALERIE. Quatre photos pleine largeur empilees faisaient pres de
   4000px de defilement pour de l'illustration. Elles passent en pistes
   horizontales a hauteur contenue : on voit une image et demie, ce qui
   annonce la suite sans l'imposer.

   Defilement natif : la piste marche au doigt, a la molette horizontale
   et au clavier sans JavaScript. Les fleches sont ajoutees par le
   script et n'apparaissent que si elles servent.
   ================================================================== */
.galerie{
  grid-column:1 / -1;position:relative;margin-top:38px;
  /* la piste sort de la grille par la droite : on sent qu'il y a une suite */
}
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
  .galerie{margin-right:calc(50% - 50vw)}
}
.galerie-piste{
  display:flex;gap:18px;list-style:none;margin:0;padding:0 var(--gouttiere) 0 0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.galerie-piste::-webkit-scrollbar{display:none}
.galerie-piste > li{
  flex:0 0 clamp(260px, 58%, 720px);scroll-snap-align:start;margin:0;min-width:0;
}
.galerie figure{margin:0;position:relative;overflow:hidden}
.galerie img{
  width:100%;height:clamp(215px, 26vw, 360px);object-fit:cover;display:block;
  background:var(--nuit-2);
}
.galerie figcaption{
  margin-top:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--sourdine);
}
.nuit .galerie figcaption{color:rgba(247,245,241,.62)}

/* le duotone de revelation s'applique aussi aux photos de galerie */
.galerie img{filter:saturate(.35) contrast(1.05);transition:filter 1.1s cubic-bezier(.16,1,.3,1)}
.galerie figure::after{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(215px, 26vw, 360px);
  pointer-events:none;
  background:linear-gradient(142deg,var(--nuit) 4%,var(--cyan-encre) 58%,var(--vert-encre) 100%);
  mix-blend-mode:color;opacity:.9;transition:opacity 1.1s cubic-bezier(.16,1,.3,1);
}
.revele.vu .galerie img{filter:none}
.revele.vu .galerie figure::after{opacity:0}
html:not(.anime) .galerie img{filter:none}
html:not(.anime) .galerie figure::after{opacity:0}

/* les commandes, posees par le script */
.galerie-commandes{display:flex;gap:10px;justify-content:flex-start;margin:18px 0 0}
.galerie-bouton{
  width:46px;height:46px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:2px solid var(--filet);border-radius:2px;
  color:var(--texte);transition:background .16s ease,border-color .16s ease;
}
.galerie-bouton svg{width:20px;height:20px}
.galerie-bouton:hover:not(:disabled){background:var(--nuit);border-color:var(--nuit);color:#fff}
.galerie-bouton:disabled{opacity:.3;cursor:default}
.galerie-bouton.prec svg{transform:rotate(180deg)}
.nuit .galerie-bouton{border-color:var(--filet-clair);color:#fff}
.nuit .galerie-bouton:hover:not(:disabled){background:var(--vert);border-color:var(--vert);color:var(--nuit)}

/* la photo qui reste seule (les conferences) perd sa hauteur de rectangle */
.cliche-bas img{height:clamp(230px, 29vw, 400px);object-fit:cover}

@media (max-width:640px){
  .galerie-piste{gap:12px;padding-right:22px}
  .galerie-piste > li{flex:0 0 82%}
  .galerie-commandes{margin-right:0}
}

/* ==================================================================
   LE MENU. La barre n'affichait que le chapitre courant et un appel :
   on savait ou on etait, jamais ou aller. Les memes liens servent en
   ligne au-dessus de 1180px et en panneau plein ecran en dessous.
   ================================================================== */
.menu ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.menu a:not(.bouton){
  font-family:var(--corps);font-size:.97rem;font-weight:500;color:var(--texte);
  text-decoration:none;white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent;
  transition:border-color .16s ease;
}
.menu a:not(.bouton):hover{border-bottom-color:var(--vert-encre);text-decoration:none}
.barre.barre-nuit .menu a:not(.bouton){color:rgba(255,255,255,.86)}
.barre.barre-nuit .menu a:not(.bouton):hover{color:#fff;border-bottom-color:var(--vert)}
.bascule{display:none}

@media (min-width:1181px){
  .menu{margin-left:auto;display:flex;align-items:center;gap:26px}
  .appel-menu{display:none}          /* l'appel vit dans la barre, pas deux fois */
  .appel-barre{margin-left:26px}
}

@media (max-width:1180px){
  /* Le panneau est un frere de la barre dans le flux, jamais un enfant d'un
     element filtre : un ancetre en `filter`/`backdrop-filter` devient bloc
     conteneur des `position:fixed` et ecrase le panneau a la hauteur de la
     barre. Ici la barre n'a aucun filtre, et le panneau se positionne sous
     elle en `fixed` plein ecran. */
  .appel-barre{display:none}
  .bascule{
    display:grid;place-items:center;margin-left:auto;flex:none;cursor:pointer;
    width:46px;height:46px;background:transparent;border:2px solid var(--filet);
    border-radius:2px;color:var(--texte);
  }
  .bascule svg{width:22px;height:22px}
  .barre.barre-nuit .bascule{border-color:var(--filet-clair);color:#fff}
  .menu{
    position:fixed;left:0;right:0;top:var(--barre);bottom:0;z-index:190;
    background:var(--papier);
    padding:34px var(--gouttiere) 40px;
    display:flex;flex-direction:column;gap:26px;align-items:flex-start;
    overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .barre.barre-nuit .menu{background:var(--nuit)}
  .menu.ouvert{transform:none;opacity:1;visibility:visible}
  .menu ul{flex-direction:column;align-items:flex-start;gap:6px;width:100%}
  .menu li{width:100%;border-bottom:1px solid var(--filet)}
  .barre.barre-nuit .menu li{border-bottom-color:var(--filet-clair)}
  .menu a:not(.bouton){
    display:block;width:100%;padding:16px 0;border-bottom:0;
    font-family:var(--titre);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  }
  .appel-menu{margin-top:10px;width:100%;text-align:center}
}
@media (max-width:640px){
  .menu{padding:28px 22px 34px}
  .menu a:not(.bouton){font-size:1.3rem;padding:14px 0}
}

/* le poids d'un fichier a telecharger se dit avant le clic, pas apres */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:26px}
.poids{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--sourdine)}
.nuit .poids{color:rgba(247,245,241,.6)}
.apres-actions{margin-top:14px;font-size:.95rem;color:var(--sourdine)}
.nuit .apres-actions{color:rgba(247,245,241,.72)}

/* ==================================================================
   LE COMPTE A REBOURS. Quatre cartouches sous le lieu, dans la
   typographie des dates : c'est la meme information, comptee.
   ================================================================== */
.rebours{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;
}
.rebours > div{
  min-width:76px;padding:12px 14px 10px;
  background:rgba(247,245,241,.07);
  border:1px solid var(--filet-clair);
  border-top:2px solid var(--vert);
}
.rebours b{
  display:block;font-family:var(--titre);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.rebours span{
  display:block;margin-top:5px;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cyan);
}
/* une fois le salon ouvert, le decompte n'a plus lieu d'etre */
.rebours-passe{display:none}
@media (max-width:400px){
  .rebours{gap:8px}
  .rebours > div{min-width:0;flex:1 1 calc(50% - 4px);padding:10px 12px 9px}
}


/* Un lien en vert encre est fait pour le papier : sur le petrole il tombe a
   3,05:1. Sur fond sombre il prend le vert vif de la charte. */
.nuit a:not(.bouton):not(.appel),
.charniere a:not(.bouton),
.affiche a:not(.bouton){color:var(--vert)}
.nuit a:not(.bouton):not(.appel):hover{color:#fff}


#edito .mot{margin-top:44px}
@media (max-width:820px){#edito .mot{margin-top:32px}}

/* ==================================================================
   RETOURS DU 2026-09-08 (4e lot)
   ================================================================== */

/* La Guyane du hero etait trop discrete : elle passe de 4 a 5 colonnes. */
.pied-affiche > .territoire{
  position:absolute;z-index:0;
  right:max(0px, calc((100vw - var(--maxw)) / 2));
  top:50%;transform:translateY(-50%);
  width:min(56vw,820px);margin:0;
  display:flex;align-items:center;justify-content:flex-end;
  pointer-events:none;
}

/* PIEGE, 3e fois : `.pied-affiche` porte sa PROPRE grille a 12 colonnes, que
   la bascule de `.z` en une colonne ne touchait pas. En mobile, le bloc des
   dates restait donc sur 6 colonnes, soit 165px pour 346 disponibles : la
   moitie de l'ecran, exactement ce qui etait signale. */
@media (max-width:900px){
  .pied-affiche{grid-template-columns:minmax(0,1fr);row-gap:34px}
  .pied-affiche > :nth-child(n):nth-child(n){grid-column:1 / -1}
  .pied-affiche > .territoire{
    position:static;transform:none;top:auto;right:auto;
    width:auto;max-width:340px;display:block;margin-top:8px;
  }
  .quand .barre-verte{max-width:none}
}

/* Le logo du pied de page faisait 30px de haut, moins que le texte a cote. */
.pied img{height:52px}
@media (max-width:640px){.pied img{height:44px}}

/* Le panneau du menu coupait la bordure basse de l'appel : il lui faut de la
   place sous le dernier element. */
@media (max-width:1180px){
  .menu{padding-bottom:64px}
}

/* Le bouton de l'agent se fondait dans les sections sombres. Il garde la
   couleur du widget : ce sont un anneau vert et une ombre portee qui le
   detachent des deux regimes. Ne jamais regler cela par `data-couleur`, qui
   reteint tout le panneau et les bulles. */
.ek-bouton{
  width:72px !important;height:72px !important;
  box-shadow:0 0 0 3px var(--vert), 0 12px 34px rgba(2,18,40,.42) !important;
}

/* La Guyane elargie a 5 colonnes dilatait la ligne du bas de l'affiche : a
   1440x900 le hero depassait l'ecran et les dates passaient sous la ligne de
   flottaison. Elle est donc plafonnee en HAUTEUR, et garde sa largeur de
   colonne comme cadre. */
.territoire img{
  max-height:min(94vh, 960px);
  width:auto;max-width:100%;
  margin-left:auto;                /* elle reste calee sur le bord droit */
}
@media (max-width:900px){
  .territoire img{max-height:none;width:100%;margin-left:0}
}

/* Le bouton de l'agent, agrandi, recouvrait la mention de bas d'affiche sur
   telephone : on lui laisse la place. */
@media (max-width:900px){
  .affiche .apres{max-width:min(100%, 400px)}
  .affiche{padding-bottom:74px}
  .pied-affiche{row-gap:14px}
  .pied-affiche > .territoire{margin-top:0}
  .propulse{bottom:18px}
}

/* Le deroule ne porte plus qu'un bloc depuis le retrait des soirees : seul,
   il prend toute la zone au lieu de rester dans une demi-colonne. */
.deux:has(> div:only-child){grid-template-columns:minmax(0,1fr)}
.deux > div:only-child{grid-column:1 / -1}

/* Sur l'affiche, l'indicateur de chapitre doublait le logo pour ne rien dire
   de plus : il se retire, et le filet qui le precede avec lui. */
.chapitre.chapitre-masque{opacity:0;pointer-events:none}
.chapitre.chapitre-masque::before{opacity:0}

@media (max-width:900px){
  /* en etroit le cartouche revient a droite : le bouton de l'agent est plus
     bas que le bas de l'affiche, qui a son propre retrait. */
  .propulse{right:22px}
}

/* La Guyane etant passee en fond, le bloc des dates et l'affiche entiere
   restent au-dessus d'elle. */
.pied-affiche > .quand{position:relative;z-index:2}

/* ==================================================================
   RESPONSIVE : corrections du 2026-09-09
   ================================================================== */

/* Sous 820px, le titre du chapitre etait masque mais son NUMERO restait :
   « 03 » tout seul a cote du logo ne dit rien. L'indicateur part entier. */
@media (max-width:820px){
  .barre .chapitre{display:none}
}

/* Le bouton de l'agent, dimensionne pour le bureau, mangeait le coin de
   l'ecran sur telephone et recouvrait le texte. */
@media (max-width:820px){
  .ek-bouton{
    width:54px !important;height:54px !important;
    box-shadow:0 0 0 2px var(--vert), 0 8px 22px rgba(2,18,40,.38) !important;
  }
}

/* La legende du plan se repartissait en lignes irregulieres (deux entrees sur
   une ligne, une sur la suivante). En etroit, une entree par ligne. */
@media (max-width:820px){
  .plan-legende{display:grid;grid-template-columns:1fr;gap:9px}
}


/* `white-space:nowrap` protege les libelles courts d'une coupure disgracieuse,
   mais sur les plus etroits il fait sortir les longs boutons du cadre
   (« Telecharger le dossier de presentation » mesure 371px pour 276 de zone).
   En dessous de 400px, ils reprennent le droit de passer a la ligne. */
@media (max-width:400px){
  .bouton{white-space:normal;text-align:center}
}