/* CitéRénov' — 9 frames Figma (1440 px de large) reproduites à l'identique.
   Chaque calque est posé en absolu aux coordonnées Figma ; la scène entière est
   mise à l'échelle par --s, calculé en JS. */

:root {
  --ink: #1a1917;
  --terracotta: #aa533d;
  --sage: #4e594b;
  --grey: #686b64;
  --cream: #f7f1e8;
  --paper: #fffdfb;
  --s: 1;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}

/* ── scène ──────────────────────────────────────────────────────────────── */
#viewport { position: relative; width: 100%; overflow: hidden; }
#stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--s)); }
.n { position: absolute; margin: 0; }
.k-svg { display: block; max-width: none; }
.img-in, .veil { position: absolute; inset: 0; display: block; }
.img-in { will-change: transform; }
.k-video video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } /* blanc de la vidéo = blanc cassé de la carte */

/* ── questions fréquentes (accueil) ─────────────────────────────────────── */
.k-faq { color: var(--paper); }
.faq-row { border-bottom: 1px solid rgba(235, 235, 235, .3); }
.faq-q {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  width: 100%; padding: 24px 0 24px;
  font: 500 24px/34px 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--paper);
}
.faq-q span { max-width: 690px; }
.faq-q:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.faq-ic { flex: none; margin: 5px 11px 0 0; color: rgba(255, 253, 251, .6); transition: transform .5s cubic-bezier(.2, .7, .2, 1), color .3s; }
.faq-q:hover .faq-ic, .is-open .faq-ic { color: var(--paper); }
.is-open .faq-ic { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1); }
.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  margin: -8px 0 24px; max-width: 690px;
  font: 400 18px/28px 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: rgba(255, 253, 251, .72);
}

/* ── formulaire de contact : vrais champs posés sur les cadres Figma ─────── */
.fld {
  box-sizing: border-box; margin: 0; border: 0; border-radius: 2px; background: transparent;
  padding: 0 18px; color: var(--ink);
  font: 400 15px/20px 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
textarea.fld { padding: 16px 20px; resize: none; line-height: 21px; }
textarea.fld::placeholder { color: rgba(104, 107, 100, .5); }
select.fld { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px; }
.fld:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 0; }
.fld-check { padding: 0; accent-color: var(--terracotta); cursor: pointer; }
.fld.is-invalid { box-shadow: inset 0 0 0 1px var(--terracotta); }

/* zones cliquables posées au-dessus des calques (navigation, boutons) */
.hit { position: absolute; z-index: 5; display: block; cursor: pointer; border-radius: 2px; }
.hit:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* ── lignes masquées pour les titres ────────────────────────────────────── */
.ln-mask { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
/* État initial en CSS (pas de flash avant le JS) ; GSAP reprend la main par
   gsap.set(lines, { yPercent: 105, y: 0 }) — sans ce set, le translateY(%) est
   lu comme `y` en pixels et le tween yPercent ne fait rien. */
.ln { display: block; transform: translateY(105%); will-change: transform; }

body.is-loading { overflow: hidden; height: 100vh; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .ln { transform: none !important; }
}

/* ── illustrations sur papier clair ──────────────────────────────────────
   Le papier de ces croquis est blanc, la section derrière est ivoire ou
   crème : sans fusion, on voit un rectangle plus clair (retour client du
   28/09). En multiply, le blanc du papier prend exactement la couleur de
   la section et seul le trait subsiste. Les croquis posés sur le vert ou
   la terracotta ne sont PAS concernés : là, la carte blanche est voulue. */
.n[data-id="2:581"],
.n[data-id="2:851"],
.n[data-id="53:541"],
.n[data-id="99:362"],
.n[data-id="115:184"],
.n[data-id="53:256"] { mix-blend-mode: multiply; }

/* ── bandeau « déploiement national » (Marchés publics) ──────────────────
   Retour client : « un carré bizarre ». Trois défauts en fait — le bandeau ne
   montrait que 20 % d'une image, cette image était le croquis du cas réel de
   FINANCEMENT (hors sujet), et un voile noir à 50 % la rendait illisible. La
   carte de France est déjà dessinée en grand juste à gauche : inutile de la
   répéter ici. On garde la boîte de la maquette, on la passe en carte crème
   et on n'y laisse que les coordonnées, qui ne figurent nulle part ailleurs
   sur la page. */
.n[data-id="99:376"] {
  background: var(--cream, #f7f1e8);
  box-shadow: inset 0 0 0 1px rgba(170, 83, 61, .16);
}
.n[data-id="99:376"] .img-in,
.n[data-id="99:376"] .veil { display: none !important; }
.n[data-id="99:377"] {
  left: 837px !important;
  top: 1085px !important;
  width: 480px !important;
  height: 60px !important;
  justify-content: center !important;
  white-space: pre-wrap !important;
  font-size: 15px !important;
  line-height: 21px !important;
  color: var(--ink, #1a1917) !important;
}

/* Même bandeau, version mobile. */
.n[data-id="220:571"] {
  background: var(--cream, #f7f1e8);
  box-shadow: inset 0 0 0 1px rgba(170, 83, 61, .16);
}
.n[data-id="220:571"] .img-in,
.n[data-id="220:571"] .veil { display: none !important; }
.n[data-id="220:572"] {
  justify-content: center !important;
  white-space: pre-wrap !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ink, #1a1917) !important;
}

/* ── repère « 90 % » : nouvelle formulation (correction 3) ───────────────
   « mensuellement, après déduction des subventions » fait 124 signes contre
   98 : la boîte de 280 x 66 px était trop étroite. On l'élargit à 460 px en
   conservant son centre, et la hauteur suit le texte. */
.n[data-id="2:798"]   { left: 488px !important; width: 460px !important; height: auto !important; }
.n[data-id="35:3122"] { left: 482px !important; width: 460px !important; height: auto !important; }
/* Mêmes repères sur téléphone : la phrase y tenait dans 137 px de large et
   débordait de 42 px sous le pavé « 90 % ». Il y a la place de l'élargir. */
.n[data-id="210:1411"] { left: 71px !important; width: 260px !important; height: auto !important; }
.n[data-id="161:603"]  { left: 71px !important; width: 260px !important; height: auto !important; }

/* ── version mobile ──────────────────────────────────────────────────────
   La scène de bureau est un canevas de 1440 px : elle ne peut pas se
   réorganiser. Le téléphone reçoit donc sa propre scène, dessinée dans Figma
   et produite par le même générateur. Une seule des deux est affichée. */
#viewport-mob { position: relative; width: 100%; overflow: hidden; display: none; }
#stage-mob { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--sm, 1)); }
/* Figma coupe un mot trop long pour sa boîte ; le CSS ne le fait pas par
   défaut et le mot déborde du cadre. Sur la scène mobile, où les boîtes sont
   étroites, on rétablit le comportement de la maquette. */
#stage-mob .tx { overflow-wrap: break-word; }

/* L'accordéon de la FAQ est dimensionné pour le bureau ; sur la scène mobile on
   reprend les tailles de la maquette (question 18 px, réponse 14 px). */
#stage-mob .faq-q { gap: 16px; padding: 14px 0; font-size: 18px; line-height: 26px; }
#stage-mob .faq-q span { max-width: none; }
#stage-mob .faq-ic { width: 20px; height: 20px; margin: 3px 0 0 0; }
#stage-mob .faq-a p { margin: -4px 0 14px; max-width: none; font-size: 14px; line-height: 22px; }

/* ── menu mobile ─────────────────────────────────────────────────────────
   Reprend la frame Figma 161:755 : fond terracotta plein écran, logo blanc,
   croix de fermeture, filet, sept entrées à 30 px / interligne 64. Le bloc
   interne garde les 402 px de la maquette et suit l'échelle de la scène. */
.burger { position: absolute; z-index: 6; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.burger:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; border-radius: 3px; }

.mnu { position: fixed; inset: 0; z-index: 60; background: #aa533d; color: #fffdfb; }
.mnu[hidden] { display: none; }
.mnu-in { position: absolute; top: 0; left: 0; width: 402px; height: 100%; transform-origin: 0 0; transform: scale(var(--sm, 1)); }
.mnu-logo { position: absolute; left: 20px; top: 28px; width: 98px; height: 43px; object-fit: contain; }
.mnu-x {
  position: absolute; left: 352px; top: 34px; width: 30px; height: 30px;
  margin: 0; padding: 0; border: 0; background: none; color: #fffdfb; cursor: pointer;
}
.mnu-x:focus-visible { outline: 2px solid #fffdfb; outline-offset: 3px; }
.mnu-nav { position: absolute; left: 20px; top: 131px; right: 20px; }
.mnu::before {
  content: ''; position: absolute; left: 20px; top: 101px; width: 362px; height: 1px;
  background: rgba(255, 255, 255, .2); transform-origin: 0 0; transform: scale(var(--sm, 1));
}
.mnu-i {
  display: block; height: 64px; line-height: 64px; text-decoration: none; color: inherit; opacity: .7;
  font: 500 30px/64px 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -.041em;
}
.mnu-i.is-ici { opacity: 1; }
.mnu-i.is-ici span { position: relative; }
.mnu-i.is-ici span::after {
  content: ''; position: absolute; top: 50%; left: calc(100% + 18px);
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fffdfb;
}
.mnu-i:focus-visible { outline: 2px solid #fffdfb; outline-offset: 2px; }
body.menu-ouvert { overflow: hidden; }

/* ── liseuse des BD ──────────────────────────────────────────────────────
   Plein écran sombre, double page centrée. Les planches sont posées en fond
   et recouvertes d'un voile transparent : ni « enregistrer l'image », ni
   glisser-déposer. Ça ne remplace pas une capture d'écran, mais ça empêche
   de récupérer la collection d'un clic. */
.lis {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  background: #1a1917; color: #fffdfb;
}
.lis[hidden] { display: none; }
.lis-tete, .lis-pied {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; font: 400 14px/20px 'Mona Sans', system-ui, sans-serif;
}
.lis-tete { justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); }
.lis-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lis-titre { font-weight: 500; font-size: 16px; }
.lis-meta { color: rgba(255,253,251,.6); }
.lis-outils { display: flex; align-items: center; gap: 8px; flex: none; }
.lis-zoom, .lis-x, .lis-nav {
  all: unset; box-sizing: border-box; cursor: pointer; border-radius: 4px;
  padding: 8px 14px; color: #fffdfb; border: 1px solid rgba(255,255,255,.22);
  font: 500 14px/1 'Mona Sans', system-ui, sans-serif; transition: background .2s, border-color .2s;
}
.lis-zoom:hover, .lis-x:hover, .lis-nav:not(:disabled):hover { background: rgba(255,255,255,.1); }
.lis-zoom:focus-visible, .lis-x:focus-visible, .lis-nav:focus-visible { outline: 2px solid #aa533d; outline-offset: 2px; }
.lis-x { padding: 8px 12px; font-size: 16px; }

.lis-scene { flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: 0; }
.lis-nav { flex: none; font-size: 26px; padding: 18px 16px; line-height: 1; }
.lis-nav:disabled { opacity: .25; cursor: default; }

.lis-double {
  flex: 1; display: flex; justify-content: center; align-items: center; gap: 2px;
  height: 100%; min-height: 0; perspective: 2200px;
}
.lis-page {
  position: relative; height: 100%; max-width: 100%; aspect-ratio: 910 / 1287;
  background: #fffdfb center / contain no-repeat;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transition: transform .42s cubic-bezier(.2,.7,.2,1), opacity .42s;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lis-page::after { content: ''; position: absolute; inset: 0; }   /* voile anti-glisser */
.lis-page[hidden] { display: none; }
.lis-double.tourne-suiv .lis-b { transform: rotateY(-22deg); opacity: .35; }
.lis-double.tourne-prec .lis-a { transform: rotateY(22deg); opacity: .35; }
.lis.zoom .lis-scene { align-items: flex-start; overflow: auto; padding-bottom: 12px; }
.lis.zoom .lis-page { height: auto; width: min(910px, 46vw); }
.lis.zoom .lis-double { align-items: flex-start; height: auto; }

.lis-pied { justify-content: center; gap: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.lis-jauge { width: min(380px, 50vw); height: 3px; background: rgba(255,255,255,.18); border-radius: 2px; }
.lis-jauge i { display: block; height: 100%; width: 0; background: #aa533d; border-radius: 2px; transition: width .35s; }
.lis-compteur { color: rgba(255,253,251,.7); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  /* l'écran est trop étroit pour poser les flèches à côté de la page :
     elles passent par-dessus, et la page occupe toute la largeur. */
  .lis-scene { padding: 0; gap: 0; position: relative; }
  .lis-double { gap: 0; width: 100%; }
  .lis-b { display: none; }            /* une seule page à la fois sur téléphone */
  .lis-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    padding: 16px 10px; font-size: 22px; border-color: transparent;
    background: rgba(26,25,23,.55); backdrop-filter: blur(4px);
  }
  .lis-prec { left: 6px; } .lis-suiv { right: 6px; }
  .lis-tete { padding: 10px 14px; }
  .lis-titre { font-size: 14px; }
  /* « Agrandir » n'a plus de sens : la page occupe déjà toute la largeur. */
  .lis-zoom { display: none; }
}
body.liseuse-ouverte { overflow: hidden; }

/* Rail de numéros d'un sélecteur : le numéro courant est plein, les autres en retrait. */
/* La maquette fige la couleur de chaque numéro : c'est elle qu'il faut reprendre,
   pas l'opacité du calque. */
.sel-item[data-sel-i] { cursor: pointer; transition: color .25s, opacity .25s; }
.sel-item[data-sel-bar] { transition: opacity .25s; }
.sel-item[data-sel-i]:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 2px; }

/* ── rangée de couvertures de BD ─────────────────────────────────────────
   On choisit sa bande dessinée à vue, et le clic ouvre la liseuse. */
.k-bds { display: flex; gap: 20px; align-items: stretch; }
.bdc {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0;
  text-decoration: none; color: inherit; background: #fffdfb;
  border: 1px solid rgba(170, 83, 61, .16); border-radius: 2px; overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.bdc:hover { border-color: rgba(170, 83, 61, .5); transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26, 25, 23, .1); }
.bdc:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
.bdc-couv { display: block; aspect-ratio: 910 / 1287; background: #f2ede7 center / cover no-repeat; }
.bdc-pub, .bdc-titre, .bdc-cta { display: block; padding: 0 18px; }
.bdc-pub {
  margin-top: 18px; font: 400 11px/16px 'Mona Sans', system-ui, sans-serif;
  letter-spacing: .06em; color: var(--terracotta);
}
.bdc-titre { margin-top: 8px; font: 500 19px/26px 'Mona Sans', system-ui, sans-serif; color: #1a1917; }
.bdc-cta {
  margin: 14px 0 18px; font: 500 14px/20px 'Mona Sans', system-ui, sans-serif;
  color: var(--terracotta);
}
.bdc:hover .bdc-cta { text-decoration: underline; text-underline-offset: 3px; }

/* ── bibliothèque : grille filtrable ─────────────────────────────────────
   Les lignes ont une hauteur fixe, posée par le générateur : c'est elle qui
   permet de savoir de combien la suite de la page remonte quand on filtre.
   Le texte est donc borné, sinon une carte déborderait sur sa voisine. */
.k-bds-grille .bdc { min-width: 0; }
.bdc-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; margin-top: 8px; padding: 0 18px;
  font: 400 14px/20px 'Mona Sans', system-ui, sans-serif; color: #686b64;
}
.k-bds-grille .bdc-titre {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.k-bds-compact .bdc-pub { margin-top: 12px; padding: 0 12px; font-size: 10px; line-height: 14px; }
.k-bds-compact .bdc-titre { margin-top: 6px; padding: 0 12px; font-size: 14px; line-height: 19px; }
.k-bds-compact .bdc-desc { display: none; }
.k-bds-compact .bdc-cta { margin: 10px 0 12px; padding: 0 12px; font-size: 12px; line-height: 16px; }
.bdc[hidden] { display: none; }
/* Libellé de filtre : le choix courant reprend la couleur pleine. */
[data-filtre] { cursor: pointer; transition: color .25s; }
[data-filtre]:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; border-radius: 2px; }

.k-bds-bloc { display: flex; flex-direction: column; gap: 28px; }
.k-bds-suite[hidden] { display: none; }
.bds-plus {
  all: unset; box-sizing: border-box; cursor: pointer; align-self: center;
  padding: 13px 30px; border: 1px solid var(--terracotta); border-radius: 2px;
  color: var(--terracotta); font: 500 15px/20px 'Mona Sans', system-ui, sans-serif;
  transition: background .25s, color .25s;
}
.bds-plus:hover { background: var(--terracotta); color: #fffdfb; }
.bds-plus:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
/* Les calques situés sous la rangée descendent quand la seconde s'ouvre. */
/* Le décalage se fait sur `top`, posé par le script : le moteur d'animation
   écrit le `transform` de chaque calque et effacerait un translate. */
.sous-bds { transition: top .45s cubic-bezier(.2,.7,.2,1); }
/* la hauteur du fond est posée en ligne par le générateur : il faut l'emporter */
#stage.bds-ouvert .sec-bds,
#stage-mob.bds-ouvert .sec-bds { height: calc(var(--sec-h) + var(--bds-h, 0px)) !important; }
.sec-bds { transition: height .45s cubic-bezier(.2,.7,.2,1); }

/* Sur téléphone la rangée défile : cinq cartes de front n'y tiennent pas. */
.k-bds-defilant {
  overflow-x: auto; overflow-y: hidden; gap: 12px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; scrollbar-width: none;
}
.k-bds-defilant::-webkit-scrollbar { display: none; }
.k-bds-defilant .bdc { flex: 0 0 196px; scroll-snap-align: start; }
.k-bds-defilant .bdc-titre { font-size: 16px; line-height: 22px; }
.k-bds-defilant .bdc-pub, .k-bds-defilant .bdc-titre, .k-bds-defilant .bdc-cta { padding: 0 14px; }

/* On ne masque la scène de bureau que si la page possède vraiment une scène
   mobile : les pages dont la maquette mobile n'est pas encore livrée doivent
   continuer d'afficher le canevas 1440, réduit, plutôt qu'une page blanche. */
@media (max-width: 767px) {
  body[data-mob] #viewport { display: none; }
  body[data-mob] #viewport-mob { display: block; }
}

/* Couverture pilotée par un rail de numéros : le lien couvre la vignette. */
.carr-couv-lien { position: absolute; inset: 0; z-index: 2; }
.carr-item[data-carr-i] { cursor: pointer; }

/* Les titres de section portent enfin une balise de titre. Le style reste
   celui du calque : on neutralise seulement les valeurs par défaut du
   navigateur, qui changeraient la mise en page au pixel près. */
#stage h1.k-t, #stage h2.k-t { margin: 0; font-size: inherit; font-weight: inherit; }

/* Les deux liens légaux du pied de page, posés dans le calque de la maquette. */
.k-t a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.k-t a:hover { text-decoration-color: currentColor; }