/* =========================================================================
   MAXIMILIEN — site.css
   Système de design fondé sur max_template.css (charte du jeu).
   Aucune dépendance externe. Aucun framework.
   ========================================================================= */

@font-face {
  font-family: 'Merriweather';
  src: url('../fonts/merriweather.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'josefinsans';
  src: url('../fonts/josefinsans.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'clemente';
  src: url('../fonts/clementepdaa.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- JETONS ------------------------------------------------------------ */

:root {
  /* Palette — reprise intégrale de max_template.css */
  --paper:      #ffffff;   /* fond du jeu */
  --paper-warm: #ffffff;   /* fond alterné */
  --ink:        #26262b;   /* texte du jeu */
  --ink-deep:   #1b1b1f;   /* barre d'interface du jeu */
  --grey:       #54575a;   /* gris interface */
  --grey-soft:  #7f858b;   /* texte secondaire */
  --rule:       #d4d4d4;   /* filets */
  --telegram:   #fbedd0;   /* papier télégramme */
  --stamp:      #416081;   /* encre télégramme */
  --navy:       #112140;   /* bleu profond */
  --sky:        #b1b1b1;   /* lien */
  --verdigris:  #a50000;   /* survol */

  /* Typographie */
  --font-display: 'clemente', 'Merriweather', Georgia, serif;   /* H1 + titres de section */
  --font-ui:      'josefinsans', 'Josefin Sans', system-ui, sans-serif; /* surtitres, boutons, libelles */
  --font-body:    'Merriweather', Georgia, 'Times New Roman', serif;    /* texte courant */

  /* Mesures — 38rem reprend la largeur de passage du jeu */
  --measure: 38rem;
  --wide:    74rem;
--band-y:  clamp(2rem, 4vw, 3.5rem);
  --gutter:  clamp(1.25rem, 5vw, 3rem);
}

/* --- SOCLE ------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--font-ui);
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --- MISE EN PAGE ------------------------------------------------------ */

.shell {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: calc(var(--measure) + var(--gutter) * 2); }

.band {
  --band-bg: var(--paper);
  position: relative;
  overflow: hidden;
  padding-block: var(--band-y);
}

.band--dark {
  --band-bg: var(--ink-deep);
  background-color: var(--ink-deep);
  color: var(--paper);
}

.band--tint {
  --band-bg: var(--paper-warm);
  background-color: var(--paper-warm);
}

.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* --- TYPOGRAPHIE ------------------------------------------------------- */

.eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--grey);
}

.band--dark .eyebrow { color: var(--sky); }

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.band-title {
  margin: 0 0 1rem;
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 2.6vw, 1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.15rem);
  line-height: 1.65;
}

.prose { max-width: var(--measure); }

.prose p { margin: 0 0 1.6em; }

.prose p:last-child { margin-bottom: 0; }

.prose em { font-style: italic; }

.rule {
  width: 3.5rem;
  height: 0;
  margin: 0 0 2rem;
  border: 0;
  border-top: 2px solid var(--ink);
}

.band--dark .rule { border-top-color: var(--sky); }

/* --- CITATION ---------------------------------------------------------
   Une seule phrase, lue d'une traite comme un extrait du livre.
   Les filets l'isolent du texte courant sans la fragmenter.
   -------------------------------------------------------------------- */

.quote {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  text-align: center;
}

.quote p {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.5;
  text-wrap: balance;
}

/* --- BOUTONS ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.75rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--verdigris);
  border-color: var(--verdigris);
    color: white;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.band--dark .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink-deep);
}

.band--dark .btn:hover,
.band--dark .btn:focus-visible {
  background: var(--verdigris);
  border-color: var(--verdigris);
  color: white;
}

/* --- EN-TÊTE ----------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

@supports not (backdrop-filter: blur(8px)) {
  .masthead { background: var(--paper); }
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.masthead__right {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.langswitch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.langswitch a {
  color: var(--grey-soft);
  text-decoration: none;
}

.langswitch a:hover { color: var(--ink); }

.langswitch [aria-current='true'] { color: var(--ink); }

.langswitch__sep { color: var(--rule); }

.masthead .btn {
  padding: 0.6rem 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

@media (max-width: 40rem) {
  .masthead .btn__long { display: none; }
}

/* --- ACCROCHE ---------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 5rem) clamp(3rem, 6vw, 8rem);
}

/* Fond d'accroche : l'image remplit le bloc et se laisse rogner.
   Opacité basse, sinon le texte en #26262b devient illisible sur les
   aplats rouges et noirs. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
}

object-fit: contain est l'équivalent exact de background-size: contain, et object-position: right center celui de background-position: right center. Le cadrage sera identique au pixel près.

Vérifie que .hero > .shell porte bien position: relative et z-index: 1, sinon le texte passera derrière.

Quatre attributs qui comptent

muted n'est pas optionnel. Aucun navigateur ne lance une lecture automatique avec du son. Sans lui, la vidéo reste figée sur la première image.

playsinline empêche iOS de basculer en plein écran dès le démarrage.

poster affiche ton image actuelle pendant le chargement des 600 Ko, ce qui évite un rectangle vide. Elle sert aussi de repli si la vidéo échoue.

aria-hidden et tabindex="-1" sortent l'élément du parcours clavier et des lecteurs d'écran. C'est un habillage, il n'a rien à annoncer.

Le mouvement réduit

Une vidéo en boucle derrière un titre est exactement ce que prefers-reduced-motion vise. Ta page respecte ce réglage partout ailleurs, autant rester cohérent :

css
@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    display: none;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/Banniere_site.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
}

@media (max-width: 56rem) {
  .hero::before,
  .hero__bg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg {
    display: none;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../img/Banniere_site.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
  }
}

.hero > .shell {
  position: relative;
  z-index: 1;
}

.hero__title {
  font-size: clamp(3.4rem, 14vw, 9.5rem);
  letter-spacing: 0.03em;
}

/* Sous-titre : moitié du corps du titre, même famille, même casse */
.hero__subtitle {
  display: block;
  margin-top: 0.15em;
  font-size: clamp(1.7rem, 7vw, 3.25rem);
  line-height: 1.05;
  color: var(--grey);
}

.hero__lines {
  max-width: 30rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.55;
}

.hero__lines span { display: block; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.hero__meta {
  margin: 1.5rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}

.hero__banner {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid var(--rule);
}

/* Signature : dislocation typographique (système de santé mentale) */
.unravel .glyph {
  display: inline-block;
  will-change: transform, opacity;
  animation: drift 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes drift {
  0%, 100% { transform: none; opacity: 1; }
  38%      { transform: translate(0.055em, -0.035em) rotate(-1.4deg); opacity: 0.82; }
  62%      { transform: translate(-0.04em, 0.05em) rotate(1.1deg); opacity: 0.94; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .unravel .glyph { animation: none; }
}

/* --- BANDE TRAILER ----------------------------------------------------- */

.trailer { max-width: 56rem; margin-inline: auto; }

.trailer__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border: 1px solid var(--grey);
}

.facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
}

.facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.facade:hover img,
.facade:focus-visible img {
  opacity: 0.9;
  transform: scale(1.02);
}

.facade__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.facade__play span {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  color: var(--paper);
  font-size: 1.1rem;
  padding-left: 0.25rem;
}

.facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.trailer__caption {
  margin: 1.25rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-soft);
}

/* --- QUATRE JOURS (séquence : la numérotation porte du sens) ------------ */

.days {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.day {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--rule);
}

.day__num {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--grey-soft);
  padding-top: 0.35rem;
}

.day__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.day__body {
  margin: 0;
  max-width: var(--measure);
  color: var(--grey);
}

/* --- CAPTURES ---------------------------------------------------------- */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.shot { margin: 0; }

/* Enfant direct uniquement : sinon la règle atteint les <img> des marqueurs
   Leaflet et remplit leur transparence d'un fond noir. */
.shot > img {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--ink-deep);
}

.band--dark .shot > img { border-color: var(--grey); }

.shot figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-soft);
}


/* --- CARACTÉRISTIQUES -------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.feature {
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid var(--rule);
}

.feature h3 {
  margin: 0 0 0.9rem;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.feature p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--grey);
}

/* --- TÉLÉGRAMME (newsletter) ------------------------------------------- */

.telegram {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--telegram);
  color: var(--stamp);
  border: 4px solid var(--stamp);
  border-top: 18px solid var(--stamp);
  font-family: 'Courier New', Courier, monospace;
}

.telegram__head {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.telegram h2 {
  margin: 0 0 0.9rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

.telegram p {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
}

.telegram__fields {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.field { display: grid; gap: 0.35rem; }

.field label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field input {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--stamp);
  background: transparent;
  color: var(--stamp);
  font-family: inherit;
  font-size: 0.95rem;
}

.field input::placeholder { color: rgba(65, 96, 129, 0.45); }

.field input:focus { background: rgba(255, 255, 255, 0.45); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.78rem;
  line-height: 1.55;
}

.consent input { margin-top: 0.25rem; flex: 0 0 auto; }

.consent a { color: var(--stamp); }

.telegram .btn {
  background: var(--stamp);
  border-color: var(--stamp);
  color: var(--telegram);
  font-family: 'Courier New', Courier, monospace;
}

.telegram .btn:hover,
.telegram .btn:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--telegram);
}

/* --- PIED DE PAGE ------------------------------------------------------ */

.colophon {
  background: var(--ink-deep);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 2.5rem) 2rem;
}

.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
}
.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 60rem) {
  .colophon__grid { grid-template-columns: 1fr 0.9fr 2fr; }
}


.colophon h2 {
  margin: 0 0 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky);
}

.colophon ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.colophon li { margin-bottom: 0.55rem; }

.colophon a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--grey);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.colophon a[href^="mailto:"] { white-space: nowrap; }

.colophon a:hover,
.colophon a:focus-visible {
  color: #9b9b9b;
  border-bottom-color: #ffffff;
}

.colophon__credit {
  font-size: 0.9rem;
  color: rgba(241, 244, 246, 0.7);
}

.colophon__credit strong {
  color: var(--paper);
  font-weight: 400;
}

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--grey);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 244, 246, 0.6);
}

/* =========================================================================
   ATMOSPHÈRE — échos de fond
   Portage de echoestxt.js, cantonné à l'échelle d'une section.
   Les phrases dérivent derrière une colonne de lecture opaque : elles
   apparaissent dans les marges, passent derrière le texte, ressortent.
   ========================================================================= */

.echo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.echo-line {
  position: absolute;
  left: 0;
  white-space: nowrap;
  opacity: 0.4;
  color: #000000;
  font-family: 'Merriweather', serif;
  font-style: italic;
  font-size: 1em;
  /* 24 px : valeur sur laquelle atmosphere.js calcule le pas vertical
     et le nombre de bandes. Les deux doivent rester alignés. */
  line-height: 24px;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* Le noir est illisible sur fond sombre : seules les bandes claires
   portent des échos aujourd'hui, cette règle est un garde-fou. */
.band--dark .echo-line { color: var(--grey); }

.echo-rl {
  transform: translateX(100vw);
  animation-name: echo-cross-rl;
}

.echo-lr {
  transform: translateX(-100%);
  animation-name: echo-cross-lr;
}

@keyframes echo-cross-rl {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

@keyframes echo-cross-lr {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100vw); }
}

/* Colonne de lecture opaque : c'est elle qui garantit la lisibilité. */
.has-echo > .shell {
  position: relative;
  z-index: 1;
  background-color: var(--band-bg);
}

/* Le titre en cours de composition ne doit pas provoquer de saut de mise
   en page : la longueur du texte est conservée à chaque image. */
.band-title { font-variant-ligatures: none; }

@media (prefers-reduced-motion: reduce) {
  .echo-layer { display: none; }
}

/* =========================================================================
   CARTE INTERACTIVE — démonstration du système d'enquête
   ========================================================================= */

.mapdemo {
  position: relative;
  display: grid;
  grid-template-columns: 14em 1fr;
  aspect-ratio: 16 / 9;
  min-height: 26rem;
  background-color: var(--ink);
  border: 1px solid var(--grey);
  overflow: hidden;
}

/* --- Colonne d'enquête ---
   Reprise de #col_narr, #investigation, #col_narr p, #narration,
   .repere et #ui-dialog-body.map #narration a. */

.mapdemo__panel {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  background-color: #26262b;
  text-align: center;
}

.mapdemo__head {
  width: 200px;
  margin: 20px auto 10px;
  padding-top: 90px;
  background: url(../map/icons/loupe.png) no-repeat top center;
  border-bottom: 2px solid #393942;
  font-family: var(--font-ui);
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  color: #bcbeba;
}

.mapdemo__intro {
  font-family: var(--font-ui);
  font-size: 1em;
  font-weight: bold;
  color: #bcbeba;
}

.mapdemo__accordion {
  width: 80%;
  margin: 0 auto;
  background-color: #26262b;
  color: #eceeec;
  text-align: center;
}

.repere {
  width: 100%;
  height: 2em;
  margin-top: 5px;
  line-height: 2em;
  font-family: var(--font-ui);
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  color: #eceeec;
  background: #393942;
  cursor: pointer;
  overflow: hidden;
  transition: 0.2s linear;
}

/* --- Accordéon jQuery UI : collapsible, un seul panneau, heightStyle content --- */

.repere-links {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s linear;
}

.mapdemo__accordion a {
  display: block;
  padding: 25px 15px;
  border: none;
  border-bottom: 1px dotted #26262b;
  background: #65636a;
  color: #eceeec;
  font-family: var(--font-ui);
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 0.1px;
  line-height: 30px;
  text-decoration: none;
  overflow: auto;
}


/* --- Toile Leaflet --- */

.mapdemo__canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: var(--ink-deep);
}

.mapdemo .leaflet-container { background-color: var(--ink-deep); }

/* Garde-fou : aucun style de capture ne doit atteindre les marqueurs. */
.mapdemo img {
  border: 0;
  background: transparent;
}

/* Noms de quartiers : reprise de .local (max_template.css). */
.mapdemo .local {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-shadow:
    0 0 2px #26262b, 0 0 2px #26262b, 0 0 2px #26262b, 0 0 2px #26262b,
    0 0 2px #26262b, 0 0 2px #26262b, 0 0 2px #26262b, 0 0 2px #26262b;
}

.mapdemo .leaflet-popup-content {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Dialogue « poursuivre l'aventure » -------------------------------
   Vocabulaire repris du jeu : voile #26262b, barre #3c3c43 arrondie en
   haut, fermeture #d2d3d5 qui vire au #416081, corps #1b1b1f / #bcbeba
   comme .entry_content.
   -------------------------------------------------------------------- */

.mapdemo__dialog {
  position: absolute;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.mapdemo__dialog[hidden] { display: none; }

.mapdemo__backdrop {
  position: absolute;
  inset: 0;
  background-color: #26262b;
  opacity: 0.88;
  cursor: pointer;
}

.mapdemo__window {
  position: relative;
  width: min(24rem, 100%);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 1);
}

.mapdemo__bar {
  display: flex;
  justify-content: flex-end;
  padding: 5px 0 2px;
  background-color: #3c3c43;
}

.mapdemo__close {
  width: 50px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  background-color: transparent;
  color: #d2d3d5;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s linear, background-color 0.2s linear;
}

.mapdemo__close:hover,
.mapdemo__close:focus-visible { background-color: #416081; color: #ffffff; }

.mapdemo__body {
  padding: 2rem 1.5rem 2.25rem;
  background-color: #1b1b1f;
  color: #bcbeba;
  text-align: center;
}

.mapdemo__prompt {
  margin: 0 0 1.5rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #bcbeba;
}

/* --- Bouton plein écran --- */

.mapdemo__expand {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 500;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--grey);
  background: rgba(27, 27, 31, 0.85);
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.mapdemo__expand:hover,
.mapdemo__expand:focus-visible {
  background: var(--ink-deep);
  border-color: var(--paper);
}

.mapdemo.is-full {
  aspect-ratio: auto;
  width: 100vw;
  height: 100vh;
  border: 0;
}

/* --- Mobile ------------------------------------------------------------
   La colonne ne laisse rien à la carte sous 768 px. Elle passe en bandeau
   horizontal défilant sous la carte : le système reste lisible.
   -------------------------------------------------------------------- */

@media (max-width: 48rem) {
  .mapdemo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    aspect-ratio: 3 / 4;
  }

  .mapdemo__canvas { grid-row: 1; }

  .mapdemo__panel {
    grid-row: 2;
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-top: 4px solid #54575a;
    -webkit-overflow-scrolling: touch;
  }

  .mapdemo__head,
  .mapdemo__intro,
  .repere-links { display: none; }

  .mapdemo__accordion { width: 100%; display: flex; gap: 0.5rem; }

  .repere-group { flex: 0 0 auto; }

  .repere {
    width: auto;
    margin-top: 0;
    padding-inline: 0.9rem;
    white-space: nowrap;
  }

  .mapdemo__expand { bottom: 5.5rem; }
}

/* =========================================================================
   FONDS EN FONDU
   Illustrations 1920 x 1080 en noir et blanc, enchaînées en boucle.
   Rythme : 10 s d'apparition, 20 s de maintien à 0.4, 10 s de disparition.
   L'image suivante n'entre qu'une fois la précédente revenue à zéro.
   La colonne de lecture reste opaque : l'image ne se voit qu'en marges.
   ========================================================================= */

.has-slides {
  min-height: min(56.25vw, 1080px);
  /* La hauteur imposée dépasse celle du contenu : sans centrage, tout le
     surplus se retrouve sous le bloc. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slides-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: opacity;
  /* 10 s : doit rester égal à slideFadeMs dans atmosphere.js. */
  transition: opacity 10s linear;
}

/* 0.4 : opacité maximale demandée. */
.slide.is-on { opacity: 0.4; }

/* La colonne est transparente : seules les cases de caractéristiques sont
   opaques. Le titre et le filet reposent directement sur l'image. */
.has-slides > .shell {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.has-slides .feature { background-color: var(--band-bg); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* Mobile : la colonne occupe toute la largeur, il n'y aurait aucune marge
   où voir l'image. Effet coupé et hauteur imposée retirée. */
@media (max-width: 48rem) {
  .has-slides { min-height: 0; }
  .slides-layer { display: none; }
}

/* =========================================================================
   RETOUR EN HAUT
   ========================================================================= */

.totop {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1250;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ink-deep);
  background-color: var(--ink-deep);
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease,
              background-color 0.18s ease, border-color 0.18s ease;
}

.totop[hidden] { display: none; }

.totop.is-visible {
  opacity: 1;
  transform: none;
}

.totop:hover,
.totop:focus-visible {
  background-color: var(--verdigris);
  border-color: var(--verdigris);
  color: white;
}

@media (prefers-reduced-motion: reduce) {
  .totop { transition: none; }
}

/* =========================================================================
   ZOOM IMAGES
   Reprise de la visionneuse du jeu (section ZOOM IMAGES de
   max_template.css). Mêmes marges, même durée, même courbe.
   ========================================================================= */

:root {
  --sc-lightbox-maxw: 90vw;
  --sc-lightbox-maxh: 90vh;
  --sc-lightbox-dur:  340ms;
  --sc-lightbox-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.shot img { cursor: zoom-in; }

.sc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.86);
  opacity: 0;
  transition: opacity var(--sc-lightbox-dur) ease;
}

.sc-lightbox.is-open { opacity: 1; }

.sc-lightbox > img {
  position: fixed;
  top: 0;
  left: 0;
  max-width: var(--sc-lightbox-maxw);
  max-height: var(--sc-lightbox-maxh);
  cursor: zoom-out;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  will-change: transform;
  transform-origin: center center;
  transition: transform var(--sc-lightbox-dur) var(--sc-lightbox-ease);
}

html.sc-lightbox-open,
body.sc-lightbox-open { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .sc-lightbox,
  .sc-lightbox > img { transition: none; }
}

/* =========================================================================
   PAGES DE TEXTE — mentions légales, confidentialité, avertissements
   Titres intermédiaires, listes et note de mise à jour dans la colonne
   de lecture. Aucune de ces règles n'affecte la page d'accueil.
   ========================================================================= */

.prose h2 {
  margin: 2.5rem 0 1rem;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin: 1.75rem 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--grey);
}

.prose ul {
  margin: 0 0 1.6em;
  padding-left: 1.2rem;
}

.prose li { margin-bottom: 0.45rem; }

.prose a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.18s ease;
}

.prose a:not(.btn):hover,
.prose a:not(.btn):focus-visible { border-bottom-color: var(--ink); }

.prose strong { font-weight: 700; }

.prose__updated {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-soft);
}

/* --- Bloc repliable des mentions détaillées --- */

.warn {
  margin: 1.5rem 0 0;
  border: 1px solid var(--rule);
}

.warn summary {
  padding: 1rem 1.25rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.warn summary::-webkit-details-marker { display: none; }

.warn summary::before {
  content: "+ ";
  color: var(--grey-soft);
}

.warn[open] summary::before { content: "\2212 "; }

.warn summary:hover,
.warn summary:focus-visible { background-color: var(--paper-warm); }

.warn__body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--rule);
}

.warn__body h3:first-child { margin-top: 1.25rem; }

/* Pied de page réduit des pages de texte : une seule ligne. */
.colophon__base a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--grey);
}

.colophon__base a:hover { color: #ffffff; border-bottom-color: #ffffff; }

/* --- Kit presse -------------------------------------------------------- */

.presskit__note {
  margin-top: 1rem;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--grey-soft);
}

/* Fiche technique : libellé et valeur alignés, repliés sur mobile. */
.facts {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 0;
  margin: 0 0 1.6em;
}

.facts dt {
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}

.facts dd {
  margin: 0;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}

@media (max-width: 40rem) {
  .facts { grid-template-columns: 1fr; }
  .facts dd { padding-top: 0; border-top: 0; }
}

/* Blocs de texte prêts à copier. */
.copyblock {
  margin: 0 0 1.6em;
  padding: 1.25rem 1.5rem;
  background-color: var(--paper-warm);
  border-left: 3px solid var(--grey-soft);
}

.copyblock p { margin: 0 0 1em; }
.copyblock p:last-child { margin-bottom: 0; }

.band--tint .copyblock { background-color: var(--paper); }

/* --- Page À propos ----------------------------------------------------- */

/* Portrait 288 x 288, calé en haut à gauche, texte enveloppant. */
.portrait {
  float: left;
  width: 144px;
  height: 144px;
  margin: 0.35rem 1.5rem 0.5rem 0;
  border: 1px solid var(--rule);
  shape-margin: 1rem;
}

.prose h2 { clear: none; }

/* Sous 40rem le portrait passe au-dessus du texte, centré. */
@media (max-width: 40rem) {
  .portrait {
    float: none;
    display: block;
    margin: 0 0 1.5rem;
  }
}

.closing {
  margin-top: 2.5rem;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--grey);
}

/* =========================================================================
   NAVIGATION — barre du haut et pied de page
   ========================================================================= */

/* --- Logos de boutique --- */

.store {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  opacity: 0.65;
  transition: opacity 0.18s ease;
  background-color: #65636a;
}

.store:hover,
.store:focus-visible { opacity: 1; }

.store img {
  width: 20px;
  height: 20px;
  display: block;
}

/* --- Lien de navigation --- */

.navlink {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey);
  transition: color 0.18s ease;
}

.navlink:hover,
.navlink:focus-visible { color: var(--ink); }

.navsep { color: var(--rule); }

/* --- Mobile ------------------------------------------------------------
   Sous 40rem la barre ne peut pas tout porter. Le lien texte et le
   séparateur disparaissent, les deux logos et le sélecteur restent.
   La page reste atteignable depuis le pied de page.
   -------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .navlink,
  .navsep { display: none; }
}

/* --- Pied de page : deux colonnes -------------------------------------- */

@media (min-width: 60rem) {
  .colophon__grid { grid-template-columns: 1fr 1.6fr; }
}

.colophon__roles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.colophon__roles li { margin-bottom: 0.55rem; }


/* =========================================================================
   FORMULAIRE BREVO DANS LE BLOC TÉLÉGRAMME
   L'extension produit son propre balisage, avec ses styles en ligne.
   Ces règles le ramènent dans le vocabulaire du télégramme.
   ========================================================================= */

.telegram form.sib_signup_form {
  padding: 0 !important;
  background-color: transparent !important;
  color: var(--stamp) !important;
  font-family: 'Courier New', Courier, monospace !important;
}

.telegram form.sib_signup_form p,
.telegram form.sib_signup_form label {
  color: var(--stamp) !important;
  font-size: 0.9rem;
}

.telegram form.sib_signup_form label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.telegram form.sib_signup_form input[type="text"],
.telegram form.sib_signup_form input[type="email"] {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--stamp) !important;
  background-color: transparent !important;
  color: var(--stamp) !important;
  font-family: inherit;
  font-size: 0.95rem;
}

.telegram form.sib_signup_form input:focus {
  background-color: rgba(255, 255, 255, 0.45) !important;
}

.telegram form.sib_signup_form .sib-default-btn {
  margin-top: 1rem;
  padding: 0.95rem 1.75rem !important;
  border: 2px solid var(--stamp) !important;
  border-radius: 0 !important;
  background-color: var(--stamp) !important;
  color: var(--telegram) !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.telegram form.sib_signup_form .sib-default-btn:hover {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
}

.telegram .consent-note {
  margin: 1.25rem 0 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--stamp);
}

.telegram .consent-note a { color: var(--stamp); }

.telegram__lang { display: none; }