/* SHOOTKAM — feuille de style commune a toutes les pages (decoupee de index.html le 12/10/2026). */
:root{
    --bg:#050506; --ink:#FFFFFF; --soft:#9EA0AA;
    --red:#FF2029; --red-deep:#C1121A; --glow:rgba(255,32,41,.55);
    --cyan:#22E4E4; --magenta:#FF2D9B; --amber:#FF9A2E;
    --glass:rgba(255,255,255,.05); --glass-line:rgba(255,255,255,.11);
    --sans:system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    --mono:ui-monospace,"Cascadia Code",Consolas,monospace;
      /* Le repli n'est pas cosmetique : tant que Saira n'est pas arrivee, ou si
         elle n'arrive jamais, l'accroche doit rester un italique noir credible. */
      --titre:"Saira",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
    --wrap:1160px;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  :focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }
  section{ padding:clamp(64px,9vw,120px) 0; position:relative; }

  /* cursor spotlight (desktop) */
  .spotlight{ position:fixed; inset:0; z-index:5; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .4s;
    background:radial-gradient(340px circle at var(--cx,50%) var(--cy,50%), rgba(255,32,41,.10), rgba(34,228,228,.05) 40%, transparent 65%); }
  @media (hover:hover) and (pointer:fine){ .spotlight{ opacity:1; } }

  /* titles */
  .ttl{ font-style:italic; font-weight:900; letter-spacing:-.02em; line-height:.96; margin:0; text-transform:uppercase; text-wrap:balance; }
  .ttl .r{ color:var(--red); text-shadow:0 0 26px rgba(255,32,41,.45); }
  h2.ttl{ font-size:clamp(2.1rem,6vw,4rem); }
  .eyebrow{ font-family:var(--mono); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--soft); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px; }
  .eyebrow::before{ content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--red),var(--magenta)); box-shadow:0 0 10px var(--glow); }
  .eyebrow.c{ display:flex; justify-content:center; }
  .center{ text-align:center; }
  .lead{ color:#CBCCD3; }
  /* SHOOTKAM OS en grand, au-dessus des cartes d'apps.
     ⚠️ L'IMAGE FAIT 1536 DE LARGE POUR UNE COLONNE DE 1160 : elle est donc
     REDUITE a l'affichage, jamais etiree. C'est ce qui garde lisible le petit
     texte de l'infographie sur les ecrans denses, ou le navigateur dessine
     deux pixels physiques par pixel de mise en page. */
  /* ═══ PRESENTATION SHOOTKAM OS, en HTML ═══════════════════════════════
     ⚠️ ELLE DEBORDE DE LA COLONNE. Le site centre son contenu sur 1160 px ;
     la grille des dix fonctions y serait a l'etroit. 100vw, recentree par une
     marge negative — la technique du « full-bleed », la seule facon d'echapper
     a un conteneur centre sans toucher a sa structure. Plafond a 1560 pour que
     les lignes de texte ne deviennent pas illisibles sur un ecran ultra-large :
     au-dela de 90 signes, l'oeil perd le debut de la ligne suivante.
     ⚠️ ET SURTOUT PAS 100vw : cette unite compte la barre de defilement, que la
     colonne, elle, ne compte pas. Le bloc depassait de 15 px et faisait
     apparaitre une barre horizontale sur TOUTE la page. On vise donc une
     largeur cible et on laisse les marges negatives l'atteindre : la largeur
     auto vaut alors exactement la cible, barre de defilement deduite. */
  .osx{ margin:34px 0 0;
    margin-inline:calc((100% - min(1560px, 100vw - 42px)) / 2);
    padding:38px clamp(16px,3vw,44px) 30px; border-radius:20px;
    background:
      radial-gradient(120% 90% at 50% -10%, rgba(255,32,41,.14), transparent 60%),
      linear-gradient(180deg, #0a0a0d, #050506);
    border:1px solid var(--glass-line); box-shadow:0 30px 80px rgba(0,0,0,.6); }
  .osx-tete{ text-align:center; padding:6px 0 2px; }

  /* ⚠️ LE CHROME EST UN DEGRADE DECOUPE SUR LE TEXTE, PAS UNE IMAGE. Les
     paliers ne sont pas decoratifs : clair en haut, sombre au milieu, eclat
     franc juste sous la mi-hauteur puis re-sombre — c'est la ligne d'horizon
     que renvoie une surface metallique, et c'est elle seule qui fait lire
     « metal » plutot que « gris ». Un degrade regulier rend plat.
     ⚠️ background-image ET SURTOUT PAS background : le raccourci remet
     background-clip a sa valeur initiale et le degrade repeindrait la boite
     entiere — l'accroche sortirait en un pave gris plein.
     ⚠️ ET drop-shadow, PAS text-shadow : le texte est transparent, sa couleur
     vient du fond. text-shadow porterait l'ombre de rien du tout.
     ⚠️ ENFIN fit-content : skewX deplace les coins de la boite, et une boite
     pleine largeur deborderait du panneau en faisant apparaitre une barre de
     defilement sur toute la page. */
  /* ⚠️ line-height:1.2, ET SURTOUT PAS LE .96 DES AUTRES TITRES DU SITE. Un
     degrade decoupe sur le texte n'est peint QUE dans la boite de l'element :
     ce qui depasse ne recoit aucune couleur et devient invisible. Avec .96 la
     boite passait au ras des capitales et tranchait la pointe du circonflexe —
     « CONTRÔLE » se lisait « CONTRÖLE », les deux moities de l'accent restantes
     ayant tout l'air d'un trema. Le piege ne se voit que sur les lettres
     accentuees : sans elles, .96 aurait paru parfait. */
  h3.osx-claim{ margin:2px auto 0; width:fit-content; max-width:100%;
    font-family:var(--titre); font-variation-settings:'wdth' 125;
    font-size:clamp(1.25rem,3.1vw,2.45rem); letter-spacing:-.005em;
    line-height:1.2; text-wrap:balance; transform:skewX(-6deg);
    background-image:linear-gradient(178deg,
      #ffffff 0%, #e6eaf1 20%, #9299a3 42%, #ffffff 51%,
      #a8afb9 58%, #626973 78%, #d8dce3 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 3px 1px rgba(0,0,0,.6)); }
  .osx-sub{ position:relative; margin:16px auto 0; max-width:800px;
    padding-top:14px; font-family:var(--titre); font-style:italic;
    font-weight:600; font-variation-settings:'wdth' 125; color:#aeb4bf;
    font-size:clamp(.64rem,1.2vw,.86rem); letter-spacing:.19em;
    text-indent:.19em; text-transform:uppercase; }
  .osx-sub::before{ content:""; position:absolute; top:0; left:22%; right:22%;
    height:1px; background:linear-gradient(90deg,transparent,var(--red),transparent); }

  /* ⚠️ CINQ COLONNES, PAS auto-fit. Laisse a la grille le soin de compter et
     elle en met huit : les dix cases tombent en 8 + 2, avec une rangee du bas
     aux trois quarts vide qui a l'air d'un bug d'affichage. Dix ne se divise
     qu'en 5 et en 2 — ce sont donc les deux seules dispositions qui remplissent
     leur derniere rangee, et les seules qu'on autorise. */
  .osx-grid{ list-style:none; margin:34px 0 0; padding:14px;
    display:grid; gap:2px; grid-template-columns:repeat(5,1fr);
    background:rgba(255,255,255,.03); border:1px solid var(--glass-line);
    border-radius:16px; }
  .osx-grid li{ padding:16px 12px; text-align:center; border-radius:10px;
    transition:background .18s ease, transform .18s ease; }
  .osx-grid li:hover{ background:rgba(255,255,255,.045); transform:translateY(-2px); }
  .osx-grid svg{ width:30px; height:30px; margin:0 auto 8px; display:block;
    fill:none; stroke:var(--c); stroke-width:1.6; stroke-linecap:round;
    stroke-linejoin:round; filter:drop-shadow(0 0 9px color-mix(in srgb,var(--c) 55%,transparent)); }
  .osx-grid h4{ margin:0 0 4px; font-size:13px; letter-spacing:.05em;
    text-transform:uppercase; }
  .osx-grid p{ margin:0; font-size:11.5px; line-height:1.45; color:var(--soft); }

  .osx-sep{ display:flex; align-items:center; gap:16px; margin:26px 2px 22px;
    color:var(--soft); font-size:12px; letter-spacing:.22em; }
  .osx-sep::before,.osx-sep::after{ content:""; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,var(--red),transparent); }

  /* La capture d'accueil occupe deux rangees : c'est elle qui resume l'app,
     les deux autres montrent jusqu'ou elle va.
     ⚠️ ET LE RAPPORT 2/1 N'EST PAS UN CHOIX D'ALLURE, C'EST DU CALCUL. Les
     trois captures ont le meme rapport hauteur/largeur (1,10). Une grande qui
     couvre deux rangees ne retombe donc au niveau des deux petites empilees que
     si elle est exactement deux fois plus large. A 1,35 la colonne de droite
     depassait de 350 px et laissait un trou sous la grande. */
  .osx-shots{ display:grid; gap:14px; grid-template-columns:2fr 1fr;
    align-content:start; }
  .osx-shots figure{ margin:0; }
  .osx-shots .big{ grid-row:span 2; }
  .osx-shots img{ width:100%; height:auto; border-radius:12px;
    border:1px solid var(--glass-line); box-shadow:0 14px 40px rgba(0,0,0,.5); }

  .osx-bas{ display:flex; flex-wrap:wrap; align-items:center; gap:18px;
    margin-top:26px; padding-top:22px; border-top:1px solid var(--glass-line); }
  .osx-plus{ list-style:none; margin:0; padding:0; flex:1 1 460px;
    display:grid; gap:12px 22px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
  .osx-plus b{ display:block; font-size:12px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--red); }
  .osx-plus span{ font-size:12.5px; color:var(--soft); line-height:1.45; }
  .osx-cta{ display:inline-block; padding:15px 30px; border-radius:12px;
    font-weight:800; letter-spacing:.08em; background:var(--red); color:#fff;
    box-shadow:0 12px 34px rgba(255,32,41,.34); transition:transform .18s ease; }
  .osx-cta:hover{ transform:translateY(-2px); }
  .osx-fin{ text-align:center; }
  .osx-lien{ display:inline-block; margin-left:12px; padding:15px 22px;
    border-radius:12px; font-weight:800; letter-spacing:.04em; font-size:.92em;
    color:#e8eaf2; border:1px solid var(--glass-line);
    transition:border-color .18s ease, color .18s ease; }
  .osx-lien:hover{ color:#fff; border-color:rgba(255,255,255,.34); }
  .osx-fin span{ display:block; margin-top:9px; font-size:11.5px; color:var(--soft); }
  .osx-fin code{ font-family:ui-monospace,Menlo,Consolas,monospace; color:#cfd3de; }

  @media (max-width:860px){
    .osx-grid{ grid-template-columns:repeat(2,1fr); }
    /* Sur telephone le debord n'a plus de sens : l'ecran EST la colonne.
       Et la capture d'accueil reprend sa place dans le flux. */
    .osx{ width:auto; margin-left:0; border-radius:14px; }
    .osx-shots{ grid-template-columns:1fr; }
    .osx-shots .big{ grid-row:auto; }
  }
  .u-line{ height:3px; width:78px; margin:16px auto 0; border-radius:3px; background:linear-gradient(90deg,var(--red),var(--magenta),var(--cyan)); background-size:200% 100%; animation:slide 5s linear infinite; box-shadow:0 0 16px rgba(255,32,41,.4); }
  .u-line.l{ margin-left:0; }
  @keyframes slide{ to{ background-position:200% 0; } }

  /* buttons */
  .btn{ position:relative; display:inline-flex; align-items:center; gap:9px; font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
    font-size:.95rem; padding:15px 28px; border-radius:12px; background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff;
    box-shadow:0 10px 30px -8px var(--glow); transition:transform .12s ease, box-shadow .25s ease; overflow:hidden; }
  .btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.4),transparent 70%); transform:translateX(-120%); transition:transform .55s; }
  .btn:hover{ transform:translateY(-3px); box-shadow:0 18px 48px -8px var(--glow); }
  .btn:hover::after{ transform:translateX(120%); }
  .btn:active{ transform:translateY(-1px); }
  .btn.ghost{ background:var(--glass); border:1px solid var(--glass-line); box-shadow:none; backdrop-filter:blur(6px); }
  .btn.ghost:hover{ border-color:var(--cyan); box-shadow:0 12px 34px -12px rgba(34,228,228,.5); }
  .btn.dc{ background:linear-gradient(135deg,#5865F2,#3b45c9); box-shadow:0 10px 30px -8px rgba(88,101,242,.6); }
  .btn.dc:hover{ box-shadow:0 18px 48px -8px rgba(88,101,242,.8); }
  .dcount{ display:inline-flex; align-items:center; gap:9px; margin-top:18px; font-size:.86rem; color:#cdd0e6; background:rgba(88,101,242,.12); border:1px solid rgba(88,101,242,.4); padding:9px 16px; border-radius:999px; transition:border-color .2s, background .2s, transform .12s; }
  .dcount:hover{ border-color:#5865F2; background:rgba(88,101,242,.22); transform:translateY(-2px); }
  .dcount b{ color:#fff; font-style:italic; }
  .dc-dot{ width:9px; height:9px; border-radius:50%; background:#2FD36B; box-shadow:0 0 10px #2FD36B; animation:lpulse 1.8s infinite; }

  #prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60; background:linear-gradient(90deg,var(--red),var(--magenta),var(--cyan)); box-shadow:0 0 12px var(--glow); }

  /* NAV */
  nav{ position:sticky; top:0; z-index:50; background:rgba(5,5,6,.72); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid rgba(255,255,255,.06); }
  .nav-in{ max-width:var(--wrap); margin:0 auto; padding:11px 22px; display:flex; align-items:center; gap:16px; }
  .nav-in .badge{ height:36px; width:auto; }
  .nav-links{ margin-left:auto; display:flex; align-items:center; gap:2px; }
  .nav-links a{ font-style:italic; font-weight:800; text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; color:var(--soft); padding:9px 12px; border-radius:9px; transition:color .15s; }
  .nav-links a:hover{ color:#fff; }
  .nav-links a.hp{ position:relative; }
  .nav-links a.hp.active{ color:#fff; }
  .nav-links a.hp.active::after{ content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; background:var(--red); border-radius:2px; box-shadow:0 0 8px var(--glow); }
  .nav-links a.cta{ color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); box-shadow:0 8px 22px -8px var(--glow); }
  @media (max-width:840px){ .nav-links a.hp{ display:none; } }

  /* HERO */
  .hero{ position:relative; min-height:94vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); }
  .hero-bg{ position:absolute; inset:-4% ; z-index:0; background:url('img/hero.jpg?v=3') center 45%/cover no-repeat; transform:scale(1.06); animation:kb 26s ease-in-out infinite alternate; will-change:transform; }
  @keyframes kb{ from{ transform:scale(1.06) translateY(0);} to{ transform:scale(1.16) translateY(-2%);} }
  .blobs{ position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; filter:blur(60px); }
  .blob{ position:absolute; width:42vw; height:42vw; max-width:520px; max-height:520px; border-radius:50%; opacity:.5; }
  .blob.a{ background:var(--red); left:6%; top:14%; animation:drift1 18s ease-in-out infinite; }
  .blob.b{ background:var(--cyan); right:4%; top:8%; opacity:.32; animation:drift2 22s ease-in-out infinite; }
  .blob.c{ background:var(--magenta); left:40%; bottom:-6%; opacity:.28; animation:drift3 20s ease-in-out infinite; }
  @keyframes drift1{ 50%{ transform:translate(8%,10%) scale(1.15);} }
  @keyframes drift2{ 50%{ transform:translate(-10%,12%) scale(1.1);} }
  @keyframes drift3{ 50%{ transform:translate(12%,-8%) scale(1.2);} }
  .hero .veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(95% 78% at 50% 46%, transparent 26%, rgba(5,5,6,.62)),
              linear-gradient(rgba(5,5,6,.6), rgba(5,5,6,.1) 30%, rgba(5,5,6,.3) 60%, rgba(5,5,6,.98)); }
  .hero-in{ position:relative; z-index:3; padding:80px 22px; max-width:920px; }
  .hero .logo{ width:min(580px,90%); margin:0 auto; filter:drop-shadow(0 14px 46px rgba(255,32,41,.4)); animation:rise 1s .1s both, float 6s 1.1s ease-in-out infinite; }
  @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
  @keyframes rise{ from{ opacity:0; transform:translateY(28px) scale(.96);} to{ opacity:1; transform:none;} }
  .hero .tag{ display:inline-block; margin-top:20px; font-family:var(--mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:#fff; padding:7px 15px; border:1px solid var(--glass-line); border-radius:999px; background:var(--glass); backdrop-filter:blur(6px); animation:rise .8s .35s both; }
  .hero .tag b{ color:var(--red); }
  .hero .lead{ margin:22px auto 0; max-width:50ch; font-size:clamp(1.06rem,2.2vw,1.32rem); animation:rise .8s .5s both; }
  .hero .lead .r{ color:var(--red); font-weight:700; }
  .hero .cta{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:30px; animation:rise .8s .65s both; }
  .socials{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:28px; animation:rise .8s .8s both; }
  .soc{ display:inline-grid; place-items:center; width:46px; height:46px; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); backdrop-filter:blur(6px); transition:transform .14s, border-color .18s, box-shadow .2s; }
  .soc svg{ width:21px; height:21px; fill:#e9e9ee; transition:fill .15s; }
  .soc:hover{ transform:translateY(-4px); border-color:var(--c); box-shadow:0 12px 26px -12px var(--c); }
  .soc:hover svg{ fill:var(--c); }
  .scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; color:var(--soft); font-family:var(--mono); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; animation:rise .8s 1s both; }
  .scroll-cue .m{ width:20px; height:32px; border:2px solid #33333c; border-radius:12px; position:relative; }
  .scroll-cue .m::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:6px; background:var(--red); border-radius:2px; transform:translateX(-50%); animation:wheel 1.6s infinite; }
  @keyframes wheel{ 0%{ opacity:0; transform:translate(-50%,0);} 40%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,10px);} }

  /* TICKER */
  .ticker{ border-block:1px solid rgba(255,255,255,.08); background:linear-gradient(#0b0b0d,#050506); overflow:hidden; }
  .ticker .track{ display:inline-flex; white-space:nowrap; animation:scroll 38s linear infinite; }
  .ticker:hover .track{ animation-play-state:paused; }
  .ticker span{ font-style:italic; font-weight:900; font-size:1.5rem; letter-spacing:.02em; padding:15px 22px; color:#f2f2f5; }
  .ticker i{ font-style:normal; align-self:center; padding:0 4px; }
  @keyframes scroll{ to{ transform:translateX(-50%); } }

  /* STATS */
  .stats{ border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(#0a0a0c,#050506); }
  .stats-in{ max-width:var(--wrap); margin:0 auto; padding:38px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
  @media (max-width:640px){ .stats-in{ grid-template-columns:repeat(2,1fr); gap:28px; } }
  .stat .n{ font-style:italic; font-weight:900; font-size:clamp(2.1rem,5vw,3.2rem); line-height:1; background:linear-gradient(180deg,#fff,#b9b9c4); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat .n .u{ -webkit-text-fill-color:var(--red); color:var(--red); text-shadow:0 0 24px var(--glow); }
  .stat .l{ margin-top:8px; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }

  /* LIVE */
  .live-eyebrow{ display:flex; justify-content:center; align-items:center; gap:10px; font-family:var(--mono); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--soft); }
  .live-dot{ width:9px; height:9px; border-radius:50%; background:#2FD36B; box-shadow:0 0 12px #2FD36B; animation:lpulse 1.6s infinite; }
  @keyframes lpulse{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
  .live-total{ text-align:center; margin-top:14px; color:var(--soft); font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; }
  .live-total b{ color:#fff; font-size:1.15em; }
  .live-list{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
  .lsrv2{ background:var(--glass); border:1px solid var(--glass-line); border-radius:14px; backdrop-filter:blur(8px); overflow:hidden; transition:border-color .2s; }
  .lsrv2.on{ border-color:rgba(47,211,107,.3); }
  .lsrv2.off{ opacity:.6; }
  .lsrv2 summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:13px; padding:15px 18px; }
  .lsrv2 summary::-webkit-details-marker{ display:none; }
  .lsrv2 .st{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; background:#666; }
  .lsrv2.on .st{ background:#2FD36B; box-shadow:0 0 12px #2FD36B; animation:lpulse 1.8s infinite; }
  .lsrv2 .nm{ font-style:italic; font-weight:800; text-transform:uppercase; font-size:.98rem; }
  .lsrv2 .pl{ margin-left:auto; text-align:right; font-style:italic; font-weight:900; font-size:1.2rem; line-height:1; white-space:nowrap; }
  .lsrv2 .pl small{ display:block; font-style:normal; font-weight:600; font-size:.56rem; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); margin-top:3px; }
  .lsrv2 .cars-toggle{ font-family:var(--mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); border:1px solid var(--glass-line); padding:5px 10px; border-radius:999px; white-space:nowrap; transition:color .2s, border-color .2s; }
  .lsrv2[open] .cars-toggle{ color:var(--red); border-color:rgba(255,32,41,.4); }
  .lsrv2 .live-join{ font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:.66rem; padding:7px 12px; border-radius:9px; background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff; white-space:nowrap; box-shadow:0 6px 16px -9px var(--glow); transition:transform .12s ease, filter .2s ease; }
  .lsrv2 .live-join:hover{ transform:translateY(-2px); filter:brightness(1.1); }
  @media (max-width:560px){ .lsrv2 summary{ flex-wrap:wrap; row-gap:10px; } .lsrv2 .nm{ font-size:.9rem; } }
  .carlist{ padding:2px 18px 16px 42px; display:flex; flex-wrap:wrap; gap:7px; max-height:220px; overflow-y:auto; }
  .live-search{ max-width:520px; margin:18px auto 0; }
  .live-search input{ width:100%; font-family:var(--sans); font-size:.95rem; color:#fff; background:var(--glass); border:1px solid var(--glass-line); border-radius:12px; padding:13px 18px; outline:none; transition:border-color .2s, box-shadow .2s; }
  .live-search input::placeholder{ color:var(--soft); }
  .live-search input:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(255,32,41,.15); }
  .live-empty{ text-align:center; color:var(--soft); padding:26px; border:1px dashed var(--glass-line); border-radius:14px; margin-top:24px; }
  /* classement */
  .lb-tabs{ display:flex; justify-content:center; gap:9px; margin-top:26px; flex-wrap:wrap; }
  .lb-tab{ font-family:var(--sans); font-style:italic; font-weight:800; text-transform:uppercase; font-size:.72rem; letter-spacing:.06em;
    color:var(--soft); background:var(--glass); border:1px solid var(--glass-line); padding:9px 16px; border-radius:999px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; }
  .lb-tab:hover{ color:#fff; border-color:rgba(255,255,255,.28); }
  .lb-tab.on{ color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); border-color:transparent; box-shadow:0 8px 22px -10px var(--glow); }
  .lb-wrap{ max-width:760px; margin:22px auto 0; }
  .lb-board{ display:flex; flex-direction:column; gap:8px; color:var(--soft); text-align:center; }
  .lb-row{ display:flex; align-items:center; gap:14px; padding:13px 18px; background:var(--glass); border:1px solid var(--glass-line);
    border-radius:12px; text-align:left; transition:border-color .2s, transform .12s; }
  .lb-row:hover{ border-color:rgba(255,32,41,.4); transform:translateX(3px); }
  .lb-row .pos{ font-style:italic; font-weight:900; font-size:1.1rem; width:38px; flex:0 0 auto; color:var(--soft); }
  .lb-row.top1{ border-color:rgba(255,199,58,.55); background:linear-gradient(100deg,rgba(255,199,58,.10),var(--glass) 60%); }
  .lb-row.top2{ border-color:rgba(203,213,225,.45); }
  .lb-row.top3{ border-color:rgba(205,127,50,.45); }
  .lb-row.top1 .pos{ color:#FFC73A; } .lb-row.top2 .pos{ color:#CBD5E1; } .lb-row.top3 .pos{ color:#CD7F32; }
  .lb-row .who{ flex:1; min-width:0; }
  .lb-row .nm{ font-style:italic; font-weight:800; font-size:1rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lb-row .car{ font-family:var(--mono); font-size:.63rem; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-top:3px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lb-row .where{ font-family:var(--mono); font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; color:#6b6c76; margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lb-row .where::before{ content:"📍 "; }
  .lb-row .val{ text-align:right; font-style:italic; font-weight:900; font-size:1.25rem; color:var(--red); white-space:nowrap; }
  .lb-row .val small{ display:block; font-style:normal; font-weight:600; font-size:.55rem; letter-spacing:.09em; text-transform:uppercase; color:var(--soft); margin-top:2px; }
  @media(max-width:520px){ .lb-row{ padding:11px 13px; gap:10px; } .lb-row .pos{ width:26px; font-size:.95rem; } .lb-row .val{ font-size:1.05rem; } }
  /* Repli du classement : seuls les 5 premiers sont visibles par défaut */
  .lb-rest{ display:flex; flex-direction:column; gap:8px; overflow:hidden; max-height:0; opacity:0;
            transition:max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
  .lb-rest.open{ max-height:3000px; opacity:1; }
  .lb-more{ margin-top:4px; width:100%; padding:12px 18px; cursor:pointer; border-radius:12px;
            background:var(--glass); border:1px solid var(--glass-line); color:#d3d3da;
            font-family:inherit; font-style:italic; font-weight:800; font-size:.82rem;
            letter-spacing:.04em; text-transform:uppercase; transition:.2s; }
  .lb-more:hover{ border-color:rgba(255,32,41,.5); color:#fff; background:rgba(255,32,41,.07); }
  .lb-more .chev{ display:inline-block; margin-left:8px; transition:transform .3s ease; }
  .lb-more.open .chev{ transform:rotate(180deg); }
  .carchip{ font-size:.72rem; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:#d3d3da; text-transform:uppercase; letter-spacing:.03em; }

  /* ---- Video de presentation (clic pour charger : YouTube ne depose rien avant) ---- */
  .vid{ max-width:960px; margin:34px auto 0; }
  .vid-box{ position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#000; border:1px solid rgba(255,255,255,.1);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 60px -20px var(--glow); }
  .vid-box img, .vid-box iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
  .vid-play{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55)); display:grid; place-items:center; color:#fff; font:inherit; }
  .vid-play i{ width:92px; height:92px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--red),var(--red-deep)); box-shadow:0 14px 40px -10px var(--glow); transition:transform .18s ease; }
  .vid-play i::before{ content:""; margin-left:7px; border-style:solid; border-width:15px 0 15px 26px; border-color:transparent transparent transparent #fff; }
  .vid-play:hover i, .vid-play:focus-visible i{ transform:scale(1.09); }
  .vid-play span{ position:absolute; left:22px; bottom:16px; right:22px; text-align:left; font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; text-shadow:0 2px 12px rgba(0,0,0,.9); }
  .vid-sub{ margin:14px 0 0; text-align:center; font-size:.9rem; color:var(--soft); }
  .vid-sub a{ color:var(--red); font-weight:700; } .vid-sub a:hover{ text-decoration:underline; }
  @media(max-width:600px){ .vid-play i{ width:70px; height:70px; } .vid-play i::before{ border-width:12px 0 12px 20px; margin-left:5px; } .vid-play span{ font-size:.74rem; left:14px; bottom:10px; } }
  /* ---- Nos apps ---- */
  .appgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;
            max-width:1120px; margin:34px auto 0; align-items:stretch; }
  .appcard{ display:flex; flex-direction:column; background:var(--glass);
            border:1px solid var(--glass-line); border-radius:20px; overflow:hidden;
            transition:border-color .25s, transform .25s; }
  .appcard:hover{ border-color:rgba(255,32,41,.34); transform:translateY(-3px); }
  /* Tout est en % : le montage suit la largeur de la carte, quelle qu'elle soit.
     En px il restait cale sur 760 et debordait des 1/2 colonnes. */
  .appshots{ position:relative; aspect-ratio:16/9; overflow:hidden;
             background:radial-gradient(120% 100% at 70% 10%, rgba(255,32,41,.13), transparent 62%), #08080b; }
  .appshots img{ position:absolute; display:block; height:auto; }
  /* HUD : places comme en jeu, les trois EN ENTIER (demande de SHOOTKAM,
     28/09) -- la barre en haut a gauche, les pedales dessous, la fenetre
     (verticale, 240x380) a droite. Hauteurs en % de la carte 16:9 : barre
     10-46 %, pedales 49-94 %, fenetre 7-77 %. */
  .sh-fen{ right:4%; top:7%; width:25%; z-index:2; filter:drop-shadow(0 14px 30px rgba(0,0,0,.65)); }
  .sh-ped{ left:4%; bottom:6%; width:48%; opacity:.95; }
  .sh-bar{ left:4%; top:10%; width:60%; z-index:2; filter:drop-shadow(0 14px 30px rgba(0,0,0,.65)); }
  .sh-fade{ position:absolute; inset:0; pointer-events:none; z-index:3;
            background:linear-gradient(180deg, rgba(8,8,11,.42) 0%, transparent 22%, transparent 62%, var(--glass) 99%); }
  /* Dashboard SimHub : une seule image, montree en entier.
     height:auto est indispensable, sinon l'attribut height de la balise
     l'emporte sur width:100% et l'image est ecrasee. */
  /* Montage des styles : meme principe que les trois compteurs de la carte
     voisine — les images se chevauchent et leurs bords se dissolvent dans le
     noir, au lieu d'etre des rectangles encadres poses sur un fond clair. */
  .appshots.one{ background:#050508; }
  .sh-dA{ left:-9%; top:-7%; width:64%; opacity:.42;
          -webkit-mask-image:radial-gradient(closest-side, #000 46%, transparent 96%);
                  mask-image:radial-gradient(closest-side, #000 46%, transparent 96%); }
  .sh-dB{ right:-11%; bottom:-9%; width:60%; opacity:.36;
          -webkit-mask-image:radial-gradient(closest-side, #000 42%, transparent 94%);
                  mask-image:radial-gradient(closest-side, #000 42%, transparent 94%); }
  .sh-dC{ left:9%; top:15%; width:74%; z-index:2; filter:drop-shadow(0 18px 34px rgba(0,0,0,.8));
          -webkit-mask-image:radial-gradient(120% 108% at 42% 46%, #000 56%, transparent 99%);
                  mask-image:radial-gradient(120% 108% at 42% 46%, #000 56%, transparent 99%); }
  .appshots.one .sh-fade{ background:linear-gradient(180deg, rgba(5,5,8,.5) 0%, transparent 26%, transparent 66%, var(--glass) 100%); }
  @media(max-width:640px){
    /* Sur mobile seul celui de devant reste lisible ; les deux autres ne sont
       plus que des indices de couleur. */
    .sh-dA{ opacity:.24; }
    .sh-dB{ opacity:.20; }
    .sh-dC{ left:5%; width:84%; top:13%; }
  }
  .appbody{ padding:22px 24px 24px; position:relative; display:flex; flex-direction:column; flex:1; }
  .appbody h3{ font-style:italic; font-weight:900; font-size:1.42rem; margin:6px 0 10px; }
  .appbody p{ color:#b9b9c4; font-size:.92rem; line-height:1.62; margin:0 0 14px; }
  .appfeat{ list-style:none; padding:0; margin:0 0 20px; flex:1; }
  .appfeat li{ font-size:.84rem; color:#9a9aa6; padding:5px 0 5px 20px; position:relative; }
  .appfeat li::before{ content:"›"; position:absolute; left:4px; color:var(--red); font-weight:900; font-style:italic; }
  .appbody .btn{ align-self:flex-start; }
  .appnote{ margin-top:14px; font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; color:#6b6c76; }
  .appnote a{ color:var(--red); font-weight:700; }
  .appnote a:hover{ text-decoration:underline; }
  @media(max-width:900px){
    .appgrid{ grid-template-columns:minmax(0,1fr); max-width:640px; gap:20px; }
  }

  /* reveal */
  .reveal{ opacity:0; transform:translateY(34px) scale(.985); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:.09s; } .reveal.d2{ transition-delay:.18s; } .reveal.d3{ transition-delay:.27s; }

  .glass{ background:var(--glass); border:1px solid var(--glass-line); border-radius:18px; backdrop-filter:blur(8px); }

  /* interactive card glow (follows cursor) */
  .lift{ position:relative; }
  .lift::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; opacity:0; transition:opacity .3s;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,32,41,.20), rgba(34,228,228,.10) 45%, transparent 70%); }
  .lift:hover::before{ opacity:1; }
  .lift>*{ position:relative; z-index:1; }

  /* BIENVENUE */
  .welcome{ text-align:center; }
  .welcome p{ max-width:62ch; margin:14px auto 0; font-size:1.1rem; }
  .welcome p .r{ color:var(--red); font-weight:600; }

  /* SERVERS */
  .servers-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; }
  @media (max-width:840px){ .servers-grid{ grid-template-columns:repeat(2,1fr); } }
  .srv{ padding:22px 20px; border-radius:16px; overflow:hidden; background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
    border:1px solid var(--glass-line); transition:transform .16s, border-color .2s, box-shadow .25s; }
  .srv:hover{ transform:translateY(-6px); border-color:rgba(255,32,41,.55); box-shadow:0 26px 50px -24px var(--glow); }
  .srv .no{ position:absolute; right:14px; top:8px; font-style:italic; font-weight:900; font-size:3rem; color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.10); }
  .srv .k{ font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.4rem; }
  .srv .k .r{ color:var(--red); }
  .srv .m{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); margin-top:5px; }
  .srv .tag{ display:inline-block; margin-top:16px; font-style:italic; font-weight:800; font-size:.7rem; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--red),var(--red-deep)); padding:5px 12px; border-radius:7px; box-shadow:0 6px 18px -8px var(--glow); }
  .srv .joinbtn{ display:block; margin-top:14px; text-align:center; font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:.03em; font-size:.78rem; padding:10px 12px; border-radius:10px; background:linear-gradient(135deg,var(--red),var(--red-deep)); color:#fff; box-shadow:0 8px 22px -10px var(--glow); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; }
  .srv .joinbtn::before{ content:"▸ "; }
  .srv .joinbtn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -10px var(--glow); filter:brightness(1.08); }
  .srv-hint{ text-align:center; color:var(--soft); font-size:.9rem; margin:22px 0 0; }
  .srv-hint a{ color:var(--red); font-weight:700; }
  .srv-hint a:hover{ text-decoration:underline; }
  /* soutenir */
  .sup-cta{ display:flex; justify-content:center; margin-top:28px; }
  /* FAQ + events */
  .ev-cta{ display:flex; justify-content:center; margin-top:30px; }
  .faq-list{ max-width:820px; margin:34px auto 0; display:flex; flex-direction:column; gap:12px; }
  .faq{ background:var(--glass); border:1px solid var(--glass-line); border-radius:14px; overflow:hidden; transition:border-color .2s; }
  .faq[open]{ border-color:rgba(255,32,41,.4); }
  .faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px; font-style:italic; font-weight:800; text-transform:uppercase; font-size:1rem; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::before{ content:"+"; color:var(--red); font-size:1.5rem; font-style:normal; line-height:1; transition:transform .2s; flex:0 0 auto; }
  .faq[open] summary::before{ transform:rotate(45deg); }
  .faq .a{ padding:0 20px 20px 52px; color:#c9cad2; }
  .faq .a a{ color:var(--red); font-weight:700; }
  .faq .a a:hover{ text-decoration:underline; }

  .bands{ margin-top:20px; display:flex; flex-direction:column; gap:16px; }
  .band{ position:relative; min-height:210px; border-radius:18px; overflow:hidden; border:1px solid var(--glass-line); display:flex; align-items:center;
    background-size:cover; background-position:center; transition:transform .25s, box-shadow .3s;
    background-image:linear-gradient(90deg,#141418,#050506); }
  .band.b1{ background-image:linear-gradient(90deg,rgba(5,5,6,.95) 22%,rgba(5,5,6,.28)),url('img/srv-canyons.webp?v=1'); }
  .band.b2{ background-image:linear-gradient(90deg,rgba(5,5,6,.95) 22%,rgba(5,5,6,.28)),url('img/srv-tsukuba.webp?v=1'); }
  .band.b3{ background-image:linear-gradient(90deg,rgba(5,5,6,.95) 22%,rgba(5,5,6,.28)),url('img/srv-nurburgring.webp?v=1'); }
  .band:hover{ box-shadow:0 26px 60px -30px var(--glow); }
  .band .b-in{ padding:28px 34px; z-index:2; }
  .band .b-in .ttl{ font-size:clamp(1.6rem,4.5vw,2.7rem); }
  .band .b-in .d{ color:#c9c9d0; margin:5px 0 16px; font-size:.95rem; }

  /* CARS */
  .cars{ text-align:center; }
  .cargrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(216px,1fr)); gap:14px; max-width:980px; margin:26px auto 0; }
  .carcard{ position:relative; aspect-ratio:16/11; border-radius:15px; overflow:hidden; border:1px solid var(--glass-line); transition:transform .18s, border-color .2s, box-shadow .25s; }
  .carcard .img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .carcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(5,5,6,.92), rgba(5,5,6,.05) 58%); }
  .carcard .cn{ position:absolute; left:15px; right:15px; bottom:12px; z-index:2; text-align:left; font-style:italic; font-weight:800; text-transform:uppercase; font-size:1rem; text-shadow:0 2px 12px rgba(0,0,0,.6); }
  .carcard .cn i{ display:block; font-style:normal; font-weight:600; font-size:.66rem; letter-spacing:.12em; color:var(--soft); margin-top:3px; }
  .carcard:hover{ transform:translateY(-6px); border-color:rgba(255,32,41,.6); box-shadow:0 26px 48px -24px var(--glow); }
  .carcard:hover .img{ transform:scale(1.08); }

  /* Galerie compacte : les rendus restent visibles sans prendre toute la page */
  .car-strip{ position:relative; margin:26px auto 0; overflow:hidden; border:1px solid var(--glass-line); border-radius:16px; max-width:980px; background:#09090b; }
  .car-strip::before,.car-strip::after{ content:""; position:absolute; z-index:2; top:0; bottom:0; width:72px; pointer-events:none; }
  .car-strip::before{ left:0; background:linear-gradient(90deg,#09090b,transparent); }
  .car-strip::after{ right:0; background:linear-gradient(-90deg,#09090b,transparent); }
  .car-strip-track{ display:flex; gap:8px; padding:8px; width:max-content; animation:carstrip 48s linear infinite; }
  .car-strip:hover .car-strip-track{ animation-play-state:paused; }
  .car-strip span{ display:block; width:210px; height:132px; flex:0 0 auto; border-radius:10px; background:center/cover no-repeat; filter:saturate(.9) contrast(1.05); transition:filter .2s, transform .2s; }
  .car-strip span:hover{ filter:saturate(1.2) contrast(1.08); transform:scale(1.03); }
  @keyframes carstrip{ to{ transform:translateX(-50%); } }
  @media(max-width:620px){ .car-strip{ margin-top:20px; border-radius:12px; } .car-strip-track{ gap:6px; padding:6px; } .car-strip span{ width:155px; height:100px; } .car-strip::before,.car-strip::after{ width:38px; } }

  /* FILTRE SHOOTKAM (ex-pack graphique) */
  .gfx{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--glass-line); text-align:center;
    background:linear-gradient(rgba(5,5,6,.72),rgba(5,5,6,.9)),url('img/graphique.jpg') center/cover no-repeat;
    padding:clamp(44px,7vw,76px) 24px; box-shadow:0 30px 70px -40px var(--glow); }
  .gfx .ttl{ font-size:clamp(2rem,6vw,3.4rem); }
  .gfx p{ max-width:52ch; margin:14px auto 0; color:#D7D7DD; }
  .gfx p b{ color:#fff; }
  .gfx-cta{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:28px; }

  /* SETUP */
  .setup-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
  @media (max-width:900px){ .setup-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
  .rig{ border-radius:20px; padding:26px 24px; overflow:hidden; background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); border:1px solid var(--glass-line); transition:transform .18s, border-color .2s, box-shadow .25s; }
  .rig:hover{ transform:translateY(-6px); border-color:rgba(255,32,41,.5); box-shadow:0 28px 56px -26px var(--glow); }
  .rig.feat{ border-color:rgba(255,32,41,.45); background:linear-gradient(165deg,rgba(255,32,41,.12),rgba(34,228,228,.04)); }
  .rig .kick{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
  .rig.feat .kick{ color:var(--amber); }
  .rig h3{ margin:6px 0 2px; font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.5rem; }
  .rig .badge2{ display:inline-block; margin-bottom:14px; font-size:.72rem; color:var(--soft); font-family:var(--mono); letter-spacing:.06em; }
  .rig ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .rig li{ display:flex; justify-content:space-between; gap:14px; font-size:.86rem; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.06); }
  .rig li:last-child{ border-bottom:0; padding-bottom:0; }
  .rig li .k{ color:var(--soft); font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
  .rig li .v{ font-weight:600; text-align:right; }

  .two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px; }
  @media (max-width:760px){ .two{ grid-template-columns:1fr; } }
  .card{ padding:28px; display:flex; flex-direction:column; }
  .card h3{ margin:0 0 4px; font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.25rem; }
  .card p{ margin:0 0 16px; color:var(--soft); font-size:.92rem; }
  .pill{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; font-weight:800; font-size:.88rem; color:#fff; margin:6px 8px 0 0; transition:transform .14s, filter .15s, box-shadow .2s; }
  .pill:hover{ transform:translateY(-3px); filter:brightness(1.12); box-shadow:0 12px 26px -12px currentColor; }

  /* social tiles + spotify */
  .socgrid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px; flex:1; grid-auto-rows:1fr; }
  .soctile{ display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:14px; color:#fff; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.14); transition:transform .15s, box-shadow .25s, border-color .2s; }
  .soctile svg{ width:26px; height:26px; fill:#fff; flex:0 0 auto; }
  .soctile .h{ font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.02rem; line-height:1.05; }
  .soctile .h small{ display:block; font-style:normal; font-weight:600; font-size:.64rem; letter-spacing:.05em; opacity:.82; }
  .soctile::after{ content:"→"; margin-left:auto; opacity:.5; font-weight:700; transition:transform .2s, opacity .2s; }
  .soctile:hover{ transform:translateY(-4px); }
  .soctile:hover::after{ transform:translateX(3px); opacity:1; }
  .soctile.yt{ background:linear-gradient(135deg,#FF2A2A,#B80000); } .soctile.yt:hover{ box-shadow:0 18px 36px -14px rgba(255,0,0,.7); }
  .soctile.tk{ background:linear-gradient(135deg,#1c1c22,#050506); } .soctile.tk:hover{ box-shadow:0 18px 36px -14px rgba(37,244,238,.55); border-color:rgba(37,244,238,.5); }
  .soctile.tw{ background:linear-gradient(135deg,#9146FF,#6524c8); } .soctile.tw:hover{ box-shadow:0 18px 36px -14px rgba(145,70,255,.75); }
  .soctile.kk{ background:linear-gradient(135deg,#53FC18,#33c406); color:#052a00; } .soctile.kk svg{ fill:#052a00; } .soctile.kk:hover{ box-shadow:0 18px 36px -14px rgba(83,252,24,.7); }
  .spot{ margin-top:18px; border-radius:14px; overflow:hidden; border:1px solid var(--glass-line); }
  .spot iframe{ display:block; width:100%; height:352px; border:0; }

  .aff{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; }
  @media (max-width:640px){ .aff{ grid-template-columns:1fr; } }
  .affcard{ display:flex; flex-direction:column; gap:8px; text-align:center; align-items:center; padding:32px; border-radius:20px;
    background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); border:1px solid var(--glass-line); transition:transform .18s, border-color .2s, box-shadow .25s; }
  .affcard:hover{ transform:translateY(-6px); border-color:rgba(34,228,228,.5); box-shadow:0 28px 56px -26px rgba(34,228,228,.35); }
  .affcard .n{ font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.35rem; } .affcard .n .r{ color:var(--red); }
  .affcard .s{ color:var(--soft); font-size:.88rem; max-width:34ch; }

  /* AFFILIÉS — logos + visuels */
  .ac2{ display:flex; flex-direction:column; border-radius:20px; overflow:hidden; border:1px solid var(--glass-line);
    background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015)); transition:transform .18s, border-color .2s, box-shadow .25s; }
  .ac2:hover{ transform:translateY(-6px); }
  .ac2.moza:hover{ border-color:rgba(255,32,41,.5); box-shadow:0 28px 56px -26px var(--glow); }
  .ac2.ig:hover{ border-color:rgba(255,138,21,.55); box-shadow:0 28px 56px -26px rgba(255,120,20,.5); }
  .ac2 .vis{ position:relative; height:180px; overflow:hidden; display:grid; place-items:center; }
  .ac2 .vis::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 52%, rgba(5,5,6,.9)); }
  .ac2.ig .vis{ background:radial-gradient(130% 130% at 50% 0%, #3a1808, #0b0a0c 72%); }
  .ac2.ig .vis img{ position:relative; z-index:1; width:min(66%,250px); filter:drop-shadow(0 8px 24px rgba(255,120,20,.4)); }
  .ac2.moza .vis .ph{ position:absolute; inset:0; background:url('img/moza.jpg') center/cover; transition:transform .5s; }
  .ac2.moza:hover .vis .ph{ transform:scale(1.05); }
  .ac2 .body{ padding:20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .ac2 .brand{ font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.3rem; letter-spacing:.01em; }
  .ac2 .brand .r{ color:var(--red); }
  .ac2.ig .brand .r{ color:var(--amber); }
  .ac2 .price{ display:flex; align-items:baseline; gap:10px; margin:2px 0; }
  .ac2 .price .new{ font-style:italic; font-weight:900; font-size:1.65rem; color:#fff; }
  .ac2 .price .old{ color:var(--soft); text-decoration:line-through; font-size:.92rem; }
  .ac2 .price .off{ font-family:var(--mono); font-weight:700; font-size:.72rem; color:#fff; background:linear-gradient(135deg,#ff8a15,#ff3131); padding:3px 8px; border-radius:6px; }
  .ac2 .desc{ color:var(--soft); font-size:.9rem; }
  .ac2 .cta{ margin-top:auto; padding-top:14px; }
  .ac2 .cta span{ display:inline-flex; align-items:center; font-style:italic; font-weight:800; text-transform:uppercase; font-size:.82rem; letter-spacing:.03em; padding:11px 20px; border-radius:11px; color:#fff; }
  .ac2.ig .cta span{ background:linear-gradient(135deg,#ff8a15,#ff3131); box-shadow:0 10px 26px -10px rgba(255,90,20,.6); }
  .ac2.moza .cta span{ background:linear-gradient(135deg,var(--red),var(--red-deep)); box-shadow:0 10px 26px -10px var(--glow); }
  .ac2:hover .cta span{ filter:brightness(1.09); }

  footer{ border-top:1px solid rgba(255,255,255,.06); background:#030304; }
  .foot{ max-width:var(--wrap); margin:0 auto; padding:40px 22px; display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; justify-content:space-between; }
  .foot .badge{ height:44px; }
  .foot .fl{ display:flex; flex-wrap:wrap; gap:16px; }
  .foot .fl a{ color:var(--soft); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; transition:color .15s; }
  .foot .fl a:hover{ color:var(--red); }
  .foot .cp{ color:#4a4a52; font-size:.76rem; width:100%; }

  /* LIGHTBOX */
  .carcard{ cursor:zoom-in; }
  .lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out; background:rgba(4,4,6,.93); backdrop-filter:blur(10px); }
  .lightbox.open{ display:flex; animation:lbfade .25s ease; }
  @keyframes lbfade{ from{ opacity:0; } to{ opacity:1; } }
  .lightbox img{ max-width:min(94vw,1100px); max-height:80vh; border-radius:14px; border:1px solid var(--glass-line); box-shadow:0 40px 120px -30px #000, 0 0 70px -20px var(--glow); }
  .lb-cap{ position:absolute; left:0; right:0; bottom:26px; text-align:center; font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.15rem; color:#fff; text-shadow:0 2px 14px #000; pointer-events:none; }
  .lb-cap i{ display:block; font-style:normal; font-weight:600; font-size:.7rem; letter-spacing:.14em; color:#b9b9c4; margin-top:4px; }
  .lb-close{ position:absolute; top:18px; right:22px; width:46px; height:46px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-line); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; transition:background .15s, transform .1s; }
  .lb-close:hover{ background:rgba(255,32,41,.25); transform:scale(1.06); }

  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .spotlight{ display:none; }
  }

/* ===== effets (ancien <style id="fx">) ===== */
/* ANIMATIONS v2 — bloc autonome : tout se retire en supprimant ce <style> et le <script id="fx-js"> en bas.
   Rien n'est anime si le visiteur a coupe les animations dans son systeme. On n'anime que transform /
   translate / opacity (pas de recalcul de mise en page), sauf la petite ligne rouge sous les titres. */
/* fonds des 7 serveurs = leur ecran de chargement en jeu (dossier "ecran de chargement") */
.servers-grid .srv{ background-size:cover; background-position:center; }
.servers-grid .srv:nth-child(1){ background-image:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,.5) 55%,rgba(5,5,6,.82)),url('img/srv-street1.webp?v=1'); }
.servers-grid .srv:nth-child(2){ background-image:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,.5) 55%,rgba(5,5,6,.82)),url('img/srv-street2.webp?v=1'); }
.servers-grid .srv:nth-child(3){ background-image:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,.5) 55%,rgba(5,5,6,.82)),url('img/srv-hypercar.webp?v=1'); }
.servers-grid .srv:nth-child(4){ background-image:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,.5) 55%,rgba(5,5,6,.82)),url('img/srv-oldtimer.webp?v=1'); }
.band.b1,.band.b2,.band.b3{ background-position:center 0%; }
.band.b1{ background-image:linear-gradient(90deg,rgba(5,5,6,.96) 0,rgba(5,5,6,.9) 22%,rgba(5,5,6,.12) 42%,rgba(5,5,6,.05)),url('img/srv-canyons.webp?v=1'); }
.band.b2{ background-image:linear-gradient(90deg,rgba(5,5,6,.96) 0,rgba(5,5,6,.9) 22%,rgba(5,5,6,.12) 42%,rgba(5,5,6,.05)),url('img/srv-tsukuba.webp?v=1'); }
.band.b3{ background-image:linear-gradient(90deg,rgba(5,5,6,.96) 0,rgba(5,5,6,.9) 22%,rgba(5,5,6,.12) 42%,rgba(5,5,6,.05)),url('img/srv-nurburgring.webp?v=1'); }
/* MOBILE : menu hamburger + haut de page plus lisible */
.nav-burger{ display:none; }
.mnav{ display:none; }
@media (max-width:840px){
  .nav-in{ gap:10px; }
  .nav-links a:not(.cta){ display:none; }
  .nav-burger{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:46px; height:46px; flex:0 0 auto; padding:0;
    border-radius:12px; border:1px solid var(--glass-line); background:var(--glass); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .nav-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s; }
  .nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mnav{ display:block; position:fixed; left:0; right:0; top:var(--navh,60px); bottom:0; z-index:49; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px 16px 40px; background:rgba(5,5,6,.97); backdrop-filter:blur(16px);
    opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s; }
  .mnav.open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .mnav-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .mnav a{ display:flex; align-items:center; min-height:54px; padding:0 16px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-line);
    font-style:italic; font-weight:800; text-transform:uppercase; font-size:.92rem; letter-spacing:.04em; color:#fff; }
  .mnav a.active{ border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset, 0 10px 26px -12px var(--glow); }
  .mnav a.wide{ grid-column:1 / -1; justify-content:center; background:linear-gradient(135deg,var(--red),var(--red-deep)); border-color:transparent; }
  .mnav a.dc2{ grid-column:1 / -1; justify-content:center; background:linear-gradient(135deg,#5865F2,#3b45c9); border-color:transparent; }
  html.mnav-lock .mnav{ overscroll-behavior:contain; }
}
@media (prefers-reduced-motion:no-preference) and (max-width:840px){
  .mnav a{ opacity:0; transform:translateY(14px); }
  .mnav.open a{ opacity:1; transform:none; transition:opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1), border-color .2s; transition-delay:calc(var(--k,0) * 38ms + 80ms); }
}
@media (max-width:640px){
  .hero-in{ padding:56px 16px 90px; }
  .hero .tag{ font-size:.6rem; letter-spacing:.18em; padding:7px 12px; background:rgba(5,5,6,.55); backdrop-filter:blur(4px); }
  .hero .lead{ padding:14px 16px; border-radius:16px; background:rgba(5,5,6,.58); backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,.08);
    text-shadow:0 2px 12px #000; font-size:1.02rem; line-height:1.55; }
  .hero .veil{ background:radial-gradient(95% 78% at 50% 46%, transparent 10%, rgba(5,5,6,.7)), linear-gradient(rgba(5,5,6,.65), rgba(5,5,6,.35) 35%, rgba(5,5,6,.5) 62%, rgba(5,5,6,.98)); }
  .hero .cta .btn{ width:100%; justify-content:center; }
}
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  /* titres : balayage de gauche a droite */
  /* le masque est sur un <span> interne (ajoute par le script) : sur le h2 lui-meme, l'observateur de scroll ne le verrait jamais */
  h2.ttl.reveal .fx-w{ display:inline-block; clip-path:inset(-25% 100% -25% -4%); transition:clip-path .95s cubic-bezier(.65,0,.2,1) .1s; }
  h2.ttl.reveal.in .fx-w{ clip-path:inset(-25% -4% -25% -4%); }
  /* la ligne rouge se trace */
  .u-line.reveal{ width:0; transition:opacity .6s, width .9s cubic-bezier(.65,0,.2,1) .25s; }
  .u-line.reveal.in{ width:78px; }

  /* hero : parallaxe a la souris et au scroll (translate = propriete independante de transform) */
  .hero-in{ translate:var(--mx2,0px) var(--hy,0px); opacity:var(--ho,1); }
  .blobs{ translate:calc(var(--mx2,0px) * -1.6) calc(var(--my2,0px) * -1.6); }
  .hero-bg{ translate:calc(var(--mx2,0px) * .5) calc(var(--my2,0px) * .5); }
  /* traits de vitesse qui filent derriere le logo */
  .fx-streak{ position:absolute; z-index:2; left:0; width:38vw; height:2px; border-radius:2px; pointer-events:none; opacity:0;
    background:linear-gradient(90deg,transparent,rgba(255,32,41,.85) 72%,#fff); filter:drop-shadow(0 0 7px #ff2029);
    transform:translateX(-45vw); animation:fxstreak 8s ease-in infinite; }
  @keyframes fxstreak{ 0%{ transform:translateX(-45vw); opacity:0; } 5%{ opacity:.95; } 15%{ transform:translateX(125vw); opacity:0; } 100%{ transform:translateX(125vw); opacity:0; } }

  /* cartes : inclinaison 3D sous la souris */
  .fx-tilt.fx-live{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)) !important;
    transition:transform .16s ease-out, border-color .2s, box-shadow .25s, opacity .8s !important; }

  /* classement : les lignes arrivent en cascade, le podium respire */
  @keyframes fxrow{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
  @keyframes fxgold{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,199,58,0); } 50%{ box-shadow:0 0 32px -8px rgba(255,199,58,.6); } }
  @keyframes fxsilv{ 0%,100%{ box-shadow:0 0 0 0 rgba(203,213,225,0); } 50%{ box-shadow:0 0 24px -9px rgba(203,213,225,.5); } }
  @keyframes fxbron{ 0%,100%{ box-shadow:0 0 0 0 rgba(205,127,50,0); } 50%{ box-shadow:0 0 24px -9px rgba(205,127,50,.55); } }
  .lb-row.top1{ animation:fxgold 3.2s ease-in-out infinite; }
  .lb-row.top2{ animation:fxsilv 3.6s ease-in-out .4s infinite; }
  .lb-row.top3{ animation:fxbron 4s ease-in-out .8s infinite; }
  .lb-board.fx-in .lb-row{ animation:fxrow .55s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i,0) * 70ms); }
  .lb-board.fx-in .lb-row.top1{ animation:fxrow .55s cubic-bezier(.2,.7,.2,1) backwards, fxgold 3.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * 70ms), 0s; }
  .lb-board.fx-in .lb-row.top2{ animation:fxrow .55s cubic-bezier(.2,.7,.2,1) backwards, fxsilv 3.6s ease-in-out .4s infinite; animation-delay:calc(var(--i,0) * 70ms), .4s; }
  .lb-board.fx-in .lb-row.top3{ animation:fxrow .55s cubic-bezier(.2,.7,.2,1) backwards, fxbron 4s ease-in-out .8s infinite; animation-delay:calc(var(--i,0) * 70ms), .8s; }

  /* compteur en direct : le chiffre pulse quand il change */
  @keyframes fxpop{ 40%{ transform:scale(1.4); color:var(--red); text-shadow:0 0 18px var(--glow); } }
  .fx-flash b, .fx-flash #dcOnline{ display:inline-block; animation:fxpop .7s ease; }

  /* serveurs : voile de chargement qui scintille, puis fondu vers la photo */
  .band>.fx-skel, .srv>.fx-skel{ position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
    background:linear-gradient(100deg,#0c0c10 30%,#23232d 50%,#0c0c10 70%); background-size:220% 100%;
    animation:fxshim 1.3s linear infinite; transition:opacity .9s ease; }
  .band>.fx-skel::after, .srv>.fx-skel::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:100%;
    background:linear-gradient(90deg,transparent,var(--red),transparent); background-size:40% 100%; background-repeat:no-repeat;
    animation:fxbar 1.1s ease-in-out infinite; }
  .fx-skel.fx-done{ opacity:0; }
  @keyframes fxshim{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }
  @keyframes fxbar{ from{ background-position:-60% 0; } to{ background-position:160% 0; } }
}

/* ===================================================================
   MULTI-PAGES (12/10/2026) — en-tetes de page, cartes d'entree de
   l'accueil, presentation de SHOOTKAM OS 3.0, tutos en etapes.
   Meme ADN que le reste : noir, rouge, titres italiques, verre.
   =================================================================== */

/* .wrap{padding:0 22px} ecrasait le padding vertical de section{} (meme poids, la classe gagne) :
   les titres de section collaient au bloc d'avant. */
section.wrap{ padding:clamp(44px,5.5vw,76px) 22px; }

/* une ancre ne se cache plus sous la barre fixe */
html{ scroll-padding-top:84px; }

/* ---- en-tete des pages interieures ---- */
.phero{ position:relative; min-height:min(64vh,620px); display:flex; align-items:flex-end;
  padding:150px 0 64px; overflow:hidden; isolation:isolate; }
.phero-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  transform:scale(1.05); filter:saturate(1.1); }
.phero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(5,5,6,.30) 0%,rgba(5,5,6,.62) 58%,var(--bg) 100%),
             radial-gradient(900px 420px at 15% 85%,rgba(255,32,41,.22),transparent 70%); }
.phero-in{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.phero h1.ttl{ font-size:clamp(2.6rem,7.2vw,5.4rem); line-height:.95; margin:.18em 0 .12em; text-align:left; }
.phero .u-line{ margin-left:0; }
.phero .lead{ max-width:62ch; margin-top:14px; }
.phero .cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line); color:#fff; font-style:italic; font-weight:800;
  text-transform:uppercase; font-size:.78rem; letter-spacing:.05em; backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .2s; }
.chip:hover{ background:rgba(255,32,41,.16); border-color:rgba(255,32,41,.6); transform:translateY(-2px); }
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--glow); }
.phero.court{ min-height:min(50vh,470px); }
/* sous un en-tete de page, la premiere section n'a pas besoin de son grand vide */
.phero + main > section:first-child{ padding-top:clamp(28px,4vw,48px); }


/* ---- capture de l'OS (bandeau de l'accueil) ---- */
.shot{ position:relative; margin:0; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9), 0 30px 90px -50px var(--glow); background:#0b0b0e; }
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ position:absolute; left:12px; bottom:12px; padding:6px 12px; border-radius:999px;
  background:rgba(5,5,6,.72); border:1px solid rgba(255,255,255,.12); font-size:.74rem; font-weight:700;
  font-style:italic; letter-spacing:.04em; text-transform:uppercase; }
.shot.vrai figcaption{ border-color:rgba(46,224,106,.5); }


/* ---- tutos en etapes ---- */
.steps{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; counter-reset:st; }
.step{ position:relative; padding:26px 20px 20px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-line);
  counter-increment:st; }
.step::before{ content:counter(st); position:absolute; top:-18px; left:18px; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-family:var(--titre); font-style:italic; font-weight:900; font-size:1.2rem;
  background:linear-gradient(135deg,var(--red),var(--red-deep)); box-shadow:0 10px 24px -8px var(--glow); }
.step h4{ font-style:italic; font-weight:900; text-transform:uppercase; letter-spacing:.02em; margin:.35em 0 .4em; font-size:1.02rem; }
.step p{ color:#cfd0d6; font-size:.92rem; margin:0; }
.step code, .need code{ font-family:var(--mono); font-size:.84em; color:#fff; background:rgba(255,255,255,.07); padding:1px 6px; border-radius:6px; }
.need{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; margin-top:22px; padding:16px 20px; border-radius:14px;
  background:rgba(255,154,46,.07); border:1px solid rgba(255,154,46,.3); color:#e9e2d8; font-size:.92rem; }
.need b{ color:var(--amber); font-style:italic; text-transform:uppercase; letter-spacing:.05em; }
.tuto-fin{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.tuto-duo{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.tuto-box{ padding:22px 24px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-line); }
.tuto-box h4{ margin:0 0 12px; font-style:italic; font-weight:900; text-transform:uppercase; letter-spacing:.03em; }
.tuto-box h4::before{ content:"Tuto · "; color:var(--red); }
.tuto-box ol{ margin:0; padding:0; list-style:none; counter-reset:tb; display:grid; gap:12px; }
.tuto-box li{ position:relative; padding-left:38px; color:#d6d7dc; font-size:.93rem; counter-increment:tb; }
.tuto-box li::before{ content:counter(tb); position:absolute; left:0; top:-2px; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; font-family:var(--titre); font-style:italic; font-weight:900; font-size:.9rem;
  background:rgba(255,32,41,.16); border:1px solid rgba(255,32,41,.5); color:#fff; }
.tuto-box code{ font-family:var(--mono); font-size:.84em; color:#fff; background:rgba(255,255,255,.07); padding:1px 6px; border-radius:6px; overflow-wrap:anywhere; }

/* ---- page serveurs : comment rejoindre ---- */
.join-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.join-steps div{ padding:16px 18px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-line); font-size:.92rem; color:#d6d7dc; }
.join-steps b{ display:block; color:#fff; font-style:italic; text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }

/* ---- page classement : comment marquer ---- */
.pts{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.pts div{ padding:18px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-line); }
.pts b{ display:block; font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.05rem; }
.pts span{ display:block; color:var(--soft); font-size:.9rem; margin-top:6px; }

/* ---- page Serveurs : Shutoko de nuit (12/10/2026) ----
   SHOOTKAM : « les deux sont nuls, impressionne-moi ». En fond, une autoroute de nuit dessinee
   en direct (canvas) ; devant, le titre et les pilotes en ligne (status.php). Le tableau des
   departs a palettes essaye a cote a ete refuse : « le tableau la, surtout pas ».
   12/10/2026 : l'autoroute laisse la place au TUNNEL de la maquette d'accueil A (« integre le tunnel »). */
.sv-hero{ position:relative; isolation:isolate; overflow:hidden; min-height:min(100vh,880px); display:flex; align-items:center; padding:118px 0 70px;
  background:#050506; border-bottom:1px solid rgba(255,255,255,.06); }
.sv-route{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block; }
/* sans WebGL : la lueur du bout du tunnel, a la place du dessin */
.sv-route.sans-gl{ background:radial-gradient(30% 34% at 64% 50%, #3a2418, rgba(5,5,6,0) 70%), #050506; }
.sv-voile{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,5,6,.86) 0%, rgba(5,5,6,.45) 32%, rgba(5,5,6,0) 56%, rgba(5,5,6,.2) 100%),
             linear-gradient(0deg, #050506 0%, transparent 12%); }
.sv-in{ width:100%; max-width:1320px; margin:0 auto; padding:0 22px; }
.sv-txt{ max-width:640px; }
.sv-k{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:#d6d7dc; }
.sv-k i{ width:9px; height:9px; border-radius:50%; background:#2ee06a; animation:svPouls 1.8s infinite; }
@keyframes svPouls{ 0%{ box-shadow:0 0 0 0 rgba(46,224,106,.6); } 80%,100%{ box-shadow:0 0 0 12px rgba(46,224,106,0); } }
.sv-t{ margin:.12em 0 .16em; font-family:var(--titre); font-variation-settings:'wdth' 125; font-style:italic; font-weight:900; text-transform:uppercase;
  font-size:clamp(3.2rem,8vw,7.4rem); line-height:.84; letter-spacing:-.015em; color:#fff; text-shadow:0 12px 60px rgba(0,0,0,.7); }
.sv-t .r{ color:var(--red); text-shadow:0 0 40px var(--glow); }
.sv-txt p{ max-width:44ch; margin:0; color:#d2d3d9; font-size:1.08rem; }
.sv-txt p b{ color:#fff; }
.sv-live{ display:inline-flex; align-items:center; gap:12px; margin-top:28px; padding:11px 20px; border-radius:999px; color:#fff; font-weight:600;
  background:rgba(5,5,6,.55); border:1px solid rgba(46,224,106,.4); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sv-live i{ width:9px; height:9px; border-radius:50%; background:#2ee06a; animation:svPouls 1.8s infinite; }
.sv-live b{ font-family:var(--titre); font-style:italic; font-weight:900; font-size:1.35rem; }
.sv-hero .chips{ margin-top:22px; }

@media (max-width:940px){
  .sv-hero{ min-height:0; padding:104px 0 54px; }
  .sv-voile{ background:linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.75) 50%, #050506 100%); }
}

/* ---- classement en CARTES PILOTES (12/10/2026) ---- */
.lb-wrap{ max-width:1180px; }
.lbc-cartes{ display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:18px; align-items:end; margin-top:14px; text-align:left; }
.lbc-c{ position:relative; overflow:hidden; isolation:isolate; border-radius:22px; padding:26px 24px 22px; color:#fff;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--m) 30%, transparent), transparent 60%), linear-gradient(170deg,#141418,#09090c);
  border:1px solid color-mix(in srgb, var(--m) 55%, transparent); box-shadow:0 30px 70px -35px color-mix(in srgb, var(--m) 70%, transparent);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.lbc-c:hover{ transform:translateY(-4px); box-shadow:0 36px 80px -32px color-mix(in srgb, var(--m) 80%, transparent); }
.lbc-c.c1{ padding-top:40px; transform:translateY(-14px); }
.lbc-c.c1:hover{ transform:translateY(-18px); }
.lbc-num{ position:absolute; right:-6px; top:-30px; z-index:-1; font-family:var(--titre); font-style:italic; font-weight:900; font-size:11rem; line-height:1;
  color:color-mix(in srgb, var(--m) 16%, transparent); }
.lbc-k{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--m); }
.lbc-nom{ display:block; font-family:var(--titre); font-style:italic; font-weight:900; font-size:2rem; line-height:1; text-transform:uppercase; margin:.35em 0 .2em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbc-auto{ display:block; color:#c9cad0; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbc-tot{ margin-top:18px; font-family:var(--titre); font-style:italic; font-weight:900; font-size:2.4rem; line-height:1; color:#fff; white-space:nowrap; }
.lbc-tot small{ font-size:.85rem; color:var(--soft); margin-left:6px; }
.lbc-st{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.lbc-st span{ display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.lbc-st em{ font-style:normal; font-weight:800; font-size:1.05rem; color:#fff; }
.lbc-tab{ margin-top:22px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08); text-align:left; }
.lbc-l{ display:grid; grid-template-columns:60px 1.4fr 1.4fr 1fr 170px; align-items:center; gap:10px; padding:13px 20px; border-top:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02); transition:background .2s; }
.lbc-tab > .lbc-l:first-child{ border-top:0; }
.lbc-l:hover{ background:rgba(255,32,41,.06); }
.lbc-rg{ font-family:var(--titre); font-style:italic; font-weight:900; color:var(--soft); font-size:1.1rem; }
.lbc-l b{ color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbc-a, .lbc-s{ color:#bfc0c8; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbc-v{ text-align:right; font-family:var(--titre); font-style:italic; font-weight:900; color:#fff; font-size:1.05rem; white-space:nowrap; }
.lbc-v small{ margin-left:6px; font-family:var(--sans); font-style:normal; font-weight:600; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.lbc-tab .lb-rest{ gap:0; }
.lbc-tab + .lb-more{ margin-top:12px; }
@media (max-width:900px){
  .lbc-cartes{ grid-template-columns:1fr; gap:14px; }
  .lbc-c.c1{ order:-1; transform:none; padding-top:26px; }
  .lbc-c.c1:hover{ transform:translateY(-4px); }
  .lbc-l{ grid-template-columns:44px 1fr auto; }
  .lbc-a, .lbc-s{ display:none; }
}

/* ---- page Apps : la premiere section commence sous la barre fixe ---- */
section.wrap.page-haut{ padding-top:clamp(100px,9vw,130px); }

@media (max-width:980px){
  .steps{ grid-template-columns:1fr 1fr; gap:26px 16px; }
  .join-steps, .pts, .tuto-duo{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .phero{ padding:120px 0 44px; }
}