/* ------------------------------------------------------------------
   Garage Meca-Mat — feuille de style unique.
   Aucune dependance. Les polices sont a rapatrier avant mise en ligne
   (voir LISEZMOI.md, section « Polices »).
   ------------------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
[hidden]{display:none !important}

:root{
    --paper:#FFFFFF;
    --ink:#0B0B0C;
    --ash:#6E7075;
    --mist:#F4F3F1;
    --sand:#EFEDE8;
    --rule:#E2E0DB;
    --gold:#A8871F;
    --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
    --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
    --gutter:clamp(20px,4vw,72px);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--body);font-size:16px;line-height:1.55;
    -webkit-font-smoothing:antialiased;overflow:hidden;
  }
  a{color:inherit}

  /* ---------------- chrome fixe ---------------- */
  .bar{
    position:fixed;left:0;right:0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding-inline:var(--gutter);
  }
  .bar.top{top:0;padding-top:calc(14px + env(safe-area-inset-top, 0px));padding-bottom:14px}
  .bar.bot{bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));padding-top:14px}

  .mark{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;text-decoration:none}
  .mark span{color:var(--gold)}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:600;text-decoration:none;
    padding:10px 17px;border-radius:999px;
    background:var(--ink);color:var(--paper);border:1px solid var(--ink);
    transition:background .2s ease,transform .2s ease;white-space:nowrap;
  }
  .btn:hover{background:#26262A;transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
  .btn.ghost:hover{background:var(--mist);border-color:var(--ink)}

  .dots{display:flex;gap:7px;align-items:center}
  .dots button{
    width:8px;height:8px;padding:0;border-radius:50%;
    border:1px solid var(--ink);background:transparent;cursor:pointer;
    transition:background .25s ease,transform .25s ease;
  }
  .dots button[aria-current="true"]{background:var(--ink);transform:scale(1.35)}
  .dots button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

  .counter{
    font-family:var(--display);font-weight:800;font-size:13px;
    letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--ash);
  }
  .counter b{color:var(--ink);font-weight:800}

  .hint{
    font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ash);display:flex;align-items:center;gap:9px;
  }
  .hint i{
    font-style:normal;display:inline-block;width:26px;height:1px;background:var(--ash);
    animation:slide 2.4s cubic-bezier(.45,0,.55,1) infinite;transform-origin:left;
  }
  @keyframes slide{0%,100%{transform:scaleX(.4)}50%{transform:scaleX(1)}}

  .rail{
    position:fixed;left:0;right:0;bottom:0;height:2px;z-index:39;
    background:var(--rule);
  }
  .rail i{display:block;height:100%;width:20%;background:var(--ink);transition:width .25s ease}

  /* fleches : l'affordance la plus lisible pour qui ne devine pas le geste */
  .arrow{
    position:fixed;top:50%;transform:translateY(-50%);z-index:41;
    width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:var(--paper);color:var(--ink);
    border:1px solid var(--rule);
    transition:opacity .25s ease,transform .25s ease,border-color .2s ease;
  }
  .arrow:hover{border-color:var(--ink);transform:translateY(-50%) scale(1.06)}
  .arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .arrow.prev{left:calc(var(--gutter) / 2)}
  .arrow.next{right:calc(var(--gutter) / 2)}
  .arrow[disabled]{opacity:0;pointer-events:none}

  /* ---------------- le pont horizontal ---------------- */
  .deck{
    display:flex;height:100%;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .deck::-webkit-scrollbar{display:none}

  .panel{
    flex:0 0 100%;height:100%;
    scroll-snap-align:start;
    display:grid;align-content:center;
    padding-inline:var(--gutter);
    padding-block:84px 74px;
    overflow-y:auto;
  }
  .panel.tinted{background:var(--sand)}
  .panel.soft{background:var(--mist)}

  .inner{width:100%;max-width:1180px;margin-inline:auto}

  .eyebrow{
    font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ash);margin:0 0 18px;
  }
  .big{
    font-family:var(--display);font-weight:800;
    font-size:clamp(30px,5.2vw,68px);line-height:.96;letter-spacing:-.035em;
    margin:0;text-wrap:balance;
  }
  .big em{font-style:normal;color:var(--gold)}
  .lede{margin:20px 0 0;color:var(--ash);font-size:clamp(15px,1.5vw,17px);max-width:50ch}
  .lede strong{color:var(--ink);font-weight:600}

  .two{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,56px);align-items:center}

  /* ---------------- le personnage ---------------- */
  .rig{position:relative;aspect-ratio:634/1153;width:var(--rw,240px);max-width:100%}
  .pose{display:block;width:var(--rw,240px);max-width:100%;height:auto}
  .rig .lay{position:absolute;inset:0;width:100%;height:100%;display:block}
  .rig .lay img{width:100%;height:100%;display:block}
  .rig .tilt{
    transform-origin:50% 45%;
    animation:tilt var(--td,6.4s) cubic-bezier(.45,0,.55,1) infinite;
    will-change:transform;
  }
  @keyframes tilt{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}

  .float{animation:breathe var(--bd,5.5s) cubic-bezier(.45,0,.55,1) infinite}
  @keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

  .stand{--gw:70%}
  .ground{
    width:var(--gw,70%);height:16px;margin:-8px auto 0;border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(11,11,12,.18), rgba(11,11,12,0) 70%);
    animation:shade var(--bd,5.5s) cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes shade{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.9);opacity:.7}}

  .stand{display:flex;flex-direction:column;align-items:center;justify-self:center}

  /* ---------------- contenus ---------------- */
  .list{margin:26px 0 0;border-top:1px solid var(--rule)}
  .list div{
    display:flex;justify-content:space-between;gap:20px;align-items:baseline;
    padding-block:14px;border-bottom:1px solid var(--rule);
  }
  .list dt{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(17px,2vw,22px);letter-spacing:-.015em}
  .list dd{margin:0;color:var(--ash);font-size:14px;text-align:right;max-width:30ch}

  .strip{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);
    gap:11px;overflow-x:auto;padding-bottom:6px;margin-top:26px;
  }
  .vid{
    aspect-ratio:9/16;border-radius:12px;min-width:132px;
    border:1px solid var(--rule);overflow:hidden;position:relative;
    background:repeating-linear-gradient(135deg,#E4E2DD 0 2px,#EFEDE9 2px 10px);
    display:flex;align-items:flex-end;padding:11px;text-decoration:none;
    transition:transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .vid:hover{transform:translateY(-4px)}
  .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .vid span{position:relative;font-size:11px;font-weight:600;color:var(--ash);line-height:1.35}
  .vid.filled span{color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.5)}

  .tel{
    font-family:var(--display);font-weight:800;
    font-size:clamp(34px,6vw,76px);letter-spacing:-.04em;line-height:1;
    text-decoration:none;display:inline-block;font-variant-numeric:tabular-nums;
    transition:color .2s ease;
  }
  .tel:hover{color:var(--gold)}
  .cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
  .note{
    margin-top:26px;padding:11px 13px;border:1px dashed var(--rule);border-radius:10px;
    font-size:11.5px;color:var(--ash);line-height:1.65;max-width:62ch;
  }


  /* ---------------- note Google ---------------- */
  .score{
    display:flex;align-items:center;gap:9px;margin:22px 0 0;
    font-size:13px;color:var(--ash);
  }
  .score b{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink)}
  .score .stars{color:var(--gold);letter-spacing:.06em}

  /* ---------------- bandeau de saison ---------------- */
  .season{
    display:inline-flex;align-items:center;gap:10px;
    margin:0 0 20px;padding:8px 14px 8px 11px;border-radius:999px;
    background:var(--season-bg,#EFEDE8);
    border:1px solid var(--season-line,#DFDCD4);
    font-size:13px;font-weight:500;color:var(--ink);
  }
  .season i{
    font-style:normal;width:7px;height:7px;border-radius:50%;
    background:var(--season-dot,#A8871F);flex:none;
  }
  .season a{font-weight:600;text-underline-offset:3px}

  /* ---------------- squelettes de chargement ---------------- */
  .vid.skel{background:var(--mist);border-color:var(--rule);overflow:hidden}
  .vid.skel::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.85) 50%,transparent 80%);
    animation:shimmer 1.4s linear infinite;
  }
  @keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}


  /* ============================================================
     ÉDITION NÉON — le site bascule entierement.
     Active du 19 novembre au 3 decembre, ou via ?edition=vice,
     ou en tapant "vice" au clavier.
     ============================================================ */
  .vice-bg{display:none}

  html[data-edition="vice"]{
    --paper:#130A2B;
    --ink:#FFF0FA;
    --ash:#AE95D6;
    --mist:#1C1142;
    --sand:#180E3A;
    --rule:#3E2B72;
    --gold:#FF3DAE;
    --cyan:#21E6FF;
  }

  html[data-edition="vice"] body{background:var(--paper);color:var(--ink)}

  html[data-edition="vice"] .vice-bg{
    display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    background:
      radial-gradient(120% 70% at 50% 62%, rgba(255,150,80,.30), rgba(255,150,80,0) 62%),
      linear-gradient(180deg,#120927 0%,#2B1250 34%,#6B2263 54%,#B4386A 66%,#E0684C 71%,#1A0C33 73%);
  }
  .vice-sun{
    position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
    width:min(58vh,420px);aspect-ratio:1;border-radius:50%;
    background:linear-gradient(180deg,#FFE36E 0%,#FF9A3C 42%,#FF3DAE 78%,#FF3DAE 100%);
    -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
    mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 20px);
    opacity:.85;
  }
  .vice-glow{
    position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
    width:min(80vh,620px);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,61,174,.38),rgba(255,61,174,0) 62%);
  }
  .vice-grid{
    position:absolute;left:-25%;right:-25%;bottom:0;height:27%;
    background:
      repeating-linear-gradient(90deg,rgba(120,240,255,.28) 0 1px,transparent 1px 86px),
      repeating-linear-gradient(0deg,rgba(120,240,255,.22) 0 1px,transparent 1px 48px);
    transform:perspective(320px) rotateX(74deg);
    transform-origin:50% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
    mask-image:linear-gradient(180deg,transparent,#000 42%);
  }
  .vice-scan{
    position:absolute;inset:0;
    background:repeating-linear-gradient(180deg,rgba(0,0,0,.13) 0 1px,transparent 1px 3px);
    opacity:.42;
  }
  /* grain argentique : c'est ce qui fait la difference entre une image
     de synthese et une photo de coucher de soleil */
  .vice-grain{
    position:absolute;inset:-50%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'220\' height=\'220\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'.82\' numOctaves=\'3\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'220\' height=\'220\' filter=\'url(%23n)\'/%3E%3C/svg%3E");
    opacity:.16;mix-blend-mode:overlay;
    animation:grainShift 1.1s steps(3) infinite;
  }
  @keyframes grainShift{
    0%{transform:translate(0,0)}
    33%{transform:translate(-3%,2%)}
    66%{transform:translate(2%,-3%)}
    100%{transform:translate(0,0)}
  }
  /* vignettage : l'oeil revient au centre */
  .vice-vig{
    position:absolute;inset:0;
    background:radial-gradient(125% 95% at 50% 45%, rgba(0,0,0,0) 46%, rgba(20,6,40,.5) 100%);
  }

  .vice-palm{position:absolute;bottom:23%;width:clamp(90px,13vw,170px);opacity:.92;color:#0B0620}
  .vice-palm.l{left:2%}
  .vice-palm.r{right:2%;transform:scaleX(-1)}

  html[data-edition="vice"] .deck{position:relative;z-index:2}

  html[data-edition="vice"] .panel{background:transparent}
  html[data-edition="vice"] .panel.tinted{background:rgba(24,14,58,.55)}
  html[data-edition="vice"] .panel.soft{background:rgba(19,10,43,.62)}

  html[data-edition="vice"] .big{
    color:#FFF;
    text-shadow:0 0 1px #fff,0 0 12px rgba(255,61,174,.95),0 0 34px rgba(255,61,174,.55),0 0 64px rgba(33,230,255,.35);
  }
  html[data-edition="vice"] .big em{
    color:var(--cyan);
    text-shadow:0 0 12px rgba(33,230,255,.95),0 0 38px rgba(33,230,255,.5);
  }
  html[data-edition="vice"] .eyebrow,
  html[data-edition="vice"] .counter,
  html[data-edition="vice"] .hint{color:var(--cyan)}
  html[data-edition="vice"] .counter b{color:#fff}
  html[data-edition="vice"] .hint i{background:var(--cyan)}
  html[data-edition="vice"] .mark{color:#fff;text-shadow:0 0 10px rgba(255,61,174,.8)}
  html[data-edition="vice"] .mark span{color:var(--cyan)}
  html[data-edition="vice"] .lede{color:#D9C9F2}
  html[data-edition="vice"] .lede strong{color:#fff}
  html[data-edition="vice"] .list dt{color:#fff}

  html[data-edition="vice"] .tel{
    color:#fff;text-shadow:0 0 14px rgba(33,230,255,.9),0 0 40px rgba(255,61,174,.6);
  }
  html[data-edition="vice"] .tel:hover{color:var(--cyan)}

  html[data-edition="vice"] .btn{
    background:var(--gold);border-color:var(--gold);color:#12082A;
    box-shadow:0 0 18px rgba(255,61,174,.55);
  }
  html[data-edition="vice"] .btn:hover{background:#FF5CBC;box-shadow:0 0 26px rgba(255,61,174,.8)}
  html[data-edition="vice"] .btn.ghost{
    background:transparent;color:var(--cyan);border-color:var(--cyan);
    box-shadow:0 0 14px rgba(33,230,255,.35);
  }
  html[data-edition="vice"] .btn.ghost:hover{background:rgba(33,230,255,.12)}
  html[data-edition="vice"] .bar.top,
  html[data-edition="vice"] .bar.bot{background:transparent;border-color:transparent;backdrop-filter:none}
  html[data-edition="vice"] .arrow{
    background:rgba(19,10,43,.78);color:var(--cyan);border-color:var(--cyan);
    box-shadow:0 0 16px rgba(33,230,255,.35);
  }
  html[data-edition="vice"] .dots button{border-color:var(--cyan)}
  html[data-edition="vice"] .dots button[aria-current="true"]{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
  html[data-edition="vice"] .rail{background:rgba(62,43,114,.7)}
  html[data-edition="vice"] .rail i{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
  html[data-edition="vice"] .list,
  html[data-edition="vice"] .list div{border-color:rgba(62,43,114,.85)}
  html[data-edition="vice"] .list dd{color:#C3AEE6}
  html[data-edition="vice"] .vid{border-color:rgba(62,43,114,.9);background:rgba(28,17,66,.8)}
  html[data-edition="vice"] .vid span{color:#C3AEE6}
  html[data-edition="vice"] .vid.skel{background:rgba(28,17,66,.8)}
  html[data-edition="vice"] .note{border-color:rgba(62,43,114,.9);color:#A991D0}
  html[data-edition="vice"] .score{color:#C3AEE6}
  html[data-edition="vice"] .score b{color:#fff}
  html[data-edition="vice"] .score .stars{color:var(--gold)}
  /* le rendu IA laisse une ombre de contact claire sous les bottes :
     invisible sur blanc, elle bave sur fond sombre. On efface le bas. */
  html[data-edition="vice"] .pose,
  html[data-edition="vice"] .rig{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 92%,rgba(0,0,0,0) 99%);
    mask-image:linear-gradient(180deg,#000 0%,#000 92%,rgba(0,0,0,0) 99%);
  }

  html[data-edition="vice"] .ground{
    background:radial-gradient(ellipse at center, rgba(255,61,174,.45), rgba(255,61,174,0) 70%);
  }

  html[data-edition="vice"] .season{
    background:rgba(255,61,174,.12);border-color:var(--gold);color:#fff;
    box-shadow:0 0 22px rgba(255,61,174,.3);
  }
  html[data-edition="vice"] .season i{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
  html[data-edition="vice"] .season a{color:var(--cyan)}

  .ed-tag{display:none}
  html[data-edition="vice"] .ed-tag{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--display);font-weight:800;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
    border:1px solid var(--cyan);border-radius:999px;padding:5px 11px;
    box-shadow:0 0 14px rgba(33,230,255,.35);
    animation:pulse 3.2s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.62}}

  @media (max-width:899px){
    .vice-palm{width:clamp(70px,22vw,110px);bottom:20%}
    html[data-edition="vice"] .ed-tag{display:none}
  }

  @media (prefers-reduced-motion:reduce){
    .ed-tag{animation:none}
  }



  /* ---- le soleil respire, la grille avance ---- */
  html[data-edition="vice"] .vice-sun{animation:sunRise 14s ease-in-out infinite}
  @keyframes sunRise{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-54%)}}

  html[data-edition="vice"] .vice-glow{animation:glowPulse 7s ease-in-out infinite}
  @keyframes glowPulse{0%,100%{opacity:.75}50%{opacity:1}}

  html[data-edition="vice"] .vice-grid{
    background-position:0 0, 0 0;
    animation:gridRun 2.6s linear infinite;
  }
  @keyframes gridRun{from{background-position:0 0, 0 0}to{background-position:0 0, 0 46px}}

  /* ---- halo qui suit le curseur ---- */
  html[data-edition="vice"] .vice-cursor{
    display:block;position:absolute;left:0;top:0;width:520px;height:520px;
    margin:-260px 0 0 -260px;border-radius:50%;
    background:radial-gradient(circle,rgba(33,230,255,.16),rgba(33,230,255,0) 62%);
    transform:translate3d(var(--cx,50vw),var(--cy,50vh),0);
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .vice-cursor{display:none}

  /* ---- le titre d'accueil passe en chrome ---- */
  html[data-edition="vice"] #p1 .big{
    background:linear-gradient(180deg,#FFFFFF 0%,#FFE9F8 28%,#FF8FD2 52%,#8C3BE0 74%,#32D6F5 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 0 16px rgba(255,61,174,.65)) drop-shadow(0 0 44px rgba(33,230,255,.35));
  }
  html[data-edition="vice"] #p1 .big em{
    -webkit-text-fill-color:#B9F6FF;color:#B9F6FF;
    filter:drop-shadow(0 0 14px rgba(33,230,255,.9));
  }

  /* ---- le badge grésille comme une enseigne ---- */
  html[data-edition="vice"] .ed-tag{animation:neonFlicker 6s steps(1,end) infinite}
  @keyframes neonFlicker{
    0%,3%,5%,42%,44%,100%{opacity:1;box-shadow:0 0 14px rgba(33,230,255,.45)}
    4%,43%{opacity:.35;box-shadow:0 0 4px rgba(33,230,255,.2)}
  }

  /* ---- bascule : un balayage facon reglage de cathodique ---- */
  .vice-swipe{
    position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
    background:
      linear-gradient(180deg,rgba(33,230,255,0) 0%,rgba(33,230,255,.5) 48%,rgba(255,61,174,.5) 52%,rgba(255,61,174,0) 100%),
      repeating-linear-gradient(180deg,rgba(255,255,255,.14) 0 2px,transparent 2px 5px);
  }
  .vice-swipe.go{animation:tuneIn .72s cubic-bezier(.4,0,.2,1)}
  @keyframes tuneIn{
    0%{opacity:0;transform:scaleY(.02)}
    18%{opacity:1;transform:scaleY(.06)}
    55%{opacity:.95;transform:scaleY(1)}
    100%{opacity:0;transform:scaleY(1)}
  }

  /* ---- la bande video ne defile plus jamais ---- */
  .strip{
    grid-auto-flow:row;
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-auto-columns:auto;
    overflow:visible;
    padding-bottom:0;
    margin-top:20px;
    /* bride la hauteur : cinq cartes 9/16 pleine largeur ne tiennent pas
       dans un panneau plein ecran, et le panneau se mettait a defiler */
    max-width:660px;
  }
  .vid{min-width:0}

  @media (prefers-reduced-motion:reduce){
    html[data-edition="vice"] .vice-sun,
    html[data-edition="vice"] .vice-glow,
    html[data-edition="vice"] .vice-grid,
    .vice-grain,
    html[data-edition="vice"] .ed-tag{animation:none}
    html[data-edition="vice"] .vice-cursor{transition:none}
    .vice-swipe.go{animation:none}
  }


  /* ============================================================
     MOSAÏQUE — chaque panneau est une case de l'affiche : sa propre
     gamme pastel-vers-saturé, cernée d'un violet très sombre.
     ============================================================ */
  .vice-fx{display:none}
  html[data-edition="vice"] .vice-fx{
    display:block;position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden;
  }

  html[data-edition="vice"] .panel{
    border:clamp(7px,0.9vw,15px) solid #250938;
    background:
      radial-gradient(130% 80% at 50% 108%, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
      linear-gradient(170deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  }
  /* le premier panneau reste translucide : on doit voir le soleil derriere */
  html[data-edition="vice"] #p1{
    background:
      linear-gradient(170deg, rgba(43,17,80,.34) 0%, rgba(180,56,106,.30) 52%, rgba(224,104,76,.34) 100%);
  }
  html[data-edition="vice"] #p2{--c1:#C9A7F0;--c2:#9B6FD6;--c3:#6C3FAE}
  html[data-edition="vice"] #p3{--c1:#9FE8DF;--c2:#4FBFC9;--c3:#2B7FA8}
  html[data-edition="vice"] #p4{--c1:#FFB0CE;--c2:#F0508F;--c3:#B0246B}
  html[data-edition="vice"] #p5{--c1:#FFD79A;--c2:#F79A4E;--c3:#C85A34}

  /* --- typo de couverture : blanc plein, contour violet epais --- */
  html[data-edition="vice"] .big,
  html[data-edition="vice"] #p1 .big{
    background:none;-webkit-background-clip:border-box;background-clip:border-box;
    -webkit-text-fill-color:#FFFFFF;color:#FFFFFF;
    -webkit-text-stroke:clamp(2px,.28vw,4px) #250938;
    paint-order:stroke fill;
    text-shadow:0 clamp(3px,.4vw,6px) 0 rgba(37,9,56,.55);
    filter:none;
  }
  html[data-edition="vice"] .big em,
  html[data-edition="vice"] #p1 .big em{
    -webkit-text-fill-color:#FFE36E;color:#FFE36E;filter:none;
  }

  html[data-edition="vice"] .eyebrow{color:#FFE9F6;text-shadow:0 1px 0 rgba(37,9,56,.6)}
  html[data-edition="vice"] .lede{color:#FCEFF8;text-shadow:0 1px 2px rgba(37,9,56,.45)}
  html[data-edition="vice"] .lede strong{color:#fff}
  html[data-edition="vice"] .list dt{
    color:#fff;-webkit-text-stroke:1.2px #250938;paint-order:stroke fill;
  }
  html[data-edition="vice"] .list dd{color:#FBEAF4}
  html[data-edition="vice"] .list,
  html[data-edition="vice"] .list div{border-color:rgba(37,9,56,.5)}
  html[data-edition="vice"] .tel{
    color:#fff;-webkit-text-stroke:clamp(2px,.28vw,4px) #250938;paint-order:stroke fill;
    text-shadow:0 clamp(3px,.4vw,6px) 0 rgba(37,9,56,.55);
  }
  html[data-edition="vice"] .tel:hover{color:#FFE36E}

  /* --- les boutons prennent le meme cerne --- */
  html[data-edition="vice"] .btn{
    background:#FFE36E;border:2px solid #250938;color:#250938;
    box-shadow:0 3px 0 #250938;
  }
  html[data-edition="vice"] .btn:hover{background:#FFF0A6;box-shadow:0 5px 0 #250938;transform:translateY(-2px)}
  html[data-edition="vice"] .btn.ghost{
    background:rgba(255,255,255,.14);color:#fff;border:2px solid #250938;
    box-shadow:0 3px 0 rgba(37,9,56,.7);
  }
  html[data-edition="vice"] .btn.ghost:hover{background:rgba(255,255,255,.26)}
  html[data-edition="vice"] .arrow{
    background:#FFE36E;color:#250938;border:2px solid #250938;box-shadow:0 3px 0 #250938;
  }
  html[data-edition="vice"] .dots button{border-color:#250938;background:rgba(255,255,255,.45)}
  html[data-edition="vice"] .dots button[aria-current="true"]{background:#FFE36E;box-shadow:0 0 0 2px #250938}
  html[data-edition="vice"] .counter{color:#FFE9F6}
  html[data-edition="vice"] .counter b{color:#fff}
  html[data-edition="vice"] .hint{color:#FFE9F6}
  html[data-edition="vice"] .hint i{background:#FFE9F6}
  html[data-edition="vice"] .rail{background:rgba(37,9,56,.55)}
  html[data-edition="vice"] .rail i{background:#FFE36E;box-shadow:none}
  html[data-edition="vice"] .ed-tag{
    color:#250938;background:#FFE36E;border:2px solid #250938;box-shadow:0 2px 0 #250938;
  }
  html[data-edition="vice"] .vid{border-color:#250938;background:rgba(37,9,56,.42)}
  html[data-edition="vice"] .vid span{color:#FBEAF4}
  html[data-edition="vice"] .vid.skel{background:rgba(37,9,56,.42)}
  html[data-edition="vice"] .note{border-color:rgba(37,9,56,.55);color:#F3E3EE}
  html[data-edition="vice"] .score{color:#FBEAF4}
  html[data-edition="vice"] .score b{color:#fff}
  html[data-edition="vice"] .score .stars{color:#FFE36E}
  html[data-edition="vice"] .season{
    background:rgba(37,9,56,.55);border:2px solid #250938;color:#fff;box-shadow:0 2px 0 rgba(37,9,56,.6);
  }
  html[data-edition="vice"] .season a{color:#FFE36E}
  html[data-edition="vice"] .mark{color:#fff;-webkit-text-stroke:1.5px #250938;paint-order:stroke fill;text-shadow:none}
  html[data-edition="vice"] .mark span{color:#FFE36E}
  html[data-edition="vice"] .ground{
    background:radial-gradient(ellipse at center, rgba(37,9,56,.42), rgba(37,9,56,0) 70%);
  }

  @media (max-width:899px){
    html[data-edition="vice"] .panel{border-width:6px}
  }

  /* ---------------- entrees au scroll ---------------- */
  /* l'etat de repos est visible : la classe .anim n'est posee que si le JS tourne */
  body.anim .reveal{opacity:0;transform:translateY(22px)}
  body.anim .stand.reveal{transform:translateY(26px) scale(.93)}
  body.anim .panel.in .reveal{
    opacity:1;transform:none;
    transition:opacity .7s ease var(--d,0s), transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s);
  }

  /* ---------------- desktop ---------------- */
  @media (min-width:900px){
    .two{grid-template-columns:1.1fr .9fr}
    .two.flip{grid-template-columns:.9fr 1.1fr}
    .two.flip .stand{order:-1}
  }

  /* ------- mobile : meme principe, mais on tourne les pages vers le bas ------- */
  @media (max-width:899px){
    html,body{height:100%}
    body{overflow:hidden}
    .deck{
      display:block;height:100%;
      overflow-x:hidden;overflow-y:auto;
      scroll-snap-type:y proximity;
      -webkit-overflow-scrolling:touch;
    }
    .panel{
      flex:none;width:100%;
      height:auto;min-height:100%;
      overflow:visible;
      scroll-snap-align:start;
      padding-block:clamp(84px,20vw,110px) clamp(64px,14vw,88px);
      border-bottom:1px solid var(--rule);
    }
    .bar.top{
      background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
      border-bottom:1px solid var(--rule);
    }
    .bar.bot{
      background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.94) 42%);
      pointer-events:none;
    }
    .bar.bot .dots{pointer-events:auto}
    .hint{display:none}
    .arrow{display:none}
    .rig{--rw:clamp(170px,46vw,230px) !important}
    .pose{--rw:clamp(190px,58vw,280px) !important}

    /* la bande video devient une grille : plus de scroll lateral dans un scroll vertical */
    .strip{grid-template-columns:repeat(2,1fr);gap:10px}
    .vid{min-width:0}
    .vid.more{
      aspect-ratio:auto;grid-column:1 / -1;
      align-items:center;justify-content:center;
      background:var(--paper);padding:14px;
    }
    .vid.more span{color:var(--ink);font-size:13px;font-weight:600}
  }

  @media (prefers-reduced-motion:reduce){
    .deck{scroll-behavior:auto}
    .rig .tilt,.float,.ground,.hint i{animation:none}
    *{transition-duration:.01ms !important}
  }