/* ============================================================
   BideoGemu.fr — the single stylesheet of the creator site.
   Direction "Cartouche": the video game as an object — plastic shell,
   printed label, gold connector. The mechanics section reuses the same
   card as a maker's plate variant.
   No front dependency, no build: this file is served as is.
   ============================================================ */

:root{
  --carton:#E7E1D4;      /* booklet paper */
  --coque:#D6CFBF;       /* plastic shell */
  --coque-2:#C9C1AE;
  --encre:#1D1A16;
  --encre-2:#5A5348;
  --bleu:#1B5FA6;        /* accent: links, rules, buttons */
  --bleu-2:#123F73;
  --rouge:#CE2027;       /* Famicom red — signal only: live, expiry, alert */
  --rouge-2:#9C1218;
  --or:#B8912C;          /* gold connector */
  --acier:#8C8F93;       /* mechanics variant: maker's plate */
  --acier-2:#6F7276;
  --trait:rgba(29,26,22,.20);
  --trait-fin:rgba(29,26,22,.10);
  --ombre:rgba(29,26,22,.16);
  --serif:"Bookman Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --etroit:"Arial Narrow","Liberation Sans Narrow","Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",ui-monospace,monospace;
  --maxw:1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --carton:#181519; --coque:#241F26; --coque-2:#2E2831;
    --encre:#EFE8DA; --encre-2:#A9A093;
    --bleu:#5FA3E8; --bleu-2:#3B7FC4;
    --rouge:#F2454C; --rouge-2:#C8262D; --or:#D8AE41;
    --acier:#7E8288; --acier-2:#5C6066;
    --trait:rgba(239,232,218,.22); --trait-fin:rgba(239,232,218,.11);
    --ombre:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --carton:#181519; --coque:#241F26; --coque-2:#2E2831;
  --encre:#EFE8DA; --encre-2:#A9A093;
  --bleu:#5FA3E8; --bleu-2:#3B7FC4;
  --rouge:#F2454C; --rouge-2:#C8262D; --or:#D8AE41;
  --acier:#7E8288; --acier-2:#5C6066;
  --trait:rgba(239,232,218,.22); --trait-fin:rgba(239,232,218,.11);
  --ombre:rgba(0,0,0,.45);
}

*{box-sizing:border-box}
/* The hidden attribute only sets display:none in the UA sheet, so any
   author rule beats it. Reassert it once, for good. */
[hidden]{display:none !important}
body{
  /* Colonne pleine hauteur : sur une page courte, le pied reste en bas
     au lieu de flotter au milieu de l'écran. */
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--carton); color:var(--encre);
  font-family:var(--serif); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(60% 40% at 20% 0%,rgba(184,145,44,.10),transparent 60%),
    radial-gradient(50% 40% at 100% 20%,rgba(27,95,166,.10),transparent 60%);
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
:focus-visible{outline:2.5px solid var(--bleu); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; width:100%}
.etiq{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-2)}

/* ============================================================
   TOP BAR AND NAVIGATION
   ============================================================ */
.haut{border-bottom:1px solid var(--bleu); background:linear-gradient(180deg,var(--coque),transparent)}
.haut .wrap{display:flex; gap:16px; align-items:center; min-height:36px; flex-wrap:wrap}
.haut .etiq{color:var(--bleu)}
.haut .studio{margin-left:auto; color:var(--bleu); border-bottom:1px solid transparent}
.haut .studio:hover{border-bottom-color:var(--bleu)}

nav.barre{position:sticky; top:0; z-index:20; background:var(--carton); border-bottom:2px solid var(--bleu)}
nav.barre .wrap{display:flex; align-items:center; gap:26px; min-height:70px; flex-wrap:wrap}
.marque{font-family:var(--etroit); font-weight:700; font-size:25px; letter-spacing:.14em; text-transform:uppercase; line-height:1}
.marque s{text-decoration:none; color:var(--bleu)}
.marque span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.42em; color:var(--encre-2); margin-top:3px}
nav.barre menu{
  list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:22px; flex-wrap:wrap;
  font-family:var(--etroit); font-size:14px; letter-spacing:.13em; text-transform:uppercase;
}
nav.barre menu a{padding:3px 0; border-bottom:2px solid transparent; display:inline-block}
nav.barre menu a:hover{border-bottom-color:var(--or)}
nav.barre menu a.on{border-bottom-color:var(--bleu)}
.burger{
  display:none; margin-left:auto; font-family:var(--etroit); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; background:transparent; border:2px solid var(--encre); padding:8px 14px; cursor:pointer;
  color:inherit;
}

/* ============================================================
   THE CARTRIDGE — the signature of the site
   ============================================================ */
.cart{
  position:relative; display:block; padding:14px 14px 0;
  background:linear-gradient(180deg,var(--coque),var(--coque-2));
  border:1px solid var(--trait); border-radius:12px 12px 3px 3px;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 18px -14px var(--ombre);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cart::before{
  content:""; position:absolute; top:6px; left:26px; right:26px; height:4px; border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--trait-fin) 0 3px,transparent 3px 8px);
}
a.cart:hover{transform:translateY(3px); box-shadow:0 14px 22px -16px var(--ombre)}
.cart .label{
  background:var(--carton); border:1px solid var(--trait);
  padding:14px 14px 12px; min-height:126px; display:flex; flex-direction:column; gap:7px;
  box-shadow:0 1px 3px rgba(29,26,22,.10) inset;
}
.cart .serie{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.cart h3{margin:0; font-family:var(--serif); font-size:19px; line-height:1.24; text-wrap:balance}
.cart p{margin:0; font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--encre-2)}
.cart .vue{margin:0; border:1px solid var(--trait); border-bottom:0; line-height:0; overflow:hidden}
.cart .vue img{display:block; width:100%; height:auto; aspect-ratio:460/215; object-fit:cover}
.cart .bande{height:7px; margin:12px -14px 0; background:var(--rouge)}
.cart .contacts{
  height:24px; margin:0 -14px; border-top:1px solid var(--trait);
  background:
    repeating-linear-gradient(90deg,var(--or) 0 9px,transparent 9px 15px),
    linear-gradient(180deg,var(--coque-2),var(--coque));
  background-size:auto 12px, auto auto; background-repeat:repeat-x, no-repeat;
  background-position:center 6px, 0 0; border-radius:0 0 3px 3px;
}

/* mechanics variant: riveted maker's plate, no connector */
.cart.plaque{
  background:linear-gradient(180deg,var(--acier),var(--acier-2));
  border-radius:4px; border-color:rgba(0,0,0,.35);
}
.cart.plaque::before{
  left:10px; right:10px; top:9px; height:6px; border-radius:0;
  background:
    radial-gradient(circle at 4px 3px,rgba(255,255,255,.55) 0 2px,transparent 2px),
    radial-gradient(circle at calc(100% - 4px) 3px,rgba(255,255,255,.55) 0 2px,transparent 2px);
}
.cart.plaque .label{background:var(--carton); border-color:rgba(0,0,0,.35)}
.cart.plaque .bande{background:var(--or)}
.cart.plaque .contacts{display:none}
.cart.plaque .pied{
  height:16px; margin:0 -14px; border-top:1px solid rgba(0,0,0,.3); border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,var(--acier-2),var(--acier));
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:56px 0 44px; border-bottom:1px solid var(--trait)}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center}
h1{
  margin:12px 0 18px; font-family:var(--etroit); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,6vw,62px); line-height:.98; letter-spacing:.02em; text-wrap:balance;
}
h1 s{text-decoration:none; color:var(--bleu)}
.chapo{margin:0 0 26px; font-size:17.5px; max-width:46ch; color:var(--encre-2)}
.actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.btn{
  display:inline-block; font-family:var(--etroit); font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; padding:12px 20px; border:2px solid var(--bleu); color:var(--bleu);
  background:transparent; cursor:pointer; transition:background .15s ease, color .15s ease;
}
.btn:hover{background:var(--bleu); color:var(--carton)}
.btn.plein{background:var(--bleu); color:var(--carton)}
.btn.plein:hover{background:var(--bleu-2); border-color:var(--bleu-2)}
.btn.gris{border-color:var(--trait); color:var(--encre-2)}
.btn.gris:hover{background:transparent; border-color:var(--encre); color:var(--encre)}
.vedette .cart{padding:18px 18px 0; border-radius:16px 16px 4px 4px}
.vedette .label{min-height:230px; justify-content:space-between}
.vedette .kana{font-family:var(--mono); font-size:clamp(26px,4vw,40px); letter-spacing:.3em; color:var(--bleu); line-height:1.2}
.fente{
  margin:14px auto 0; width:78%; height:12px; border-radius:2px;
  background:linear-gradient(180deg,rgba(29,26,22,.45),rgba(29,26,22,.15));
  box-shadow:0 2px 0 rgba(255,255,255,.25);
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:52px 0; border-bottom:1px solid var(--trait)}
.tete{display:flex; align-items:baseline; gap:16px; margin-bottom:8px; flex-wrap:wrap}
.tete h1,.tete h2{margin:0; font-family:var(--etroit); font-weight:700; text-transform:uppercase; font-size:29px; letter-spacing:.06em}
.tete .no{font-family:var(--mono); font-size:12px; color:var(--bleu); letter-spacing:.2em}
.tete .apart{margin-left:auto}
.note{margin:0 0 28px; color:var(--encre-2); max-width:64ch}
/* minmax(0,1fr) rather than 1fr: « 1fr » means « minmax(auto,1fr) », so a card
   holding something unbreakable widens its column at the others' expense. */
.rangee{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:stretch;
  /* Every row as tall as the tallest: otherwise each row sizes to its own
     content and the cartridges change size down the page. */
  grid-auto-rows:1fr;
}
.rangee.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.rangee.quatre{grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
/* Every card grid behaves the same: the cell stretches, the cartridge fills
   it, and the label takes the slack so all cards end at the same line. */
.rangee > div{display:flex; min-width:0}
.rangee > div > .cart,.rangee > .cart{width:100%; display:flex; flex-direction:column}
.rangee .label{flex:1; min-height:0}
.rangee .cart h3{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.5em;
}
.rangee .cart .label > p{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vide{margin:0; padding:26px; border:1px dashed var(--trait); color:var(--encre-2); font-family:var(--sans); font-size:14px}

/* cross-link block towards another site */
.renvoi{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; border:2px solid var(--encre); padding:26px 28px; background:var(--coque)}
.renvoi h3{margin:0 0 8px; font-family:var(--etroit); text-transform:uppercase; letter-spacing:.06em; font-size:22px}
.renvoi p{margin:0; color:var(--encre-2); max-width:56ch}

/* ============================================================
   KEYS — controls, listing and state
   ============================================================ */
.controles{display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; margin:0 0 18px}
.controles .champ{margin:0; min-width:min(300px,100%)}
/* Both controls share one height: an input and a summary do not measure the
   same on their own, and the mismatch shows immediately side by side. */
.controles .champ > input,.controles .styles summary{
  height:46px; padding:0 16px; display:flex; align-items:center;
}
.styles{position:relative}
.styles summary{
  cursor:pointer; padding:11px 16px; list-style:none;
  border:1px solid var(--trait); background:var(--carton);
  font-family:var(--etroit); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
}
.styles summary::-webkit-details-marker{display:none}
.styles summary::after{content:" ▾"; color:var(--bleu)}
/* The panel floats over the page: opening a filter must not shove the list. */
.styles-panneau{
  position:absolute; top:calc(100% + 4px); left:0; z-index:30; min-width:340px;
  border:1px solid var(--encre); background:var(--carton);
  box-shadow:0 18px 30px -20px var(--ombre);
}
.styles-liste{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 16px;
  padding:14px 16px; max-height:260px; overflow:auto;
}
/* These labels sit inside a .champ block, whose rules would turn them into
   uppercase mono captions and stretch the checkboxes to full width. */
.styles .styles-liste label{
  display:flex; gap:8px; align-items:center; text-align:left;
  font-family:var(--sans); font-size:13.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--encre);
}
.styles .styles-liste input[type="checkbox"]{
  width:auto; min-width:0; margin:0; padding:0; flex:none;
  border:0; background:transparent; accent-color:var(--bleu);
}
.styles-panneau > .btn{display:block; margin:0 16px 14px}

.filtres{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.filtres button{
  font-family:var(--etroit); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px; border:2px solid var(--trait); background:transparent; color:var(--encre-2); cursor:pointer;
}
.filtres button:hover{border-color:var(--encre); color:var(--encre)}
.filtres button.on{border-color:var(--bleu); color:var(--bleu)}
.compte-resultats{
  margin:0 0 20px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--encre-2);
}

/* Every cartridge the same height, whatever the length of its title. */
.bas-carte{margin-top:auto; padding-top:10px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.pegi{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--encre);
  border:1px solid var(--encre); padding:2px 6px; white-space:nowrap;
}
.etat{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:3px 7px; border:1px solid currentColor}
.etat.dispo{color:#2E7D32}
.etat.donnee{color:var(--encre-2)}
.peremption{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--rouge)}
.gagnant{font-family:var(--sans); font-size:12.5px; color:var(--encre-2)}
.gagnant b{color:var(--encre); font-weight:600}
.chiffres{display:flex; gap:28px; flex-wrap:wrap; margin:0 0 26px; padding:16px 0; border-top:1px solid var(--trait); border-bottom:1px solid var(--trait)}
.chiffres div{display:grid; gap:2px}
.chiffres b{font-family:var(--etroit); font-size:27px; line-height:1; letter-spacing:.02em}

/* ============================================================
   STEAM — library, completion and platinum
   ============================================================ */
.succes{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--encre-2); text-transform:uppercase}
.pourcent{
  margin-left:auto; font-family:var(--etroit); font-weight:700; font-size:15px; letter-spacing:.04em;
}
/* Completion reads at a glance: the colour carries the same message as the bar. */
.pourcent.niv-debut{color:#B03A3A}
.pourcent.niv-bas{color:#C4741C}
.pourcent.niv-moyen{color:var(--or)}
.pourcent.niv-haut{color:#3F7D3B}
.pourcent.niv-platine{color:#6E7B86}

.jauge{display:block; height:6px; margin-top:9px; padding:0; border:0; background:var(--trait-fin); overflow:hidden}
.jauge i{display:block; height:100%; background:var(--acier)}
.jauge.niv-debut i{background:#B03A3A}
.jauge.niv-bas i{background:#C4741C}
.jauge.niv-moyen i{background:var(--or)}
.jauge.niv-haut i{background:#3F7D3B}
.jauge.niv-platine i{
  background:linear-gradient(90deg,#8A939B,#D9DEE3 45%,#8A939B);
}

/* The platinum badge: a foil sticker pressed on the printed label. */
.platine{
  font-family:var(--etroit); font-weight:700; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#2A2F35; padding:3px 9px; white-space:nowrap;
  background:linear-gradient(135deg,#C9CFD6 0%,#F2F5F8 30%,#A8B2BC 55%,#EDF1F5 78%,#B7C0C9 100%);
  border:1px solid #8A939B;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 5px -3px var(--ombre);
}

.jeux{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px}

/* ============================================================
   LONG FORM — news item, tutorial, machine sheet
   ============================================================ */
.corps-texte{max-width:none; font-size:16.5px}
.corps-texte h1,.corps-texte h2{font-family:var(--etroit); text-transform:uppercase; letter-spacing:.05em; font-size:24px; margin:38px 0 12px}
.corps-texte p{margin:0 0 16px; line-height:1.8}
.corps-texte ul{margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px}
.corps-texte li{position:relative; padding-left:20px}
.corps-texte li::before{content:""; position:absolute; left:0; top:.78em; width:11px; height:2px; background:var(--bleu)}
.corps-texte img{border:1px solid var(--trait)}
.corps-texte pre{
  margin:0 0 18px; padding:14px 16px; overflow-x:auto; max-width:100%;
  background:var(--coque); border:1px solid var(--trait); border-left:3px solid var(--bleu);
}
.corps-texte code{font-family:var(--mono); font-size:.88em}

/* --- page d'erreur : la cartouche qui ne fait pas contact --- */
.err{
  /* La page occupe ce qui reste sous l'en-tête : une erreur sur un tiers
     d'écran, avec du vide en dessous, a l'air d'un site cassé. */
  flex:1; display:flex; align-items:center; padding:40px 0;
}
.err-grille{display:grid; grid-template-columns:1fr 330px; gap:60px; align-items:center}
.err-code{
  display:block; font-family:var(--mono); font-size:clamp(52px,10vw,96px); line-height:1;
  letter-spacing:.06em; color:var(--bleu);
}
.err h2{font-family:var(--etroit); text-transform:uppercase; letter-spacing:.05em; font-size:clamp(26px,3.8vw,40px); margin:12px 0 18px}
.err-dit p{margin:0; line-height:1.8; max-width:56ch; font-size:16.5px}
.err-cart{transform:rotate(-3deg)}
.err-cart .cart{cursor:default}
.err-cart .label{min-height:158px}
.err-kana{margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.5em; color:var(--rouge)}
@media (max-width:820px){
  .err{padding:30px 0}
  .err-grille{grid-template-columns:1fr; gap:34px}
  .err-cart{max-width:290px}
}

/* --- liste de définitions des pages légales --- */
.def{margin:0 0 22px; display:grid; gap:1px; background:var(--trait); border:1px solid var(--trait)}
.def > div{background:var(--coque); padding:12px 16px; display:grid; grid-template-columns:14em 1fr; gap:16px}
.def dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-2); align-self:start; padding-top:3px;
}
.def dd{margin:0; font-size:15px; line-height:1.7}
@media (max-width:700px){ .def > div{grid-template-columns:1fr; gap:4px} }
.couverture{margin:6px 0 30px; border:1px solid var(--trait); line-height:0}
.couverture img{display:block; width:100%; height:auto; object-fit:cover}
.credit{margin:-24px 0 26px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--encre-2)}
.galerie{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin:0 0 26px}
.galerie img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--trait)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid; gap:2px; background:var(--trait); border:1px solid var(--trait)}
.faq details{background:var(--carton); padding:15px 18px}
.faq summary{cursor:pointer; font-family:var(--etroit); text-transform:uppercase; letter-spacing:.07em; font-size:15px}
.faq summary::marker{color:var(--bleu)}
.faq p{margin:10px 0 0; color:var(--encre-2)}

/* ============================================================
   FOOTER — the instruction notice
   ============================================================ */
footer{margin-top:auto; background:var(--coque); border-top:2px solid var(--bleu)}
.notice{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--trait)}
.notice > div{background:var(--coque); padding:18px 20px}
.notice dt{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-2)}
.notice dd{margin:6px 0 0; font-family:var(--sans); font-size:14px}
/* Les chaînes et boutiques qui vivent ailleurs, juste au-dessus du bas de page. */
.ailleurs{
  list-style:none; margin:0; padding:16px 0 0; display:flex; flex-wrap:wrap; gap:10px 26px;
  border-top:1px solid var(--trait);
}
.ailleurs li{display:flex; align-items:baseline; gap:8px}
.ailleurs a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre);
}
.ailleurs a:hover{color:var(--bleu)}
.ailleurs .quoi{font-family:var(--sans); font-size:12.5px; color:var(--encre-2)}

.bas{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding:14px 0;
  border-top:1px solid var(--bleu); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--encre-2);
}
.bas .copy{color:var(--bleu)}
.bas a:hover{color:var(--bleu)}
.bas .fr{margin-left:auto; color:var(--bleu)}

/* ============================================================
   FORMS AND MESSAGES
   ============================================================ */
.champ{display:grid; gap:6px; margin:0 0 18px}
.champ label{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--encre-2)}
.champ input,.champ textarea,.champ select{
  font-family:var(--sans); font-size:15px; color:var(--encre);
  background:var(--carton); border:1px solid var(--trait); padding:11px 14px; width:100%;
}
.champ input:focus,.champ textarea:focus{outline:0; border-color:var(--bleu)}

/* --- champ mot de passe avec bouton d'affichage --- */
.champ-mdp{display:flex; gap:10px; align-items:stretch}
.champ-mdp input{flex:1}
.voir-mdp{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-2); background:transparent; border:1px solid var(--trait);
  padding:0 12px; cursor:pointer; white-space:nowrap;
  transition:border-color .15s ease, color .15s ease;
}
.voir-mdp:hover{border-color:var(--bleu); color:var(--encre)}
.voir-mdp[aria-pressed="true"]{border-color:var(--bleu); color:var(--bleu)}
.flash{font-family:var(--mono); font-size:12px; padding:11px 14px; margin:0 0 20px; background:var(--rouge); color:var(--carton)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:34px}
  .rangee,.rangee.deux,.rangee.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notice{grid-template-columns:1fr 1fr}
  .renvoi{grid-template-columns:1fr}
}
@media (max-width:620px){
  .rangee,.rangee.deux,.rangee.quatre{grid-template-columns:minmax(0,1fr)}
  .notice{grid-template-columns:1fr}
  .burger{display:inline-block}
  nav.barre menu{display:none; width:100%; margin:0 0 14px; flex-direction:column; gap:12px}
  nav.barre menu.ouvert{display:flex}
  .chiffres{gap:18px}
}

/* ============================================================
   VIDEOS — listing and paging
   ============================================================ */
.cart .vue.seize-neuf img{aspect-ratio:16/9}
.duree{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; color:var(--encre);
  border:1px solid var(--trait); padding:2px 6px; white-space:nowrap;
}
.vues{margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--encre-2)}
.btn-filtre{
  font-family:var(--etroit); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px; border:2px solid var(--trait); color:var(--encre-2); display:inline-block;
}
.btn-filtre:hover{border-color:var(--encre); color:var(--encre)}
.btn-filtre.on{border-color:var(--bleu); color:var(--bleu)}
.pagination{display:flex; gap:16px; align-items:center; justify-content:center; margin:34px 0 0}

/* ============================================================
   SERIES — state badge, chips and stats
   ============================================================ */
.cart .vue{position:relative}
.etat-serie{
  position:absolute; top:0; right:0; padding:4px 9px;
  font-family:var(--etroit); font-weight:700; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--carton); background:var(--encre);
}
.etat-serie.termine{background:#3F7D3B}
.etat-serie.en_cours{background:var(--bleu)}
.etat-serie.ponctuel{background:var(--or); color:#2A2F35}

.puces{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:2px}
.puce{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--encre-2); border:1px solid var(--trait); padding:2px 7px; white-space:nowrap;
}
.lire{
  margin-left:auto; font-family:var(--etroit); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bleu);
}
a.cart:hover .lire{color:var(--bleu-2)}

/* --- adresse révélée au clic, jamais écrite dans la source --- */
.courriel-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bleu); background:transparent; border:1px solid var(--trait);
  padding:3px 9px; cursor:pointer;
}
.courriel-btn:hover{border-color:var(--bleu)}
.courriel-lien{border-bottom:1px solid var(--trait)}
.courriel-lien:hover{color:var(--bleu); border-bottom-color:var(--bleu)}

/* ============================================================
   LIVE — bandeau affiché seulement quand la chaîne émet
   ============================================================ */
.direct{display:block; background:var(--rouge); color:#FFF6F4}
.direct .wrap{display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding-top:9px; padding-bottom:9px}
.direct-pastille{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--etroit); font-weight:700;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
}
.direct-pastille i{
  width:9px; height:9px; border-radius:50%; background:#FFF6F4;
  box-shadow:0 0 0 0 rgba(255,246,244,.7); animation:battement 1.8s infinite;
}
@keyframes battement{
  70%{box-shadow:0 0 0 9px rgba(255,246,244,0)}
  100%{box-shadow:0 0 0 0 rgba(255,246,244,0)}
}
.direct-titre{font-family:var(--sans); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52ch}
.direct-jeu{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid rgba(255,246,244,.5); padding:2px 8px}
.direct-voir{margin-left:auto; font-family:var(--etroit); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.direct:hover .direct-voir{text-decoration:underline}
@media (max-width:620px){ .direct-titre{max-width:100%} .direct-voir{margin-left:0} }