/* =====================================================================
   ReyDio Games — système de design « Papier & Nuit »  (proposition v2)
   ---------------------------------------------------------------------
   Même principe que la v1 — deux mondes, deux registres — mais avec
   une inversion qui change tout :

   · MONDE STUDIO      LE JOUR. Papier chiffon, encre noire, or en
                       feuille. Capitales romaines, filets, numéros
                       en chiffres romains dans la marge.
                       Le vocabulaire du catalogue d'exposition.

   · MONDE SYNTHOPOLIS LA NUIT. Bleu profond, cyan, aquarelle et
                       contour d'encre, HUD arrondi à liseré pointillé.
                       Le vocabulaire de l'écran de jeu.

   POURQUOI L'INVERSION.
   L'aquarelle et l'encre sont des médiums de papier ; la couronne et
   les capitales sont un vocabulaire imprimé. Les poser sur du noir,
   c'était les faire lutter contre leur propre matière. Surtout : en
   v1 les deux mondes étaient deux nuances de sombre, donc la bascule
   — censée être le moment signature — ne se sentait pas. Ici on tombe
   du plein jour dans la cité de nuit, et la page se déchire pour le
   dire.

   TROIS RÈGLES QUI TIENNENT TOUT LE RESTE.
   1. Aucune couleur décorative sous 100 % d'opacité sans raison. La
      v1 chuchotait (bordures à 18 %, logos à 55 %) ; c'est ce qui la
      faisait paraître générique.
   2. Rien n'est centré par défaut. La composition est éditoriale et
      asymétrique : le texte tient une colonne, les titres débordent
      dans la marge, les images sortent du cadre.
   3. Les contrastes sont calculés, pas estimés. Les valeurs d'or et
      d'encre ci-dessous sont les plus CLAIRES qui franchissent encore
      4,5:1 sur les trois fonds papier. Ne pas les éclaircir.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. JETONS
   --------------------------------------------------------------- */

:root{
  /* — Monde studio : papier et encre —
     Trois fonds papier : la feuille, le creux (bandes alternées) et
     la carte posée dessus. Les trois servent de référence au calcul
     de contraste, d'où trois valeurs seulement : au-delà on ne peut
     plus garantir le seuil. */
  --p-papier:    #EFE7D6;
  --p-papier-2:  #E4D9C2;
  --p-papier-hi: #F8F2E6;

  --p-encre:     #17130C;   /* texte principal   — 15,0:1 */
  --p-encre-2:   #4A4133;   /* texte secondaire  —  8,2:1 */
  --p-encre-3:   #5E5543;   /* labels, légendes  —  5,3:1 min */

  /* Deux ors, et la règle qui les sépare tient en une phrase :
     L'OR VIF NE TOUCHE JAMAIS LE PAPIER, L'OR PROFOND JAMAIS L'ENCRE.

     · --p-or-vif (#C9922B) ne fait que 2,2:1 sur le papier — illisible
       en texte, et invisible en filet de 2 px. Mais il fait 6,7:1
       contre l'encre. Il est donc réservé à ce qui est POSÉ SUR ou
       ACCOLÉ À de l'encre : ombres portées des boutons, survols des
       portes, fonds d'icône. C'est là qu'il joue la feuille d'or.
     · --p-or (#7C520F) tient 4,7:1 sur les trois fonds papier. C'est
       lui qui s'écrit et qui trace : liens, sur-titres, chiffres
       romains, filets. Un or d'encre, pas un or de lumière.

     Se tromper de sens est la faute la plus facile de cette palette,
     et elle ne se voit pas tout de suite : ça reste « joli », juste
     délavé. C'est exactement le défaut qu'on corrige ici. */
  --p-or:        #7C520F;
  --p-or-vif:    #C9922B;
  --p-or-pale:   #E8C97A;

  --p-line:      rgba(23, 19, 12, .16);
  --p-line-hi:   rgba(23, 19, 12, .34);
  --p-line-or:   rgba(124, 82, 15, .42);

  /* — Monde Synthopolis : la nuit —
     Volontairement plus profond que la v1 (#03101A → #04070E) : la
     chute depuis le papier doit être franche. */
  --n-bg:        #04070E;
  --n-bg-2:      #0A1B2A;
  --n-panel:     #0C2434;
  --n-cyan:      #46EDF7;
  --n-cyan-2:    #17A8BE;
  --n-magenta:   #FF5C9D;
  --n-amber:     #FFA23A;
  --n-text:      #E9F7FB;
  --n-mist:      #9FC2D2;
  --n-mist-dim:  #82A6B8;
  --n-ink:       #01060B;
  --n-line:      rgba(70, 237, 247, .26);
  --n-line-hi:   rgba(70, 237, 247, .52);

  /* — Structure —
     La colonne de texte (--mesure) est plus étroite que la page :
     c'est elle qui crée la marge où viennent se loger les numéros
     romains et les légendes. */
  --maxw:        1240px;
  --mesure:      68ch;
  --gut:         clamp(20px, 4vw, 40px);
  --marge:       clamp(0px, 7vw, 116px);

  /* — Mouvement — */
  --ease:        cubic-bezier(.22,.68,.24,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  /* — Fibre du papier —
     Fréquence plus haute que la v1 : sur fond clair et en `multiply`,
     un grain trop gros vire au sale. */
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

  /* — Alias de compatibilité —
     Les pages du site en ligne appellent encore les noms de la v1 dans
     quelques styles en ligne (`style="color:var(--g-amber)"`). Sans ces
     alias, ces éléments perdraient leur couleur si la feuille était
     promue sans repasser sur les douze pages. Ils ne servent à rien
     d'autre : tout code neuf utilise les noms --p-* et --n-*. */
  --s-gold: var(--p-or);       --s-gold-lt: var(--p-or);
  --s-gold-dk: var(--p-or);    --s-text: var(--p-encre);
  --s-mist: var(--p-encre-2);  --s-mist-dim: var(--p-encre-3);
  --s-bg: var(--p-papier);     --s-panel: var(--p-papier-hi);
  --s-line: var(--p-line);     --s-line-hi: var(--p-line-hi);

  --g-cyan: var(--n-cyan);     --g-amber: var(--n-amber);
  --g-magenta: var(--n-magenta); --g-text: var(--n-text);
  --g-mist: var(--n-mist);     --g-mist-dim: var(--n-mist-dim);
  --g-bg: var(--n-bg);         --g-panel: var(--n-panel);
  --g-ink: var(--n-ink);       --g-line: var(--n-line);
  --g-line-hi: var(--n-line-hi);
}

/* Les composants ne connaissent que les variables neutres : ils
   changent d'apparence selon le monde qui les contient. */

[data-monde="studio"]{
  --bg: var(--p-papier); --bg-2: var(--p-papier-2); --panel: var(--p-papier-hi);
  --fg: var(--p-encre); --mist: var(--p-encre-2); --mist-dim: var(--p-encre-3);
  --accent: var(--p-or); --accent-vif: var(--p-or); --accent-pale: var(--p-or-pale);
  --line: var(--p-line); --line-hi: var(--p-line-hi);
  --display: 'Cinzel', 'Times New Roman', serif;
  --radius: 0px;
  color-scheme: light;
}

[data-monde="jeu"]{
  --bg: var(--n-bg); --bg-2: var(--n-bg-2); --panel: var(--n-panel);
  --fg: var(--n-text); --mist: var(--n-mist); --mist-dim: var(--n-mist-dim);
  --accent: var(--n-cyan); --accent-vif: var(--n-cyan); --accent-pale: #A8F6FC;
  --line: var(--n-line); --line-hi: var(--n-line-hi);
  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --radius: 14px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */

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

html{ scroll-behavior: smooth; background: var(--p-papier); }

body{
  margin: 0;
  background: var(--p-papier);
  color: var(--p-encre);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* La page du jeu est nuit de bout en bout : le fond de la fenêtre
   doit l'être aussi, sinon un défilement élastique laisse voir du
   papier sous la cité. */
body[data-monde-page="jeu"], html:has(body[data-monde-page="jeu"]){
  background: var(--n-bg);
}

/* `height:auto` neutralise l'attribut `height` des <img>, qui écraserait
   l'image dès que le CSS ne règle que la largeur. */
img, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }

/* Règle des images, inchangée depuis la v1 : `cover` pour les
   illustrations (on perd des bords, jamais la géométrie), `contain`
   pour les marques (un logo rogné est inacceptable). */
.img-couvre{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.img-contient{ width: auto; max-width: 100%; object-fit: contain; }

figure img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
[data-monde="jeu"] figure img{ border-radius: 8px; }
.fig-keyart img{ aspect-ratio: 3 / 2; }
.fig-prix img  { aspect-ratio: 2 / 1; }

.p-grille img, .nav-logo img, .pied-marque img{ width: auto; object-fit: contain; }

.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3, h4{
  font-family: var(--display, 'Cinzel', serif);
  margin: 0;
  line-height: 1.02;
  font-weight: 700;
}

:focus-visible{
  outline: 2px solid var(--accent, var(--p-or));
  outline-offset: 3px;
  border-radius: 2px;
}

::selection{ background: var(--p-or-vif); color: var(--p-encre); }
[data-monde="jeu"] ::selection{ background: var(--n-cyan); color: var(--n-ink); }

.skip{
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 300;
  background: var(--p-encre); color: var(--p-papier);
  padding: 12px 22px; font-weight: 600;
  transition: transform .2s var(--ease);
}
.skip:focus{ transform: translate(-50%, 0); }

/* ---------------------------------------------------------------
   3. STRUCTURE ET GRILLE ÉDITORIALE
   ---------------------------------------------------------------
   `.wrap` reste la colonne de page. Ce qui change, c'est qu'on ne
   met plus le contenu au milieu : `.grille` pose douze colonnes, et
   chaque bloc choisit lesquelles il occupe. La marge de gauche
   ainsi libérée n'est pas du vide — c'est là que vivent les numéros
   romains, les dates et les légendes.
   --------------------------------------------------------------- */

.monde{
  position: relative;
  background: var(--bg);
  color: var(--fg);
}

/* La fibre : le seul élément commun aux deux mondes. Sur papier elle
   est en `multiply` (elle creuse la matière), sur la nuit en
   `overlay` (elle éclaire le grain). */
.monde::before{
  content: '';
  position: absolute; inset: 0;
  background-image: var(--fibre);
  background-size: 220px 220px;
  opacity: .16;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
[data-monde="jeu"].monde::before{
  opacity: .07;
  mix-blend-mode: overlay;
}

.wrap{
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow{ max-width: 860px; }

.section{
  position: relative;
  z-index: 2;
  padding-block: clamp(84px, 11vw, 168px);
}
.section-tight{ padding-block: clamp(52px, 7vw, 100px); }

/* Douze colonnes. Sur mobile la grille s'efface : tout revient en
   pile, et les marges se referment. */
.grille{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.c-texte  { grid-column: 1 / span 7; }
.c-cote   { grid-column: 9 / span 4; }
.c-large  { grid-column: 1 / span 9; }
.c-plein  { grid-column: 1 / -1; }
.c-droite { grid-column: 6 / -1; }

/* Débord : l'image sort de la colonne de page par la droite. C'est
   le geste qui casse la boîte de 1240 px et donne de l'air au reste. */
.debord-droite{ margin-right: calc(-1 * max(0px, (100vw - var(--maxw)) / 2) - var(--gut)); }

@media (max-width: 900px){
  .c-texte, .c-cote, .c-large, .c-plein, .c-droite{ grid-column: 1 / -1; }
  .debord-droite{ margin-right: calc(-1 * var(--gut)); }
}

/* ---------------------------------------------------------------
   4. TYPOGRAPHIE
   ---------------------------------------------------------------
   L'échelle est nettement plus ample qu'en v1 (jusqu'à 150 px contre
   92 px). Sur papier, Cinzel a besoin de taille pour montrer ses
   empattements : en dessous de 40 px c'est une serif quelconque,
   au-delà de 90 px c'est une inscription.
   --------------------------------------------------------------- */

.eyebrow{
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
/* Le filet du sur-titre est au-dessus, pas à côté : il sert de
   règle horizontale qui aligne le bloc sur la grille. */
.eyebrow::before{
  content: '';
  display: block;
  width: 100%;
  max-width: 190px;
  height: 2px;
  background: var(--accent-vif);
  margin-bottom: 14px;
}
.eyebrow-court::before{ max-width: 54px; }
.eyebrow-nu::before{ display: none; }

.t-mega{
  font-size: clamp(50px, 11.5vw, 152px);
  line-height: .90;
  letter-spacing: -.005em;
}
.t-hero{ font-size: clamp(42px, 8vw, 110px); line-height: .94; }
.t-xl  { font-size: clamp(34px, 5.6vw, 78px); line-height: .98; }
.t-lg  { font-size: clamp(26px, 3.6vw, 47px); line-height: 1.04; }
.t-md  { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.16; }

/* Archivo Black est déjà très noir : il lui faut du crénage négatif
   et jamais d'interlignage lâche. */
[data-monde="jeu"] .t-mega,
[data-monde="jeu"] .t-hero,
[data-monde="jeu"] .t-xl{ letter-spacing: -.025em; }

.lead{
  color: var(--mist);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.58;
  max-width: 54ch;
}
.prose{ color: var(--mist); max-width: 62ch; }
.prose p + p{ margin-top: 1.1em; }

/* Lettrine. Réservée au premier paragraphe d'une grande section du
   monde studio : c'est un signe de document imprimé, il perd tout
   son sens s'il est répété. */
.lettrine::first-letter{
  float: left;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 3.5em;
  line-height: .84;
  margin: .06em .12em 0 0;
  color: var(--p-or);
}

/* Filet de rupture éditoriale. */
.rule{
  height: 2px;
  background: var(--accent-vif);
  opacity: 1;
  margin-block: 34px;
  border: 0;
  max-width: 190px;
}
.rule-pleine{ max-width: none; height: 1px; background: var(--line-hi); }

/* Le numéro romain dans la marge. Il ne se lit pas — c'est un repère
   visuel — d'où `aria-hidden` côté HTML. Sur grand écran il sort du
   texte par la gauche ; en dessous il se range au-dessus du titre. */
.marge-num{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  color: var(--p-or);
  user-select: none;
}
@media (min-width: 1100px){
  .a-marge{ position: relative; }
  .a-marge > .marge-num{
    position: absolute;
    right: calc(100% + 30px);
    top: -.06em;
  }
}
@media (max-width: 1099px){
  .a-marge > .marge-num{ display: block; margin-bottom: 12px; }
}

/* ---------------------------------------------------------------
   5. MATIÈRE — DÉCHIRURE ET LAVIS
   ---------------------------------------------------------------
   Les deux effets qui portent la personnalité du site. Tous deux
   passent par des filtres SVG (feTurbulence + feDisplacementMap)
   plutôt que par du flou CSS : un `blur()` donne un halo de lampe,
   un déplacement par turbulence donne un bord de pigment. C'est la
   différence entre « évoquer l'aquarelle » et en faire.

   Les filtres sont définis une fois dans le sprite de chaque page.
   S'ils manquent (vieux navigateur, SVG désactivé), les formes
   restent affichées, simplement nettes : rien ne casse.
   --------------------------------------------------------------- */

/* La déchirure, posée en haut d'un monde, mord sur celui du dessus. */
.dechirure{
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(44px, 5.5vw, 88px);
  z-index: 4;
  pointer-events: none;
  line-height: 0;
  /* Un pixel de recouvrement : sans lui, un demi-pixel de fond
     apparaît entre les deux sections aux zooms non entiers. */
  transform: translateY(-1px);
}
.dechirure svg{ width: 100%; height: 100%; display: block; }
/* Deux tracés superposés. Celui du dessous (`d-ame`) descend un peu
   plus bas et reste visible en frange sous le bord : c'est l'âme de la
   fibre, ce qui fait lire « papier déchiré » plutôt que « bord
   dentelé ». Celui du dessus (`d-face`) porte la couleur du monde
   qu'on quitte. */
.d-ame { fill: var(--p-papier-hi); }
.d-face{ fill: var(--p-papier); }

/* Variante du retour. On ne retourne PAS la géométrie — un `scaleY(-1)`
   inverserait la forme sans inverser les remplissages, et la frange se
   retrouverait du mauvais côté. On échange seulement les couleurs : la
   face devient nuit, l'âme reste du papier clair, et le trou de nuit
   apparaît déchiré au-dessus du papier qui reprend. */
.dechirure-nuit .d-face{ fill: var(--n-bg); }
.dechirure-nuit .d-ame { fill: var(--p-papier-hi); }

/* Le lavis : trois taches de pigment, jamais géométriques. Le filtre
   leur donne des bords irréguliers ; l'opacité reste franche, c'est
   de la peinture, pas de la lumière. */
.lavis{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lavis svg{
  position: absolute;
  width: 100%; height: 100%;
}

/* ---------------------------------------------------------------
   6. COMPOSANTS ENCADRÉS
   ---------------------------------------------------------------
   `.grave` (studio) et `.hud` (jeu) sont les deux cadres du site.
   En v1 ils étaient deux variantes du même rectangle sombre. Ici ils
   n'ont plus rien en commun, ce qui est le but : on doit reconnaître
   le monde à la forme du cadre, même en noir et blanc.
   --------------------------------------------------------------- */

/* Studio : la carte posée sur la feuille. Pas d'ombre portée diffuse
   (c'est le tic du template) mais une ombre courte et un filet net,
   comme un carton contrecollé. */
.grave{
  position: relative;
  background: var(--p-papier-hi);
  border: 1px solid var(--p-line-hi);
  box-shadow: 3px 3px 0 rgba(23, 19, 12, .07);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease),
              border-color .3s;
}
.grave::after{
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--p-line);
  pointer-events: none;
  transition: inset .3s var(--ease), border-color .3s;
}
.grave:hover{
  box-shadow: 6px 6px 0 var(--p-or-vif);
  border-color: var(--p-encre);
  transform: translate(-2px, -2px);
}
.grave:hover::after{ inset: 8px; border-color: var(--p-line-hi); }

/* Jeu : la pastille d'interface, reprise telle quelle de l'écran. */
.hud{
  position: relative;
  border: 2px solid var(--n-cyan);
  border-radius: 14px;
  background: rgba(10, 27, 42, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.hud::after{
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px dashed rgba(70, 237, 247, .45);
  border-radius: 8px;
  pointer-events: none;
  transition: inset .3s var(--ease), border-color .3s;
}
.hud:hover::after{ inset: 3px; border-color: rgba(70, 237, 247, .78); }

.hud-amber  { border-color: var(--n-amber); }
.hud-amber::after  { border-color: rgba(255, 162, 58, .48); }
.hud-magenta{ border-color: var(--n-magenta); }
.hud-magenta::after{ border-color: rgba(255, 92, 157, .48); }

/* ---------------------------------------------------------------
   7. BOUTONS
   --------------------------------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 16px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s, border-color .22s,
              color .22s, box-shadow .28s;
  white-space: nowrap;
}
.btn .arw{ transition: transform .22s var(--ease); }
.btn:hover .arw{ transform: translateX(4px); }

/* Studio — le bouton plein est ENCRE, pas or : sur papier, l'or plein
   ne porte pas de texte clair (2,2:1) et un aplat or de cette taille
   vire au doré publicitaire. L'or reste le liseré et le survol. */
.btn-or{
  background: var(--p-encre);
  color: var(--p-papier);
  box-shadow: 4px 4px 0 var(--p-or-vif);
}
.btn-or:hover{
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--p-or-vif);
}
.btn-or:active{ transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--p-or-vif); }

/* La maquette n'employait pas ce bouton fantome : sa regle etait donc
   ecrite en idiome papier. Le site, lui, s'en sert aussi dans le monde
   du jeu (le bouton Discord), ou de l'encre sur la nuit ne se voit pas.
   Variables neutres : il suit desormais son monde. */
.btn-or-fant{
  border-color: var(--fg, var(--p-encre));
  color: var(--fg, var(--p-encre));
  background: transparent;
}
.btn-or-fant:hover{ background: var(--fg, var(--p-encre)); color: var(--bg, var(--p-papier)); }

/* Jeu — géométrie du HUD. */
.btn-cyan{
  background: var(--n-cyan);
  color: #02171C;
  border-radius: 12px;
}
.btn-cyan:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px rgba(70, 237, 247, .8);
}
.btn-cyan-fant{
  border-color: var(--n-line-hi);
  color: var(--n-text);
  border-radius: 12px;
  background: rgba(10, 27, 42, .55);
}
.btn-cyan-fant:hover{
  transform: translateY(-2px);
  border-color: var(--n-cyan);
  color: var(--n-cyan);
  background: rgba(70, 237, 247, .1);
}

.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; }

/* Garde-fou de largeur.
   `white-space: nowrap` protège les barres — un bouton qui passe sur
   deux lignes y déforme toute la rangée. Mais dans une colonne étroite
   il devient un piège : le libellé « Découvrir Synthopolis, notre FPS
   de parkour » mesure 520 px et ne se replie pas, ce qui pousse la
   grille au-delà de l'écran et fait défiler TOUTE la page
   horizontalement sur téléphone.

   Le défaut existe aussi sur la version en ligne (document de 540 px
   pour une fenêtre de 360). Les deux lignes ci-dessous le corrigent :
   la ligne se replie dès qu'on n'a plus la place, la barre du haut
   n'étant pas concernée puisqu'elle masque déjà son bouton sous
   900 px. */
.btn{ max-width: 100%; }
@media (max-width: 700px){
  .btn{ white-space: normal; text-align: center; }
}

/* Lien souligné à la main : le trait pousse depuis la gauche. */
.lien-trait{
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
}
.lien-trait:hover{ background-size: 100% 2px; }

/* ---------------------------------------------------------------
   8. NAVIGATION
   ---------------------------------------------------------------
   Sur papier, la barre ne peut plus être un verre fumé. Au repos elle
   est transparente ; collée, elle devient une bande de papier opaque
   séparée du contenu par un filet d'encre — jamais un flou.
   --------------------------------------------------------------- */

.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
}
.nav.colle{
  background: rgba(239, 231, 214, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--p-line-hi);
}
.nav.en-jeu.colle{
  background: rgba(4, 7, 14, .9);
  border-bottom-color: var(--n-line);
}

/* `flex-wrap` rend la barre insensible à la langue : l'allemand
   produit des libellés nettement plus longs, et la barre se replie
   d'elle-même au lieu de couper. */
.nav-in{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  row-gap: 6px;
  max-width: 1400px;
  margin-inline: auto;
  padding: 13px var(--gut);
}
.nav-logo{ display: flex; align-items: center; gap: 11px; }
.nav-logo img{ height: 36px; width: auto; object-fit: contain; }
/* Le logo est doré sur fond sombre à l'origine : sur papier il faut
   le rasseoir, sinon il flotte comme un autocollant. */
.nav-logo img{ filter: drop-shadow(0 1px 0 rgba(23, 19, 12, .28)); }
.nav.en-jeu .nav-logo img{ filter: none; }
.nav-logo span{
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-encre);
}
.nav.en-jeu .nav-logo span{ color: var(--n-text); }

.nav-liens{ display: flex; gap: 22px; margin-left: auto; }
.nav-liens a{
  position: relative;
  padding: 5px 0;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-encre-2);
  transition: color .2s;
}
.nav.en-jeu .nav-liens a{ color: var(--n-mist); }
.nav-liens a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--p-or);
  transition: width .26s var(--ease);
}
.nav.en-jeu .nav-liens a::after{ background: var(--n-cyan); }
.nav-liens a:hover{ color: var(--p-encre); }
.nav.en-jeu .nav-liens a:hover{ color: var(--n-text); }
.nav-liens a:hover::after{ width: 100%; }
.nav-liens a[aria-current]{ color: var(--p-encre); }
.nav-liens a[aria-current]::after{ width: 100%; }
.nav.en-jeu .nav-liens a[aria-current]{ color: var(--n-text); }

.nav-fin{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-fin .btn{ padding: 10px 16px; font-size: 12px; letter-spacing: .08em; box-shadow: 3px 3px 0 var(--p-or-vif); }
.nav-fin .btn:hover{ box-shadow: 5px 5px 0 var(--p-or-vif); }

/* Le bouton Steam est un `.btn-or`, donc de l'encre sur du papier. Sur
   la page du jeu la barre est nuit : de l'encre sur la nuit serait un
   rectangle invisible. Il passe au cyan avec elle. */
.nav.en-jeu .btn-or{
  background: var(--n-cyan);
  color: var(--n-ink);
  border-radius: 10px;
  box-shadow: none;
}
.nav.en-jeu .btn-or:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px rgba(70, 237, 247, .8);
}
.btn-ico{ width: 16px; height: 16px; fill: currentColor; flex: none; }

.nav-reseaux{
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 0; padding: 0;
  list-style: none;
}
.nav-reseaux a{
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--p-encre-3);
  transition: color .2s, background .2s, transform .2s var(--ease);
}
.nav-reseaux svg{ width: 16px; height: 16px; fill: currentColor; }
.nav-reseaux a:hover{
  color: var(--p-encre);
  background: var(--p-or-vif);
  transform: translateY(-2px);
}
.nav.en-jeu .nav-reseaux a{ color: var(--n-mist-dim); border-radius: 7px; }
.nav.en-jeu .nav-reseaux a:hover{ color: var(--n-cyan); background: rgba(70, 237, 247, .14); }

.nav-reseaux::after{
  content: '';
  width: 1px; height: 17px;
  margin-left: 9px;
  background: var(--p-line-hi);
}
.nav.en-jeu .nav-reseaux::after{ background: var(--n-line-hi); }

.langues{ display: flex; gap: 2px; }
.langues a{
  padding: 5px 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--p-encre-3);
  transition: color .2s, background .2s;
}
.langues a:hover{ color: var(--p-encre); background: rgba(23, 19, 12, .08); }
.langues a[aria-current]{ color: var(--p-papier); background: var(--p-encre); }
.nav.en-jeu .langues a{ color: var(--n-mist-dim); border-radius: 3px; }
.nav.en-jeu .langues a:hover{ color: var(--n-text); background: rgba(255, 255, 255, .09); }
.nav.en-jeu .langues a[aria-current]{ color: var(--n-ink); background: var(--n-cyan); }

.burger{
  display: none;
  width: 44px; height: 40px;
  align-items: center; justify-content: center;
  background: none;
  border: 2px solid var(--p-encre);
  color: var(--p-encre);
  cursor: pointer;
  border-radius: 0;
}
.nav.en-jeu .burger{ border-color: var(--n-line-hi); color: var(--n-text); border-radius: 8px; }
.burger i{
  display: block;
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  transition: background .2s;
}
.burger i::before, .burger i::after{
  content: '';
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: currentColor;
  transition: transform .26s var(--ease);
}
.burger i::before{ top: -6px; }
.burger i::after{ top: 6px; }
body.menu-ouvert .burger i{ background: transparent; }
body.menu-ouvert .burger i::before{ transform: translateY(6px) rotate(45deg); }
body.menu-ouvert .burger i::after{ transform: translateY(-6px) rotate(-45deg); }

/* Progression de lecture : de l'or vers le cyan, c'est-à-dire du jour
   vers la nuit. La barre raconte la même chose que la page. */
.progres{
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px; width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--p-or), var(--n-cyan));
}

/* ---------------------------------------------------------------
   9. HERO STUDIO — LA COUVERTURE
   ---------------------------------------------------------------
   Ce n'est plus une bannière centrée, c'est la première de couverture
   d'un catalogue : titre calé à gauche et énorme, couronne en filigrane
   qui sort par la droite, ondes du logo tracées à l'encre.
   --------------------------------------------------------------- */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(140px, 18vw, 200px) clamp(90px, 10vw, 120px);
}

/* Les ondes concentriques du logo, tracées et non animées en boucle :
   sur papier, un anneau qui pulse en permanence fait écran de veille.
   Elles respirent une fois, très lentement. */
.hero-ondes{
  position: absolute;
  top: 50%; right: -8vw;
  translate: 0 -50%;
  width: min(1000px, 108vw);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}
.hero-ondes span{
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--p-line-or);
  border-radius: 50%;
}
.hero-ondes span:nth-child(2){ inset: 13%; opacity: .8; }
.hero-ondes span:nth-child(3){ inset: 26%; opacity: .6; }
@media (prefers-reduced-motion: no-preference){
  .hero-ondes span{ animation: respire 14s var(--ease-out) infinite; }
  .hero-ondes span:nth-child(2){ animation-delay: 1.1s; }
  .hero-ondes span:nth-child(3){ animation-delay: 2.2s; }
}
@keyframes respire{
  0%, 100% { transform: scale(1);    opacity: .45; }
  50%      { transform: scale(1.035); opacity: .85; }
}

/* La couronne en filigrane, sortie par la droite. Elle n'est plus une
   vignette au-dessus du titre : elle devient un motif de fond, à
   l'échelle d'une gravure. */
.hero-couronne{
  position: absolute;
  top: 50%; right: -6vw;
  translate: 0 -52%;
  width: min(560px, 62vw);
  z-index: 1;
  opacity: .17;
  pointer-events: none;
}

.hero-in{ position: relative; z-index: 3; width: 100%; }

.hero h1{
  font-size: clamp(50px, 11.5vw, 152px);
  line-height: .88;
  letter-spacing: -.005em;
  color: var(--p-encre);
}
/* « Games » sur sa propre ligne : le titre doit se lire comme une
   inscription à deux registres, pas comme une ligne de texte. Un
   <span> plutôt qu'un <br> — le nom accessible garde son espace. */
.hero h1 span{ display: block; }
/* « Depuis 2025 » : le sous-titre de couverture, pas un slogan. */
.hero h1 em{
  display: block;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-top: 1.9em;
  color: var(--p-or);
}

.hero-phrase{
  margin: 34px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.85vw, 21px);
  line-height: 1.58;
  color: var(--p-encre-2);
}
.hero-phrase b{
  color: var(--p-encre);
  font-weight: 600;
  /* Surlignage à l'or, tracé sous la ligne de base : c'est un geste de
     relecture au crayon, pas un fond de couleur. */
  box-shadow: inset 0 -.42em 0 var(--p-or-pale);
}

/* — LES DEUX PORTES —
   Le moment où les deux parcours se séparent. Ce ne sont plus deux
   cartes côte à côte mais deux moitiés d'une même règle, séparées par
   un filet. Au survol, chacune bascule dans le monde qu'elle promet :
   la porte joueur devient NUIT, la porte pro devient ENCRE ET OR. On
   annonce la couleur avant même le clic. */
.portes{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: clamp(48px, 6vw, 76px) 0 0;
  max-width: 900px;
  border-top: 2px solid var(--p-encre);
}
.porte{
  position: relative;
  display: block;
  padding: 30px 28px 34px;
  text-align: left;
  border-bottom: 2px solid var(--p-encre);
  border-right: 1px solid var(--p-line-hi);
  overflow: hidden;
  transition: color .35s var(--ease);
}
.porte:last-child{ border-right: 0; }
/* Le fond qui monte au survol : un volet, pas un fondu. */
.porte::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--p-encre);
  transform: translateY(101%);
  transition: transform .42s var(--ease-out);
}
.porte:hover::before, .porte:focus-visible::before{ transform: translateY(0); }
.porte-jeu::before{ background: var(--n-bg); }
.porte > *{ position: relative; z-index: 1; }

.porte .p-lab{
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--p-or);
  margin-bottom: 14px;
  transition: color .35s var(--ease);
}
.porte .p-titre{
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.06;
  color: var(--p-encre);
  margin-bottom: 10px;
  transition: color .35s var(--ease);
}
.porte .p-desc{
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--p-encre-3);
  max-width: 32ch;
  transition: color .35s var(--ease);
}
.porte .p-fleche{
  display: inline-block;
  margin-top: 22px;
  font-size: 20px;
  color: var(--p-or);
  transition: transform .3s var(--ease), color .35s var(--ease);
}
.porte:hover .p-fleche{ transform: translateX(8px); }

/* Au survol, tout le contenu passe en clair sur le volet. */
.porte:hover .p-titre, .porte:focus-visible .p-titre{ color: var(--p-papier); }
.porte:hover .p-desc,  .porte:focus-visible .p-desc { color: rgba(239, 231, 214, .82); }
.porte:hover .p-lab,   .porte:focus-visible .p-lab,
.porte:hover .p-fleche,.porte:focus-visible .p-fleche{ color: var(--p-or-vif); }
.porte-jeu:hover .p-lab,   .porte-jeu:focus-visible .p-lab,
.porte-jeu:hover .p-fleche,.porte-jeu:focus-visible .p-fleche{ color: var(--n-cyan); }
.porte-jeu:hover .p-titre, .porte-jeu:focus-visible .p-titre{ color: var(--n-text); }
.porte-jeu:hover .p-desc,  .porte-jeu:focus-visible .p-desc { color: var(--n-mist); }

.hero-bas{
  position: absolute;
  left: var(--gut); bottom: 30px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}
.hero-bas i{
  width: 46px; height: 2px;
  background: var(--p-or);
  transform-origin: left;
  animation: filer 2.6s var(--ease) infinite;
}
@keyframes filer{
  0%, 100% { transform: scaleX(.35); opacity: .5; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

/* ---------------------------------------------------------------
   10. STUDIO — CONVICTIONS ET FONDATEURS
   --------------------------------------------------------------- */

.duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.duo-large{ grid-template-columns: 1.1fr .9fr; }

/* Les trois convictions : un tableau à filets, pas trois cartes.
   Le chiffre romain est énorme et pâle — il numérote, il ne décore
   pas. */
.convictions{
  display: grid;
  gap: 0;
  margin-top: clamp(44px, 5vw, 64px);
  border-top: 2px solid var(--p-encre);
}
.conviction{
  display: grid;
  grid-template-columns: clamp(70px, 9vw, 120px) 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--p-line-hi);
  transition: background .3s, padding-left .3s var(--ease);
}
.conviction:hover{ background: var(--p-papier-2); padding-left: 16px; }
.conviction .c-no{
  font-family: 'Cinzel', serif;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 700;
  color: var(--p-or);
  line-height: .9;
}
.conviction h3{
  font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--p-encre);
  margin-bottom: 10px;
}
.conviction p{ margin: 0; font-size: 16px; color: var(--p-encre-2); max-width: 56ch; }

/* Les fondateurs : deux portraits en duotone encre, redressés en
   couleur au survol. Le duotone les fait appartenir au document ;
   la couleur au survol rappelle que ce sont des personnes. */
.fondateurs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  margin-top: clamp(40px, 5vw, 60px);
}
.fondateur{
  display: grid;
  grid-template-columns: clamp(120px, 15vw, 168px) 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.fondateur::after{ display: none; }
.fondateur:hover{ transform: none; box-shadow: none; }
.fondateur img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--p-line-hi);
}
.fondateur .f-role{
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-or);
  margin-bottom: 8px;
  padding-top: 4px;
}
.fondateur h3{
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  color: var(--p-encre);
}
.fondateur p{ margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--p-encre-2); }

/* ---------------------------------------------------------------
   11. LA BASCULE — jour ⟶ nuit
   ---------------------------------------------------------------
   Le moment signature. En v1 c'était un fondu entre deux sombres, donc
   rien. Ici la feuille se déchire et on tombe dans la cité.
   --------------------------------------------------------------- */

.bascule{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--n-bg);
  isolation: isolate;
}
.bascule-video{ position: absolute; inset: 0; z-index: 0; }
.bascule-video video, .bascule-video img{ width: 100%; height: 100%; object-fit: cover; }

/* Le voile part du papier en haut : la déchirure se prolonge en
   dégradé pour que le raccord ne soit jamais une ligne franche. */
.bascule-voile{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(4, 7, 14, .94) 0%,
      rgba(4, 7, 14, .5) 26%,
      rgba(4, 7, 14, .38) 48%,
      rgba(4, 7, 14, .76) 80%,
      var(--n-bg) 100%),
    radial-gradient(120% 80% at 50% 46%, transparent 30%, rgba(4, 7, 14, .78) 100%);
}
.bascule-in{
  position: relative;
  z-index: 3;
  text-align: center;
  padding: clamp(150px, 18vw, 200px) var(--gut) clamp(90px, 10vw, 120px);
}
.bascule-titre{ margin: 0; font-size: inherit; line-height: inherit; }
.bascule-wordmark{
  display: block;
  width: min(620px, 82vw);
  margin: 0 auto 30px;
  filter: drop-shadow(0 12px 44px rgba(0, 0, 0, .8));
}
.bascule-phrase{
  max-width: 42ch;
  margin: 0 auto 36px;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: var(--n-text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
}
.bascule-phrase b{ color: var(--n-cyan); font-weight: 600; }

.lire-trailer{
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 13px 26px 13px 15px;
  cursor: pointer;
  color: var(--n-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(10, 27, 42, .65);
  border: 2px solid var(--n-cyan);
  border-radius: 14px;
  transition: background .25s, transform .25s var(--ease);
}
.lire-trailer:hover{ background: rgba(70, 237, 247, .16); transform: translateY(-2px); }
.lire-trailer .play{
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--n-cyan);
  color: var(--n-ink);
  flex: none;
}

/* Le bandeau de chiffres. Archivo Black à grande taille, séparé par
   des filets pleins : un tableau de scores. */
.jauges{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--n-line);
  border-block: 1px solid var(--n-line);
  position: relative;
  z-index: 2;
}
.jauge{
  padding: clamp(26px, 3.4vw, 40px) 18px;
  text-align: center;
  background: var(--n-bg);
  transition: background .3s;
}
.jauge:hover{ background: var(--n-bg-2); }
.jauge .j-n{
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--n-cyan);
}
.jauge .j-l{
  margin-top: 11px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--n-mist-dim);
}

/* ---------------------------------------------------------------
   12. BANDEAU D'ACTUALITÉ
   --------------------------------------------------------------- */

/* Ce bandeau ne vivait que dans le monde du jeu quand cette feuille a
   ete ecrite. Il est desormais aussi en tete de la page d'accueil, donc
   sur papier : il ne lit plus que des variables neutres et suit le monde
   qui le contient. Ecrit en dur, son texte en `--n-text` serait invisible
   sur le papier. */
.annonce{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: 18px 22px;
  --pastille: var(--n-amber);
  --pastille-fg: #2A1602;
  --survol: rgba(70, 237, 247, .08);
  transition: transform .3s var(--ease), background .3s;
}
/* Sur papier la pastille est en OR PROFOND : elle trace sur le papier,
   elle ne se pose pas sur de l'encre. L'or vif y serait delave. */
[data-monde="studio"] .annonce{
  --pastille: var(--p-or);
  --pastille-fg: var(--p-papier-hi);
  --survol: rgba(124, 82, 15, .07);
}
.annonce:hover{ transform: translateY(-3px); background: var(--survol); }

.an-neuf{
  flex: none;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--pastille);
  color: var(--pastille-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference){
  .an-neuf{ animation: pulseNeuf 2.8s var(--ease) infinite; }
}
@keyframes pulseNeuf{
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pastille) 50%, transparent); }
  55%      { box-shadow: 0 0 0 9px transparent; }
}

.an-txt{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an-txt strong{
  font-family: var(--display, 'Archivo Black', sans-serif);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--fg, var(--n-text));
}
[data-monde="studio"] .an-txt strong{ font-weight: 700; letter-spacing: .01em; }
.an-txt span{ font-size: 14px; color: var(--mist, var(--n-mist)); }
.an-date{
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist-dim, var(--n-mist-dim));
  white-space: nowrap;
}
.an-fleche{
  flex: none;
  color: var(--accent, var(--n-cyan));
  font-size: 18px;
  transition: transform .25s var(--ease);
}
.annonce:hover .an-fleche{ transform: translateX(5px); }

@media (max-width: 700px){
  .annonce{ flex-wrap: wrap; gap: 10px 14px; }
  .an-txt{ flex: 1 1 100%; order: 3; }
  .an-date{ margin-left: 0; }
  .an-fleche{ margin-left: auto; }
}

/* ---------------------------------------------------------------
   13. LE RAIL D'ALTITUDE
   ---------------------------------------------------------------
   Propre à la page du jeu. Synthopolis est une mégapole VERTICALE
   qu'on traverse au grappin ; la page, elle, se fait défiler
   verticalement. Le rail rend cette coïncidence lisible : un câble
   tendu sur toute la hauteur, gradué, dont le curseur suit le
   défilement. Ce n'est pas une barre de progression déguisée — les
   graduations portent les sections, et le chiffre est une altitude.

   Purement décoratif : `aria-hidden` côté HTML, masqué à
   l'impression, et retiré sous 1200 px où il n'y a plus de marge
   pour le loger.
   --------------------------------------------------------------- */

/* COMBIEN DE PLACE FAUT-IL VRAIMENT.
   La colonne de page fait 1240 px ; la marge libre de chaque côté vaut
   donc (100vw − 1240) / 2, plus les 40 px de gouttière interne. À
   1200 px de fenêtre cette marge est NULLE — le premier seuil essayé
   posait donc le rail directement sur le texte. Les deux paliers
   ci-dessous sont calculés, pas estimés :

   · 1400 px → marge 80 + 40 = 120 px libres. Le rail nu (72 px) tient.
   · 1600 px → marge 180 + 40 = 220 px libres. Les libellés (≈ 144 px
     jusqu'au bout du mot le plus long) tiennent aussi.

   En dessous de 1400 px le rail disparaît complètement : mieux vaut
   pas de rail qu'un rail posé sur la lecture. */
.rail{
  position: fixed;
  top: 0; bottom: 0;
  left: 20px;
  width: 72px;
  z-index: 90;
  display: none;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}
@media (min-width: 1400px){
  body[data-monde-page="jeu"] .rail{ display: block; }
}

/* Le câble. */
.rail::before{
  content: '';
  position: absolute;
  left: 9px; top: 14vh; bottom: 14vh;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, var(--n-line-hi) 12%, var(--n-line-hi) 88%, transparent);
}
.rail-grad{
  position: absolute;
  left: 0; top: 14vh; bottom: 14vh;
  width: 100%;
}
.rail-tick{
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  transition: color .3s, opacity .3s;
  color: var(--n-mist-dim);
  opacity: .5;
}
.rail-tick::before{
  content: '';
  width: 19px; height: 1px;
  background: currentColor;
  flex: none;
}
/* Le nom du palier ne s'affiche que si la marge peut vraiment le
   contenir. En dessous, il ne reste que la graduation — ce qui est
   d'ailleurs à quoi ressemble un altimètre. */
.rail-tick span{ display: none; }
@media (min-width: 1600px){
  .rail-tick span{
    display: inline;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}
.rail-tick.actif{ color: var(--n-cyan); opacity: 1; }
.rail-tick.actif::before{ width: 26px; height: 2px; }

/* Le curseur : le point d'accroche du grappin. */
.rail-curseur{
  position: absolute;
  left: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--n-cyan);
  box-shadow: 0 0 0 4px rgba(70, 237, 247, .18), 0 0 18px rgba(70, 237, 247, .8);
  transform: translateY(-50%);
  transition: top .12s linear;
}
.rail-alt{
  position: absolute;
  left: 28px;
  transform: translateY(-50%);
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: -.02em;
  color: var(--n-cyan);
  white-space: nowrap;
  transition: top .12s linear;
}

/* ---------------------------------------------------------------
   14. SYNTHOPOLIS — MONDE DU JEU
   --------------------------------------------------------------- */

.atouts{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: clamp(40px, 5vw, 60px);
}
.atout{ padding: 32px 30px; transition: transform .3s var(--ease); }
.atout:hover{ transform: translateY(-4px); }
.atout .a-ic{ width: 40px; height: 40px; margin-bottom: 20px; color: var(--n-cyan); }
.atout h3{
  font-family: 'Archivo Black', sans-serif;
  font-size: 19px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--n-text);
  margin-bottom: 10px;
}
.atout p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--n-mist); }
.atout .a-no{
  position: absolute;
  top: 24px; right: 26px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--n-mist-dim);
}

/* Modes de jeu : tableau de scores.
   ---------------------------------------------------------------
   SEUL COMPOSANT DE CETTE SECTION À ÊTRE NEUTRE, et ce n'est pas un
   caprice : la liste des modes apparaît aussi dans le dossier de
   presse, qui est entièrement dans le monde papier. Verrouillée sur
   les jetons de la nuit, elle y écrivait du texte clair sur fond
   clair — 1,1:1, donc illisible.

   Les voisins (`.atout`, `.galerie`, `.jauges`, `.config`) restent
   liés à la nuit parce qu'ils s'appuient sur `.hud`, qui EST
   l'interface du jeu. Si l'un d'eux devait un jour servir côté
   studio, il faudrait le neutraliser de la même façon. */
.modes{ margin-top: clamp(40px, 5vw, 56px); border-top: 2px solid var(--fg, var(--n-text)); }
.mode{
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 28px 10px;
  border-bottom: 1px solid var(--line, var(--n-line));
  transition: background .25s, padding-left .25s var(--ease);
}
.mode:hover{ background: var(--bg-2, rgba(70, 237, 247, .06)); padding-left: 22px; }
.mode .m-no{ font-size: 14px; font-weight: 600; color: var(--accent, var(--n-cyan)); letter-spacing: .1em; }
.mode .m-nom{
  font-family: var(--display, 'Archivo Black', sans-serif);
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: -.025em;
  color: var(--fg, var(--n-text));
}
[data-monde="studio"] .mode .m-nom{ letter-spacing: .02em; font-weight: 700; }
.mode .m-desc{ max-width: 44ch; font-size: 14.5px; color: var(--mist, var(--n-mist)); text-align: right; }

/* Galerie : proportions irrégulières, comme des planches peintes. */
.galerie{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  gap: 14px;
  margin-top: clamp(40px, 5vw, 56px);
}
.galerie a{
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--n-line);
  border-radius: 10px;
}
.galerie img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.galerie a:hover img{ transform: scale(1.06); }
.galerie a::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(1, 6, 11, .6));
  opacity: 0;
  transition: opacity .3s;
}
.galerie a:hover::after{ opacity: 1; }
.g-grand{ grid-column: span 4; grid-row: span 2; }
.g-haut { grid-column: span 2; grid-row: span 2; }
.g-petit{ grid-column: span 2; }

/* Configuration technique. */
.config{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
  padding: clamp(28px, 4vw, 50px);
  border-radius: 16px;
}
.config-liste{ display: flex; flex-direction: column; }
.config-ligne{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--n-line);
  font-size: 15px;
}
.config-ligne:last-child{ border-bottom: 0; }
.config-ligne .k{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--n-mist-dim);
}
.config-ligne .v{ color: var(--n-text); font-weight: 500; text-align: right; }

/* ---------------------------------------------------------------
   15. QUESTIONS FRÉQUENTES
   --------------------------------------------------------------- */

.faq{ margin-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--n-line); }
.faq details{ border-bottom: 1px solid var(--n-line); }
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 6px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  color: var(--n-text);
  transition: color .2s;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--n-cyan); }
.faq summary .plus{ position: relative; flex: none; width: 20px; height: 20px; }
.faq summary .plus::before, .faq summary .plus::after{
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: var(--n-cyan);
  transition: transform .28s var(--ease), opacity .28s;
}
.faq summary .plus::before{ width: 14px; height: 2px; }
.faq summary .plus::after{ width: 2px; height: 14px; }
.faq details[open] summary .plus::after{ transform: rotate(90deg); opacity: 0; }
.faq details > div{ padding: 0 6px 26px; max-width: 68ch; color: var(--n-mist); font-size: 15.5px; }
.faq details > div a{ color: var(--n-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   16. ESPACE PRESSE — retour au papier
   --------------------------------------------------------------- */

.presse-bloc{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
  margin-top: clamp(40px, 5vw, 56px);
}
.presse-carte{ padding: 30px 28px; }
.presse-carte h3{
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--p-encre);
  margin-bottom: 10px;
}
.presse-carte p{ margin: 0 0 20px; font-size: 14.5px; color: var(--p-encre-2); }
.presse-carte a.lien{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-or);
}
.presse-carte a.lien:hover{ color: var(--p-encre); }

/* — FRISE DES SALONS —
   Pour un éditeur ou un journaliste, c'est la preuve la plus directe
   qu'un studio existe : il se déplace, il montre son jeu. */
.salons{ position: relative; margin-top: clamp(36px, 4.5vw, 52px); }
.salon{
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--p-line-hi);
}
.salon:last-child{ border-bottom: 0; }

.s-date{ text-align: right; }
.s-j{
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--p-or);
}
.s-j span{ padding-inline: .1em; font-size: .66em; vertical-align: .14em; opacity: .75; }
.s-m{
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}
.s-txt h3{
  font-family: 'Cinzel', serif;
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 700;
  color: var(--p-encre);
  margin-bottom: 8px;
}
.s-txt p{ margin: 0; color: var(--p-encre-2); font-size: 14.5px; line-height: 1.55; }
.s-txt p b{ color: var(--p-encre); font-weight: 600; }

.s-statut{
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 11px;
  border: 1px solid var(--p-line-hi);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}

/* Le salon à venir : encadré, à l'encre, détaché du reste. */
.salon-prochain{
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 14px;
  border: 2px solid var(--p-encre);
  border-bottom: 2px solid var(--p-encre);
  background: var(--p-papier-hi);
  box-shadow: 5px 5px 0 var(--p-or-vif);
}
.salon-prochain .s-j{ color: var(--p-encre); font-size: clamp(26px, 2.8vw, 34px); }
.salon-prochain .s-statut{
  border-color: var(--p-encre);
  background: var(--p-encre);
  color: var(--p-papier);
}
.salon-prochain .s-txt h3{ font-size: clamp(22px, 2.6vw, 29px); }
.salon-prochain .s-txt p{ color: var(--p-encre-2); font-size: 15px; }

.s-stand{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px dashed var(--p-line-hi);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--p-or);
}

@media (max-width: 620px){
  .salon, .salon-prochain{ grid-template-columns: 1fr; gap: 10px; }
  .s-date{ text-align: left; }
  .s-j{ display: inline; }
  .s-m{ display: inline; margin-left: .6em; }
}

/* Partenaires : à pleine opacité, en encre. La v1 les affichait à
   55 % en gris — un soutien affiché à moitié se lit comme un soutien
   à moitié assumé. */
.partenaires{ margin-top: clamp(52px, 6vw, 76px); }
.partenaires .p-lab{
  margin-bottom: 28px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}
.p-grille{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2.6vw, 34px);
}
/* Les logos partenaires gardent leurs vraies couleurs : un soutien se
   reconnaît à sa marque, pas à une silhouette noircie. Les fichiers
   sont détourés (fond transparent), ils se posent donc sur le papier
   sans cadre blanc. */
.p-grille img{
  height: 40px;
  width: auto;
}
/* Partenaire sans logo public : son nom, composé comme une marque. */
.p-texte{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--p-encre);
}
.p-texte small{
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}

/* ---------------------------------------------------------------
   17. DOSSIER DE PRESSE
   ---------------------------------------------------------------
   Le dossier est un document avant d'être une page : il se lit en
   diagonale, se cite, et s'imprime. Le passage au papier lui profite
   directement — ce qui s'affiche à l'écran est désormais très proche
   de ce qui sortira de l'imprimante.
   --------------------------------------------------------------- */

.dossier-tete{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  padding-bottom: 32px;
  border-bottom: 2px solid var(--p-encre);
}
.dossier-tete img{ width: clamp(56px, 8vw, 88px); height: auto; }
.dossier-tete .d-t{ flex: 1 1 300px; }
.dossier-tete .d-maj{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--p-encre-3);
  text-align: right;
}

.sommaire{
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--p-line-hi);
  background: var(--p-papier-hi);
}
.somm-pistes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.somm-piste{
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--p-line-hi);
  transition: border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.somm-piste:hover{
  border-color: var(--p-encre);
  box-shadow: 4px 4px 0 var(--p-or-vif);
  transform: translate(-2px, -2px);
}
.somm-piste b{
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--p-encre);
  margin-bottom: 6px;
}
.somm-piste span{ font-size: 13.5px; color: var(--p-encre-2); line-height: 1.5; }

.somm-liste{
  columns: 2;
  column-gap: 44px;
  margin: 0; padding: 24px 0 0;
  list-style: none;
  border-top: 1px solid var(--p-line-hi);
}
.somm-liste li{ break-inside: avoid; margin-bottom: 10px; }
.somm-liste a{
  display: flex;
  gap: .8em;
  font-size: 14.5px;
  color: var(--p-encre-2);
  transition: color .25s;
}
.somm-liste a:hover{ color: var(--p-or); }
.somm-liste .n{
  flex: 0 0 auto;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: var(--p-or);
  font-variant-numeric: tabular-nums;
}

/* Fiche technique : neutre, elle suit son conteneur, et sert donc
   aussi bien la fiche studio que la fiche jeu. */
.fiche{
  margin-top: 32px;
  border: 1px solid var(--line, var(--p-line-hi));
  border-radius: var(--radius, 0);
}
.fiche-ligne{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 14px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line, var(--p-line));
  font-size: 15px;
}
.fiche-ligne:last-child{ border-bottom: 0; }
.fiche-ligne:nth-child(odd){ background: rgba(23, 19, 12, .035); }
[data-monde="jeu"] .fiche-ligne:nth-child(odd){ background: rgba(255, 255, 255, .022); }
.fiche-ligne .k{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mist-dim, var(--p-encre-3));
  padding-top: 3px;
}
.fiche-ligne .v{ color: var(--fg, var(--p-encre)); }
.fiche-ligne .v a{ color: var(--accent, var(--p-or)); text-decoration: underline; text-underline-offset: 3px; }

/* Une adresse longue et sans espace — « store.steampowered.com/app/
   3694040/Synthopolis » — n'a aucun point de césure naturel : elle
   mesure 373 px dans une colonne de 318 et pousse toute la page hors
   de l'écran sur téléphone. `anywhere` autorise la coupure ET réduit
   la largeur mini de la piste de grille, ce que `break-word` ne fait
   pas. Le défaut existe aussi sur le dossier en ligne. */
.fiche-ligne .v,
.copiable .c-txt{ overflow-wrap: anywhere; }

/* Citation. Le guillemet est décoratif et hors flux : il ne doit pas
   être lu par une synthèse vocale ni décaler le texte. */
.citation{
  position: relative;
  margin: 34px 0 0;
  padding: clamp(26px, 3vw, 38px) clamp(26px, 3vw, 42px);
  border-left: 3px solid var(--p-or);
  background: var(--p-papier-hi);
}
.citation::before{
  content: '«';
  position: absolute;
  top: 4px; left: 14px;
  font-family: 'Cinzel', serif;
  font-size: 70px;
  line-height: 1;
  color: var(--p-or);
  opacity: .32;
  pointer-events: none;
}
.citation p{
  position: relative;
  margin: 0;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--p-encre);
}
/* `<footer>` est la balise prévue pour la source d'une citation, mais
   la règle du pied de page vise l'élément : sans neutralisation
   l'attribution hériterait de son fond et de ses marges. */
.citation footer{
  padding: 0;
  border-top: 0;
  background: none;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-or);
}

/* Avertissement de brouillon : doit rester impossible à confondre
   avec du contenu validé, y compris imprimé en noir et blanc — d'où
   les hachures. */
.brouillon{
  margin: 36px 0;
  padding: 20px clamp(18px, 2.4vw, 28px);
  border: 2px dashed #A9530F;
  background: repeating-linear-gradient(
    -45deg,
    rgba(169, 83, 15, .1) 0 10px,
    transparent 10px 20px
  );
}
.brouillon b{
  display: block;
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8A430C;
}
.brouillon p{ margin: 0; font-size: 14.5px; color: var(--p-encre-2); }

/* Bloc prêt à copier : le service rendu au journaliste pressé. */
.copiable{
  position: relative;
  margin-top: 24px;
  padding: 24px clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--p-line-hi);
  background: var(--p-papier-hi);
}
.copiable .c-lab{
  display: block;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}
.copiable .c-txt{ margin: 0; color: var(--p-encre); font-size: 15.5px; line-height: 1.6; }
.copiable .c-txt + .c-txt{ margin-top: 1em; }
.copier{
  position: absolute;
  top: 15px; right: 15px;
  padding: 7px 14px;
  border: 1px solid var(--p-encre);
  background: transparent;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-encre);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.copier:hover, .copier[data-copie="oui"]{ background: var(--p-encre); color: var(--p-papier); }

/* Le calibre est calculé par le script : tant qu'il n'a pas tourné la
   marque reste vide et ne doit occuper aucune place. */
.copiable .c-signes{
  display: block;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}
.copiable .c-signes:empty{ display: none; }

.assets-grille{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.asset{
  display: block;
  border: 1px solid var(--p-line-hi);
  background: var(--p-papier-hi);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.asset:hover{
  border-color: var(--p-encre);
  box-shadow: 4px 4px 0 var(--p-or-vif);
  transform: translate(-2px, -2px);
}
.asset img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
/* Un logo ne se recadre pas : la vignette garde ses proportions mais
   la marque entre entièrement dedans. */
.asset-logo img{ object-fit: contain; padding: 16px; background: var(--p-papier-2); }
.asset .a-nom{ display: block; padding: 12px 15px 4px; font-size: 13.5px; font-weight: 600; color: var(--p-encre); }
.asset .a-meta{ display: block; padding: 0 15px 13px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-encre-3); }

@media (max-width: 860px){
  .somm-pistes{ grid-template-columns: 1fr; }
  .somm-liste{ columns: 1; }
  .fiche-ligne{ grid-template-columns: 1fr; gap: 4px; }
  .dossier-tete .d-maj{ text-align: left; }
}

/* ---------------------------------------------------------------
   18. APPEL FINAL ET PIED DE PAGE
   --------------------------------------------------------------- */

.finale{
  position: relative;
  text-align: center;
  padding-block: clamp(90px, 12vw, 160px);
  overflow: hidden;
}
.finale-halo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(680px 380px at 50% 40%, rgba(70, 237, 247, .1), transparent 68%);
}
[data-monde="studio"] .finale-halo{ background: none; }
.finale .wrap{ position: relative; z-index: 2; }
.finale .btn-row{ justify-content: center; margin-top: 36px; }

footer{
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 84px) 0 30px;
  border-top: 2px solid var(--p-encre);
  background: var(--p-papier-2);
  color: var(--p-encre);
}
.pied{
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 36px;
}
.pied-marque img{
  height: 64px;
  margin-bottom: 18px;
  filter: drop-shadow(0 1px 0 rgba(23, 19, 12, .3));
}
.pied-marque p{ max-width: 32ch; font-size: 14px; color: var(--p-encre-2); }
.pied-col h4{
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--p-encre-3);
}
.pied-col a{
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--p-encre-2);
  transition: color .2s;
}
.pied-col a:hover{ color: var(--p-or); }
.pied-bas{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--p-line-hi);
  font-size: 12.5px;
  color: var(--p-encre-3);
}

/* ---------------------------------------------------------------
   19. LIGHTBOX DU TRAILER
   --------------------------------------------------------------- */

.boite{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--gut);
  background: rgba(1, 6, 11, .95);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.boite[aria-hidden="false"]{ opacity: 1; visibility: visible; }
.boite video{
  width: min(1180px, 100%);
  max-height: 82svh;
  border-radius: 12px;
  border: 2px solid var(--n-cyan);
}
.boite-fermer{
  position: absolute;
  top: 22px; right: 22px;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: none;
  border: 2px solid var(--n-line-hi);
  border-radius: 12px;
  color: var(--n-text);
  font-size: 22px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.boite-fermer:hover{ border-color: var(--n-cyan); background: rgba(70, 237, 247, .14); }

/* ---------------------------------------------------------------
   20. APPARITION AU DÉFILEMENT
   ---------------------------------------------------------------
   Décalage plus court qu'en v1 (22 px → 16 px) et sans effet de
   ressort : sur un document imprimé, le contenu se pose, il ne
   rebondit pas.
   --------------------------------------------------------------- */

.parait{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.parait.vu{ opacity: 1; transform: none; }
.parait-2{ transition-delay: .09s; }
.parait-3{ transition-delay: .18s; }

/* ---------------------------------------------------------------
   21. ADAPTATIF
   --------------------------------------------------------------- */

@media (max-width: 1000px){
  .duo, .duo-large, .config{ grid-template-columns: 1fr; }
  .presse-bloc{ grid-template-columns: 1fr 1fr; }
  .pied{ grid-template-columns: 1fr 1fr; }
  .galerie{ grid-auto-rows: 170px; }
  .hero-couronne{ width: min(460px, 74vw); opacity: .12; }
}

/* Navigation : seuil propre à 900 px. La barre sature bien avant les
   grilles ; mélanger les deux seuils forcerait les grilles à
   s'effondrer trop tôt. */
@media (max-width: 900px){
  /* Ancré au bas réel de la barre (`top:100%`) : la barre pouvant
     passer sur deux rangées, sa hauteur varie. */
  .nav-liens{
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 14px var(--gut) 24px;
    background: var(--p-papier);
    border-bottom: 2px solid var(--p-encre);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .26s, transform .3s var(--ease), visibility .3s;
  }
  body.menu-ouvert .nav-liens{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav.en-jeu .nav-liens{ background: rgba(4, 7, 14, .98); border-bottom-color: var(--n-line); }
  .nav-liens a{ padding: 15px 0; font-size: 15px; border-bottom: 1px solid var(--p-line); }
  .nav.en-jeu .nav-liens a{ border-bottom-color: var(--n-line); }
  .nav-liens a::after{ display: none; }
  .burger{ display: flex; order: 3; }
  .nav-fin .btn{ display: none; }

  /* Rien n'est masqué, rien n'est dupliqué : la barre passe sur deux
     rangées, marque et burger en haut, réseaux et langues dessous. */
  .nav-in{ flex-wrap: wrap; row-gap: 4px; padding-bottom: 8px; gap: 10px; }
  .nav-logo{ order: 1; }
  .burger{ order: 2; margin-left: auto; }
  .nav-fin{ order: 3; width: 100%; justify-content: space-between; gap: 6px; }
  .nav-reseaux::after{ display: none; }
  .nav-reseaux a{ width: 38px; height: 38px; }
  .nav-reseaux svg{ width: 18px; height: 18px; }
  /* Cibles tactiles : le sélecteur de langue est le seul contrôle
     assez petit pour poser problème au doigt. */
  .langues a{ display: grid; place-items: center; min-width: 40px; min-height: 40px; }
}

/* Sur les écrans les plus étroits, la seconde rangée de la barre
   (quatre réseaux + quatre langues) demande 327 px pour 320 disponibles.
   Sept pixels, invisibles à l'œil, mais ils sortent le sélecteur de
   langue de la marge. On resserre juste assez, sans jamais descendre
   sous les 24 px de cible tactile exigés. */
@media (max-width: 400px){
  .nav-fin{ gap: 2px; }
  .nav-reseaux a{ width: 36px; }
  .langues a{ min-width: 36px; }
}

@media (max-width: 860px){
  body{ font-size: 16.5px; }
  .portes{ grid-template-columns: 1fr; }
  .porte{ border-right: 0; }
  .atouts{ grid-template-columns: 1fr; }
  .fondateurs{ grid-template-columns: 1fr; }
  .presse-bloc{ grid-template-columns: 1fr; }
  .jauges{ grid-template-columns: 1fr 1fr; }
  .mode{ grid-template-columns: 40px 1fr; gap: 14px; }
  .mode .m-desc{ grid-column: 2; text-align: left; margin-top: 6px; }
  .galerie{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .g-grand{ grid-column: span 2; grid-row: span 2; }
  .g-haut, .g-petit{ grid-column: span 1; grid-row: span 1; }
  .hero-ondes{ display: none; }
}

@media (max-width: 560px){
  .fondateur{ grid-template-columns: 1fr; }
  .fondateur img{ max-width: 210px; aspect-ratio: 1; }
  .conviction{ grid-template-columns: 1fr; gap: 8px; }
  .conviction:hover{ padding-left: 0; }
  .pied{ grid-template-columns: 1fr; }
  .hero-couronne{ width: 78vw; opacity: .1; }
  .hero h1{ max-width: none; }
}

/* ---------------------------------------------------------------
   22. MOUVEMENT RÉDUIT ET IMPRESSION
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .parait{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   IMPRESSION
   ---------------------------------------------------------------
   Le dossier de presse n'a pas de PDF séparé : cette feuille en tient
   lieu. Un journaliste fait Ctrl+P → « Enregistrer au format PDF » et
   obtient le document, toujours à jour.

   Bénéfice direct du passage au papier : le monde studio est DÉJÀ
   encre sur blanc à l'écran. Il n'y a plus de repeinte à faire, juste
   le monde du jeu à éclaircir, et de la pagination.
   --------------------------------------------------------------- */

@page{ size: A4; margin: 16mm 15mm 18mm; }

/* ---------------------------------------------------------------
   COMPOSANTS NÉS APRÈS LA MAQUETTE
   ---------------------------------------------------------------
   Écrits le 21 septembre 2026, donc après cette feuille. Sans eux,
   quatre blocs se seraient retrouvés nus au moment de la bascule.
   --------------------------------------------------------------- */

/* Le halo du hero. En v1 c'était une lueur dorée creusée dans du noir.
   Sur papier une lueur ne se voit pas — c'est l'ombre qui porte. Même
   rôle, creuser le centre, avec un lavis chaud très pâle. */
.hero-halo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px 520px at 50% 22%, rgba(124, 82, 15, .07), transparent 64%),
    radial-gradient(1000px 700px at 50% 118%, rgba(23, 19, 12, .05), transparent 60%);
}

/* Les taches de lavis du monde du jeu. Ce monde reste la nuit en v2 :
   le traitement de la v1 y est donc toujours juste, aux variables près.
   Cette feuille attendait un <svg> dans `.lavis` ; le site, lui, y met
   trois <span>. On style les deux. */
.lavis span{
  position: absolute;
  border-radius: 46% 54% 62% 38% / 51% 43% 57% 49%;
  filter: blur(58px);
  opacity: .3;
}
.lavis .l1{
  width: 46vw; height: 38vw;
  top: -8%; right: -10%;
  background: radial-gradient(circle, var(--n-cyan-2), transparent 68%);
}
.lavis .l2{
  width: 34vw; height: 30vw;
  bottom: 4%; left: -12%;
  background: radial-gradient(circle, var(--n-magenta), transparent 70%);
  opacity: .16;
}
.lavis .l3{
  width: 26vw; height: 24vw;
  top: 46%; left: 42%;
  background: radial-gradient(circle, var(--n-amber), transparent 72%);
  opacity: .12;
}

/* Le cadre du bandeau d'actualité côté studio — l'équivalent du `.hud`
   du monde du jeu. Le filet de gauche est en OR PROFOND : il trace sur
   le papier. L'or vif n'y toucherait que de l'encre, or il n'y en a
   pas ici. */
.cadre{
  position: relative;
  border: 1px solid var(--p-line);
  border-left: 3px solid var(--p-or);
  background: linear-gradient(100deg, rgba(124, 82, 15, .06), rgba(248, 242, 230, .72) 60%);
  transition: border-color .3s, background .3s;
}
.cadre:hover{
  border-color: var(--p-line-hi);
  background: linear-gradient(100deg, rgba(124, 82, 15, .11), rgba(248, 242, 230, .95) 60%);
}

/* Bande d'appel de fin de page : la porte du hero, dépliée sur toute la
   largeur. Règles de disposition seulement — la couleur, le filet et le
   volet au survol viennent de `.porte`. */
.portes-bande{
  max-width: none;
  margin-top: 0;
  grid-template-columns: 1fr;
}
.portes-bande .porte{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px clamp(20px, 3vw, 44px);
  padding: clamp(28px, 3.4vw, 40px) clamp(26px, 3.4vw, 44px);
  border-right: 0;
}
.portes-bande .p-lab  { grid-column: 1; grid-row: 1; margin-bottom: 4px; }
.portes-bande .p-titre{ grid-column: 1; grid-row: 2; font-size: clamp(22px, 2.5vw, 30px); }
.portes-bande .p-desc { grid-column: 1; grid-row: 3; max-width: 64ch; }
.portes-bande .p-fleche{
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  margin-top: 0;
  font-size: 26px;
}

@media (max-width: 620px){
  .portes-bande .porte{ grid-template-columns: 1fr; }
  .portes-bande .p-fleche{ grid-column: 1; grid-row: 4; align-self: start; margin-top: 12px; }
}

@media print{

  /* Seuls les jetons de la nuit ont besoin d'être retournés. */
  :root{
    --n-bg: #fff;  --n-bg-2: #fff;  --n-panel: #fff;
    --n-cyan: #0A5F6E;  --n-cyan-2: #0A5F6E;  --n-ink: #14110B;
    --n-magenta: #A3175A;  --n-amber: #8A5410;
    --n-text: #14110B;  --n-mist: #3A342A;  --n-mist-dim: #5C5445;
    --n-line: #C9D6DA;  --n-line-hi: #8FA5AC;

    --p-papier: #fff;  --p-papier-2: #fff;  --p-papier-hi: #fff;
    --fibre: none;
  }

  html, body{ background: #fff; color: #14110B; font-size: 10.5pt; line-height: 1.5; }

  /*  sur le body protege du defilement lateral a
     l ecran, mais il fait du body un conteneur de defilement — et
     Chrome cesse alors de PAGINER : tout le dossier sort sur une
     seule page, coupee net. La promesse « Ctrl+P produit un PDF mis
     en page » etait donc fausse. On rend le flux normal a l impression. */
  html, body{ overflow: visible !important; height: auto !important; }

  /* Les aplats qui portent du sens — le bandeau de brouillon d'abord —
     doivent survivre au réglage « ne pas imprimer les arrière-plans ». */
  *{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Ce qui n'a aucun sens sur papier. */
  .nav, .progres, .boite, .skip, .burger,
  .hero-bas, .hero-ondes, .hero-couronne, .finale-halo,
  .lavis, .bascule-video, .bascule-voile, .dechirure,
  .rail, .copier, .nav-reseaux, .langues,
  .monde::before{
    display: none !important;
  }

  /* Le script d'apparition ne tourne pas forcément avant l'impression :
     sans cela la moitié du document sortirait blanche. */
  .parait, .parait-2, .parait-3{ opacity: 1 !important; transform: none !important; }

  /* Les cadres animés deviennent de simples filets. */
  .grave::after, .hud::after{ display: none; }
  .grave, .hud, .presse-carte, .conviction, .salon-prochain, .sommaire,
  .copiable, .citation, .asset{
    background: #fff !important;
    box-shadow: none !important;
    border-color: #C9C0AC !important;
    transform: none !important;
  }

  /* Les tailles fluides sont indexées sur la largeur de fenêtre : en
     impression elles partiraient à la dérive. On les fige. */
  .t-mega, .t-hero, .t-xl{ font-size: 26pt; }
  .t-lg{ font-size: 17pt; }
  .t-md{ font-size: 13pt; }
  .lead{ font-size: 11.5pt; max-width: none; }
  .prose{ max-width: none; }
  .section{ padding-block: 0 18pt; }
  .wrap{ max-width: none; padding-inline: 0; }
  .marge-num{ color: #8A6A1E; font-size: 16pt; }
  .a-marge > .marge-num{ position: static; display: block; margin-bottom: 6pt; }

  /* Pagination : un titre ne reste jamais seul en bas de page, et
     aucun bloc de fait, de citation ou de salon n'est coupé en deux. */
  h1, h2, h3, h4, .eyebrow{ break-after: avoid; page-break-after: avoid; }
  .conviction, .salon, .fiche-ligne, .citation, .atout,
  .fondateur, .mode, .copiable, .brouillon, .asset, figure{
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .page-neuve{ break-before: page; page-break-before: always; }

  /* Les liens perdent leur cible sur papier : on la restitue. Sauf
     ceux dont le texte EST déjà l'adresse, qui seraient écrits deux
     fois. */
  main a[href^="http"]::after{
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #5C5445;
    word-break: break-all;
  }
  main a[href^="mailto"]::after,
  main a.copier::after,
  main .somm-liste a::after,
  main .somm-piste::after,
  main .asset::after,
  main .fiche a::after,
  main a[data-sans-url]::after{ content: ""; }

  /* Grilles resserrées pour l'A4. */
  .convictions, .atouts, .presse-bloc, .fondateurs{ grid-template-columns: 1fr 1fr; gap: 12pt; }
  .somm-pistes{ grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  .assets-grille{ grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  .galerie{ break-inside: avoid; }

  footer{ border-top: 1px solid #C9C0AC; padding-top: 10pt; background: #fff; }
  .pied-col, .pied-bas small:last-child{ display: none; }
  .pied{ grid-template-columns: 1fr; }
}