/* ===============================
   Plug And Play (PAP) — Style global
   Fichier complet à coller dans assets/css/style.css
   =============================== */

/* ---------- Variables ---------- */
:root{
  /* Couleurs */
  --bg:#0b1520;
  --panel:#0f1c27;
  --panel-2:#112230;
  --line:#1b3040;
  --line-soft:#274559;
  --text:#e8f4fb;
  --muted:#9fbbcd;
  --teal:#00c2d1;
  --teal-2:#23e3f4;
  --orange:#ff6b35;

  --p1y: 0px; /* parallax couches profondes */
  --p2y: 0px; /* parallax texture/grille */

  /* Rythme & ombres */
  --radius:16px;
  --shadow:0 12px 40px rgba(0,0,0,.35);

  /* Échelle d’espacement (8px-ish) */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:2rem;
  --space-8:2.5rem;
  --space-9:3rem;

  /* Hauteur header recalculée par le JS (AJOUT) */
  --header-h: 72px;
}


/* ===== Scrollbars globales ===== */
* {
  box-sizing: border-box;
  scrollbar-width: thin;                          /* Firefox */
  scrollbar-color: var(--line-soft) var(--panel); /* thumb | track */
}

/* Chrome / Edge / Safari (WebKit) */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  /* pas de background ici : ignoré pour la couleur */
}

*::-webkit-scrollbar-track {
  background-color: var(--panel);     /* fond sombre */
}

*::-webkit-scrollbar-thumb {
  background-color: var(--line-soft); /* pouce */
  border-radius: 8px;
  border: 2px solid var(--panel);     /* comble l’espace autour (pas de blanc) */
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--line);
}

/* Quand les barres se croisent (coin bas-droit) */
*::-webkit-scrollbar-corner {
  background-color: var(--panel);
}


/* ---------- Base ---------- */
html,body{ height:100% }
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}

.image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* Couche profonde (halos/nuages) — grande marge + overscan pour éviter toute coupure */
body::before{
  content:"";
  position:fixed; inset:-40vh; /* overscan généreux pour ne jamais voir les bords */
  z-index:-2; pointer-events:none;

  /* 4 couches : deux halos profonds, un glow léger, un dégradé de base */
  background-image:
    radial-gradient(1200px 800px at -10% -10%, #0e2133 0 60%, transparent 70%),
    radial-gradient(1400px 1000px at 110% 110%, #081320 0 55%, transparent 75%),
    radial-gradient(900px 600px at 85% 5%, rgba(0,194,209,.10), transparent 65%),
    linear-gradient(180deg, rgba(10,19,32,.7), rgba(10,19,32,.9));

  /* tailles surdimensionnées = pas de “coupure” quand on décale */
  background-size:
    180% 180%,
    170% 170%,
    160% 160%,
    100% 100%;

  /* positions indépendantes pour créer la profondeur (on décale verticalement) */
  background-position:
    50% calc(var(--p1y) * -1.00),
    50% calc(var(--p1y) * -0.65),
    85% calc(var(--p1y) * -0.30),
    50% 50%;

  background-repeat:no-repeat;
  filter:saturate(1.04);

  /* stabilité GPU */
  will-change: background-position;
  backface-visibility:hidden;
}

/* Couche supérieure (grille/scanlines + vignette) — très subtile */
body::after{
  content:"";
  position:fixed; inset:-20vh; /* léger overscan */
  z-index:-1; pointer-events:none;

  /* 2 motifs + masque vignette via mask-image */
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.015) 0 1px, transparent 1px 60px);

  /* décalages doux pour éviter toute impression de “saut” */
  background-position:
    calc(var(--p2y) * -0.30) calc(var(--p2y) * -0.60),
    0 calc(var(--p2y) * -0.20);

  background-size:
    100% 100%,
    100% 100%;

  mask-image: radial-gradient(1100px 680px at 20% 10%, #000 0 60%, transparent 74%);
  mask-repeat:no-repeat;

  will-change: background-position;
  backface-visibility:hidden;
}

/* Respecte la préférence utilisateur (réduit les motions) */
@media (prefers-reduced-motion:reduce){
  body::before,
  body::after{
    background-position: 50% 50% !important;
  }
}


/* ---------- Layout ---------- */
.container{
  max-width:1200px;
  margin:0 auto;
  padding: var(--space-7) var(--space-4);
}

/* Quand le header est fixé, on évite le recouvrement (AJOUT) */
.has-sticky-header main.container{
  padding-top: calc(var(--header-h) + var(--space-7));
}

.section-block{ margin-top: var(--space-7) }

/* =========================================
   HEADER — sticky + slide (AJOUT COMPLET)
   ========================================= */
.site-header{
  position: fixed;            /* fixé, puis slide via transform */
  top: 0; left: 0; right: 0;
  z-index: 100;

  display: grid;
  grid-template-columns: 1fr auto 1fr; /* brand | nav | actions */
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;


  backdrop-filter: blur(8px);

  transform: translateY(0);
  transition:
    transform .28s ease,
    padding .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
  will-change: transform;
}

/* densifier + ombre dès qu’on scrolle un peu */
.site-header.is-scrolled{
  background: linear-gradient(180deg, rgba(17,34,48,.97), rgba(17,34,48,.80));
  border-bottom-color: rgba(27,48,64,.85);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* compacter visuellement */
.site-header.is-compact{
  padding: .55rem 1rem;
}

/* masqué quand on descend (ajouté par JS) */
.site-header.is-unpinned{
  transform: translateY(-110%);
}

/* visible (ajouté par JS) */
.site-header.is-pinned{
  transform: translateY(0);
}

/* priorité à l’interaction : ne pas cacher si hover/focus */
.site-header:hover,
.site-header:focus-within{
  transform: translateY(0) !important;
}

/* Marque (gauche) */
.brand{ justify-self:start; display:flex; align-items:center; gap:.75rem; text-decoration:none }
.brand .logo{
  width:48px; height:48px; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.brand-text strong{ display:block; font-size:.98rem }
.brand-text span{ display:block; font-size:.8rem; color:var(--muted) }
@media (max-width:900px){ .brand-text span{ display:none } } /* allège la zone gauche */

/* Nav centrée, look pill */
.nav{ justify-self:center; display:flex; gap:.35rem; align-items:center; flex-wrap:wrap }
.nav a{
  color:var(--text);
  text-decoration:none;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  opacity:.95;
  transition:background .15s, border-color .15s;
}
.nav a:hover{
  background:rgba(255,255,255,.04);
  border-color:var(--line-soft);
}
.nav .active{
  background:rgba(0,194,209,.12);
  border-color:rgba(0,194,209,.35);
}

/* Actions (droite) */
.nav-right{ justify-self:end; display:flex; gap:.5rem; align-items:center }

/* Barre de recherche — pilule + icône */
.searchbar{
  position:relative;
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem .35rem 2.1rem; /* place pour l’icône */
  min-width:260px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.searchbar .ico{
  position:absolute; left:.7rem; width:16px; height:16px;
  color:var(--muted); opacity:.9;
}
.searchbar input{
  flex:1 1 auto;
  border:none; outline:none; background:transparent;
  color:var(--text);
  padding:.3rem 0;
}
.searchbar .search-submit,
.searchbar button[type="submit"]{
  border:none; background:transparent; color:var(--muted);
  padding:.2rem .2rem; line-height:1; cursor:pointer; border-radius:8px;
}
.searchbar .search-submit:hover,
.searchbar button[type="submit"]:hover{ color:var(--text) }
.searchbar:focus-within{
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,194,209,.14);
  background:#102332;
}

/* Boutons header */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  height:40px; padding:0 .95rem;
  border-radius:12px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--text);
  text-decoration:none; cursor:pointer; transition:.15s;
}
.btn:hover{ transform:translateY(-1px) }
.btn.ghost{
  background:transparent;
  border-color:var(--line);
}
.btn.right{
  margin-left: auto; /* pousse le bouton à droite si le parent est en display:flex */
  width: 15%;
}
.btn.primary{
  border-color:transparent;
  background:
    linear-gradient(90deg, rgba(0,194,209,0) 0%, rgba(0,194,209,.15) 50%, rgba(0,194,209,0) 100%),
    linear-gradient(180deg, #0fa7b3, #0a91a7);
  box-shadow:0 12px 30px rgba(0,194,209,.25);
}


.btn.basket::before{
  content:"";
  inline-size:30px;
  block-size:30px;
  display:block;
  background: currentColor;  /* couleur de l'icône = color du bouton */
  -webkit-mask: url('/assets/img/basket.svg') no-repeat center / contain;
          mask: url('/assets/img/basket.svg') no-repeat center / contain;
}

.btn.sheet::before{
  content:"";
  inline-size:24px;
  block-size:24px;
  display:block;
  background: currentColor;  /* couleur de l'icône = color du bouton */
  -webkit-mask: url('/assets/img/eye.svg') no-repeat center / contain;
          mask: url('/assets/img/eye.svg') no-repeat center / contain;
}

.btn.add::before{
  content:"";
  inline-size:20px;
  block-size:20px;
  display:block;
  background: currentColor;  /* couleur de l'icône = color du bouton */
  -webkit-mask: url('/assets/img/basket_add.svg') no-repeat center / contain;
          mask: url('/assets/img/basket_add.svg') no-repeat center / contain;
}

/* Header responsif : nav en dessous */
@media (max-width:760px){
  .site-header{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    row-gap:.6rem;
  }
  .brand{ grid-area: brand }
  .nav{ grid-area: nav; justify-self:center }
  .nav-right{ grid-area: actions }
  .searchbar{ min-width:200px }
}

/* ---------- Hero ---------- */
.hero{
  padding: clamp(1.5rem, 2vw + 1rem, 2.6rem);
  border-radius:var(--radius);
  background:
    radial-gradient(800px 320px at 0% 0%, rgba(0,194,209,.18), transparent 60%),
    linear-gradient(180deg, rgba(15,28,39,.9), rgba(15,28,39,.65));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  margin-top: var(--space-6);
}
.hero h1{ font-size: clamp(1.6rem, 1.6rem + 1.2vw, 2.4rem); margin:0 0 .55rem }
.hero h1 em{ color:var(--teal-2); font-style:normal; text-shadow:0 6px 24px rgba(35,227,244,.2) }
.hero .lead{ margin:0; color:var(--muted) }
.hero-cta{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap }

/* ---------- Sections génériques ---------- */
.section-head{ margin-bottom: var(--space-4)}
.section-head h2{ margin:0 0 .3rem; font-size: clamp(1.3rem,1.2rem + .6vw,1.8rem) }
.section-head p{ margin:0; color:var(--muted) }

.section-alt{
  position:relative;
  padding: clamp(1rem, 1.4rem + .5vw, 1.6rem);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-top: var(--space-7);
}

/* Prose douce */
.prose p{ margin: 0 0 var(--space-4) }

/* ---------- Split générique ---------- */
.split{
  display:grid; align-items:start;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1rem, 1.5rem + 1vw, 2.2rem);
}
@media (max-width:960px){ .split{ grid-template-columns:1fr } }

/* ---------- Mockup (cartes vitrines) ---------- */
.mockup{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,22,33,.92), rgba(12,22,33,.65));
  border-radius:14px;
  min-height:220px;
  position:relative;
  overflow:hidden;
}
.mockup .titlebar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .7rem; border-bottom:1px solid var(--line)
}
.mockup .titlebar .dots{ display:flex; gap:.35rem; align-items:center }
.mockup .dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.15); border:1px solid var(--line)
}
.mockup .content{ padding:1rem; display:grid; gap:.6rem }

/* ---------- Fenêtre de code (section PAP) ---------- */
.about-pap{ margin-top: var(--space-7) }
.about-split{
  display:grid; align-items:center;
  grid-template-columns: 1fr 1fr; /* plus d’espace pour le texte */
  gap: clamp(1.4rem, 2vw + 1rem, 2.6rem);
}
@media (max-width:980px){ .about-split{ grid-template-columns:1fr } }

/* Liste à puces stylisée (checklist) */
.checklist{
  list-style:none; padding:0; margin: var(--space-5) 0 var(--space-6);
}
.checklist li{
  position:relative; padding-left:1.65rem; margin:.65rem 0; color:var(--text);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.15rem;
  width:1.1rem; height:1.1rem; border-radius:999px;
  border:1px solid rgba(34,234,165,.55);
  background: radial-gradient(100% 100% at 30% 30%, #22eaa5, #18bf84);
  box-shadow: 0 0 0 3px rgba(34,234,165,.12);
}
.checklist li::after{
  content:""; position:absolute; left:.36rem; top:.45rem;
  width:.45rem; height:.25rem;
  border-left:2px solid #04281a; border-bottom:2px solid #04281a;
  transform: rotate(-45deg);
}

/* Carte type fenêtre de code */
.code-window{
  border:1px solid var(--line);
  border-radius:14px;
  background: linear-gradient(180deg, rgba(12,22,33,.94), rgba(12,22,33,.72));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
.code-titlebar{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:.6rem;
  padding:.55rem .75rem;
  background: linear-gradient(180deg, rgba(18,31,45,.92), rgba(16,28,42,.75));
  border-bottom:1px solid var(--line);
}
.win-buttons{ display:flex; gap:.45rem }
.win-btn{
  width:12px; height:12px; border-radius:50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border:1px solid rgba(0,0,0,.28);
}
.win-btn.close{ background:#ff5f56; border-color:#e0443e }
.win-btn.min  { background:#ffbd2e; border-color:#d9a427 }
.win-btn.max  { background:#27c93f; border-color:#1ea334 }
.win-btn:hover{ filter:saturate(1.15) brightness(1.05) }

.code-title{
  text-align:center; font-size:.8rem; color:var(--muted);
  letter-spacing:.02em; user-select:none;
}
.code-lang{
  font-size:.75rem; color:var(--muted);
  border:1px solid var(--line); padding:.15rem .45rem;
  border-radius:8px; background: var(--panel);
}

.code-body{
  margin:0; padding: 1rem 1.1rem 1.2rem;
  font: 13.5px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); white-space: pre; overflow:auto;
  background: linear-gradient(180deg, rgba(12,22,33,.92), rgba(12,22,33,.72));
}

/* Syntaxe colorée */
.code-body .c-comm { color:#9bb4c3; opacity:.9 }
.code-body .c-kw   { color:var(--teal-2); font-weight:600 }
.code-body .c-prop { color:#8bd5ff }
.code-body .c-fn   { color:#ffd59e }
.code-body .c-str  { color:#a6e3a1 }
.code-body .c-num  { color:#9ab4ff }

/* ---------- Grilles utilitaires ---------- */
.grid-3{
  display:grid;
  gap: clamp(1rem, 1.4rem + .4vw, 1.8rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid-4{
  display:grid;
  gap: clamp(1rem, 1.4rem + .4vw, 1.8rem);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:960px){
  .grid-3{ grid-template-columns:1fr 1fr }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:620px){
  .grid-3, .grid-4{ grid-template-columns:1fr }
}

/* ---------- Cartes services ---------- */
.service{
  position:relative;
  padding: 1rem 1.1rem 1.1rem 1.1rem;
  
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  background:linear-gradient(180deg, rgba(17,34,48,.95), rgba(17,34,48,.7));
  box-shadow:0 8px 26px rgba(0,0,0,.25);
}

#recrutement .jobs-list{
  display: grid;
  gap: 1rem;
}

.service.tight{ padding:.9rem 1rem }
.service::before{
  content:""; position:absolute; left:-1px; top:0px; bottom:-1px; width:6px;
  border-radius:8px 0 0 8px; background:linear-gradient(180deg, var(--teal), transparent);
}
.service h3{ margin:.2rem 0 .4rem }
.service p{ margin:0 0 .4rem }
.icon-xl{ font-size:1.35rem }
.list{
  display:grid; gap:.35rem; padding-left:1.1rem; color:var(--muted);
  margin:.4rem 0 0;
}

/* ---------- Process ---------- */
.process{
  display:grid;
  gap: clamp(1rem, 1.4rem + .4vw, 1.6rem);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:960px){ .process{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .process{ grid-template-columns:1fr } }

.step{
  position:relative; padding:1rem;
  border:1px dashed var(--line);
  border-radius:15px; background:rgba(17,34,48,.55);
}
.step .index{
  position:absolute; top:-10px; left:-10px;
  font-weight:700; font-size:.9rem; color:#fff;
  background:linear-gradient(180deg, #0fa7b3, #0a91a7);
  border:1px solid var(--line);
  padding:.25rem .75rem; border-radius: 50px;
  box-shadow:0 10px 20px rgba(0,194,209,.15);
}

/* ---------- Témoignages (marquee infini) ---------- */
.testimonials{
  position:relative;
  overflow:hidden;                 /* masque ce qui dépasse */
}

.t-track{
  display:flex;
  gap:1rem;
  will-change: transform;
  transform: translate3d(0,0,0);
  animation-name: t-marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* ⚠ pas de durée ici : on la pose en JS via style.animationDuration */
}

/* Cartes compactes, en ligne, sans wrap */
.t-item{
  flex: 0 0 auto;                  /* largeur auto, pas de wrap */
  min-width:660px;
  max-width:340px;
  background:linear-gradient(180deg, rgba(17,34,48,.95), rgba(17,34,48,.7));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
}

/* Pause de l’animation au survol */
.testimonials:hover .t-track{
  animation-play-state: paused;
}

/* La track se décale de 0 à -50% :
   comme on duplique la liste, la seconde moitié == la première,
   donc pas de "TP" visible au restart. */
@keyframes t-marquee{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-250%,0,0); }
}


/* ---------- CTA finale ---------- */
.cta-final{
  display:grid; gap:.9rem; justify-items:center;
  padding:1.3rem; border:1px dashed var(--line);
  border-radius:14px; background:rgba(0,194,209,.06);
  margin-top: var(--space-7);
}
.cta-title{ margin:.2rem 0 .4rem }
.cta-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center }

/* ---------- Utilitaires ---------- */
.muted{ color:var(--muted)}
.ratio{ position:relative }
.reveal{ opacity:0; transform:translateY(14px); transition:all .6s ease }
.reveal.visible{ opacity:1; transform:none }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  text-align:center;
  padding: var(--space-6) var(--space-4);
  background:rgba(10,19,32,.5);
}

/* ---------- Accessibilité / préférences ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  .btn:hover{ transform:none }
}

/* ---------- Grille & cartes — version compacte et alignée ---------- */
.scripts-grid{
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  align-items: start;

  /* 3 colonnes par défaut, chaque colonne min 260px max 1fr.
     auto-fit permet d'adapter si écran plus petit. */
  grid-template-columns: repeat(3, minmax(260px, 0.33fr));

  /* centre la grille dans le container et limite la largeur totale */
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Card : grid interne pour aligner image / contenu / actions */
.script-card{
  display: grid;
  grid-template-rows: auto 1fr auto; /* image / body / actions */
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(17,34,48,.95), rgba(17,34,48,.72));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .12s;
  width: 100%;
  min-height: 340px; /* uniformise la hauteur */
}

/* Hover / focus */
.script-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,0,0,.45);
  border-color: var(--line-soft);
}
.script-card:focus{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Screenshot (image) : réduit la hauteur et évite grand vide */
.script-card .screenshot{
  height: 180px;           /* moins haut => moins d'espace vide */
  width: 100%;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.0));
}
.script-card .screenshot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  vertical-align:middle;
}

/* Card body : padding plus compact, description clampée */
.script-card .card-body{
  padding: .9rem 1rem;
  display:flex;
  flex-direction:column;
  gap: .5rem;
  min-height: 0; /* important pour overflow dans grid/flex */
}

/* Titre */
.script-card h3{
  margin:0;
  font-size:1.05rem;
  line-height:1.25;
  color:var(--text);
}


/* Badges (sous le titre) */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 28px; 
  max-height: 28px;             
  padding-right: 4px;
  overflow: hidden;           
}

.chip{
  display:inline-block;
  padding:.18rem .5rem;
  border-radius:8px;
  background:rgba(0,194,209,.06);
  border:1px solid var(--line-soft);
  font-size:.75rem;
  color:var(--teal-2);
  white-space:nowrap;
}

/* Mini description courte : clamp 2 lignes pour éviter overflow */
.mini-desc{
  font-size:.88rem;
  line-height:1.35;
  min-height: 20px;
  max-height: 20px;
  color:var(--muted);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Price — visible mais compact */
.price{
  font-weight:700;
  margin:0;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:0.98rem;
  color:var(--teal-2);
}
.price .old{
  text-decoration:line-through;
  opacity:.7;
  color:#ff6b6b;
  font-size:.9rem;
}

/* Actions : toujours en bas (utilise la 3e row de la grid) */
.card-actions{
  display:grid;
  grid-template-columns: 0.2fr 0.2fr 0.6fr;
  gap:.5rem;
  padding: .75rem 1rem;
  border-top: 1px solid rgba(255,255,255,.02);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}
.card-actions .btn{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:.55rem .7rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  font-size:.85rem;
  gap:.4rem;
}
.card-actions .btn:hover{
  background:var(--panel);
  transform: translateY(-1px);
}

/* Responsive breakpoints : forcer 2 cols then 1 col at narrower widths */
@media (max-width: 1100px){
  .scripts-grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); max-width: 960px; }
  .script-card{ min-height: 320px; }
  .script-card .screenshot{ height: 140px; }
}
@media (max-width: 700px){
  .scripts-grid{ grid-template-columns: 1fr; max-width: 720px; padding: 0 var(--space-4); }
  .script-card{ min-height: auto; height: auto; }
  .script-card .screenshot{ height: 160px; }
  .card-actions{ grid-template-columns: 1fr 1fr; gap:.5rem; }
}

/* ===== MODAL global (clean) ===== */
/* ===== État d'affichage contrôlé par aria-hidden ===== */
.modal[aria-hidden="true"]{ display:none }
.modal[aria-hidden="false"]{ display:flex }

/* Bloque le scroll du fond quand une modale est ouverte */
body.modal-open{ overflow:hidden }

/* ===== Conteneur modal ===== */
.modal{
  position:fixed; inset:0; z-index:200;
  align-items:center; justify-content:center;
  padding: 2rem; /* évite que le panel colle aux bords */
}

/* Backdrop (clic pour fermer) */
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index:0;               /* toujours derrière */
}

/* Panneau */
.modal-panel{
  position:relative; z-index:1;  /* toujours devant */
  display:flex; flex-direction:column;
  max-width:880px; width:100%;
  max-height:85svh;              /* svh pour mobiles */
  border-radius: var(--radius, 12px);
  background:linear-gradient(180deg, rgba(15,28,39,.96), rgba(15,28,39,.85));
  border:1px solid var(--line, #2a3645);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;
  padding: 35px;
  animation: modalIn .28s ease;
}
@keyframes modalIn{
  from{ transform:translateY(20px); opacity:0 }
  to{ transform:none; opacity:1 }
}

/* Réduit les motions si demandé */
@media (prefers-reduced-motion: reduce){
  .modal-panel{ animation:none }
}

/* Bouton fermer (pas .btn) */
.modal-close{
  position:absolute; top:.5rem; right:.5rem;
  background:transparent; border:none;
  color:var(--muted, #9fb0c6);
  font-size:1.6rem; line-height:1;
  padding:.3rem; cursor:pointer; z-index:2;
  border-radius:8px;
  transition:color .2s, background-color .2s;
}
.modal-close:hover{ color:var(--text, #e8eef6); background:rgba(255,255,255,.05) }
.modal-close:focus-visible{ outline:2px solid var(--teal, #409bfd); outline-offset:2px }

/* Corps scrollable */
.modal-body{
  flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  display:flex; flex-direction:column; gap: var(--space-5, 1.25rem);
}

/* Header de fiche / création */
.modal-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap: var(--space-5, 1.25rem);
  border-bottom:1px solid var(--line, #2a3645);
  padding-bottom: var(--space-4, 1rem);
}
.modal-head h3{ margin:0; font-size:1.4rem; line-height:1.3 }
.modal-head p{ margin:.3rem 0 0; color:var(--muted, #9fb0c6) }

/* Grid meta */
.meta-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem 1rem; min-width:200px;
}
.meta-grid .k{ font-size:.78rem; color:var(--muted, #9fb0c6) }
.meta-grid .v{ font-weight:600; font-size:.9rem }

/* Onglets (si utilisés) */
.tabs{
  display:flex; gap:.4rem;
  border-bottom:1px solid var(--line, #2a3645);
}
.tabs .tab{
  padding:.55rem 1rem; font-size:.9rem;
  border-radius:10px 10px 0 0;
  border:1px solid transparent; background:transparent;
  color:var(--muted, #9fb0c6); cursor:pointer; transition:all .18s;
}
.tabs .tab:hover{ color:var(--text, #e8eef6) }
.tabs .tab:focus-visible{ outline:2px solid var(--teal, #409bfd); outline-offset:2px }
.tabs .tab.active{
  color:var(--text, #e8eef6);
  background:linear-gradient(180deg, rgba(17,34,48,.95), rgba(17,34,48,.7));
  border:1px solid var(--line, #2a3645); border-bottom:none;
}
.tab-panels{ padding-top: var(--space-4, 1rem) }
.panel{ display:none }
.panel.show{ display:block }

/* Sous-sections */
.modal-body h4{ font-size:.95rem; margin:.8rem 0 .5rem; color:var(--teal-2, #00bcd4) }
.chips-wrap, .chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chips .chip,
.chips-wrap .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .6rem; border:1px solid var(--line, #2a3645);
  border-radius:999px; font-size:.8rem; color:var(--text, #e8eef6);
  background:rgba(255,255,255,.04);
}

/* Listes (deps / changelog / api) */
.list{ margin:.2rem 0 0; padding-left:1.2rem }
.list li{ margin:.2rem 0 }

/* Barres de bench */
.meters{ display:grid; gap:.8rem }
.meter span{ font-size:.85rem; color:var(--muted, #9fb0c6); margin-bottom:.25rem; display:block }
.bar{
  height:12px; border:1px solid var(--line, #2a3645);
  border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.06);
}
.bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--teal, #409bfd), var(--teal-2, #00bcd4));
  transition:width .4s ease;
}

/* Footer actions */
.modal-actions{
  display:flex; gap:.6rem; justify-content:flex-end;
  padding-top: var(--space-4, 1rem);
  border-top:1px solid var(--line, #2a3645);
}

/* Champs formulaire */
.modal-body label{
  display:grid; gap:.35rem; font-size:.9rem;
}
.modal-body input,
.modal-body textarea,
.modal-body select,
.modal-body button.btn{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line, #2a3645);
  color:var(--text, #e8eef6);
  border-radius:10px;
  padding:.6rem .75rem;
  font:inherit;
}
.modal-body input:focus-visible,
.modal-body textarea:focus-visible,
.modal-body select:focus-visible{
  outline:2px solid var(--teal, #409bfd); outline-offset:2px;
}

/* Grille flexible: choisis le nb d'éléments par ligne via .grid-1 / .grid-2 / .grid-3 */
.grid { display:grid; grid-template-columns: repeat(var(--cols, 3), minmax(0,1fr)); gap: var(--space-4, 1rem) }
.grid-1 { --cols: 1 }
.grid-2 { --cols: 2 }
.grid-3 { --cols: 3 }

/* Spans pratiques */
.full { grid-column: 1 / -1 }
.col-span-2 { grid-column: span 2 }
.col-span-3 { grid-column: span 3 }


/* Scrollbar discrète (webkit) */
.modal-body::-webkit-scrollbar{ width:10px }
.modal-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border-radius:12px;
  border:2px solid transparent;
  background-clip: padding-box;
}

/* ==== Infos serveur (harmonisation avec la modale) ==== */
#serverInfoBox{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,28,39,.95), rgba(15,28,39,.78));
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  padding:1rem 1rem 1.1rem;
}
#serverInfoBox h4{ margin:.2rem 0 .8rem; font-size:1.05rem; letter-spacing:.01em }
#serverInfoForm{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap: clamp(.8rem, .6rem + .6vw, 1rem);
}
#serverInfoForm .full{ grid-column:1 / -1 }
#serverInfoForm label{ display:grid; gap:.35rem; font-size:.92rem }
#serverInfoForm input,
#serverInfoForm select,
#serverInfoForm textarea{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:.62rem .75rem;
  font:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#serverInfoForm textarea{ min-height:120px; resize:vertical }
#serverInfoForm input:focus,
#serverInfoForm select:focus,
#serverInfoForm textarea:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(0,194,209,.14);
  background:#102332;
}
#serverInfoBox .actions{ display:flex; gap:.5rem; margin-top:.6rem }
#serverInfoBox.is-saved{ border-color:rgba(0,194,209,.35) }
#serverInfoBox.is-saved h4::after{ content:" · enregistré"; color:var(--teal-2); font-weight:500 }

@media (max-width:960px){ #serverInfoForm{ grid-template-columns:1fr 1fr } }
@media (max-width:620px){ #serverInfoForm{ grid-template-columns:1fr } }

/* Responsive */
@media (max-width: 820px){
  .grid-2{ grid-template-columns:1fr }
  .grid-3{ grid-template-columns:1fr }
}
@media (max-width:620px){
  .modal{ padding:1rem }
  .modal-body{ padding: var(--space-4, 1rem) }
}

/* ==== Notifications réutilisables ==== */
.notify-host{
  position: fixed;
  z-index: 300;
  top: 80px; right: 12px;
  display: grid; gap: .5rem;
  width: min(360px, calc(100vw - 24px));
}

.notify{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  border-radius: 12px;
  border:1px solid var(--line);
  background: rgba(17,34,48,.95);
  color: var(--text);
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.notify.show{ transform:none; opacity:1 }
.notify.hide{ opacity: 0 }

.notify-icon{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted);
}
.notify[data-type="success"] .notify-icon{ background: #22eaa5 }
.notify[data-type="warn"]    .notify-icon{ background: #ffbd2e }
.notify[data-type="error"]   .notify-icon{ background: #ff6b6b }
.notify[data-type="info"]    .notify-icon{ background: var(--teal) }

.notify-msg{ font-size:.9rem; }
.notify-close{
  background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:8px;
  width:28px; height:28px; cursor:pointer;
}
.notify-close:hover{ color:var(--text) }

.save-check{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.45);       /* << fond assombri */
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;              /* ne bloque pas les clics */
}
.save-check .bubble{
  width:82px;height:82px;border-radius:50%;
  background:rgba(22,163,74,.9); color:#fff; font-size:36px; font-weight:900;
  display:flex;align-items:center;justify-content:center;
  animation:pop-check .65s ease forwards;
  box-shadow:0 10px 30px rgba(22,163,74,.35);
}

/* ===== Inputs & Selects — style épuré PAP ===== */
/* ===== Champs (thème PAP) ===== */
.q-input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%;
  min-height:42px;
  padding:.56rem .95rem;
  border:1px solid var(--line);
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    var(--panel);
  color:var(--text);
  outline:none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    transform .03s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.q-input::placeholder{ color:color-mix(in srgb, var(--muted) 82%, transparent); }
.q-input:hover{
  border-color: var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    color-mix(in srgb, var(--panel) 86%, var(--panel-2));
}
.q-input:focus{
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,194,209,.18);
  background:
    linear-gradient(180deg, rgba(0,194,209,.06), rgba(0,194,209,0)),
    #102332;
}
.q-input:disabled{ opacity:.65; cursor:not-allowed; }

/* Tailles optionnelles */
.q-input.q-sm{ min-height:36px; padding:.45rem .75rem; border-radius:10px; font-size:.92rem }
.q-input.q-lg{ min-height:48px; padding:.7rem 1.05rem; border-radius:14px; font-size:1rem }

/* ===== Select (flèche minimaliste) ===== */
.q-select{
  padding-right: 3.2rem;            /* + d’espace à droite */
  cursor: pointer;
}
select.q-select::-ms-expand{ display:none; }  /* legacy */

/* État requis non rempli (si 1re option vide + required) */
select.q-select:required:invalid{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* Menu d’options (selon le navigateur) */
select.q-select option{
  background: var(--panel);
  color: var(--text);
}

/* ===== Groupes avec label (si <label> englobe le champ) ===== */
label:has(.q-input){ display:grid; gap:.35rem; }
label:has(.q-input) > span,
label > .q-label{ font-size:.86rem; color:var(--muted); }

/* ===== Multi-select (UI custom) ===== */
/* ===== Multi-select — menu & options ===== */
.q-multi { position: relative; }
.q-multi .q-select[hidden] { display:none !important; }

.qm-menu{
  position:absolute; inset:auto 0 auto 0; top:calc(100% + 6px);
  z-index:50; border:1px solid var(--line);
  border-radius:12px; background:var(--panel);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:.35rem; display:none; max-height:260px; overflow:auto;
}
.q-multi.open .qm-menu{ display:block; }

/* Option = grille 2 colonnes : [case][libellé] */
.qm-opt{
  display:grid; grid-template-columns: 20px 1fr;
  align-items:center; gap:.65rem;
  padding:.38rem .5rem; border-radius:10px; cursor:pointer;
}
.qm-opt:hover{ background:rgba(255,255,255,.05); }
.qm-opt-label{ display:block; margin:0; line-height:1.25; }

/* Checkbox custom (au lieu de l’apparence native) */
.qm-opt input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; margin:0;
  border:1.5px solid var(--line-soft);
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    color-mix(in srgb, var(--panel) 85%, #0b1d29);
  display:grid; place-content:center;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.qm-opt input[type="checkbox"]::before{
  content:"";
  width:12px; height:12px; transform:scale(0);
  transition: transform .12s ease;
  background: var(--teal);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300c2d1" d="M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4L9 14.59l9.3-9.3a1 1 0 0 1 1.4 0z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300c2d1" d="M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4L9 14.59l9.3-9.3a1 1 0 0 1 1.4 0z"/></svg>') center/contain no-repeat;
}
.qm-opt input[type="checkbox"]:checked{
  border-color: var(--teal);
  background:#0f2834;
  box-shadow:0 0 0 3px rgba(0,194,209,.14);
}
.qm-opt input[type="checkbox"]:checked::before{ transform:scale(1); }
.qm-opt input[type="checkbox"]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

.qm-opt input[type="radio"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; margin:0;
  border:1.5px solid var(--line-soft);
  border-radius:6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    color-mix(in srgb, var(--panel) 85%, #0b1d29);
  display:grid; place-content:center;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.qm-opt input[type="radio"]::before{
  content:"";
  width:12px; height:12px; transform:scale(0);
  transition: transform .12s ease;
  background: var(--teal);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300c2d1" d="M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4L9 14.59l9.3-9.3a1 1 0 0 1 1.4 0z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%2300c2d1" d="M20.3 5.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4L9 14.59l9.3-9.3a1 1 0 0 1 1.4 0z"/></svg>') center/contain no-repeat;
}
.qm-opt input[type="radio"]:checked{
  border-color: var(--teal);
  background:#0f2834;
  box-shadow:0 0 0 3px rgba(0,194,209,.14);
}
.qm-opt input[type="radio"]:checked::before{ transform:scale(1); }
.qm-opt input[type="radio"]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}



/* Input “tête” (barre avec tokens) — inchangé, rappel utile */
.qm-input{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; width:100%;
  border:1px solid var(--line);
  border-radius:10px; background:var(--panel);
  padding:.4rem .7rem; cursor:pointer;
}
.qm-input[aria-expanded="true"]{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,194,209,.14); background:#102332; }
.qm-tokens{ display:flex; flex-wrap:wrap; gap:.35rem; min-height:1.4rem; }
.qm-tokens:empty::after{ content: attr(data-placeholder); color:var(--muted); }
.qm-token{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .45rem; border-radius:8px;
  background:rgba(0,194,209,.10); border:1px solid var(--line-soft);
  font-size:.85rem; color:var(--teal-2);
}
.qm-token button{ background:transparent; border:none; color:inherit; cursor:pointer; line-height:1; font-size:.95em; }
.qm-caret{ width:14px; height:14px; flex:0 0 14px; opacity:.9;
  background: currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" stroke="%23c7d5e4" fill="none" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" stroke="%23c7d5e4" fill="none" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* Menu déroulant */
.qm-menu{
  position:absolute; inset:auto 0 auto 0; top: calc(100% + 6px);
  z-index:50;
  border:1px solid var(--line);
  border-radius:12px; background:var(--panel);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  padding:.35rem;
  display:none;
  max-height:260px; overflow:auto;
}
.q-multi.open .qm-menu{ display:block; }

/* ===== Option + checkbox custom (alignée et propre) ===== */
.qm-opt{
  display:grid;
  grid-template-columns: 12px 1fr; /* case fixe + texte fluide */
  align-items:center;
  column-gap: 1.6rem;
  padding:.1rem .25rem;
  border-radius:8px;
  cursor:pointer;
  line-height:1.25;
  user-select:none;
}

.qm-opt p {
  margin: 0 15px;
}

.qm-opt:hover{ background:rgba(255,255,255,.06); }

/* Checkbox custom */
.qm-opt input{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px; margin:0;
  border:2px solid var(--line, #233445);
  border-radius:4px;
  background:rgba(255,255,255,.02);
  display:inline-grid; place-content:center;
  margin:0;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.qm-opt input:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

/* Indicateur (carré rempli) */
.qm-opt input::before{
  content:"";
  width:10px; height:10px;
  transform:scale(0);
  transition:transform .12s ease-in-out;
  background:var(--teal);
  border-radius:2px;
}
.qm-opt input:checked{ border-color:var(--teal); background:rgba(0,194,209,.08); }
.qm-opt input:checked::before{ transform:scale(1); }

/* Texte de l’option */
.qm-opt > span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Petite aide sous le champ (optionnelle) */
.q-hint{
  display:block;
  margin-top:.35rem;
  font-size:.8rem;
  color:var(--muted);
}
/* ajoute la classe .sep sur l'élément .qm-opt si tu veux une barre */
.qm-opt.sep{
  display:grid;
  grid-template-columns: 18px 8px 1fr; /* case | barre | texte */
  column-gap: .8rem;
  align-items:center;
}
.qm-opt.sep::after{
  content:"";
  grid-column: 2;                 /* colonne “barre” */
  justify-self:center;
  width:1px; height:70%;
  background: color-mix(in srgb, var(--line) 85%, transparent);
  border-radius:1px;
}

/* ===== Fiche intégrée : badges prix sous la vidéo ===== */
.detail-price-container{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin-top:.6rem;
  flex-wrap:wrap;
}

/* prix principal (gros badge) */
.detail-price-badge{
  padding:.45rem .7rem;
  border-radius:12px;
  background: linear-gradient(90deg, rgba(0,194,209,.12), rgba(64,155,253,.08));
  border:1px solid rgba(64,155,253,.18);
  color:var(--teal-2);
  font-weight:800;
  font-size:1.05rem;
  box-shadow:0 8px 22px rgba(64,155,253,.06);
}

/* prix mensuel (badge secondaire, très visible) */
.detail-price-monthly-badge{
  padding:.35rem .6rem;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,107,53,.08), rgba(255,107,53,.03));
  border:1px solid rgba(255,107,53,.14);
  color:var(--orange);
  font-weight:700;
  font-size:.95rem;
}

/* si tu veux un label discret "Prix" (optionnel) */
.detail-price-label{ color:var(--muted); font-size:.85rem; margin-right:.4rem }

/* empêche la duplication visuelle si quelque chose est mal effacé */
.detail-price-container .detail-price-badge,
.detail-price-container .detail-price-monthly-badge { display:inline-flex; align-items:center; justify-content:center; }


/* ===== DETAIL (layout type "produit") ===== */
.script-hero{
  display:grid; gap:1.2rem;
  grid-template-columns: 1.15fr 1fr; /* gauche = infos, droite = vidéo */
  align-items:start;
  margin-top:.6rem;
}
.hero-left{
  display:flex; flex-direction:column; gap:.9rem;
}
.hero-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(17,34,48,.96), rgba(17,34,48,.72));
  border-radius:16px; padding:1rem 1.1rem;
}
.hero-title{ margin:0 0 .25rem; font-size:1.25rem; line-height:1.25; }
.hero-sub{ margin:.2rem 0 0; color:var(--muted) }

.hero-meta{ display:flex; flex-direction:column; gap:.7rem; }
.hero-price{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.hero-price .badge{
  display:inline-flex; align-items:center; padding:.4rem .7rem;
  border:1px solid var(--line); border-radius:12px;
  font-weight:700; background:rgba(255,255,255,.06);
}
.hero-tags{ display:flex; flex-wrap:wrap; gap:.4rem }

.hero-right .media-wrap{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0f1c27;
}
.hero-right .media-wrap iframe,
.hero-right .media-wrap video,
.hero-right .media-wrap img{ width:100%; height:420px; display:block; object-fit:cover }

/* zone secondaire sous le hero */
.detail-sections{ display:grid; gap:1rem; margin-top:1.3rem }
.detail-grid{
  display:grid; gap:1rem;
  grid-template-columns: 1.6fr .4fr; /* desc à gauche, encarts à droite */
}
.detail-col{ display:flex; flex-direction:column; gap:1rem }
/* Liens plus jolis dans les cartes de détail */
.detail-card a{
  color: var(--teal-2);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  border-radius: 6px;
  padding: 0 .12rem;
  transition: color .15s, background-color .15s, text-decoration-color .15s, box-shadow .15s;
  overflow-wrap: anywhere;           /* casse proprement les longues URLs */
}
.detail-card a:hover,
.detail-card a:focus{
  color: var(--text);
  text-decoration-color: currentColor;
  background: rgba(0,194,209,.08);
  box-shadow: inset 0 0 0 3px rgba(0,194,209,.12);
}
.detail-card a:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.detail-card a:visited{
  color: var(--teal-2);              /* évite le violet “visited” */
}
/* petite flèche pour les liens externes (optionnel) */
.detail-card a[href^="http"]::after{
  content: "↗";
  font-size: .9em;
  margin-left: .35rem;
  opacity: .7;
}

/* Option “pilule” pour les liens dans des listes (si tu veux un look tag) */
.detail-card .list a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .18rem .55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.detail-card .list a:hover{
  background: rgba(0,194,209,.10);
  border-color: var(--line-soft);
}


/* responsive */
@media (max-width: 1024px){
  .script-hero{ grid-template-columns: 1fr; }
  .hero-right .media-wrap iframe,
  .hero-right .media-wrap video,
  .hero-right .media-wrap img{ height:300px }
  .detail-grid{ grid-template-columns: 1fr; }
}

/* ===========================
   HERO — panneau de droite ++
   =========================== */

/* petit boost visuel + épinglé au scroll */
.hero-card.hero-aside{
  position: sticky;
  top: calc(var(--header-h) + 16px);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  background:
    radial-gradient(600px 180px at 0% 0%, rgba(0,194,209,.10), transparent 60%),
    linear-gradient(180deg, rgba(17,34,48,.96), rgba(17,34,48,.78));
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
}

/* titre un peu plus “produit” */
.hero-card.hero-aside .hero-title{
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  letter-spacing:.01em;
}

/* bloc prix “qui claque” */
.price-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
}

.hero-cta{
  display:grid;
  gap:.6rem;
  margin-top:.6rem;
}

.hero-cta .btn{
  height:48px;
  width:100%;
  justify-content:center;
  font-weight:800;
  letter-spacing:.02em;
  border-radius:12px;
  border:none;
}

.hero-cta .btn.buy{
  background:
    linear-gradient(90deg, rgba(0,194,209,.00), rgba(0,194,209,.18) 50%, rgba(0,194,209,.00)),
    linear-gradient(180deg, #10aab6, #0a90a6);
  box-shadow:0 14px 32px rgba(0,194,209,.28);
}
.hero-cta .btn.buy:hover{ transform:translateY(-1px) scale(1.01) }

.hero-cta .btn.subscribe{
  background: linear-gradient(180deg, #ff7a45, #ff5f2e);
  box-shadow:0 14px 32px rgba(255,107,53,.28);
  color:#fff;
}
.hero-cta .btn.subscribe:hover{ transform:translateY(-1px) scale(1.01) }

/* tags dessous, aérés */
.hero-tags{ margin-top:.4rem; gap:.45rem }
.hero-tags .chip{
  background:rgba(255,255,255,.05);
  border-color: var(--line-soft);
}

/* on évite le “double prix” si tu avais les badges sous la vidéo */
.script-hero .detail-price-container{ display:none !important; }

/* sécurité mobile : on enlève le sticky pour éviter le recouvrement */
@media (max-width: 1024px){
  .hero-card.hero-aside{ position: static; }
}

/* ====== FICHE PRODUIT — version clean (override) ====== */

/* 16/9 pour la vidéo (plus élégant qu'une hauteur fixe) */
.hero-right .media-wrap{ aspect-ratio: 16/9; }
.hero-right .media-wrap iframe,
.hero-right .media-wrap video,
.hero-right .media-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* grille : vidéo à gauche, panneau à droite */
.script-hero{
  grid-template-columns: 1.3fr .8fr; /* + d'espace pour la vidéo, panneau + compact */
  gap: 1rem;
}

/* panneau “acheteur” simplifié */
.hero-card.hero-aside{
  display:grid; gap:.75rem;
  padding: 1rem 1.1rem;
  position: sticky; top: calc(var(--header-h) + 16px);
  background:linear-gradient(180deg, rgba(17,34,48,.95), rgba(17,34,48,.80));
  border:1px solid var(--line);
  box-shadow:0 14px 36px rgba(0,0,0,.30);
}

/* titre sobre */
.hero-card.hero-aside .hero-title{
  margin:0;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem);
  letter-spacing:.01em;
}

/* sous-titre discret + clamp pour éviter le pavé */
.hero-card.hero-aside .hero-sub{
  margin:.1rem 0 .2rem;
  font-size:.92rem; color:var(--muted);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;
}

.price-box{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}

/* prix principal : à gauche, pill bleu */
.price-main{
  /* pas de margin-left:auto -> reste à gauche */
  display:inline-flex;
  align-items:center;           /* (align-items:left n'est pas valide) */
  justify-content:center;
  padding:.32rem .6rem;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,194,209,.12), rgba(0,194,209,.05));
  border:1px solid rgba(0,194,209,.22);
  color:var(--teal-2);
  font-weight:800;
  font-size:.95rem;
  box-shadow:0 8px 20px rgba(0,194,209,.18);
}

/* ancien prix : petit et discret */
.price-old{
  text-decoration:line-through;
  color:#ff6b6b; opacity:.8;
  font-weight:700; font-size:.9rem;
}

/* prix mensuel : poussé à droite */
.price-monthly{
  margin-left:auto; /* envoie ce badge à l'extrême droite */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.32rem .6rem;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,107,53,.10), rgba(255,107,53,.04));
  border:1px solid rgba(255,107,53,.18);
  color:var(--orange);
  font-weight:800;
  font-size:.95rem;
  box-shadow:0 8px 20px rgba(255,107,53,.15);
}

/* CTA : 2 colonnes uniquement si l'abonnement est visible */

.hero-cta { grid-template-columns:1fr 1fr; }

/* #btnSubscribe — même style que .btn.primary, mais en orange */
#btnSubscribe{
  border: none; /* comme .btn.primary */
  background:
    linear-gradient(90deg, rgba(255,107,53,0) 0%, rgba(255,107,53,.18) 50%, rgba(255,107,53,0) 100%),
    linear-gradient(180deg, #ff7a45, #ff5f2e);
  box-shadow: 0 12px 30px rgba(255,107,53,.28);
  color: #fff;
}

#btnSubscribe:hover{
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 14px 34px rgba(255,107,53,.34);
}

#btnSubscribe:focus-visible{
  outline: 2px solid rgba(255,107,53,.6);
  outline-offset: 2px;
}

/* ===== Split menu pour #btnBuy ===== */
.hero-cta{ position:relative; } /* ancre le menu */

.buy-menu{
  position:absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 220px;
  padding: .35rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,34,48,.96), rgba(17,34,48,.82));
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  display: none;
}
.buy-menu[aria-hidden="false"]{ display:block; animation: menuIn .14s ease both; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

.buy-menu .item{
  display:flex; align-items:center; gap:.55rem;
  width:100%;
  padding:.55rem .65rem;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font: inherit;
  cursor:pointer;
}
.buy-menu .item:hover{
  background: rgba(255,255,255,.05);
  border-color: var(--line);
}

/* petites icônes (utilise la technique mask comme ailleurs) */
.buy-menu .ico{
  width:18px; height:18px; flex:0 0 18px;
  background: currentColor;
}
.buy-menu .ico.pay{
  -webkit-mask:url('/assets/img/card.svg') no-repeat center / contain;
          mask:url('/assets/img/card.svg') no-repeat center / contain;
}
.buy-menu .ico.cart{
  -webkit-mask:url('/assets/img/basket_add.svg') no-repeat center / contain;
          mask:url('/assets/img/basket_add.svg') no-repeat center / contain;
}

/* focus/accès clavier */
.buy-menu .item:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.hero-cta .btn{
  height:46px; width:100%; border-radius:12px; border:none;
  justify-content:center; font-weight:800; letter-spacing:.02em;
}

/* achat : primaire teal, simple */
.hero-cta .btn.buy{
  background:
    linear-gradient(90deg, rgba(0,194,209,.00), rgba(0,194,209,.15) 50%, rgba(0,194,209,.00)),
    linear-gradient(180deg, #10aab6, #0a90a6);
  box-shadow:0 12px 28px rgba(0,194,209,.22);
}
.hero-cta .btn.buy:hover{ transform:translateY(-1px); }

/* abonnement : secondaire orange */
.hero-cta .btn.subscribe{
  background: linear-gradient(180deg, #ff7a45, #ff5f2e);
  color:#fff; box-shadow:0 12px 28px rgba(255,107,53,.22);
}
.hero-cta .btn.subscribe:hover{ transform:translateY(-1px); }

/* tags : plus compacts + espacés du reste */
.hero-tags{ margin-top:.2rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.hero-tags .chip{
  background:rgba(255,255,255,.05); border-color: var(--line-soft); color:var(--text);
  font-size:.78rem; padding:.18rem .5rem; border-radius:10px;
}

/* mobile : on retire le sticky pour éviter tout recouvrement */
@media (max-width: 1024px){
  .hero-card.hero-aside{ position: static; }
  .price-monthly{ margin-left:0; }
}
/* ===== Mini essentiels sous le panneau (discret) ===== */
.hero-mini{ margin-top:.6rem; }

.hero-mini .detail-card{
  padding:.7rem .8rem;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(17,34,48,.72), rgba(17,34,48,.60));
  border:1px dashed color-mix(in srgb, var(--line) 72%, transparent);
  box-shadow:none;
}

.hero-mini .detail-card h3{
  margin:.05rem 0 .35rem;
  font-size:.9rem;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.02em;
}

/* grille compacte, petites cases */
.hero-mini .detail-essentials{
  display:grid;
  gap:.45rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.hero-mini .detail-essentials .box{
  padding:.55rem .6rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  text-align:center;
}

.hero-mini .detail-essentials .k{
  display:block;
  font-size:.78rem;
  color:var(--muted);
  line-height:1.2;
}

.hero-mini .detail-essentials .v{
  font-weight:700;
  font-size:.95rem;
  line-height:1.2;
}

/* mobile : même rendu, on laisse l'espacement */
@media (max-width:1024px){
  .hero-mini{ margin-top:.7rem; }
}

/* ===== Menus d'action sous les CTA ===== */
.hero-cta .cta-wrap{ position:relative; width:100%; } /* ancrage menu par bouton */

.cta-menu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;                     /* aligne sur le bord gauche du bouton */
  z-index: 35;
  min-width: 220px;
  padding: .35rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17,34,48,.96), rgba(17,34,48,.82));
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  display: none;
}
.cta-menu[aria-hidden="false"]{ display:block; animation: ctaMenuIn .14s ease both; }
@keyframes ctaMenuIn{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

.cta-menu .item{
  display:flex; align-items:center; gap:.55rem;
  width:100%;
  padding:.55rem .65rem;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font: inherit;
  cursor:pointer;
}
.cta-menu .item:hover{
  background: rgba(255,255,255,.05);
  border-color: var(--line);
}

/* petites icônes */
.cta-menu .ico{
  width:18px; height:18px; flex:0 0 18px;
  background: currentColor;
}
.cta-menu .ico.pay{
  -webkit-mask:url('/assets/img/card.svg') no-repeat center / contain;
          mask:url('/assets/img/card.svg') no-repeat center / contain;
}
.cta-menu .ico.cart{
  -webkit-mask:url('/assets/img/basket_add.svg') no-repeat center / contain;
          mask:url('/assets/img/basket_add.svg') no-repeat center / contain;
}

/* accessibilité */
.cta-menu .item:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.btn.is-disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;       /* ← empêche tout clic */
  filter: grayscale(.25);
}

/* ===== Panier : état connecté ===== */
.btn.basket.is-logged {
  position: relative;
  box-shadow: 0 0 0 1px rgba(34,234,165,.28) inset, 0 0 22px rgba(34,234,165,.18);
}
.btn.basket.is-logged::after{
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22eaa5;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

/* ===== Drawer Panier (slide right) ===== */
#cartDrawer[aria-hidden="true"]{ display:none }
#cartDrawer[aria-hidden="false"]{ display:block }

#cartDrawer{
  position: fixed; inset: 0; z-index: 301;
}

#cartDrawer .cart-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

#cartDrawer .cart-panel{
  position:absolute; top:0; right:0; height:100%;
  width: min(420px, 92vw);
  background: linear-gradient(180deg, rgba(15,28,39,.96), rgba(15,28,39,.85));
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(0,0,0,.45);
  display:grid; grid-template-rows: auto 1fr auto;
  animation: cartIn .16s ease both;
}

/* Panier : bouton supprimer au survol */
#cartDrawer .cart-item {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

#cartDrawer .ci-thumb {
  width: 56px; height: 56px; border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: #0f1c27;
}

#cartDrawer .ci-body { line-height: 1.2 }
#cartDrawer .ci-title { font-weight: 600 }
#cartDrawer .ci-meta  { font-size: 12px; opacity: .75 }

#cartDrawer .ci-price { font-weight: 700; white-space: nowrap }

#cartDrawer .ci-remove {
  position: absolute; top: 5px; right: 5px;
  opacity: 0; transform: scale(.9);
  transition: opacity .18s ease, transform .18s ease;
  border: 1px solid var(--line);
  background: rgba(220,70,70,.12);
  color: #ff6b6b;
  border-radius: 10px;
  padding: 6px 8px;
  cursor: pointer;
  width: 22px;
  height: 22px;
}
#cartDrawer .cart-item:hover .ci-remove,
#cartDrawer .ci-remove:focus-visible {
  opacity: 1; transform: scale(1);
}

/* Panier : petite impulsion quand un article arrive */
#basket_btn.cart-bump { animation: cartBump .28s ease; }
@keyframes cartBump { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
#basket_btn { position: relative; }
#basket_btn.basket-auth::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 10%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgb(58, 226, 75);
  box-shadow: 0 0 0 1px rgba(58, 226, 75,.4);
}

/* Optionnel : ombre douce sur le clone volant (si tu veux) */
.fly-clone {
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  border-radius: 10px;
}

@keyframes cartIn { from{ transform: translateX(12px); opacity:.6 } to{ transform:none; opacity:1 } }

.cart-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: .8rem 1rem; border-bottom:1px solid var(--line);
}
.cart-head h3{ margin:0; font-size:1.1rem }
.cart-close{
  background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:8px; width:32px; height:32px; cursor:pointer;
}
.cart-close:hover{ color:var(--text); background:rgba(255,255,255,.05) }

.cart-body{
  overflow:auto; padding: .8rem;
}
.cart-empty{
  padding: .8rem; color: var(--muted);
  border:1px dashed var(--line); border-radius:12px; text-align:center;
}

/* item */
.cart-item{
  display:grid; grid-template-columns: 56px 1fr auto;
  align-items:center; gap:.6rem;
  padding:.5rem; border:1px solid var(--line);
  border-radius:12px; background: rgba(255,255,255,.03);
  margin-bottom:.6rem;
}
.ci-thumb{
  width:56px; height:56px; border-radius:10px;
  background:#0e1c27 center/cover no-repeat; border:1px solid var(--line);
}
.ci-body{ min-width:0 }
.ci-title{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ci-meta{ font-size:.82rem }
.ci-price{ font-weight:800; color: var(--teal-2) }

.cart-foot{
  border-top:1px solid var(--line);
  padding:.8rem; display:grid; gap:.6rem;
}
.cart-total{
  display:flex; align-items:center; justify-content:space-between; gap: 5px;
}
.cart-total span{ color:var(--muted) }
.cart-actions{ display:flex; gap:.5rem; justify-content:flex-end }