/* Kitendo — habillage porté des maquettes validées
   (glass riche, mesh de halos marque adouci, barre sombre·faisceau).
   Source : kitendo-accueil-general.html, kitendo-animation.html, kitendo-anim-login.html */

:root{
  /* Verre CLAIR. Le fond est une table claire, donc tout le texte est de l'encre
     et les accents sont des versions FONCÉES des anciennes couleurs pâles :
     un or pâle lisible sur vert sombre devient illisible sur du blanc. */
  /* L'accent est le rouge du logo Evenprod, relevé dans le fichier :
     #982828 est la teinte la plus présente du « ep ». Tel quel il est trop
     sombre pour ressortir d'un verre sombre, donc les aplats montent jusqu'à
     #D94A42 et redescendent sur la couleur exacte du logo. */
  --rouge:#982828; --rouge-vif:#D94A42; --rouge-clair:#F09289;
  --cyprus:#D94A42; --deep:#982828; --sand:rgba(255,255,255,.12); --gold:#F09289;
  --gold-soft:#F09289; --gold-vif:#D94A42; --ink:#FFFFFF;
  --glass:rgba(255,255,255,.12); --glass2:rgba(255,255,255,.07);
  --txt:#F4F6F8; --txt2:#AEB5BD; --ok:#6FE0A8; --no:#FFB4A2; --blue:#9EC9FF; --violet:#D3B8FF;
  --encre-forte:#FFFFFF;
  --barre:64px;
  /* Verre clair. Trois règles, inverses de celles du verre sombre :
     1. le voile blanc est FORT (.72 -> .46), c'est lui qui remonte le fond sous le texte ;
     2. le reflet du haut reste un DÉGRADÉ, jamais un inset de 1px qui se lit comme un liseré ;
     3. aucune bordure foncée : c'est l'ombre qui détache la carte de la table. */
  /* Verre sombre sur photo. Le voile des blocs reste FAIBLE et blanc : c'est le
     panneau englobant (.view) qui porte l'assombrissement, pas chaque carte.
     Mesuré sur la photo : au point le plus brûlant, le blanc tient 4,3 pour un. */
  --verre:rgba(255,255,255,.07);
  --flou:blur(7px) saturate(1.25);
  /* Sur clair, ce n'est plus la bordure qui détache la carte, c'est l'ombre :
     une par objet, en trois couches, du contact à la pénombre portée. */
  --relief:0 10px 24px -14px rgba(0,0,0,.70);
  --stroke:rgba(255,255,255,.11);
  --arete:rgba(255,255,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior-y:contain}
body{margin:0;font-family:"Inter",system-ui,sans-serif;font-size:16px;color:var(--txt);background:#15181C;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
/* Fond : mesh de halos en couleurs de MARQUE (2 verts + 2 ors). Halos resserrés et
   assez marqués : sans contraste derrière, le flou du verre n'a rien à flouter et
   il ne reste que le trait du reflet, qui se lit comme un liseré. */
/* La photo, nette, et par-dessus un voile léger. Le flou ne vient PAS de l'image :
   il vient du verre, et c'est l'écart entre les deux qui rend le verre visible. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url("img/fond-bureau.jpg") 50% 42%/cover}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:rgba(8,10,13,.26)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:12px}
[hidden]{display:none !important}


/* Reflet du haut : un dégradé qui s'éteint, jamais un trait de 1px. C'est lui qui donne
   l'arête de la surface ; un inset dur se lit comme un liseré dès que le fond est plat. */
.card,.item,.tile,.set,.serie,.cc,.compose,.choix,.sq{position:relative;isolation:isolate}
.card::before,.item::before,.tile::before,.set::before,.serie::before,.cc::before,.compose::before,.choix::before{
  content:"";position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:0;border-radius:inherit;
  height:min(46%, 54px);   /* borné : sur une longue liste, un pourcentage ferait un grand lavis clair */
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05) 55%, transparent)}
.card>*,.item>*,.tile>*,.set>*,.serie>*,.cc>*,.compose>*,.choix>*{position:relative;z-index:1}

/* ---------- Coquille ---------- */
.app{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 10px) 13px calc(var(--barre) + env(safe-area-inset-bottom) + 20px);will-change:transform}
body.accueil .app{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
.view{max-width:520px;margin:0 auto;border-radius:28px;padding:14px 13px 16px;
  background:rgba(12,15,19,.38);border:1px solid var(--arete);
  backdrop-filter:blur(17px) saturate(1.35);-webkit-backdrop-filter:blur(17px) saturate(1.35);
  box-shadow:0 22px 48px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.09)}
/* L'accueil n'a pas de panneau : ses quatre tuiles posent directement sur la photo. */
body.accueil .view{background:none;border:0;box-shadow:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;padding:0}

/* Carte en verre : voile faible + flou, le reflet du haut vient du ::before partagé */
.card{position:relative;background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:16px;padding:12px;margin-bottom:12px;
  
  box-shadow:var(--relief)}
.vide{text-align:center;color:var(--txt2);font-size:.96rem;padding:26px 8px}
.avenir{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold-soft);border:1px dashed rgba(201,162,75,.5);border-radius:999px;padding:4px 10px}

/* ---------- Accueil « maison » ---------- */
.hero{text-align:center;padding:26px 0 20px}
.mark{width:66px;height:66px;margin:0 auto 14px;border-radius:19px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#2F3740,#14181D);border:1px solid rgba(201,162,75,.5);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.60), inset 0 0 0 1px rgba(255,255,255,.06)}
.mark span{font-family:"Archivo",sans-serif;font-weight:900;font-size:2rem;color:#E8C77A}
.word{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:.02em;line-height:1;margin:0;
  text-shadow:0 2px 10px rgba(0,0,0,.9)}
.word b{color:var(--gold)}
.tagline{font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--txt2);margin-top:8px}

/* Grille : 4 boutons en verre. Le logo (Séries, Médias) ou l'icône (Animation, Réglages) EST le bouton. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:6px}
.sq{position:relative;aspect-ratio:1/1;border-radius:20px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--arete);background:rgba(10,13,17,.62);overflow:hidden;color:var(--rouge-clair);text-decoration:none;
  
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:var(--relief);transition:transform .12s}
.sq:active{transform:scale(.97)}
.sq .lg{width:72%;height:auto;max-height:72%;object-fit:contain;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.60))}
.sq .ic{width:52px;height:52px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.60))}
.sq .nm{font-family:"Archivo",sans-serif;font-weight:800;font-size:1rem;line-height:1;color:var(--txt)}
.pill{position:absolute;top:12px;right:12px;z-index:1;font-size:.74rem;font-weight:700;padding:4px 9px;border-radius:999px;
  background:var(--rouge);color:#fff}
.foot{text-align:center;font-size:.78rem;color:var(--txt2);margin-top:20px;opacity:.8}

/* ---------- En-tête de section (titre, et menu ⋯ à droite quand l'écran en a un) ---------- */
.sec h1{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.35rem;margin:12px 0 2px}
.sec .sub{font-size:.88rem;color:var(--txt2);margin:0 0 14px}

/* ---------- Barre du bas « sombre · faisceau » ---------- */
.navc{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-around;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));overflow:hidden;
  background:rgba(10,13,17,.46);border-top:1px solid var(--arete);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
body.accueil .navc{display:none}
.navc .ind{position:absolute;top:0;bottom:0;left:0;width:64px;z-index:0;pointer-events:none;border-radius:16px;
  background:none;
  transform:translateX(calc(var(--nx,40px) - 32px));transition:transform .42s cubic-bezier(.34,1.25,.45,1)}
.navc .ind::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:26px;height:4px;border-radius:99px;
  background:var(--rouge-vif);box-shadow:0 0 8px 2px rgba(217,74,66,.45)}
.navc .t{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;
  color:var(--txt2);background:none;border:0;padding:0;cursor:pointer;transition:color .25s}
.navc .t svg{width:20px;height:20px;display:block}
.navc .t.on{color:var(--gold-soft)}
.navc .c{position:relative;z-index:2;flex:0 0 auto;background:none;border:0;padding:2px;cursor:pointer}
.navc .c .d{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--rouge);
  box-shadow:0 6px 14px -5px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.28), 0 0 18px 2px rgba(240,220,150,.4)}
.navc .c .d svg{width:16px;height:16px;color:var(--ink);display:block}
.navc .c:active .d{transform:scale(.94)}

/* ---------- Glissé vers le bas (rafraîchir) ---------- */
.ptr{height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.ptr .spin{width:22px;height:22px;margin-bottom:12px;border-radius:50%;border:2.4px solid rgba(217,74,66,.30);border-top-color:var(--gold-soft);opacity:.55;transition:opacity .2s}
.ptr.ready .spin{opacity:1}
.ptr.load .spin{animation:ptrspin .7s linear infinite;opacity:1}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* ---------- Connexion (déverrouillage) ---------- */
.login-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px 18px;
  background:rgba(8,10,13,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.login{width:100%;max-width:400px;position:relative;border-radius:24px;padding:28px 22px 26px;
  background:rgba(255,255,255,.10);border:1px solid var(--arete);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:var(--relief), inset 0 1px 0 rgba(255,255,255,.18)}
.login .mark{width:64px;height:64px;border-radius:18px}
.login .mark span{font-size:1.8rem}
.login .word{font-size:1.35rem;text-align:center;margin:0 0 24px}
.login label{display:block;font-size:.80rem;color:var(--txt2);margin:0 0 5px;font-weight:600}
.field{margin-bottom:14px}
.inp{display:flex;align-items:center;gap:8px;border-radius:13px;padding:0 12px;height:48px;
  background:rgba(0,0,0,.28);border:1px solid var(--arete);transition:border-color .25s,box-shadow .25s}
.inp:focus-within{border-color:rgba(201,162,75,.6);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.inp.ok{border-color:rgba(95,211,155,.6)}
.inp.bad{border-color:rgba(255,150,120,.7)}
.inp.shake{animation:shake .4s}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}
.inp .ic{color:var(--txt2);flex:none;width:16px;height:16px}
.inp input{flex:1;min-width:0;min-height:44px;background:none;border:0;outline:none;color:#fff;font-size:1rem;font-family:inherit}
.inp input::placeholder{color:var(--txt2)}
.inp .eye{color:var(--txt2);font-size:.86rem;cursor:pointer;flex:none;user-select:none;background:none;border:0;padding:12px 6px;min-height:44px}
.inp .chk{width:20px;height:20px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:#5fd39b;color:#06301f;font-size:.86rem;font-weight:800;opacity:0;transform:scale(.4);transition:opacity .25s,transform .3s cubic-bezier(.34,1.6,.5,1)}
.inp.ok .chk{opacity:1;transform:scale(1)}
.err{display:none;align-items:center;gap:8px;background:rgba(255,120,90,.15);border:1px solid rgba(255,150,120,.45);
  color:#ffcaba;border-radius:11px;padding:9px 11px;font-size:.86rem;margin:0 0 12px}
.err.show{display:flex}
.hintline{font-size:.78rem;color:var(--txt2);text-align:center;margin:2px 0 14px;min-height:14px;transition:color .25s}
.hintline.ready{color:var(--gold-soft)}
.btn-login{position:relative;width:100%;height:52px;border:0;border-radius:15px;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.06rem;
  cursor:not-allowed;overflow:hidden;background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);transition:background .35s,color .35s,box-shadow .35s,transform .1s}
.btn-login.ready{cursor:pointer;color:var(--ink);background:var(--rouge);animation:glow 1.8s ease-in-out infinite}
.btn-login.ready:active{transform:scale(.98)}
@keyframes glow{0%,100%{box-shadow:0 12px 24px -8px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 0 rgba(240,220,150,.55)}
  50%{box-shadow:0 12px 26px -8px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.28), 0 0 14px 3px rgba(240,220,150,.4)}}
.btn-login.load,.btn-login.done{animation:none;cursor:default}
.btn-login.done{background:linear-gradient(160deg,#6fe0a8,#2f9f6a);color:#06301f}
.btn-login .lbl{display:inline-flex;align-items:center;gap:9px}
.spin-btn{width:18px;height:18px;border-radius:50%;border:2.4px solid rgba(58,44,0,.3);border-top-color:var(--ink);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--barre) + env(safe-area-inset-bottom) + 18px);transform:translate(-50%,20px);z-index:60;
  background:rgba(8,10,13,.92);color:#F4F6F8;border:1px solid var(--arete);border-radius:999px;padding:9px 16px;font-size:.92rem;font-weight:600;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* Bandeau « nouvelle version ». Au-dessus de la barre d'onglets, en or pour se
   distinguer d'un toast d'erreur : ce n'est pas un incident, c'est une offre. */
.maj{position:fixed;left:12px;right:12px;bottom:calc(var(--barre) + env(safe-area-inset-bottom) + 12px);
  z-index:70;display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:rgba(14,17,22,.94);border:1px solid var(--rouge-vif);border-radius:14px;padding:11px 12px 11px 16px;
  font-size:.94rem;font-weight:600;color:var(--txt);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.60)}
.maj button{flex:none;min-height:38px;padding:0 16px;border-radius:10px;border:0;cursor:pointer;
  background:var(--gold-vif);color:#FFFFFF;font-family:inherit;font-size:.92rem;font-weight:800}
.maj button:disabled{opacity:.55}
body.accueil .toast{bottom:calc(env(safe-area-inset-bottom) + 24px)}

/* =================== ANIMATION (porté de kitendo-animation.html) =================== */
.h-ep{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.35rem;margin:6px 0 2px}
.h-sub{font-size:.88rem;color:var(--txt2);margin-bottom:12px}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);font-weight:700;font-size:.94rem;text-decoration:none;padding:6px 0;margin-top:2px}
.lbl{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2);margin:14px 0 8px;font-weight:700}
.lbl .lbl-note{opacity:.7;text-transform:none;letter-spacing:0;font-weight:400}
.note{font-size:.86rem;color:var(--txt2);line-height:1.5;margin:0 0 12px}
.note .avenir{margin-right:6px;vertical-align:middle}

/* sous-onglets */
.seg{display:flex;gap:6px;background:var(--glass2);border:1px solid var(--stroke);border-radius:11px;padding:3px;margin-bottom:14px}
.seg button{flex:1;text-align:center;font-size:.76rem;font-weight:700;padding:9px 2px;min-height:44px;border-radius:8px;white-space:nowrap;color:var(--txt2);background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
@media (max-width:360px){.seg button{font-size:.75rem;letter-spacing:-.01em}}
.seg button.on{background:var(--rouge);color:#fff;
  box-shadow:0 6px 14px -7px rgba(152,40,40,.95), inset 0 1px 0 rgba(255,255,255,.26)}

/* Sélecteurs du palmarès « Ce qui se dit » : plusieurs lignes plutôt qu'un
   défilement horizontal, et des cibles de 44 px (la barre .seg d'origine n'en
   fait que 38). Six réseaux ne tiennent pas sur une ligne à 375 px. */
.seg.haut{flex-wrap:wrap}
.seg.haut button{flex:1 1 30%;min-height:44px;padding:9px 6px}
.seg button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:1px}
.lbl.sous{margin:10px 0 6px;font-size:.72rem}
.vide.petit{padding:10px 8px;font-size:.88rem}

/* file à valider */
.barre-file{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 12px}
.barre-file span{font-size:.80rem;color:var(--txt2)}
.tout{font-size:.82rem;font-weight:700;color:var(--gold-soft);background:none;border:1px solid rgba(201,162,75,.4);border-radius:999px;padding:7px 12px;min-height:32px;cursor:pointer;position:relative}
.tout::before{content:"";position:absolute;inset:-6px}
.tout.arme{background:rgba(201,162,75,.18);border-color:var(--gold-soft)}
.tout:disabled{opacity:.5;cursor:default}

/* contenu à valider */
.item{position:relative;background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:16px;padding:12px;margin-bottom:12px;
  
  box-shadow:var(--relief)}
.type{font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;flex:none}
.type.ep{background:rgba(201,162,75,.2);color:var(--gold-soft)}
.type.ex{background:rgba(120,220,170,.18);color:var(--ok)}
.type.vi{background:rgba(158,201,255,.16);color:var(--blue)}
.type.qu{background:rgba(211,184,255,.16);color:var(--violet)}
.item .body{display:flex;gap:10px}
.thumb{width:74px;height:74px;border-radius:11px;flex:none;overflow:hidden;background:linear-gradient(150deg,#2F3740,#151A1F);border:1px solid var(--stroke)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cap-t{flex:1;min-width:0}
.capedit{position:relative;background:rgba(0,0,0,.28);border:1px solid rgba(217,74,66,.40);border-radius:10px;padding:8px 9px}
.capedit .zone{display:block;width:100%;min-height:58px;background:none;border:0;outline:none;resize:none;color:var(--txt);font:inherit;font-size:.86rem;line-height:1.45;padding:0}
.capedit:focus-within{border-color:var(--gold-soft);box-shadow:0 0 0 3px rgba(201,162,75,.15)}
.dest{display:block;width:100%;text-align:left;background:none;border:0;padding:12px 0 8px;min-height:44px;font-size:.78rem;color:var(--txt2);cursor:pointer;line-height:1.5}
.dest b{color:#E7EBEF;font-weight:600}
.dest b.no{color:var(--no)}
#cqsd-dest{padding:12px 0 2px}
.acts{display:flex;gap:8px;margin-top:11px}
.btn{flex:1;text-align:center;font-size:.88rem;font-weight:700;padding:10px 9px;min-height:44px;border-radius:11px;border:0;cursor:pointer;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.pub{background:var(--rouge);color:#fff;
  box-shadow:0 11px 22px -12px rgba(152,40,40,.95), inset 0 1px 0 rgba(255,255,255,.28)}
.btn.gh{background:rgba(255,255,255,.08);border:1px solid var(--arete);color:var(--txt)}
.btn.rej{background:transparent;border:1px solid rgba(255,180,162,.4);color:var(--no);flex:0 0 auto;padding:10px 13px}
.btn.big{width:100%;margin-top:6px;font-family:"Archivo",sans-serif;font-size:1.0rem;min-height:50px;
  background:var(--rouge);color:var(--ink);box-shadow:0 12px 22px -8px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.55)}

/* historique */
.row{display:flex;align-items:center;gap:10px;background:var(--glass2);border:1px solid var(--stroke);border-radius:12px;padding:10px 11px;margin-bottom:8px}
.row .info{flex:1;min-width:0}
.row .info b{display:block;font-size:.88rem;color:#fff;font-weight:600;overflow-wrap:anywhere}
.row .info span{font-size:.78rem;color:var(--txt2)}
/* Une rangée qui porte trois niveaux — l'émission, le titre du numéro, les
   chiffres — doit les séparer, sinon tout se lit comme une seule phrase. */
.row .info .sujet{display:block;margin-top:2px;color:#fff;opacity:.88}
.row .info .chiffres{display:block;margin-top:3px;opacity:.7}
.stat{font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;flex:none;background:var(--glass);color:var(--txt2)}
.stat.publie{background:rgba(120,220,170,.18);color:var(--ok)}
.stat.rejete{background:rgba(255,180,162,.18);color:var(--no)}
.stat.a_valider{background:rgba(201,162,75,.2);color:var(--gold-soft)}

/* concours */
.cc{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:16px;padding:13px;margin-bottom:12px;cursor:pointer;
  box-shadow:var(--relief)}
div.cc{cursor:default}
.cc .top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cc h4{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;margin:0;flex:1;min-width:0}
.cc .etat{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-soft);background:rgba(201,162,75,.2);padding:3px 8px;border-radius:999px;flex:none}
.cc .meta{font-size:.82rem;color:var(--txt2);line-height:1.6}
.cc .meta b{color:#fff}
.cmt{display:flex;gap:8px;align-items:flex-start;background:var(--glass2);border:1px solid var(--stroke);border-radius:11px;padding:9px 10px;margin-bottom:7px}
.net,.src{font-size:.75rem;font-weight:800;padding:2px 6px;border-radius:6px;white-space:nowrap;flex:none;display:inline-block}
.net.yt,.src.yt{background:rgba(255,120,120,.18);color:#ffb3b3}
.net.fb,.src.fb{background:rgba(120,160,255,.18);color:var(--blue)}
.net.ig,.src.ig{background:rgba(211,184,255,.18);color:var(--violet)}
.net.au,.src.au{background:var(--glass);color:var(--txt2)}
.cmt .tx{font-size:.82rem;line-height:1.4;overflow-wrap:anywhere}
.cmt .tx span{color:var(--txt2);font-size:.74rem}
.add{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;min-height:46px;border-radius:13px;margin-top:4px;cursor:pointer;text-decoration:none;
  border:1px dashed rgba(201,162,75,.5);color:var(--gold-soft);font-weight:700;font-size:.90rem;background:none;width:100%;transition:transform .12s}
.add:active{transform:scale(.985)}

/* =================== MÉDIAS (porté de kitendo-media-accueil.html) =================== */
.search{display:flex;align-items:center;gap:8px;background:var(--glass2);border:1px solid var(--stroke);border-radius:12px;padding:0 12px;height:46px;margin-bottom:14px;
  }
.search .mag{width:13px;height:13px;border:1.6px solid var(--txt2);border-radius:50%;position:relative;flex:none}
.search .mag::after{content:"";position:absolute;width:5px;height:1.6px;background:var(--txt2);transform:rotate(45deg);right:-3px;bottom:0}
.search input{flex:1;min-width:0;height:44px;background:none;border:0;outline:none;color:var(--txt);font:inherit;font-size:.96rem}
.search input::placeholder{color:var(--txt2)}
.search:focus-within{border-color:rgba(201,162,75,.6)}

.serie{display:flex;align-items:center;gap:12px;background:var(--verre);border:1px solid var(--stroke);border-radius:15px;padding:11px 12px;margin-bottom:10px;
  color:inherit;text-decoration:none;min-height:70px;
  
  box-shadow:var(--relief);transition:transform .12s}
.serie:active{transform:scale(.985)}
/* Les logos d'émission sont horizontaux et de proportions très variées :
   une même boîte en bandeau, sans plaque ni bordure, pour qu'ils pèsent tous pareil.
   Le logo porte le nom, donc il prend toute la largeur utile de la ligne. */
.serie .aff{flex:1;min-width:0;height:54px;display:flex;align-items:center;justify-content:flex-start}
.serie .aff img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:left center;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.60))}
.serie .aff .ini{font-family:"Archivo",sans-serif;font-weight:800;font-size:1rem;color:#fff;overflow-wrap:anywhere}
.serie .chev{flex:none}
.bdg{font-size:.75rem;font-weight:700;padding:3px 7px;border-radius:999px;white-space:nowrap;display:inline-block;flex:none}
.bdg.live{background:rgba(120,220,170,.18);color:var(--ok)}
.bdg.fin{background:rgba(255,255,255,.10);color:var(--txt2)}
.bdg.pause{background:rgba(201,162,75,.2);color:var(--gold-soft)}
.bdg.warn{background:rgba(255,180,162,.18);color:var(--no)}
.bdg.gold{background:rgba(201,162,75,.16);color:var(--gold-soft);margin-left:6px}
.bdg .par{opacity:.7;font-weight:600}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Flèche à gauche, logo centré, et un vide de même largeur à droite : sans lui
   le logo serait centré sur ce qui reste, donc décalé. Tout est aligné au milieu
   verticalement, la flèche comprise. */
.ep-tete{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
.ep-tete .retour{flex:none;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;color:var(--gold);text-decoration:none;border-radius:12px}
.ep-tete .retour svg{width:22px;height:22px}
.ep-tete .ep-eq{flex:none;width:44px}
.ep-logo{flex:1;min-width:0;display:flex;align-items:center;justify-content:center}
.aff-gd{max-width:100%;max-height:120px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.60))}
.reseaux{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.rs{font-size:.78rem;color:var(--txt2);background:var(--glass2);border:1px solid var(--stroke);border-radius:999px;padding:4px 9px}
.rs b{color:#E7EBEF;font-weight:600}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
/* Une tuile seule sur sa ligne laissait un trou à droite, et la grille se lisait
   comme un L. En nombre impair, la dernière prend toute la largeur. */
.tiles .tile:last-child:nth-child(odd){grid-column:1 / -1}
.tile{background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:14px;padding:11px 12px;
  
  box-shadow:var(--relief)}
.tile .v{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.25rem;line-height:1;font-variant-numeric:tabular-nums}
.tile .t{font-size:.80rem;color:var(--txt2);margin-top:5px;line-height:1.3}
.tile.vide-t .v{color:var(--txt2);opacity:.5}
.tile .t2{color:var(--txt2);opacity:.75;font-size:.75rem}

.now{display:flex;align-items:center;gap:11px;background:rgba(201,162,75,.1);border:1px solid rgba(201,162,75,.4);border-radius:14px;padding:11px 12px;margin-bottom:8px;
  color:inherit;text-decoration:none;min-height:58px}
.now .th{width:52px;height:34px;border-radius:8px;flex:none;overflow:hidden;background:linear-gradient(150deg,#2F3740,#151A1F);border:1px solid var(--stroke)}
.now .th img{width:100%;height:100%;object-fit:cover;display:block}
.now .info{flex:1;min-width:0}
.now .info b{font-size:.92rem;color:#fff;display:block;overflow-wrap:anywhere}
.now .info span{font-size:.80rem;color:var(--txt2)}

/* =================== RÉGLAGES (porté de kitendo-reglages-general.html) =================== */
.grp{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2);font-weight:700;margin:16px 0 7px}
.set{background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:14px;overflow:hidden;
  
  box-shadow:var(--relief)}
.srow{display:flex;align-items:center;gap:10px;padding:12px 13px;min-height:48px;border-bottom:1px solid rgba(255,255,255,.09);color:inherit;text-decoration:none}
.srow:last-child{border-bottom:0}
a.srow:active{background:rgba(255,255,255,.07)}
.srow .k{font-size:.90rem;color:#fff}
.srow .sub{font-size:.78rem;color:var(--txt2);display:block;margin-top:2px}
.srow .v{margin-left:auto;font-size:.86rem;color:var(--txt2);text-align:right;display:flex;align-items:center;gap:7px;white-space:nowrap}
.chev{color:var(--txt2);font-size:1rem}
.mono{font-variant-numeric:tabular-nums;color:var(--txt2)}
.badge{font-size:.75rem;font-weight:700;padding:3px 8px;border-radius:999px}
.badge.ok{background:rgba(120,220,170,.18);color:var(--ok)}
.badge.no{background:rgba(255,180,162,.18);color:var(--no)}
.link{color:var(--gold);font-weight:700;background:none;border:0;padding:8px 2px;min-height:44px;cursor:pointer;font-size:.86rem}
.link:disabled{opacity:.5;cursor:default}
.sub{font-size:.78rem;color:var(--txt2)}

/* formulaire (style des champs de connexion) */
.champ{margin-bottom:12px}
.champ label{display:block;font-size:.80rem;color:var(--txt2);margin:0 0 5px;font-weight:600}
.champ .inp{height:46px;cursor:text}
.champ .aide{font-size:.78rem;color:var(--txt2);line-height:1.45;margin:5px 2px 0}
/* Champs date : palette sombre pour que l'icône du calendrier reste visible */
.inp input[type=date]{color-scheme:dark;cursor:pointer}
.inp input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);opacity:.75;cursor:pointer}
.inp select{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font-size:1rem;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer}
/* Menu déroulant : chevron pour qu'on voie tout de suite que ça s'ouvre */
.inp.deroulant{position:relative;padding-right:34px;cursor:pointer}
.inp.deroulant::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;pointer-events:none;
  border-right:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft);transform:rotate(45deg);opacity:.9}
.inp select option{color:#1B1E22}
.picks{display:flex;flex-wrap:wrap;gap:7px}
.pick{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;padding:8px 12px;min-height:44px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--arete);color:var(--txt2);transition:border-color .2s,background .2s}
.pick.on{border-color:rgba(201,162,75,.55);background:rgba(201,162,75,.12);color:#fff}
.pick .k{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;justify-content:center;font-size:.74rem;color:#F4F1EB}
.pick.on .k{background:var(--rouge-vif);border-color:var(--rouge-vif)}

/* Sélecteur de programme (Ce qui se dit) */
.choix{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--verre);border:1px solid var(--stroke);border-radius:14px;padding:12px 13px;min-height:52px;
  box-shadow:var(--relief)}
.choix:active{transform:scale(.99)}
.choix .marque{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-soft);
  background:rgba(201,162,75,.18);border-radius:999px;padding:3px 8px;flex:none}
.choix b{font-size:.96rem;color:#fff;flex:1;min-width:0;overflow-wrap:anywhere}
.choix .chev{flex:none}
/* Boîte en bandeau pour les logos d'émission (horizontaux), pastille pour le reste. */
.sheet .drow .lg.bandeau{width:80px;height:32px;flex:none;background:none;border:0;border-radius:0;
  display:flex;align-items:center;justify-content:flex-start}
.sheet .drow .lg.bandeau img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.60))}
.sheet .drow .lg svg{width:17px;height:17px;display:block;color:var(--gold-soft)}
.sheet .drow.tout{border-color:rgba(201,162,75,.4)}
.sheet .drow .nm span{display:block;font-size:.74rem;color:var(--txt2);margin-top:2px}

/* feuille destinations (porté de kitendo-anim-destinations.html) */
/* touch-action:none sur le voile : glisser à côté de la feuille ne doit pas faire
   défiler la page restée derrière. Le clic qui ferme la feuille passe toujours. */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s;z-index:29;touch-action:none}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(100%);transition:transform .32s cubic-bezier(.34,1.15,.5,1);
  background:rgba(14,17,22,.95);border-top:1px solid var(--arete);border-radius:22px 22px 0 0;padding:16px 16px calc(22px + env(safe-area-inset-bottom));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);max-width:520px;margin:0 auto;max-height:82dvh;
  /* Jusqu'à 14 destinations pour une série : sans confinement, le glissé arrivé en
     butée repart au document et c'est la page derrière qui bouge. */
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet.show{transform:translateY(0)}
.sheet h3{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.05rem;margin:6px 0 12px;text-align:center}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sheet-head .lbl{margin:0}
.sheet .all{font-size:.86rem;font-weight:700;color:var(--gold-soft);background:none;border:0;padding:8px 6px;min-height:44px;cursor:pointer}
.drow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:11px 12px;min-height:50px;border-radius:13px;margin-bottom:9px;cursor:pointer;font:inherit;color:inherit;
  background:rgba(255,255,255,.07);border:1px solid var(--arete);transition:border-color .2s,background .2s,transform .12s}
.drow:active{transform:scale(.985)}
.drow.on{border-color:rgba(201,162,75,.55);background:rgba(201,162,75,.12)}
.drow .lg{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:.92rem;color:#fff;background:rgba(255,255,255,.12);border:1px solid var(--arete)}
.drow .nm{flex:1;min-width:0}
.drow .nm b{font-size:.92rem;color:#fff;display:block;line-height:1.2}
.drow .k{width:24px;height:24px;border-radius:50%;flex:none;border:1.8px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;
  color:#F4F1EB;font-size:.92rem;font-weight:800;transition:background .2s,border-color .2s,transform .25s cubic-bezier(.34,1.7,.5,1)}
.drow.on .k{background:var(--rouge-vif);border-color:var(--rouge-vif);transform:scale(1.12)}
.drow .k .m{opacity:0;transform:scale(.4);transition:opacity .18s,transform .25s cubic-bezier(.34,1.7,.5,1)}
.drow.on .k .m{opacity:1;transform:scale(1)}
.pop{animation:pop .38s cubic-bezier(.34,1.5,.5,1)}
@keyframes pop{0%{opacity:0;transform:scale(.6) translateY(6px)}100%{opacity:1;transform:none}}
.count{font-size:.80rem;color:var(--txt2);margin:10px 0 12px;text-align:center}

/* tirage (porté de kitendo-anim-tirage.html) */
.roul{height:96px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin:12px 0;
  background:rgba(0,0,0,.26);border:1px solid var(--arete);position:relative;overflow:hidden}
.roul .cap{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt2);font-weight:700}
.roul .name{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.5rem;color:#fff}
.roul.spinning .name{color:var(--gold-soft)}
.winner{margin:2px 0 12px;text-align:center;border-radius:18px;padding:20px 14px;opacity:0;transform:scale(.9);
  background:linear-gradient(155deg,rgba(217,74,66,.26),rgba(255,255,255,.07));border:1px solid rgba(201,162,75,.5);transition:opacity .4s,transform .45s cubic-bezier(.34,1.5,.5,1)}
.winner.show{opacity:1;transform:scale(1)}
.winner .av{width:60px;height:60px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#2F3740,#14181D);border:1.5px solid var(--gold-vif);font-family:"Archivo",sans-serif;font-weight:800;font-size:1.4rem;color:#E8C77A}
.winner .nm{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.3rem}
.winner .src{margin:6px 0}
.winner .q{font-size:.88rem;font-style:italic;color:#fff;line-height:1.4;margin:2px 0 4px}
.confz{position:fixed;left:50%;top:40%;pointer-events:none;z-index:40}
.cf{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0}
.confz.fire .cf{animation:cf 1s ease-out forwards}
@keyframes cf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}

/* ce qui se dit (composeur, à venir) */
.pk{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--stroke);background:var(--glass2);border-radius:12px;padding:9px 10px;margin-bottom:8px}
.pk.on{border-color:rgba(201,162,75,.55);background:rgba(201,162,75,.1)}
.pk .box{width:18px;height:18px;border-radius:6px;border:1.6px solid var(--txt2);flex:none;display:flex;align-items:center;justify-content:center;color:#F4F1EB;font-size:.86rem;font-weight:800}
.pk.on .box{background:var(--rouge-vif);border-color:var(--rouge-vif)}
.pk .co{flex:1;min-width:0}
.pk .tx{font-size:.82rem;line-height:1.4;margin:4px 0 2px}
.pk .lk{font-size:.75rem;color:var(--txt2)}
.compose{position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(217,74,66,.35);border-radius:16px;padding:14px;margin-top:2px}
.compose h5{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.02rem;margin:0 0 11px;padding-right:74px;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.compose h5 .edit{font-size:.75rem;color:var(--gold-soft);font-family:Inter,sans-serif;font-weight:600}
.compose .q{padding:1px 0 1px 10px;margin-bottom:11px;font-size:.88rem;line-height:1.45}
.compose .q small{display:block;color:var(--gold-soft);font-size:.75rem;font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.exemple{position:absolute;top:10px;right:10px;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--txt2);border:1px solid var(--stroke);border-radius:999px;padding:2px 7px}
.dest-line{font-size:.78rem;color:var(--txt2);margin-top:10px}
.dest-line b{color:#E7EBEF;font-weight:600}

/* animations Publier (avion) / Rejeter (boule → corbeille en verre), validées */
.item.crush{transform:scale(.96);opacity:0;transition:transform .2s,opacity .2s}
.item.collapse{margin:0!important;padding-top:0;padding-bottom:0;height:0!important;opacity:0;border-width:0;
  transition:height .32s ease,margin .32s ease,padding .32s ease,opacity .2s ease;overflow:hidden}
.ball{position:fixed;width:22px;height:22px;z-index:9999;pointer-events:none;
  border-radius:48% 52% 46% 54% / 56% 47% 53% 44%;
  background:
    linear-gradient(28deg,transparent 45%,rgba(70,60,45,.18) 47.5%,transparent 50%),
    linear-gradient(118deg,transparent 54%,rgba(70,60,45,.15) 56.5%,transparent 59%),
    linear-gradient(205deg,transparent 38%,rgba(70,60,45,.13) 40.5%,transparent 43%),
    radial-gradient(circle at 30% 26%,#fbf8f1,transparent 42%),
    radial-gradient(circle at 72% 40%,#efe9db,transparent 44%),
    radial-gradient(circle at 44% 76%,#d5cebd,transparent 48%),
    radial-gradient(circle at 82% 82%,#cbc3b1,transparent 46%),#ddd6c6;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.60),inset 2px 2px 4px rgba(255,255,255,.6),0 5px 10px rgba(0,0,0,.60);
  animation:eFly 1.15s cubic-bezier(.35,.03,.4,1) forwards}
@keyframes eFly{0%{transform:translate(0,0) scale(1) rotate(0)}
  45%{transform:translate(calc(var(--dx)*.55),-98px) scale(.92) rotate(150deg)}
  84%{transform:translate(var(--dx),calc(var(--dy) - 4px)) scale(.55) rotate(285deg);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.1) rotate(350deg);opacity:0}}
.plane{position:fixed;width:30px;height:30px;z-index:9999;pointer-events:none;filter:drop-shadow(0 5px 9px rgba(0,0,0,.60));
  animation:eSend 1.75s cubic-bezier(.5,0,.22,1) forwards}
.plane svg{width:100%;height:100%;display:block}
@keyframes eSend{0%{transform:translate(0,0) rotate(-6deg) scale(1);opacity:1}
  30%{transform:translate(-9px,8px) rotate(-17deg) scale(.97)}
  45%{transform:translate(-4px,4px) rotate(-13deg) scale(1)}
  100%{transform:translate(var(--dx),var(--dy)) rotate(15deg) scale(.32);opacity:0}}
.ebin{position:fixed;right:18px;bottom:calc(var(--barre) + env(safe-area-inset-bottom) + 24px);width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--gold-soft);
  background:rgba(10,13,17,.72);border:1px solid var(--arete);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.60),inset 0 1px 0 rgba(255,255,255,.28);
  z-index:30;opacity:0;transform:translateY(10px) scale(.9);transition:opacity .25s,transform .25s;pointer-events:none;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ebin.show{opacity:1;transform:translateY(0) scale(1)}
.ebin svg{width:26px;height:26px;overflow:visible}
.ebin .lid{transform-box:fill-box;transform-origin:left bottom;transition:transform .24s cubic-bezier(.34,1.4,.5,1)}
.ebin.open .lid{transform:rotate(-40deg) translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .navc .ind,.sheet,.drow .k,.winner{transition:none}
  .btn-login.ready,.spin-btn,.inp.shake,.ptr.load .spin,.pop,.confz.fire .cf{animation:none}
  .ball,.plane{animation:none;opacity:0}
  .sq,.toast{transition:none}
}

/* ---------- Forfait IA (Réglages) ---------- */
/* La jauge est le seul « grand chiffre » de l'app : c'est le seul endroit où
   un montant doit se lire sans être cherché. Ailleurs, les tuiles restent sobres. */
.jauge{position:relative;background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:16px;
  padding:16px 15px 14px;margin-bottom:16px;
  box-shadow:var(--relief)}
.jauge-t{margin:0;font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:2rem;letter-spacing:-.02em;
  color:var(--gold-soft);font-variant-numeric:tabular-nums}
.jauge-t .env{margin-left:8px;font-size:.84rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt2);vertical-align:middle}
.jauge-s{margin:2px 0 12px;font-size:.94rem;color:var(--txt2)}
.jauge-p{margin:10px 0 0;font-size:.86rem;color:var(--txt2);line-height:1.5;font-variant-numeric:tabular-nums}
.jauge.bas .jauge-t{color:var(--no)}
.jauge.moyen .jauge-t{color:var(--gold-soft)}
.jauge.vide-jauge .jauge-t{font-size:1.1rem;color:var(--txt2)}

.barre{height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.barre>span{display:block;height:100%;border-radius:99px;background:var(--rouge);
  transition:width .35s ease}
.jauge.bas .barre>span{background:linear-gradient(90deg,#8C2F26,var(--no))}
.barre.fine{height:4px;margin-top:7px;max-width:180px}

.srow.conso{align-items:flex-start}
.srow.conso .v{font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.srow.conso .sub.mono{font-size:.82rem;opacity:.8}

.srow.form-solde{gap:12px}
.srow.form-solde .k{flex:1}
.form-solde input,.form-solde select{font:inherit;font-size:.96rem;color:var(--txt);
  background:var(--glass2);border:1px solid var(--stroke);border-radius:10px;padding:8px 10px;min-height:44px;
  max-width:46%;text-align:right;font-variant-numeric:tabular-nums}
.form-solde input:focus-visible,.form-solde select:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.note.alerte{color:var(--no)}

@media (prefers-reduced-motion:reduce){.barre>span{transition:none}}

/* ---------- Lien sur X : sous-ligne de la feuille « Diffuser vers » ---------- */
/* Le choix se prend avec les réseaux, pas dans Réglages : c'est un choix par post. */
.drow.sous{margin-left:22px;width:calc(100% - 22px);padding-top:8px;padding-bottom:8px}
.drow.sous .lg{font-size:.96rem}
.drow.sous .nm b{font-weight:600;font-size:.96rem}
.drow.sous .nm .sub{display:block;font-size:.82rem;color:var(--txt2);margin-top:1px}
.drow.sous.eteint{opacity:.42}
.drow.sous.eteint .k{visibility:hidden}
.dest .avec-lien{color:var(--gold-soft)}

/* Sous-titre de groupe dans Réglages (un bloc de connexions par marque). */
.grp.sous{opacity:.75;font-size:.78rem;margin-top:14px}
.badge.ok{background:rgba(143,230,189,.16);color:var(--ok)}

/* ---------- Courbe d'audience (YouTube Analytics) ---------- */
/* Une aire et une ligne : pas de bibliothèque de graphiques pour ça. */
.courbe{background:var(--verre);border:1px solid var(--stroke);
  backdrop-filter:var(--flou);-webkit-backdrop-filter:var(--flou);border-radius:14px;
  padding:12px 12px 8px;margin-bottom:14px;
  box-shadow:var(--relief)}
.courbe svg{display:block;width:100%;height:88px}
.courbe .aire{fill:rgba(217,74,66,.22)}
.courbe .trait{fill:none;stroke:var(--gold-soft);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.courbe .axe{display:flex;justify-content:space-between;gap:8px;margin-top:6px;
  font-size:.78rem;color:var(--txt2);font-variant-numeric:tabular-nums}
.courbe .axe .pic{color:var(--gold-soft);font-weight:600}

/* ---------- Courbe de rétention (audienceRetention) ---------- */
/* Même langue visuelle que la courbe des vues, deux repères en plus : la barre
   des 50 % (sous laquelle la moitié de l'audience est partie) et l'instant où la
   courbe la franchit. Sans eux, le décrochage médian serait un chiffre dans une
   tuile sans rien à quoi le rapporter sur le dessin. */
.courbe.ret svg{height:104px}
.courbe.ret .guide{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke}
.courbe.ret .marque{stroke:var(--gold-soft);stroke-width:1;stroke-dasharray:2 3;opacity:.75;
  vector-effect:non-scaling-stroke}
/* Repère du rebond. Un trait, pas un cercle : le viewBox est étiré en largeur
   (preserveAspectRatio="none") et un cercle y deviendrait une ellipse. */
.courbe.ret .sommet{stroke:var(--gold-soft);stroke-width:2.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke}

/* ---------- Dépôt de la bande originale ---------- */
.srow.fichier{display:block}
.srow.fichier .k{display:block;margin-bottom:9px}
#f-son input[type=file]{font:inherit;font-size:.88rem;color:var(--txt2);max-width:100%}
#f-son input[type=file]::file-selector-button{font:inherit;font-size:.90rem;font-weight:600;
  color:#fff;background:var(--rouge);border:0;border-radius:9px;
  padding:7px 11px;margin-right:9px;min-height:36px;cursor:pointer}
#f-son input[type=file]:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

/* ---------- Ce qui se dit : la santé d'un programme ---------- */
/* Une barre unique où chaque catégorie pèse sa part réelle : cinq chiffres côte
   à côte ne se comparent pas d'un coup d'oeil, une barre si. */
.jauge-sent{display:flex;height:10px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.12);margin-bottom:9px}
.jauge-sent>span{display:block;height:100%}
.p-el{background:var(--ok)}      /* éloges */
.p-cr{background:var(--no)}      /* critiques */
.p-hi{background:var(--rouge-vif)}  /* réactions à l'histoire */
.p-ne{background:rgba(255,255,255,.30)}
.p-il{background:rgba(255,255,255,.13)}
.pastille{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:8px;
  vertical-align:middle}
.badge.sent{color:#fff;font-weight:700}
#cqsd-reels .cmt{align-items:flex-start}
#cqsd-reels .cmt .info b{font-weight:500;line-height:1.45}
#cqsd-reels .cmt .badge{flex:none;margin-left:8px;white-space:nowrap}
#cqsd-reels .cmt .texte{display:block;font-weight:500;line-height:1.45;margin-bottom:4px}
#cqsd-reels .cmt .source{display:block;font-size:.80rem;color:var(--txt2)}
/* La pastille d'étiquette. Avant : un aplat de couleur pleine, le nom long sur
   deux ou trois lignes, et une largeur différente pour chacune — la colonne de
   droite devenait un escalier de blocs criards. Maintenant : une largeur fixe,
   une seule ligne, un fond neutre, et un point de couleur qui porte seul le
   code. La couleur sert à distinguer, pas à crier. */
.cmt .etiq{display:inline-flex;align-items:center;gap:7px;flex:none;
  width:106px;min-height:44px;padding:0 11px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--arete-2);
  color:var(--txt);font:600 .75rem Inter,sans-serif;white-space:nowrap;
  transition:background .18s}
.cmt .etiq span{overflow:hidden;text-overflow:ellipsis}
.cmt .etiq .pt{width:8px;height:8px;border-radius:50%;flex:none;display:block}
.cmt .etiq:active{transform:scale(.97)}
/* Pas encore jugé : le contour pointillé dit « à remplir » sans ajouter une
   couleur de plus, et le texte s'efface d'un ton. */
.cmt .etiq.no{border-style:dashed;color:var(--txt2);background:rgba(255,255,255,.04)}
#jug-liste .drow .lg{display:flex;align-items:center;justify-content:center}

/* --- File à juger : un commentaire tranché sort de la liste --- */
/* Sans ce retrait, juger ne retirait rien : la ligne restait en place avec une
   mention « jugé par toi », et l'écran paraissait figé. */
#cqsd-juger .paquet{margin-bottom:14px}
#cqsd-juger .lbl.pq{margin:0 0 6px;opacity:.85}
#cqsd-juger .cmt.sortie{overflow:hidden;height:0 !important;opacity:0;margin:0;padding:0;
  transition:height .2s ease,opacity .15s ease,margin .2s ease,padding .2s ease}
@media (prefers-reduced-motion: reduce){
  #cqsd-juger .cmt.sortie{transition:none}
}

/* --- Genre d'un contenu : émission, rubrique, extrait --- */
/* Les trois couleurs existaient déjà dans l'écran. L'or de la marque pour le
   rendez-vous, le bleu des vignettes pour ce qui revient, le vert pour le reste.
   Le mot reste écrit à côté : une pastille seule ne se lit ni par quelqu'un qui
   distingue mal les teintes, ni au soleil sur un téléphone. */
.type.gen{border:0;cursor:pointer;min-height:28px;font-family:inherit}
.type.g-em{background:rgba(201,162,75,.2);color:var(--gold-soft)}
.type.g-ru{background:rgba(158,201,255,.16);color:var(--blue)}
.type.g-ex{background:rgba(120,220,170,.18);color:var(--ok)}
.pastille.p-em{background:var(--rouge-vif)}
.pastille.p-ru{background:var(--blue)}
.pastille.p-ex{background:var(--ok)}

/* --- File à juger : des paquets qui se replient --- */
#cqsd-juger .pq-t{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--stroke);background:var(--glass2);
  color:var(--txt);font:inherit;font-size:.90rem;cursor:pointer;margin-bottom:7px;text-align:left}
#cqsd-juger .pq-t b{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
#cqsd-juger .pq-t .n{color:var(--txt2);font-size:.82rem;font-variant-numeric:tabular-nums}
#cqsd-juger .pq-t .chev{color:var(--gold-soft);transition:transform .18s ease;flex:none}
#cqsd-juger .paquet.ouvert .pq-t .chev{transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){#cqsd-juger .pq-t .chev{transition:none}}

/* Les icônes de destination sont des SVG : ils prennent la couleur du texte et
   la taille de leur boîte. Un caractère « ✆ » ne se dessinait presque pas. */
.drow .lg svg{width:18px;height:18px;display:block}

/* --- Liste des numéros d'une émission --- */
/* Chaque ligne s'ouvre sur sa courbe. Le détail est replié par défaut : la
   rétention coûte un appel YouTube par vidéo, et soixante-dix appels à
   l'ouverture d'une page seraient une minute d'attente pour rien. */
.srow.num{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--glass2);border:1px solid var(--stroke);border-radius:12px;
  padding:11px 12px;margin-bottom:7px;color:var(--txt);font:inherit;cursor:pointer;min-height:48px}
.srow.num .nm{flex:1;min-width:0}
.srow.num .nm b{display:block;font-size:.88rem;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.srow.num .nm span{display:block;font-size:.80rem;color:var(--txt2);margin-top:3px;
  font-variant-numeric:tabular-nums}
.srow.num .chev{color:var(--gold-soft);flex:none}
.num-det{margin:-2px 0 9px}

/* ---------- Les logos sur fond sombre ---------- */
/* Les vingt logos d'émission sont du blanc pur : sur la photo sombre ils se
   lisent seuls. Le noircissement du 07/10 matin n'a plus lieu d'être. */

/* Les deux logos de marque de l'accueil portent leur nom en lettres blanches :
   sur la photo sombre ils n'ont plus besoin de plaque. On leur laisse une
   ombre portée pour qu'ils se détachent des zones claires de l'image. */
.sq .lg{filter:drop-shadow(0 4px 10px rgba(0,0,0,.65))}

/* ---------- Les passages rejoués d'un numéro ---------- */
/* Un lien, pas une carte : la seule chose à faire avec une séquence, c'est
   l'ouvrir à la bonne seconde pour aller voir la scène. */
.seq-box{margin-top:12px}
.seq{display:block;border-radius:13px;padding:10px 12px;margin-bottom:8px;text-decoration:none;
  color:inherit;background:var(--glass2);border:1px solid var(--stroke)}
.seq:active{transform:scale(.99)}
.seq-t{display:block;font:700 .95rem Inter,sans-serif;color:var(--rouge-clair);
  font-variant-numeric:tabular-nums}
.seq-t .fl{opacity:.6;font-weight:400;margin:0 2px}
.seq-d{display:block;font-size:.74rem;color:var(--txt2);margin-top:2px}
/* Le verbatim dit POURQUOI la scène marche. Sans lui, on couperait sur la foi
   d'un chiffre, sans savoir ce qu'on coupe. */
.seq-v{display:block;font-size:.76rem;line-height:1.5;color:var(--txt);margin-top:7px;
  padding-left:9px;overflow-wrap:anywhere}

/* Hors sujet : une teinte neutre et sourde. Ce n'est ni un avis ni une panne de
   lecture, c'est du bruit — il doit se voir dans la barre sans attirer l'oeil. */
.p-hs{background:rgba(255,255,255,.22)}
.pastille.p-hs{background:rgba(255,255,255,.35)}
.type.g-hs{background:rgba(255,255,255,.12);color:var(--txt2)}

/* Les explications repliées. Le résumé est une cible tactile pleine (44 px),
   pas un mot cliquable de 12 px : sur un téléphone on vise avec le pouce. Pas
   de liseret de couleur sur le côté, règle de César. */
.expli{margin-top:8px;border-radius:11px;background:var(--verre);border:1px solid var(--stroke)}
.expli summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
  cursor:pointer;list-style:none;font:600 .8rem Inter,sans-serif;color:var(--txt2);
  -webkit-tap-highlight-color:transparent}
.expli summary::-webkit-details-marker{display:none}
.expli summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s}
.expli[open] summary::before{transform:rotate(45deg)}
.expli summary:focus-visible{outline:2px solid var(--rouge-clair);outline-offset:-2px;border-radius:11px}
.expli > div{padding:0 13px 12px;font-size:.78rem;line-height:1.55;color:var(--txt2)}
.expli > div b{color:var(--txt)}

/* ---------- Planificateur : bouton Programmer, feuille, section « À venir » ---------- */
/* Tout à plat, volontairement : ni dégradé ni liseret de couleur (règle de César).
   Ce qui distingue un post « non publié » d'un post à venir, c'est l'icône et le mot,
   pas une teinte portée sur le bord de la carte. */
.btn.prog{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 13px}
.btn.prog svg{width:18px;height:18px;flex:none}
.sheet .prog-quoi{margin:0 0 12px}
.sheet .prog-quoi b{color:var(--txt)}
.inp input[type=datetime-local]{color-scheme:dark;cursor:pointer;min-height:44px}
.inp input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6);opacity:.75;cursor:pointer}
.prog-err{margin:6px 2px 0;font-size:.86rem;line-height:1.45;color:#FFCABA;font-weight:600}
/* Aplat plein : le rouge du logo (#982828) porte le blanc à plus de 9:1. */
.btn.prog-ok{display:block;width:100%;min-height:50px;margin-top:8px;font-size:1rem;background:var(--rouge);color:#fff}
.btn.prog-retour{display:block;width:100%;margin-top:8px}
/* `.avenir` existe déjà (pastille « à venir » d'une fonction non faite) : d'où `a-venir`. */
.a-venir{margin-bottom:14px}
.a-venir .lbl{display:flex;align-items:center;gap:7px}
.a-venir .lbl svg{width:15px;height:15px;flex:none}
.row.prog .btn{flex:0 0 auto;min-width:44px;padding:10px 14px}
.row.prog .thumb{width:38px;height:68px;flex:none;object-fit:cover;border-radius:8px;cursor:pointer;background:#000}
.row.prog .info{cursor:pointer;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:44px}
.row.prog .info:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;border-radius:8px}
.apercu-media{display:block;width:100%;max-height:42dvh;margin:0 auto 10px;border-radius:14px;background:#000;object-fit:contain}
.apercu-quand{text-align:center;margin:0 0 8px}
.apercu-texte{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.86rem;color:var(--txt2);margin:0 0 14px}
.row.prog .quand{font-variant-numeric:tabular-nums;color:var(--txt)}
.row.prog.manque .info span{color:var(--no)}
@media (prefers-reduced-motion:reduce){.btn.prog,.btn.prog-ok{transition:none}}

/* --- Aperçu de l'affiche « Ce que vous dites » (12/10/2026) --- */
/* L'image est un 1080 × 1350 : elle est bornée en hauteur pour que les deux
   réglages restent visibles dessous sans faire défiler la feuille. Aucun liseret,
   aucun dégradé : seul l'arrondi la détache du fond de la feuille. */
.btn.apercu{display:flex;align-items:center;justify-content:center;gap:8px}
.btn.apercu svg{width:18px;height:18px;flex:none}
.btn.pleine{width:100%;flex:none;margin-top:4px}
.aff-cadre{display:flex;align-items:center;justify-content:center;min-height:120px;margin:0 0 10px}
.aff-img{display:block;width:auto;height:auto;max-width:100%;max-height:46dvh;border-radius:12px}
.seg.haut.quatre button{flex:1 1 20%}


/* ---- Clients de Kitendo Digital (12/10/2026) : des tuiles comme les autres ---- */
/* Un logo en couleurs est dessiné pour un fond clair : une plaque claire dans le carré,
   comme pour les logos Kitendo (le mot gris disparaîtrait sur le verre sombre). */
.sq .plaque{display:flex;align-items:center;justify-content:center;width:76%}
.sq .plaque.clair{background:#f3eee6;border-radius:14px;padding:12px}
.sq .plaque .lg{width:100%;max-height:none;filter:none}
.plaque.grand{display:flex;align-items:center;justify-content:center;width:min(70%,260px);margin:6px 0 14px}
.plaque.grand.clair{background:#f3eee6;border-radius:14px;padding:12px}
.plaque.grand img{max-width:100%;max-height:120px;width:auto;height:auto;object-fit:contain;display:block}
.sq.client .nm{text-align:center;font-size:.95rem;line-height:1.15;overflow-wrap:anywhere}
.sq:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}

/* Un logo de client est souvent large (Luso : 2,5 fois plus large que haut) : il prend toute
   la largeur du carré au lieu des 72 % des logos des marques, qui sont presque carrés. */
.sq.client{padding:8px}
.sq.client > .lg{width:100%;max-height:none}

/* ---- Voir une affiche en grand, et les affiches de la semaine par série (12/10/2026) ---- */
.thumb[role="button"]{cursor:pointer}
.thumb:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.thumb.affiche{width:92px;height:115px;background:#0E1116}
.thumb.affiche img{object-fit:contain}
.aff-cadre.grand{min-height:200px}
.aff-cadre.grand .aff-img{max-height:72dvh}
.drow.sem{width:100%;text-align:left}
.drow.sem.sans .nm b{color:var(--txt2)}
.drow.sem .nm b{display:block;font-size:.95rem}
.drow.sem .nm span{display:block;margin-top:3px;font-size:.8rem;line-height:1.35;font-weight:400;color:var(--txt2);white-space:normal;overflow-wrap:anywhere}
.drow.sem .chev{flex:none;font-size:1.5rem;line-height:1;color:var(--txt2);padding-left:6px}
.type.gen.g-aff{border:0;cursor:default;background:rgba(240,220,166,.14);color:var(--gold-soft)}
details.sans-matiere{margin:6px 2px 4px;color:var(--txt2);font-size:.85rem}
details.sans-matiere summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
details.sans-matiere summary:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}


/* =================== Loi de Hick (16/10/2026) =================== */
/* Un seul bouton plein par écran, les actions secondaires dans un menu ⋯, un seul
   réglage « Filtres », les longues listes pliées. Tout est à plat : ni liseret de
   couleur sur le côté, ni dégradé de plus. */

/* Titre de section + menu ⋯ à droite */
.titre-ligne{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.titre-ligne>div{min-width:0}
.titre-ligne .plus{margin-top:6px}

/* Le bouton « trois points » : 44 px, sans libellé visible, nommé pour les lecteurs d'écran */
.plus{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;cursor:pointer;color:var(--txt);background:rgba(255,255,255,.08);border:1px solid var(--arete);
  transition:transform .1s}
.plus:active{transform:scale(.96)}
.plus svg{width:20px;height:20px;display:block}
.barre-file .plus{width:44px}

/* Une carte de la file : une ligne tant qu'elle n'est pas ouverte */
.tete{display:grid;grid-template-columns:1fr auto;grid-template-areas:"l1 chev" "resume chev";align-items:center;
  gap:1px 8px;width:100%;min-height:44px;padding:0;text-align:left;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.tete-l1{grid-area:l1;display:flex;align-items:center;gap:8px;min-width:0}
.tete .ti{font-size:.90rem;color:#fff;font-weight:600;flex:1;min-width:0;overflow-wrap:anywhere}
.tete .resume{grid-area:resume;font-size:.78rem;color:var(--txt2)}
.tete .chev{grid-area:chev;font-size:1.3rem;line-height:1;color:var(--gold-soft);transition:transform .18s}
.item:not(.replie) .tete{margin-bottom:9px;grid-template-areas:"l1 chev"}
.item:not(.replie) .tete .chev{transform:rotate(90deg)}
.item.replie{padding-top:6px;padding-bottom:6px}
.item-corps .acts{margin-top:11px}
.item-corps .acts .btn.pub{flex:1}
.type.gen{cursor:default}

/* Réglage « Filtres » : un bouton qui dit sa valeur, une feuille qui la change */
.filtres{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:12px;cursor:pointer;
  color:var(--txt);background:rgba(255,255,255,.08);border:1px solid var(--arete);font:600 .84rem Inter,sans-serif;
  flex:none;max-width:100%}
.filtres:active{transform:scale(.98)}
.filtres svg{width:17px;height:17px;flex:none}
.filtres .f-val{color:var(--txt2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbl-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin:14px 0 8px}
.lbl-ligne .lbl{margin:0;flex:1 1 auto;min-width:0}

/* Pli : une ligne qui s'ouvre. Même gabarit pour <details> et pour les boutons d'une feuille. */
.pli{margin-bottom:10px}
.pli>summary,.pli-t{display:flex;align-items:center;gap:9px;width:100%;min-height:48px;padding:10px 12px;
  border-radius:13px;border:1px solid var(--stroke);background:var(--glass2);color:var(--txt);
  font:inherit;font-size:.92rem;cursor:pointer;list-style:none;text-align:left}
.pli>summary::-webkit-details-marker{display:none}
.pli>summary b,.pli-t b{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.pli .n,.pli-t .n{color:var(--txt2);font-size:.82rem;font-variant-numeric:tabular-nums;flex:none}
.pli .chev,.pli-t .chev{color:var(--gold-soft);flex:none;transition:transform .18s}
.pli[open]>summary .chev,.pli-t.ouvert .chev{transform:rotate(90deg)}
.pli>summary:focus-visible,.pli-t:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
.pli-c{padding:10px 0 2px}
.pli.vide-pli>summary{opacity:.65}
.pli-t{margin-top:8px}
.pli-seul{margin-top:16px}
.pli-seul .pli{margin-bottom:0}
.pli-c .set{margin-bottom:4px}
.sheet .pli-c .search{margin-bottom:10px}
.sheet .pli-c .drow{margin-bottom:8px}
/* Les paquets de la file à juger sont dans un pli : pas de second cadre */
#cqsd-juger.pli-c{padding-top:10px}
.link.plus-reste{display:block;width:100%;text-align:center;margin-top:2px}

/* Lignes du menu ⋯ : une icône, un mot, pas de case à cocher */
.drow.menu{justify-content:flex-start}
.drow.menu .lg{color:var(--txt)}
.drow.menu.danger .nm b{color:var(--no)}
.drow.menu.danger .lg{color:var(--no)}
.drow.menu.arme{border-color:rgba(201,162,75,.55);background:rgba(201,162,75,.16)}

@media (prefers-reduced-motion:reduce){
  .tete .chev,.pli .chev,.pli-t .chev,.plus,.filtres{transition:none}
}
#f-son input[type=file]{min-height:44px}
#f-son input[type=file]::file-selector-button{min-height:44px}
/* Une liste déroulante occupe toute la hauteur de son champ : tout le champ se touche, pas une ligne de 18 px */
.inp select{align-self:stretch;height:100%;min-height:44px}

/* Historique : reprise d'un réseau manquant (audit du 16/10/2026). Cible tactile de 44 px, une seule commande par ligne. */
.reprendre{display:block;margin-top:8px;min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid var(--trait, rgba(255,255,255,.18));
  background:transparent;color:inherit;font-weight:600;font-size:.85rem;line-height:1.25;font-family:inherit;text-align:left;cursor:pointer}
.reprendre:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.reprendre[disabled]{opacity:.5;cursor:default}

/* Échec de chargement : la cause en une phrase et un bouton pour réessayer (audit du 18/10/2026). */
.erreur-charg p{margin:0 0 6px}
.erreur-charg .cause{font-size:.86rem;color:var(--txt2)}
.erreur-charg .link{margin-top:4px}

/* Message avec une action (« Rejeté. Annuler ») : cliquable, avec une cible de 44 px (audit du 18/10/2026). */
.toast.actif{pointer-events:auto}
.toast-act{background:none;border:0;color:var(--gold-soft);font:inherit;font-weight:800;cursor:pointer;min-height:44px;margin:-9px -10px -9px 4px;padding:0 14px}
.toast-act:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-2px;border-radius:999px}

/* Ce qui se dit : le titre porte le programme choisi, et UN seul bouton « Filtres » le règle (audit du 18/10/2026). */
.cqsd-titre{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.1rem;margin:0;min-width:0;overflow-wrap:anywhere}

.tiles:empty{display:none}