/* =====================================================================
   ReyDio Games — système de design « Deux mondes »
   ---------------------------------------------------------------------
   Deux registres visuels, dérivés des deux identités réelles du studio :

   · MONDE STUDIO      or, capitales romaines, encre chaude.
                       Tiré du logo ReyDio : couronne, ondes, Trajan.
                       Public : presse, éditeurs, partenaires.

   · MONDE SYNTHOPOLIS cyan, aquarelle et contour d'encre.
                       Tiré de la direction artistique du jeu :
                       lavis peints, contours noirs, HUD arrondi
                       à liseré pointillé.
                       Public : joueurs.

   La bascule entre les deux mondes est le moment signature du site.
   ===================================================================== */

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

:root{
  /* — Monde studio : or et encre chaude — */
  --s-bg:        #0C0A07;
  --s-bg-2:      #131009;
  --s-panel:     #1A150D;
  --s-gold:      #D4A63C;
  --s-gold-lt:   #F0D48A;
  --s-gold-dk:   #8A6A1E;
  --s-text:      #F4EFE4;
  --s-mist:      #B7AB92;
  /* Éclairci pour tenir le seuil WCAG AA (4,5:1) sur le fond sombre. */
  --s-mist-dim:  #978B72;
  --s-line:      rgba(212,166,60,.18);
  --s-line-hi:   rgba(212,166,60,.38);

  /* — Monde Synthopolis : cyan, aquarelle, encre — */
  --g-bg:        #03101A;
  --g-bg-2:      #061B29;
  --g-panel:     #0A2231;
  --g-cyan:      #42E8F5;
  --g-cyan-2:    #17A8BE;
  --g-deep:      #052430;
  --g-magenta:   #FF3D8B;
  --g-amber:     #FFA23A;
  --g-text:      #E6F6FA;
  --g-mist:      #93B6C6;
  /* Idem côté froid. */
  --g-mist-dim:  #7BA0B2;
  --g-ink:       #010A11;
  --g-line:      rgba(66,232,245,.20);
  --g-line-hi:   rgba(66,232,245,.45);

  /* — Structure — */
  --maxw:        1180px;
  --maxw-narrow: 760px;
  --gut:         clamp(20px, 4vw, 32px);

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

  /* — Grain papier, commun aux deux mondes — */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Chaque monde redéfinit les variables neutres. Les composants ne
   connaissent que --bg, --fg, --accent… et changent donc d'apparence
   selon la section qui les contient, sans duplication de règles. */

[data-monde="studio"]{
  --bg: var(--s-bg); --bg-2: var(--s-bg-2); --panel: var(--s-panel);
  --fg: var(--s-text); --mist: var(--s-mist); --mist-dim: var(--s-mist-dim);
  --accent: var(--s-gold); --accent-lt: var(--s-gold-lt); --accent-dk: var(--s-gold-dk);
  --line: var(--s-line); --line-hi: var(--s-line-hi);
  --display: 'Cinzel', 'Times New Roman', serif;
  --radius: 2px;
}

[data-monde="jeu"]{
  --bg: var(--g-bg); --bg-2: var(--g-bg-2); --panel: var(--g-panel);
  --fg: var(--g-text); --mist: var(--g-mist); --mist-dim: var(--g-mist-dim);
  --accent: var(--g-cyan); --accent-lt: #8FF4FB; --accent-dk: var(--g-cyan-2);
  --line: var(--g-line); --line-hi: var(--g-line-hi);
  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --radius: 14px;
}

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

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* `height: auto` est indispensable, pas cosmétique.
   Les balises <img> portent des attributs width/height (nécessaires pour
   réserver la place et éviter les sauts de mise en page). Si le CSS ne
   règle que la largeur, l'attribut height continue de s'appliquer et
   l'image est écrasée. Cette ligne neutralise le piège pour toutes les
   images ; les cas qui ont réellement besoin d'une hauteur imposée la
   redéfinissent plus bas. */
img, video{ display: block; max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------
   RÈGLE DES IMAGES — jamais de déformation
   ---------------------------------------------------------------
   Deux traitements, selon la nature de l'image :

   · ILLUSTRATIONS ET PHOTOS  → `object-fit: cover`.
     Le cadre impose ses proportions, l'image est recadrée pour le
     remplir. On perd un peu des bords, jamais la géométrie.

   · LOGOS ET MARQUES         → `object-fit: contain`.
     L'image entre entièrement dans le cadre. Un logo partenaire
     rogné serait inacceptable, on préfère de l'espace autour.

   Toute image posée dans un cadre à proportions fixes DOIT recevoir
   l'un des deux. Sans cela, une grille en `align-items: stretch` ou
   un cadre plus étroit que prévu étire l'image.
   --------------------------------------------------------------- */

.img-couvre{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.img-contient{
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Illustrations encadrées : proportions réservées d'avance, donc aucun
   saut de mise en page au chargement, et recadrage plutôt qu'étirement
   si le cadre change de forme selon l'écran. */
figure img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}
.fig-keyart img{ aspect-ratio: 3 / 2; }   /* 1320 × 880 */
.fig-prix img  { aspect-ratio: 2 / 1; }   /* 1100 × 550 */

/* Logos : jamais rognés. Hauteur imposée, largeur libre. */
.p-grille img,
.nav-logo img,
.pied-marque img{
  width: auto;
  object-fit: contain;
}

/* Le sprite d'icônes ne doit occuper aucune place dans le flux. */
.sprite{
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

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

/* Cible de focus visible — obligatoire, jamais supprimée. */
:focus-visible{
  outline: 2px solid var(--accent, var(--s-gold));
  outline-offset: 3px;
  border-radius: 2px;
}

::selection{ background: var(--s-gold); color: var(--s-bg); }
[data-monde="jeu"] ::selection{ background: var(--g-cyan); color: var(--g-ink); }

/* Lien d'évitement pour la navigation au clavier. */
.skip{
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 300;
  background: var(--s-gold); color: var(--s-bg);
  padding: 12px 22px; font-weight: 600;
  transition: transform .2s var(--ease);
}
.skip:focus{ transform: translate(-50%, 0); }

/* ---------------------------------------------------------------
   3. STRUCTURE
   --------------------------------------------------------------- */

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

/* Le grain de papier : commun aux deux mondes, c'est le fil
   conducteur qui les relie malgré leur opposition chromatique. */
.monde::before{
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .035;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
[data-monde="jeu"].monde::before{ opacity: .05; }

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

.section{
  position: relative;
  z-index: 2;
  padding-block: clamp(72px, 10vw, 140px);
}
.section-tight{ padding-block: clamp(48px, 6vw, 88px); }

/* ---------------------------------------------------------------
   4. TYPOGRAPHIE
   --------------------------------------------------------------- */

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow::before{
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .6;
}

.t-hero{
  font-size: clamp(42px, 7.4vw, 104px);
  letter-spacing: .02em;
}
.t-xl{ font-size: clamp(34px, 5.2vw, 68px); letter-spacing: .01em; }
.t-lg{ font-size: clamp(27px, 3.4vw, 44px); }
.t-md{ font-size: clamp(21px, 2.2vw, 28px); }

[data-monde="jeu"] .t-hero,
[data-monde="jeu"] .t-xl{ letter-spacing: -.015em; }

.lead{
  color: var(--mist);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.6;
  max-width: 58ch;
}
.prose{ color: var(--mist); max-width: 62ch; }
.prose p + p{ margin-top: 1.1em; }

/* Filet or : rupture éditoriale du monde studio. */
.rule{
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .45;
  margin-block: 30px;
  border: 0;
}

/* ---------------------------------------------------------------
   5. COMPOSANT SIGNATURE — LA PASTILLE HUD
   ---------------------------------------------------------------
   Reproduction directe de l'interface du jeu : rectangle arrondi,
   fond sombre translucide, contour cyan, et surtout le liseré
   pointillé en retrait. C'est ce détail qui fait le lien entre
   le site et l'écran de jeu.
   --------------------------------------------------------------- */

.hud{
  position: relative;
  border: 2px solid var(--g-cyan);
  border-radius: 14px;
  background: rgba(5, 26, 38, .68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.hud::after{
  content: '';
  position: absolute;
  inset: 5px;
  /* 2px pleins : en dessous, le pointillé disparaît à l'écran. */
  border: 2px dashed rgba(66, 232, 245, .42);
  border-radius: 8px;
  pointer-events: none;
  transition: inset .3s var(--ease), border-color .3s;
}
.hud:hover::after{ inset: 3px; border-color: rgba(66, 232, 245, .7); }

.hud-amber{ border-color: var(--g-amber); }
.hud-amber::after{ border-color: rgba(255, 162, 58, .45); }
.hud-magenta{ border-color: var(--g-magenta); }
.hud-magenta::after{ border-color: rgba(255, 61, 139, .45); }

/* Équivalent studio : pas de pointillé, un simple filet or doublé —
   le vocabulaire de la gravure plutôt que celui de l'écran. */
.grave{
  position: relative;
  border: 1px solid var(--s-line-hi);
  background: linear-gradient(160deg, var(--s-panel), rgba(12, 10, 7, .55));
}
.grave::after{
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(212, 166, 60, .13);
  pointer-events: none;
  transition: inset .3s var(--ease);
}
.grave:hover::after{ inset: 7px; }

/* ---------------------------------------------------------------
   6. BOUTONS
   --------------------------------------------------------------- */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 15px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .07em;
  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:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn .arw{ transition: transform .22s var(--ease); }
.btn:hover .arw{ transform: translateX(4px); }

/* Studio */
.btn-or{
  background: var(--s-gold);
  color: #171102;
}
.btn-or:hover{
  background: var(--s-gold-lt);
  box-shadow: 0 12px 34px -14px rgba(212, 166, 60, .8);
}
.btn-or-fant{
  border-color: var(--s-line-hi);
  color: var(--s-text);
}
.btn-or-fant:hover{
  border-color: var(--s-gold);
  color: var(--s-gold);
  background: rgba(212, 166, 60, .07);
}

/* Jeu — reprend la géométrie du HUD */
.btn-cyan{
  background: var(--g-cyan);
  color: #03181D;
  border-radius: 12px;
}
.btn-cyan:hover{
  background: #7BF0F9;
  box-shadow: 0 12px 34px -12px rgba(66, 232, 245, .75);
}
.btn-cyan-fant{
  border-color: var(--g-line-hi);
  color: var(--g-text);
  border-radius: 12px;
  background: rgba(5, 26, 38, .5);
}
.btn-cyan-fant:hover{
  border-color: var(--g-cyan);
  color: var(--g-cyan);
  background: rgba(66, 232, 245, .09);
}

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

/* ---------------------------------------------------------------
   7. NAVIGATION
   --------------------------------------------------------------- */

.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(12, 10, 7, .86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--s-line);
}
/* Dans le monde du jeu, la barre prend la teinte froide. */
.nav.en-jeu.colle{
  background: rgba(3, 16, 26, .86);
  border-bottom-color: var(--g-line);
}

/* `flex-wrap: wrap` n'est pas un détail : c'est ce qui rend la barre
   insensible à la langue. Le site existe en quatre langues et l'allemand
   produit des libellés nettement plus longs. Plutôt qu'un seuil codé en
   dur qui finit toujours par être franchi, la barre se replie d'elle-même
   sur une seconde rangée dès que le contenu ne tient plus — sans jamais
   rien couper ni masquer. */
.nav-in{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  row-gap: 6px;
  /* Volontairement plus large que la colonne de contenu (1180 px) : la
     barre doit loger marque, liens, réseaux, langues et bouton, ce qui
     demande davantage de place. Un en-tête plus large que le texte est
     un parti pris courant, et il évite de sacrifier un élément. */
  max-width: 1340px;
  margin-inline: auto;
  padding: 12px var(--gut);
}
.nav-logo{ display: flex; align-items: center; gap: 10px; }
.nav-logo img{ height: 36px; width: auto; object-fit: contain; }
.nav-logo span{
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-gold-lt);
}
.nav.en-jeu .nav-logo span{ color: var(--g-text); }

.nav-liens{
  display: flex;
  gap: 19px;
  margin-left: auto;
}
.nav-liens a{
  position: relative;
  padding: 5px 0;
  white-space: nowrap; /* un lien sur deux lignes déforme toute la barre */
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--s-mist);
  transition: color .2s;
}
.nav.en-jeu .nav-liens a{ color: var(--g-mist); }
.nav-liens a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--s-gold);
  transition: width .26s var(--ease);
}
.nav.en-jeu .nav-liens a::after{ background: var(--g-cyan); }
.nav-liens a:hover{ color: var(--s-text); }
.nav.en-jeu .nav-liens a:hover{ color: var(--g-text); }
.nav-liens a:hover::after{ width: 100%; }

/* Le site tient désormais sur trois pages : la barre doit dire laquelle
   est ouverte, sans quoi on ne sait plus où l'on se trouve. */
.nav-liens a[aria-current]{ color: var(--s-text); }
.nav-liens a[aria-current]::after{ width: 100%; }
.nav.en-jeu .nav-liens a[aria-current]{ color: var(--g-text); }

.nav-fin{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-fin .btn{ padding: 9px 14px; font-size: 12.5px; letter-spacing: .05em; }
.btn-ico{ width: 16px; height: 16px; fill: currentColor; flex: none; }

/* Réseaux sociaux dans la barre du haut. */
.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: 29px; height: 29px;
  border-radius: 7px;
  color: var(--s-mist-dim);
  transition: color .2s, background .2s, transform .2s var(--ease);
}
.nav-reseaux svg{ width: 16px; height: 16px; fill: currentColor; }
.nav-reseaux a:hover{
  color: var(--s-gold);
  background: rgba(212, 166, 60, .1);
  transform: translateY(-2px);
}
/* Dans le monde du jeu, les icônes basculent au cyan comme le reste. */
.nav.en-jeu .nav-reseaux a{ color: var(--g-mist-dim); }
.nav.en-jeu .nav-reseaux a:hover{ color: var(--g-cyan); background: rgba(66, 232, 245, .12); }

/* Filet de séparation entre les réseaux et le sélecteur de langue. */
.nav-reseaux::after{
  content: '';
  width: 1px; height: 17px;
  margin-left: 9px;
  background: var(--s-line-hi);
}
.nav.en-jeu .nav-reseaux::after{ background: var(--g-line-hi); }

.langues{ display: flex; gap: 2px; }
.langues a{
  padding: 5px 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s-mist-dim);
  border-radius: 3px;
  transition: color .2s, background .2s;
}
.langues a:hover{ color: var(--s-text); background: rgba(255, 255, 255, .07); }
.langues a[aria-current]{ color: var(--s-bg); background: var(--s-gold); }
.nav.en-jeu .langues a[aria-current]{ color: var(--g-ink); background: var(--g-cyan); }

.burger{
  display: none;
  width: 44px; height: 40px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--s-line-hi);
  color: inherit;
  cursor: pointer;
  border-radius: 3px;
}
.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); }

/* Barre de progression de lecture. */
.progres{
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px; width: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--s-gold), var(--g-cyan));
}

/* ---------------------------------------------------------------
   8. HERO — MONDE STUDIO
   ---------------------------------------------------------------
   Sobre, centré, monumental. Aucune vidéo : le studio se présente
   avant le jeu. La vidéo arrive plus bas, comme une récompense.
   --------------------------------------------------------------- */

.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding-block: 130px 70px;
}

/* Halo d'or : une seule source lumineuse, haute et centrale,
   comme l'éclairage d'un objet exposé. */
.hero-halo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(760px 520px at 50% 22%, rgba(212, 166, 60, .17), transparent 62%),
    radial-gradient(1000px 700px at 50% 120%, rgba(23, 168, 190, .07), transparent 60%);
}

/* Anneaux concentriques : l'écho du logo (les ondes « dio »). */
.hero-ondes{
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: min(1150px, 155vw);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
}
.hero-ondes span{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212, 166, 60, .14);
  border-radius: 50%;
  animation: onde 9s var(--ease-out) infinite;
}
.hero-ondes span:nth-child(2){ animation-delay: 3s; }
.hero-ondes span:nth-child(3){ animation-delay: 6s; }
@keyframes onde{
  0%   { scale: .32; opacity: 0; }
  18%  { opacity: .9; }
  100% { scale: 1;   opacity: 0; }
}

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

.hero-couronne{
  width: clamp(58px, 7vw, 82px);
  margin: 0 auto 26px;
  filter: drop-shadow(0 6px 26px rgba(212, 166, 60, .45));
}

.hero h1{
  font-size: clamp(38px, 6.6vw, 92px);
  letter-spacing: .06em;
  color: var(--s-gold-lt);
}
/* Le dégradé n'est appliqué que si le navigateur sait découper un fond
   sur du texte. Sans ce garde-fou, un navigateur non compatible
   afficherait un titre entièrement transparent, donc invisible. */
@supports (-webkit-background-clip: text) or (background-clip: text){
  .hero h1{
    background: linear-gradient(178deg, var(--s-gold-lt) 8%, var(--s-gold) 52%, var(--s-gold-dk) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.hero h1 em{
  display: block;
  font-style: normal;
  font-size: .24em;
  letter-spacing: .38em;
  margin-top: .8em;
  margin-left: .38em; /* compense le crénage de la dernière lettre espacée */
  -webkit-text-fill-color: var(--s-mist);
  color: var(--s-mist);
}

.hero-phrase{
  margin: 30px auto 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.55;
  color: var(--s-text);
}
.hero-phrase b{ color: var(--s-gold-lt); font-weight: 600; }

/* Les deux portes : c'est ici que les deux parcours se séparent. */
.portes{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 44px auto 0;
}
.porte{
  padding: 24px 22px;
  text-align: left;
  transition: transform .3s var(--ease), border-color .3s;
}
.porte:hover{ transform: translateY(-4px); border-color: var(--s-gold); }
.porte .p-lab{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--s-gold);
  margin-bottom: 9px;
}
.porte .p-titre{
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--s-text);
  margin-bottom: 5px;
}
.porte .p-desc{ font-size: 13.5px; line-height: 1.45; color: var(--s-mist-dim); }
.porte .p-fleche{
  display: inline-block;
  margin-top: 12px;
  color: var(--s-gold);
  transition: transform .25s var(--ease);
}
.porte:hover .p-fleche{ transform: translateX(5px); }

.hero-bas{
  position: absolute;
  left: 50%; bottom: 26px;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--s-mist-dim);
}
.hero-bas i{
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--s-gold), transparent);
  animation: filer 2.4s var(--ease) infinite;
}
@keyframes filer{
  0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

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

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

.convictions{
  display: grid;
  gap: 1px;
  margin-top: 46px;
  background: var(--s-line);
  border: 1px solid var(--s-line);
}
.conviction{
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  align-items: start;
  padding: 30px 26px;
  background: var(--s-bg);
  transition: background .3s;
}
.conviction:hover{ background: var(--s-bg-2); }
.conviction .c-no{
  font-family: 'Cinzel', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--s-gold-dk);
  line-height: 1;
}
.conviction h3{
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--s-text);
  margin-bottom: 7px;
}
.conviction p{ margin: 0; font-size: 15px; color: var(--s-mist); }

.fondateurs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 48px;
}
.fondateur{
  display: grid;
  grid-template-columns: 138px 1fr;
  gap: 22px;
  align-items: center;
  padding: 16px;
}
.fondateur img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(.32) contrast(1.05) sepia(.14);
  transition: filter .45s var(--ease);
}
.fondateur:hover img{ filter: grayscale(0) contrast(1) sepia(0); }
.fondateur .f-role{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-gold);
  margin-bottom: 6px;
}
.fondateur h3{
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--s-text);
}
.fondateur p{ margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--s-mist); }

/* ---------------------------------------------------------------
   10. LA BASCULE — studio ⟶ Synthopolis
   ---------------------------------------------------------------
   Le moment signature. Le fond chaud cède au froid, la vidéo prend
   tout l'écran, le wordmark du jeu se pose. C'est la seule rupture
   franche du site : elle doit se sentir.
   --------------------------------------------------------------- */

.bascule{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--g-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;
}
/* Dégradés : ils assurent la lisibilité du texte, fondent le haut
   vers le monde chaud qu'on quitte, et absorbent l'interface de jeu
   incrustée dans les coins de la capture. */
.bascule-voile{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      var(--s-bg) 0%,
      rgba(3, 16, 26, .82) 16%,
      rgba(3, 16, 26, .42) 42%,
      rgba(3, 16, 26, .74) 78%,
      var(--g-bg) 100%),
    radial-gradient(120% 80% at 50% 50%, transparent 34%, rgba(3, 16, 26, .72) 100%);
}
.bascule-in{
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 140px var(--gut) 90px;
}
/* Sur la page du jeu, le mot-symbole porte le <h1>. Le conteneur ne doit
   rien ajouter : toute la mise en page reste celle de l'image. */
.bascule-titre{
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.bascule-wordmark{
  display: block;
  width: min(560px, 78vw);
  margin: 0 auto 28px;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .7));
}
.bascule-phrase{
  max-width: 40ch;
  margin: 0 auto 34px;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: var(--g-text);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75);
}
.bascule-phrase b{ color: var(--g-cyan); font-weight: 600; }

.lire-trailer{
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 13px 24px 13px 15px;
  cursor: pointer;
  color: var(--g-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(5, 26, 38, .6);
  border: 2px solid var(--g-cyan);
  border-radius: 14px;
  transition: background .25s, transform .25s var(--ease);
}
.lire-trailer:hover{ background: rgba(66, 232, 245, .14); transform: translateY(-2px); }
.lire-trailer .play{
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g-cyan);
  color: var(--g-ink);
  flex: none;
}

/* Bandeau de chiffres, posé à cheval sur la bascule. */
.jauges{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--g-line);
  border-block: 1px solid var(--g-line);
}
.jauge{
  padding: 26px 18px;
  text-align: center;
  background: var(--g-bg);
}
.jauge .j-n{
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
  color: var(--g-cyan);
}
.jauge .j-l{
  margin-top: 9px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-mist-dim);
}

/* ---------------------------------------------------------------
   BANDEAU D'ACTUALITÉ
   ---------------------------------------------------------------
   Une seule ligne, dans le monde du jeu, juste après la vidéo.
   Sert à annoncer une mise à jour ou une sortie de contenu ; se
   supprime en retirant le bloc correspondant dans le HTML.
   --------------------------------------------------------------- */

.annonce{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: 16px 20px;
  transition: transform .3s var(--ease), background .3s;
}
.annonce:hover{ transform: translateY(-3px); background: rgba(66, 232, 245, .07); }

.an-neuf{
  flex: none;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--g-amber);
  color: #2A1602;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Une pulsation discrète, pour attirer l'œil sans le harceler. */
@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 rgba(255, 162, 58, .5); }
  55%      { box-shadow: 0 0 0 9px rgba(255, 162, 58, 0); }
}

.an-txt{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* autorise la troncature au lieu de pousser la ligne */
}
.an-txt strong{
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--g-text);
}
.an-txt span{ font-size: 14px; color: var(--g-mist); }

.an-date{
  flex: none;
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-mist-dim);
  white-space: nowrap;
}
.an-fleche{
  flex: none;
  color: var(--g-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; }
}

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

/* Lavis aquarelle : taches diffuses, jamais géométriques. */
.lavis{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.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(--g-cyan-2), transparent 68%);
}
.lavis .l2{
  width: 34vw; height: 30vw;
  bottom: 4%; left: -12%;
  background: radial-gradient(circle, var(--g-magenta), transparent 70%);
  opacity: .16;
}
.lavis .l3{
  width: 26vw; height: 24vw;
  top: 46%; left: 42%;
  background: radial-gradient(circle, var(--g-amber), transparent 72%);
  opacity: .12;
}

/* Cartes de caractéristiques — habillées en HUD. */
.atouts{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 46px;
}
.atout{
  padding: 30px 28px;
  transition: transform .3s var(--ease);
}
.atout:hover{ transform: translateY(-4px); }
.atout .a-ic{
  width: 40px; height: 40px;
  margin-bottom: 18px;
  color: var(--g-cyan);
}
.atout h3{
  font-family: 'Archivo Black', sans-serif;
  font-size: 19px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--g-text);
  margin-bottom: 9px;
}
.atout p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--g-mist); }
.atout .a-no{
  position: absolute;
  top: 22px; right: 24px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--g-mist-dim);
}

/* Modes de jeu — liste tendue, façon tableau de scores. */
.modes{
  margin-top: 44px;
  border-top: 1px solid var(--g-line);
}
.mode{
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 10px;
  border-bottom: 1px solid var(--g-line);
  transition: background .25s, padding-left .25s var(--ease);
}
.mode:hover{ background: rgba(66, 232, 245, .05); padding-left: 20px; }
.mode .m-no{
  font-size: 14px;
  font-weight: 600;
  color: var(--g-cyan);
  letter-spacing: .08em;
}
.mode .m-nom{
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(19px, 2.2vw, 26px);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--g-text);
}
.mode .m-desc{
  max-width: 44ch;
  font-size: 14.5px;
  color: var(--g-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: 190px;
  gap: 14px;
  margin-top: 46px;
}
.galerie a{
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--g-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, 10, 17, .58));
  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, 48px);
  border-radius: 16px;
}
.config-liste{ display: flex; flex-direction: column; }
.config-ligne{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--g-line);
  font-size: 15px;
}
.config-ligne:last-child{ border-bottom: 0; }
.config-ligne .k{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g-mist-dim);
}
.config-ligne .v{ color: var(--g-text); font-weight: 500; text-align: right; }

/* ---------------------------------------------------------------
   12. QUESTIONS FRÉQUENTES
   ---------------------------------------------------------------
   Section utile aux joueurs, et seule partie du site capable de
   capter les recherches longue traîne (« synthopolis est-il
   gratuit », « configuration requise »…). Le balisage FAQPage
   l'accompagne dans le HTML.
   --------------------------------------------------------------- */

.faq{ margin-top: 44px; border-top: 1px solid var(--g-line); }
.faq details{
  border-bottom: 1px solid var(--g-line);
}
.faq summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 6px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 600;
  color: var(--g-text);
  transition: color .2s;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--g-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(--g-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 24px;
  max-width: 68ch;
  color: var(--g-mist);
  font-size: 15.5px;
}
.faq details > div a{ color: var(--g-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   13. ESPACE PRESSE — retour au monde studio
   --------------------------------------------------------------- */

.presse-bloc{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.presse-carte{
  padding: 28px 26px;
  transition: transform .3s var(--ease), border-color .3s;
}
.presse-carte:hover{ transform: translateY(-4px); border-color: var(--s-gold); }
.presse-carte h3{
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--s-text);
  margin-bottom: 9px;
}
.presse-carte p{ margin: 0 0 16px; font-size: 14.5px; color: var(--s-mist); }
.presse-carte a.lien{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s-gold);
}
.presse-carte a.lien:hover{ color: var(--s-gold-lt); }

/* ---------------------------------------------------------------
   FRISE DES SALONS
   ---------------------------------------------------------------
   Le parcours du studio en salons, du plus récent au plus ancien.
   Pour un éditeur ou un journaliste, c'est la preuve la plus directe
   qu'un studio existe vraiment : il se déplace, il montre son jeu.
   Le salon à venir est mis en avant, les précédents restent lisibles
   mais en retrait.
   --------------------------------------------------------------- */

.salons{
  position: relative;
  margin-top: 40px;
  padding-left: clamp(0px, 2vw, 18px);
}

.salon{
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--s-line);
}
.salon:last-child{ border-bottom: 0; }

.s-date{ text-align: right; }
.s-j{
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--s-gold-dk);
}
/* Le tiret d'une plage de dates : allégé, pour que les deux nombres
   restent lisibles comme deux repères distincts. */
.s-j span{
  padding-inline: .1em;
  font-size: .66em;
  vertical-align: .14em;
  opacity: .75;
}
.s-m{
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-mist-dim);
}

.s-txt h3{
  font-family: 'Cinzel', serif;
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 600;
  color: var(--s-text);
  margin-bottom: 7px;
}
.s-txt p{ margin: 0; color: var(--s-mist); font-size: 14.5px; line-height: 1.55; }
.s-txt p b{ color: var(--s-gold-lt); font-weight: 600; }

.s-statut{
  display: inline-block;
  margin-bottom: 9px;
  padding: 4px 10px;
  border: 1px solid var(--s-line-hi);
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-mist-dim);
}

/* Le salon à venir : encadré, doré, détaché du reste. */
.salon-prochain{
  padding: clamp(22px, 3vw, 32px);
  margin-bottom: 12px;
  border-bottom: 0;
  border: 1px solid var(--s-line-hi);
  background: linear-gradient(150deg, var(--s-panel), rgba(12, 10, 7, .45));
}
.salon-prochain .s-j{ color: var(--s-gold); font-size: clamp(24px, 2.6vw, 31px); }
.salon-prochain .s-statut{
  border-color: var(--s-gold);
  background: var(--s-gold);
  color: #171102;
}
.salon-prochain .s-txt h3{ font-size: clamp(21px, 2.4vw, 27px); }
.salon-prochain .s-txt p{ color: var(--s-text); font-size: 15px; }

/* Emplacement exact sur le salon : l'information qu'un professionnel
   cherche en premier une fois sur place. */
.s-stand{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: 12px;
  padding: 7px 13px;
  border: 1px dashed var(--s-line-hi);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--s-gold-lt);
}

@media (max-width: 620px){
  .salons{ padding-left: 0; }
  .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; }
}

/* Reconnaissance et partenaires. */
.partenaires{ margin-top: 56px; }
.partenaires .p-lab{
  margin-bottom: 24px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--s-mist-dim);
}
.p-grille{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.p-grille img{
  height: 38px;
  width: auto;
  opacity: .55;
  filter: grayscale(1) brightness(1.7);
  transition: opacity .3s, filter .3s;
}
.p-grille a:hover img, .p-grille img:hover{ opacity: 1; filter: grayscale(0) brightness(1); }

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

.finale{
  position: relative;
  text-align: center;
  padding-block: clamp(84px, 12vw, 150px);
  overflow: hidden;
}
.finale-halo{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(620px 340px at 50% 34%, rgba(212, 166, 60, .16), transparent 66%);
}
.finale .wrap{ position: relative; z-index: 2; }
.finale .btn-row{ justify-content: center; margin-top: 34px; }

footer{
  position: relative;
  z-index: 2;
  padding: 62px 0 28px;
  border-top: 1px solid var(--s-line);
  background: var(--s-bg-2);
}
.pied{
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 34px;
}
.pied-marque img{ height: 62px; margin-bottom: 16px; }
.pied-marque p{ max-width: 32ch; font-size: 14px; color: var(--s-mist); }
.pied-col h4{
  margin: 0 0 15px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--s-mist-dim);
}
.pied-col a{
  display: block;
  padding: 5px 0;
  font-size: 14.5px;
  color: var(--s-mist);
  transition: color .2s;
}
.pied-col a:hover{ color: var(--s-gold); }
.pied-bas{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--s-line);
  font-size: 12.5px;
  color: var(--s-mist-dim);
}

/* ---------------------------------------------------------------
   15. LIGHTBOX DU TRAILER
   --------------------------------------------------------------- */

.boite{
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--gut);
  background: rgba(1, 8, 14, .93);
  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(--g-cyan);
}
.boite-fermer{
  position: absolute;
  top: 22px; right: 22px;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: none;
  border: 2px solid var(--g-line-hi);
  border-radius: 12px;
  color: var(--g-text);
  font-size: 22px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.boite-fermer:hover{ border-color: var(--g-cyan); background: rgba(66, 232, 245, .12); }

/* ---------------------------------------------------------------
   16. APPARITION AU DÉFILEMENT
   --------------------------------------------------------------- */

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

/* ---------------------------------------------------------------
   17. 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: 160px; }
}

/* ---------------------------------------------------------------
   NAVIGATION ADAPTATIVE — seuil propre, à 1080 px
   ---------------------------------------------------------------
   La barre doit loger : la marque, cinq liens, quatre icônes de
   réseaux, quatre langues et le bouton Steam. En dessous de 1080 px
   l'ensemble ne tient plus sur une ligne — les liens passent sur deux
   lignes et la partie droite sort de l'écran.

   Ce seuil est volontairement séparé de celui des grilles (860 px) :
   la navigation sature bien avant le contenu, et les mélanger
   forcerait les grilles à s'effondrer trop tôt.
   --------------------------------------------------------------- */

/* En dessous de 900 px, cinq liens sur une rangée deviennent illisibles :
   on bascule alors sur le menu burger. Entre 900 et 1180 px, c'est le
   repli automatique ci-dessus qui s'en charge, sans seuil. */
@media (max-width: 900px){
  /* Ancré au bas réel de la barre (`top: 100%`) plutôt qu'à une hauteur
     codée en dur : la barre passant 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: rgba(12, 10, 7, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--s-line);
    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(3, 16, 26, .97); border-bottom-color: var(--g-line); }
  .nav-liens a{ padding: 14px 0; font-size: 15px; border-bottom: 1px solid var(--s-line); }
  .nav-liens a::after{ display: none; }
  .burger{ display: flex; order: 3; }
  .nav-fin .btn{ display: none; }

  /* Plutôt que de cacher les réseaux ou les langues, la barre passe sur
     deux rangées : marque et burger en haut, réseaux et langues en
     dessous. Rien n'est masqué, rien n'est dupliqué. */
  .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 confortables : le sélecteur de langue est le
     seul contrôle autonome assez petit pour poser problème au doigt. */
  .langues a{
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
  }
}

/* ---------------------------------------------------------------
   GRILLES — seuil à 860 px
   --------------------------------------------------------------- */

@media (max-width: 860px){
  body{ font-size: 16px; }

  .portes{ grid-template-columns: 1fr; max-width: 420px; }
  .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; }

  .evenement .e-date{
    padding-right: 0;
    border-right: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--s-line-hi);
    width: 100%;
  }
}

@media (max-width: 560px){
  .fondateur{ grid-template-columns: 1fr; text-align: center; }
  .fondateur img{ max-width: 190px; margin-inline: auto; aspect-ratio: 1; }
  .conviction{ grid-template-columns: 1fr; gap: 10px; }
  .pied{ grid-template-columns: 1fr; }
  .hero-couronne{ width: 54px; }
}

/* ---------------------------------------------------------------
   18. MOUVEMENT RÉDUIT ET IMPRESSION
   ---------------------------------------------------------------
   Respect strict de la préférence système : aucune animation
   décorative, aucune vidéo en lecture automatique.
   --------------------------------------------------------------- */

@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; }
}

@media print{
  .nav, .progres, .boite, .hero-bas, .lavis, .hero-ondes{ display: none; }
  body{ background: #fff; color: #111; }
  .monde{ background: #fff; color: #111; }
}