/* Hestia Multimedia Server — « le foyer » : nuit chaude, braise et or, les affiches au premier plan.
   Mise en page : rail à gauche (ordinateur) / onglets en bas (téléphone), une colonne de contenu en rangées défilantes. */
:root {
  --nuit: #110e0c;
  --surface: #1b1613;
  --surface-2: #251e1a;
  --trait: #3a2f28;
  --encre: #f4ede5;
  --doux: #b3a495;
  --pale: #7d6f63;
  --braise: #ff7a3a;
  --braise-sombre: #c9541f;
  --or: #ffc56e;
  --bien: #5fd394;
  --attention: #ffc56e;
  --mal: #ff6f6f;
  --info: #7fb2ff;
  --titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texte: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rayon: 14px;
  --rayon-petit: 8px;
  --ombre: 0 18px 40px -18px rgb(0 0 0 / .75);
  --rail: 232px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--nuit); color: var(--encre); font: 15px/1.55 var(--texte); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--titre); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.doux { color: var(--doux); }
.pale { color: var(--pale); }

/* fond : une lueur de braise qui suit la page (pas d'animation continue) */
#fond { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 600px at 85% -10%, rgb(255 122 58 / .13), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgb(255 197 110 / .07), transparent 60%), var(--nuit); }

/* ─── icônes (SVG dessinés dans app.js) ─── */
.ico { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: none; }
.ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ─── connexion ─── */
.connexion { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.carte-connexion { width: min(420px, 100%); background: rgb(27 22 19 / .86); border: 1px solid var(--trait); border-radius: 22px; padding: 32px 28px; display: grid; gap: 10px; box-shadow: var(--ombre); backdrop-filter: blur(10px); }
.carte-connexion h1 { font-size: 1.7rem; }
.carte-connexion p { margin: 0 0 8px; }
.logo-grand { width: 64px; height: 64px; }
label { font-weight: 600; font-size: .85rem; color: var(--doux); }
input:not([type=checkbox]), select { width: 100%; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 10px; padding: 11px 13px; outline: none; transition: border-color .15s; }
input:focus, select:focus { border-color: var(--braise); }
.erreur { color: var(--mal); margin: 4px 0; font-weight: 500; }

/* ─── boutons, pastilles ─── */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--trait); background: var(--surface-2); padding: 10px 16px; border-radius: 999px; font-weight: 600; cursor: pointer; transition: transform .12s, background .15s, border-color .15s; white-space: nowrap; }
.bouton:hover { border-color: var(--pale); }
.bouton:active { transform: scale(.97); }
.bouton.plein { background: linear-gradient(180deg, var(--braise), var(--braise-sombre)); border-color: transparent; color: #1b0e06; }
.bouton.plein:hover { filter: brightness(1.08); }
.bouton[disabled] { opacity: .55; cursor: wait; }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--doux); border: 1px solid var(--trait); white-space: nowrap; }
.puce.bien { color: var(--bien); border-color: rgb(95 211 148 / .35); background: rgb(95 211 148 / .08); }
.puce.mal { color: var(--mal); border-color: rgb(255 111 111 / .35); background: rgb(255 111 111 / .08); }
.puce.attention { color: var(--attention); border-color: rgb(255 197 110 / .35); background: rgb(255 197 110 / .08); }
.puce.info { color: var(--info); border-color: rgb(127 178 255 / .35); background: rgb(127 178 255 / .08); }
.puce.vf { color: #1b0e06; background: var(--or); border-color: transparent; }
.point { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(255 255 255 / .06); }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre { border: 1px solid var(--trait); background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--doux); }
.filtre[aria-pressed=true] { background: var(--encre); color: var(--nuit); border-color: var(--encre); }

/* ─── charpente ─── */
.site { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100%; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; padding: 22px 14px; border-right: 1px solid var(--trait); background: rgb(17 14 12 / .6); backdrop-filter: blur(12px); }
.marque { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font: 800 1.25rem var(--titre); letter-spacing: .02em; }
.marque img { width: 34px; height: 34px; }
.liens { display: grid; gap: 2px; }
.groupe-lien { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pale); padding: 16px 12px 6px; }
.lien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--doux); font-weight: 600; transition: background .15s, color .15s; }
.lien:hover { background: var(--surface); color: var(--encre); }
.lien[aria-current=page] { background: var(--surface-2); color: var(--encre); box-shadow: inset 3px 0 var(--braise); }
.pied-rail { margin-top: auto; }
.colonne { min-width: 0; display: flex; flex-direction: column; }
.barre { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: linear-gradient(180deg, rgb(17 14 12 / .92), rgb(17 14 12 / .55)); backdrop-filter: blur(14px); }
.recherche { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--trait); border-radius: 999px; padding: 0 16px; color: var(--pale); }
.recherche input { border: 0; background: transparent; padding: 10px 0; }
.moi { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--braise), var(--or)); color: #1b0e06; font: 800 .95rem var(--titre); }
main { padding: 8px 28px 64px; outline: none; display: grid; gap: 34px; align-content: start; }
.onglets { display: none; }

/* ─── en-tête de page ─── */
.entete { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 10px; }
.entete h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.entete p { margin: 6px 0 0; color: var(--doux); }

/* ─── héros de l'accueil ─── */
.heros { position: relative; border-radius: 24px; overflow: hidden; min-height: 340px; display: flex; align-items: end; background: var(--surface); box-shadow: var(--ombre); isolation: isolate; }
.heros > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.heros::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(17 14 12 / .95) 10%, rgb(17 14 12 / .55) 55%, rgb(17 14 12 / .1)), linear-gradient(0deg, rgb(17 14 12 / .9), transparent 50%); }
.heros-texte { padding: 36px; display: grid; gap: 12px; max-width: 620px; }
.heros .surtitre { color: var(--or); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .75rem; }
.heros h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.heros p { margin: 0; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.compteurs { display: flex; gap: 22px; flex-wrap: wrap; color: var(--doux); font-size: .9rem; }
.compteurs b { color: var(--encre); font: 700 1.25rem var(--titre); display: block; font-variant-numeric: tabular-nums; }

/* ─── rangées d'affiches ─── */
.rangee { display: grid; gap: 14px; }
.rangee-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rangee-tete h2 { font-size: 1.3rem; }
.rangee-tete a { color: var(--doux); font-weight: 600; font-size: .9rem; }
.rangee-tete a:hover { color: var(--or); }
.defile { display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--trait) transparent; }
.defile.large { grid-auto-columns: 300px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }

.affiche { display: grid; gap: 8px; scroll-snap-align: start; min-width: 0; }
.affiche .image { position: relative; aspect-ratio: 2 / 3; border-radius: var(--rayon); overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface)); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .9); transition: transform .2s ease, box-shadow .2s ease; }
.affiche.paysage .image { aspect-ratio: 16 / 9; }
.affiche .image img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.affiche .image img.charge { opacity: 1; }
.affiche .image .initiale { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.2rem var(--titre); color: var(--trait); }
.affiche:hover .image { transform: translateY(-4px); box-shadow: 0 22px 34px -18px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 197 110 / .35); }
.affiche .nom { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.affiche .sous { color: var(--pale); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.affiche .badge { position: absolute; top: 8px; left: 8px; }
.barre-vue { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgb(0 0 0 / .55); }
.barre-vue i { display: block; height: 100%; background: var(--braise); }
.vu-coche { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgb(17 14 12 / .8); color: var(--bien); display: grid; place-items: center; }
.vu-coche .ico { width: 14px; height: 14px; }

/* ─── fiche ─── */
.fiche-fond { position: relative; margin: -8px -28px 0; min-height: 380px; overflow: hidden; isolation: isolate; }
.fiche-fond > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; }
.fiche-fond::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--nuit) 4%, rgb(17 14 12 / .55) 55%, rgb(17 14 12 / .2)); }
.fiche { display: grid; grid-template-columns: 240px 1fr; gap: 34px; padding: 120px 28px 0; align-items: end; }
.fiche .poster { border-radius: 18px; overflow: hidden; aspect-ratio: 2 / 3; box-shadow: var(--ombre); background: var(--surface); }
.fiche .poster img { width: 100%; height: 100%; object-fit: cover; }
.fiche-info { display: grid; gap: 14px; min-width: 0; }
.fiche-info h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.fiche-info .logo { max-height: 110px; max-width: min(420px, 100%); object-fit: contain; object-position: left; }
.meta { display: flex; gap: 8px 16px; flex-wrap: wrap; color: var(--doux); font-weight: 500; }
.meta span + span::before { content: "·"; margin-right: 16px; color: var(--pale); }
.resume { max-width: 70ch; margin: 0; color: #e6dbcf; }
.accroche { font-style: italic; color: var(--or); margin: 0; }
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.encart { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.encart h3 { font-size: 1rem; }
.liste-puces { display: flex; gap: 6px; flex-wrap: wrap; }
.saisons { display: flex; gap: 8px; flex-wrap: wrap; }
.episodes { display: grid; gap: 10px; }
.episode { display: grid; grid-template-columns: 200px 1fr auto; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; min-width: 0; }
.episode .vignette { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.episode .vignette img { width: 100%; height: 100%; object-fit: cover; }
.episode h4 { margin: 0 0 4px; font-size: 1rem; }
.episode p { margin: 0; color: var(--doux); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── calendrier ─── */
.jours { display: grid; gap: 22px; }
.jour h2 { font-size: 1.05rem; color: var(--or); margin-bottom: 10px; text-transform: capitalize; }
.jour h2 small { color: var(--pale); font: 500 .85rem var(--texte); margin-left: 8px; text-transform: none; }
.sorties { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sortie { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; min-width: 0; }
.sortie img, .sortie .vide { width: 54px; aspect-ratio: 2 / 3; border-radius: 8px; object-fit: cover; background: var(--surface-2); }
.sortie b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sortie span { color: var(--doux); font-size: .85rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── tuiles, tableaux ─── */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px 18px; display: grid; gap: 2px; }
.tuile b { font: 700 1.7rem var(--titre); font-variant-numeric: tabular-nums; }
.tuile span { color: var(--doux); font-size: .88rem; }
.tuile.accent b { color: var(--braise); }
.table { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
th { color: var(--pale); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; background: var(--surface-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: 0; }
td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cellule-titre { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.cellule-titre img, .cellule-titre .vide { width: 34px; aspect-ratio: 2 / 3; border-radius: 5px; object-fit: cover; background: var(--surface-2); flex: none; }
.jauge { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; min-width: 80px; }
.jauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--braise), var(--or)); }
.jauge.bien i { background: var(--bien); }

/* ─── jeux ─── */
.jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.jeu { background: var(--surface); border: 1px solid var(--trait); border-radius: 18px; padding: 20px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.jeu.allume { border-color: rgb(95 211 148 / .35); }
.jeu.allume::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--bien); }
.jeu-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jeu-tete h3 { font-size: 1.3rem; }
.jeu dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: .9rem; }
.jeu dt { color: var(--pale); } .jeu dd { margin: 0; font-variant-numeric: tabular-nums; }
.monde { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.monde b { display: block; } .monde small { color: var(--doux); }

/* ─── divers ─── */
.vide-etat { padding: 46px 20px; text-align: center; color: var(--doux); border: 1px dashed var(--trait); border-radius: var(--rayon); }
.squelette { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: luire 1.4s infinite linear; border-radius: var(--rayon); }
@keyframes luire { to { background-position: -200% 0; } }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--trait); padding: 12px 18px; border-radius: 12px; box-shadow: var(--ombre); z-index: 50; font-weight: 600; max-width: calc(100% - 32px); }
.toast.mal { border-color: var(--mal); color: var(--mal); }
.entree { animation: entree .32s ease both; }
@keyframes entree { from { opacity: .001; transform: translateY(8px); } }
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.reglage:last-child { border-bottom: 0; }
.reglage p { margin: 2px 0 0; color: var(--doux); font-size: .88rem; }
.interrupteur { appearance: none; width: 46px; height: 26px; border-radius: 99px; background: var(--trait); position: relative; cursor: pointer; transition: background .15s; flex: none; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--encre); transition: transform .15s; }
.interrupteur:checked { background: var(--braise); }
.interrupteur:checked::after { transform: translateX(20px); }
.plus { display: flex; justify-content: center; }

/* ─── téléphone ─── */
@media (max-width: 900px) {
  .site { grid-template-columns: 1fr; }
  .rail { display: none; }
  .barre { padding: 12px 16px; }
  main { padding: 6px 16px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 26px; }
  .onglets { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgb(17 14 12 / .94); border-top: 1px solid var(--trait); backdrop-filter: blur(14px); }
  .onglets a { display: grid; justify-items: center; gap: 3px; font-size: .7rem; font-weight: 600; color: var(--pale); padding: 4px 0; }
  .onglets a[aria-current=page] { color: var(--or); }
  .heros { min-height: 300px; border-radius: 18px; }
  .heros-texte { padding: 22px; }
  .defile { grid-auto-columns: 128px; gap: 12px; }
  .defile.large { grid-auto-columns: 240px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px 12px; }
  .fiche-fond { margin: -6px -16px 0; }
  .fiche { grid-template-columns: 1fr; padding: 90px 16px 0; gap: 20px; }
  .fiche .poster { width: 150px; }
  .episode { grid-template-columns: 120px 1fr; }
  .episode .bouton { grid-column: 1 / -1; }
  .moi span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* demandes */
.barre-demande { display: flex; gap: 10px; margin: 6px 0 18px; flex-wrap: wrap; }
.barre-demande input { flex: 1 1 260px; max-width: 520px; }
.resultats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-bottom: 26px; }
.resultat { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px; }
.resultat .vignette { flex: 0 0 84px; }
.resultat .vignette img, .resultat .vignette .vide { width: 84px; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--rayon-petit); background: var(--surface-2); }
.resultat h3 { font-size: 1.05rem; } .resultat h3 small { color: var(--doux); font-weight: 500; }
.resultat .corps { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.resultat .corps p { margin: 0; font-size: .88rem; }
.resultat .actions, .ligne-demande .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.ligne-demande { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--trait); }
.ligne-demande:first-child { border-top: 0; }
.ligne-demande img, .ligne-demande .vide { flex: 0 0 44px; width: 44px; aspect-ratio: 2/3; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.ligne-demande .corps { flex: 1; min-width: 0; }
.ligne-demande .actions { margin: 0; justify-content: flex-end; }
.petit { font-size: .84rem; }
@media (max-width: 640px) { .ligne-demande { flex-wrap: wrap; } .ligne-demande .actions { width: 100%; justify-content: flex-start; } }

/* cartes TMDB et fiche de titre */
.note-coin { position: absolute; top: 8px; left: 8px; background: rgb(17 14 12 / .82); color: var(--or); font-weight: 700; font-size: .78rem; padding: 2px 8px; border-radius: 99px; backdrop-filter: blur(6px); }
.etat-coin { position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: center; justify-content: center; backdrop-filter: blur(6px); background: rgb(17 14 12 / .86); }
.liste-puces { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--doux); }
.titre-fond { position: relative; margin: calc(var(--gouttiere, 0px) * -1); border-radius: 24px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; margin-bottom: 18px; }
.titre-fond > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.titre-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--nuit) 4%, transparent 75%), linear-gradient(90deg, rgb(17 14 12 / .75), transparent 60%); }
.titre-corps { position: relative; z-index: 1; display: flex; gap: 22px; padding: 26px; width: 100%; align-items: flex-end; }
.titre-corps .poster img { width: 190px; border-radius: 12px; box-shadow: var(--ombre); }
.titre-corps h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.titre-corps .accroche { color: var(--or); font-style: italic; }
.saisons-choix { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.saisons-choix label { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 99px; padding: 6px 12px; cursor: pointer; font-size: .88rem; }
.saisons-choix input { width: auto; accent-color: var(--braise); }
.distribution { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.acteur { text-align: center; font-size: .82rem; }
.acteur img, .acteur .vide { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 6px; background: var(--surface-2); }
.acteur span { display: block; color: var(--doux); }
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.machine { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; }
.machine h3 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.machine .service { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--trait); font-size: .9rem; }
.actus { display: grid; gap: 4px; }
.actu { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--trait); }
.actu:first-child { border-top: 0; }
.actu span { color: var(--pale); font-size: .8rem; white-space: nowrap; }
@media (max-width: 700px) { .titre-corps { flex-direction: column; align-items: flex-start; } .titre-corps .poster img { width: 120px; } }

/* page API */
.emplacement { padding: 14px 0; border-top: 1px solid var(--trait); display: grid; gap: 4px; }
.emplacement:first-of-type { border-top: 0; }
.emp-tete { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.emp-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.emp-form input { flex: 1 1 260px; max-width: 460px; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: .88em; }

.journal-jeu { max-height: 280px; overflow: auto; background: var(--nuit); border: 1px solid var(--trait); border-radius: 8px; padding: 10px; font-size: .78rem; white-space: pre-wrap; margin: 10px 0 0; }

.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.service-tuile { display: grid; gap: 4px; padding: 16px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); transition: border-color .15s, transform .15s; }
.service-tuile:hover { border-color: var(--braise); transform: translateY(-2px); }
.service-tuile .ico { color: var(--braise); width: 26px; height: 26px; }
.service-tuile span { color: var(--doux); font-size: .86rem; }

/* signalements (livré par Claude.83) */
/* Signalements : à ajouter à la fin de oms.css (mêmes variables, même style). */
textarea { width: 100%; resize: vertical; min-height: 110px; font: inherit; color: inherit; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 10px; padding: 11px 13px; outline: none; }
textarea:focus { border-color: var(--braise); }
.sg-form { max-width: 720px; margin-bottom: 26px; }
.sg-compte { font-size: .8rem; text-align: right; margin-top: 4px; }
.sg-liste { display: grid; gap: 12px; }
.sg-carte { gap: 8px; }
.sg-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sg-tete .doux { font-size: .85rem; margin-left: auto; }
.sg-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-page { margin: 0; font-size: .85rem; }
.sg-page code { background: var(--surface-2); padding: 1px 6px; border-radius: var(--rayon-petit); }
.sg-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--braise); background: var(--surface-2); border-radius: var(--rayon-petit); overflow-wrap: anywhere; }
.sg-traiter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--trait); padding-top: 10px; }
.sg-traiter select { flex: 0 1 160px; }
.sg-traiter input { flex: 1 1 220px; }

/* bouton flottant, présent sur toutes les pages */
.sg-bouton { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface-2); color: var(--doux); font-weight: 600; font-size: .85rem; cursor: pointer; box-shadow: var(--ombre); transition: color .15s, border-color .15s, transform .1s; }
.sg-bouton:hover { color: var(--encre); border-color: var(--braise); }
.sg-bouton:active { transform: scale(.96); }
.sg-bouton[hidden] { display: none; }
.sg-bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-fond { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .6); }
.sg-fond[hidden] { display: none; }
.sg-fenetre { width: min(520px, 100%); max-height: 100%; overflow-y: auto; box-shadow: var(--ombre); }
.sg-boutons { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  /* téléphone : une icône seule, au-dessus des onglets du bas */
  .sg-bouton { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 12px; }
  .sg-bouton span { display: none; }
  .sg-tete .doux { margin-left: 0; }
}

/* accueil : bandeau « Bonsoir Odor » avec fond de tendance et éventail d'affiches */
.accueil-tete { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 40px 36px; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--trait); isolation: isolate; min-height: 260px; }
.accueil-tete::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--fond, none) center / cover; opacity: .35; filter: saturate(1.1); }
.accueil-tete::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--nuit) 18%, rgb(17 14 12 / .78) 55%, rgb(17 14 12 / .35)), radial-gradient(600px 300px at 0% 0%, rgb(255 122 58 / .18), transparent 70%); }
.accueil-texte { display: grid; gap: 12px; }
.accueil-texte h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.accueil-texte p { margin: 0; font-size: 1.05rem; }
.degrade { background: linear-gradient(90deg, var(--braise), var(--or)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pastille { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; background: rgb(255 255 255 / .05); border: 1px solid var(--trait); font-size: .84rem; font-weight: 600; backdrop-filter: blur(6px); }
.pastille .ico { width: 15px; height: 15px; color: var(--or); }
.pastille.bien { border-color: rgb(95 211 148 / .45); } .pastille.bien .ico { color: var(--bien); }
.pastille.attention { border-color: rgb(255 197 110 / .5); }
.eventail { position: relative; width: 340px; height: 200px; }
.eventail a { position: absolute; top: 0; left: calc(var(--i) * 58px); width: 120px; transform: rotate(calc((var(--i) - 2) * 5deg)) translateY(calc(var(--i) * 3px)); transform-origin: bottom center; transition: transform .25s; z-index: calc(10 - var(--i)); }
.eventail a:hover { transform: translateY(-10px) scale(1.04); z-index: 20; }
.eventail img { width: 120px; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; box-shadow: 0 16px 30px -12px rgb(0 0 0 / .9); border: 1px solid rgb(255 255 255 / .08); }
@media (max-width: 900px) { .accueil-tete { grid-template-columns: 1fr; padding: 26px 20px; } .eventail { display: none; } }

/* serveurs de jeux (livré par Claude.83) */
/* Serveurs de jeux (page façon « game.odor ») : à ajouter à la FIN de hms.css. Mêmes variables, thème « foyer ». */
.jv { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.jv-liste { display: grid; gap: 12px; position: sticky; top: 76px; }
.jv-droite { display: grid; gap: 18px; min-width: 0; }

/* cartes de la liste : grande vignette illustrée */
.jv-carte { position: relative; display: block; width: 100%; aspect-ratio: 460 / 215; padding: 0; overflow: hidden; border-radius: var(--rayon); border: 1px solid var(--trait); background: var(--surface); text-align: left; cursor: pointer; color: var(--encre); transition: border-color .15s, transform .12s; }
.jv-carte:hover { border-color: var(--pale); }
.jv-carte:active { transform: scale(.985); }
.jv-carte.actif { border-color: var(--braise); box-shadow: 0 0 0 1px var(--braise), var(--ombre); }
.jv-carte.allume::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bien); }
.jv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.jv-img.charge { opacity: 1; }
.jv-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(17 14 12 / 0) 25%, rgb(17 14 12 / .88) 100%); }
.jv-carte-texte { position: absolute; left: 14px; right: 14px; bottom: 11px; display: grid; gap: 5px; }
.jv-carte-texte b { font: 700 1.2rem var(--titre); text-shadow: 0 2px 8px rgb(0 0 0 / .6); }
.jv-carte-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jv-carte-ligne small { color: var(--encre); font-weight: 600; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }

/* en-tête du jeu choisi */
.jv-hero { position: relative; overflow: hidden; border-radius: var(--rayon); border: 1px solid var(--trait); min-height: 250px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); display: flex; align-items: flex-end; }
.jv-fond { object-position: center 20%; }
.jv-hero-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(17 14 12 / .92) 0%, rgb(17 14 12 / .55) 55%, rgb(17 14 12 / .2) 100%), linear-gradient(0deg, rgb(17 14 12 / .6), transparent 50%); }
.jv-hero-texte { position: relative; padding: 24px 26px; display: grid; gap: 10px; max-width: 760px; }
.jv-hero-texte h1 { font-size: clamp(2rem, 4vw, 3rem); text-shadow: 0 2px 14px rgb(0 0 0 / .6); }
.jv-sous { margin: 0; color: var(--doux); }
.jv-pastilles { display: flex; gap: 8px; flex-wrap: wrap; }
.jv-adresse { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jv-adresse code { background: rgb(0 0 0 / .45); border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: 8px 12px; font-size: 1.05rem; color: var(--or); user-select: all; }
.jv-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* onglets */
.jv-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.jv-onglet { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px; color: var(--doux); font-weight: 600; cursor: pointer; white-space: nowrap; }
.jv-onglet:hover { color: var(--encre); }
.jv-onglet[aria-selected=true] { color: var(--encre); border-bottom-color: var(--braise); }
.jv-contenu { display: grid; gap: 22px; min-width: 0; }

/* cartes de mesures de la machine */
.jv-mesures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.jv-mesure { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px 16px; display: grid; gap: 6px; }
.jv-m-titre { color: var(--doux); font-size: .85rem; font-weight: 600; }
.jv-m-valeur { font: 700 1.6rem var(--titre); font-variant-numeric: tabular-nums; }
.jv-barre { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.jv-barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--braise), var(--or)); }
.jv-m-sous { font-size: .8rem; overflow-wrap: anywhere; }

/* courbes SVG */
.jv-courbes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.jv-graphique svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.jv-grille { stroke: var(--trait); stroke-width: 1; stroke-dasharray: 3 4; }
.jv-axe { fill: var(--pale); font-size: 11px; font-family: var(--texte); }
.jv-trait { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jv-aire { stroke: none; opacity: .16; }
.jv-trait.c-braise, .jv-legende i.c-braise { stroke: var(--braise); background: var(--braise); }
.jv-trait.c-or, .jv-legende i.c-or { stroke: var(--or); background: var(--or); }
.jv-trait.c-info, .jv-legende i.c-info { stroke: var(--info); background: var(--info); }
.jv-aire.c-braise, .jv-pt.c-braise { fill: var(--braise); }
.jv-aire.c-or, .jv-pt.c-or { fill: var(--or); }
.jv-aire.c-info, .jv-pt.c-info { fill: var(--info); }
.jv-trait { background: none !important; }
.jv-reperage { stroke: var(--pale); stroke-width: 1; opacity: 0; }
.jv-reperage.on { opacity: 1; }
.jv-zone { fill: transparent; }
.jv-valeurs { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; min-height: 1.4em; margin-top: 4px; }
.jv-legende { display: inline-flex; align-items: center; gap: 6px; }
.jv-legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.jv-vide-courbe { padding: 30px 12px; text-align: center; color: var(--doux); border: 1px dashed var(--trait); border-radius: var(--rayon-petit); font-size: .9rem; }
.jv-periode { margin: 0; }

/* le reste */
.jv-rejoindre ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.jv-code { color: var(--or); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.jv-gros { margin: 0; font: 700 2.2rem var(--titre); }
.jv-gros small { font-size: 1.1rem; color: var(--doux); }
.jv-joueurs { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.jv-joueurs li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--nuit); border: 1px solid var(--trait); }
.jv-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; align-items: center; }
.jv-dl dt { color: var(--doux); } .jv-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.jv-historique { list-style: none; padding: 0; margin: 0; display: grid; }
.jv-historique li { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid var(--trait); flex-wrap: wrap; }
.jv-historique li:first-child { border-top: 0; }
.jv-historique .n { color: var(--doux); font-variant-numeric: tabular-nums; min-width: 9.5em; }
.jv-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--braise), var(--or)); color: #1b0e06; font-weight: 700; font-size: .8rem; }

@media (max-width: 900px) {
  .jv { grid-template-columns: 1fr; }
  /* téléphone : la liste devient une bande qui défile sous le titre */
  .jv-liste { position: static; display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .jv-carte { flex: 0 0 min(72vw, 280px); scroll-snap-align: start; }
  .jv-hero { min-height: 210px; }
  .jv-hero-texte { padding: 18px; }
  .jv-hero-voile { background: linear-gradient(0deg, rgb(17 14 12 / .94) 10%, rgb(17 14 12 / .4) 100%); }
  .jv-historique .n { min-width: 0; }
  .jv-axe { font-size: 15px; }
}

/* dashboard (livré par Claude.83) */
/* Dashboard (modérateurs) : à ajouter à la FIN de hms.css, après themes.css. Utilise les variables des thèmes (--grad, --lueur, --verre…). */
.db { display: grid; gap: 22px; }
.db-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; align-items: start; }
.db-carte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; border-radius: var(--rayon); border: 1px solid var(--trait); min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), var(--verre);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -32px rgba(0, 0, 0, .75);
  animation: entree .5s cubic-bezier(.2, .7, .2, 1) both; transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .3s; }
.db-grille > *:nth-child(2) { animation-delay: .05s; } .db-grille > *:nth-child(3) { animation-delay: .1s; } .db-grille > *:nth-child(4) { animation-delay: .15s; }
.db-grille > *:nth-child(5) { animation-delay: .2s; } .db-grille > *:nth-child(n+6) { animation-delay: .25s; }
.db-carte:hover { transform: translateY(-3px); border-color: rgba(var(--lueur), .45); box-shadow: 0 24px 50px -24px rgba(var(--lueur), .5); }
.db-carte.hors { border-color: rgba(251, 113, 133, .4); }
.db-maj, .db-maj * { animation: none !important; }

.db-tete { display: flex; align-items: center; gap: 12px; }
.db-tete.petit { margin-top: 4px; }
.db-nom { flex: 1; min-width: 0; }
.db-nom h3 { font-family: var(--titre); font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-nom p { margin: 2px 0 0; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-ico { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--grad-doux); border: 1px solid var(--trait); color: var(--or); }
.db-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* jauges circulaires animées */
.db-jauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.db-jauge { position: relative; display: grid; justify-items: center; gap: 4px; }
.db-jauge svg { width: 100%; max-width: 92px; height: auto; display: block; overflow: visible; }
.db-piste { fill: none; stroke: var(--trait); stroke-width: 8; }
.db-arc { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .7, .2, 1), stroke .4s; filter: drop-shadow(0 0 6px rgba(var(--lueur), .55)); }
.db-arc.bien { stroke: var(--bien); } .db-arc.attention { stroke: var(--attention); } .db-arc.mal { stroke: var(--mal); }
.db-jauge-val { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1; max-width: 92px; margin: 0 auto; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.db-jauge-val b { font: 700 1.25rem var(--titre); font-variant-numeric: tabular-nums; }
.db-jauge-val small { font-size: .68rem; color: var(--doux); }
.db-jauge-titre { font-size: .76rem; color: var(--doux); font-weight: 600; }

.db-detail { margin: 0; font-size: .82rem; overflow-wrap: anywhere; }
.db-disque-t { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--doux); margin-bottom: 4px; }
.db-barre { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.db-barre i { display: block; height: 100%; border-radius: 3px; }
.db-barre i.bien { background: var(--bien); } .db-barre i.attention { background: var(--attention); } .db-barre i.mal { background: var(--mal); }
.db-ligne { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; font-variant-numeric: tabular-nums; }
.db-courbes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.db-courbes.un { grid-template-columns: minmax(0, 1fr); }
.db-courbes small { font-size: .72rem; }
.db-spark { width: 100%; height: 40px; display: block; margin-top: 2px; }
.db-spark.vide { display: grid; place-items: center; font-size: .72rem; color: var(--pale); border: 1px dashed var(--trait); border-radius: var(--rayon-petit); }
.db-spark-trait { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.db-spark-aire { stroke: none; opacity: .18; }
.db-spark-trait.c-braise { stroke: var(--braise); } .db-spark-aire.c-braise { fill: var(--braise); }
.db-spark-trait.c-or { stroke: var(--or); } .db-spark-aire.c-or { fill: var(--or); }
.db-spark-trait.c-info { stroke: var(--info); } .db-spark-aire.c-info { fill: var(--info); }

.db-sans { display: grid; gap: 4px; padding: 18px 14px; text-align: center; border: 1px dashed var(--trait); border-radius: var(--rayon-petit); font-size: .88rem; }
.db-dispo { margin: 0; font-size: .82rem; }
.db-dispo b.bien { color: var(--bien); } .db-dispo b.attention { color: var(--attention); } .db-dispo b.mal { color: var(--mal); }
.db-services summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .86rem; color: var(--doux); list-style: none; }
.db-services summary::-webkit-details-marker { display: none; }
.db-services summary::before { content: "▸"; transition: transform .2s; }
.db-services[open] summary::before { transform: rotate(90deg); }
.db-service { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--trait); font-size: .86rem; }
.db-services[open] summary { margin-bottom: 6px; }

.db-latences { display: flex; gap: 22px; flex-wrap: wrap; }
.db-gros { font-size: 1rem; color: var(--doux); }
.db-gros b { font: 700 1.7rem var(--titre); font-variant-numeric: tabular-nums; }
.db-gros b.bien { color: var(--bien); } .db-gros b.attention { color: var(--attention); } .db-gros b.mal { color: var(--mal); }
.db-sans-debit { margin: 0; font-size: .78rem; }
.db-ia { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--trait); }

@media (max-width: 900px) {
  .db-grille { grid-template-columns: 1fr; }
}

/* administration (livré par Claude.83) */
/* Dashboard administrateur : à ajouter à la FIN de hms.css. Mêmes variables que les thèmes (--grad, --lueur, --verre…). */
.ad-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); overflow-x: auto; }
.ad-onglet { background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 16px; color: var(--doux); font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
.ad-onglet:hover { color: var(--encre); }
.ad-onglet[aria-selected=true] { color: var(--encre); border-bottom-color: var(--braise); box-shadow: 0 10px 20px -14px rgba(var(--lueur), .9); }
.ad-contenu { display: grid; gap: 22px; min-width: 0; margin-top: 18px; }
.ad-filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ad-filtres > div { flex: 1 1 170px; }
.ad-filtres .ad-recherche { flex: 2 1 240px; }
.ad-pages { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ad-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ad-ligne > div { flex: 1 1 320px; }
.ad-etapes { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ad-contenu code, .encart code { background: var(--surface-2); padding: 1px 6px; border-radius: var(--rayon-petit); font-size: .85em; overflow-wrap: anywhere; }
.ad-contenu .table table td { vertical-align: middle; }
@media (max-width: 900px) { .ad-onglet { padding: 10px 12px; } }

/* ─── Téléchargements (client torrent) ─── */
.tc-haut { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr); gap: 14px; }
.tc-haut .tc-tuiles { grid-column: 1 / -1; }
.tc-vpn.ok { box-shadow: inset 0 0 0 1px rgb(95 211 148 / .25), 0 0 40px -18px rgb(95 211 148 / .6); }
.tc-vpn.ko { box-shadow: inset 0 0 0 1px rgb(255 111 111 / .3), 0 0 40px -18px rgb(255 111 111 / .6); }
.tc-debits canvas { width: 100%; height: 110px; display: block; }
.tc-legende { display: flex; gap: 14px; font-variant-numeric: tabular-nums; font-weight: 600; }
.tc-legende .dl { color: var(--info); } .tc-legende .up { color: var(--bien); }
.tc-filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-filtres button, .tc-onglets button { border: 1px solid var(--trait); background: var(--surface); color: var(--texte); border-radius: 999px; padding: 6px 14px; cursor: pointer; font: inherit; }
.tc-filtres button.actif, .tc-onglets button.actif { background: linear-gradient(90deg, var(--braise), var(--or)); color: #1b0e06; border-color: transparent; font-weight: 700; }
.tc-onglets { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-liste { gap: 0; padding: 8px; overflow-x: auto; }
.tc-ligne { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(120px, 1.4fr) 120px 92px 92px 70px 56px 78px; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 10px; padding: 10px; color: inherit; font: inherit; cursor: pointer; min-width: 860px; }
.tc-ligne:hover { background: var(--surface-2); }
.tc-ligne.choisi { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--braise); }
.tc-entete { cursor: default; color: var(--doux); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.tc-entete:hover { background: none; }
.tc-nom { display: grid; min-width: 0; } .tc-nom b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-prog { display: flex; align-items: center; gap: 8px; } .tc-prog .jauge { flex: 1; }
.tc-chiffre { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-ligne.telechargement .jauge i { animation: tc-flux 1.6s linear infinite; background-size: 200% 100%; background-image: linear-gradient(90deg, var(--braise), var(--or), var(--braise)); }
@keyframes tc-flux { to { background-position: -200% 0; } }
.tc-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tc-infos div { display: grid; gap: 2px; } .tc-infos .large { grid-column: 1 / -1; }
.tc-infos span { color: var(--doux); font-size: .8rem; } .tc-infos b { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tc-table { display: grid; gap: 2px; overflow-x: auto; }
.tc-tete, .tc-rang { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr .8fr .8fr 1fr; gap: 10px; padding: 6px 8px; min-width: 620px; align-items: center; }
.tc-tete { color: var(--doux); font-size: .78rem; text-transform: uppercase; }
.tc-rang:nth-child(even) { background: var(--surface-2); border-radius: 8px; }
.tc-rang.tc-fichier { grid-template-columns: 3fr 1fr 1.2fr; }
.tc-ajout textarea { width: 100%; }
@media (max-width: 760px) {
  .tc-haut { grid-template-columns: 1fr; }
}

/* ─── Hestiarr (Radarr + Sonarr + Prowlarr) ─── */
.ar-onglets a { border: 1px solid var(--trait); background: var(--surface); color: var(--texte); border-radius: 999px; padding: 7px 16px; text-decoration: none; }
.ar-onglets a.actif { background: linear-gradient(90deg, var(--braise), var(--or)); color: #1b0e06; border-color: transparent; font-weight: 700; }
.ar-lignes { display: grid; gap: 4px; max-height: 520px; overflow: auto; }
.ar-barre { display: flex; gap: 8px; } .ar-barre input { flex: 1; min-width: 0; }
.ar-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ar-carte { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: start; background: var(--surface-2); border-radius: 12px; padding: 10px; }
.ar-carte img, .ar-carte .vide { width: 70px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; background: var(--surface); }
.ar-saison { display: inline-flex; gap: 6px; align-items: center; } .ar-saison input { width: 64px; }
.ar-indexeurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ar-indexeur { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 14px; padding: 14px; display: grid; gap: 6px; }
.ar-indexeur.bien { box-shadow: 0 0 30px -16px rgb(95 211 148 / .8); } .ar-indexeur.mal { box-shadow: 0 0 30px -16px rgb(255 111 111 / .8); }
.ar-res { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 14px; }
.ar-case { display: inline-flex !important; align-items: center; gap: 8px; }
.hs-reglages label.ar-case { display: flex !important; flex-direction: row; align-items: center; gap: 10px; text-align: left; }
.hs-reglages label.ar-case input { width: auto; flex: none; }

/* un bandeau d'information passe à la ligne (une puce ne le fait pas : elle élargissait toute la page sur téléphone) */
.puce.bandeau { white-space: normal; display: block; border-radius: 12px; line-height: 1.4; }
/* le type et la note ne se chevauchent jamais : le type peut se couper */
.type-coin { max-width: calc(100% - 76px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Téléchargements sur téléphone : chaque torrent devient une carte (pas de défilement de côté) */
@media (max-width: 760px) {
  .tc-liste { overflow-x: visible; }
  .tc-entete { display: none; }
  .tc-ligne { min-width: 0; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "nom nom etat" "prog prog prog"; row-gap: 8px;
    border-bottom: 1px solid var(--trait); border-radius: 0; }
  .tc-ligne .tc-nom { grid-area: nom; } .tc-ligne .puce { grid-area: etat; justify-self: end; } .tc-ligne .tc-prog { grid-area: prog; }
  .tc-ligne .tc-chiffre { font-size: .82rem; }
  .tc-ligne .tc-chiffre::before { content: attr(data-l) " "; color: var(--doux); font-size: .72rem; }
  .tc-tete, .tc-rang { min-width: 0; grid-template-columns: 1fr 1fr; }
  .tc-rang.tc-fichier { grid-template-columns: 1fr; }
}