*{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-snap-type:y mandatory; scroll-behavior:smooth; height:100%;}
  body{height:100%;}
  html,body{background:#17181A;color:#EFE9DE;font-family:'Work Sans',sans-serif;overflow-x:hidden;}
  .display{font-family:'Anton',sans-serif;text-transform:uppercase;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  button{font-family:inherit;cursor:pointer;}

  #loading{
    position:fixed;inset:0;background:#17181A;z-index:100;
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:#B9B3A4;letter-spacing:0.05em;
    transition:opacity 0.4s ease;
  }
  #loading.hidden{opacity:0;pointer-events:none;}

  .hero{
    height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;position:relative;scroll-snap-align:start;
  }
  .hero h1{font-size:clamp(60px,18vw,120px);line-height:0.9;}
  .hero p{color:#B9B3A4;margin-top:16px;font-size:15px;max-width:34ch;}
  .hero .hint{position:absolute;bottom:36px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#B9B3A4;letter-spacing:0.05em;animation:bob 1.8s infinite ease-in-out;}
  @keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

  .cat-section{
    height:100vh;display:flex;flex-direction:column;justify-content:center;
    position:relative;overflow:hidden;
    border-bottom:1px dashed rgba(239,233,222,0.14);
    scroll-snap-align:start;
    background-color:#17181A;
    transition:background-color 0.55s ease;
  }
  .cat-label{position:absolute;top:28px;left:24px;z-index:3;}
  .cat-label .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);letter-spacing:0.06em;margin-bottom:6px;}
  .cat-label h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(24px,5.5vw,38px);}

  .bg-fade{position:absolute;inset:0;z-index:0;clip-path:circle(150% at 50% 38%);transition:clip-path 0.8s ease;}
  /* data-bg-a = calque fixe (redevient simplement la couleur précédente juste avant chaque
     transition) ; data-bg-b = calque animé, toujours au-dessus par ordre du DOM, qui se révèle
     en cercle grandissant. Jamais de mélange RVB entre les deux couleurs. */

  .illu-fade{position:absolute;inset:0;z-index:1;clip-path:circle(150% at 50% 38%);transition:clip-path 0.8s ease;pointer-events:none;}
  /* même principe que .bg-fade, appliqué à l'illustration + son ombre : sans ça, les grandes
     formes (qui recouvrent la majorité de l'écran) changeraient de couleur d'un coup et
     domineraient visuellement le fondu du fond, qui lui n'est visible que dans les interstices */

  .bg-illustration-shadow{position:absolute;inset:0;z-index:1;pointer-events:none;transform:translate(-6.4px,6.4px);filter:brightness(0.58) saturate(1.15);}
  .bg-illustration-shadow svg{width:100%;height:100%;display:block;}
  .bg-illustration{position:absolute;inset:0;z-index:2;pointer-events:none;}
  .bg-illustration svg{width:100%;height:100%;display:block;}
  /* couleurs indépendantes par créneau (a = dessous fixe, b = dessus animé), au lieu des variables
     globales --illu-color/--title-color désormais scindées en -a/-b pour permettre le balayage */
  #mogs50 [data-illu-a] .cls-1{fill:var(--title-color-a, #cc4848);}
  #mogs50 [data-illu-a] .cls-2{fill:var(--illu-color-a, rgba(255,255,255,0.14));}
  #mogs50 [data-illu-b] .cls-1{fill:var(--title-color-b, #cc4848);}
  #mogs50 [data-illu-b] .cls-2{fill:var(--illu-color-b, rgba(255,255,255,0.14));}
  /* SVG_M25_BG a les rôles de classes inversés par rapport à SVG_M50_BG (cls-1=illustration, cls-2=titre) */
  #mogs25 [data-illu-a] .cls-1{fill:var(--illu-color-a, rgba(255,255,255,0.14));}
  #mogs25 [data-illu-a] .cls-2{fill:var(--title-color-a, #f45151);}
  #mogs25 [data-illu-b] .cls-1{fill:var(--illu-color-b, rgba(255,255,255,0.14));}
  #mogs25 [data-illu-b] .cls-2{fill:var(--title-color-b, #f45151);}
  /* mogs6-bg.svg suit la même convention que SVG_M25_BG (cls-1=illustration, cls-2=titre) */
  #mogs6 [data-illu-a] .cls-1{fill:var(--illu-color-a, rgba(255,255,255,0.14));}
  #mogs6 [data-illu-a] .cls-2{fill:var(--title-color-a, #f45151);}
  #mogs6 [data-illu-b] .cls-1{fill:var(--illu-color-b, rgba(255,255,255,0.14));}
  #mogs6 [data-illu-b] .cls-2{fill:var(--title-color-b, #f45151);}

  .info-box{
    position:absolute; left:50%; bottom:48px; transform:translateX(-50%); z-index:3;
    width:min(86vw,420px); border:1px solid rgba(239,233,222,0.4); border-radius:2px;
    padding:16px 20px; text-align:center;
  }
  .info-box p{font-size:11px; letter-spacing:0.04em; color:#EFE9DE; line-height:1.7; margin:0;}
  .info-box p:not(:last-child){margin-bottom:4px;}

  .carousel{position:relative;display:flex;align-items:center;justify-content:center;height:44vh;min-height:280px;}

  /* pan-y (pas none) : le scroll vertical natif de la page passe par défaut dans cette zone —
     le JS (scene.js/drag.js) ne bloque ce pan que sur les touchers qui tombent vraiment sur le
     personnage (raycasting), via preventDefault() au pointerdown correspondant. */
  .canvas-holder{width:min(80vw,560px);height:100%;position:relative;touch-action:pan-y;overflow:hidden;}
  .canvas-holder canvas{width:100%;height:100%;display:block;cursor:grab;}
  .canvas-holder.dragging canvas{cursor:grabbing;}
  .drag-hint{
    position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:#B9B3A4;
    opacity:0.7;pointer-events:none;white-space:nowrap;z-index:3;
  }

  .nav-btn{
    position:absolute;top:50%;transform:translateY(-50%);
    width:42px;height:42px;border-radius:50%;
    background:rgba(23,24,26,0.55);border:1px solid rgba(239,233,222,0.22);
    color:#EFE9DE;display:flex;align-items:center;justify-content:center;
    z-index:4;transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .nav-btn:hover{background:rgba(239,233,222,0.14);border-color:var(--accent);}
  .nav-btn:active{transform:translateY(-50%) scale(0.92);}
  .nav-btn.prev{left:max(8px, calc(50% - min(40vw,280px) - 60px));}
  .nav-btn.next{right:max(8px, calc(50% - min(40vw,280px) - 60px));}
  .nav-btn svg{width:17px;height:17px;}

  .variant-caption{text-align:center;margin-top:14px;position:relative;height:48px;overflow:hidden;}
  .variant-caption .num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);margin-bottom:4px;}
  .variant-caption .name{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:19px;}
  .variant-caption .num,.variant-caption .name{transition:opacity 0.22s ease, transform 0.22s ease;}
  .variant-caption.swap .num,.variant-caption.swap .name{opacity:0; transform:translateY(6px);}

  .dots{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap;max-width:280px;margin-left:auto;margin-right:auto;}
  /* le fond de chaque point est fixé en JS (couleur du personnage de sa propre variante).
     Le liseré clair (box-shadow) garantit un contraste visible quel que soit le fond derrière
     (dégradé sombre ou illustration d'une teinte proche de celle du point) — sans lui, un point
     de la même famille de teinte que le fond derrière se fondait dedans et devenait illisible. */
  .dot{
    position:relative; width:7px;height:7px;border-radius:50%;border:none;padding:0;
    box-shadow:0 0 0 1.5px rgba(239,233,222,0.55);
    transition:filter 0.2s ease, transform 0.2s ease; cursor:pointer;
  }
  /* zone cliquable agrandie et invisible, sans changer la taille visuelle du point (trop petit sinon pour viser au clic/tactile) */
  .dot::after{content:'';position:absolute;inset:-8px;}
  .dot:hover{filter:brightness(1.3);}
  .dot.active{transform:scale(1.35);}

  .v-nav-hint{
    position:fixed;bottom:20px;right:24px;z-index:10;
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:#B9B3A4;
    display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0.85;
  }
  .v-nav-dots{display:flex;flex-direction:column;gap:6px;}
  .v-nav-dot{width:6px;height:6px;border-radius:50%;background:rgba(239,233,222,0.25);transition:background 0.2s ease, transform 0.2s ease;}
  .v-nav-dot.active{background:#EFE9DE;transform:scale(1.4);}

  /* boutons section précédente/suivante — même langage visuel que .nav-btn (variantes),
     ajoutés en complément du scroll/swipe pour une navigation garantie quel que soit l'appareil */
  .v-nav-btn{
    width:30px;height:30px;border-radius:50%;flex-shrink:0;
    background:rgba(23,24,26,0.55);border:1px solid rgba(239,233,222,0.22);
    color:#EFE9DE;display:flex;align-items:center;justify-content:center;
    transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  }
  .v-nav-btn:hover{background:rgba(239,233,222,0.14);}
  .v-nav-btn:active{transform:scale(0.92);}
  .v-nav-btn svg{width:14px;height:14px;}

  footer{padding:40px 24px;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#B9B3A4;scroll-snap-align:start;}

  @media(max-width:600px){
    .nav-btn{width:36px;height:36px;}
    .carousel{height:40vh;min-height:240px;}
  }