/* =====================================================================
   FemtoTV — fixes.css (v2) — À CHARGER TOUT EN DERNIER, après port-align.css
   Écrit et mesuré contre refonte.css + port-align.css réels (16/10).
   Règle de partage inchangée : port-align garde la géométrie du template ;
   ce fichier ne corrige que des écarts MESURÉS (chaque bloc cite la mesure).
   ===================================================================== */

/* 1. Champs imbriqués — bug de redesign.css ---------------------------
   redesign.css stylait tout input[type=…] ; dans les conteneurs « creux »
   (.gr, .tb-search, #auth-form) cela dessinait un 2e cadre (recherche mobile,
   login). Le conteneur fait le fond, l'input reste nu. */
html body .gr input,html body .tb-search input,html body #auth-form input,html body #cmdk-input{
  background:transparent!important;box-shadow:none!important;border:0!important;
  border-radius:0!important;outline:none;-webkit-appearance:none;appearance:none;
}
html body .tb-search:focus-within,html body .gr:focus-within{outline:2px solid rgba(167,139,250,.75);outline-offset:2px}

/* 2. Lecteur desktop : « Subs / Qualité · Auto / 1x » superposés -------
   Les .pc-qbtn gardaient la largeur du bouton rond (44) : on laisse le texte
   décider, sans toucher à la hauteur/typo posées par port-align (48 / 14-600).
   (Desktop uniquement : les rangées mobile ont leurs tailles template dans
   port-align, qu'un width:auto!important global écrasait.) */
@media (min-width:769px){
  html body .player .pc-row{flex-wrap:wrap;row-gap:10px;column-gap:8px;align-items:center}
  html body .player .pc-quality{position:relative;flex:0 0 auto;display:flex;gap:8px}
  html body .player .pc-btn.pc-qbtn,html body .player .pc-btn.pc-vlc,html body .player .pc-btn.pc-skip{
    width:auto!important;min-width:48px;white-space:nowrap;flex:0 0 auto;border-radius:9999px}
}
/* Audio / Subs / Qualité sans pistes : pas de bouton « mort » */
html body .player .pc-qbtn[disabled]{opacity:.85}
html body .player .pc-quality .pq-menu{position:absolute;right:0;left:auto;top:auto;bottom:calc(100% + 12px);max-width:min(340px,calc(100vw - 24px))}
html body .pc-vol{accent-color:#a78bfa}

/* 3. Nav mobile : icône de l'onglet actif invisible + libellé décalé ----
   - redesign.css coloriait le <svg> en violet clair (« .tabs button.active svg »)
     par-dessus le disque violet : on rend la couleur du disque (#14101f, refonte).
   - Seul l'actif a un disque 34px (refonte) → son libellé descendait de ~7px ;
     les autres reçoivent le même créneau 34px (sans fond) pour aligner les libellés. */
html body #topbar .tabs button.active .disc svg{color:inherit}
@media (max-width:768px){
  html body #topbar .tabs button:not(.active) .disc{
    display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
    background:none;box-shadow:none;margin-top:-2px}
}

/* 4. Détail mobile : Favori 60×52, Trailer 52×44, VLC 52×52 (mesuré) -----
   Les .btn gardent le min-width/min-height du legacy ; port-align fixe 52×52 mais
   ne neutralise pas ces minima. Les libellés .act-cap ne changent pas. */
@media (max-width:768px){
  html body #detail .detail-actions .act .btn.fav,
  html body #detail .detail-actions .act .btn.trailer-btn,
  html body #detail .detail-actions .act .btn.vlc{min-width:0;min-height:0;width:52px;height:52px;padding:0;flex:0 0 52px}
}

/* 5. Accueil desktop : marges d'écran (template : tout à x40 → x1400) ----
   Mesuré @1440 : Top 10 x40 ✓ ; Historique + rubriques x24 ; « Voir tout » bord droit 1416.
   Cause : utils.css fixe #content à min(100% − 3rem, 1480px). On passe à 80px
   (= 2×40) ; .top10-inner suit la même largeur pour rester aligné sur grands écrans. */
@media (min-width:769px){
  html body #content{width:min(100% - 80px,1480px)}
  html body .top10-inner{width:min(100% - 80px,1480px);padding-left:0;padding-right:0}
}

/* 6. Accueil desktop : bande sous les pastilles (template 40px ; prod 171px) --
   171 = 32 (padding bas de .genre-row, port-align) + 110 (padding haut de .top10-band)
   + marges. On ne touche que quand le bandeau Top 10 est présent (les autres
   onglets gardent le rythme actuel). */
@media (min-width:769px){
  html body:has(.top10-band) .genre-row{padding-bottom:0}
  html body .top10-band{padding-top:11px}
  html body .top10-ribbon.top{top:-10px}
}

/* ================= 7. Audit complet (planche SSOT) ================= */

/* 7.3 Compteurs : mono 11.5 (« 249 titres » planche 14, « 27 titres » planche 17). */
.cat-count,.fav-total{font-family:'DM Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:#aea9b8}

/* 7.4 Guide desktop : créneau 30 min = 189px (planche 07 : grille 1134 au lieu de 1080),
   pas vertical des rangées 66px (rangée 56 + marge 10), radius carte programme 12. */
@media (min-width:641px){ .g-track{width:1134px;flex:0 0 1134px} .g-row .g-track{min-height:56px} }
.g-prog{border-radius:12px}

/* 7.5 Guide mobile : en-tête nu (planche 08 : titre 30/700 à x16, pas de panneau). */
@media (max-width:640px){
  .guide-head{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:.25rem 12px;margin:0 .25rem}
}

/* 7.6 Connexion : libellé du CTA 17px (planche 03 : 17/700 ; l'app héritait 13.3px).
   Et 19.2px de marge basse sous le champ mot de passe (planche 03 : 24px jusqu'au CTA,
   la marge venait de .pass-wrap). */
#auth-submit{font-size:17px}
#auth-form .pass-wrap{margin-bottom:0}

/* 7.7 Palette : rangées 52px / radius 16, pastille d'icône 36×36 (planche 11). */
.cmdk-item{min-height:52px;border-radius:16px}
.cmdk-ico{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center}

/* 7.8 Fiche série mobile : lignes d'épisode lisibles (planche 06 : titre ~172px, rangée ~88px).
   Avant : vignette 192 sur rangée de 358 → titre écrasé à 44px. */
@media (max-width:640px){
  .ep{grid-template-columns:118px 1fr 48px;gap:10px;padding:10px;border-radius:14px;margin-bottom:8px}
  .ep-thumb{width:118px;flex-basis:118px}
}

/* 7.9 Fiche desktop : compteur d'épisodes collé au titre (planche 05 ; mobile planche 06 = à droite). */
@media (min-width:769px){ .eps-head .row-meta{margin-left:0;margin-right:auto} }

/* 7.10 Live : cœur de carte 44×44 rond (planche 21 ; mesuré 50×44). */
#sec-live .live-card .live-fav{width:44px;height:44px;padding:0;border-radius:50%}

/* 7.11 Favoris mobile : en-tête nu (planche 17 : titre 30/700 à x16, pas de panneau). */
@media (max-width:640px){
  .fav-head.gl,.fav-head{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:.5rem 0 0}
}

/* 7.12 Catégorie : rail A–Z lettres 44×44 (planche 14) ; 30 lettres × 44 > écran →
   le rail défile au lieu de déborder. Planche 14 : conteneur ancré sous le
   bandeau (gl 50×1206 à y190), pas centré — sinon il chevauche la tête. */
@media (min-width:769px){
  .az-scrub{max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none;padding:6px 4px}
  .az-scrub::-webkit-scrollbar{display:none}
  .az-scrub .az{height:44px;flex:0 0 44px}
  html body #category .az-scrub{top:190px;bottom:auto;transform:none;justify-content:flex-start;gap:0}
}

/* 7.13 Fiche : groupe Saisons sur la ligne « Épisodes » (planche 05 : compact à droite ;
   planche 06 mobile : pleine largeur sous le titre). */
.eps-head .seasons{margin:0;padding:4px;margin-left:auto}
@media (max-width:640px){
  .eps-head{flex-wrap:wrap}
  .eps-head .row-meta{margin-left:auto}
  .eps-head .seasons{flex:1 1 100%;order:9;margin:6px 0 0}
}

/* 7.14 Favoris desktop : en-tête 2 rangées (planche 16 : 1360×142, pastilles dedans). */
@media (min-width:769px){
  .fav-head{display:flex;align-items:center;gap:.75rem;padding:0 18px;margin-top:-16px;margin-bottom:0}
  .fav-purpose{flex:1}
  .fav-pills .genre-pill{height:44px;min-height:44px}
  /* Planche 16 : rangée 2 = pastilles gauche + tri droite (63/173/289, tri 1201..1381) */
  .fav-pills-row{display:flex;align-items:center;gap:8px;margin-top:14px}
  .fav-pills-row{padding:0 18px}
  .fav-pills-row .fav-pills{margin-left:0;flex:0 0 auto}
  .fav-pills-row .drop{margin-left:auto}
}

/* 7.15 Catégorie desktop : tête = panneau verre (planche 14 : 1360×142 à y14, br 28,
   pad 14/18/16, le tri .gr est DEDANS). Hauteur = 14+44+14(mt)+52+16 = 142.
   Icône recherche 44 (ouvre la palette) à droite, le .close legacy (46, right 5rem)
   recule à 59px pour ne pas la chevaucher (planche : recherche 1277, close 1337).
   Le rail A–Z raccourci laisse la place au hint (76 de large, centré sur le rail). */
html body #category .cat-hint{display:none}
/* Planche 15 (mobile) : tête nue sans icône recherche -> on la garde desktop only. */
@media (max-width:768px){ html body #category .cat-search{display:none} }
@media (min-width:769px){
  html body #category .cat-head{
    width:min(100% - 80px,1360px);margin:0 auto;padding:14px 18px 16px;border-radius:28px;
    row-gap:0; /* rangée 2 = 14px (margin du tri), pas gap 16 + 14 */
    background:rgba(34,28,48,.42);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 48px -24px rgba(0,0,0,.8);
  }
  html body #category .cat-head .cat-sort-line{flex-basis:100%;margin-top:14px}
  html body #category .cat-search{margin-left:auto;margin-right:61px;width:44px;height:44px}
  html body #category > .close{right:59px}
  html body #category .az-scrub{max-height:calc(100vh - 160px)}
  html body #category .cat-hint{
    display:block;position:fixed;right:17px;bottom:10px;width:76px;text-align:center;
    font-size:11px;line-height:14px;letter-spacing:.05em;text-transform:uppercase;color:#aea9b8;
  }
}

/* 7.16 Modale VLC mobile (planche 13) : feuille du bas — icône 48 orange, titre 24/700,
   paragraphe 15, adresse 348×58 (gr br 16) + copie 44, CTA 348×60 (br 9999, well 44,
   libellé 16.5/700), « Fermer » texte ; « Retry VLC » en lien mono discret sous l'adresse.
   Desktop inchangé (JS ne reconstruit la carte qu'à ≤640px). */
@media (max-width:640px){
  html body .vlc-help{align-items:flex-end;padding:0;background:rgba(6,5,8,.5)}
  html body .vlc-help-card{
    max-width:none;padding:0 20px 24px;border-radius:28px 28px 0 0;
    background:rgba(22,18,32,.92);border-bottom:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 -30px 60px -20px rgba(0,0,0,.8);
  }
  .vlc-grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);margin:10px auto 18px}
  .vlc-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
  .vlc-head h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em}
  .vlc-head h2::before{content:none}
  .vlc-ico{width:48px;height:48px;color:#ffa070}
  .vlc-help-card .vlc-p{margin:0 0 16px;color:#d8d4de;font-size:15px;line-height:24px}
  .vlc-p strong{color:#f2f0ec}
  .vlc-urlrow{display:flex;align-items:center;gap:8px;border-radius:16px;padding:4px 4px 4px 14px;min-height:58px}
  .vlc-urlrow .vlc-help-url{
    flex:1;align-self:stretch;width:auto;min-width:0;height:48px;padding:0;border:0;border-radius:0;
    background:none;box-shadow:none;color:#e6e1ee;font:500 13px 'DM Mono',monospace;
  }
  .vlc-urlrow .ib{width:44px;height:44px}
  .vlc-retry{
    margin:8px 0 0 2px;padding:0;border:0;background:none;color:#aea9b8;
    font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;
  }
  .vlc-cta{
    margin-top:18px;width:100%;height:60px;display:flex;align-items:center;justify-content:flex-start;gap:14px;
    padding:0 22px 0 8px;border-radius:9999px;text-align:left;
  }
  .vlc-cta .well{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
  .vlc-cta-tx{font-weight:700;font-size:16.5px}
  .vlc-close-row{text-align:center;margin-top:6px}
  .vlc-close{min-height:44px;padding:0 16px;border:0;background:none;color:#bdb7c8;font-weight:600;font-size:14.5px}
  .vlc-help-actions{display:none}
}

/* 7.17 Palette : chips de raccourci des entrées de navigation
   (planche 11 : kbd mono 11px, pad 2px 7px, br 6, bord 1px rgba(255,255,255,.14)). */
html body .cmdk-item .cmdk-label{flex:1}
html body .cmdk-item .cmdk-kbd{
  padding:2px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.14);border-bottom-width:1px;
  background:none;font-size:11px;color:#b0abba;
}

/* =====================================================================
   8. Recherche plein écran + têtes (planches 23-26, 14, 15, 17, 22, 01)
   La planche 23-26 est le rendu de templates/recherche.html (SSR) ; le SPA
   le reproduit dans #sec-search (fixe, plein écran). Mesures de contrôle :
   tête verre 1360×142 br 28 à y14, champ 52, chips 44, cartes 176,
   rangées chaîne 1020×108 br 18 (thumb 140), « N RÉSULTATS » mono 11.5.
   ===================================================================== */

/* 8.1 #sec-search = écran plein (palette Ctrl+K et overlays inchangés). */
#sec-search{
  position:fixed;inset:0;z-index:var(--z-search);overflow-y:auto;overscroll-behavior:contain;
  background:
    radial-gradient(760px 540px at -2% -6%,rgba(167,139,250,.22),transparent 62%),
    radial-gradient(640px 440px at 104% 2%,rgba(86,120,255,.14),transparent 62%),
    #0c0b0e;
  color:#f2f0ec;
}
#sec-search .sr-head{position:sticky;top:0;z-index:6;padding:14px 40px 0;max-width:1480px;margin:0 auto;box-sizing:border-box}
#sec-search .sr-head-panel{border-radius:28px;padding:14px 18px 16px}
#sec-search .sr-row{display:flex;align-items:center;gap:16px}
#sec-search .sr-back,#sec-search .sr-close{width:44px;height:44px;flex:0 0 44px}
#sec-search .sr-field{display:flex;align-items:center;gap:12px;flex:1;min-width:0;height:52px;box-sizing:border-box;padding:0 10px 0 18px;border-radius:9999px;color:#bdb7c8;
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.8),inset -2px -2px 6px rgba(255,255,255,.04),0 0 0 2px #a78bfa,0 0 28px -4px rgba(167,139,250,.45)}
#sec-search .sr-field input{flex:1;align-self:stretch;min-width:0;border:0;outline:0;background:none;color:#f2f0ec;font-size:17px;font-family:inherit}
#sec-search .sr-field input::placeholder{color:#8f8a9b;opacity:1}
#sec-search .sr-field input::-webkit-search-cancel-button{display:none}
#sec-search .sr-esc{padding:3px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.14);color:#b0abba;font-size:11px}
#sec-search .sr-clear{width:44px;height:44px;margin-right:-6px;border:0;background:none;color:#d8d4de;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;flex:0 0 44px}
#sec-search .sr-chips{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent)}
#sec-search .sr-chips::-webkit-scrollbar{display:none}
#sec-search .sr-chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border:0;border-radius:9999px;background:rgba(255,255,255,.04);color:#d8d4de;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;flex:0 0 auto}
#sec-search .sr-chip .sr-cn{font-size:11.5px;font-weight:600;color:#b0abba}
#sec-search .sr-chip.on{background:linear-gradient(180deg,#bba8ff,#a78bfa 60%,#9479ef);color:#14101f;box-shadow:0 10px 22px -10px rgba(167,139,250,.7),inset 0 1px 0 rgba(255,255,255,.45)}
#sec-search .sr-chip.on .sr-cn{color:rgba(20,16,31,.72)}
#sec-search .sr-chip:hover{color:#fff}
#sec-search .sr-chip.on:hover{color:#14101f}
#sec-search .sr-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;max-width:1480px;margin:0 auto;padding:36px 40px 80px;box-sizing:border-box}
#sec-search .sr-sec{margin-bottom:40px}
#sec-search .sr-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px}
#sec-search .sr-sec-head h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.015em}
#sec-search .sr-count{font-size:11.5px;line-height:14px;letter-spacing:.06em;text-transform:uppercase;color:#aea9b8;white-space:nowrap}
#sec-search .sr-rail{display:flex;gap:24px;flex-wrap:wrap;overflow:visible;padding:0;margin:0;mask-image:none;-webkit-mask-image:none}
#sec-search .sr-rail .pc{width:176px}
#sec-search .sr-rows{display:flex;flex-direction:column;gap:8px}
#sec-search .sr-ch{width:100%;display:flex;align-items:center;gap:18px;padding:10px 22px 10px 10px;border-radius:18px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#sec-search .sr-th{position:relative;flex:0 0 140px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#15131a}
#sec-search .sr-th > .poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
#sec-search .sr-th > .poster img{width:76%;height:76%;object-fit:contain}
#sec-search .sr-th-num{position:absolute;left:8px;top:8px;width:34px;height:34px;font-size:11px;color:#cbbcff}
#sec-search .sr-th-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
#sec-search .sr-th-bar > div{height:100%;background:linear-gradient(90deg,rgba(167,139,250,0),#a78bfa 88%);box-shadow:0 0 10px rgba(167,139,250,.7)}
#sec-search .sr-ch-body{flex:1;min-width:0;display:block}
#sec-search .sr-ch-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;line-height:24px;white-space:nowrap;overflow:hidden}
#sec-search .sr-ch-name .sr-sig{display:none}
#sec-search .sr-ch-name .sr-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-search .sr-ch-prog{display:block;font-size:14px;line-height:20px;color:#d8d4de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-search .sr-ch-prog:empty{display:none}
#sec-search .sr-ch-meta{display:block;margin-top:2px;font-size:11.5px;color:#b0abba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-search .sr-ch-meta:empty{display:none}
#sec-search .sr-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.06em;color:#ff8a7e;white-space:nowrap}
#sec-search .sr-live-off{min-width:0}
#sec-search .sr-live .sig{height:12px}
#sec-search .sr-live .sig i{background:#ff8a7e}
#sec-search .sr-pg{width:100%;display:flex;align-items:center;gap:16px;padding:10px 18px 10px 10px;border-radius:16px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#sec-search .sr-pg-th{position:relative;flex:0 0 96px;aspect-ratio:16/10;border-radius:10px;background:radial-gradient(90% 120% at 20% 10%,rgba(99,60,178,.9),transparent 65%),#15131a}
#sec-search .sr-pg-num{position:absolute;left:6px;top:5px;padding:1px 6px;border-radius:6px;background:rgba(12,11,14,.7);font-size:11.5px}
#sec-search .sr-pg-body{flex:1;min-width:0;display:block}
#sec-search .sr-pg-t{display:block;font-weight:600;font-size:15px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-search .sr-pg-meta{display:block;font-size:11.5px;line-height:16px;color:#b0abba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sec-search .sr-pg-at{font-size:12px;color:#cbbcff;white-space:nowrap}
#sec-search .sr-side{position:sticky;top:190px;display:flex;flex-direction:column;gap:20px}
#sec-search .sr-panel{border-radius:22px;padding:18px 14px 10px}
#sec-search .sr-panel h3{margin:0 4px 10px;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;line-height:24px;font-weight:600}
#sec-search .sr-plist,#sec-search .sr-klist{list-style:none;margin:0;padding:0}
#sec-search .sr-prow{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:#d8d4de;font-size:14.5px;font-weight:600;text-align:left;cursor:pointer}
#sec-search .sr-pl{display:inline-flex;align-items:center;gap:10px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#sec-search .sr-pl svg{color:#b0abba;flex:0 0 auto}
#sec-search .sr-pk{font-size:11px;color:#b0abba;flex:0 0 auto;margin-left:8px}
#sec-search .sr-klist li{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:#d8d4de}
#sec-search .sr-klist kbd{padding:3px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.18);color:#e6e1ee;font-size:11px}
/* État vide (planches 25-26 : conteneur 72px/56px, disque 96, titre 44/48, CTA 225×52) */
#sec-search .sr-empty{text-align:center;padding:72px 24px 80px}
#sec-search .sr-empty-disc{width:96px;height:96px;border-radius:50%;margin:0 auto;display:flex;align-items:center;justify-content:center;color:#cbbcff}
#sec-search .sr-empty h2{margin:28px 0 10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:44px;line-height:48px;letter-spacing:-.03em;color:#f2f0ec}
#sec-search .sr-empty p{margin:0 auto;max-width:460px;font-size:16px;line-height:24px;color:#d8d4de}
#sec-search .sr-sugg{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;max-width:640px;margin:28px auto 0}
#sec-search .sr-schip{height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.14);border-radius:9999px;background:rgba(255,255,255,.04);color:#d8d4de;font-size:14px;font-weight:600;cursor:pointer}
#sec-search .sr-schip:hover{color:#fff;background:rgba(255,255,255,.08)}
#sec-search .sr-browse{margin-top:32px;height:52px;padding:4px 24px 4px 4px;border-radius:9999px;display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:700}
#sec-search .sr-browse .well{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#sec-search .sr-meta-m{display:none}
/* Mobile (planches 24 et 26) : tête nue, chips scrollables, rails H. */
@media (max-width:768px){
  #sec-search .sr-head{padding:12px 0 0}
  #sec-search .sr-head-panel{border-radius:0;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  #sec-search .sr-row{gap:8px;padding:0 12px 0 8px}
  #sec-search .sr-field{height:48px;padding:0 6px 0 16px;font-size:16px}
  #sec-search .sr-field input{font-size:16px}
  #sec-search .sr-esc,#sec-search .sr-close{display:none}
  #sec-search .sr-clear{margin-right:-2px}
  #sec-search .sr-chips{margin-top:12px;padding:0 16px;gap:8px}
  #sec-search .sr-body{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 90px}
  #sec-search .sr-main{min-width:0}
  #sec-search .sr-side{display:none}
  #sec-search .sr-sec-head{margin:20px 16px 10px}
  #sec-search .sr-sec-head h2{font-size:19px;line-height:24px}
  #sec-search .sr-count{font-size:11.5px}
  #sec-search .sr-count .sr-cw{display:none}
  #sec-search .sr-rows{gap:8px;padding:0 16px}
  #sec-search .sr-ch{gap:12px;padding:8px 14px 8px 8px;border-radius:16px;background:rgba(167,139,250,.12);box-shadow:inset 0 0 0 1px rgba(167,139,250,.45)}
  #sec-search .sr-th{flex:0 0 88px;border-radius:10px}
  #sec-search .sr-th-num{left:5px;top:5px;width:auto;height:auto;padding:1px 6px;border-radius:6px;background:rgba(12,11,14,.7);font-size:11.5px;box-shadow:none;color:#f2f0ec}
  #sec-search .sr-ch-name{font-size:14.5px;line-height:20px}
  #sec-search .sr-ch-name .sr-sig{display:inline-flex}
  #sec-search .sr-ch-prog{font-size:13px;line-height:18px}
  #sec-search .sr-ch-meta{font-size:11px;line-height:14px}
  #sec-search .sr-ch .sr-live{display:none}
  #sec-search .sr-rail{gap:12px;flex-wrap:nowrap;overflow-x:auto;padding:0 16px;scrollbar-width:none}
  #sec-search .sr-rail::-webkit-scrollbar{display:none}
  #sec-search .sr-rail .pc{width:124px}
  #sec-search .sr-rail .pc .pc-sub .chip,
  #sec-search .sr-rail .pc .pc-sub .meta-year,
  #sec-search .sr-rail .pc .pc-sub .pc-rate{display:none}
  #sec-search .sr-rail .pc .pc-sub{margin-top:0}
  #sec-search .sr-rail .pc-title{font-size:13.5px;line-height:18px;margin-top:8px}
  #sec-search .sr-meta-m{display:block;font-size:11px;line-height:14px;color:#b0abba}
  #sec-search .sr-t-series{display:none}
  #sec-search .sr-body.sr-f-series .sr-t-series{display:block}
  #sec-search .sr-pg{gap:12px;padding:8px;border-radius:16px}
  #sec-search .sr-pg-th{flex:0 0 88px;border-radius:10px}
  #sec-search .sr-pg-t{font-size:14.5px;line-height:20px}
  #sec-search .sr-pg-meta{font-size:11px;line-height:14px}
  #sec-search .sr-pg-at,#sec-search .sr-pg .sr-live{display:none}
  #sec-search .sr-empty{padding:56px 16px 80px}
  #sec-search .sr-empty-disc{width:96px;height:96px}
  #sec-search .sr-empty h2{font-size:30px;line-height:34px;margin-top:28px}
  #sec-search .sr-empty p{max-width:358px}
  #sec-search .sr-sugg{gap:8px;margin-top:28px}
  #sec-search .sr-schip{padding:0 18px}
}

/* 8.2 Catégorie (planches 14/15) : badge NOUVEAU vertical sur la 1re carte,
   chips filtres Année/Qualité (donnée réelle ; Genre absent du flux provider),
   compteur en capitales ; mobile : têtes empilées h1/compteur + note sur l'affiche. */
html body #category .cat-count{text-transform:uppercase}
.badge-new{
  position:absolute;left:0;top:16px;width:24px;height:78px;box-sizing:border-box;
  padding:10px 5px;border-radius:0 8px 8px 0;z-index:3;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:11px;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(180deg,#bba8ff,#a78bfa 60%,#9479ef);color:#14101f;
  box-shadow:0 6px 16px -6px rgba(167,139,250,.8);
}
html body #category .cat-chip{display:inline-flex;align-items:center;height:44px;padding:0 14px 0 16px;border:0;border-radius:9999px;background:rgba(255,255,255,.04);color:#d8d4de;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
html body #category .cat-chip.on{background:rgba(167,139,250,.16);color:#f2f0ec}
html body #category .cat-fdrop{margin-left:0}
html body #category .cat-menu{left:0;right:auto}
@media (min-width:769px){
  html body #category > .close{top:29px;right:59px;width:44px;height:44px}
  html body #category .cat-head .cat-titles{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0}
  html body #category .cat-sort-line{display:flex;align-items:center;flex-wrap:wrap}
  html body #category .cat-chips{display:flex;gap:10px;margin-left:33px}
  html body #category .cat-grid{padding-top:28px}
  html body #category .az-scrub{right:41px;width:50px;padding:8px 2px}
  html body #category .cat-hint{right:28px}
}
@media (max-width:768px){
  html body #category > .close{display:none}
  html body #category .cat-head{padding:14px 16px 0;border-radius:0;background:none;border:0;box-shadow:none;row-gap:0}
  html body #category .cat-back{margin-top:4px}
  html body #category .cat-head .cat-titles{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex:1 1 auto;min-width:0}
  html body #category .cat-head h1{font-size:28px;line-height:30px}
  html body #category .cat-search{display:inline-flex;margin:4px 0 0;width:44px;height:44px}
  html body #category .cat-sort-line{flex-basis:100%;display:flex;flex-direction:column;gap:12px;margin-top:15px}
  html body #category .cat-sort{width:100%}
  html body #category .cat-sort .pill{flex:1 1 0;font-size:13.5px;padding:0}
  html body #category .cat-chips{display:flex;gap:8px;margin:0;overflow-x:auto;scrollbar-width:none}
  html body #category .cat-chips::-webkit-scrollbar{display:none}
  html body #category .cat-grid{grid-template-columns:repeat(3,1fr);gap:10px;padding:0 45px 96px 16px}
  html body #category .cat-grid .pc .pc-sub{display:none}
  html body #category .cat-grid .pi .pc-rate{position:absolute;right:5px;bottom:5px;padding:1px 5px;border-radius:4px;background:rgba(12,11,14,.7);font-size:11px;color:#f0edf5}
  html body #category .cat-grid .pc-title{font-size:12.5px;line-height:17px;margin-top:7px}
  html body #category .az-letter-ch{font-size:30px}
  html body #category .az-scrub{top:203px;bottom:auto;gap:0;padding:2px;background:none;border-radius:0;right:9px;justify-content:flex-start}
  html body #category .az-scrub .az{width:22px;height:22px;flex:0 0 22px;font-size:11px;display:flex;align-items:center;justify-content:center}
  html body #category .az-scrub .az.cur{width:22px;height:22px;font-size:11px}
  html body #category .az-bubble{right:48px;width:76px;height:76px;font-size:38px;font-weight:700;border-radius:50%}
}

/* ===== §9 Guide en onglet (planches 07/08) : le node modale devient panneau plein =====
   Le sous le bandeau (78px) ; décalage +62px assumé, géométrie relative = planche. */
#guide.guide-inline{
  position: fixed; inset: auto; top: 78px; left: 0; right: 0; bottom: 0;
  z-index: 20; /* sous la nav (40) ; padding-top: 0.8rem; animation: none; */
  height: calc(100vh - 78px);
}

/* §10 Accueil : planche 01 — Top 10 (mesure : h2 563→656, cartes 629→698,
   Ajouts récents 1086→1162 @1440) : +93 haut, −24 h2→rail, +7 bas. */
@media (min-width:769px){
  html body .top10-band{padding-top:104px;padding-bottom:107px}
  html body .top10-band .row-head{margin-bottom:-10px}
}

/* §11 Palette planche 11 : ancrée à gauche (80,48), panel 560. */
@media (min-width:769px){
  html body #cmdk{place-items:start start;padding:48px 0 0 80px}
}

/* §12 Palette mobile planche 12 : feuille haute (12,80 366) + head «Palette de commandes / Annuler». */
.cmdk-mhead{display:none}
@media (max-width:768px){
  html body #cmdk{place-items:start start;padding:80px 12px 0}
  html body .cmdk-panel{width:100%;max-width:366px;margin:0}
  .cmdk-mhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--glass-border)}
  .cmdk-mtitle{font-size:15px;font-weight:700}
  #cmdk-cancel{width:68px;height:44px}
}

/* §13 Connexion planche 03/04 : ligne « Pas encore de compte ? » alignée à gauche. */
@media (min-width:769px){
  html body .auth-switch{display:flex;align-items:center;justify-content:space-between;padding-right:40px;text-align:left}
  html body .auth-switch span{margin-left:0}
}
@media (max-width:768px){
  html body .auth-switch{display:flex;align-items:center;justify-content:space-between;padding-right:15px;text-align:left}
  html body .auth-switch span{margin-left:0}
}

/* §14 Accueil planche 01 : tickets « Nouveau » 24x78 verticaux sur les 2 premières cartes. */
html body .new-ticket{position:absolute;left:16px;top:16px;width:24px;height:78px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#bba7ff;color:#14101f;font:600 13px 'DM Mono',monospace;writing-mode:vertical-rl;letter-spacing:.04em;pointer-events:none;z-index:2}

/* §15 Lecteur planche 09 : pastilles icônes casque/CC, PiP hors planche. */
html body .player .pc-ibo{display:grid;place-items:center;padding:0}
html body #player-pip{display:none}
html body #player-audio.pc-ibo,html body #player-subs.pc-ibo{width:48px;height:48px;flex:0 0 48px;padding:0}

/* §16 Lecteur mobile planche 10 : rangée 1 espace 20px (gaps 43), icônes audio/cc 44. */
@media (max-width:768px){
  html body .player-controls .pc-row-play{padding:0 8px}
  html body #player-audio.pc-ibo,html body #player-subs.pc-ibo{width:44px;height:44px;flex:0 0 44px;padding:0}
  html body #pc-volume{display:none}
}

/* §17 Connexion planche 03 : le mur de tuiles = les couvertures réelles (TMDB),
   dégradé d'origine conservé en dessous (fallback), voile léger pour la lisibilité. */
.auth-wall i{background-image:linear-gradient(rgba(12,11,14,.36),rgba(12,11,14,.36)),var(--tile-img,none),linear-gradient(135deg,var(--g1,#2a2140),var(--g2,#17141f));background-size:cover;background-position:center;background-repeat:no-repeat}

/* §18 Bords des listes : fondu progressif droit façon template (calc(100% - 80px)) */
.rail{
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
}
#sec-search .sr-chips{mask-image:none;-webkit-mask-image:none}

/* Planche 21 : Header dédié Live sur Desktop */
@media (min-width: 769px) {
  body[data-tab="live"] #topbar .tb-bar { display: none !important; }
  body[data-tab="live"] #topbar #live-topbar { display: flex !important; border-radius: 28px; padding: 14px 18px 14px; }
  body[data-tab="live"] #content .live-hdr { display: none !important; }
}
@media (max-width: 768px) {
  #live-topbar { display: none !important; }
}
/* Symbole lecture « Reprendre » (planche 01) : bouton disque .ib en bas à droite */
.pc.pc-resume .pi-play{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;width:46px;height:46px;
  background:linear-gradient(145deg,#100e14,#1b1822);
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.78),inset -2px -2px 5px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.09);
  color:#cbbcff;position:absolute;right:14px;bottom:16px;z-index:2;
}
@media (max-width:768px){
  .pc.pc-resume .pi-play{width:44px;height:44px;right:12px;bottom:14px}
  /* Planche 02 : Reprendre pas de lien "Historique >" sur mobile */
  #resume-row { margin-bottom: 18px !important; }
  #resume-row .row-head { margin-bottom: 12px !important; }
  #resume-row .rail { padding: 0 !important; margin: 0 !important; }
  #resume-row .see-link{display:none!important}
  /* Planche 02 : Top 10 cartes de 112px et rang visible au-dessus de la nav basse */
  .top10-band { margin-top: 24px !important; padding: 24px 0 16px !important; }
  .pc-top10{width:112px!important}
  .top10-num{width:30px!important;height:30px!important;font-size:11px!important}
}
/* Badge « Nouveau » (planche 01) : ruban collé au bord gauche du poster. */
html body .new-ticket{left:0;height:auto;width:auto;padding:10px 5px;border-radius:0 8px 8px 0;background:linear-gradient(180deg,#bba8ff,#a78bfa);box-shadow:4px 6px 14px -4px rgba(167,139,250,.7);font-size:11px;font-weight:500;letter-spacing:.12em}

/* ================= Fiche Détail Planches 05 & 06 (100% template fidelity) ================= */

#detail {
  position: fixed;
  inset: 0;
  background: #0c0b0e !important;
  color: #f2f0ec;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 60;
}

/* Halos radiaux */
.detail-halos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 640px;
  background: radial-gradient(60% 90% at 22% 0%, hsl(265 56% 32% / 0.9), transparent 70%),
              radial-gradient(55% 80% at 100% 8%, hsl(215 52% 25% / 0.85), transparent 70%),
              radial-gradient(40% 60% at 60% 70%, hsl(330 48% 24% / 0.5), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .detail-halos {
    height: 440px;
    background: radial-gradient(70% 80% at 25% 0%, hsl(265 56% 32% / 0.9), transparent 70%),
                radial-gradient(60% 70% at 100% 20%, hsl(215 52% 25% / 0.8), transparent 70%);
  }
}

/* Vagues SVG */
.detail-waves {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 330px;
  height: 320px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.detail-waves svg.wv {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 320px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
  animation: drift 42s ease-in-out infinite alternate;
}
@media (max-width: 768px) {
  .detail-waves {
    top: 200px;
    height: 220px;
  }
  .detail-waves svg.wv {
    height: 220px;
  }
}

/* Texture Grain */
.detail-grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 256px 256px;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}

/* Boutons de navigation fiche détail */
.close-btn-desk {
  position: absolute !important;
  top: 20px !important;
  right: 24px !important;
  z-index: 7 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .close-btn-desk { display: none !important; }
}

.detail-mob-nav {
  display: none;
}
@media (max-width: 768px) {
  .detail-mob-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    z-index: 7;
    top: 16px;
    left: 16px;
    right: 16px;
  }
  .detail-mob-nav .ib {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Le Retour est fixed : sans ça le favori prend sa place à gauche. */
  .detail-mob-nav .detail-top-fav { margin-left: auto; }
}

/* Body & Poster */
#detail .detail-body {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 88px 40px 64px;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#detail .detail-head {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: stretch;
}
#detail .detail-poster {
  flex: 0 0 260px;
  align-self: flex-start;
  aspect-ratio: 2/3;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 18% 0%, hsl(265 58% 40% / 0.95), transparent 62%),
              radial-gradient(110% 80% at 100% 100%, hsl(313 52% 25%), transparent 65%), #17141c;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,0.9), 0 0 60px -20px rgba(167,139,250,0.4), inset 0 0 0 1px rgba(255,255,255,0.1);
}
#detail .detail-poster .poster, #detail .detail-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

@media (max-width: 768px) {
  #detail .detail-body {
    padding: 68px 16px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #detail .detail-head {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  #detail .detail-poster {
    flex: none;
    width: 160px;
    max-width: 160px;
    aspect-ratio: 2/3;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9), 0 0 50px -16px rgba(167,139,250,0.45), inset 0 0 0 1px rgba(255,255,255,0.1);
  }
  #detail .detail-poster .poster, #detail .detail-poster img {
    border-radius: 16px;
  }
}

/* Panneau verre (.detail-info) */
#detail .detail-info {
  flex: 1 1 480px;
  min-width: 0;
  box-sizing: border-box;
  padding: 32px 36px;
  border-radius: 28px;
  background: rgba(24,19,36,0.82) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
  backdrop-filter: blur(26px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
}
#detail .detail-info h1 {
  margin: 0;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #f2f0ec;
}
#detail .detail-meta {
  margin-top: 14px;
  color: #d8d4de;
  font-size: 15px;
}
#detail .plot {
  margin: 22px 0 0;
  max-width: 58ch;
  color: #e2dee8;
  font-size: 16px;
  line-height: 26px;
  text-wrap: pretty;
}
#detail .cast {
  margin-top: 14px;
  color: #b0abba;
  font-size: 14px;
  line-height: 22px;
}
#detail .cast-by {
  color: #8a8794;
}

#detail .detail-body::before {
  display: none !important;
}
#detail .detail-bg {
  display: none !important;
}

@media (min-width: 769px) {
  .mob-only { display: none !important; }
  .desk-only { display: flex !important; }
}

/* Note et chips */
.detail-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.detail-rating-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #cbbcff;
  flex: 0 0 44px;
}
.detail-rating-label {
  font-size: 11.5px;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b0abba;
}
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.detail-chips .chip {
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(242,240,236,0.3);
  background: rgba(12,11,14,0.35);
  color: #e6e1ee;
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* Actions: CTA + Disques Favori/Trailer/VLC */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
  align-items: flex-start;
  margin-top: 30px;
}
.detail-other-actions {
  display: flex;
  gap: 20px 24px;
  align-items: flex-start;
}
.detail-actions .act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.detail-actions .act .btn.fav,
.detail-actions .act .btn.trailer-btn,
.detail-actions .act .btn.vlc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.detail-actions .act .act-cap {
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b3aebf;
}

/* Mobile adjustments (Planche 06) */
@media (max-width: 768px) {
  .desk-only { display: none !important; }
  .mob-only { display: flex !important; }
  #detail {
    overflow-x: hidden !important;
  }
  #detail .detail-body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding: 68px 16px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #detail .detail-head {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0;
  }
  #detail .detail-info {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    /* Les enfants ont flex-basis:100% : en colonne + wrap ils partent en
       colonnes hors écran. En ligne, ils s'empilent en lignes pleine largeur. */
    flex: 0 0 auto;
    flex-direction: row;
    margin-top: 0;
    padding: 20px;
    border-radius: 24px;
  }
  #detail .detail-rating-row {
    margin-bottom: 14px;
    gap: 10px;
    order: 1;
    display: flex;
    align-items: center;
  }
  .detail-rating-num {
    width: 40px;
    height: 40px;
    font-size: 12.5px;
    flex: 0 0 40px;
  }
  .detail-rating-label {
    display: none !important;
  }
  .detail-chips {
    margin-top: 0;
    gap: 6px;
  }
  .detail-chips .chip {
    padding: 2px 7px;
  }
  #detail .detail-info h1 {
    font-size: 32px;
    line-height: 1.04;
    order: 2;
  }
  #detail .detail-meta {
    margin-top: 8px;
    font-size: 14px;
    order: 3;
  }
  .detail-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 18px;
    order: 4;
    gap: 16px;
    width: 100%;
  }
  .detail-actions .btn.primary.cta {
    width: 100%;
    height: 60px;
    padding: 0 22px 0 6px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .detail-other-actions {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-top: 0;
    width: 100%;
  }
  .detail-actions .act .btn.fav,
  .detail-actions .act .btn.trailer-btn,
  .detail-actions .act .btn.vlc {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }
  #detail .plot {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 24px;
    order: 5;
  }
  #detail .cast {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 20px;
    order: 6;
  }
}

/* Épisodes (Planches 05 & 06) */
.detail-ep-sec {
  width: 100%;
  margin-top: 64px;
}
/* Planche 05 : le sélecteur de saisons est dans la ligne « Épisodes », sans
   marges propres ; les lignes d'épisodes suivent directement le margin de 10px. */
.ep-sec-head .seasons { margin: 0; }
.episodes { margin-top: 0; }
@media (max-width: 768px) {
  .detail-ep-sec { margin-top: 24px !important; }
}
.seasons.gr {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 9999px;
  overflow-x: auto;
}
.seasons.gr .pill {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #bdb7c8;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}
.seasons.gr .pill.active {
  background: linear-gradient(180deg,#bba8ff,#a78bfa);
  color: #14101f;
  box-shadow: 0 6px 14px -4px rgba(167,139,250,0.65), inset 0 1px 0 rgba(255,255,255,0.45);
}
@media (max-width: 768px) {
  .seasons.gr .pill {
    flex: 1 1 0;
    padding: 0 4px;
    font-size: 13px;
  }
}
.episodes .ep {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  cursor: pointer;
  transition: background 150ms;
}
.episodes .ep:hover {
  background: rgba(255,255,255,0.04);
}
.episodes .ep-index {
  flex: 0 0 28px;
  font-size: 13px;
  color: #8a8794;
  text-align: center;
}
.episodes .ep-thumb {
  position: relative;
  flex: 0 0 192px;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  background: #17141c;
}
.episodes .ep-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.episodes .ep-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(255,255,255,0.16);
}
.episodes .ep-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(167,139,250,0), #a78bfa 88%);
  box-shadow: 0 0 12px rgba(167,139,250,0.7);
}
.episodes .ep-info {
  flex: 1;
  min-width: 0;
}
.episodes .ep-t {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
}
.episodes .ep-plot {
  margin-top: 2px;
  color: #b0abba;
  font-size: 14px;
  line-height: 20px;
  max-width: 60ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.episodes .ep-resume {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbbcff;
}
.episodes .ep-meta {
  flex: 0 0 auto;
  color: #b0abba;
  font-size: 12.5px;
}
@media (max-width: 768px) {
  .episodes .ep {
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 14px;
  }
  .episodes .ep-index { display: none; }
  .episodes .ep-thumb {
    flex: 0 0 118px;
    border-radius: 10px;
  }
  .episodes .ep-t {
    font-size: 14.5px;
    line-height: 20px;
  }
  .episodes .ep-meta {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

/* ================= Guide TV Planches 07 & 08 ================= */
#guide {
  position: fixed;
  inset: 0;
  background: #0c0b0e !important;
  color: #f2f0ec;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  overflow: hidden;
  /* z-index : laissé à detail.css (§ ordre overlays) pour que #epg-prog (58) passe au-dessus */
}
.guide-halos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.guide-halos::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -180px;
  width: 760px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(167,139,250,0.30), transparent);
  filter: blur(30px);
}
.guide-halos::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 40px;
  width: 640px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(86,120,255,0.18), transparent);
  filter: blur(30px);
}
.guide-waves {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 210px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.guide-waves svg.wv {
  position: absolute;
  left: -5%;
  width: 110%;
  height: 210px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 72%, transparent);
}
.guide-grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 256px 256px;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 0;
}
#guide .guide-head {
  position: relative;
  z-index: 3;
  max-width: 1480px;
  margin: 14px auto 0;
  padding: 14px 18px 16px;
  border-radius: 28px;
  background: rgba(24,19,36,0.82) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
  backdrop-filter: blur(26px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-sizing: border-box;
}
/* Eviter collision de texte dans les blocs courts EPG */
.g-prog {
  min-width: 0 !important;
}
.g-prog-t, .g-prog-h {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ================= Live Mobile Planche 22 ================= */
@media (max-width: 768px) {
  /* Ordre de la planche : pastilles de catégories, héros, liste des chaînes.
     display:contents fait remonter .live-side/.live-main comme items du conteneur d'onglet. */
  body[data-tab="live"] #content > .tab-enter:has(> .live-hero) {
    display: flex !important;
    flex-direction: column;
  }
  body[data-tab="live"] .live-wrap {
    display: contents !important;
  }
  body[data-tab="live"] .live-hero { order: 2; }
  body[data-tab="live"] .live-main { order: 3; }
  /* Les pastilles de genres VOD font doublon avec les catégories live. */
  body[data-tab="live"] #genre-row { display: none !important; }
  body[data-tab="live"] .live-side {
    display: block !important;
    order: 1;
    width: 100% !important; /* .live-wrap passe en contents ; sans ça la nav prend max-content et déborde (879px mesuré). */
    position: static !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 15px 0 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent) !important;
    mask-image: linear-gradient(90deg, #000 88%, transparent) !important;
  }
  body[data-tab="live"] .live-side::-webkit-scrollbar {
    display: none !important;
  }
  body[data-tab="live"] .live-side-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  body[data-tab="live"] .live-side-list li {
    flex: 0 0 auto !important;
  }
  body[data-tab="live"] .live-side .fx {
    width: auto !important;
    white-space: nowrap !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    background: rgba(255,255,255,0.04) !important;
    color: #d8d4de !important;
    box-shadow: none !important;
  }
  body[data-tab="live"] .live-side .fx.on {
    border: 0 !important;
    background: linear-gradient(180deg, #bba8ff, #a78bfa) !important;
    color: #14101f !important;
    box-shadow: 0 6px 14px -4px rgba(167,139,250,0.65), inset 0 1px 0 rgba(255,255,255,0.45) !important;
  }
  body[data-tab="live"] .live-side .fx.on .live-count {
    color: #14101f !important;
  }
}


/* §19 Live (pl 21) : hauteur uniforme des cartes chaîne (template 226px) —
   supprime l'inégalité 192/228 causée par .lc-prog:empty{display:none};
   favori calé sur le template : pastille 36×36 sans dégradé blanc.
   Desktop uniquement : en mobile la carte est une ligne (planche 22). */
@media (min-width: 769px) {
  .live-card{display:flex;flex-direction:column;align-items:stretch;height:226px}
  .live-card.playing .live-pi{box-shadow:0 0 0 2px #a78bfa,0 18px 36px -14px rgba(167,139,250,.55)}
}
.live-card .lc-prog:empty,.live-card .lc-time:empty{display:block;visibility:hidden;height:0;margin:0}
/* Favori carte chaîne (template 21) : pastille .ib 44×44 sombre, pas le fond verre */
.live-card .live-fav{width:44px !important;height:44px !important;border-radius:50%;padding:0;border:0;
  background:linear-gradient(145deg,#100e14,#1b1822);
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.78),inset -2px -2px 5px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.09);
  color:#f2f0ec}
.live-card .live-fav svg{width:17px !important;height:17px !important}
.live-card .live-fav.on{color:#f87171}

/* §20 Détail mobile (pl 06) : favori de la nav top = pastille .ib 44×44 sombre, cœur 19. */
.detail-top-fav.ib{width:44px !important;height:44px !important;border:0;
  background:linear-gradient(145deg,#100e14,#1b1822);
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.78),inset -2px -2px 5px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.09);
  color:#f2f0ec}
.detail-top-fav.ib svg{width:19px !important;height:19px !important}
.detail-top-fav.ib.on{color:#f87171}

/* §21 Détail (pl 05/06) : bouton favori des actions = pastille .ib 56×56
   (fond sombre neumorphique du template), cœur 21×21. */
.detail-actions .btn.fav,.detail-actions .btn.fav.on{width:56px;height:56px !important;padding:0;border:0;
  background:linear-gradient(145deg,#100e14,#1b1822);
  box-shadow:inset 3px 3px 7px rgba(0,0,0,.78),inset -2px -2px 5px rgba(255,255,255,.05),0 1px 0 rgba(255,255,255,.09);
  color:#f2f0ec}
.detail-actions .btn.fav svg,.detail-actions .btn.fav.on svg{width:21px !important;height:21px !important}
.detail-actions .btn.fav.on{color:#f87171}

/* §22 Lecteur desktop (planche 09) : header 48, contrôles 72/32/28, piste 6,
   temps courant à gauche / durée à droite (le JS remplit #vod-duration). */
@media (min-width: 769px) {
  .player-top { padding: 24px 32px 48px; }
  #player-back { width: 48px; height: 48px; }
  #player-stats { min-height: 48px; }
  .player-controls {
    padding: 72px 32px 28px;
    gap: 18px;
    background: linear-gradient(0deg, rgba(6,5,8,.94), transparent);
  }
  .player-controls .pc-skip {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
  }
  .pc-volume .pc-btn { width: 48px; min-height: 48px; }
  .pc-seek { gap: 16px; }
  .pc-time { min-width: 64px; font-size: 14px; color: #bdb7c8; }
  #vod-duration { text-align: right; }
  .pc-seek-wrap { min-height: 0; height: 6px; }
  .pc-seek-bar::after { width: 18px; height: 18px; right: -9px; }
}