/* ============================================================
   ANANZÊ — Design system partagé
   Landing · Application · Espace partenaires · Dividendes · Admin
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --deep:#070707;
  --soft:#131313;
  --panel:#181818;
  --raise:#1f1f1f;
  --yellow:#f4e600;
  --yellow-dim:#c9be00;
  --cream:#f4f0e8;
  --muted:#a8a49b;
  --dim:#75716a;
  --line:rgba(244,240,232,.14);
  --line-soft:rgba(244,240,232,.08);
  --green:#63d19e;
  --red:#e5674b;
  --blue:#6aa9d8;
  /* Une seule famille, déclinée : Archivo est variable en graisse
     (100→900) ET en largeur (62→125). Le condensé noir donne
     l'affiche, l'étendu léger donne le libellé. C'est la demande
     d'origine — une famille lisible qui varie dans les types de
     caractère — et ça remplace les trois familles dépareillées. */
  --display:"Archivo",system-ui,Arial,sans-serif;
  --sans:"Archivo",system-ui,Arial,sans-serif;
  --mono:"Archivo",system-ui,Arial,sans-serif;
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.28,.44,1);

  /* Échelle typographique — un rapport constant, pas des valeurs au hasard */
  --t-xs:9.5px;    /* étiquettes mono */
  --t-sm:10.5px;   /* légendes */
  --t-base:12px;   /* texte d'interface */
  --t-md:13.5px;   /* texte courant */
  --t-lg:19px;     /* seuil bas du display */
  --lh-tight:1.05;
  --lh-body:1.75;
  --measure:62ch;  /* longueur de ligne confortable */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);overflow-x:hidden;
  font-size:var(--t-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  text-rendering:optimizeLegibility;
}

/* Le display ne descend jamais sous 19 px : en dessous le condensé se ferme
   et perd sa lisibilité. Les petits titres passent au sans en 700. */
h1,h2,h3,h4,.card-body h3,.h-display,.h-sec{
  font-family:var(--display);font-weight:800;font-stretch:82%;
  letter-spacing:-.055em;text-wrap:balance;
}
h1,h2{letter-spacing:-.075em}
p{text-wrap:pretty}
p,li{max-width:var(--measure)}

/* Chiffres alignés partout où ils forment une colonne ou se comparent */
.tbl,.kpi b,.price,.amt,.card-meta,.split,.split-key b,.meter .lbl,
.t-plan .amt,.t-recap b.prix,.chart,.player-ctrl .time,.sheet-side dd{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:var(--yellow);color:#111}

/* Scrollbar sobre */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0d0d0d}
::-webkit-scrollbar-thumb{background:#2c2c2c}
::-webkit-scrollbar-thumb:hover{background:var(--yellow-dim)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* Grain cinéma ------------------------------------------------ */
/* Le grain est fabriqué, pas emprunté : 15 Ko de bruit tuilable au
   lieu des 10 Mo de texture de banque d'images qui traînaient ici.
   Dix mégaoctets pour poser du bruit sur une page, c'est plus lourd
   que le film qu'on regarde. Voir design/preparer-medias.py. */
.grain{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  background:url("medias/grain.png") 0 0/480px;
  mix-blend-mode:soft-light;opacity:.12;
}

/* Marque ------------------------------------------------------ */
/* ---------------------------------------------------------------
   LA MARQUE
   Dans l'en-tête : le mot seul, sans l'araignée — c'est le principe
   de Netflix. Deux signes côte à côte dans une barre de navigation,
   c'en est un de trop : l'œil ne sait plus lequel est la marque.
   L'araignée est réservée à l'icône d'application, là où il n'y a
   pas la place d'écrire le nom.
   Le texte reste dans le HTML pour les lecteurs d'écran et le
   référencement ; il est simplement masqué à l'œil.
   --------------------------------------------------------------- */
.brand{
  display:inline-block;flex:none;width:126px;height:27px;
  background:url("ananze-mot.png") no-repeat left center/contain;
  font-size:0;line-height:0;color:transparent;text-decoration:none;
  transition:opacity .2s var(--ease);
}
.brand:hover{opacity:.82}
.brand-mark{display:none}
.brand.sm{width:105px;height:23px}
/* Sur les fonds clairs — tunnel, modales — le mot passe en noir.
   Le jaune du « zê », lui, ne bouge jamais. */
.t-card .brand,.light .brand{background-image:url("ananze-mot-sombre.png")}

/* Typo utilitaire --------------------------------------------- */
.eyebrow{font:500 9.5px/1.5 var(--mono);letter-spacing:.15em;color:var(--yellow);text-transform:uppercase}
.h-display{font:800 clamp(32px,4.2vw,58px)/.98 var(--display);letter-spacing:-.075em;margin:0}
.h-display em{font-style:italic;color:var(--yellow)}
.h-sec{font:800 clamp(24px,2.6vw,34px)/1 var(--display);letter-spacing:-.06em;margin:0}
.mono{font:500 9.5px var(--mono);letter-spacing:.12em}

/* Boutons ----------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;
  border:0;cursor:pointer;height:42px;padding:0 20px;
  font:800 11px var(--sans);letter-spacing:.02em;
  transition:transform .22s var(--ease),background .22s,color .22s;
  border-radius:var(--r);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:15px;height:15px;flex:none}
.btn-yellow{background:var(--yellow);color:#111}
.btn-yellow:hover{background:#fff100}
.btn-ghost{background:rgba(244,240,232,.11);color:var(--cream);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(244,240,232,.2)}
.btn-line{background:transparent;color:var(--cream);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-sm{height:34px;padding:0 14px;font-size:10px}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(0,0,0,.35);color:var(--cream);display:grid;place-items:center;
  cursor:pointer;transition:.22s var(--ease);flex:none;
}
.icon-btn:hover{border-color:var(--yellow);color:var(--yellow);transform:scale(1.07)}
.icon-btn svg{width:16px;height:16px}

/* Puces / badges ---------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px;
  border:1px solid var(--line);font:500 8.5px var(--mono);letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;border-radius:var(--r);white-space:nowrap;
}
.chip.on{border-color:var(--yellow);color:var(--yellow)}
.chip.solid{background:var(--yellow);border-color:var(--yellow);color:#111;font-weight:600}
.badge-4k{
  border:1px solid var(--yellow);color:var(--yellow);font:700 8px var(--sans);
  letter-spacing:.1em;padding:2px 5px;border-radius:2px;
}

/* ============================================================
   APPLICATION — barre supérieure
   ============================================================ */
.app-bar{
  position:fixed;top:0;left:0;right:0;z-index:40;height:70px;
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:0 clamp(16px,3.4vw,54px);
  transition:background .35s var(--ease),backdrop-filter .35s;
  background:linear-gradient(180deg,rgba(0,0,0,.85),transparent);
}
.app-bar.stuck{background:rgba(9,9,9,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.app-nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,24px);margin-right:auto}
.app-nav a{
  color:#cfcbc2;text-decoration:none;font:600 11px var(--sans);letter-spacing:.02em;
  padding:6px 0;position:relative;transition:color .2s;
}
.app-nav a:after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--yellow);transition:right .3s var(--ease);
}
.app-nav a:hover{color:var(--cream)}
.app-nav a.on{color:var(--yellow)}
.app-nav a.on:after{right:0}
.app-tools{display:flex;align-items:center;gap:10px}

/* Recherche inline */
.search-inline{display:flex;align-items:center;height:38px;border:1px solid var(--line);background:rgba(0,0,0,.5);transition:.3s var(--ease);width:38px;overflow:hidden}
.search-inline.open{width:min(280px,44vw);border-color:var(--yellow)}
.search-inline button{width:36px;height:36px;border:0;background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center;flex:none}
.search-inline input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--cream);
  font:500 11px var(--sans);outline:0;padding-right:10px;
}

/* Avatar + menu */
.avatar{width:34px;height:34px;border-radius:3px;object-fit:cover;background:#2a2a2a;cursor:pointer;border:1px solid transparent;transition:.2s}
.avatar:hover{border-color:var(--yellow)}
.av-wrap{position:relative}
.av-menu{
  position:absolute;right:0;top:44px;width:230px;background:#131313;
  border:1px solid var(--line);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:.24s var(--ease);box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.av-menu.open{opacity:1;visibility:visible;transform:none}
.av-menu h6{margin:6px 8px 8px;font:500 8px var(--mono);letter-spacing:.14em;color:var(--dim)}
.av-menu button,.av-menu a{
  display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;
  color:#d8d4cb;font:600 11px var(--sans);padding:9px 8px;cursor:pointer;text-align:left;text-decoration:none;
}
.av-menu button:hover,.av-menu a:hover{background:#1e1e1e;color:var(--yellow)}
.av-menu .sep{height:1px;background:var(--line);margin:6px 0}
.av-menu .mini{width:24px;height:24px;border-radius:2px;object-fit:cover}

/* ============================================================
   Écran profils
   ============================================================ */
.profiles-screen{
  min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:radial-gradient(circle at 50% 0,#1c1806 0,transparent 42%),var(--ink);
}
.profiles-inner{text-align:center;animation:enter .7s var(--ease) both}
.profiles-inner h1{font:800 clamp(34px,5vw,58px)/1 var(--display);letter-spacing:-.07em;margin:26px 0 8px}
.profiles-inner h1 em{color:var(--yellow)}
.profiles-inner>p{color:var(--muted);font-size:12px;margin:0 0 44px}
.profile-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,3vw,34px)}
.profile-pick{
  border:0;background:transparent;cursor:pointer;display:grid;gap:12px;justify-items:center;
  width:clamp(96px,13vw,136px);color:var(--muted);transition:color .25s;
}
.profile-pick figure{
  margin:0;width:100%;aspect-ratio:1;border:2px solid transparent;overflow:hidden;
  background:#1c1c1c;transition:.35s var(--ease);position:relative;
}
.profile-pick figure img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.profile-pick figure:after{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);
}
.profile-pick:hover{color:var(--cream)}
.profile-pick:hover figure{border-color:var(--yellow);transform:translateY(-6px)}
.profile-pick:hover figure img{transform:scale(1.07)}
.profile-pick span{font:700 11px var(--sans);letter-spacing:.02em}
.profile-pick small{font:500 8px var(--mono);letter-spacing:.12em;color:var(--dim)}
.profile-add figure{display:grid;place-items:center;border:1px dashed var(--line)}
.profile-add figure b{font:300 34px var(--sans);color:var(--dim)}

/* ============================================================
   Billboard (héros de l'app)
   ============================================================ */
.billboard{position:relative;height:min(88vh,760px);min-height:520px;display:flex;align-items:flex-end;overflow:hidden}
.bb-media{position:absolute;inset:0}
.bb-media img,.bb-media video{width:100%;height:100%;object-fit:cover}
.bb-media video{opacity:0;transition:opacity 1s var(--ease)}
.bb-media video.on{opacity:1}
.bb-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,#070707 4%,rgba(7,7,7,.9) 30%,rgba(7,7,7,.35) 62%,rgba(7,7,7,.05)),
    linear-gradient(0deg,var(--ink) 1%,transparent 46%),
    linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%);
}
.bb-body{position:relative;z-index:2;padding:0 clamp(16px,3.4vw,54px) clamp(66px,8vw,112px);max-width:min(660px,92vw);animation:enter .9s var(--ease) both}
.bb-tag{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.bb-tag i{width:22px;height:1px;background:var(--yellow);display:block}
.bb-title{font:800 clamp(38px,6vw,80px)/.9 var(--display);letter-spacing:-.075em;margin:0 0 6px}
.bb-title em{color:var(--yellow)}
.bb-sub{font:500 10px var(--mono);letter-spacing:.14em;color:#cbc7be;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bb-sub b{color:var(--yellow);font-weight:500}
.bb-desc{font-size:var(--t-md);line-height:var(--lh-body);color:#d5d1c8;max-width:52ch;margin:0 0 24px}
.bb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bb-meta-right{position:absolute;right:clamp(16px,3.4vw,54px);bottom:clamp(66px,8vw,112px);z-index:2;display:flex;gap:10px;align-items:center}

/* ============================================================
   Rangées / carrousels
   ============================================================ */
.rows{position:relative;z-index:3;margin-top:-42px;padding-bottom:70px}
.row{margin-bottom:clamp(26px,3.4vw,44px);position:relative;z-index:1}
.row:hover{z-index:5}
.row-head{
  display:flex;align-items:baseline;gap:14px;
  padding:0 clamp(16px,3.4vw,54px);margin-bottom:13px;
}
.row-head h2{font:600 clamp(19px,1.7vw,24px) var(--display);letter-spacing:-.05em;margin:0}
.row-head span{font:500 8.5px var(--mono);letter-spacing:.14em;color:var(--dim)}
.row-head a{margin-left:auto;color:var(--dim);font:600 9px var(--sans);letter-spacing:.1em;text-decoration:none;text-transform:uppercase;transition:.2s}
.row-head a:hover{color:var(--yellow)}

.rail-wrap{position:relative}
.rail{
  display:flex;gap:9px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;
  padding:26px clamp(16px,3.4vw,54px) 122px;margin:-26px 0 -122px;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail-nav{
  position:absolute;top:0;bottom:122px;width:clamp(34px,3.4vw,54px);z-index:6;
  border:0;background:linear-gradient(90deg,rgba(10,10,10,.92),transparent);
  color:var(--cream);font-size:20px;cursor:pointer;opacity:0;transition:opacity .25s;
  display:grid;place-items:center;
}
.rail-nav.next{right:0;background:linear-gradient(270deg,rgba(10,10,10,.92),transparent)}
.rail-nav.prev{left:0}
.rail-wrap:hover .rail-nav{opacity:1}
.rail-nav:hover{color:var(--yellow)}

/* Carte contenu ---------------------------------------------- */
.card{
  position:relative;flex:none;width:clamp(168px,17vw,262px);
  background:transparent;cursor:pointer;
  transition:transform .34s var(--spring),box-shadow .34s var(--ease);
  transition-delay:0s;
}
.card-art{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:#191919;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.card-art>img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .45s}
.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease)}
.card.preview video{opacity:1}
.card.preview .card-art>img{opacity:0}
.card-art:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 2%,rgba(0,0,0,.22) 44%,transparent 74%);
  opacity:.88;transition:opacity .3s;
}
.card-body{
  position:absolute;inset:auto 0 0;padding:11px 12px 13px;z-index:3;
  transform:translateY(4px);opacity:.94;transition:.3s var(--ease);
}
.card-body h3{
  font:600 15px/1.05 var(--display);letter-spacing:-.045em;margin:0 0 5px;
  text-wrap:balance;
}
.card-meta{
  display:flex;align-items:center;gap:7px;font:500 8px var(--mono);
  letter-spacing:.11em;color:#c2beb5;font-variant-numeric:tabular-nums;
}
.card-meta i{width:2px;height:2px;background:var(--yellow);border-radius:50%;display:block;flex:none}
.card-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22);z-index:4}
.card-progress i{display:block;height:100%;background:var(--yellow)}

/* Le volet qui se déplie sous l'affiche, comme sur Prime Video */
.card-panel{
  position:absolute;top:100%;left:0;right:0;z-index:2;overflow:hidden;
  background:#141414;border-top:1px solid rgba(244,240,232,.09);
  max-height:0;opacity:0;
  transition:max-height .34s var(--ease),opacity .2s var(--ease);
  transition-delay:0s;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
}
.card-panel-in{padding:10px 12px 12px;display:grid;gap:9px}
.card-actions{display:flex;align-items:center;gap:7px}
.card-actions button{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(244,240,232,.4);
  background:transparent;color:var(--cream);cursor:pointer;display:grid;place-items:center;
  flex:none;transition:.18s var(--ease);
}
.card-actions button:hover{background:var(--yellow);color:#111;border-color:var(--yellow);transform:scale(1.1)}
.card-actions button.play{background:var(--cream);color:#111;border-color:var(--cream)}
.card-actions button.play:hover{background:var(--yellow);border-color:var(--yellow)}
.card-actions svg{width:12px;height:12px}
.card-actions .spacer{margin-left:auto}
.card-tags{
  display:flex;align-items:center;gap:8px;font:500 7.5px var(--mono);
  letter-spacing:.11em;color:var(--muted);flex-wrap:wrap;
}
.card-tags b{color:var(--yellow);font-weight:500}

/* L'état ouvert : 400 ms de patience pour ne pas clignoter au survol rapide */
.card:hover,.card:focus-visible{
  transform:scale(1.26);z-index:14;transition-delay:.4s;
}
.card:hover .card-panel,.card:focus-visible .card-panel{
  max-height:96px;opacity:1;transition-delay:.4s;
}
.card:hover .card-art{box-shadow:0 18px 42px rgba(0,0,0,.72)}
.card:hover .card-art:after{opacity:1}
.card:hover .card-body{transform:none;opacity:1}
.card:hover .card-art>img{transform:scale(1.04)}
.card:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* Aux extrémités d'une rangée, la carte grandit vers l'intérieur */
.rail .card:first-child{transform-origin:left center}
.rail .card:last-child{transform-origin:right center}

.card .rank-num{
  position:absolute;left:5px;bottom:24px;z-index:1;font:700 68px/1 var(--display);
  color:transparent;-webkit-text-stroke:1.4px rgba(244,230,0,.45);letter-spacing:-.08em;
  pointer-events:none;transition:.34s var(--ease);
}
.card:hover .rank-num{-webkit-text-stroke-color:rgba(244,230,0,.75)}

/* Affiche générative (contenus sans visuel photographique) */
.gen{
  position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:9px;padding:16px;text-align:center;overflow:hidden;
}
.gen:before{
  content:"";position:absolute;inset:-30%;
  background:
    repeating-radial-gradient(circle at 50% 42%,rgba(244,240,232,.09) 0 1px,transparent 1px 26px),
    conic-gradient(from 0deg at 50% 42%,rgba(244,240,232,.08) 0 1deg,transparent 1deg 45deg);
  opacity:.9;
}
.gen b{
  position:relative;font:800 clamp(15px,1.35vw,21px)/1.02 var(--display);
  letter-spacing:-.055em;color:rgba(244,240,232,.95);max-width:88%;
}
.gen u{
  position:relative;text-decoration:none;font:500 7px var(--mono);letter-spacing:.16em;
  color:rgba(244,230,0,.9);text-transform:uppercase;
}


/* Carte format affiche (portrait) */
.card.poster{width:clamp(132px,11.5vw,178px)}
.card.poster .card-art{aspect-ratio:2/3}
.card.poster .card-body h3{font-size:14px}

/* Carte live */
.card.live .card-art:before{
  content:"● EN DIRECT";position:absolute;left:10px;top:10px;z-index:3;
  font:700 7px var(--mono);letter-spacing:.14em;color:#fff;background:#d0402a;padding:3px 6px;
}

/* ============================================================
   Fiche détaillée (overlay)
   ============================================================ */
.sheet{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease);padding:44px 16px;
}
.sheet.open{opacity:1;visibility:visible}
.sheet-card{
  width:min(920px,100%);margin:0 auto;background:#101010;border:1px solid var(--line);
  transform:translateY(22px) scale(.98);transition:.45s var(--ease);position:relative;
}
.sheet.open .sheet-card{transform:none}
.sheet-hero{position:relative;aspect-ratio:16/8;overflow:hidden;background:#000}
.sheet-hero img,.sheet-hero video{width:100%;height:100%;object-fit:cover}
.sheet-hero video{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.sheet-hero video.on{opacity:1}
.sheet-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#101010 1%,transparent 58%),linear-gradient(90deg,rgba(16,16,16,.8),transparent 62%)}
.sheet-hero-body{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 clamp(18px,3.4vw,40px) 26px}
.sheet-hero-body h2{font:800 clamp(30px,4.4vw,54px)/.92 var(--display);letter-spacing:-.075em;margin:0 0 14px}
.sheet-close{
  position:absolute;right:14px;top:14px;z-index:5;width:36px;height:36px;border-radius:50%;
  border:0;background:rgba(0,0,0,.68);color:var(--cream);font:300 24px/1 var(--sans);cursor:pointer;
  backdrop-filter:blur(6px);transition:.2s;
}
.sheet-close:hover{background:var(--yellow);color:#111}
.sheet-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(20px,3vw,42px);padding:26px clamp(18px,3.4vw,40px) 30px}
.sheet-facts{font-size:var(--t-md);line-height:var(--lh-body);color:#cfcbc2;max-width:64ch}
.sheet-facts .line{display:flex;gap:9px;align-items:center;margin-bottom:14px;font:500 9px var(--mono);letter-spacing:.11em;color:var(--muted)}
.sheet-facts .line b{color:var(--green);font-weight:500}
.sheet-side dl{margin:0;font-size:11px;line-height:1.7}
.sheet-side dt{font:500 8px var(--mono);letter-spacing:.13em;color:var(--dim);margin-top:14px}
.sheet-side dt:first-child{margin-top:0}
.sheet-side dd{margin:3px 0 0;color:#d5d1c8}
.sheet-side dd a{color:var(--yellow);text-decoration:none}

.sheet-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);padding:0 clamp(18px,3.4vw,40px);margin-bottom:20px}
.sheet-tabs button{
  border:0;background:transparent;color:var(--dim);cursor:pointer;padding:0 0 12px;
  font:700 11px var(--sans);letter-spacing:.02em;position:relative;transition:color .2s;
}
.sheet-tabs button:after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--yellow);transition:right .3s var(--ease)}
.sheet-tabs button.on{color:var(--cream)}
.sheet-tabs button.on:after{right:0}
.sheet-pane{padding:0 clamp(18px,3.4vw,40px) 34px}
.sheet-pane[hidden]{display:none}

/* Langues audio */
.lang-grid{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.lang-pill{
  border:1px solid var(--line);background:transparent;color:#cbc7be;cursor:pointer;
  font:600 10px var(--sans);padding:7px 11px;transition:.2s;display:flex;gap:7px;align-items:center;
}
.lang-pill small{font:500 7px var(--mono);color:var(--dim);letter-spacing:.1em}
.lang-pill:hover{border-color:var(--yellow);color:var(--cream)}
.lang-pill.on{background:var(--yellow);border-color:var(--yellow);color:#111}
.lang-pill.on small{color:#5c5400}

/* Casting */
.cast-rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.cast-rail::-webkit-scrollbar{display:none}
.cast{flex:none;width:112px;text-align:left}
.cast figure{margin:0 0 8px;aspect-ratio:1;overflow:hidden;background:#1d1d1d;filter:grayscale(1);transition:.4s var(--ease)}
.cast:hover figure{filter:none}
.cast figure img{width:100%;height:100%;object-fit:cover}
.cast b{display:block;font:700 10.5px var(--sans);letter-spacing:-.01em}
.cast small{font:500 8px var(--mono);letter-spacing:.1em;color:var(--dim)}

/* Épisodes */
.ep{display:grid;grid-template-columns:34px 150px 1fr;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:.2s}
.ep:hover{background:rgba(244,230,0,.045)}
.ep .n{font:800 20px var(--display);color:var(--dim);text-align:center}
.ep figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:#1c1c1c;position:relative}
.ep figure img{width:100%;height:100%;object-fit:cover}
.ep h4{margin:0 0 4px;font:700 12px var(--sans)}
.ep p{margin:0;font-size:10.5px;line-height:1.6;color:var(--muted)}
.ep .dur{font:500 8px var(--mono);color:var(--dim);letter-spacing:.1em}

/* ============================================================
   Lecteur vidéo
   ============================================================ */
.player{
  position:fixed;inset:0;z-index:90;background:#000;display:none;
}
.player.open{display:block;animation:fade .35s var(--ease)}
.player video{width:100%;height:100%;object-fit:contain;background:#000}
.player-ui{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px,2.4vw,28px);
  background:linear-gradient(180deg,rgba(0,0,0,.7),transparent 22%,transparent 62%,rgba(0,0,0,.86));
  transition:opacity .4s;
}
.player.idle .player-ui{opacity:0;pointer-events:none}
.player-top{display:flex;align-items:flex-start;gap:14px}
.player-top h3{font:600 clamp(18px,2.4vw,30px) var(--display);letter-spacing:-.05em;margin:0}
.player-top p{margin:5px 0 0;font:500 8px var(--mono);letter-spacing:.14em;color:var(--muted)}
.player-top .icon-btn{margin-left:auto}
.player-bottom{display:grid;gap:12px}
.seek{position:relative;height:16px;cursor:pointer;display:flex;align-items:center}
.seek-track{height:3px;width:100%;background:rgba(255,255,255,.24);position:relative}
.seek-buf{position:absolute;inset:0 auto 0 0;background:rgba(255,255,255,.34);width:0}
.seek-fill{position:absolute;inset:0 auto 0 0;background:var(--yellow);width:0}
.seek-dot{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:var(--yellow);transform:translate(-50%,-50%) scale(0);transition:transform .2s}
.seek:hover .seek-dot{transform:translate(-50%,-50%) scale(1)}
.player-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.player-ctrl .time{font:500 9px var(--mono);letter-spacing:.08em;color:#d5d1c8;margin-left:2px}
.player-ctrl .spacer{margin-left:auto}
.pop{position:relative}
.pop-menu{
  position:absolute;bottom:48px;right:0;width:212px;background:#131313;border:1px solid var(--line);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.24s var(--ease);
}
.pop-menu.open{opacity:1;visibility:visible;transform:none}
.pop-menu h6{margin:6px 8px;font:500 8px var(--mono);letter-spacing:.14em;color:var(--dim)}
.pop-menu button{
  display:flex;width:100%;gap:9px;align-items:center;border:0;background:transparent;color:#d8d4cb;
  font:600 11px var(--sans);padding:8px;cursor:pointer;text-align:left;
}
.pop-menu button:hover{background:#1e1e1e}
.pop-menu button.on{color:var(--yellow)}
.pop-menu button.on:before{content:"✓";font-size:10px}
.pop-menu button:not(.on):before{content:"";width:8px}
.net-note{font:500 8px var(--mono);letter-spacing:.1em;color:var(--dim);padding:6px 8px;line-height:1.6}

/* ============================================================
   Vues secondaires (recherche, liste, compte)
   ============================================================ */
.view{padding:96px clamp(16px,3.4vw,54px) 80px;min-height:100vh}
.view-head{margin-bottom:30px}
.view-head h1{font:800 clamp(30px,4.4vw,54px)/1 var(--display);letter-spacing:-.075em;margin:10px 0 0}
.view-head h1 em{color:var(--yellow)}
.view-head p{color:var(--muted);font-size:var(--t-base);margin:12px 0 0;max-width:58ch;line-height:var(--lh-body)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px 11px;row-gap:118px;padding-bottom:20px}
.grid-cards .card{width:100%}
/* Champ de recherche posé dans la vue elle-même. Sur téléphone, la
   barre du haut n'a plus de loupe : c'est ce champ-ci qui porte la
   recherche, et il doit être assez haut pour un pouce (48 px) avec un
   texte à 16 px — en dessous, iOS zoome tout seul sur le champ et la
   page se retrouve de travers. */
.rech-champ{
  display:flex;align-items:center;gap:11px;
  border:1px solid var(--line);background:var(--soft);border-radius:4px;
  padding:0 14px;margin:20px 0 0;transition:border-color .2s,background .2s;
}
.rech-champ:focus-within{border-color:rgba(244,230,0,.55);background:var(--panel)}
.rech-champ svg{width:17px;height:17px;color:var(--dim);flex:none;transition:color .2s}
.rech-champ:focus-within svg{color:var(--yellow)}
.rech-champ input{
  flex:1;min-width:0;height:48px;border:0;background:transparent;outline:0;
  color:var(--cream);font:500 16px var(--sans);letter-spacing:-.01em;
  -webkit-appearance:none;appearance:none;
}
.rech-champ input::placeholder{color:var(--dim)}
.rech-champ input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.filters{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 26px}
.filters button{
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  font:600 10px var(--sans);padding:8px 13px;transition:.2s;
}
.filters button:hover{color:var(--cream);border-color:rgba(244,240,232,.3)}
.filters button.on{background:var(--yellow);border-color:var(--yellow);color:#111}
.empty{text-align:center;padding:70px 20px;color:var(--dim)}
.empty b{display:block;font:800 26px var(--display);color:var(--cream);letter-spacing:-.05em;margin-bottom:10px}
.empty p{font-size:12px;margin:0 auto;max-width:380px;line-height:1.7}

/* Le pied de l'application. Il était écrit en `style=` dans la page :
   impossible d'y toucher depuis une requête média, donc impossible de
   ramener ses liens à 44 px pour le pouce. */
.app-pied{
  border-top:1px solid var(--line);padding:34px clamp(16px,3.4vw,54px);
  display:flex;flex-wrap:wrap;gap:22px;align-items:center;
}
.app-pied p{margin:0;color:var(--dim);font-size:10px}
.app-pied nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.app-pied nav a{
  color:var(--dim);font-size:10px;text-decoration:none;
  display:inline-flex;align-items:center;transition:color .2s;
}
.app-pied nav a:hover{color:var(--cream)}

/* ============================================================
   La Toile — disposition radiale
   ------------------------------------------------------------
   Trois partis pris qui font la différence entre une carte lisible
   et un plat de spaghettis :

   1. LES FILS RECULENT. Ils sont fins, sombres, à peine colorés.
      Dans la version précédente ils avaient la même présence que les
      nœuds : l'œil ne savait plus quoi regarder. Un fil n'a besoin
      d'être vu que lorsqu'on s'y intéresse.
   2. UN SEUL OR. L'anneau doré cercle tous les nœuds, quelle que
      soit leur famille — c'est lui qui donne l'unité. La couleur de
      famille ne vit que dans un liseré et dans l'icône.
   3. LE TEXTE NE S'ÉCHELLE PAS. Les étiquettes sont dessinées à
      taille fixe, et la scène est mise à l'échelle par son viewBox :
      un nom reste lisible sur un téléphone comme sur un 27 pouces.
   ============================================================ */

/* Le bandeau de titre est plus court ici qu'ailleurs : sur un écran
   de portable, un titre à 62 px repoussait le graphe sous la ligne de
   flottaison — on arrivait sur une page de texte dans la vue qui est
   censée montrer un dessin. */
.view-toile .view-head{margin-bottom:18px}
.view-toile .view-head h1{font-size:clamp(26px,3.2vw,42px)}
.view-toile .view-head p{font-size:12.5px;max-width:62ch}

.web{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:0;
  border:1px solid var(--line);background:#0a0a0a;border-radius:6px;overflow:hidden;
  position:relative;
}
.web.plein{
  position:fixed;inset:0;z-index:60;border-radius:0;border:0;
  grid-template-columns:250px minmax(0,1fr);
}

/* --- Le panneau de gauche ------------------------------------ */
.web-panneau{
  border-right:1px solid var(--line);background:#0d0d0d;
  padding:18px 16px;display:flex;flex-direction:column;gap:14px;min-width:0;
}
.web-panneau h6{
  margin:0;font:600 8.5px var(--mono);letter-spacing:.18em;color:var(--dim);
}
.web-cherche{position:relative}
.web-cherche svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;color:var(--dim);pointer-events:none;
}
.web-cherche input{
  width:100%;height:38px;border:1px solid var(--line);background:#0a0a0a;
  color:var(--cream);padding:0 12px 0 33px;font:500 11.5px var(--sans);outline:0;
  border-radius:99px;transition:border-color .2s;
}
.web-cherche input:focus{border-color:rgba(244,230,0,.6)}
.web-cherche input::-webkit-search-cancel-button{filter:invert(1);opacity:.45}

.web-familles{display:flex;flex-direction:column;gap:5px}
.fam{
  display:flex;align-items:center;gap:10px;width:100%;
  border:1px solid transparent;background:transparent;color:var(--muted);
  cursor:pointer;padding:9px 11px;border-radius:99px;text-align:left;
  font:600 11px var(--sans);letter-spacing:-.01em;transition:.2s var(--ease);
}
.fam i{
  width:9px;height:9px;border-radius:50%;flex:none;
  border:1.6px solid var(--c,var(--dim));background:transparent;transition:background .2s;
}
.fam span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fam b{font:500 10px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.fam:hover{color:var(--cream);background:#131313}
.fam.on{color:var(--cream);border-color:rgba(244,240,232,.16);background:#151515}
.fam.on i{background:var(--c,var(--yellow))}
.fam.on b{color:var(--cream)}
.fam[disabled]{opacity:.75;cursor:default}
.fam-tout i{border-color:var(--yellow);
  background:conic-gradient(#e8604c,#f4e600,#6ad19e,#6aa9d8,#e8604c)}
.fam-oeuvre i{border-color:#a14330;background:#a14330}

.web-raz{
  margin-top:auto;border:1px solid var(--line);background:transparent;color:var(--muted);
  cursor:pointer;font:600 10px var(--sans);letter-spacing:.02em;
  padding:10px;border-radius:99px;transition:.2s var(--ease);
}
.web-raz:hover{border-color:rgba(244,240,232,.3);color:var(--cream)}

/* --- La scène ------------------------------------------------- */
.web-scene{position:relative;display:flex;flex-direction:column;min-width:0}
/* PAS de `flex:1` ici. En colonne, la hauteur est l'axe principal :
   `flex:1` pose `flex-basis:0` et la hauteur écrite juste en dessous
   n'est plus qu'une base que le partage écrase. La scène tombait à
   353 px, les anneaux se serraient, et les étiquettes se marchaient
   dessus — le défaut qu'on venait justement de corriger. */
.web-stage{
  position:relative;flex:none;
  height:clamp(440px,66vh,680px);
  background:radial-gradient(ellipse 62% 68% at 50% 50%,rgba(244,230,0,.045),transparent 70%),#0a0a0a;
  overflow:hidden;
}
.web.plein .web-scene{height:100%}
.web.plein .web-stage{flex:1;min-height:0;height:auto}
.web-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}

.web-plein{
  position:absolute;top:14px;right:14px;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:rgba(12,12,12,.82);color:var(--muted);
  cursor:pointer;font:600 10px var(--sans);padding:9px 14px;border-radius:99px;
  backdrop-filter:blur(8px);transition:.2s var(--ease);
}
.web-plein svg{width:13px;height:13px}
.web-plein:hover{color:var(--yellow);border-color:rgba(244,230,0,.45)}

/* --- Les fils -------------------------------------------------
   Opacité .16 au repos. C'est volontairement très bas : à trente
   nœuds, des fils visibles sont un bruit de fond permanent. Ils
   remontent à .85 quand ils portent quelque chose. */
/* Les rayons du moyeu : la charpente. Très pâles — ils doivent se
   sentir, pas se lire. */
.rayon{stroke:rgba(244,230,0,.3);stroke-width:1;transition:opacity .3s var(--ease)}
#webSvg.survol .rayon{opacity:.06 !important}

.fil{
  fill:none;stroke-width:1;stroke-opacity:.26;
  transition:stroke-opacity .3s var(--ease),stroke-width .3s var(--ease);
}
#webSvg.survol .fil{stroke-opacity:.05}
#webSvg.survol .fil.vif{stroke-opacity:.75;stroke-width:1.5}
.fil.actif{stroke-opacity:.55;stroke-width:1.4}

/* L'onde au clic : une lueur qui part du nœud et file le long du
   fil. `stroke-dasharray` dessine un trait court qu'on fait glisser —
   aucune image supplémentaire à charger, et ça s'arrête tout seul. */
@keyframes onde{
  from{stroke-dasharray:22 400;stroke-dashoffset:420;stroke-opacity:.95}
  to  {stroke-dasharray:22 400;stroke-dashoffset:0;stroke-opacity:.55}
}
.fil.actif{animation:onde .85s var(--ease) both}

/* --- Les nœuds ------------------------------------------------ */
.nd{cursor:pointer;transition:opacity .3s var(--ease)}
/* Un <g> n'est cliquable QUE là où il y a du dessin : viser entre la
   pastille et son étiquette ne touchait rien. Ce disque transparent
   couvre le nœud ET son nom. */
.nd-prise{fill:transparent;pointer-events:all}
/* Un jalon du second cercle : on voit qu'il y a quelque chose, on ne
   cherche pas à le lire. Un nom au tiers de sa taille n'est pas une
   information, c'est du grain. */
.nd.lointain .lb-nom,.nd.lointain .lb-type{display:none}
.nd.lointain .nd-anneau{stroke-width:3.2}
.nd-hub{cursor:default}
/* Pas de règle d'opacité sur `.nd` : elle est calculée par `peindre`,
   qui compose l'animation ET le survol. Deux sources pour une même
   valeur finissent toujours par se contredire. */

.nd-fond{transition:.25s var(--ease)}
.nd-fond-gens{fill:#1c1512}

/* L'anneau d'or : l'unité de toute la toile. La couleur de famille
   ne fait qu'un liseré intérieur, posé par --c. */
.nd-anneau{
  fill:none;stroke:rgba(244,230,0,.55);stroke-width:1.6;
  transition:.25s var(--ease);
}
.nd-anneau-o{stroke:rgba(244,230,0,.72);stroke-width:2}
.nd:hover .nd-anneau,.nd.on .nd-anneau{stroke:var(--yellow);stroke-width:2.6}
.nd:focus{outline:none}
.nd:focus-visible .nd-anneau{stroke:var(--cream);stroke-width:3}
.nd.on .nd-fond{filter:url(#lueur)}

.nd-ini{
  text-anchor:middle;font:700 14px var(--sans);fill:var(--cream);
  letter-spacing:.02em;pointer-events:none;
}
.nd-glyphe{pointer-events:none;opacity:.92}

.lb-nom{
  text-anchor:middle;font:600 11px var(--sans);fill:#d6d2c9;
  letter-spacing:-.01em;pointer-events:none;
}
.lb-type{
  text-anchor:middle;font:500 8.5px var(--mono);fill:var(--dim);
  letter-spacing:.11em;pointer-events:none;
}
.nd:hover .lb-nom,.nd.on .lb-nom{fill:var(--cream)}
.nd-oeuvre .lb-nom{font-weight:700}

/* Le moyeu */
.hub-bord{fill:none;stroke:rgba(244,230,0,.3);stroke-width:1.4}
.hub-mot{text-anchor:middle;font:800 19px var(--display);fill:var(--cream);letter-spacing:-.06em}
.hub-sous{text-anchor:middle;font:500 6px var(--mono);fill:var(--dim);letter-spacing:.19em}

/* --- Le fil d'Ariane, sous la scène --------------------------- */
.web-ariane{
  position:absolute;left:16px;bottom:14px;z-index:3;margin:0;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:500 10px var(--sans);color:var(--dim);pointer-events:none;
}
.web-ariane b{color:var(--cream);font-weight:600}
.web-ariane button,.web-retour{
  pointer-events:auto;border:1px solid var(--line);background:rgba(12,12,12,.86);
  color:var(--muted);cursor:pointer;font:600 10px var(--sans);
  padding:8px 13px;border-radius:99px;transition:.2s var(--ease);
}
.web-retour:hover{color:var(--yellow);border-color:rgba(244,230,0,.45)}

/* --- La barre de comptes -------------------------------------- */
.web-comptes{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  border-top:1px solid var(--line);background:#0d0d0d;padding:14px 20px;
}
.web-comptes div{
  display:flex;align-items:baseline;gap:7px;padding-right:22px;margin-right:22px;
  border-right:1px solid var(--line-soft);
}
.web-comptes div:last-of-type{border-right:0}
.web-comptes b{font:800 19px var(--display);color:var(--cream);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.web-comptes span{font:500 8.5px var(--mono);letter-spacing:.13em;color:var(--dim)}
.web-devise{
  margin:0 0 0 auto;text-align:right;
  font:500 8px var(--mono);letter-spacing:.2em;color:var(--dim);line-height:1.8;
  border-bottom:1px solid var(--yellow);padding-bottom:4px;
}

/* --- L'état vide et la fiche ---------------------------------- */
.web-vide{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  padding:24px;color:var(--muted);pointer-events:none}
.web-vide b{display:block;font:800 21px var(--display);letter-spacing:-.05em;
  color:var(--cream);margin-bottom:7px}
.web-vide p{font-size:11.5px;line-height:1.7;margin:0;max-width:44ch}

.web-fiche{position:absolute;top:14px;right:14px;z-index:5;
  width:min(300px,calc(100% - 28px));max-height:calc(100% - 76px);overflow:auto;
  background:rgba(14,14,14,.97);border:1px solid var(--line);border-radius:8px;
  padding:16px 16px 18px;backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(0,0,0,.7);
  animation:ficheEntre .3s var(--ease) both}
@keyframes ficheEntre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.web-fiche h3{font:800 19px var(--display);letter-spacing:-.05em;margin:5px 0 8px}
.web-res{font-size:11px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.web-grp{margin-bottom:12px}
.web-grp>b{display:block;font:600 7.5px var(--mono);letter-spacing:.16em;
  color:var(--dim);margin-bottom:6px}
.web-grp>div{display:flex;flex-wrap:wrap;gap:5px}
.web-pastille{border:1px solid var(--line);background:#141414;color:#cdc9c0;cursor:pointer;
  font:600 9.5px var(--sans);padding:6px 10px;border-radius:99px;transition:.18s var(--ease);
  text-align:left}
.web-pastille:hover{border-color:var(--yellow);color:var(--yellow)}
.web-x{position:absolute;top:8px;right:9px;border:0;background:transparent;color:var(--dim);
  font-size:19px;line-height:1;cursor:pointer;padding:3px 6px}
.web-x:hover{color:var(--cream)}

/* --- Le panneau passe au-dessus sur écran étroit -------------- */
@media (max-width:980px){
  .web,.web.plein{grid-template-columns:1fr}
  .web-panneau{
    border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;align-items:center;gap:10px;padding:12px 14px;overflow-x:auto;
    scrollbar-width:none;
  }
  .web-panneau::-webkit-scrollbar{display:none}
  .web-panneau h6{display:none}
  .web-cherche{flex:1 1 180px;min-width:150px;order:-1}
  .web-familles{flex-direction:row;gap:6px;flex:none}
  .fam{flex:none;white-space:nowrap;padding:9px 13px;min-height:40px}
  .fam b{display:none}
  .web-raz{margin-top:0;flex:none;padding:10px 15px;min-height:40px}
  .web-fiche{top:auto;bottom:0;right:0;left:0;width:auto;max-height:54%;
    border-radius:10px 10px 0 0;border-bottom:0}
  .web-ariane{left:12px;right:12px;bottom:10px;font-size:9.5px}
  .web-comptes{padding:12px 14px;gap:0}
  .web-comptes div{padding-right:14px;margin-right:14px}
  .web-comptes b{font-size:16px}
  .web-comptes span{font-size:7.5px;letter-spacing:.1em}
  .web-devise{display:none}
  .web-plein{display:none}
}

/* ============================================================
   Compte & forfaits
   ============================================================ */
.acct-grid{display:grid;grid-template-columns:.9fr 1.6fr;gap:clamp(24px,4vw,64px);align-items:start}
.panel{border:1px solid var(--line);background:var(--soft);padding:22px}
.panel h3{font:600 var(--t-lg) var(--display);letter-spacing:-.05em;margin:0 0 4px}
.panel>p{color:var(--muted);font-size:11.5px;line-height:var(--lh-body);margin:0 0 18px;max-width:56ch}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:11.5px;align-items:center}
.kv dt{font:500 8px var(--mono);letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.kv dd{margin:0;color:#dcd8cf}
.stack{display:grid;gap:12px}

.plan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.plan-card{border:1px solid var(--line);background:var(--soft);padding:20px 18px;display:flex;flex-direction:column;position:relative;transition:.3s var(--ease)}
.plan-card:hover{border-color:rgba(244,230,0,.5);transform:translateY(-4px)}
.plan-card.on{border-color:var(--yellow);background:#161400}
.plan-card>span{font:500 8px var(--mono);letter-spacing:.12em;color:var(--dim)}
.plan-card h4{font:800 25px var(--display);letter-spacing:-.06em;margin:22px 0 6px}
.plan-card .amt{font:800 17px var(--sans);letter-spacing:-.04em;margin:0 0 18px}
.plan-card .amt small{font:500 8px var(--mono);letter-spacing:.1em;color:var(--dim);margin-left:5px}
.plan-card ul{list-style:none;margin:0 0 20px;padding:0;font-size:10.5px;line-height:2.1;color:#cbc7be}
.plan-card li:before{content:"—";color:var(--yellow);margin-right:8px}
.plan-card li.no{color:var(--dim)}
.plan-card li.no:before{content:"×";color:#5a5850}
.plan-card .btn{margin-top:auto;width:100%}
.plan-card b.flag{
  position:absolute;top:-1px;right:-1px;background:var(--yellow);color:#111;
  font:700 7px var(--mono);letter-spacing:.14em;padding:4px 8px;
}

/* Paiement */
.pay-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin:8px 0 18px}
.pay-methods button{
  border:1px solid var(--line);background:#111;color:#cbc7be;cursor:pointer;padding:14px 10px;
  display:grid;gap:7px;justify-items:center;transition:.24s var(--ease);
}
.pay-methods button:hover{border-color:rgba(244,230,0,.5);transform:translateY(-3px)}
.pay-methods button.on{border-color:var(--yellow);background:#161400;color:var(--cream)}
.pay-methods i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 10px var(--sans);font-style:normal;color:#111}
.pay-methods b{font:700 10px var(--sans)}
.pay-methods small{font:500 7px var(--mono);letter-spacing:.1em;color:var(--dim)}

.field{display:grid;gap:7px;margin-bottom:13px}
.field label{font:700 9px var(--sans);letter-spacing:.04em}
.field input,.field select,.field textarea{
  height:42px;border:1px solid var(--line);background:#0e0e0e;color:var(--cream);
  padding:0 12px;font:500 11.5px var(--sans);outline:0;transition:border-color .2s;
}
.field textarea{height:auto;padding:11px 12px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--yellow)}
.field small{font:500 8px var(--mono);letter-spacing:.08em;color:var(--dim)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Interrupteur */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.switch:last-child{border:0}
.switch b{display:block;font:700 11.5px var(--sans);margin-bottom:3px}
.switch p{margin:0;font-size:10px;color:var(--muted);line-height:1.6}
.switch input{appearance:none;width:40px;height:22px;border-radius:22px;background:#2c2c2c;position:relative;cursor:pointer;flex:none;transition:.25s;border:0}
.switch input:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#8b877f;transition:.25s var(--ease)}
.switch input:checked{background:#4a4400}
.switch input:checked:after{left:21px;background:var(--yellow)}

/* ============================================================
   Tableaux de bord (partenaires / dividendes / admin)
   ============================================================ */
.dash{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{
  background:#0d0d0d;border-right:1px solid var(--line);padding:26px 18px;
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:24px;
}
.side nav{display:grid;gap:2px}
.side nav a,.side nav button{
  display:flex;align-items:center;gap:10px;padding:10px 11px;border:0;background:transparent;
  color:#b4b0a8;font:600 11.5px var(--sans);text-decoration:none;cursor:pointer;
  border-left:2px solid transparent;transition:.2s;text-align:left;width:100%;
}
.side nav a:hover,.side nav button:hover{color:var(--cream);background:#151515}
.side nav .on{color:var(--yellow);border-left-color:var(--yellow);background:#141200}
.side h6{font:500 8px var(--mono);letter-spacing:.14em;color:var(--dim);margin:0 0 8px 11px}
.side-foot{margin-top:auto;font:500 8px var(--mono);letter-spacing:.1em;color:var(--dim);line-height:1.8}

.main{padding:clamp(22px,3vw,40px);max-width:1500px}
.main-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:26px}
.main-head h1{font:800 clamp(27px,3.4vw,42px)/1 var(--display);letter-spacing:-.07em;margin:8px 0 0}
.main-head h1 em{color:var(--yellow)}
.main-head .btn{margin-left:auto}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:22px}
.kpi{border:1px solid var(--line);background:var(--soft);padding:18px;position:relative;overflow:hidden;transition:.3s var(--ease)}
.kpi:hover{border-color:rgba(244,230,0,.42);transform:translateY(-3px)}
.kpi span{font:500 8.5px var(--mono);letter-spacing:.13em;color:var(--dim);display:block;margin-bottom:12px}
.kpi b{font:600 clamp(26px,3vw,38px) var(--display);letter-spacing:-.06em;display:block;line-height:1}
.kpi b small{font:500 11px var(--mono);letter-spacing:.06em;color:var(--muted);margin-left:6px}
.kpi em{font-style:normal;font:700 9.5px var(--sans);display:inline-block;margin-top:10px}
.kpi em.up{color:var(--green)}
.kpi em.down{color:var(--red)}
.kpi .spark{position:absolute;right:0;bottom:0;width:96px;height:40px;opacity:.55}

.cards-2{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;margin-bottom:12px;align-items:stretch}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.box{border:1px solid var(--line);background:var(--soft);padding:20px}
.box-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.box-head h3{font:600 var(--t-lg) var(--display);letter-spacing:-.05em;margin:0}
.box-head span{font:500 8.5px var(--mono);letter-spacing:.13em;color:var(--dim)}
.box-head .r{margin-left:auto;font:500 8px var(--mono);letter-spacing:.12em;color:var(--yellow)}

/* Graphique en barres */
.chart{display:flex;align-items:flex-end;gap:clamp(3px,.7vw,9px);height:190px;padding-top:14px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:100%;position:relative}
.chart .bar{background:linear-gradient(180deg,var(--yellow),#8d8400);width:100%;transition:height .8s var(--ease);position:relative;min-height:2px}
.chart .col:hover .bar{background:linear-gradient(180deg,#fff100,var(--yellow))}
.chart .col small{font:500 7px var(--mono);letter-spacing:.06em;color:var(--dim);text-align:center}
.chart .col b{
  position:absolute;left:50%;transform:translate(-50%,-6px);opacity:0;transition:.2s;
  font:500 8px var(--mono);color:var(--yellow);white-space:nowrap;bottom:100%;
}
.chart .col:hover b{opacity:1;transform:translate(-50%,-10px)}

/* Répartition des recettes */
.split{display:flex;height:34px;border:1px solid var(--line);overflow:hidden;margin-bottom:16px}
.split div{display:grid;place-items:center;font:700 9px var(--sans);padding:0 6px;white-space:nowrap;overflow:hidden;transition:flex .6s var(--ease)}
.split .s1{background:var(--yellow);color:#111}
.split .s2{background:#4a7f66;color:#eafff5}
.split .s3{background:#2c2c2c;color:#e2ded5}
.split-key{display:grid;gap:10px}
.split-key div{display:flex;align-items:center;gap:10px;font-size:11px}
.split-key i{width:9px;height:9px;flex:none;display:block}
.split-key b{margin-left:auto;font:700 12px var(--sans);letter-spacing:-.02em}
.split-key small{display:block;font:500 8px var(--mono);letter-spacing:.09em;color:var(--dim);margin-top:2px}

/* Tableau */
.tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.tbl th{
  text-align:left;font:500 8.5px var(--mono);letter-spacing:.13em;color:var(--dim);
  padding:0 12px 11px;border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;
}
.tbl td{padding:13px 12px;border-bottom:1px solid var(--line-soft);color:#d3cfc6;vertical-align:middle}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(244,230,0,.045)}
.tbl .num{text-align:right;font:500 11px var(--mono);letter-spacing:.02em}
.tbl .work{display:flex;align-items:center;gap:11px}
.tbl .work img{width:44px;height:28px;object-fit:cover;flex:none;background:#222}
.tbl .work b{font:700 11.5px var(--sans);display:block}
.tbl .work small{font:500 7.5px var(--mono);letter-spacing:.1em;color:var(--dim)}
.tag{display:inline-block;align-self:flex-start;font:700 8px var(--sans);letter-spacing:.06em;padding:4px 8px;border-radius:2px;white-space:nowrap}
.tag.ok{background:rgba(99,209,158,.14);color:var(--green)}
.tag.wait{background:rgba(244,230,0,.14);color:var(--yellow)}
.tag.no{background:rgba(229,103,75,.14);color:var(--red)}
.tag.neutral{background:rgba(244,240,232,.09);color:var(--muted)}

.bar-mini{height:4px;background:#262626;position:relative;min-width:70px}
.bar-mini i{display:block;height:100%;background:var(--yellow)}

/* Barre de progression annotée */
.meter{display:grid;gap:7px;margin-bottom:15px}
.meter .lbl{display:flex;font:500 9px var(--mono);letter-spacing:.1em;color:var(--muted)}
.meter .lbl b{margin-left:auto;color:var(--cream);font-weight:500}
.meter .track{height:5px;background:#242424}
.meter .track i{display:block;height:100%;background:var(--yellow);transition:width .9s var(--ease)}

/* ============================================================
   Modales génériques + toast
   ============================================================ */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease)}
.modal.open{opacity:1;visibility:visible}
.modal-veil{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(9px)}
.modal-card{
  position:relative;width:min(480px,100%);background:#111;border:1px solid var(--line);
  padding:30px;max-height:88vh;overflow-y:auto;transform:translateY(18px) scale(.98);transition:.4s var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-card h2{font:800 30px var(--display);letter-spacing:-.06em;margin:16px 0 8px}
.modal-card h2 em{color:var(--yellow)}
.modal-card>p{color:var(--muted);font-size:11.5px;line-height:1.7;margin:0 0 20px}
.modal-x{position:absolute;right:12px;top:8px;border:0;background:transparent;color:var(--muted);font:300 26px var(--sans);cursor:pointer}
.modal-x:hover{color:var(--yellow)}

.toast{
  position:fixed;z-index:99;left:50%;bottom:26px;transform:translate(-50%,22px);
  background:var(--cream);color:#111;padding:13px 18px;font:700 10.5px var(--sans);
  box-shadow:0 10px 32px rgba(0,0,0,.5);opacity:0;transition:.28s var(--ease);pointer-events:none;
  max-width:min(440px,92vw);
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.warn{background:var(--yellow)}

/* ============================================================
   Animations
   ============================================================ */
@keyframes enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slowzoom{to{transform:scale(1.07)}}
@keyframes pulse{50%{opacity:.45}}
@keyframes spin{to{transform:rotate(360deg)}}
.anim-in{animation:enter .7s var(--ease) both}
.anim-in.d1{animation-delay:.07s}
.anim-in.d2{animation-delay:.14s}
.anim-in.d3{animation-delay:.21s}
.anim-in.d4{animation-delay:.28s}

/* Révélation au défilement */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .sheet-grid{grid-template-columns:1fr}
  .acct-grid{grid-template-columns:1fr}
  .cards-2,.cards-3{grid-template-columns:1fr}
  .dash{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:16px;overflow-x:auto;padding:14px 16px}
  .side h6,.side-foot{display:none}
  .side nav{grid-auto-flow:column;gap:4px}
  .side nav a,.side nav button{border-left:0;border-bottom:2px solid transparent;white-space:nowrap;padding:8px 12px}
  .side nav .on{border-left:0;border-bottom-color:var(--yellow)}
}
@media (max-width:820px){
  .app-bar{height:60px}
  .app-nav a{font-size:10px}
  .plan-cards{grid-template-columns:1fr}
  .billboard{height:82vh;min-height:470px}
  .bb-meta-right{display:none}
  .ep{grid-template-columns:26px 108px 1fr;gap:10px}
  .rows{margin-top:-34px}
}
@media (max-width:640px){
  .app-nav{gap:12px}
  .app-nav a span{display:none}
  .card{width:60vw}
  .card.poster{width:38vw}
  .card:hover{transform:scale(1.04)}
  .view{padding-top:82px}
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .split div{font-size:8px}
  .tbl{font-size:10.5px}
  .tbl th,.tbl td{padding-left:8px;padding-right:8px}
  .modal-card{padding:24px 20px}
}

/* ============================================================
   TUNNEL D'INSCRIPTION — page d'ouverture et cartes claires
   ============================================================ */

/* --- Page d'ouverture --------------------------------------- */
.ouv{display:flex;min-height:100vh}
.ouv-left{
  width:58%;position:relative;overflow:hidden;background:var(--ink);
  padding:clamp(24px,4vw,54px);display:flex;flex-direction:column;
}
.ouv-ring{
  position:absolute;right:-220px;top:90px;width:620px;height:620px;border-radius:50%;
  border:1px solid rgba(244,230,0,.13);pointer-events:none;
  box-shadow:0 0 0 60px rgba(244,230,0,.018),0 0 0 120px rgba(244,230,0,.01);
  animation:float 9s ease-in-out infinite;
}
.ouv-body{position:relative;margin-top:auto;max-width:560px;animation:enter .9s var(--ease) both}
.ouv-body h1{font:800 clamp(46px,5.4vw,74px)/.92 var(--display);letter-spacing:-.075em;margin:0 0 20px}
.ouv-body h1 em{color:var(--yellow);font-style:italic}
.ouv-body>p{font-size:14px;line-height:1.75;color:#d3cfc6;max-width:470px;margin:0 0 28px}
.ouv-body>p b{color:var(--cream);font-weight:700}
.ouv-form{display:flex;height:52px;width:min(520px,100%);margin-bottom:12px}
.ouv-form input{
  flex:1;min-width:0;border:1px solid rgba(244,240,232,.48);background:rgba(0,0,0,.32);
  color:var(--cream);padding:0 16px;font:500 12px var(--sans);outline:0;
}
.ouv-form input:focus{border-color:var(--yellow)}
.ouv-form button{
  border:0;background:var(--yellow);color:#151515;padding:0 20px;cursor:pointer;
  font:800 11px var(--sans);display:flex;align-items:center;gap:9px;white-space:nowrap;
}
.ouv-form button:hover{background:#fff100}
.ouv-fine{font:500 8px var(--mono);letter-spacing:.09em;color:#8f8b83;margin:0 0 34px}
.ouv-pay{padding-top:22px;border-top:1px solid var(--line)}
.ouv-pay>p{font:500 8px var(--mono);letter-spacing:.13em;color:var(--dim);margin:0 0 12px}
.ouv-pay div{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ouv-pay span{display:flex;align-items:center;gap:7px;font:500 8px var(--mono);letter-spacing:.11em;color:var(--muted)}
.ouv-pay i{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:800 8px var(--sans);font-style:normal;color:#111;
}
.ouv-foot{position:relative;display:flex;align-items:center;gap:16px;margin-top:40px;flex-wrap:wrap}
.ouv-foot>span{color:var(--muted);font-size:11px}
.ouv-foot a.catalogue{
  margin-left:auto;display:flex;align-items:center;gap:8px;text-decoration:none;
  font:500 8px var(--mono);letter-spacing:.13em;color:var(--dim);transition:color .2s;
}
.ouv-foot a.catalogue:hover{color:var(--yellow)}
.ouv-right{
  width:42%;position:relative;background:var(--ink);display:grid;place-items:center;
  padding-left:26px;overflow:hidden;
}
.ouv-right img{width:100%;height:auto;box-shadow:0 24px 70px rgba(0,0,0,.7)}
.ouv-right:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink),rgba(10,10,10,.55) 12%,transparent 34%);
}

/* --- Écrans de tunnel (carte claire sur fond flouté) --------- */
.tunnel{position:relative;min-height:100vh;display:grid;place-items:center;padding:40px 20px;overflow:hidden}
.tunnel-bg{position:absolute;inset:0;background-size:cover;background-position:50% 22%;filter:blur(7px) saturate(.7)}
.tunnel-veil{position:absolute;inset:0;background:rgba(7,7,7,.88)}
/* Le motif est une COUCHE À PART, pas un fond mélangé : c'est la seule
   façon d'avoir exactement l'opacité demandée. Mélangé au voile en
   soft-light, le jaune se serait éteint et « 28 % » n'aurait plus rien
   voulu dire. */
.tunnel-veil:after{
  content:"";position:absolute;inset:0;
  background:var(--bogolan-dense) repeat center/230px 230px;
  opacity:.28;
}
/* Sur un téléphone, une tuile de 230 px occupe plus de la moitié de la
   largeur : le motif cesse d'être une texture et devient un décor qui
   se dispute la page avec la carte. On le resserre. */
@media (max-width:560px){
  .tunnel-veil:after{background-size:150px 150px}
}
.t-card{
  position:relative;width:min(470px,100%);background:var(--cream);color:#161616;
  padding:32px 34px 28px;box-shadow:0 18px 70px rgba(0,0,0,.6);
  animation:enter .6s var(--ease) both;
}
.t-card.wide{width:min(980px,100%)}
/* Le mot-logo et le titre se confondaient : même noir, même graisse,
   douze pixels d'écart. On les sépare — de l'air, et un titre qui ne
   cherche plus à rivaliser de taille avec la marque. */
.t-card .brand{display:block;margin:0 0 30px}
.t-card h2{font:800 clamp(27px,3.1vw,34px)/1.04 var(--display);letter-spacing:-.045em;margin:0 0 14px}
/* Le jaune de marque sur fond crème donne un contraste de 2,07 : il est
   illisible, et c'est ce qui faisait « baver » le titre. Cet or foncé
   garde la famille et passe le seuil AA. */
.t-card h2 em{color:#7a7200;font-style:italic}
.t-card>p{font-size:14px;line-height:1.6;color:#544f49;margin:0 0 26px}
.t-card>p b{color:#151515}
.t-kicker{font:500 10.5px var(--mono);letter-spacing:.11em;color:#7a7200;margin:0 0 10px}

.t-steps{display:flex;gap:10px;margin:24px 0 26px}
.t-steps>div{flex:1;display:grid;gap:7px}
.t-steps i{height:2px;background:rgba(0,0,0,.16);display:block;transition:background .4s var(--ease)}
.t-steps span{font:500 10px var(--mono);letter-spacing:.1em;color:#5f5a53}
.t-steps .done i,.t-steps .cur i{background:var(--yellow)}
.t-steps .cur span{color:#151515}

.lfield{display:grid;gap:6px;margin-bottom:12px}
.lfield label{font:700 11.5px var(--sans);letter-spacing:.02em}
.lfield input,.lfield select{
  height:48px;border:1px solid rgba(0,0,0,.27);background:#fbf8f0;color:#161616;
  padding:0 13px;outline:0;transition:border-color .2s;
  /* 16 px, et pas moins : en dessous, Safari iOS ZOOME la page à la
     mise au point du champ. L'abonné se retrouve à faire glisser une
     page trop grande pour taper son mot de passe. */
  font:500 16px var(--sans);
}
.lfield input:focus,.lfield select:focus{border-color:#b8ac00}
.lfield small{font:500 10.5px var(--mono);letter-spacing:.06em;color:#5f5a53}

.lbtn{
  display:flex;align-items:center;justify-content:space-between;width:100%;height:50px;
  padding:0 18px;border:0;background:var(--yellow);color:#151515;cursor:pointer;
  font:800 13.5px var(--sans);margin-top:10px;transition:background .2s;
}
.lbtn:hover{background:#fff100}
.lbtn svg{width:15px;height:15px}
.lghost{
  display:block;width:100%;border:0;background:transparent;cursor:pointer;margin:14px 0 4px;padding:6px 0;
  font:500 10.5px var(--mono);letter-spacing:.1em;color:#5f5a53;text-align:center;text-decoration:none;
}
.lghost:hover{color:#151515}
.t-note{font-size:11.5px;line-height:1.6;color:#5f5a53;margin:18px 0 0}
/* Le lien d'une carte claire. Le jaune de marque y donne un contraste
   de 2,07 — invisible pour beaucoup de gens, pénible pour tous. Cet or
   passe AA en texte courant, et le soulignement fait le reste du
   travail : une couleur seule n'a jamais suffi à signaler un lien. */
.t-lien{color:#6b6400;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.t-lien:hover{color:#151515}
.t-lien.discret{color:#5f5a53;font-weight:500}
.t-lien.discret:hover{color:#151515}

.t-incl{
  display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid rgba(0,0,0,.09);font-size:11.5px;color:#3a3630;
}
.t-incl svg{width:13px;height:13px;color:#b8ac00;flex:none}
.t-callout{background:#efeade;border-left:2px solid var(--yellow);padding:14px 16px;margin:20px 0 0}
.t-callout b{display:block;font:700 11px var(--sans);margin-bottom:5px}
.t-callout p{margin:0;font-size:10.5px;line-height:1.7;color:#544f49}

/* Forfaits en version claire */
.t-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.t-plan{
  position:relative;border:1px solid rgba(0,0,0,.18);background:transparent;text-align:left;
  padding:20px 18px;display:flex;flex-direction:column;cursor:pointer;color:inherit;
  font-family:inherit;transition:.25s var(--ease);
}
.t-plan:hover{border-color:rgba(0,0,0,.42);transform:translateY(-3px)}
.t-plan.on{border-color:#151515;background:#faf7ef}
.t-plan>span{font:500 8px var(--mono);letter-spacing:.12em;color:#8a857d}
.t-plan h4{font:800 26px var(--display);letter-spacing:-.06em;margin:20px 0 4px}
.t-plan .amt{font:800 17px var(--sans);letter-spacing:-.04em;margin:0 0 4px}
.t-plan .amt small{font:500 8px var(--mono);letter-spacing:.1em;color:#8a857d;margin-left:5px}
.t-plan .when{font:500 8px var(--mono);letter-spacing:.12em;color:#8a857d;margin:0 0 16px}
.t-plan ul{list-style:none;margin:0 0 18px;padding:0;font-size:10.5px;line-height:2.05}
.t-plan li{color:#3a3630}
.t-plan li:before{content:"—";color:#b8ac00;margin-right:8px}
.t-plan li.no{color:#8a857d}
.t-plan li.no:before{content:"×";color:#a9a49c}
.t-plan .pick{
  margin-top:auto;display:flex;align-items:center;justify-content:center;height:38px;
  border:1px solid rgba(0,0,0,.22);font:800 10px var(--sans);
}
.t-plan.on .pick{background:var(--yellow);border-color:var(--yellow)}
.t-plan b.flag{
  position:absolute;top:-1px;right:-1px;background:#151515;color:var(--yellow);
  font:500 7px var(--mono);letter-spacing:.14em;padding:4px 8px;
}

/* Sélecteur de durée dans la modale de recharge (fond sombre) */
.dur-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
.dur-pick button{
  background:transparent;border:1px solid var(--line);color:var(--cream);cursor:pointer;
  padding:11px 6px;display:grid;gap:3px;justify-items:center;font-family:inherit;
  transition:.18s var(--ease);
}
.dur-pick button:hover{border-color:rgba(244,240,232,.42)}
.dur-pick button.on{border-color:var(--yellow);background:rgba(244,230,0,.07)}
.dur-pick b{font:700 10.5px var(--sans)}
.dur-pick span{font:800 13px var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dur-pick button.on span{color:var(--yellow)}
.dur-pick small{font:500 8px var(--mono);letter-spacing:.06em;color:var(--dim)}

/* Les durées de recharge. Même grammaire que les forfaits, en plus
   resserré : ici on compare des chiffres, pas des listes. */
.t-durees{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:8px}
.t-duree{
  position:relative;border:1px solid rgba(0,0,0,.18);background:transparent;text-align:left;
  padding:18px 16px;display:flex;flex-direction:column;cursor:pointer;color:inherit;
  font-family:inherit;transition:.25s var(--ease);
}
.t-duree:hover{border-color:rgba(0,0,0,.42);transform:translateY(-3px)}
.t-duree.on{border-color:#151515;background:#faf7ef}
.t-duree>span{font:500 8px var(--mono);letter-spacing:.12em;color:#8a857d}
.t-duree h4{font:800 23px var(--display);letter-spacing:-.06em;margin:14px 0 6px}
.t-duree .amt{font:800 19px var(--sans);letter-spacing:-.04em;margin:0 0 3px}
.t-duree .amt small{font:500 8px var(--mono);letter-spacing:.1em;color:#8a857d;margin-left:5px}
.t-duree .per{font-size:10.5px;color:#5c574f;margin:0 0 10px}
.t-duree .save{
  font:800 9.5px var(--sans);letter-spacing:-.01em;color:#151515;background:var(--yellow);
  display:inline-block;align-self:flex-start;padding:4px 8px;margin:0 0 12px;
}
.t-duree .save.none{background:transparent;color:#8a857d;font-weight:500;padding:4px 0}
.t-duree .when{font:500 8px var(--mono);letter-spacing:.12em;color:#8a857d;margin:0 0 16px}
.t-duree .pick{
  margin-top:auto;display:flex;align-items:center;justify-content:center;height:36px;
  border:1px solid rgba(0,0,0,.22);font:800 10px var(--sans);
}
.t-duree.on .pick{background:var(--yellow);border-color:var(--yellow)}
.t-duree b.flag{
  position:absolute;top:-1px;right:-1px;background:#151515;color:var(--yellow);
  font:500 7px var(--mono);letter-spacing:.14em;padding:4px 8px;
}
/* L'interrupteur de renouvellement, en version claire */
.t-card .switch{border-bottom-color:rgba(0,0,0,.12);margin-bottom:6px}
.t-card .switch b{color:#151515}
.t-card .switch p{color:#5c574f}

/* Moyens de paiement en version claire */
.t-pay{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:18px}
.t-pay button{
  border:1px solid rgba(0,0,0,.18);background:transparent;cursor:pointer;padding:14px 10px;
  display:grid;gap:7px;justify-items:center;font-family:inherit;transition:.2s var(--ease);
}
.t-pay button:hover{border-color:rgba(0,0,0,.42)}
.t-pay button.on{border-color:#151515;background:#faf7ef}
.t-pay i{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:800 10px var(--sans);font-style:normal;color:#111;border:1px solid rgba(0,0,0,.12);
}
.t-pay b{font:700 9.5px var(--sans);color:#151515;text-align:center;line-height:1.25}
.t-recap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;
  border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:6px;
}
.t-recap b.nom{display:block;font:700 11.5px var(--sans)}
.t-recap span.when{font:500 8px var(--mono);letter-spacing:.1em;color:#7c7770}
.t-recap b.prix{font:800 17px var(--sans);letter-spacing:-.04em}
.t-recap b.prix small{font:500 8px var(--mono);letter-spacing:.1em;color:#7c7770;font-weight:500}

.t-pane[hidden]{display:none}

@media (max-width:900px){
  .ouv{flex-direction:column}
  .ouv-left{width:100%;min-height:100vh}
  .ouv-right{display:none}
  .ouv-body h1{font-size:44px}
  .ouv-form{flex-direction:column;height:auto;gap:8px}
  .ouv-form input{height:48px}
  .ouv-form button{height:48px;justify-content:center}
  .t-plans{grid-template-columns:1fr}
  .t-durees{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-pay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-card{padding:26px 22px 22px}
}


/* ============================================================
   MOTIFS AKAN — sobres, presque invisibles
   Ananse Ntontan (la toile d'Anansi) et Nkyinkyim (le zigzag).
   Deux motifs seulement : au-delà, ça devient du décor.
   ============================================================ */
:root{
  --lisiere:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27120%27%20height=%2730%27%20viewBox=%270%200%20120%2030%27%3E%3Cg%20fill=%27none%27%20stroke=%27%23f4e600%27%20stroke-width=%271.5%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27miter%27%3E%3Cpath%20d=%27M-2.2%202.7L122.2%202.6M-2.0%2026.9L121.6%2027.0M10%2022L22%208L34%2022ZM13.5%2017.9L29.6%2017.6M38.9%208.3L38.6%2021.7M43.1%208.4L43.1%2021.9M47.5%207.5L47.4%2021.8M50%2022L62%208L74%2022ZM53.6%2017.6L69.8%2018.3M78.7%208.1L79.1%2021.9M83.0%207.6L82.6%2021.7M87.2%207.9L86.8%2022.1M90%2022L102%208L114%2022ZM94.0%2017.8L110.3%2018.2M118.7%208.1L119.0%2022.4M123.2%207.8L123.5%2021.6M126.9%208.3L126.7%2022.0%27/%3E%3C/g%3E%3C/svg%3E");
  --bogolan-dense:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cpath%20fill%3D%27%23f4e600%27%20stroke%3D%27none%27%20d%3D%27M3.8%203.9H20.5V23.9H4.0ZM23.0%2025.7H40.0V45.5H22.8ZM9.3%20143.0L5.0%20195.0L13.7%20195.0ZM22.0%20143.0L17.7%20195.0L26.3%20195.0ZM34.7%20143.0L30.3%20195.0L39.0%20195.0ZM49.2%2053.6H71.2V59.3H48.6ZM48.8%2069.2H70.7V74.7H49.5ZM51.3%2091.0L49.0%20133.0L53.7%20133.0ZM60.0%2091.0L57.7%20133.0L62.3%20133.0ZM68.7%2091.0L66.3%20133.0L71.0%20133.0ZM85.7%2055.0L81.0%2081.0L90.3%2081.0ZM99.0%2055.0L94.3%2081.0L103.7%2081.0ZM112.3%2055.0L107.7%2081.0L117.0%2081.0ZM127.2%2054.4H152.8V59.4H126.9ZM127.5%2069.1H152.9V74.4H126.8ZM163.0%204.2H194.5V13.2H163.0ZM163.3%2026.1H194.8V34.5H163.4ZM167.0%2055.0L163.0%2081.0L171.0%2081.0ZM179.0%2055.0L175.0%2081.0L183.0%2081.0ZM191.0%2055.0L187.0%2081.0L195.0%2081.0ZM162.9%20142.2H194.7V154.3H163.2ZM163.0%20169.7H195.5V181.8H163.3Z%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23f4e600%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27square%27%20stroke-linejoin%3D%27miter%27%3E%3Cpath%20d%3D%27M43.8%200.3L44.2%20200.1M75.9%20-0.2L75.6%20199.6M121.6%200.2L121.8%20199.7M157.6%200.3L158.4%20200.2M-0.2%2049.7L199.8%2050.0M-0.3%2085.9L199.8%2086.5M0.5%20138.0L199.7%20138.5M18.0%2068.0L23.0%2068.0L23.0%2073.0L13.0%2073.0L13.0%2063.0L28.0%2063.0L28.0%2078.0L8.0%2078.0L8.0%2058.0M2.6%2088.9H15.2V103.9H2.8ZM2.7%20119.8H15.7V135.3H3.2ZM15.9%20104.7H28.2V119.5H16.2ZM28.0%2089.2H41.1V103.9H28.7ZM28.7%20119.8H41.2V135.3H28.0ZM47.0%203.0H56.0V18.0H47.3ZM47.1%2032.7H55.8V47.2H46.7ZM55.2%2017.3H64.2V31.9H56.0ZM64.4%203.1H73.1V17.8H64.3ZM63.8%2032.6H73.2V47.0H64.4ZM51.4%20154.3L58.2%20161.4M58.4%20154.5L51.6%20160.8M61.5%20175.5L68.8%20182.3M68.6%20175.2L61.4%20182.2M79.2%203.2H119.2V46.8H79.0ZM84.0%208.0H113.6V42.4H83.7ZM89.5%2013.4H108.5V37.0H89.3ZM79.0%2098.0L99.0%2089.0L119.0%2098.0M79.0%20107.0L99.0%2098.0L119.0%20107.0M79.0%20116.0L99.0%20107.0L119.0%20116.0M79.0%20125.0L99.0%20116.0L119.0%20125.0M79.0%20134.0L99.0%20125.0L119.0%20134.0M79.0%20143.0L99.0%20134.0L119.0%20143.0M99.0%20161.0L104.0%20161.0L104.0%20166.0L94.0%20166.0L94.0%20156.0L109.0%20156.0L109.0%20171.0L89.0%20171.0L89.0%20151.0M125.5%202.9L124.8%2046.7M155.4%202.7L155.1%2046.6M125.0%207.5L154.6%207.3M125.0%2015.4L155.2%2014.7M125.4%2023.0L154.5%2022.5M125.0%2031.0L154.8%2030.6M124.8%2038.8L155.3%2038.5M125.3%2047.3L154.6%2047.4M140.0%20104.0L145.0%20104.0L145.0%20109.0L135.0%20109.0L135.0%2099.0L150.0%2099.0L150.0%20114.0L130.0%20114.0L130.0%2094.0M129.6%20153.5L138.2%20161.5M138.3%20153.6L129.9%20161.7M141.8%20175.1L150.4%20183.4M150.2%20175.3L142.5%20183.4M162.6%2093.0L165.2%2092.8M171.2%2093.5L173.2%2093.2M178.8%2093.1L181.3%2092.7M186.7%2092.7L189.8%2093.0M166.7%20100.4L169.9%2099.9M174.6%2099.7L177.0%2099.8M182.6%2099.7L185.2%20100.1M191.4%20100.2L193.3%2099.9M163.0%20106.9L165.2%20106.6M170.8%20107.5L173.0%20107.0M179.1%20107.4L181.1%20106.8M186.7%20106.9L189.3%20107.5M167.3%20114.4L168.9%20113.5M175.2%20114.4L177.4%20114.1M182.5%20113.9L185.8%20114.3M191.4%20114.5L193.1%20113.6M162.7%20121.0L165.6%20121.4M171.2%20121.1L173.7%20121.0M179.1%20120.5L181.7%20120.7M187.4%20121.1L189.2%20120.6M166.8%20128.1L169.6%20127.6M174.6%20128.0L177.5%20127.9M182.7%20128.1L184.9%20127.8M191.0%20128.5L193.5%20128.4M163.0%20134.7L165.1%20135.5M171.2%20134.8L172.9%20135.0M179.2%20134.9L181.2%20135.2M187.4%20134.7L188.9%20134.8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --bogolan:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27200%27%20height=%27200%27%20viewBox=%270%200%20200%20200%27%3E%3Cg%20fill=%27none%27%20stroke=%27%23f4e600%27%20stroke-width=%271.6%27%20stroke-linecap=%27square%27%20stroke-linejoin=%27miter%27%3E%3Cpath%20d=%27M3.8%20-0.3L30.2%20-0.4M4.0%209.9L29.6%2010.0M3.5%2019.9L29.6%2019.6M3.9%2030.3L29.6%2029.7M4.1%2040.4L30.1%2039.9M4.5%2049.5L30.4%2049.8M3.6%2059.6L29.8%2060.3M3.7%2070.1L30.1%2069.9M4.0%2079.6L29.6%2079.7M4.2%2089.9L29.8%2090.1M4.0%2099.8L30.3%20100.2M3.7%20110.1L30.0%20110.4M4.2%20119.8L30.5%20119.6M3.9%20130.3L29.7%20130.0M3.5%20140.2L30.3%20140.1M4.4%20149.8L30.2%20150.1M4.1%20160.0L30.3%20160.4M4.0%20170.2L29.6%20170.2M4.1%20180.5L30.3%20179.8M3.9%20190.2L29.5%20190.0M3.7%20199.6L29.6%20200.3M37.6%20-0.3L37.9%20200.4M42.6%20-0.1L43.0%20200.4M52.3%2012.4H97.8V87.9H51.9ZM60.4%2022.5H89.7V77.7H59.7ZM65.7%2030.0L84.1%2069.8M83.5%2029.9L65.9%2070.1M58.5%2096.2L66.0%2096.1M72.2%2095.6L80.4%2096.3M86.4%2096.3L93.9%2095.9M51.6%20112.1H97.6V187.6H51.7ZM59.7%20121.8H89.6V177.5H59.7ZM65.6%20129.9L83.5%20170.4M84.1%20129.6L65.8%20169.8M57.9%20195.6L66.3%20196.5M72.0%20196.0L79.6%20195.6M85.8%20195.8L94.3%20195.7M108.0%20-10.0L122.0%200.0L108.0%2010.0L122.0%2020.0L108.0%2030.0L122.0%2040.0L108.0%2050.0L122.0%2060.0L108.0%2070.0L122.0%2080.0L108.0%2090.0L122.0%20100.0L108.0%20110.0L122.0%20120.0L108.0%20130.0L122.0%20140.0L108.0%20150.0L122.0%20160.0L108.0%20170.0L122.0%20180.0L108.0%20190.0L122.0%20200.0L108.0%20210.0M152.0%208.0L132.0%2042.0L172.0%2042.0ZM146.5%2017.0L157.0%2016.1M142.0%2024.5L162.0%2025.5M137.4%2033.7L166.8%2033.4M152.0%2058.0L132.0%2092.0L172.0%2092.0ZM146.7%2066.8L157.0%2066.8M141.8%2074.7L162.3%2075.5M137.4%2083.8L167.3%2083.7M152.0%20108.0L132.0%20142.0L172.0%20142.0ZM146.7%20116.5L156.9%20116.0M141.5%20124.8L161.8%20125.2M137.5%20133.4L167.4%20134.0M152.0%20158.0L132.0%20192.0L172.0%20192.0ZM147.5%20166.4L156.7%20166.2M141.7%20174.7L162.1%20175.4M137.3%20183.5L167.2%20183.8M179.6%200.2L180.4%20200.3M196.3%20-0.0L195.7%20200.3M179.8%2012.3L196.5%2011.9M185.9%2024.4L190.2%2023.7M179.6%2036.7L196.4%2037.3M185.6%2049.3L190.5%2049.2M179.9%2062.0L195.6%2061.5M186.5%2074.1L190.0%2074.4M179.9%2087.4L196.3%2086.7M185.8%2098.8L189.7%2099.1M179.8%20111.9L195.6%20112.4M185.9%20124.0L190.1%20124.4M179.9%20137.4L196.0%20137.0M186.0%20148.5L189.9%20148.7M179.5%20162.3L195.7%20162.0M186.2%20174.1L189.8%20174.0M180.1%20187.3L195.6%20187.1M185.7%20198.8L190.3%20199.0M31.1%2019.3L37.4%2024.9M37.1%2019.0L31.0%2025.2M31.0%2093.0L37.0%2099.4M37.2%2093.4L31.4%2098.8M31.1%20155.4L37.3%20160.6M36.6%20154.9L30.6%20160.7M99.6%2059.2L106.3%2065.4M105.7%2059.2L100.2%2064.6M100.4%20137.5L105.7%20143.5M105.9%20137.0L100.5%20143.3M168.7%2030.9L175.0%2036.8M174.7%2030.8L169.2%2036.5M169.1%20114.9L174.5%20120.8M175.1%20115.0L168.6%20121.5M169.3%20183.5L174.6%20188.8M174.5%20183.3L168.8%20188.6%27/%3E%3C/g%3E%3C/svg%3E");
  --zigzag:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='10'%20viewBox='0%200%2028%2010'%3E%20%3Cpath%20d='M0%208%20L7%202%20L14%208%20L21%202%20L28%208'%20fill='none'%20stroke='%23f4e600'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Voile de toile — se pose sur les grandes surfaces sombres et vides */
.akan{position:relative;isolation:isolate}
.akan:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--bogolan);background-size:190px 190px;
  opacity:.045;
}
.akan-lg:before{background-size:340px 340px;opacity:.08}

/* Filet zigzag — remplace la ligne droite là où une séparation se voit */
.akan-rule{
  height:10px;border:0;margin:0;
  background:var(--zigzag) repeat-x center/28px 10px;
  opacity:.22;
}

/* Applications ------------------------------------------------ */
.profiles-screen{position:relative;isolation:isolate}
.profiles-screen:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--bogolan);background-size:380px 380px;
  opacity:.08;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0,transparent 68%);
          mask-image:radial-gradient(circle at 50% 42%,#000 0,transparent 68%);
}
.ouv-left:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--bogolan);background-size:300px 300px;
  opacity:.08;
  -webkit-mask-image:radial-gradient(ellipse at 78% 34%,#000 0,transparent 72%);
          mask-image:radial-gradient(ellipse at 78% 34%,#000 0,transparent 72%);
}
.empty{position:relative;isolation:isolate}
.empty:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--bogolan);background-size:270px 270px;opacity:.09;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 65%);
          mask-image:radial-gradient(circle at 50% 45%,#000 0,transparent 65%);
}
/* Le motif tenait la scène quand elle était vide. Elle ne l'est plus :
   le graphe occupe le centre, et deux réseaux de traits superposés ne
   se lisent ni l'un ni l'autre. On garde l'identité en la repoussant
   aux bords, là où il n'y a jamais de nœud — un masque radial qui
   s'ouvre au milieu. */
.web-stage:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--bogolan);background-size:300px 300px;opacity:.038;
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,transparent 46%,#000 100%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,transparent 46%,#000 100%);
}
.side{position:relative}
.side:after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;
  background-image:var(--bogolan);background-size:210px 210px;opacity:.08;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);
          mask-image:linear-gradient(0deg,#000,transparent);
}

/* Le zigzag souligne les étapes du tunnel */
.t-steps{position:relative}
.t-steps:after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:10px;
  background:var(--zigzag) repeat-x center/28px 10px;opacity:.16;
  filter:brightness(.35);
}

/* Affiche générative : la toile en filigrane, pas en papier peint */
.gen:before{
  background:var(--bogolan) repeat center/230px 230px;
  opacity:.13;
}
.card:hover .gen:before{opacity:.2}
.card:hover .gen:before{animation:spin 34s linear infinite}

@media (prefers-reduced-motion:reduce){
  .card:hover .gen:before{animation:none}
}

/* ============================================================
   Le repérage — présences à l'écran (console)
   ============================================================ */
.rep-choix{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin-bottom:18px}
.rep-choix label{display:grid;gap:6px;font:600 8px var(--mono);letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase}
.rep-choix select{height:38px;min-width:210px;border:1px solid var(--line);background:#0e0e0e;
  color:var(--cream);padding:0 11px;font:500 11.5px var(--sans);outline:0}
.rep-choix select:focus{border-color:var(--yellow)}
.rep-duree{margin-left:auto;font:600 8.5px var(--mono);letter-spacing:.14em;color:var(--dim);
  padding-bottom:11px}

.rep-grille{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start}
.rep-moniteur video{width:100%;aspect-ratio:16/9;background:#000;display:block;border-radius:3px}
.rep-sans-master{aspect-ratio:16/9;display:grid;place-content:center;text-align:center;padding:24px;
  border:1px dashed var(--line);border-radius:3px;background:#0c0c0c}
.rep-sans-master b{display:block;font:800 17px var(--display);letter-spacing:-.04em;margin-bottom:8px}
.rep-sans-master p{font-size:11px;line-height:1.7;color:var(--muted);margin:0;max-width:46ch}

.rep-transport{display:flex;align-items:center;gap:6px;margin-top:12px}
.rep-transport button{border:1px solid var(--line);background:#111;color:var(--cream);cursor:pointer;
  height:34px;min-width:42px;padding:0 10px;font:700 11px var(--sans);
  font-variant-numeric:tabular-nums;transition:.18s var(--ease)}
.rep-transport button:hover{border-color:var(--yellow);color:var(--yellow)}
.rep-pos{margin-left:auto;font:700 15px var(--sans);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;color:var(--yellow)}

.rep-pose{display:flex;flex-wrap:wrap;align-items:end;gap:9px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.rep-pose label{display:grid;gap:5px;font:600 8px var(--mono);letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase}
.rep-pose input{height:36px;width:118px;border:1px solid var(--line);background:#0e0e0e;
  color:var(--cream);padding:0 10px;font:700 13px var(--sans);font-variant-numeric:tabular-nums;outline:0}
.rep-pose input:focus{border-color:var(--yellow)}
.rep-pose kbd{display:inline-block;margin-left:6px;border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;font:600 8.5px var(--mono);color:var(--dim);background:#0c0c0c}
.rep-aide{font-size:10.5px;line-height:1.7;color:var(--dim);margin:12px 0 0}

.rep-distribution{max-height:520px;overflow:auto}
/* `color:inherit` n'est pas une élégance : un <button> n'hérite PAS de
   la couleur du texte, il prend celle du système. Sans cette ligne les
   noms s'affichaient en gris sombre sur fond noir — illisibles, et
   d'autant plus trompeurs que le reste de l'écran, lui, était juste. */
.rep-pers{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:1px solid transparent;border-bottom:1px solid var(--line-soft);background:transparent;
  color:var(--cream);padding:10px 8px;transition:.16s var(--ease)}
.rep-pers:hover{background:#141414}
.rep-pers.on{border-color:var(--yellow);background:#161400}
.rep-pers i{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font:800 14px var(--display);font-style:normal;color:#0a0a0a;background:var(--muted)}
.rep-pers.on i{background:var(--yellow)}
.rep-pers span{flex:1;min-width:0}
.rep-pers b{display:block;font:700 11.5px var(--sans);letter-spacing:-.01em}
.rep-pers small{display:block;font-size:10px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rep-pers em{font:700 11px var(--sans);font-style:normal;font-variant-numeric:tabular-nums;
  color:var(--yellow);white-space:nowrap}

/* --- La frise ---
   Une ligne par personne, des blocs là où elle est présente. C'est le
   seul dessin où un trou se voit sans être cherché. */
.frise{position:relative;padding-top:22px}
.frise-regle{position:relative;height:16px;margin-left:150px;border-bottom:1px solid var(--line)}
.frise-regle span{position:absolute;top:0;transform:translateX(-50%);font:500 7.5px var(--mono);
  letter-spacing:.08em;color:var(--dim);white-space:nowrap}
.frise-regle span:first-child{transform:none}
.frise-regle span:last-child{transform:translateX(-100%)}
.frise-ligne{display:flex;align-items:center;gap:0;height:30px}
.frise-nom{flex:none;width:150px;padding-right:12px;display:flex;justify-content:space-between;
  align-items:baseline;gap:8px;font:600 10.5px var(--sans);white-space:nowrap;overflow:hidden}
.frise-nom b{font:700 9.5px var(--sans);font-variant-numeric:tabular-nums;color:var(--yellow);flex:none}
.frise-piste{position:relative;flex:1;height:16px;background:#111;border-radius:2px;
  border:1px solid var(--line-soft)}
.frise-piste i{position:absolute;top:0;bottom:0;background:var(--yellow);opacity:.78;
  border-radius:2px;cursor:pointer;transition:.15s var(--ease);min-width:2px}
.frise-piste i:hover{opacity:1;box-shadow:0 0 0 2px rgba(244,230,0,.35)}
.frise-curseur{position:absolute;top:22px;bottom:0;width:1px;background:var(--red);
  margin-left:150px;pointer-events:none;transition:left .2s linear}
.frise-curseur:before{content:"";position:absolute;top:-4px;left:-3px;width:7px;height:7px;
  background:var(--red);border-radius:50%}

@media (max-width:980px){
  .rep-grille{grid-template-columns:1fr}
  .rep-distribution{max-height:340px}
  .frise-nom{width:104px;font-size:9.5px}
  .frise-regle,.frise-curseur{margin-left:104px}
}

/* ============================================================
   « À l'écran » — les présences pendant la lecture
   ============================================================ */
/* `margin-top:auto` colle le panneau aux commandes. `.player-ui` est
   une colonne en space-between : sans cela le panneau se posait au
   milieu de l'image, en plein cadre — exactement là où il ne faut
   pas. */
.xray{margin:auto 0 12px;background:rgba(12,12,12,.9);border:1px solid var(--line);
  border-radius:6px;padding:10px 12px 12px;backdrop-filter:blur(10px);max-width:640px}
.xray-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.xray-tete span{font:600 8px var(--mono);letter-spacing:.18em;color:var(--yellow)}
.xray-tete button{border:0;background:transparent;color:var(--dim);font-size:17px;line-height:1;
  cursor:pointer;padding:0 4px}
.xray-tete button:hover{color:var(--cream)}
.xray-gens{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.xray-gens::-webkit-scrollbar{display:none}
.xray-p{flex:none;display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left;
  border:1px solid var(--line);border-radius:99px;background:#141414;color:var(--cream);
  padding:5px 14px 5px 5px;transition:.18s var(--ease)}
.xray-p:hover{border-color:var(--yellow)}
.xray-p img,.xray-p i{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;font:800 13px var(--display);font-style:normal;
  color:#0a0a0a;background:var(--muted)}
.xray-p b{display:block;font:700 11px var(--sans);white-space:nowrap}
.xray-p small{display:block;font-size:9.5px;color:var(--dim);white-space:nowrap}
.xray-vide{font-size:10.5px;color:var(--dim);margin:0;padding:4px 0}
@media (max-width:640px){ .xray{max-width:none} }

/* ============================================================
   TÉLÉPHONE — la plateforme comme une application
   ============================================================

   Trois choses que Netflix, Prime Video et Apple TV font toutes les
   trois sur téléphone, et qu'on reprend parce qu'elles répondent à des
   contraintes physiques, pas à une mode :

   1. LA NAVIGATION EN BAS. Le haut de l'écran est hors de portée du
      pouce sur un téléphone moderne. Une barre en haut oblige à
      changer de main ou à rattraper l'appareil — dix fois par session.

   2. DES AFFICHES VERTICALES. En 16/9, une carte occupe toute la
      largeur et on n'en voit qu'une : impossible de comparer, donc
      impossible de choisir. En 2/3, on en voit deux et demie, et le
      rail redevient un rail.

   3. RIEN SOUS 44 PIXELS. C'est la taille d'un bout de doigt. En
      dessous, on rate, on appuie à côté, et on croit que l'application
      ne répond pas.

   Le point de bascule est 760 px : au-delà, la navigation du haut
   tient sans se replier, et la barre du bas devient du bruit.
   ------------------------------------------------------------ */

/* La variable qui protège de l'indicateur d'accueil de l'iPhone et de
   la barre de gestes d'Android. Sans elle, le dernier onglet est à
   moitié sous la barre système — et c'est celui qu'on n'atteint
   jamais. */
:root{ --bas-sur: env(safe-area-inset-bottom, 0px); --tab-h: 58px; }

.tabbar{display:none}

@media (max-width:760px){

  /* ---- La barre du bas ---- */
  .tabbar{
    display:flex;position:fixed;z-index:40;inset:auto 0 0 0;
    background:rgba(9,9,9,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:var(--bas-sur);
  }
  .tabbar a{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;height:var(--tab-h);text-decoration:none;color:var(--dim);
    font:600 9.5px var(--sans);letter-spacing:.01em;
    -webkit-tap-highlight-color:transparent;transition:color .18s var(--ease);
  }
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.on{color:var(--yellow)}
  .tabbar a:active{color:var(--cream)}

  /* On rend la place que prend la barre. Sans ça, la dernière rangée
     du catalogue est mangée par la navigation — et on ne le voit pas
     en développant sur un écran d'ordinateur. */
  body{padding-bottom:calc(var(--tab-h) + var(--bas-sur))}
  .player{padding-bottom:0}

  /* ---- La barre du haut se réduit à l'essentiel ---- */
  .app-nav{display:none}
  .app-bar{height:54px;padding-inline:14px;gap:10px}
  .app-tools{gap:8px;margin-left:auto}
  .search-inline{display:none}          /* la recherche est un onglet */
  .brand.sm{font-size:0}
  .brand.sm>span:last-child{font-size:17px}

  .avatar{width:32px;height:32px}
  .av-menu{right:0;left:auto;min-width:min(78vw,270px)}

  /* ---- Les cartes passent en affiche verticale ---- */
  .rail{gap:9px;padding-inline:14px}
  .card,.card.poster{width:33vw;min-width:118px;max-width:168px}
  .card-art{aspect-ratio:2/3}

  /* `aspect-ratio:1` posé plus haut, combiné à une hauteur fixée,
     faisait déduire la LARGEUR de la hauteur : 456 px de scène sur un
     écran de 390. Un tiers de la toile passait sous le bord droit. */
  /* La scène occupe ce qui reste sous le panneau et au-dessus des
     comptes. `aspect-ratio` est explicitement annulé : une hauteur
     fixée avec un rapport de 1 ferait déduire la LARGEUR de la
     hauteur — 456 px de scène sur un écran de 390. */
  .web-stage{aspect-ratio:auto;width:auto;height:clamp(400px,58vh,540px)}
  .lb-nom{font-size:10px}
  .lb-type{font-size:7.5px}
  .hub-mot{font-size:16px}
  .hub-sous{display:none}
  .web-cherche input{height:40px}
  /* Le survol n'existe pas sur un téléphone : l'extrait au survol ne
     se déclenchera jamais, et le zoom au survol laisse une carte
     agrandie collée après un appui. On coupe les deux. */
  .card:hover{transform:none}
  .card video{display:none}
  /* Le volet à la Prime Video ne se déplie qu'au survol. Sur
     téléphone il ne s'ouvrira jamais — mais ses boutons existent
     quand même : 168 cibles de 26 px que le doigt ne peut pas viser
     et que le lecteur d'écran annonce quand même. On le retire. Sur
     téléphone, une carte fait une chose : on tape, la fiche s'ouvre. */
  .card-panel{display:none}
  .card-body h3{font-size:12px;line-height:1.25}
  .card-meta{font-size:9px}

  /* Dans la grille, la carte est étroite (108 px) : la ligne d'infos
     passait sur deux lignes et sortait de la carte par la droite. Le
     bloc reste POSÉ SUR l'affiche — il est à l'intérieur de
     `.card-art`, qui est rogné au format 2:3 : le rendre statique le
     ferait disparaître sous le bord. On l'empêche simplement de
     s'enrouler, et on laisse tomber la durée, qui ne tient pas. */
  .grid-cards .card-meta{flex-wrap:nowrap;overflow:hidden}
  /* Il ne reste que l'année. « Documentaire · 2026 · 1 h 12 » dans
     108 px se coupait au milieu d'un chiffre — « 20… » — ce qui
     ressemble à un bug, pas à un abrégé. Le type est déjà lisible sur
     l'affiche ; l'année, non. */
  .grid-cards .card-meta>:nth-child(-n+2),
  .grid-cards .card-meta>:nth-child(n+4){display:none}
  .grid-cards .card-body{padding:9px 9px 11px}

  .row-head{padding-inline:14px}
  .row-head h2{font-size:17px}
  .rail-nav{display:none}               /* on fait défiler au doigt */

  /* ---- Le hero ---- */
  .billboard{min-height:auto}
  .bb-title{font-size:clamp(34px,11vw,46px)}
  .bb-sub{font-size:10px;gap:5px}
  .bb-desc{font-size:12.5px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .bb-actions{gap:8px}
  .bb-actions .btn{flex:1;min-height:46px;justify-content:center;padding-inline:12px}
  .bb-actions .btn-line{flex-basis:100%}
  .bb-meta-right{display:none}

  /* ---- Rien sous 44 px ---- */
  .btn{min-height:44px}
  .btn-sm{min-height:40px}
  .icon-btn{width:40px;height:40px}
  .filters button{min-height:40px;padding-inline:14px}
  .av-menu button,.av-menu a{min-height:44px;display:flex;align-items:center}
  /* Le pied : deux liens de 18 px de haut qu'aucun pouce n'attrape. */
  .app-pied{padding:28px 14px calc(30px + var(--tab-h) + var(--bas-sur))}
  .app-pied nav{margin-left:0;gap:6px}
  .app-pied nav a{min-height:44px;padding-inline:12px;border:1px solid var(--line-soft);border-radius:99px}
  .brand.sm{min-height:44px;display:inline-flex;align-items:center}

  /* ---- Les vues ---- */
  .view{padding:74px 14px calc(26px + var(--tab-h))}
  .view-head h1{font-size:clamp(28px,9vw,38px)}
  /* Sur téléphone, cinq cents pixels d'introduction repoussent la
     toile sous la ligne de flottaison : on ne voit que du texte sur
     un écran censé montrer un graphe. Le texte reste sur grand
     écran, où la place ne manque pas. */
  .sur-grand{display:none}
  .view-head p{font-size:12.5px}
  /* 76 px de gouttière verticale servaient à laisser passer le volet
     déplié. Il n'existe plus ici : on rend l'espace au catalogue. */
  .grid-cards{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px;row-gap:18px}
  .cards-2{grid-template-columns:1fr}
  /* Une colonne de grille vaut `minmax(auto,1fr)` : elle refuse de
     descendre sous la largeur minimale de son contenu. Une adresse
     e-mail, un libellé de forfait, et la colonne réclamait 531 px —
     le navigateur dézoomait alors TOUTE la page pour la loger, et
     l'application arrivait en 545 px de large sur un écran de 390.
     `min-width:0` lui rend le droit de rétrécir ; le débordement est
     ensuite traité là où il apparaît. */
  .acct-grid{grid-template-columns:1fr;gap:22px}
  .acct-grid>*,.stack>*,.plan-cards>*{min-width:0}
  .plan-cards{grid-template-columns:1fr}
  .kv dd{overflow-wrap:anywhere}

  /* Un tableau ne se réduit pas : il se fait glisser. Le comprimer
     rendrait les colonnes illisibles sans rien gagner. */
  .tbl{display:block;overflow-x:auto;white-space:nowrap}

  /* ---- La fiche détaillée ---- */
  .sheet-grid{grid-template-columns:1fr;gap:24px;padding:22px 18px 26px}
  .sheet-grid>*{min-width:0}
  .sheet-hero{aspect-ratio:16/10}
  .sheet-hero-body{padding:0 18px 18px}
  .sheet-hero-body h2{margin-bottom:11px}
  /* « 1 h 36 » et « Tous publics » se coupaient en deux : la ligne
     d'infos s'enroule entre ses éléments, jamais au milieu de l'un. */
  .sheet-facts .line{flex-wrap:wrap;row-gap:7px}
  .sheet-facts .line>*{white-space:nowrap}
  .sheet-tabs{gap:16px;overflow-x:auto;scrollbar-width:none;padding-inline:18px}
  .sheet-tabs::-webkit-scrollbar{display:none}
  .sheet-tabs button{white-space:nowrap;min-height:44px;padding-bottom:10px}
  .sheet-pane{padding:0 18px 30px}
  .sheet-close{width:44px;height:44px}

  /* ---- Le lecteur, plein écran et au pouce ---- */
  .player-ui{padding:12px 14px calc(14px + var(--bas-sur))}
  .player-top h3{font-size:19px}
  /* Debout, huit commandes de 44 px ne tiennent pas sur 390 : elles
     s'enroulaient n'importe comment, le second rang collé à gauche.
     On assume deux rangs de quatre, répartis sur la largeur — la
     transposition au doigt de ce que font Netflix et Prime Video. */
  .player-ctrl{
    display:grid;grid-template-columns:repeat(4,44px);
    justify-content:space-between;gap:10px;
  }
  .player-ctrl .icon-btn{width:44px;height:44px}
  .player-ctrl .time{
    grid-column:1/-1;order:-1;margin:0 0 2px;font-size:10px;letter-spacing:.1em;
  }
  .player-ctrl .spacer{display:none}
  .seek{height:22px}                    /* la barre de progression se vise mal */
  /* Les menus « langue » et « qualité » : des lignes de 29 px qu'on
     rate une fois sur deux. */
  .pop-menu{width:min(74vw,250px)}
  .pop-menu button{min-height:42px;padding:9px 10px;font-size:12px}

  /* ---- Le plancher typographique ----
     7,5 px était lisible sur un écran d'ordinateur à 40 cm. À bout de
     bras dans un gbaka, non. */
  .eyebrow,.card-meta small,.kv dt,.pied small,
  .row-head span,.badge-4k,.plan-card>span,.web-grp>b{font-size:9.5px}
  small{font-size:10px}
}

/* ============================================================
   TÉLÉPHONE COUCHÉ
   ------------------------------------------------------------
   C'est la position dans laquelle on REGARDE. Et c'est la seule que
   `max-width:760px` ne voit pas : couché, un téléphone fait 844 px de
   large — la largeur d'une tablette — et hérite donc de la mise en
   page de bureau, avec ses commandes de 38 px. On se règle ici sur la
   HAUTEUR, qui seule distingue un téléphone couché d'un écran.
   ============================================================ */
@media (max-height:520px) and (orientation:landscape){
  .player-ui{padding:10px max(14px,env(safe-area-inset-left)) 12px max(14px,env(safe-area-inset-right))}
  .player-top h3{font-size:17px}
  .player-top p{display:none}
  .player-bottom{gap:8px}
  .player-ctrl{display:flex;grid-template-columns:none;gap:9px;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none}
  .player-ctrl .time{order:0;margin-left:2px}
  .player-ctrl .spacer{display:block;margin-left:auto}
  .player-ctrl::-webkit-scrollbar{display:none}
  .player-ctrl .icon-btn,.player-top .icon-btn{width:44px;height:44px;flex:none}
  .seek{height:20px}
  /* Un menu de 300 px de haut sur un écran de 390 : on le laisse
     défiler au lieu de le laisser sortir par le haut. */
  .pop-menu{max-height:min(62vh,240px);overflow-y:auto;width:min(52vw,250px)}
  .pop-menu button{min-height:40px;padding:7px 10px}
  .xray{max-height:38vh;overflow-y:auto}
}

/* Très petits téléphones — beaucoup d'entrée de gamme font 360 px */
@media (max-width:380px){
  .tabbar a{font-size:8px;gap:3px}
  .tabbar a svg{width:19px;height:19px}
  .card{width:36vw}
  .view{padding-inline:12px}
  .rail,.row-head{padding-inline:12px}
}

/* Tablette en portrait : la navigation du haut tient, les cartes
   restent en paysage, mais on desserre la grille. */
@media (min-width:761px) and (max-width:1024px){
  .acct-grid{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr}
}