/* ==== Fonts (Google) ==== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ==== Global ==== */
* { box-sizing: border-box; scroll-behavior: smooth; }
html, body { height: 100%; background-color: #000; }

body {
  margin: 0;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  color: #0c49f5; /* bleu électrique profond */
  position: relative;
  background:
    url("backgrounds/chapter1_bg_main.gif") center/cover no-repeat,
    linear-gradient(0deg, #000010 50%, #0018ff 60%);
  background-attachment: scroll;
  padding-bottom: 40px;
}
@media (min-width: 768px) { body { background-attachment: fixed; min-height: 100vh; } }

/* ==== Aura + fondu haut/bas ==== */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%) bottom/100% 4vh no-repeat,
    linear-gradient(to top, rgba(0,0,0,0) 0%, #000 100%) top/100% 13vh no-repeat,
    radial-gradient(circle at 20% 20%, rgba(0,80,255,0.20), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(0,160,255,0.15), transparent 60%);
  animation: float 10s ease-in-out infinite alternate;
}
@keyframes float { from { transform: translateY(0); } to { transform: translateY(20px); } }

/* ==== Liens / images ==== */
a {
  color:#1f5fff;
  text-decoration:none;
  border-bottom:1px dashed #1f5fff;
  transition:color .2s,text-shadow .2s,border-bottom-color .2s;
}
a:hover,a:focus-visible {
  color:#fff;
  border-bottom-color:#fff;
  text-shadow:0 0 8px #4a7fff;
  outline:none;
}
img { display:block; max-width:100%; height:auto; }

/* ==== Header ==== */
.site-header { max-width:1200px; margin:24px auto 8px; padding:0 16px; text-align:center; position:relative; z-index:1; }
.logo { width:clamp(160px,30vw,340px); margin:0 auto 12px; image-rendering:pixelated; }
.top-nav { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.btn-image img { height:34px; filter:drop-shadow(0 0 6px #1f5fff); transition:transform .2s,filter .2s; border-bottom:none; }
.btn-image:hover img { transform:translateY(-2px) scale(1.03); filter:drop-shadow(0 0 12px #4a7fff); }

/* ==== Layout 3 colonnes ==== */
.layout { display:grid; grid-template-columns:84px 1fr 84px; gap:8px; max-width:1200px; margin:0 auto 40px; padding:0 8px; position:relative; z-index:1; }
@media (max-width:980px) { .layout { grid-template-columns:1fr; } .side-left,.side-right { display:flex; gap:12px; justify-content:center; } }

/* ==== Sidebars ==== */
.side-left,.side-right { display:grid; gap:12px; align-content:start; padding-top:16px; }
.side-bubble,.side-pill {
  display:grid; place-items:center; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 12px rgba(0,100,255,.20);
  color:#b7c9ff;
  border-bottom:none; padding:10px 8px; text-align:center; font-size:12px;
  transition:transform .15s, box-shadow .15s;
}
.side-bubble { border-radius:999px; }
.side-pill { border-radius:14px; }
.side-bubble:hover,.side-pill:hover { transform:translateY(-2px); box-shadow:0 0 18px rgba(0,120,255,.30); }

/* ==== Colonne centre ==== */
.content { display:grid; gap:28px; }

/* ==== Bande JPG + LOG / HOW TO ==== */

/* espace au-dessus du ribbon */
.ribbon {
  margin-top: 18px; /* ← ajuste à ton goût : 20–40px selon rendu */
}

.ribbon {
  background:url("img/ribbon_bg.jpg") center/cover no-repeat;
  border-radius:22px; padding:clamp(10px,3vw,18px);
  border:5px solid rgb(252, 8, 8);
  box-shadow:0 0 16px rgba(0,100,255,.15);
}
.ribbon-inner {
  background:url("textures/texture_loop.gif") center/cover;
  border-radius:42px; padding:clamp(12px,4vw,24px);
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  
}
.card-puck {
  display:grid; place-items:center; width:clamp(120px,25vw,200px); height:clamp(80px,16vw,120px);
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); border-radius:18px;
  color:#b7c9ff; font-weight:600; letter-spacing:.5px; box-shadow:0 0 14px rgba(0,100,255,.20);
  border-bottom:none; transition:transform .2s, box-shadow .2s, filter .2s;
}
.card-puck:hover { transform:scale(1.04) rotate(.5deg); box-shadow:0 0 20px rgba(0,150,255,.30); filter:drop-shadow(0 0 8px #4a7fff); }

/* ==== Bloc décor + Situations + separator + U-frame ==== */
.situations-wrap {
  display:grid;
  grid-template-columns:80px 1fr 80px;
  grid-template-rows:auto auto auto;
  gap:10px; align-items:stretch; position:relative;
}
.situations-wrap > .doors        { grid-column:2; grid-row:1; }
.situations-wrap > .mid-separator{ grid-column:2; grid-row:2; }

/* place .two-cards dans la 2e colonne / 3e rangée du wrap */
.situations-wrap > .two-cards{
  grid-column: 2;
  grid-row: 3;
}

/* Décors verticaux */
.decor-vert { width:100%; height:100%; object-fit:cover; align-self:stretch; }
.decor-vert.left  { grid-column:1; grid-row:1 / span 3; }
.decor-vert.right { grid-column:3; grid-row:1 / span 3; }
@media (max-width:980px) { .situations-wrap { grid-template-columns:1fr; } .decor-vert { display:none; } }

/* === Mobile (<= 980px) : remettre les enfants sur la colonne 1 === */
@media (max-width: 980px){
  .situations-wrap > .doors,
  .situations-wrap > .mid-separator,
  .situations-wrap > .two-cards {
    grid-column: 1;        /* ← plus de référence à la colonne 2 */
    justify-self: stretch; /* occupe toute la largeur dispo */
  }
}

/* ==== Situations ==== */
.doors { padding:10px 0 0; position:relative; z-index:1; }
.doors-title { margin-bottom:16px; text-align:center; font-size: 25px; text-transform: uppercase; width:100%; color:#ff0000; }

/* Empêche un micro-décalage horizontal dans le wrap */
.situations-wrap { justify-items: stretch; }
.situations-wrap > * { max-width: 100%; margin-inline: 0; }


.doors-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); justify-items:center; margin:0 auto; width:100%; max-width:1100px; }
@media (max-width:760px) { .doors-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .doors-grid { grid-template-columns:1fr; } }
.door { width:100%; max-width:260px; display:grid; grid-template-rows:180px auto; justify-items:center; gap:8px; text-decoration:none; border-bottom:none; }
.door img { max-width:100%; max-height:100%; width:auto; height:auto; align-self:center; justify-self:center; image-rendering:pixelated; filter:drop-shadow(0 0 10px #fff); transition:transform .25s, filter .25s, box-shadow .25s; }
.door span { color:#b7c9ff; font-size:14px; border-bottom:none; }
.door:hover img { transform:rotate(4deg) scale(1.06); filter:drop-shadow(0 0 14px #4a7fff); box-shadow:0 0 18px rgba(0,120,255,.25); }

/* ==== Separator horizontal (entre doors et u-frame) ==== */
.mid-separator {
  display:block;
  grid-column:2;
  justify-self:stretch;
  margin:16px 0 12px;
  width:100%;
  height:auto;
  border-radius:8px;
  border:5px solid rgb(255, 0, 0);
  box-shadow:0 0 16px rgba(255,255,255,0.18);
  opacity:0.96;
  background:url("img/mid_separator.jpg") center/cover no-repeat;
}



.card-link { width:clamp(220px,40vw,360px); display:grid; gap:8px; justify-items:center; text-align:center; border-bottom:none; }
.card-link img { width:100%; border-radius:20px; border:1px solid rgba(255,255,255,.15); box-shadow:0 0 16px rgba(0,100,255,.20); transition:transform .25s, box-shadow .25s, filter .25s; }
.card-link span { color:#b7c9ff; font-size:14px; opacity:.9; }
.card-link:hover img { transform:scale(1.03); box-shadow:0 0 22px rgba(0,120,255,.30); filter:drop-shadow(0 0 10px #4a7fff); }

/* ==== Bottom nav ==== */
.bottom-nav { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding:12px 0 24px; }
.bottom-nav .btn-image img { height:32px; filter:drop-shadow(0 0 6px #1f5fff); }

/* ==== HALOS PULSANTS COMPACTS ROUGE ÉLECTRIQUE ==== */
@keyframes pulseShadowRedTight {
  0%   { box-shadow:0 0 14px rgba(255,0,60,0.9),0 0 28px rgba(255,0,60,0.55); }
  50%  { box-shadow:0 0 24px rgba(255,0,80,1),0 0 48px rgba(255,0,80,0.75); }
  100% { box-shadow:0 0 14px rgba(255,0,60,0.9),0 0 28px rgba(255,0,60,0.55); }
}

/* Tous les side buttons : halo rouge pulsant */
.side-left a, .side-right a {
  animation:pulseShadowRedTight 3.2s ease-in-out infinite;
  will-change:box-shadow;
  transform:translateZ(0);
}
.side-left a:hover, .side-right a:hover {
  animation-duration:2.6s;
  box-shadow:0 0 26px rgba(255,0,80,1),0 0 52px rgba(255,0,80,0.8);
}
/* Bouton Error : rouge aussi */
.side-right a[href*="error"] {
  animation:pulseShadowRedTight 3s ease-in-out infinite;
  border-color:rgba(255,0,60,0.45);
  color:#ffd6e0;
}
.side-right a[href*="error"]:hover {
  animation-duration:2.5s;
  box-shadow:0 0 30px rgba(255,0,80,1),0 0 60px rgba(255,0,100,0.85);
}

/* ==== Reduce motion ==== */
@media (prefers-reduced-motion: reduce) {
  .side-left a, .side-right a, a:hover, a:focus-visible, body::before,
  .card-puck, .door img, .card-link img { transition:none; transform:none; animation:none; }
}
.top-scroller{
  overflow:hidden;
  /* Optionnel: padding/mask pour fondre les bords */
  /* padding: 4px 0; */
}

.top-scroller .track{
  display:inline-flex;
  gap:16px;                 /* espace entre boutons */
  align-items:center;
  animation: topMarquee 5s linear infinite;  /* vitesse ici */
  will-change: transform;
}

.top-scroller:hover .track{
  animation-play-state: paused;                /* pause au survol */
}

.top-scroller .track a{ flex:0 0 auto; }
.top-scroller .track img{
  display:block;
  height:50px;             /* hauteur des boutons */
}

/* La séquence est dupliquée → on translate 50% pour boucler parfaitement */
@keyframes topMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* ==== TEST EFFETS BOUTONS DU BAS ==== */

/* 🌀 Effet 1 : Flottement doux (style "lévitation") */
.bottom-buttons.float img {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

/* ✨ Effet 2 : Halo pulsant */
.bottom-buttons.pulse img {
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 3px #00f) brightness(1); }
  50% { filter: drop-shadow(0 0 12px #00f) brightness(1.2); }
}

/* ⚡ Effet 3 : Glitch léger */
.bottom-buttons.glitch img {
  animation: glitch 0.8s infinite;
}
@keyframes glitch {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 1px); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(-1px, -1px); }
}

/* 🔁 Effet 4 : Défilement latéral automatique (type bandeau) */
.bottom-buttons.scroll {
  display: flex;
  gap: 12px;
  overflow: hidden;
  white-space: nowrap;
}
.bottom-buttons.scroll img {
  animation: scrollButtons 22s linear infinite;
}
@keyframes scrollButtons {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.bottom-buttons.scroll:hover img {
  animation-play-state: paused; /* stop au survol */
}

/* 🧊 Effet 5 : Rotation lente (style hypnotique) */
.bottom-buttons.spin img {
  animation: spin 10s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==== FIN DES TESTS ==== */

/* ==== suppression des pointillés ou traits sous les boutons ==== */
.bottom-buttons a,
.bottom-buttons a img {
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}

.bottom-buttons a:hover,
.bottom-buttons a:focus,
.bottom-buttons a:active {
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ==== Enlever la bordure pointillée sous les boutons du haut ==== */
.top-nav a,
.top-nav a img,
.top-scroller a,
.top-scroller .track a,
.top-scroller .track img {
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Même au survol / focus */
.top-nav a:hover,
.top-nav a:focus,
.top-nav a:active,
.top-scroller a:hover,
.top-scroller a:focus,
.top-scroller a:active {
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
  /* garde l'effet de glow si tu veux, sinon commente la ligne suivante */
  text-shadow: 0 0 8px #4a7fff;
}


/* === MARQUEE PLEIN ÉCRAN — défilement horizontal sur toute la largeur === */
.site-header .top-scroller {
 
  overflow: hidden;
  position: relative;
  z-index: 3;
  padding: 6px 0;                       /* un peu d'air autour */
  box-sizing: border-box;
}

.top-scroller .track {
  display: inline-flex;
  gap: 16px;                            /* espace entre boutons */
  align-items: center;
  animation: topMarquee 4s linear infinite; /* vitesse du défilement */
  will-change: transform;
}

.top-scroller:hover .track {
  animation-play-state: paused;         /* pause au survol */
}

.top-scroller .track a {
  flex: 0 0 auto;
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}

.top-scroller .track img {
  display: block;
  height: 50px;
  border: none !important;
  outline: none !important;
}

/* boucle fluide (duplique les boutons dans ton HTML) */
@keyframes topMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Évite une barre de scroll horizontale */
html, body { overflow-x: hidden; }

.two-cards{
  display:grid;
  grid-template-columns:1fr minmax(58px,10vw) 1fr;
  gap:24px;
  align-items:stretch;
  justify-items:center;
  max-width:900px;
  margin:0 auto;
}
.two-cards .mid-divider{
  grid-column:2;
  justify-self:stretch;
  align-self:stretch;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:5px solid rgba(242, 11, 11, 0.91);
  box-shadow:0 0 16px rgba(255,255,255,0.25),
             inset 0 0 14px rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(2px);
}
@media (max-width:680px){
  .two-cards{ grid-template-columns:1fr; gap:18px; }
  .two-cards .mid-divider{ display:none; }
}
/* === Mobile hotfix (<= 680px) === */
@media (max-width: 680px){
  /* Titre bien centré */
  .doors-title{
    display:block;
    width:100%;
    margin: 0 auto 16px;
    text-align:center;
  }

  /* Grille situations propre en 2 colonnes */
  .doors-grid{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-items: center;
  }

  /* Cartes sous le séparateur (garde tes placeholders) */
  .card-link{ width: min(360px, 92vw); }

  /* On masque le divider vertical sur petit écran */
  .mid-divider{ display:none; }

  /* Un peu d’air autour des gros blocs */
  .ribbon, .mid-separator{ margin-left:8px; margin-right:8px; }

  /* Images des situations un peu plus petites si besoin */
  .door{ grid-template-rows: 140px auto; }
}



/* === MOBILE GUTTERS UNIFIÉS (<=680px) : garde la même marge des 2 côtés === */
@media (max-width: 680px){
  /* un seul endroit où on crée la gouttière */
  .situations-wrap { padding-left: 12px; padding-right: 12px; }

  /* on n'ajoute PAS de padding latéral ailleurs pour éviter les cumuls */
  .doors { padding: 10px 0 0; } /* haut ok, 0 sur les côtés */

  /* le séparateur prend l’espace restant entre les gouttières, pas collé au bord */
  .mid-separator {
    width: auto;                    /* ← pour que les margins s’appliquent visuellement */
    display: block;
    margin: 16px 0 12px;           /* pas de marge latérale ici, on s’appuie sur le padding parent */
    justify-self: stretch;         /* occupe la colonne */
  }

  /* les deux cartes suivent la même gouttière que le parent */
  .two-cards {
    padding: 0;                    /* pas de padding latéral supplémentaire */
    margin: 0;                     /* évite un recentrage parasite */
    width: 100%;
  }
}

/* === Mobile final (<=680px) : petite gouttière interne au wrap === */
@media (max-width: 680px){
  .situations-wrap{ 
    padding-inline: 8px;   /* petit espace à gauche/droite, symétrique */
  }
  .doors{
    padding: 10px 0 0;     /* on garde 0 à gauche/droite pour ne pas recréer de décalage */
    margin: 0;
  }
  .mid-separator{
    width: 100%;
    margin: 16px 0 12px;   /* pas de marge latérale, la gouttière est sur le wrap */
    justify-self: stretch;
  }
  .two-cards{
    margin: 0;             /* pas de marge latérale supplémentaire ici non plus */
    width: 100%;
    padding: 0;
  }
}

/* ==== Taille fixe pour les boutons du marquee (override) ==== */
.top-scroller .track img {
  display:block;
  height:31px;
  flex:0 0 88px;
  object-fit:contain;
  image-rendering:pixelated;
  border:none !important;
  outline:none !important;
}

/* Un peu moins d’espace entre boutons */
.top-scroller .track { gap: 10px; }

/* Défilement un poil plus lent pour une longue piste */
.top-scroller .track { animation: topMarquee 4s linear infinite; }

/* ==== Marquee précis sans "saut" ==== */
:root{
  --btn-w: 88px;      /* largeur fixe d’un bouton */
  --btn-h: 31px;      /* hauteur fixe d’un bouton */
  --gap: 10px;        /* espace entre boutons */
  --count: 22;        /* nb de boutons uniques dans la 1ère séquence */
  --loop: calc(var(--count) * var(--btn-w) + (var(--count) - 1) * var(--gap));
  --marquee-dur: 12s; /* vitesse, ajuste si tu veux */
}

/* taille stricte des bitmaps */
.top-scroller .track img{
  display:block;
  height: var(--btn-h);
  flex: 0 0 var(--btn-w);
  object-fit: contain;
  image-rendering: pixelated;
  border: none !important;
  outline: none !important;
}

/* même gap partout, basé sur la var */
.top-scroller .track{
  gap: var(--gap);
  animation: topMarquee var(--marquee-dur) linear infinite;
  will-change: transform;
}

/* on translate exactement d’UNE boucle (largeur de 22 boutons + 21 gaps) */
@keyframes topMarquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--loop))); }
}

/* === Marquee: cases fixes + pas de saut === */
:root{
  --btn-w: 88px;
  --btn-h: 31px;
  --gap: 10px;          /* mets la même valeur que le gap de la track */
  --count: 22;          /* nb d'items uniques */
  --loop: calc(var(--count)*var(--btn-w) + (var(--count) - 1)*var(--gap));
  --marquee-dur: 12s;
}

/* Chaque ANCRE = une case rigide de 88x31 */
.top-scroller .track a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-w);
  height: var(--btn-h);
  flex: 0 0 var(--btn-w);   /* largeur fixe dans la flex-row */
}

/* L’image remplit sa case sans la déformer */
.top-scroller .track img{
  height: 100%;
  object-fit: contain;      /* respecte le ratio si bitmaps variés */
  image-rendering: pixelated;
  border: none !important;
  outline: none !important;
}

/* Gap contrôlé + anim sur la distance exacte d’une boucle */
.top-scroller .track{
  gap: var(--gap);
  will-change: transform;
  animation: topMarquee var(--marquee-dur) linear infinite;
}

/* Utilise translate3d pour éviter l’arrondi subpixel */
@keyframes topMarquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--loop)),0,0); }
}

.top-scroller .track a img {
  transition: transform 1.7s ease, filter 0.3s ease;
}
.top-scroller .track a:hover img {
  transform: translateY(-5px) scale(1.1);
  filter: drop-shadow(0 0 5px #4a7fff);
}

/* === Porte : supprimer le cadre carré et garder le glow propre === */
.door img{
  image-rendering: pixelated;
  box-shadow: none !important;                 /* ← kill the square */
  filter: drop-shadow(0 0 8px rgba(255,255,255,.6));
  transition: transform .25s, filter .25s;
}

.door:hover img{
  box-shadow: none !important;                 /* ← kill the square (hover) */
  transform: rotate(4deg) scale(1.06);
  filter: drop-shadow(0 0 14px #4a7fff)
          drop-shadow(0 0 24px rgba(0,120,255,.35));
  
  
}

/* === Side buttons = même hauteur que le ribbon, plus grands === */
:root{
  /* knobs à tweaker rapidement */
  --ribbon-h: 220px;       /* hauteur visée pour le ribbon */
  --side-w: 108px;         /* largeur des colonnes latérales */
  --side-font: 14px;       /* taille texte des boutons */
  --side-gap: 12px;        /* écart vertical entre boutons */
}

/* ribbon prend la hauteur de référence */
.ribbon{
  min-height: var(--ribbon-h);
  display: grid;           /* garde le contenu centré proprement */
  place-items: center;
}

/* colonnes = largeur + même hauteur que le ribbon */
.layout{
  grid-template-columns: var(--side-w) 1fr var(--side-w);
}
.side-left,
.side-right{
  height: var(--ribbon-h);
  display: grid;
  gap: var(--side-gap);
  align-content: stretch;  /* remplit toute la hauteur */
}

/* chaque bouton s’étire pour remplir la pile (3 boutons = 3 parts égales) */
.side-left > a,
.side-right > a{
  height: 100%;            /* prend toute la “ligne” */
  padding: 14px 12px;      /* un peu plus d’épaisseur */
  font-size: var(--side-font);
  display: grid;
  place-items: center;     /* centre le label */
}

/* Mobile : on revient à la taille auto pour éviter des colonnes trop hautes */
@media (max-width: 980px){
  .side-left, .side-right{ height: auto; }
  .layout{ grid-template-columns: 1fr; }  /* déjà dans ton CSS, on réaffirme ici */
}
/* === Side buttons : même forme "pill" mais fond clair/transparent === */
.side-left a,
.side-right a {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);       /* plus clair, léger voile lumineux */
  border: 1px solid rgba(255, 255, 255, 0.2);  /* fine bordure blanche */
  color: #b7c9ff;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
  animation: pulseShadowRedTight 3.2s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255, 0, 60, 0.6);
}

.side-left a:hover,
.side-right a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.14);       /* s’éclaire au survol */
  box-shadow: 0 0 26px rgba(255, 0, 80, 1),
              0 0 52px rgba(255, 0, 80, 0.85);
}

/* Bouton Error : teinte rouge accentuée */
.side-right a[href*="error"] {
  color: #ffd6e0;
  border-color: rgba(255, 0, 60, 0.4);
  background: rgba(255, 0, 0, 0.12);           /* subtile nuance rouge à l’intérieur */
}

/* === Boutons latéraux : texte en majuscules + couleur personnalisée === */
.side-bubble,
.side-pill {
  text-transform: uppercase;        /* tout en majuscules */
  color: #ffffff;                   /* couleur du texte (blanc ici) */
  font-weight: 600;                 /* un peu plus épais */
  letter-spacing: 0.8px;            /* petit espacement pour respirer */
}
/* Boutons latéraux (Artists / About / Contact / Press / Credits / Error) */
.side-left a.side-bubble,
.side-left a.side-pill,
.side-right a.side-bubble,
.side-right a.side-pill{
  text-transform: uppercase !important;   /* MAJUSCULES */
  color: #ffffff !important;              /* Couleur du texte */
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Couleur au survol (optionnel) */
.side-left a.side-bubble:hover,
.side-left a.side-pill:hover,
.side-right a.side-bubble:hover,
.side-right a.side-pill:hover{
  color: #ff0000 !important;              /* bleu clair au hover */
  text-shadow: 0 0 6px rgba(79,140,255,.6);
}

/* === LOG + HOW TO : taille et couleur personnalisées === */
.ribbon-inner a[href*="log"],
.ribbon-inner a[href*="howto"] {
  font-size: 1.6rem;             /* ← taille du texte (augmente pour + gros) */
  font-weight: 700;              /* plus épais */
  letter-spacing: 1px;           /* espace entre lettres */
  color: #ffffff;                /* ← couleur du texte (vert néon ici) */
  text-transform: uppercase;     /* met en majuscules */
  text-shadow: 0 0 8px #ff0000;  /* halo lumineux */
  transition: transform 0.3s, text-shadow 0.3s, color 0.3s;
}

.ribbon-inner a[href*="log"]:hover,
.ribbon-inner a[href*="howto"]:hover {
  color: #9fc6ff;                /* ← couleur au survol */
  text-shadow: 0 0 10px #9fc6ff, 0 0 20px #4a7fff; /* halo bleu clair */
  transform: scale(1.08);        /* léger zoom */
}

/* === SITUATIONS : style du texte sous les portes === */
/* knobs rapides */
:root{
  --situ-label-size: 1rem;          /* taille texte par défaut */
  --situ-label-color: #ffffff;      /* couleur par défaut */
  --situ-label-hover: #ff0000;      /* couleur au survol */
  --situ-letter-space: 0.6px;       /* espacement lettres */
  --situ-shadow: 0 0 6px rgba(255, 0, 0, 0.45);        /* halo normal */
  --situ-shadow-hover: 0 0 10px rgba(255, 0, 0, 0.75); /* halo hover */
}

.doors .door span{
  font-size: var(--situ-label-size) !important;
  color: var(--situ-label-color) !important;
  text-transform: uppercase;
  letter-spacing: var(--situ-letter-space);
  text-shadow: var(--situ-shadow);
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}

.doors .door:hover span{
  color: var(--situ-label-hover) !important;
  text-shadow: var(--situ-shadow-hover);
  transform: translateY(-1px);
}


/* === CARTES BAS : “Global Map” & “IRL Portals” === */
:root{
  --card-label-size: 1.05rem;       /* taille du texte */
  --card-label-color: #ffffff;      /* couleur par défaut */
  --card-label-hover: #ff0000;      /* couleur au survol */
  --card-letter-space: 0.6px;
  --card-shadow: 0 0 6px rgba(255,255,255,.35);
  --card-shadow-hover: 0 0 10px rgba(255, 0, 0, 0.6);
}

.two-cards .card-link span{
  font-size: var(--card-label-size) !important;
  color: var(--card-label-color) !important;
  text-transform: uppercase;
  letter-spacing: var(--card-letter-space);
  text-shadow: var(--card-shadow);
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}

.two-cards .card-link:hover span{
  color: var(--card-label-hover) !important;
  text-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

/* Exemples d’override par carte (optionnel) */
.two-cards .card-link[href*="global_map.html"]  span { color:#ffcf6e !important; }
.two-cards .card-link[href*="irl_portals.html"] span { color:#ffcf6e !important; }


/*PAGE ARTISTS.HTML */


.frame-double {
  position: relative;
  border: 6px double rgba(255,255,255,0.35);
  border-radius: 16px;
  overflow: hidden; /* masque l’extérieur du cadre */
}

/* Ajoute une texture animée dans le cadre */
.frame-double::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 4px; /* épaisseur du cadre */
  background: url("textures/frame_loop.gif") center/cover;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* ==== HEADER ARTISTS : logo retour vers Chapter1 ==== */
.artists-header {
  width: 100%;
  text-align: center;
  margin: 24px 0 12px;
  position: relative;
  z-index: 10;
}

.artists-logo {
  width: clamp(140px, 25vw, 260px);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #1f5fff);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-link:hover .artists-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px #4a7fff);
}

/* PAGE CONTACT.HTML */
/* PAGE CONTACT — décale le bloc vers le bas */
.contact-wrap { 
  padding-top: 42px;          /* ← bouge tout le contenu, y compris le titre */
}

/* Et règle fin pour le titre uniquement ici */
.contact-wrap .doors-title {
  margin: 0 0 25px;           /* on gère juste l’espace sous le titre */
}

/* Optionnel : un peu moins sur mobile */
@media (max-width: 680px){
  .contact-wrap { padding-top: 28px; }
  .contact-wrap .doors-title { margin-bottom: 18px; }
}

/* === Marquee clean 88x31 === */
:root{
  --btn-w: 88px;
  --btn-h: 31px;
  --gap: 10px;
  --count: 22;  /* ← 21 items exacts */
  --loop: calc(var(--count)*var(--btn-w) + (var(--count) - 1)*var(--gap));
  --marquee-dur: 19s;
}

.top-scroller{
  overflow: hidden;
  position: relative;
  z-index: 10;
  padding: 6px 0;
  box-sizing: border-box;
}

.top-scroller .track{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  animation: topMarquee var(--marquee-dur) linear infinite;
}

.top-scroller .track a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  flex: 0 0 var(--btn-w);
  border: none;
  text-decoration: none;
}

.top-scroller .track img{
  height: var(--btn-h);
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border: none;
  outline: none;
  display: block;
}

@keyframes topMarquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--loop)),0,0); }
}

.top-scroller:hover .track{ animation-play-state: paused; }



@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 20px #1f5fff) brightness(1); }
  50% { filter: drop-shadow(0 0 25px #4a7fff) brightness(1.3); }
}

.decor-vert{
  width:100%;
  height:100%;
  object-fit: fill;     /* montre toute l’image */
  object-position: center;
  border-radius: 16px;
  background:#000;
  image-rendering: pixelated;
  box-shadow: 0 0 16px rgba(0,100,255,.25);
  border:4px solid rgba(255, 0, 0, 0.76);
}

/* === Marquee bas (défilement inverse) === */
.bottom-scroller {
  overflow: hidden;
  position: relative;
  z-index: 5;
  padding: 6px 0;
  box-sizing: border-box;
}

.bottom-scroller .track-reverse {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  animation: bottomMarquee var(--marquee-dur) linear infinite reverse;
}

.bottom-scroller .track-reverse a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  flex: 0 0 var(--btn-w);
  border: none;
  text-decoration: none;
}

.bottom-scroller .track-reverse img {
  height: var(--btn-h);
  image-rendering: pixelated;
  border: none;
  outline: none;
}

@keyframes bottomMarquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--loop)),0,0); }
}

.bottom-scroller:hover .track-reverse {
  animation-play-state: paused;
}
/* === HOTFIX centrage général === */
html, body {
  overflow-x: hidden;     /* empêche les débordements dus à 100vw */
}
/* plein écran géré par .full-bleed */
.full-bleed{
  width:100vw;
  position:relative;
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  overflow:hidden;
}

.top-scroller,.bottom-scroller{
  position:relative;
  overflow:hidden;
  z-index:10;
  padding:6px 0;
}

/* ===== DMDX: full-screen GIF loader ===== */
html.dmdx-lock { overflow: hidden; }   /* bloque le scroll pendant le loader */

#dmdx_loader{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: #000;                 /* fond noir derrière le gif */
  opacity: 1; transition: opacity .35s ease;
}
body.dmdx-loaded #dmdx_loader{ opacity: 0; pointer-events: none; }

#dmdx_loader_img{
  width: 100vw; height: 100vh;
  object-fit: cover; object-position: center;
  image-rendering: pixelated;       /* option rétro, enlève si tu veux */
}

@media (prefers-reduced-motion: reduce){
  body.dmdx-loaded #dmdx_loader{ transition: none; }
}

/* ===== LOGO DEMODEX (retour vers Chapter 1) — global ===== */
.return-header {
  width: 100%;
  text-align: center;
  margin: 40px 0 10px;
  position: relative;
  z-index: 10;
}

.logo-link {
  border: none !important;
  text-decoration: none !important;
  outline: none !important;
}

.return-logo {
  width: clamp(140px, 25vw, 260px);
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #1f5fff);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-link:hover .return-logo {
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px #4a7fff);
}

/* === Chapter 1 logo: override la règle .logo pour éviter l'écrasement === */
.logo.logo-ch1{
  width: auto !important;      /* annule la largeur imposée par .logo */
  max-width: none;             /* pas de plafond caché */
  height: clamp(260px, 32vw, 420px);  /* pilote UNIQUEMENT la hauteur */
  image-rendering: pixelated;
  filter: drop-shadow(0 0 14px #4a7fff) brightness(1.2);
  transform: translateY(80px);
  animation: logoPulse 3.5s ease-in-out infinite;
}

/* === MOBILE FIX (<= 680px) =============================== */
@media (max-width: 680px){

  /* 1) Logo : plus petit, sans translation verticale */
  .logo.logo-ch1{
    height: clamp(140px, 28vw, 220px);
    transform: none;                 /* supprime le décalage qui écrase le marquee */
    margin-top: 8px;
  }

  /* 2) Header : un peu d'air autour pour éviter les collisions */
  .site-header{
    margin: 16px auto 6px;
    padding: 0 10px;
  }

  /* 3) Full-bleed : neutraliser la technique 100vw/marges négatives sur mobile */
  .full-bleed{
    width: 100%;
    left: auto; right: auto;
    margin-left: 0; margin-right: 0;
  }

  /* 4) Marquee : boutons + compacts, piste moins gourmande */
  :root{
    --btn-w: 76px;    /* au lieu de 88 */
    --btn-h: 26px;    /* au lieu de 31 */
    --gap:   8px;     /* au lieu de 10 */
    --marquee-dur: 14s; /* un poil plus lent pour compenser la réduction */
  }

  .top-scroller .track img,
  .bottom-scroller .track-reverse img{
    height: var(--btn-h);
  }

  /* 5) Garde le flux propre : pas d’overflow latéral */
  html, body{ overflow-x: hidden; }

  /* 6) Un chouïa d’espace entre logo et bande supérieure */
  .top-scroller{ margin-top: 8px; }

  /* 7) Sidebars : ne force pas des hauteurs liées au ribbon */
  .side-left, .side-right{
    height: auto !important;
    gap: 10px;
  }

  /* 8) Grilles : un peu moins de hauteur pour les portes */
  .door{ grid-template-rows: 140px auto; }
}

/* === ABOUT: stack en colonne sur mobile ================== */
@media (max-width: 768px){
  /* 1) La rangée des fondateurs devient une colonne */
  .founders{
    display: flex;
    flex-direction: column;   /* ← clé: empile selon l’ordre du DOM */
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: nowrap !important; /* pas de wrap, on empile */
  }

  /* 2) Cartes: largeur fluide, centrées */
  .founder-card{
    width: min(92vw, 360px) !important;
    min-height: unset !important;
    margin: 0 auto;
  }



  /* 4) Un peu d’air dans les blocs de texte */
  .curatorial-box, .demodex-global{
    padding: 16px 14px !important;
    text-align: left;
    line-height: 1.55;
  }
}

/* iOS: pas de fond “fixed” sur la page about */
@media (max-width: 1024px){
  body.about-page{ background-attachment: scroll !important; }
}

/* === ABOUT: stack founders perfectly on mobile (final override) === */
@media (max-width: 680px){
  .founders{
    display: grid !important;
    grid-template-columns: min(94vw, 360px); /* one column */
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
    row-gap: 22px !important;
    margin-top: 12px !important;
    flex-wrap: unset !important;  /* kill nowrap from inline style */
  }

  .founders > *{                 /* reset margins on all three children */
    margin: 0 !important;
  }

  .founders > .founder-card{
    width: 100% !important;
    min-height: auto !important;
    padding-bottom: 12px !important;
  }

  .founders > .founder-gif{
    width: min(62vw, 260px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    transform: none !important;            /* kills translateY(97px) */
    margin: 0 auto !important;
    display: block !important;
  }

  /* keep inner portrait sizing consistent */
  .founder-card img{
    width: 80% !important;
    margin-bottom: 12px !important;
  }
}

/* Fix unclickable links on founders cards */
.founder-card::before {
  pointer-events: none !important;   /* let clicks pass through */
}
.founder-card::after { pointer-events: none; }

/* === CLICK FIX FOR FOUNDERS LINKS (force on top) === */
.founder-card,
.founder-card * {
  position: relative;
  z-index: 10 !important; /* force les vrais éléments au-dessus */
}

.founder-card::before,
.founder-card::after {
  pointer-events: none !important;
  z-index: 0 !important; /* repasse les halos en dessous */
}
/* === Hover zoom pour le marquee du BAS (même effet que le haut) === */
.bottom-scroller .track-reverse a img{
  transition: transform 1.7s ease, filter .3s ease;
  will-change: transform, filter;
  transform-origin: center;
}

.bottom-scroller .track-reverse a:hover img{
  transform: translateY(-5px) scale(1.1);
  filter: drop-shadow(0 0 5px #4a7fff);
}

/* (Optionnel) un peu d'air pour ne pas “couper” le zoom */
.bottom-scroller{ padding: 10px 0; }  /* au lieu de 6px si besoin */

:root{
  --logo-w: clamp(140px, 25vw, 260px);
  --logo-top: 12px;
  --logo-left: 12px;
}

.return-dock{
  position: fixed;
  top: max(var(--logo-top), env(safe-area-inset-top));
  left: max(var(--logo-left), env(safe-area-inset-left));
  z-index: 100;
  display:flex; align-items:center;
}

.return-dock .logo-link{ display:inline-flex; padding:2px 4px; text-decoration:none; border:0; }
.return-dock .return-logo{
  width: var(--logo-w);
  height:auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px #1f5fff);
  transition: transform .3s ease, filter .3s ease;
}
.return-dock .logo-link:hover .return-logo{
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px #4a7fff);
}

@media (max-width: 520px){
  :root{ --logo-w: clamp(130px, 28vw, 220px); }
}