/* ==========================================================================
   ChloroLive · Salle de rédaction — la table des sujets en attente
   --------------------------------------------------------------------------
   Même famille visuelle que le Studio (css/editor.css) et le Studio Météo
   (css/meteo-studio.css) : fond pine sombre, accent mint, Source Sans 3. Elle
   reste une feuille à part parce que l'objet est autre — ici on ne compose
   rien, on trie une file d'attente, et la densité prime : une édition entière
   doit tenir d'un coup d'œil.

   Outil d'auteur — NE DOIT PAS partir dans le ZIP Navori (voir edit/serve.mjs,
   collectSiteFiles : la liste d'exclusion de css/ est à compléter).
   ========================================================================== */

:root{
  --pine:#004431; --mint:#46BC94; --sand:#FFF6E7; --pollen:#FFCD50;
  --terracotta:#DB4C2A; --sunflower:#F9A035; --grass:#BFD830; --sky:#2CB3DD;
  --walnut:#6E5138; --seafoam:#B1E2E5;
  --fond:#0d1a15; --carte:#14251e; --carte2:#1a2e26; --trait:#24382e;
  --texte:#e8f0ea; --doux:#9db3a7;
  --sans:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;background:var(--fond);color:var(--texte);font-family:var(--sans);font-size:14px}
body{padding-bottom:40px}

/* --- En-tête ----------------------------------------------------------- */
.tete{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:16px;
  padding:0 20px;height:56px;background:var(--carte);border-bottom:1px solid var(--trait)}
.marque{font-size:19px}.marque b{font-weight:700;color:var(--sand)}
.marque i{font-style:normal;font-weight:700;color:var(--mint)}
.titre{font-weight:700;font-size:17px;color:var(--pollen)}
.spacer{flex:1}
.onglets{display:flex;gap:4px;margin-left:8px}
.onglet{font-family:inherit;font-size:14px;font-weight:600;color:var(--doux);cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 12px}
.onglet:hover{color:var(--texte)}
.onglet.actif{color:var(--pine);background:var(--mint);border-color:var(--mint)}
.etiquette{font-size:12px;font-weight:600;color:var(--pollen);padding:4px 10px;
  border:1px solid var(--pollen);border-radius:999px;white-space:nowrap}
.etiquette.calme{color:var(--doux);border-color:var(--trait);font-weight:400}

/* --- Boutons ----------------------------------------------------------- */
.btn{font-family:inherit;font-size:14px;font-weight:600;color:var(--texte);cursor:pointer;
  background:transparent;border:1px solid var(--trait);border-radius:9px;padding:7px 13px}
.btn:hover{border-color:var(--mint);color:var(--mint)}
.btn--plein{background:var(--mint);border-color:var(--mint);color:var(--pine)}
.btn--plein:hover{background:#5fd0a9;border-color:#5fd0a9;color:var(--pine)}
.btn--danger:hover{border-color:var(--terracotta);color:var(--terracotta)}
.btn--mini{font-size:12px;padding:4px 9px;border-radius:7px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{border-color:var(--trait);color:var(--texte)}

/* --- Filtres ----------------------------------------------------------- */
.filtres{position:sticky;top:56px;z-index:11;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;background:var(--fond);border-bottom:1px solid var(--trait)}
.filtres input[type=search],.filtres select{font-family:inherit;font-size:14px;color:var(--texte);
  background:var(--carte);border:1px solid var(--trait);border-radius:8px;padding:7px 11px}
.filtres input[type=search]{width:320px}
.filtres input:focus,.filtres select:focus{outline:none;border-color:var(--mint)}
.bascule{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--doux);cursor:pointer}
.bascule input{width:16px;height:16px;accent-color:var(--mint)}
.aide{font-size:13px;color:var(--doux);line-height:1.5}
.aide.alerte{color:var(--terracotta)}
.aide code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}

/* --- Une édition -------------------------------------------------------- */
.editions,.ensemble{padding:18px 20px;display:flex;flex-direction:column;gap:22px}
.ed{border:1px solid var(--trait);border-radius:14px;overflow:hidden;background:var(--carte)}
.ed.archivee{opacity:.6}
.ed-tete{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;
  padding:14px 18px;background:var(--carte2);border-bottom:1px solid var(--trait)}
.ed-nom{display:flex;flex-direction:column;gap:3px;min-width:230px}
.ed-nom h2{font-size:17px;font-weight:700;color:var(--sand)}
.ed-nom .quand{font-size:13px;color:var(--doux)}
.ed-nom .quand b{color:var(--texte);font-weight:600}

/* La durée, face à la cible : une barre qui dit d'un coup d'œil si l'édition
   tient dans son format. Le réel et le projeté sont EMPILÉS, jamais additionnés
   en silence — ce sont deux natures d'information. */
.duree{min-width:290px;flex:1 1 290px;display:flex;flex-direction:column;gap:6px}
.duree .chiffres{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--doux);flex-wrap:wrap}
.duree .chiffres b{font-size:16px;color:var(--texte);font-variant-numeric:tabular-nums}
.duree .chiffres .plus{color:var(--pollen);font-weight:600;font-variant-numeric:tabular-nums}
.duree .chiffres .cible{margin-left:auto}
.jauge{position:relative;height:10px;border-radius:999px;background:#0a1511;overflow:hidden;
  border:1px solid var(--trait)}
.jauge i{position:absolute;top:0;bottom:0;left:0;display:block}
.jauge .reel{background:var(--mint)}
.jauge .proj{background:repeating-linear-gradient(45deg,var(--pollen),var(--pollen) 4px,#0a1511 4px,#0a1511 8px)}
.jauge .marque-cible{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--sand);opacity:.85}
.duree.depasse .chiffres b{color:var(--terracotta)}
/* D'OÙ VIENT LA DURÉE AFFICHÉE (entrée 123). Une ligne discrète sous la jauge,
   au registre neutre des phrases qui expliquent : ce n'est pas une alerte —
   une durée réglée à la main n'est pas une panne —, mais elle doit se lire
   sans qu'on la cherche. Servie par Sujets ET par Éditions, qui montrent la
   même jauge du même remplissage : une seule règle, comme une seule phrase. */
.duree .provenance{font-size:12px;line-height:1.4;color:var(--doux)}

.compteurs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pastille{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;
  border:1px solid var(--trait);color:var(--doux);white-space:nowrap}
.pastille b{font-variant-numeric:tabular-nums}
.pastille.recu{color:var(--sand);border-color:#3a5546}
.pastille.propose{color:var(--sky);border-color:#255a6d}
.pastille.genere{color:var(--pollen);border-color:#6a5520}
.pastille.valide{color:var(--mint);border-color:#2a6650}
.pastille.ecarte{color:var(--walnut);border-color:#4a3b2c}
.pastille.reporte{color:var(--doux)}
.pastille.manque{color:var(--pine);background:var(--pollen);border-color:var(--pollen)}
.pastille.zero{opacity:.4}
.ed-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.ed-actions .archivable{border-color:var(--pollen);color:var(--pollen)}

/* --- La table des sujets ------------------------------------------------ */
table.sujets{width:100%;border-collapse:collapse;table-layout:fixed}
table.sujets th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--doux);text-align:left;padding:8px 10px;border-bottom:1px solid var(--trait);
  background:var(--carte)}
table.sujets td{padding:9px 10px;border-bottom:1px solid #1c2c25;vertical-align:top}
table.sujets tr.sujet:hover td{background:#182b23}
table.sujets tr.sujet.inactif td{opacity:.5}
.c-sujet{width:auto}
.c-media{width:96px}
.c-nature{width:160px}
.c-layout{width:180px}
.c-them{width:140px}
.c-conf{width:190px}
.c-etat{width:92px}
.c-act{width:210px}

.s-titre{display:flex;align-items:baseline;gap:8px}
.s-titre .txt{font-weight:600;color:var(--texte);line-height:1.3}
.s-titre .vide{font-weight:400;color:var(--pollen);font-style:italic}
.s-meta{margin-top:3px;font-size:12px;color:var(--doux);display:flex;gap:10px;flex-wrap:wrap}
.s-meta span{white-space:nowrap}
.s-brief{margin-top:5px;font-size:13px;color:var(--doux);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-brief.ouvert{display:block;-webkit-line-clamp:none;white-space:pre-wrap}
.plier{background:none;border:0;color:var(--mint);font-family:inherit;font-size:12px;
  font-weight:600;cursor:pointer;padding:2px 0;margin-top:2px}
.plier:hover{text-decoration:underline}

/* La vignette : une image quand il y en a une, un manque bien visible sinon.
   « attend une photo » n'est pas une décoration — c'est ce qui empêche de
   générer, donc ça doit se lire de l'autre bout de la table. */
.vignette{width:76px;height:50px;border-radius:7px;object-fit:cover;background:#0a1511;
  border:1px solid var(--trait);display:block}
.vignette.film{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--mint)}
.manque{display:inline-block;font-size:11px;font-weight:700;line-height:1.25;
  color:var(--pine);background:var(--pollen);border-radius:6px;padding:4px 6px}
.sans{font-size:12px;color:var(--doux)}
.nb-medias{display:block;margin-top:3px;font-size:11px;color:var(--doux)}

table.sujets select{width:100%;font-family:inherit;font-size:13px;color:var(--texte);
  background:var(--fond);border:1px solid var(--trait);border-radius:7px;padding:6px 7px}
table.sujets select:focus{outline:none;border-color:var(--mint)}
table.sujets select:disabled{opacity:.45}
table.sujets select.impose{border-color:var(--mint)}

.conf{font-size:12px;color:var(--doux);line-height:1.4}
.conf .niveau{display:inline-block;font-weight:700;margin-right:5px;font-variant-numeric:tabular-nums}
.conf .haute{color:var(--mint)} .conf .moyenne{color:var(--pollen)} .conf .basse{color:var(--terracotta)}

.etat{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--trait);color:var(--doux)}
.etat.recu{color:var(--sand)}
.etat.propose{color:var(--sky);border-color:#255a6d}
.etat.genere{color:var(--pine);background:var(--pollen);border-color:var(--pollen)}
.etat.valide{color:var(--pine);background:var(--mint);border-color:var(--mint)}
.etat.ecarte{color:var(--walnut);border-color:#4a3b2c}
.etat.reporte{color:var(--doux);border-style:dashed}

.actions{display:flex;flex-wrap:wrap;gap:5px}

/* --- Fiches modales ----------------------------------------------------- */
.fiche{position:fixed;inset:0;z-index:40;background:rgba(5,12,9,.72);
  display:flex;align-items:center;justify-content:center;padding:24px}
.fiche[hidden]{display:none}
.fiche-boite{width:min(100%,460px);background:var(--carte);border:1px solid var(--trait);
  border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px}
.fiche-boite header .titre{font-size:16px}
.champ{display:block}
.champ > span{display:block;font-size:13px;color:var(--doux);margin-bottom:6px}
.champ input,.champ select{width:100%;font-family:inherit;font-size:15px;color:var(--texte);
  background:var(--fond);border:1px solid var(--trait);border-radius:8px;padding:9px 11px}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--mint)}
.ligne-boutons{display:flex;gap:8px;justify-content:flex-end}

/* --- Vue d'ensemble ----------------------------------------------------- */
.bloc{border:1px solid var(--trait);border-radius:14px;background:var(--carte);overflow:hidden}
.bloc > h2{font-size:15px;font-weight:700;color:var(--pollen);padding:12px 18px;
  background:var(--carte2);border-bottom:1px solid var(--trait)}
.bloc > .corps{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.cal{display:flex;flex-direction:column;gap:10px}
.cal-ligne{display:grid;grid-template-columns:170px 1fr 210px;gap:14px;align-items:center}
.cal-ligne .quand{font-size:13px;color:var(--doux)}
.cal-ligne .quand b{display:block;color:var(--texte);font-size:14px}
.cal-ligne.passee{opacity:.55}
.cal-ligne .val{font-size:13px;color:var(--doux);text-align:right;font-variant-numeric:tabular-nums}
.liste{font-size:13px;color:var(--doux);line-height:1.6}
.liste b{color:var(--texte)}
.liste .bon{color:var(--mint)}
.liste .attention{color:var(--pollen)}
.liste .grave{color:var(--terracotta)}
.liste ul{margin:4px 0 0 18px}

.vide{padding:40px 20px;text-align:center;color:var(--doux);line-height:1.6}
.pied{padding:0 20px 20px;font-size:12px;color:#5f776a;line-height:1.5}