@font-face {
  font-family: "Fraunces";
  src: url("assets/polices/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("assets/polices/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("assets/polices/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --nuit: #07111a;
  --nuit-2: #0c1a25;
  --nuit-3: #12283a;
  --texte: #ece6d9;
  --doux: #9eafbc;
  --ligne: rgba(var(--texte-rgb), 0.14);
  --papier: #f5f0e6;
  --papier-2: #e9e2d4;
  --encre: #14202a;
  --encre-douce: #5b6872;
  --bleu: #173a52;
  --lampe: #f3cf5b;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tete: 72px;
  --texte-rgb: 236, 230, 217;
  --fond-rgb: 7, 17, 26;
  --texte-2: #d7d0c2;
  --vert: #9fe0b5;
  --mauve: #b9c6ff;
  --surface: var(--papier);
  color-scheme: dark;
}

/* Thème clair : même maison, en plein jour. */
:root[data-theme="light"] {
  --nuit: #f4efe5;
  --nuit-2: #ebe4d6;
  --nuit-3: #e0d8c7;
  --texte: #15212b;
  --texte-rgb: 21, 33, 43;
  --fond-rgb: 244, 239, 229;
  --texte-2: #2c3842;
  --doux: #55626c;
  --ligne: rgba(21, 33, 43, 0.14);
  --lampe: #7a5a00; /* 5,57:1 sur #f4efe5 (AA petit texte) ; #8a6a00 donnait 4,42 */
  --vert: #1f6b45;
  --mauve: #3b4fa8;
  --surface: #ffffff;
  color-scheme: light;
}
:root[data-theme="light"] .fenetre, :root[data-theme="light"] .scene > .m-enveloppe, :root[data-theme="light"] .ex-bureau, :root[data-theme="light"] .bandeau { --lampe: #f3cf5b; }
:root[data-theme="light"] .bouton:not(.recit *) { background: var(--texte); color: var(--nuit); }
:root[data-theme="light"] .bouton:hover:not(.recit *) { background: #000; }
:root[data-theme="light"] .veilleuse:not(.recit *) { background: #e2b62c; box-shadow: 0 0 10px 2px rgba(226, 182, 44, 0.5); }
:root[data-theme="light"] .statut.dispo:not(.recit *) { background: rgba(31, 107, 69, 0.08); box-shadow: inset 0 0 0 1px rgba(31, 107, 69, 0.35); }
:root[data-theme="light"] .statut.pilote:not(.recit *) { background: rgba(138, 106, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(138, 106, 0, 0.35); }
:root[data-theme="light"] .statut.lab:not(.recit *) { background: rgba(59, 79, 168, 0.07); box-shadow: inset 0 0 0 1px rgba(59, 79, 168, 0.3); }
:root[data-theme="light"] .page-tete::before { opacity: 0.5; filter: blur(2px) invert(1) grayscale(0.3); } /* la nuit inversée donne une vue de jour, pâle : le pont se lit sur le papier */
:root[data-theme="light"] .ex-mobile { border-color: #15212b; }
/* Le hall reste de nuit en mode clair : on y remet les couleurs sombres. L'en-tête, lui, devient une barre pleine pour rester lisible dessus. */
:root[data-theme="light"] .tete { background: var(--nuit); box-shadow: 0 1px 0 var(--ligne); }
:root[data-theme="light"] .recit {
  --nuit: #07111a; --nuit-2: #0c1a25; --nuit-3: #12283a; --texte: #ece6d9; --texte-rgb: 236, 230, 217;
  --fond-rgb: 7, 17, 26; --texte-2: #d7d0c2; --doux: #9eafbc; --ligne: rgba(236, 230, 217, 0.14);
  --lampe: #f3cf5b; --vert: #9fe0b5; --mauve: #b9c6ff; --surface: var(--papier);
  color-scheme: dark; background: var(--nuit); color: var(--texte);
}

* { box-sizing: border-box; }
html { background: var(--nuit); color: var(--texte); scroll-behavior: smooth; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--sans); background: var(--nuit); color: var(--texte); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lampe); outline-offset: 3px; border-radius: 4px; }

.saut { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--papier); color: var(--encre); padding: 8px 12px; }
.saut:focus { left: 8px; }
.bandeau { margin: 0; padding: 6px 16px; font-size: 0.8125rem; text-align: center; background: #f3cf5b; color: var(--encre); position: relative; z-index: 40; }

/* En-tête */
.tete {
  position: sticky; top: 0; z-index: 30; height: var(--tete);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: linear-gradient(var(--nuit) 30%, rgba(var(--fond-rgb), 0));
}
.marque { display: inline-flex; align-items: center; gap: 10px; font: italic 500 1.5rem/1 var(--serif); text-decoration: none; letter-spacing: -0.01em; margin: 0; }
.veilleuse { width: 9px; height: 9px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 10px 2px rgba(243, 207, 91, 0.55); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: 0.9375rem; }
.nav a:not(.bouton) { text-decoration: none; color: var(--doux); }
.nav a:not(.bouton):hover { color: var(--texte); }
.burger { display: none; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--papier); color: var(--encre);
  font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.bouton:hover { background: #fff; transform: translateY(-1px); }
.bouton-petit { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }
.lien { color: var(--texte); text-underline-offset: 4px; text-decoration-color: var(--lampe); }

/* Récit : la scène reste en place, les chapitres défilent par-dessus. */
.recit { position: relative; }
.scene {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  margin-top: calc(-1 * var(--tete));
}
.carte { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Couche 1 : vraie scène en vidéo pendant les chapitres (mode sombre). La carte prend le relais à la finale. */
.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.voile {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--fond-rgb), 0.7) 0%, rgba(var(--fond-rgb), 0.3) 45%, rgba(var(--fond-rgb), 0.15) 100%);
  opacity: var(--voile, 1);
}

.fenetre {
  --s: 1;
  position: absolute; left: 0; top: 0; width: 640px;
  transform-origin: 0 0;
  border-radius: 12px; overflow: hidden;
  background: var(--papier);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  will-change: transform;
}
.fen-barre { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--papier-2); border-bottom: 1px solid rgba(20, 32, 42, 0.08); }
.fen-barre i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20, 32, 42, 0.18); }
.fen-barre span { margin: 0 auto; transform: translateX(-20px); font: 500 11px/1 var(--sans); color: var(--encre-douce); background: rgba(255, 255, 255, 0.6); padding: 5px 40px; border-radius: 6px; }
.fen-vue { position: relative; height: var(--vue, 420px); overflow: hidden; }

/* Le site miniature, dessiné à 640 px de large et mis à l'échelle. */
.mini {
  position: absolute; left: 0; top: 0; width: 640px; height: 1640px;
  color: var(--encre); font-family: var(--sans);
  background:
    linear-gradient(rgba(23, 58, 82, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(23, 58, 82, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--papier);
  will-change: transform;
}
.mini > *, .mini .m-cartes > *, .mini .m-auto > *, .mini .m-contact > * { position: absolute; }
.mini u { display: block; height: 6px; border-radius: 3px; background: rgba(20, 32, 42, 0.14); text-decoration: none; margin-top: 7px; }
.mini u.c { width: 62%; }
.m-lampe { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lampe); margin-right: 6px; vertical-align: 2px; box-shadow: 0 0 6px rgba(243, 207, 91, 0.9); }

/* Effets pilotés par --k (0 à 1). Sans JavaScript, tout est construit. */
.a { --k: 1; }
.js .a { --k: 0; }
.fx-up { opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 14px)); }
.fx-pop { opacity: min(1, calc(var(--k) * 2)); transform: scale(calc(0.86 + var(--k) * 0.14)); }
.fx-r { opacity: min(1, calc(var(--k) * 2)); transform: translateX(calc((1 - var(--k)) * 70px)); }
.fx-type { clip-path: inset(-4px calc((1 - var(--k)) * 100%) -4px 0); }
.fx-fill { transform: scaleX(calc(var(--k) * var(--w, 0.94))); transform-origin: 0 50%; }
.fx-draw { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k)); }
.fx-photo { opacity: var(--k); clip-path: inset(calc((1 - var(--k)) * 50%) round 10px); }
.fx-stamp { opacity: min(1, calc(var(--k) * 3)); transform: rotate(-8deg) scale(calc(1.6 - var(--k) * 0.6)); }

.m-nav { left: 24px; right: 24px; top: 14px; height: 30px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.m-nav b { font: italic 600 16px/1 var(--serif); }
.m-liens { display: flex; gap: 14px; margin-left: auto; margin-right: 18px; }
.m-liens u { width: 38px; margin: 0; }
.m-btn, .m-cta, .m-envoi { display: inline-block; font: 600 11px/1 var(--sans); padding: 8px 12px; border-radius: 999px; background: var(--encre); color: var(--papier); }
.m-kicker { left: 24px; top: 64px; margin: 0; font-size: 11px; color: var(--encre-douce); letter-spacing: 0.02em; }
.m-titre { left: 24px; top: 86px; margin: 0; font: 400 31px/1.08 var(--serif); letter-spacing: -0.015em; }
.m-titre span { display: block; width: max-content; }
.m-cta { left: 24px; top: 208px; }
.m-photo {
  left: 380px; top: 58px; width: 236px; height: 180px; border-radius: 10px;
  /* La même vraie scène que le fond du hall : le fleuve à l'heure bleue. */
  background: #0e2030 url("assets/fond/riviere.webp") no-repeat;
  background-size: cover; background-position: 70% 50%;
}
.m-h4 { left: 24px; margin: 0; font: 500 18px/1 var(--serif); }
.m-cartes { left: 24px; top: 292px; width: 592px; height: 100px; }
.m-carte { top: 0; width: 186px; height: 96px; padding: 14px; border-radius: 10px; background: #fff; box-shadow: 0 1px 0 rgba(20, 32, 42, 0.08), 0 8px 20px -12px rgba(20, 32, 42, 0.3); font-size: 13px; }
.m-carte:nth-child(2) { left: 203px; } .m-carte:nth-child(3) { left: 406px; }
.m-carte b { display: block; margin: 8px 0 2px; }
.ic { display: inline-block; width: 18px; height: 18px; border-radius: 5px; background: var(--bleu); position: relative; }
.ic::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--papier); border-radius: 2px; }
.ic-loupe::after { border-radius: 50%; }
.ic-cal::after { border-top-width: 3px; }
.ic-mail::after { border-radius: 1px; inset: 6px 4px; }
.ic-ok::after { border-width: 0 2px 2px 0; inset: 4px 6px 6px; transform: rotate(40deg); border-radius: 0; }
.ic-cloche::after { border-radius: 6px 6px 2px 2px; }
.ic-form::after { inset: 4px 5px; }
.m-contact { left: 24px; top: 410px; width: 592px; height: 108px; }
.m-coord { left: 0; top: 0; width: 220px; font-size: 13px; }
.m-coord u { width: 180px; } .m-coord u.c { width: 120px; }
.m-form { left: 250px; top: 0; width: 342px; height: 108px; }
.m-champ { position: absolute; left: 0; height: 26px; width: 164px; border: 1px solid rgba(20, 32, 42, 0.22); border-radius: 6px; background: #fff; }
.m-champ:nth-child(2) { left: 178px; }
.m-champ.grand { top: 34px; width: 342px; height: 36px; }
.m-envoi { position: absolute; right: 0; top: 80px; }

.m-cable { left: 0; top: 520px; width: 640px; height: 140px; overflow: visible; }
.m-cable path { fill: none; stroke: var(--bleu); stroke-width: 3; stroke-linecap: round; }
.m-cable circle { fill: var(--lampe); stroke: var(--bleu); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.m-tableau { left: 124px; top: 556px; width: 492px; height: 196px; padding: 16px 18px; border-radius: 12px; background: var(--bleu); color: var(--papier); box-shadow: 0 16px 30px -18px rgba(var(--fond-rgb), 0.8); }
.m-t-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font: 500 16px/1 var(--serif); }
.m-branche { font: 600 10px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 8px; border-radius: 999px; background: var(--lampe); color: var(--encre); }
.m-ligne { display: grid; grid-template-columns: 150px 1fr 16px; align-items: center; gap: 12px; height: 34px; font-size: 12px; border-top: 1px solid rgba(245, 240, 230, 0.12); }
.m-ligne i { height: 6px; border-radius: 3px; background: rgba(245, 240, 230, 0.12); overflow: hidden; }
.m-ligne em { display: block; height: 100%; background: var(--papier); border-radius: 3px; }
.m-ligne s { width: 14px; height: 14px; border-radius: 50%; background: var(--lampe); position: relative; }
.m-ligne s::after { content: ""; position: absolute; left: 5px; top: 2px; width: 3px; height: 7px; border: solid var(--encre); border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }

.m-cal { left: 24px; top: 790px; width: 222px; height: 200px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 20px -12px rgba(20, 32, 42, 0.3); font: 500 15px/1 var(--serif); }
.m-jours { position: absolute; left: 14px; top: 44px; width: 194px; height: 140px;
  background: radial-gradient(circle, rgba(20, 32, 42, 0.18) 3px, transparent 3.5px) 0 0 / 27.7px 28px; }
.m-jour-choisi { position: absolute; left: 92px; top: 98px; width: 26px; height: 26px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 4px rgba(243, 207, 91, 0.6); }
.m-heures { left: 264px; top: 800px; width: 120px; height: 140px; }
.m-heures span { position: absolute; left: 0; width: 120px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(20, 32, 42, 0.2); background: #fff; font-size: 13px; font-weight: 600; }
.m-heures span:nth-child(2) { top: 44px; } .m-heures span:nth-child(3) { top: 88px; }
.m-heures span.choisie { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.m-paie { left: 404px; top: 812px; width: 212px; height: 132px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #1d4664, #10283a); color: var(--papier); }
.m-paie u { background: rgba(245, 240, 230, 0.3); width: 120px; } .m-paie u.c { width: 70px; }
.m-paie b { position: absolute; left: 18px; bottom: 16px; font: 500 15px/1 var(--serif); }
.m-puce { display: block; width: 30px; height: 22px; border-radius: 4px; background: var(--lampe); opacity: 0.9; margin-bottom: 14px; }
.m-paye { position: absolute; right: 14px; bottom: 12px; padding: 6px 10px; border: 2px solid var(--lampe); border-radius: 6px; color: var(--lampe); font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; }

.m-auto { left: 20px; top: 1040px; width: 600px; height: 220px; border-radius: 12px;
  background: radial-gradient(circle, rgba(20, 32, 42, 0.16) 1px, transparent 1.5px) 0 0 / 14px 14px, #fbf8f2;
  box-shadow: inset 0 0 0 1px rgba(20, 32, 42, 0.08); }
.m-liens-auto { left: 0; top: 0; width: 600px; height: 220px; }
.m-liens-auto path { fill: none; stroke: var(--bleu); stroke-width: 2.5; }
.pouls { fill: var(--lampe); stroke: var(--bleu); stroke-width: 2; opacity: 0; }
.m-noeud { width: 150px; white-space: nowrap; height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 0 0 1px rgba(20, 32, 42, 0.12), 0 8px 16px -10px rgba(20, 32, 42, 0.4); }
.m-noeud .ic { flex: none; }
.m-noeud.veille { box-shadow: 0 0 0 2px var(--lampe), 0 8px 16px -10px rgba(20, 32, 42, 0.4); }
.m-note { left: 16px; top: 150px; margin: 0; font: italic 400 14px/1.3 var(--serif); color: var(--encre-douce); }
.m-plan { border: 1.5px dashed rgba(23, 58, 82, 0.35); border-radius: 10px; }
.fx-plan { opacity: calc(var(--k) * (1 - var(--k2, 0))); }

.m-lettre { left: 200px; top: 1350px; width: 240px; height: 150px; }
.m-papier { position: absolute; inset: 0; padding: 22px 26px; background: #fff; border-radius: 4px; box-shadow: 0 10px 24px -14px rgba(20, 32, 42, 0.5); transform-origin: 50% 100%; }
.m-papier u { width: 100%; } .m-papier u.c { width: 60%; }
.m-enveloppe { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; opacity: 0; border-radius: 4px;
  background: linear-gradient(to bottom right, transparent 49.5%, rgba(20, 32, 42, 0.12) 50%, transparent 51%) left / 50% 100% no-repeat,
              linear-gradient(to bottom left, transparent 49.5%, rgba(20, 32, 42, 0.12) 50%, transparent 51%) right / 50% 100% no-repeat, #fff;
  box-shadow: 0 10px 24px -14px rgba(20, 32, 42, 0.5); }
.m-enveloppe::after { content: ""; position: absolute; left: 50%; top: 46%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--lampe); }
.m-inscr { left: 160px; top: 1516px; width: 320px; height: 36px; display: flex; gap: 8px; }
.m-inscr span { flex: 1; border: 1px solid rgba(20, 32, 42, 0.22); border-radius: 999px; background: #fff; }
.m-inscr b { font-size: 12px; padding: 0 16px; display: grid; place-items: center; border-radius: 999px; background: var(--encre); color: var(--papier); }
.m-pied { left: 0; right: 0; top: 1580px; height: 60px; display: flex; align-items: center; padding: 0 24px; background: var(--encre); color: var(--papier); font: italic 500 14px/1 var(--serif); }

/* Chapitres, en trois couches : le fond (carte), par-dessus le site qui se bâtit, et par-dessus le texte,
   dans un panneau translucide qui laisse voir l'animation. */
.chapitres { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }
.chap { min-height: 150vh; padding: 0 clamp(16px, 4vw, 64px); }
.chap .txt {
  position: sticky; top: 0; height: 100vh; height: 100svh; max-width: min(36vw, 31rem);
  display: flex; flex-direction: column; justify-content: center; padding-top: var(--tete);
}
.verre {
  padding: clamp(22px, 2.4vw, 34px); border-radius: 20px;
  background: rgba(var(--fond-rgb), 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--ligne), 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.verre > :last-child { margin-bottom: 0; }
.verre h2 { font-size: clamp(1.625rem, min(2.6vw, 4.8vh), 2.5rem); }
.chap-0 { min-height: 100vh; min-height: 100svh; }
.chap-0 .txt { position: static; max-width: min(44vw, 38rem); padding-bottom: 2vh; }
.chap-fin { min-height: 300vh; }
.chap-fin .txt { max-width: min(34vw, 28rem); }

h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 0.5em; font-variation-settings: "SOFT" 50, "WONK" 0; }
h1 { font-size: clamp(2.25rem, min(5.2vw, 8.6vh), 4.75rem); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, min(3.2vw, 5.6vh), 3rem); line-height: 1.06; }
.sur, .num { font-size: 0.875rem; color: var(--doux); margin: 0 0 1.25rem; letter-spacing: 0.02em; }
.num { font-variant-numeric: tabular-nums; color: var(--lampe); }
.num span { color: var(--doux); margin-left: 0.6em; }
.chap p { max-width: 34rem; }
.chapeau { font-size: 1.1875rem; color: var(--texte-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: min(2rem, 3.5vh); }
.indice { margin-top: min(3rem, 4vh); font-size: 0.875rem; color: var(--doux); }
.indice::before { content: ""; display: inline-block; width: 1px; height: 28px; background: var(--doux); margin-right: 12px; vertical-align: middle; }
.petit { font-size: 0.875rem; color: var(--doux); }
.prix { font: 400 1.75rem/1.2 var(--serif); margin-top: 1.5rem; }
.prix .trou { display: inline-block; }
.prix span:not(.trou) { display: block; font: 400 0.9375rem/1.5 var(--sans); color: var(--doux); margin-top: 0.4rem; }
.trou { display: inline-block; font: 500 0.8125rem/1.4 var(--sans) !important; color: var(--lampe) !important; border: 1px dashed rgba(243, 207, 91, 0.6); border-radius: 6px; padding: 2px 8px; margin: 0 !important; }

.inscr { margin-top: 1.5rem; max-width: 30rem; }
.inscr label, .demande label { display: block; font-size: 0.875rem; color: var(--doux); margin-bottom: 6px; }
.inscr-ligne { display: flex; gap: 8px; }
input[type="email"], input[type="text"], input[type="url"], select {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border-radius: 10px;
  border: 1px solid rgba(var(--texte-rgb), 0.28); background: rgba(var(--fond-rgb), 0.6); color: var(--texte); font: inherit;
}
input::placeholder { color: rgba(158, 175, 188, 0.7); }
.case { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 0.875rem; color: var(--doux); }
.case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lampe); flex: none; }
.case label { margin: 0; }

/* Après le récit */
.suite { position: relative; z-index: 3; background: var(--nuit-2); border-top: 1px solid var(--ligne); padding: clamp(64px, 10vw, 128px) clamp(16px, 6vw, 96px) 32px; }
.suite-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 96px); max-width: 1180px; margin: 0 auto 64px; }
.tarifs { margin: 0; border-top: 1px solid var(--ligne); }
.tarifs div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.tarifs dt { font-weight: 600; }
.tarifs dd { margin: 0; text-align: right; font: 400 1.375rem/1.2 var(--serif); }
.tarifs small { display: block; font: 400 0.8125rem/1.4 var(--sans); color: var(--doux); margin-top: 4px; max-width: 18rem; }
.demande { display: grid; gap: 4px; }
.demande input { margin-bottom: 14px; width: 100%; }
.demande label span { opacity: 0.7; }
.demande .bouton { justify-self: start; margin-top: 6px; }

.pied { padding: 40px clamp(16px, 6vw, 96px) 56px; background: var(--nuit); border-top: 1px solid var(--ligne); display: grid; gap: 8px; color: var(--doux); font-size: 0.9375rem; }
.pied .marque { color: var(--texte); }
.pied .trou { margin-left: 6px !important; }

@media (max-width: 820px) {
  :root { --tete: 60px; }
  .burger { display: inline-flex; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ligne); background: transparent; color: var(--texte); font: 500 0.9375rem/1 var(--sans); align-items: center; }
  .nav { display: none; position: absolute; top: var(--tete); left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border-radius: 14px; background: var(--nuit-2); border: 1px solid var(--ligne); }
  .nav.ouvert { display: flex; }
  .nav a:not(.bouton) { padding: 14px 12px; color: var(--texte); }
  .nav .bouton { margin-top: 8px; }
  .voile { background: linear-gradient(rgba(var(--fond-rgb), 0.2), rgba(var(--fond-rgb), 0.85) 62%); }

  .chap { min-height: 150svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px; }
  .chap .txt { top: auto; bottom: 0; height: auto; max-width: none; display: block; padding: 0 0 12px; }
  .verre { padding: 18px 18px 20px; border-radius: 18px; background: rgba(var(--fond-rgb), 0.8); }
  .verre h2 { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .verre p { font-size: 0.9375rem; line-height: 1.5; }
  .verre .prix { font-size: 1.375rem; margin-top: 0.75rem; }
  .verre .pied-chap { margin-top: 0.5rem; }
  .chap-0 { min-height: 100svh; justify-content: flex-end; padding: 0 clamp(16px, 6vw, 96px); }
  .chap-0 .txt { padding: 36px 0 3svh; margin: 0 calc(-1 * clamp(16px, 6vw, 96px)); padding-left: clamp(16px, 6vw, 96px); padding-right: clamp(16px, 6vw, 96px); background: linear-gradient(rgba(var(--fond-rgb), 0), var(--nuit) 40px); }
  .chap-fin { min-height: 320svh; }
  .sur, .num { margin-bottom: 0.75rem; }
  h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  h2 { font-size: clamp(1.625rem, 7vw, 2.125rem); }
  .chapeau { font-size: 1rem; }
  .actions { margin-top: 1.25rem; gap: 12px 20px; }
  .indice { display: none; }
  .suite-grille { grid-template-columns: 1fr; }
}

@media (max-width: 820px) and (max-height: 720px) {
  .chap-0 .sur { display: none; }
  .chap-0 .chapeau { font-size: 0.9375rem; line-height: 1.5; }
  .chap-0 h1 { font-size: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
}

/* ===== Statuts, communs à toutes les pages ===== */
.statut { display: inline-flex; align-items: center; gap: 6px; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statut.dispo { color: var(--vert); background: rgba(159, 224, 181, 0.1); box-shadow: inset 0 0 0 1px rgba(159, 224, 181, 0.3); }
.statut.pilote { color: var(--lampe); background: rgba(243, 207, 91, 0.1); box-shadow: inset 0 0 0 1px rgba(243, 207, 91, 0.32); }
.statut.lab { color: var(--mauve); background: rgba(185, 198, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(185, 198, 255, 0.3); }
.pied-chap { display: flex; align-items: center; gap: 18px; margin-top: 1rem; }
.tarifs dt .statut { margin-left: 8px; font-size: 0.6875rem; }

/* Mini-site : Réputation+ */
.ic-etoile::after { inset: 4px; border-radius: 1px; transform: rotate(45deg) scale(0.8); }
.m-avis { left: 16px; top: 120px; width: 190px; padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 32, 42, 0.1); font-size: 11px; }
.m-avis u { margin-top: 6px; }
.m-etoiles { color: #c99a1a; letter-spacing: 2px; font-size: 12px; }
.m-note { top: 198px; }

/* ===== Après le récit ===== */
.bloc { max-width: 1180px; margin: 0 auto clamp(80px, 11vw, 150px); }
.bloc-tete { max-width: 40rem; margin-bottom: 40px; }
.bloc-tete.large { max-width: none; }
.exemple { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.exemple .bloc-tete { margin: 0; }
.ex-vitrine { position: relative; padding: 0 0 48px 0; }
.ex-bureau { margin: 0; border-radius: 12px; overflow: hidden; background: #0e2433; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ex-barre { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #e9e2d4; }
.ex-barre i { width: 9px; height: 9px; border-radius: 50%; background: rgba(20, 32, 42, 0.18); }
.ex-barre span { margin: 0 auto; transform: translateX(-20px); font: 500 11px/1 var(--sans); color: #5b6872; background: rgba(255, 255, 255, 0.6); padding: 5px 34px; border-radius: 6px; }
.ex-ecran { aspect-ratio: 1280 / 800; overflow: hidden; container-type: size; }
.ex-ecran img { display: block; width: 100%; height: auto; animation: defile 26s ease-in-out 1s infinite alternate; }
@keyframes defile { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
.ex-mobile { position: absolute; right: -12px; bottom: 0; width: 26%; margin: 0; border-radius: 22px; overflow: hidden; border: 6px solid #0b1620; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.ex-mobile img { display: block; width: 100%; height: auto; }

.legende { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--doux); font-size: 0.9375rem; }
.legende .statut { margin-right: 8px; }
.portes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.porte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; border-radius: 16px; text-decoration: none; background: linear-gradient(180deg, rgba(var(--texte-rgb), 0.05), rgba(var(--texte-rgb), 0.02)); box-shadow: inset 0 0 0 1px var(--ligne); transition: transform 0.25s, box-shadow 0.25s, background 0.25s; }
.porte:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(var(--texte-rgb), 0.08), rgba(var(--texte-rgb), 0.03)); box-shadow: inset 0 0 0 1px rgba(var(--texte-rgb), 0.3); }
.porte .statut { align-self: flex-start; }
.porte h3 { margin: 12px 0 0; font: 400 1.75rem/1.1 var(--serif); letter-spacing: -0.01em; }
.porte p { margin: 0; color: var(--doux); font-size: 0.9375rem; }
.porte .porte-prix { margin-top: auto; padding-top: 14px; color: var(--texte); font-weight: 600; }
.porte .porte-prix::after { content: " →"; color: var(--lampe); }

.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; max-width: 1180px; width: 100%; margin: 0 auto 24px; }
.pied-grille p { margin: 0 0 8px; }
.pied nav { display: grid; gap: 10px; align-content: start; }
.pied nav a { text-decoration: none; color: var(--texte); }
.pied nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied > .petit { max-width: 1180px; width: 100%; margin: 0 auto; }

/* ===== Pages pièces ===== */
.page { position: relative; }
.page-tete { position: relative; overflow: hidden; padding: clamp(64px, 10vw, 140px) clamp(16px, 6vw, 96px) clamp(56px, 8vw, 110px); border-bottom: 1px solid var(--ligne); margin-top: calc(-1 * var(--tete)); padding-top: calc(var(--tete) + clamp(64px, 10vw, 130px)); }
.page-tete::before { content: ""; position: absolute; inset: -40px; background: url("assets/fond/ponts.webp") no-repeat; background-size: cover; background-position: var(--fond-pos, 60% 60%); filter: blur(6px); opacity: 0.45; }
.page-tete::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nuit) 20%, rgba(var(--fond-rgb), 0.6) 60%, rgba(var(--fond-rgb), 0.3)), linear-gradient(transparent 60%, var(--nuit)); }
.page-tete > * { position: relative; z-index: 1; max-width: 46rem; }
.page-tete h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.page-tete .chapeau { max-width: 38rem; }
.section { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) clamp(16px, 6vw, 96px) 0; }
.section:last-of-type { padding-bottom: clamp(64px, 9vw, 120px); }
.section > h2 { max-width: 40rem; }
.section-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 6vw, 96px); margin-bottom: 40px; }
.section-tete p { color: var(--doux); margin: 0; }

.etal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.etal > div { padding: 32px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ligne); }
.etal .loue { background: rgba(var(--texte-rgb), 0.02); }
.etal .adresse { background: var(--surface); color: var(--encre); box-shadow: none; }
.etal h3 { margin: 0 0 16px; font: 400 1.875rem/1.1 var(--serif); }
.etal ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.etal li { padding-left: 26px; position: relative; }
.etal .loue li { color: var(--doux); }
.etal .loue li::before { content: "×"; position: absolute; left: 4px; color: rgba(var(--texte-rgb), 0.4); }
.etal .adresse li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--lampe); box-shadow: 0 0 0 3px rgba(243, 207, 91, 0.25); }
.etal .adresse .petit { color: var(--encre-douce); margin: 18px 0 0; }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: e; }
.etapes li { counter-increment: e; padding: 24px; border-bottom: 1px solid rgba(var(--texte-rgb), 0.3); }
.etapes li::before { content: "0" counter(e); display: block; font: 400 2.5rem/1 var(--serif); color: var(--lampe); margin-bottom: 18px; }
.etapes b { display: block; font-size: 1.0625rem; margin-bottom: 6px; }
.etapes p { margin: 0; color: var(--doux); font-size: 0.9375rem; }

.forfait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne); }
.forfait > div { padding: clamp(28px, 4vw, 48px); }
.forfait .prix-grand { background: var(--surface); color: var(--encre); }
.prix-grand .montant { font: 400 clamp(3rem, 6vw, 4.5rem)/1 var(--serif); letter-spacing: -0.03em; margin: 18px 0 6px; }
.prix-grand .montant small { font: 400 1.25rem/1 var(--serif); }
.prix-grand p { color: var(--encre-douce); margin: 0 0 6px; }
.prix-grand .montant { color: var(--encre); } /* le prix principal ne doit pas avoir l'air désactivé */
.forfait .prix-grand { display: flex; flex-direction: column; justify-content: center; } /* le contenu se centre : plus de grand vide sous le bouton */
.prix-grand .bouton { align-self: flex-start; }
.prix-grand .bouton { margin-top: 22px; background: var(--encre); color: var(--papier); }
.inclus { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.inclus li { padding-left: 28px; position: relative; }
.inclus li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border-radius: 50%; background: rgba(159, 224, 181, 0.16); box-shadow: inset 0 0 0 1px rgba(159, 224, 181, 0.5); }
.inclus li::after { content: ""; position: absolute; left: 6px; top: 0.46em; width: 3px; height: 7px; border: solid #9fe0b5; border-width: 0 1.5px 1.5px 0; transform: rotate(40deg); }
.exclus { color: var(--doux); font-size: 0.9375rem; margin-top: 22px; }

.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offre { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: 18px; background: linear-gradient(180deg, rgba(var(--texte-rgb), 0.05), rgba(var(--texte-rgb), 0.015)); box-shadow: inset 0 0 0 1px var(--ligne); scroll-margin-top: 90px; }
.offre .statut { align-self: flex-start; }
.offre h3 { margin: 6px 0 0; font: 400 2rem/1.05 var(--serif); letter-spacing: -0.01em; }
.offre h3:first-child { margin-top: 0; }
.offre p { margin: 0; color: var(--doux); }
.offre .montant { font: 400 2.5rem/1 var(--serif); color: var(--texte); margin-top: auto; padding-top: 18px; }
.offre .montant small { font: 400 1rem/1.4 var(--sans); color: var(--doux); display: block; margin-top: 8px; min-height: 2.8em; } /* deux lignes réservées : les prix d'une rangée tombent sur la même ligne */
.offre .montant + .montant { margin-top: 0; padding-top: 10px; }
.offres.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Quatre cartes : deux rangées de deux, pas une carte seule sous trois. */
@media (min-width: 981px) { .offres:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inscription .trou { color: #7a5a00 !important; border-color: rgba(122, 90, 0, 0.5); } /* 5,62:1 sur papier ; le jaune donnait 1,33 */
/* Emplacement d'image réservé (Veille Studio) : vide et bordé, comme un blanc à remplir. */
.emplacement-image { margin: 0 0 16px; aspect-ratio: 21 / 8; display: grid; place-items: center; border: 1px dashed rgba(243, 207, 91, 0.6); border-radius: 18px; background: rgba(var(--texte-rgb), 0.03); }
.emplacement-image .trou { font-size: 0.875rem !important; }
:root[data-theme="light"] .emplacement-image { border-color: rgba(122, 90, 0, 0.5); }
.offre .inclus { font-size: 0.9375rem; }
.catalogue { margin: 0; border-top: 1px solid var(--ligne); }
.catalogue > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) 200px; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--ligne); }
.catalogue dt { font-weight: 600; }
.catalogue dt .statut { margin-left: 8px; font-size: 0.6875rem; }
.catalogue dd { margin: 0; color: var(--doux); }
.catalogue dd.prix-ligne { color: var(--texte); font: 400 1.375rem/1.2 var(--serif); text-align: right; white-space: nowrap; }

/* La Veille : archive au format nouvelles */
.inscription { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 6vw, 96px); padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--surface); color: var(--encre); scroll-margin-top: 90px; }
.inscription h2 { color: var(--encre); }
.inscription .legal-form label { color: var(--encre-douce); }
.legal-form { display: grid; gap: 6px; font-size: 0.9375rem; }
.legal-form .titre-form { font: 400 1.5rem/1.1 var(--serif); margin: 0 0 4px; }
#apercu.inscription { max-width: 1180px; margin: 0 auto clamp(64px, 9vw, 120px); } /* même encadré que La Veille et Veille Studio */
.legal-form label span { opacity: 0.7; }
.legal-form .petit { color: var(--encre-douce); }
.legal-form input[type="file"] { color: var(--encre); margin-bottom: 10px; }
.legal-form input[type="email"], .legal-form input[type="text"], .legal-form input[type="url"] { background: #fff; color: var(--encre); border-color: rgba(20, 32, 42, 0.25); margin-bottom: 10px; }
.legal-form .case { color: var(--encre); }
.legal-form .mentions { font-size: 0.8125rem; line-height: 1.55; color: var(--encre-douce); margin: 6px 0 4px; }
.legal-form .bouton { justify-self: start; background: var(--encre); color: var(--papier); }
.legal-form .trou { color: #7a5a00 !important; border-color: rgba(122, 90, 0, 0.5); }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.filtres button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ligne); background: transparent; color: var(--doux); font: 500 0.9375rem/1 var(--sans); cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--texte); color: var(--encre); border-color: var(--texte); }
.editions { border-top: 1px solid var(--ligne); }
.edition { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--ligne); }
.edition time, .edition .cat { color: var(--doux); font-size: 0.875rem; }
.edition h3 { margin: 0; font: 400 1.5rem/1.2 var(--serif); }
.edition.vide h3 { color: var(--doux); }
.une { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne); margin-bottom: 48px; }
.une-image { min-height: 280px; background: url("assets/la-veille/edition-1.webp") center / cover no-repeat; }
.une-texte { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.une-texte h3 { margin: 0; font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.08 var(--serif); }
.une-texte p { margin: 0; color: var(--doux); }

/* Lab */
.projets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.projet { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; border-radius: 18px; background: rgba(var(--texte-rgb), 0.03); box-shadow: inset 0 0 0 1px var(--ligne); scroll-margin-top: 90px; }
.projet.vedette { grid-column: 1 / -1; background: radial-gradient(120% 140% at 100% 0%, rgba(185, 198, 255, 0.12), transparent 50%), rgba(var(--texte-rgb), 0.04); padding: clamp(30px, 4vw, 52px); }
.projet.vedette h3 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
.projet .statut { align-self: flex-start; }
.projet h3 { margin: 6px 0 0; font: 400 1.875rem/1.05 var(--serif); }
.projet p { margin: 0; color: var(--doux); max-width: 40rem; }
.projets > :last-child:nth-child(odd):not(.vedette) { grid-column: 1 / -1; } /* la dernière carte seule prend toute la largeur */
.projet details { margin-top: auto; padding-top: 10px; }
.projet summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(var(--texte-rgb), 0.35); font-weight: 600; }
.projet summary::-webkit-details-marker { display: none; }
.projet details[open] summary { background: var(--texte); color: var(--nuit); }
.intention { display: grid; gap: 6px; margin-top: 16px; max-width: 30rem; }
.intention label { font-size: 0.875rem; color: var(--doux); }
.intention input, .intention select { margin-bottom: 8px; }
select option { color: var(--encre); background: var(--papier); }
.intention .bouton { justify-self: start; margin-top: 6px; }

@media (max-width: 980px) {
  .portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offres, .offres.deux { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .exemple, .section-tete, .etal, .forfait, .inscription, .une, .projets, .pied-grille { grid-template-columns: 1fr; }
  .offre h3, .projet h3 { font-size: 1.5rem; } /* sous le h2 mobile */
  .emplacement-image { aspect-ratio: 4 / 3; }
  .portes { grid-template-columns: 1fr; }
  .ex-mobile { width: 30%; right: 0; }
  .catalogue > div { grid-template-columns: 1fr auto; }
  .catalogue dd:not(.prix-ligne) { grid-column: 1 / -1; grid-row: 2; }
  .edition { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .edition h3 { grid-column: 1 / -1; }
  .une-image { min-height: 200px; }
  .etapes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-ecran img { animation: none; }
  .porte { transition: none; }
}
.nav a[aria-current="page"] { color: var(--texte); text-decoration: underline; text-decoration-color: var(--lampe); text-underline-offset: 6px; }
.catalogue dd.prix-ligne small { display: block; white-space: normal; font: 400 0.8125rem/1.4 var(--sans); color: var(--doux); margin-top: 4px; }

/* FAQ : lisible par les gens, et par les moteurs grâce au bloc FAQPage. */
.suite .faq { padding: 0; margin: 0 auto clamp(64px, 9vw, 120px); }
.faq-liste { border-top: 1px solid var(--ligne); max-width: 52rem; margin-left: auto; }
.faq-q { border-bottom: 1px solid var(--ligne); }
.faq-q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ligne); color: var(--lampe); font: 400 1.25rem/1 var(--sans); transition: transform 0.2s; }
.faq-q[open] summary::after { transform: rotate(45deg); }
.faq-q h3 { margin: 0; font: 400 1.3125rem/1.3 var(--serif); }
.faq-q p { margin: 0 0 24px; max-width: 44rem; color: var(--texte-2); }
@media (prefers-reduced-motion: reduce) { .faq-q summary::after { transition: none; } }
.vers-faq { max-width: 1180px; margin: 0 auto; padding: 48px clamp(16px, 6vw, 96px) clamp(40px, 5vw, 64px); }
.suite .vers-faq { padding: 0 0 clamp(56px, 8vw, 100px); }
.vers-faq a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; color: var(--texte); box-shadow: inset 0 0 0 1px var(--ligne); font-weight: 600; font-size: 0.9375rem; }
.vers-faq a::before { content: "?"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lampe); color: var(--encre); font: 700 0.8125rem/1 var(--sans); }
.vers-faq a::after { content: "→"; color: var(--lampe); }
.vers-faq a:hover { box-shadow: inset 0 0 0 1px rgba(var(--texte-rgb), 0.4); }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.puce { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--ligne); color: var(--doux); font-size: 0.9375rem; }
.puce:hover { color: var(--texte); }
.faq { scroll-margin-top: 80px; }

/* Réglages de l'en-tête : thème et langue. */
.gauche { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.reglages { display: inline-flex; align-items: center; gap: 6px; padding: 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ligne); }
.theme { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--texte); cursor: pointer; }
.theme:hover { background: rgba(var(--texte-rgb), 0.08); }
.theme svg { width: 18px; height: 18px; }
.theme .soleil { display: none; }
:root[data-theme="light"] .theme .soleil { display: block; }
:root[data-theme="light"] .theme .lune { display: none; }
.langue { display: inline-flex; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.06em; }
.langue a, .langue span { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; text-decoration: none; }
.langue span { background: var(--texte); color: var(--nuit); }
.langue a { color: var(--doux); }
.langue a:hover { color: var(--texte); }
@media (max-width: 420px) { .marque { font-size: 1.3rem; } .gauche { gap: 8px; } }
.legal-form, .inscription { color-scheme: light; }

/* Au vol, l'enveloppe est sortie de la fenêtre et posée dans la scène (scene.js). */
.scene > .m-enveloppe { left: 0; top: 0; right: auto; bottom: auto; width: 240px; height: 110px; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
/* Note numérotée au bas d'un onglet (même style que la note ¹ du hall). */
.notes-bas { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 6vw, 96px) 48px; }
.notes-bas .note { margin: 0; font-size: 0.8125rem; max-width: 40rem; color: var(--doux); }
.notes-bas a, sup a[href^="#note-"] { color: var(--lampe); text-decoration: none; }
sup:has(> a[href^="#note-"]) { line-height: 0; }
/* Veille Studio : promo de lancement (2026-11-02). Prix régulier barré, prix de lancement à côté. */
.cache-visuel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.offre .montant .regulier { display: block; margin-bottom: 6px; font: 400 1.25rem/1.2 var(--serif); color: var(--doux); }
.offre .montant .regulier del { text-decoration-thickness: 2px; text-decoration-color: var(--lampe); }
.promo-lancement { max-width: 46rem; padding: 22px 26px; border-radius: 18px; background: rgba(243, 207, 91, 0.08); box-shadow: inset 0 0 0 1px rgba(243, 207, 91, 0.4); }
.promo-lancement p { margin: 0 0 10px; }
.promo-lancement p:last-child { margin-bottom: 0; }
.promo-lancement .promo-titre { font: 400 1.75rem/1.15 var(--serif); color: var(--lampe); }
@media (max-width: 820px) { .offre .montant { font-size: 2.1rem; } .promo-lancement .promo-titre { font-size: 1.4rem; } }
/* Libellés (2026-11-02) : sous-titre court sous un nom de marque ou d'offre. */
.sous-titre { margin: 4px 0 0; font: 500 0.9375rem/1.35 var(--sans); color: var(--doux); }
.page-tete .sous-titre { margin: -0.25em 0 1em; font-size: 1.125rem; }
h2 + .sous-titre { margin: -0.25em 0 28px; }
.num + .sous-titre { margin: -0.75rem 0 1rem; }
/* Logo Veille complet (lune au quartier et mot VEILLE dessous, kit du logo). Nuit par défaut, jour en mode clair. Place réservée. */
.marque { gap: 0; line-height: 0; }
.marque .logo { display: block; width: 62px; height: 52px; flex: none; }
.marque .jour { display: none; }
:root[data-theme="light"] .marque .nuit:not(.recit *) { display: none; }
:root[data-theme="light"] .marque .jour:not(.recit *) { display: block; }
.pied .marque { margin-bottom: 8px; }
@media (max-width: 820px) { .marque .logo { width: 52px; height: 44px; } }

/* Page Veille Studio : le logo complet (obturateur, VEILLE, STUDIO) tient lieu de titre. Fixe, sans animation.
   Version foncée sur la tête de nuit, version claire en mode clair (la tête devient pâle). */
.page-tete .titre-logo { margin: 0 0 0.6em; line-height: 0; }
.page-tete .logo-studio { display: block; width: clamp(150px, 20vw, 230px); height: auto; }
.page-tete .logo-studio.jour { display: none; }
:root[data-theme="light"] .page-tete .logo-studio.nuit { display: none; }
:root[data-theme="light"] .page-tete .logo-studio.jour { display: block; }