/* smileplus front ver 2.229 · publié le 02/10/2026 */
/* Front public SMILE+ : charte de la maquette validee du 10/09
   (Drive : MARKETING 2.0/09_AUTOMATION_ET_TECH/maquette-front-2026-09-10.css).
   Repris TELS QUELS, sans jeton invente ni renomme : les jetons, le theme sombre et ses trois
   declarations, la base, l'en-tete, le pied de page, les sections, les rails, les vignettes,
   l'affiche typographique, les pastilles, les boutons, l'en-tete de page et les intervenants.
   Laisse de cote (instruction du 18/09) : ruban maquette, hero et recherche IA, journee, Smile+ News,
   communaute, formations, solutions, offres, fondateur, tiroirs, toast, journal.
   Seules adaptations : .logo porte le SVG officiel Smile_Plus_Logo_Principal_White (la maquette utilisait un masque --logo absent du CSS),
   et un court bloc « propre au front » en fin de fichier, ecrit avec les jetons de la charte. */

:root{
  /* Charte SMILE+ (Smile_Plus_Concept_Identite) */
  --night:#00002C; --deep:#072566; --blue:#0055FF; --mist:#F6F7FA;
  --violet:#6F49FF; --cyan:#32C5FF; --turq:#26DDCF; --rose:#F958B1;
  --plus:#001040;
  /* thème clair */
  --bg:#F6F7FA; --surface:#FFFFFF; --surface-2:#EEF1F8; --ink:#00002C; --ink-2:#4A5078; --ink-3:#7B80A3;
  --title:#072566; --line:#E2E6F1; --accent:#0055FF; --accent-ink:#FFFFFF; --focus:#0055FF;
  --shadow:0 1px 2px rgba(0,0,44,.06),0 8px 24px -12px rgba(0,0,44,.18);
  --shadow-lg:0 2px 4px rgba(0,0,44,.08),0 24px 48px -20px rgba(0,0,44,.35);
  --chip-violet:#EEEAFF; --chip-cyan:#E3F6FF; --chip-turq:#DDF8F5; --chip-rose:#FFE7F4; --chip-blue:#E5EDFF;
  --ink-violet:#4A2CD1; --ink-cyan:#036A95; --ink-turq:#0A7B72; --ink-rose:#B3136D; --ink-blue:#0045D0;
  --radius:14px; --radius-sm:10px;
  /* lot 9-bis (23/09) : l'or n'existait pas dans la charte ; UN jeton, une valeur par fond : assombri sur le fond clair, clair et chaud sur le fond nuit */
  --or:#9A6E0F;
  --f-display:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#04052A; --surface:#0B0E3A; --surface-2:#12164A; --ink:#ECEFFA; --ink-2:#AEB4D4; --ink-3:#8086AD;
    --title:#FFFFFF; --line:#1D2259; --accent:#3D7BFF; --accent-ink:#FFFFFF; --focus:#32C5FF;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 48px -20px rgba(0,0,0,.8);
    --chip-violet:#231A5E; --chip-cyan:#0B2F4A; --chip-turq:#0A3437; --chip-rose:#3E1435; --chip-blue:#10245C;
    --ink-violet:#BFAEFF; --ink-cyan:#8ADCFF; --ink-turq:#7FEDE3; --ink-rose:#FFA3D6; --ink-blue:#A8C3FF;
    --or:#E9C76B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#04052A; --surface:#0B0E3A; --surface-2:#12164A; --ink:#ECEFFA; --ink-2:#AEB4D4; --ink-3:#8086AD;
  --title:#FFFFFF; --line:#1D2259; --accent:#3D7BFF; --accent-ink:#FFFFFF; --focus:#32C5FF;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.35),0 24px 48px -20px rgba(0,0,0,.8);
  --chip-violet:#231A5E; --chip-cyan:#0B2F4A; --chip-turq:#0A3437; --chip-rose:#3E1435; --chip-blue:#10245C;
  --ink-violet:#BFAEFF; --ink-cyan:#8ADCFF; --ink-turq:#7FEDE3; --ink-rose:#FFA3D6; --ink-blue:#A8C3FF;
  --or:#E9C76B;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--title);margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:1320px;margin:0 auto;padding-inline:max(clamp(16px,3.2vw,40px),env(safe-area-inset-left,0px)) max(clamp(16px,3.2vw,40px),env(safe-area-inset-right,0px))}
.kicker{font:600 11.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--ink-2)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--night);color:#fff;border-bottom:1px solid #12165A}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:68px}
.logo{width:112px;height:27px;flex:none;color:#fff;border:0;padding:0;display:block}
.logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.nav{display:flex;gap:2px;overflow-x:auto;flex:0 1 auto;min-width:0;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font:500 14.5px/1 var(--f-display);text-decoration:none;color:#B7BCE0;padding:9px 11px;border-radius:999px;white-space:nowrap;letter-spacing:-.005em}
.nav a:hover{color:#fff;background:#0C1154}
.nav a[aria-current="page"]{color:#fff;background:#0C1154;box-shadow:inset 0 -2px 0 var(--cyan)}
.hdr-right{margin-left:auto;flex:none;display:flex;gap:10px;align-items:center}
/* bloc de compte (22/09) : dans le groupe de droite, jamais dans le nav qui defile. L'en-tete est bleu nuit dans les
   deux themes : les couleurs du texte pose directement sur lui sont celles de l'en-tete (#B7BCE0, #fff), les jetons
   --surface-2 / --line / --ink habillent la pastille, --focus l'anneau de focus. Rapports mesures dans l'instruction. */
.hdr .compte{display:flex;align-items:center;gap:10px;flex:none}
.hdr .compte a{text-decoration:none;white-space:nowrap;font:500 14px/1 var(--f-display);border-radius:999px}
.hdr .compte .discret{color:#B7BCE0;padding:9px 6px}
.hdr .compte .discret:hover{color:#fff}
.hdr .compte .inscr{background:#0055FF;color:#FFFFFF;font-weight:600;padding:10px 14px}
.hdr .compte .inscr:hover{background:#1A66FF}
.hdr .compte .moi{display:flex;align-items:center;gap:8px;color:#fff;padding:2px 8px 2px 2px}
.hdr .compte .moi:hover .prenom{text-decoration:underline}
.hdr .compte .ini{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);display:grid;place-items:center;font:700 12.5px/1 var(--f-display);letter-spacing:.04em;flex:none}
.hdr .compte a:focus-visible,.hdr .theme-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hdr .compte .inscr:focus-visible{box-shadow:0 0 0 2px #fff}
/* Lot 13 (24/09) : « Se connecter » RESTE VISIBLE dans l'en-tete a toutes les largeurs (jusqu'a la 2.96, .discret etait masque sous 640 px :
   un abonne qui revenait sur son telephone n'avait que « Creer un compte »). Sous 640 px, c'est « Creer un compte » qui cede : il quitte
   l'en-tete et entre dans le menu (.menu-inscr). Cibles tactiles : 44 px de haut au minimum sur mobile. */
@media (max-width:640px){.hdr .compte .prenom{display:none}.hdr .compte .inscr{display:none}.hdr .compte .discret{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-size:15px;color:#fff}.hdr .compte .moi{padding:2px}}
/* Lot 24 (24/09, docs/instructions/2026-09-24-lot-24-statut-de-compte-dans-l-en-tete.md) : le statut du compte sous l'avatar et le bouton Premium.
   L'en-tete est TOUJOURS nuit (background var(--night), quel que soit le theme) : les deux jetons prennent ici leur valeur du fond nuit
   (regle du lot 9-bis, un jeton, une valeur par fond ; --or #E9C76B = le liseré du cadre de l'offre Premium de Mon compte sur fond nuit,
   --ink-2 #AEB4D4). L'etiquette : 10 px, capitales, interlettrage, SANS FOND (une pastille pleine repetee sur toutes les pages serait une
   alerte, c'est une information). Le bouton (.passer-premium, un nom distinct de l'etiquette .statut.premium : la classe .premium seule habillait aussi l'etiquette, mesure en 2.111) : fond transparent, liseré 1px solid var(--or), texte 12 px capitales .10em en --or, pastille
   999px de 32 px de haut, double chevron ascendant 14 px a gauche ; au survol le liseré s'epaissit (2 px, par box-shadow interieur, sans
   deplacement), JAMAIS de remplissage plein : le bleu est l'action, l'or dit qu'une porte est ouverte. */
.hdr .compte{--or:#E9C76B;--ink-2:#AEB4D4}
.hdr .compte .av{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.hdr .compte .statut{font:600 10px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.hdr .compte .statut.gratuit{color:var(--ink-2)}
.hdr .compte .statut.premium{color:var(--or)}
.hdr .compte .passer-premium{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;background:transparent;border:1px solid var(--or);color:var(--or);font:600 12px/1 var(--f-display);letter-spacing:.10em;text-transform:uppercase;border-radius:999px;transition:box-shadow .15s}
.hdr .compte .passer-premium .chev{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hdr .compte .passer-premium:hover{box-shadow:inset 0 0 0 1px var(--or)}
.hdr .compte .passer-premium:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:640px){.hdr .compte .passer-premium{width:32px;padding:0;justify-content:center}.hdr .compte .passer-premium .mot{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid transparent;padding:10px 18px;font:600 14px/1 var(--f-display);text-decoration:none;white-space:nowrap;transition:transform .15s ease,background .15s ease,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#1A66FF}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-line{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:8px 13px;font-size:13px}
.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn{background:none;border:1px solid #1B2170;color:#B7BCE0;border-radius:999px;width:38px;height:38px;display:grid;place-items:center}
.theme-btn:hover{color:#fff;border-color:#2B3496}
/* Lot 13 (24/09, docs/instructions/2026-09-24-lot-13-mobile-connexion-menu-hero.md) : le MENU HAMBURGER remplace la barre de pastilles
   collante .mnav (seconde barre sticky sous l'en-tete, defilement horizontal : deux barres empilees et la moitie des entrees cachees).
   <details>/<summary> : il s'ouvre SANS JavaScript ; front.js ajoute aria-expanded, Echap, clic dehors, focus. Le panneau se pose sous
   l'en-tete (l'en-tete sticky est son bloc conteneur), pleine largeur, par-dessus la page ; il n'est jamais collant lui-meme. */
.menu{display:none}
.menu-btn{list-style:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid #1B2170;border-radius:999px;color:#B7BCE0;cursor:pointer;background:none;-webkit-tap-highlight-color:transparent}
.menu-btn::-webkit-details-marker{display:none}
.menu-btn::marker{content:""}
.menu-btn .icon{width:22px;height:22px;stroke-width:2}
.menu-btn:hover,.menu[open] .menu-btn{color:#fff;border-color:#2B3496;background:#0C1154}
.menu-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid #12165A;padding:8px 16px 14px;box-shadow:0 18px 40px rgba(0,0,20,.45)}
.menu-nav{display:flex;flex-direction:column;gap:2px}
.menu-nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:10px;font:500 17px/1 var(--f-display);color:#B7BCE0;text-decoration:none;letter-spacing:-.005em}
.menu-nav a:hover{color:#fff;background:#0C1154}
.menu-nav a[aria-current="page"]{color:#fff;background:#0C1154;box-shadow:inset 3px 0 0 var(--cyan)}
.menu-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.menu-inscr{display:none}
@media (max-width:640px){.menu-inscr{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;padding:0 14px;border-radius:999px;background:#0055FF;color:#fff;font:600 15px/1 var(--f-display);text-decoration:none}.menu-inscr:hover{background:#1A66FF}}

/* pastilles d'acces */
.tag{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px}
.tag-free{background:var(--turq);color:#00002C}
.tag-dark{background:rgba(0,0,44,.72);color:#fff;backdrop-filter:blur(6px)}

/* ---------- sections ---------- */
.section{padding-block:clamp(40px,5vw,64px)}
.sec-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(24px,2.4vw,32px);font-weight:700;line-height:1.1;margin-top:8px}
.sec-head p{color:var(--ink-2);max-width:62ch;margin-top:8px}
.sec-head .more{margin-left:auto}
.link{color:var(--accent);font:600 14px/1 var(--f-display);text-decoration:none;display:inline-flex;gap:6px;align-items:center;background:none;border:0;padding:6px 0}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* chips type de contenu (palette secondaire charte) */
.ct{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:6px;white-space:nowrap}
.ct::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor}
.ct-violet{background:var(--chip-violet);color:var(--ink-violet)}
.ct-cyan{background:var(--chip-cyan);color:var(--ink-cyan)}
.ct-turq{background:var(--chip-turq);color:var(--ink-turq)}
.ct-rose{background:var(--chip-rose);color:var(--ink-rose)}
.ct-blue{background:var(--chip-blue);color:var(--ink-blue)}

/* rails */
.rail-wrap{position:relative}
.rail{display:grid;grid-auto-flow:column;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail > *{scroll-snap-align:start}
.rail.land{grid-auto-columns:clamp(250px,24vw,330px)}
.rail.port{grid-auto-columns:clamp(150px,13.5vw,196px)}
.rail-btns{display:flex;gap:6px}
.rbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--ink)}
.rbtn:hover{border-color:var(--accent);color:var(--accent)}

.vcard{display:block;text-decoration:none;color:inherit;border:0;background:none;padding:0;text-align:left;width:100%}
.vthumb{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--night);box-shadow:var(--shadow)}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.vcard:hover .vthumb img{transform:scale(1.035)}
.land .vthumb{aspect-ratio:16/9}
.port .vthumb, .grid-port .vthumb{aspect-ratio:3/4}
/* lot AP (01/10) : les pastilles d'acces passent en haut a DROITE (le logo de l'emission est a gauche sur la plupart des visuels) ; la duree reste en bas a droite */
/* et a la ligne quand la vignette est etroite (meme regle que .ep .vthumb .badges du lot 3) : ancree a droite, une rangee trop large deborderait
   par la GAUCHE et couperait le debut d'ABONNEMENT (mesure en preprod 2.209 a 390 px : ABONNEMENT+ACHAT depassait deja de 27 px a droite) */
.vthumb .badges{position:absolute;right:8px;top:8px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 16px)}
.vthumb .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,44,.78);color:#fff;font:600 11.5px/1 var(--f-body);padding:5px 7px;border-radius:6px}
.vmeta{padding:10px 2px 0}
.vmeta .s{font:600 10.5px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.vmeta .t{font:600 15px/1.25 var(--f-display);color:var(--ink);margin-top:5px;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.port .vmeta .t{font-size:14px}
/* affiche typographique (si pas de visuel) */
.typo{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;justify-content:space-between;background:var(--night);color:#fff;overflow:hidden}
.typo::after{content:"+";position:absolute;right:-.12em;bottom:-.34em;font:800 170px/1 var(--f-display);color:var(--plus)}
.typo .s{font:600 10px/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:1}
.typo .t{font:700 17px/1.14 var(--f-display);letter-spacing:-.02em;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
/* v2 : visuel au ratio natif dans une vignette d'un autre ratio */
.vthumb .bg{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;filter:blur(16px) brightness(.55);transform:none}
.vthumb img.contain{position:relative;z-index:1;object-fit:contain}
.vthumb .badges,.vthumb .dur{z-index:2}
.vcard:hover .vthumb img.bg{transform:none}

/* intervenants */
.people{display:grid;grid-auto-flow:column;grid-auto-columns:112px;gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.person{text-align:center;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.person img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 8px;border:3px solid var(--surface);box-shadow:var(--shadow)}
.person b{display:block;color:var(--ink);font:600 13px/1.25 var(--f-display)}

/* footer */
.ftr{background:#000019;color:#9AA1D6;font-size:13.5px}
.ftr .wrap{display:grid;grid-template-columns:1.2fr repeat(3,minmax(0,1fr));gap:28px;padding-block:44px}
.ftr h5{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.ftr a{display:block;color:#9AA1D6;text-decoration:none;padding:4px 0}
.ftr a:hover{color:#fff}
.ftr .base{grid-column:1/-1;border-top:1px solid #12165A;padding-top:18px;display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}

/* en-tete de page */
.page-head{background:var(--night);color:#fff;position:relative;overflow:hidden}
.page-head .wrap{position:relative;padding-block:clamp(34px,4.5vw,56px)}
.page-head h1{color:#fff;font-size:clamp(30px,3.6vw,48px);font-weight:800;line-height:1.04;letter-spacing:-.03em;margin-top:12px;max-width:22ch}
.page-head p{color:#C6CBEA;margin-top:12px;max-width:62ch}
.page-head .kicker{color:var(--cyan)}
.plus{position:absolute;pointer-events:none}
.plus i{position:absolute;background:var(--plus)}

/* ---------- responsive (partie utile) ---------- */
@media (max-width:960px){.ftr .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .hdr .wrap{gap:12px;height:60px}
  .nav{display:none}
  .menu{display:block}   /* lot 13 : le hamburger prend le relais du <nav> de bureau ; plus aucune seconde barre collante */
  .hdr .btn-primary{display:none}
}

/* ---------- propre au front (structure), jetons de la charte ---------- */
.banniere img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.fiche{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.fiche figure{margin:0}
.fiche figure img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.meta{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0;font-size:14px}
.meta dt{font:600 10.5px/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.meta dd{margin:0;color:var(--ink)}
.meta a{color:var(--accent);text-decoration:none;font-weight:600}
.prose{max-width:68ch;color:var(--ink);font-size:15.5px;line-height:1.7}
.prose p+p{margin-top:12px}
.bloc{margin-top:28px}
.bloc h2{font-size:20px;font-weight:700;margin-bottom:12px}
.lecteur{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--night);box-shadow:var(--shadow-lg)}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vide{padding:clamp(40px,6vw,80px) 0;color:var(--ink-2)}
@media (max-width:960px){.fiche{grid-template-columns:1fr}}

/* ---------- 20/09 : bande-annonce, bouton Regarder, panneau d'acces, thematiques (jetons de la charte) ---------- */
/* etat annonce avant le clic, bouton pleine largeur SOUS le lecteur, rien par-dessus la video */
.regarder{margin-top:16px}
.regarder .etat{font:600 13.5px/1.4 var(--f-body);color:var(--ink-2);margin-bottom:10px}
.btn-large{width:100%;max-width:100%;padding:15px 22px;font-size:16px;line-height:1.25;white-space:normal;text-align:center;overflow-wrap:anywhere}
.panneau{margin-top:12px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.panneau:focus{outline:none}
.panneau .msg{font:600 16.5px/1.35 var(--f-display);color:var(--title)}
.prevenir{margin-top:14px}
.prevenir label{display:block;font:600 10.5px/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.prevenir .champs{display:flex;gap:8px;flex-wrap:wrap}
.prevenir input[type=email]{flex:1 1 220px;min-width:0;padding:11px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:inherit}
.prevenir .hp{position:absolute;left:-10000px;width:1px;height:1px;opacity:0}
.prevenir .retour{margin-top:10px;font-size:14px;color:var(--ink-2);min-height:1.4em}
.prevenir .note{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
/* thematiques */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px 16px;list-style:none;margin:0;padding:0}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.themes a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none;font:600 15px/1.25 var(--f-display);color:var(--ink);box-shadow:var(--shadow)}
.themes a:hover{border-color:var(--accent);color:var(--accent)}
.themes .n{font:600 12px/1 var(--f-body);color:var(--ink-3);white-space:nowrap}
.meta .liens a{display:inline;margin-right:4px}
/* 20/09 (Emmanuel) : hero de fiche et image de fin de bande-annonce */
.lecteur .fin{position:absolute;inset:0;z-index:2;border:0;padding:0;background:var(--night);cursor:pointer}
.lecteur .fin img{width:100%;height:100%;object-fit:cover;display:block}
.lecteur .fin::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,44,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/28px no-repeat;border:1px solid rgba(255,255,255,.4)}
.lecteur .fin:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
/* 21/09 : hero de fiche au-dessus du titre, bord a bord, hauteur plafonnee sur grand ecran */
.hero{margin:0;width:100%;background:var(--night);line-height:0}
.hero img{width:100%;height:auto;max-height:min(58vh,600px);object-fit:cover;object-position:center;display:block}
/* ?diag=1 : diagnostic en surimpression (instruction du 21/09) */
.lecteur .diag{position:absolute;left:8px;bottom:44px;z-index:4;margin:0;padding:8px 10px;max-width:calc(100% - 16px);font:12px/1.4 ui-monospace,Menlo,monospace;color:#fff;background:rgba(0,0,44,.85);border-radius:8px;white-space:pre-wrap;pointer-events:none}
/* ?diag=1 : bande rendue par le serveur, retiree par la premiere ligne de front.js */
.diag-bande{background:#F958B1;color:#00002C;font:600 14px/1.4 var(--f-body);padding:12px 16px;text-align:center}
.ftr .base .ver{opacity:.6;font-variant-numeric:tabular-nums}

/* ---------- 21/09 lot 1 : comptes (pages), popup d'acces, lecteur complet ---------- */
.compte{max-width:520px;margin:0 auto}
.compte h1{font-size:clamp(26px,3vw,34px);margin-bottom:8px}
.form{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.form .deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch{display:flex;flex-direction:column;gap:6px;font:600 10.5px/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ch input,.ch select{font:400 15px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ch input.code{font:600 26px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.2em;text-align:center}
.case{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.45}
.case input{margin-top:3px;width:18px;height:18px;flex:none}
.erreur{background:var(--chip-rose);color:var(--ink-rose);border-radius:12px;padding:12px 14px;font-size:14px}
.ok{background:var(--chip-turq);color:var(--ink-turq);border-radius:12px;padding:12px 14px;font-size:14px}
.ou{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12.5px;margin:16px 0 4px}.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--line)}
.compte .btn-large{margin-top:4px}.compte .btn-line.btn-large{width:100%;text-align:center}
/* lot 18 (24/09) : le passage vers l'autre page (/connexion ↔ /creer-un-compte) est un bouton en CONTOUR pleine largeur, separe du
   formulaire par un filet et un espace, precede d'une ligne courte ; « Mot de passe oublié » reste un lien texte sous le formulaire.
   Memes regles a toutes les largeurs : une seule hierarchie, pas une par taille d'ecran. */
.compte .lien-oubli{margin-top:14px;font-size:14px;color:var(--ink-2)}
.compte .autre-page{display:flex;flex-direction:column;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.compte .autre-page p{margin:0;text-align:center;font-size:14px;color:var(--ink-2)}
/* lot 14 (24/09) : bouton Google OFFICIEL (developers.google.com/identity/branding-guidelines). Valeurs de Google, pas nos jetons :
   clair fond #FFFFFF bordure #747775 texte #1F1F1F ; sombre fond #131314 bordure #8E918F texte #E3E3E3 ; Roboto Medium 14 px pour ce
   seul bouton (fonts.css), hauteur 40 px, coins 4 px, 12 px de marge horizontale, 10 px entre le G (20 px) et le texte, contenu centre
   meme en pleine largeur. Classe propre : n'herite ni de .btn ni de .btn-large. Le theme suit les DEUX blocs du site (prefers-color-scheme
   et data-theme sur la racine). Survol = couche d'etat 8 % de Google, en ombre interne pour que le fond reste exactement #FFFFFF / #131314. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:40px;margin-top:4px;padding:0 12px;border:1px solid #747775;border-radius:4px;background:#FFFFFF;color:#1F1F1F;font:500 14px/20px Roboto,-apple-system,"Segoe UI",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:box-shadow .15s ease}
.btn-google svg{width:20px;height:20px;flex:none}
.btn-google:hover{box-shadow:inset 0 0 0 999px rgba(48,48,48,.08)}
.btn-google:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.btn-google:active{transform:none}
:root[data-theme="dark"] .btn-google{background:#131314;border-color:#8E918F;color:#E3E3E3}
:root[data-theme="dark"] .btn-google:hover{box-shadow:inset 0 0 0 999px rgba(227,227,227,.08)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-google{background:#131314;border-color:#8E918F;color:#E3E3E3}
  :root:not([data-theme="light"]) .btn-google:hover{box-shadow:inset 0 0 0 999px rgba(227,227,227,.08)}
}
.link{background:none;border:0;color:var(--accent);font:600 14px/1 var(--f-display);padding:6px 0;cursor:pointer}
.danger{margin-top:28px;border-top:1px solid var(--line);padding-top:16px;color:var(--ink-2)}.danger summary{cursor:pointer;font-weight:600;color:var(--ink-rose)}
.btn-danger{background:var(--rose);color:#00002C;border-color:transparent}
/* popup d'acces : langage de la surimpression de recherche de la maquette (fond floute, rayon 20px, bandeau bleu nuit) ;
   sur telephone, feuille pleine hauteur */
dialog.acces{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100dvh;margin:0;inset:0}
dialog.acces::backdrop{background:rgba(0,0,30,.6);backdrop-filter:blur(4px)}
dialog.acces .boite{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 24px));background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);color:var(--ink)}
dialog.acces .bandeau{background:var(--night);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:12px}
dialog.acces .bandeau h2{color:#fff;font-size:20px;margin:0;flex:1}
dialog.acces .fermer{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;flex:none}
dialog.acces .corps{padding:22px}
dialog.acces .corps p{color:var(--ink-2);font-size:15.5px;line-height:1.55}
dialog.acces .actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
dialog.acces .actions .btn-large{width:100%}
dialog.acces .discret{text-align:center;font-size:14px;color:var(--ink-2)}
@media (max-width:720px){dialog.acces .boite{left:0;top:auto;bottom:0;transform:none;width:100%;height:100dvh;border-radius:0;display:flex;flex-direction:column}dialog.acces .corps{flex:1;overflow:auto}}
/* Lot 32 (24/09, docs/instructions/2026-09-24-lot-32-lecteur-fond-noir-et-controles.md) : le conteneur de LECTURE est NOIR, du vrai noir
   (#000, celui des barres du lecteur Gumlet : media-controller mesure rgb(0,0,0), iframe transparente autour), PAS --night (#00002C) : sur
   une video sombre, la bande sous la video (ecran 16:10 : 80 px a 1280x800 ; telephone en portrait : tout le bas) etait un lisere bleute.
   Noir HORS plein ecran ET en plein ecran, pour que rien ne clignote au basculement ; :fullscreen et :-webkit-full-screen (Safari) en
   regles SEPAREES : un navigateur qui ne connait pas l'un des deux selecteurs jetterait la regle entiere s'ils etaient reunis. */
.lecteur.complet{background:#000}
.lecteur.complet iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* LA CAUSE DU BLANC, MESUREE le 24/09 (Chrome ET WebKit, theme sombre) : le document Gumlet est transparent autour de sa video (html et body
   rgba(0,0,0,0), media-controller noir en 16:9), MAIS un navigateur peint une iframe d'une autre origine EN OPAQUE, couleur Canvas (blanc),
   quand le color-scheme de l'element iframe (herite : `dark` dans notre theme nuit) ne correspond pas a celui du document embarque (Gumlet
   n'en declare aucun : `light`) ; CSS Color Adjust, §« color-scheme » et iframes. Sous la video (ecran 16:10, telephone en portrait), ce
   blanc recouvrait notre fond, noir ou nuit, peu importe. En theme clair rien ne se voyait : c'est pourquoi le defaut n'apparaissait qu'a
   Emmanuel. Le remede : l'element iframe porte le meme color-scheme que le document Gumlet, sur toutes nos iframes Gumlet. */
.lecteur iframe,.ba-zone iframe,.ba-lecteur iframe{color-scheme:light}
/* ---------- Lot 22 (24/09, docs/instructions/2026-09-24-lot-22-lecture-en-plein-ecran.md) : la lecture part en PLEIN ECRAN, sur NOTRE
   conteneur (.lecteur.complet, qui enveloppe l'iframe Gumlet d'une autre origine). En plein ecran : fond nuit, aucun rayon, l'iframe emplit
   l'ecran (Gumlet centre sa video en 16:9 dedans). La croix vit dans une bande transparente de 96 px en haut (la hauteur du bandeau de titre de
   Gumlet, sans commande) : l'iframe avale le pointeur ailleurs. Croix : cible 44 px, contour clair, invisible tant que front.js ne l'a pas
   revelee (.visible), deux secondes d'immobilite l'effacent. Pas de rotation CSS : elle tournerait aussi les commandes et casserait le toucher. */
.lecteur.plein-ecran{border-radius:0;box-shadow:none;background:#000;width:100%;height:100%}
.lecteur.plein-ecran::backdrop{background:#000}
.lecteur.complet:fullscreen{background:#000;border-radius:0;box-shadow:none}
.lecteur.complet:fullscreen::backdrop{background:#000}
.lecteur.complet:-webkit-full-screen{background:#000;border-radius:0;box-shadow:none}
.lecteur.complet:-webkit-full-screen::backdrop{background:#000}
.lecteur .fs-bande{display:none;position:absolute;left:0;right:0;top:0;height:96px;z-index:5;touch-action:manipulation}
.lecteur.plein-ecran .fs-bande{display:block}
.lecteur .fs-croix{position:absolute;top:16px;right:16px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,44,.72);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease}
.lecteur .fs-croix svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lecteur .fs-bande.visible .fs-croix{opacity:1;pointer-events:auto}
.lecteur .fs-croix:hover{background:rgba(0,0,44,.9);border-color:#fff}
.lecteur .fs-croix:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.lecteur .fs-croix{transition:none}}
/* Lot 32 : NOTRE commande de plein ecran EN BAS A DROITE du lecteur, par-dessus l'iframe. .fs-cadre epouse le cadre 16:9 de la video
   (Gumlet ancre son media-controller EN HAUT du conteneur, mesure a 1280x800 et sur Pixel 7 en portrait) ; .fs-zone est la petite zone
   transparente (72 x 72 px) qui voit le pointeur, posee JUSTE AU-DESSUS de la barre de Gumlet (40 px de haut a 10 px du bas, 36 a 8 sur
   telephone, mesure) : le coin exact est occupe par son bouton Image dans l'image, qu'on ne recouvre pas. Le bouton : 44 px, contour clair,
   invisible tant que front.js ne l'a pas revele (.visible), deux secondes d'immobilite l'effacent. Jamais pose sur iPhone (front.js). */
.lecteur .fs-cadre{position:absolute;top:0;left:0;width:100%;aspect-ratio:16/9;max-height:100%;z-index:5;pointer-events:none}
.lecteur .fs-zone{position:absolute;right:0;bottom:50px;width:72px;height:72px;pointer-events:auto;touch-action:manipulation}
.lecteur .fs-pe{position:absolute;right:12px;bottom:8px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.72);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease}
.lecteur .fs-pe svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lecteur .fs-zone.visible .fs-pe{opacity:1;pointer-events:auto}
.lecteur .fs-pe:hover{background:rgba(0,0,0,.9);border-color:#fff}
.lecteur .fs-pe:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.lecteur .fs-pe{transition:none}}
/* Telephone (<= 720 px) : le lecteur de l'episode occupe TOUTE LA LARGEUR, bord a bord, sans gouttiere ni rayon : sur iPhone, ou aucun plein
   ecran d'element n'existe, c'est la lecture dans la fiche qui doit etre la plus grande possible, et le bouton plein ecran de Gumlet fait le reste. */
@media (max-width:720px){.fiche .lecteur.complet{margin-inline:calc(-1 * max(clamp(16px,3.2vw,40px),env(safe-area-inset-left,0px))) calc(-1 * max(clamp(16px,3.2vw,40px),env(safe-area-inset-right,0px)));width:auto;border-radius:0;box-shadow:none}}
/* 22/09 : echec de lire() affiche sous le bouton, jamais un bouton fige */
#lecture-erreur{margin-top:12px;text-align:left}

/* temoin d'environnement (21/09) : rendu par le serveur d'apres le repere MESURE ; production = rien. Ne se masque pas. */
.temoin-env{position:sticky;top:0;z-index:100;text-align:center;font:700 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;background:#F5A623;color:#00002C}
.temoin-env.inconnu{background:#C8102E;color:#fff;padding:12px;font-size:13px}

/* ---------- 22/09 : panneau « Mon compte » ---------- */
.compte.mc{max-width:720px}
.mc-bloc{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.mc-bloc h2{font-size:20px;margin-bottom:10px}.mc-bloc h3{font-size:15px;margin:18px 0 8px;color:var(--ink-2)}
.mc-statut{font-size:16px;color:var(--ink)}
.mc-series{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mc-series li{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:10px 14px;border-top:1px solid var(--line);font-size:14.5px}
.mc-series li:first-child{border-top:0}.mc-series .n{color:var(--ink-3)}.mc-series .d{font-variant-numeric:tabular-nums;font-weight:600}
.mc-series .a-venir{color:var(--ink-3)}.mc-series .tag{font:600 10.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-3);border-radius:999px;padding:5px 9px;grid-column:span 2;justify-self:end}
.mc-total{text-align:right;font-weight:600;margin:8px 0 0}.mc-prix{font-size:16px;font-weight:600;margin:12px 0 4px}
.mc-inline{margin-top:12px}.mc-inline .btn{align-self:flex-start}
.mc-sessions{list-style:none;margin:0;padding:0}.mc-sessions li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}.mc-sessions li:first-child{border-top:0}.mc-sessions .d{color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (max-width:640px){.mc-series li{grid-template-columns:1fr auto}.mc-series .n{grid-column:1;font-size:12.5px}.mc-sessions li{flex-direction:column;gap:2px}}

/* ---------- 22/09 : pages legales, marqueur « texte a fournir », bandeau de consentement ---------- */
.legal h1{font-size:clamp(26px,3vw,34px)}.legal h2{font-size:20px;margin-top:28px}
.a-fournir{background:var(--chip-rose);color:var(--ink-rose);border:2px dashed currentColor;border-radius:12px;padding:14px 16px;margin:18px 0;font-size:14.5px}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:720px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:16px 18px}
.consent p{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.consent .actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.consent .btn{min-width:120px}
@media (max-width:640px){.consent .actions .btn{flex:1}}
/* lot Stripe (22/09) : page d'offres (/abonnement, /acheter/<offre>), retour de paiement */
.offres{display:grid;gap:18px;margin:8px 0 18px}
.offre{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--surface)}
.offre h2{margin:0 0 6px;font-size:20px}
.offre .prix{font-size:22px;font-weight:700;margin:0 0 8px;font-variant-numeric:tabular-nums}
.offre-an{border-color:var(--brand,#e8572a)}
.offre .form{margin-top:12px}
.case.renonciation{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.muted.petit{font-size:12.5px}
.mc-factures a{font-weight:600}

/* choix abonnement / achat avec les deux tarifs (22/09) */
.choix-acces{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.choix-acces .btn{justify-content:center;text-align:center}
.choix-acces .discret{margin:0 0 10px;text-align:center}

/* ---------- 22/09 : cadre de statut de Mon compte (resiliation-et-cadre-statut) : encadre, distinct du reste ---------- */
.mc-cadre{margin-top:18px;padding:20px 22px;border:2px solid var(--night);border-radius:16px;background:var(--surface)}
.mc-etat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;font-size:15px;color:var(--ink-2)}
.mc-pastille{display:inline-block;font:700 11.5px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:7px 12px;background:var(--night);color:#fff}
.mc-pastille.gratuit{background:var(--surface-2);color:var(--ink-2)}.mc-pastille.resil{background:var(--chip-rose);color:var(--ink-rose)}
.mc-alerte{font-size:13px;color:var(--ink-rose);font-weight:600}
.mc-fiche{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;font-size:15px}
.mc-fiche dt{color:var(--ink-3);font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}.mc-fiche dd{margin:0;color:var(--ink)}
.mc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn-contour-rouge{border-color:var(--ink-rose);color:var(--ink-rose)}.btn-contour-rouge:hover{border-color:var(--ink-rose);color:var(--ink-rose);background:var(--chip-rose)}
.mc-confirm{display:flex;flex-direction:column;gap:10px;margin-top:22px}.mc-confirm .btn-large{width:100%;text-align:center}
.mc-economie{font-weight:600;color:var(--ink-turq);font-size:14px}
/* lot 6-bis (23/09) : prix plein barre, remise dite en clair */
.mc-barre{text-decoration:line-through;color:var(--ink-3);font-weight:400;margin-right:2px}.mc-remise{font-size:14px;color:var(--ink-3);line-height:1.45}.mc-remise b{color:var(--ink)}.offre .mc-remise{margin:-2px 0 10px}
.offre-actuelle{border-style:dashed}.offre-actuelle .mc-pastille{margin-bottom:8px}
@media (max-width:640px){.mc-fiche{grid-template-columns:1fr;gap:2px}.mc-fiche dd{margin-bottom:8px}.mc-actions .btn{width:100%;text-align:center}}
/* Lot 2 (23/09) : étiquettes sans prix (ABONNEMENT · ACHAT · GRATUIT, aucune pour qui a l'accès), ligne ACCÈS, page de retour d'achat, achats de Mon compte */
.tag-achat{background:var(--accent);color:var(--accent-ink)}
.meta dd .tag{vertical-align:middle}
.achat-recap{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:16px 0;background:var(--surface)}
.achat-recap h2{font-size:22px;margin:4px 0 6px}.achat-recap p{margin:0;color:var(--ink-2)}
.retour-actions{display:flex;flex-direction:column;gap:10px;margin:16px 0}.retour-actions .btn-large{width:100%;text-align:center}
.attente{padding:12px 14px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:14.5px}
.mc-achats li{grid-template-columns:1fr auto}.mc-achats .regle{color:var(--ink-3);font-size:12.5px;grid-column:1 / -1}.mc-achats .liens a{margin-right:10px}
.mc-cadre .mc-etat b{font:600 15px/1 var(--f-display);color:var(--ink)}

/* ---------- Lot 3 (23/09) : une serie ne s'affiche pas comme un unitaire. Page de serie (identite + episodes par saison) et
   retour a la serie depuis l'episode. Classes de la maquette reprises (page-head, sec-head, vthumb, people, fchip, tag, meta) ;
   le reste est ecrit avec ses jetons. ---------- */
.page-head .kicker .ct{vertical-align:middle}
.serie-stats{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:14px;color:#C6CBEA;font:600 13.5px/1.4 var(--f-body);max-width:none}
.serie-stats span+span::before{content:"·";margin-right:18px;color:#8F95C4}
.serie-acces{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;color:#C6CBEA;font-size:14px;max-width:none}
.serie-acces .ok-acces{font:600 14px/1.4 var(--f-display);color:var(--turq)}
.serie-acces .acces-offre{font-weight:600;color:#fff}
.serie-acces .mixte{color:#8F95C4;font-size:13px}
.serie-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.serie{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.serie-aside{position:sticky;top:88px}
.saisons{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.fchip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:8px 13px;font:500 13px/1 var(--f-body);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.fchip:hover{color:var(--ink);border-color:var(--ink-3)}
.fchip[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:#fff}
:root[data-theme="dark"] .fchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent)}
.fchip .n{color:inherit;opacity:.7}
.saison+.saison{margin-top:32px}
.saison h3{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;font-size:20px;font-weight:700;margin:0 0 14px}
.saison h3 .n{font:500 13.5px/1.4 var(--f-body);color:var(--ink-3);letter-spacing:0}
.saison h3 .link{margin-left:auto;font-size:13.5px}
.episodes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ep{display:grid;grid-template-columns:28px minmax(0,200px) minmax(0,1fr);gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:border-color .15s}
.ep:hover{border-color:var(--accent)}
.ep .num{font:800 20px/1 var(--f-display);color:var(--ink-3);text-align:center;letter-spacing:-.02em}
.ep .vthumb{aspect-ratio:16/9;box-shadow:none}
.ep .t{font:600 16px/1.25 var(--f-display);color:var(--ink);letter-spacing:-.01em;margin:0}
.ep .hook{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep .m{font:600 11.5px/1.4 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.ep:hover .t{color:var(--accent)}
/* sans JavaScript, toutes les saisons sont visibles et les puces sont des ancres ; avec front.js, une saison a la fois */
.saisons-js .saison[hidden]{display:none}
/* fiche d'episode : precedent / suivant / tous les episodes.
   Lot 25 (24/09) : chaque boite est une RANGEE : vignette 16:9 (96 x 54, 72 x 40 sous 720 px) d'un cote, surtitre + titre de l'autre, en
   miroir par l'ordre du DOM. La vignette ne retrecit JAMAIS (flex 0 0) ; le titre se coupe (2 lignes, mots longs coupes). `cover` centre,
   pas de fond floute (decision : a 96 px un fond floute est illisible). Au survol la bordure seule passe a --accent : la vignette ne bouge
   ni ne zoome (boutons de navigation, pas des cartes ; la regle .vcard:hover .vthumb img ne s'applique pas ici). Les deux boites restent
   cote a cote a toutes les largeurs (instruction, preuve 4 a 390 px) : l'empilement sous 640 px du lot 3 est retire. */
.ep-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.ep-nav a,.ep-nav .vide{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);text-decoration:none;color:inherit;min-width:0}
.ep-nav .vide{flex-direction:column;align-items:flex-start;gap:4px;color:var(--ink-3);border-style:dashed}
.ep-nav a:hover{border-color:var(--accent)}
.ep-nav a[rel="next"]{text-align:right}
.ep-nav .txt{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.ep-nav .vig{flex:0 0 72px;width:72px;height:96px;border-radius:var(--radius-sm);overflow:hidden}/* lot 42 : portrait 3:4 (lot 25 : 96 x 54) */
.ep-nav .vig img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;transition:none}
.ep-nav .k{font:600 10.5px/1.4 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ep-nav .t{font:600 14.5px/1.3 var(--f-display);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;hyphens:auto;overflow-wrap:anywhere}/* lot 25 : cesure francaise (lang="fr") d'abord, coupure brute en dernier recours */
.ep-nav .tous{grid-column:1/-1;align-items:center;justify-content:center;text-align:center;font:600 14px/1.3 var(--f-display);color:var(--accent)}
@media (max-width:720px){.ep-nav a,.ep-nav .vide{padding:8px 10px}.ep-nav a{gap:8px}.ep-nav .vig{flex-basis:54px;width:54px;height:72px}.ep-nav .t{font-size:13px}}
/* Lot 28 (24/09) : minmax(0,1fr) et non 1fr. `1fr` = minmax(auto,1fr) : la colonne ne descend pas sous le min-content de l'aside, et la
   liste .people (grille en colonnes de 112 px, defilement horizontal) impose alors sa largeur entiere a la page : mesure a 390 px sur la
   page de collection (6 intervenants = 742 px, page a 758 px de large). Latent sur toute page de serie a 4 intervenants ou plus. */
@media (max-width:960px){.serie{grid-template-columns:minmax(0,1fr)}.serie-aside{position:static;padding-top:0}}
@media (max-width:640px){.ep{grid-template-columns:22px minmax(0,116px) minmax(0,1fr);gap:10px}.ep .num{font-size:15px}.ep .hook{display:none}.ep .t{font-size:14.5px}.serie-actions .btn{width:100%}}
/* lot 3 : etiquettes des lignes d'episode a la ligne quand la vignette est etroite (telephone). (La neutralisation `.meta .ou` du lot 3
   a ete retiree par le lot 9-bis : l'acces n'est plus dans le tableau, le lisere `.ou` sert dans sa forme pleine.) */
.ep .vthumb .badges{flex-wrap:wrap;max-width:calc(100% - 16px)}

/* ---------- Lot 4 (23/09) : LES RAILS, dans leur format. Classes de la maquette reprises telles quelles (.rail.nat, --h, --ar, .bg,
   .contain, .feature, .play, .carousel, .track, .car-nav, .dots, .car-count, .news, .news-grid, .stories, .story, .cards, .fcard, .av) ;
   le reste, ecrit avec ses jetons, dit ce qu'il ajoute. ON NE RECADRE JAMAIS UNE AFFICHE. ---------- */
/* v2 de la maquette : rail a ratio naturel, hauteur fixe */
.rail.nat{grid-auto-columns:max-content;align-items:start;--h:200px}
.rail.nat.tall{--h:260px}
.rail.nat .vcard{width:calc(var(--h) * var(--ar,.75))}
.rail.nat .vthumb{height:var(--h);aspect-ratio:auto}
/* propre au front : le ratio reel de l'affiche n'est pas connu par ligne, donc la LARGEUR SUIT L'IMAGE (width:auto), jamais l'inverse ;
   les attributs width/height reservent la place au ratio nominal de la colonne avant chargement ; --ar ne sert qu'a l'affiche typographique */
.rail.nat .vcard:not(.sans-visuel){width:max-content}
.rail.nat .vcard:not(.sans-visuel) .vthumb{width:max-content}
.rail.nat .vthumb img{height:var(--h);width:auto;max-width:calc(var(--h) * 2.4);object-fit:unset;display:block}
.rail.nat .vmeta{width:0;min-width:100%}
.rail.nat .vcard.sans-visuel .vthumb{width:100%}
/* cadres a ratio fixe : l'affiche en contain sur son propre fond floute (regle v2 de la maquette), toujours */
.vthumb.land{aspect-ratio:16/9}
.vthumb.carre{aspect-ratio:1/1}
.vthumb img.contain{width:100%;height:100%}
.vthumb .typo{z-index:1}
/* Grand format : .feature du hero de la maquette */
.feature{position:relative;border-radius:20px;overflow:hidden;background:#000019;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);border:1px solid #151A63;color:#fff}
.feature .body{padding:20px 22px 22px}
.feature blockquote{margin:12px 0 0;font:600 clamp(18px,1.6vw,22px)/1.28 var(--f-display);color:#fff;letter-spacing:-.015em}
.feature blockquote a{color:inherit;text-decoration:none}
.feature blockquote a:hover{text-decoration:underline;text-underline-offset:3px}
.feature .cap{color:#9AA1D6;font-size:13px;margin-top:10px}
.feature .row{display:flex;gap:10px;margin-top:18px;align-items:center;flex-wrap:wrap}
.play{position:absolute;left:18px;top:18px;display:flex;gap:8px}
.feature .vthumb{display:block;border-radius:0;box-shadow:none}
.feature .body .s{font:600 10.5px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:#8F95C4}
.feature .vthumb .badges.play{left:auto;right:18px;top:18px}   /* lot AP : a droite */
/* Top 10 numerote : numeral en contour (apercu du back-office), cadres 3:4 de .rail.port */
.rail.top10{grid-auto-columns:max-content;list-style:none;margin:0;padding:0}
.rail.top10 > li{display:grid;grid-template-columns:auto clamp(150px,13.5vw,196px);align-items:end;gap:4px}
.rail.top10 .rang{font:800 clamp(56px,6vw,84px)/.78 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--ink-3);margin-bottom:44px;user-select:none}
/* Carrousel actu : .news-grid de la maquette, carrousel carre + sujets */
.rail-section.news{background:var(--surface);border-block:1px solid var(--line)}
.news-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.carousel{position:relative;border-radius:16px;overflow:hidden;background:var(--night);box-shadow:var(--shadow-lg);aspect-ratio:1/1;touch-action:pan-y}
.track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.track > *{width:100%;height:100%;flex:none}
.car-nav{position:absolute;inset:auto 12px 12px 12px;display:flex;align-items:center;gap:8px}
.car-nav .rbtn{background:rgba(0,0,44,.72);border-color:transparent;color:#fff}
.dots{display:flex;gap:5px;margin-inline:auto;background:rgba(0,0,44,.6);padding:7px 9px;border-radius:999px}
.dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.4)}
.dots button[aria-current="true"]{background:#fff;width:18px;border-radius:4px}
.car-count{position:absolute;right:12px;top:12px;background:rgba(0,0,44,.72);color:#fff;font:600 12px/1 var(--f-body);padding:6px 8px;border-radius:6px}
.stories{margin-top:22px;border-top:1px solid var(--line)}
.story{display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none}
.story .k{font:600 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-rose);display:block}
.story .t{font:600 15.5px/1.3 var(--f-display);color:var(--ink);letter-spacing:-.01em;display:block}
.story .src{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.story:hover .t{color:var(--accent)}
/* propre au front : une diapositive = un contenu (affiche en contain sur fond floute, legende en bas) */
.carousel .slide{position:relative;display:block;text-decoration:none;color:#fff}
.carousel .slide .vthumb{display:block;border-radius:0;box-shadow:none;height:100%}
.carousel .slide .cap{position:absolute;inset:auto 0 0 0;padding:52px 18px 56px;background:linear-gradient(180deg,transparent,rgba(0,0,44,.85));display:grid;gap:4px;z-index:2}
.carousel .slide .k{font:600 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--turq)}
.carousel .slide .cap .t{font:700 18px/1.2 var(--f-display);letter-spacing:-.015em}
.story .vthumb{display:block;box-shadow:none}
/* Cartes : .cards.c3 / .fcard de la maquette */
.cards{display:grid;gap:16px}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;border-left:3px solid var(--cyan)}
.fcard .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fcard .btn{align-self:flex-start;margin-top:auto}
.fcard h4{font-size:17px;font-weight:700;line-height:1.22;margin:0}
.fcard h4 a{color:inherit;text-decoration:none}
.fcard h4 a:hover{color:var(--accent)}
.fcard .org{font-size:13px;color:var(--ink-2)}
.fcard .hook{font-size:13.5px;line-height:1.45;color:var(--ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Visages : avatar a initiales (.av de la maquette) quand aucun portrait n'existe */
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--f-display);color:#fff;flex:none}
.person .av{width:88px;height:88px;font-size:26px;margin:0 auto 8px;border:3px solid var(--surface);box-shadow:var(--shadow)}
.people{list-style:none;margin:0;padding:0 0 8px}
/* Bloc de texte */
.bloc-texte{max-width:72ch}
/* lot 4-ter (23/09), defaut 3 : entre deux rangees de videos, UN seul intervalle, jamais la somme de deux. Une section d'une autre nature
   (bloc News sur son fond, Bloc de texte, offres) garde sa respiration pleine (.section), c'est elle qui marque la rupture. */
.rail-section:not(.news):not([data-format="text"]){padding-block:clamp(28px,3vw,44px)}
.rail-section:not(.news):not([data-format="text"])+.rail-section:not(.news):not([data-format="text"]){padding-top:0}
.accueil .rail-section:first-child{padding-top:clamp(28px,4vw,48px)}
@media (max-width:960px){.news-grid{grid-template-columns:1fr}.cards.c3{grid-template-columns:1fr 1fr}.story{grid-template-columns:1fr auto}.story .k{grid-column:1/-1}.story .vthumb{display:none}}
@media (max-width:720px){.cards.c3,.cards.c2{grid-template-columns:1fr}.rail.nat{--h:170px}.rail.nat.tall{--h:220px}.rail.top10 .rang{margin-bottom:40px}}
/* ======== lot 7 (23/09) : Smile+ News façon journal — CSS « v2 » de la maquette (lignes 451-560, 180, 201-203, 288, 296), les boutons de la maquette sont ici des liens ======== */
.news{background:var(--surface);border-block:1px solid var(--line)}
.nl-mast{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.nl-brand{display:inline-flex;align-items:baseline;gap:6px}
.nl-brand .logo{width:128px;height:31px;display:inline-block;color:#fff;background:currentColor;-webkit-mask:url(/assets/logo-smileplus.svg) no-repeat left center/contain;mask:url(/assets/logo-smileplus.svg) no-repeat left center/contain}
.nl-word{font:700 30px/1 var(--f-display);letter-spacing:-.03em;color:#fff}
.nl-tag{color:#AEB4E0;font-size:13.5px;padding-bottom:3px}
.news .nl-brand .logo{color:var(--title)}
.news .nl-word{color:var(--title)}
.news .nl-tag{color:var(--ink-3)}
.nl-rule{height:3px;background:linear-gradient(90deg,var(--blue) 0 33%,var(--cyan) 33% 66%,var(--rose) 66%);border-radius:2px;margin:14px 0 26px}
.nl-front{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:start}
.nl-headline{font-size:clamp(26px,2.8vw,38px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.nl-dek{color:var(--ink-2);font-size:16px;margin-top:12px;max-width:52ch}
.dropcap p{font-size:15.5px;line-height:1.7;color:var(--ink);max-width:64ch}
.dropcap p+p{margin-top:12px}
.dropcap p:first-child::first-letter{font:800 3.6em/.82 var(--f-display);float:left;margin:.06em .1em 0 0;color:var(--rose)}
.sig{margin-top:12px;font:600 13px/1 var(--f-display);color:var(--ink-3)}
.lead-card img{width:100%;height:auto;border-radius:12px}
.lead-card .k,.nl-card .k{font:600 11px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-rose);margin-top:16px}
.lead-card h3{font-size:clamp(21px,2vw,27px);font-weight:700;line-height:1.14;margin-top:8px}
.lead-card p{margin-top:10px;color:var(--ink-2);font-size:15px;line-height:1.65;max-width:70ch}
.nl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.nl-card{display:block;text-decoration:none;color:inherit;border:0;background:none;padding:0;text-align:left}
.nl-card img{width:100%;height:auto;border-radius:10px}
.nl-card .t{font:600 16px/1.25 var(--f-display);color:var(--ink);margin-top:7px;letter-spacing:-.01em}
.nl-card .x{font-size:13.5px;color:var(--ink-2);margin-top:7px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nl-card .src,.lead-card .src{font-size:12.5px;color:var(--ink-3);margin-top:8px}
.nl-card:hover .t{color:var(--accent)}
.nl-foot{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px;padding:18px 20px;background:var(--surface-2);border-radius:14px}
.nl-foot .subscribe{margin:0;flex:1}
.nl-foot .nl-etat{flex-basis:100%;margin:0;font-size:13.5px;color:var(--ink)}
.ed-chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font:600 12.5px/1 var(--f-display);color:var(--ink);text-decoration:none}
.ed-chip:hover{border-color:var(--accent);color:var(--accent)}
.subscribe{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.field{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 16px;font:400 14px/1.2 var(--f-body);min-width:0}
.field:focus{outline:2px solid var(--focus);outline-offset:1px}
.nl-top .wrap{padding-block:clamp(26px,3.4vw,40px) 0}
.ed-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px}
.ed-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ed-tabs a{border:0;background:transparent;color:#AEB4E0;padding:12px 16px 14px;border-radius:12px 12px 0 0;text-align:left;white-space:nowrap;text-decoration:none}
.ed-tabs a b{display:block;width:fit-content;font:800 18px/1 var(--f-display);color:#fff;letter-spacing:-.02em}
.ed-tabs a span{font-size:12px}
.ed-tabs a[aria-selected="true"]{background:var(--bg);color:var(--ink-2)}
.ed-tabs a[aria-selected="true"] b{color:var(--title)}
/* Lot 30 (24/09, docs/instructions/2026-09-24-lot-30-edition-selectionnee-dans-actu.md) : un trait de la section (rose, --ink-rose, jamais le cyan du menu global)
   sous le numero de l'edition selectionnee, de la largeur du numero (b en fit-content), 3 px, arrondi, entre le numero et la date. Tous les onglets
   portent la reservation (transparente) pour que le numero et la date restent a la meme hauteur d'un onglet a l'autre ; le fond d'onglet accroche reste.
   Le focus clavier reste l'anneau --focus (bleu / cyan), rentre de 3 px pour ne pas etre coupe par overflow-x de la barre. */
.ed-tabs a b::after{content:"";display:block;height:3px;border-radius:2px;margin:5px 0 2px;background:transparent}
.ed-tabs a[aria-selected="true"] b::after{background:var(--ink-rose)}
.ed-tabs a:focus-visible{outline-offset:-3px}
.ed-mode{display:flex;gap:4px;padding-bottom:10px}
.ed-mode a{border:1px solid #2A2F6B;background:transparent;color:#C9CEEA;border-radius:999px;padding:7px 12px;font:500 13px/1 var(--f-body);text-decoration:none}
.ed-mode a[aria-pressed="true"]{background:#fff;color:#00002C;border-color:#fff}
.ed-head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,340px);gap:clamp(20px,3vw,40px);align-items:start}
.ed-num{font:800 clamp(56px,7vw,96px)/.8 var(--f-display);letter-spacing:-.05em;color:var(--rose)}
.ed-head h1{font-size:clamp(28px,3.2vw,44px);font-weight:800;line-height:1.04;letter-spacing:-.03em;margin-top:10px}
.ed-head .dek{color:var(--ink-2);font-size:16.5px;margin-top:12px;max-width:56ch}
.sommaire{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.sommaire h5{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.sommaire ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:2px}
.sommaire li{counter-increment:s}
.sommaire a{display:grid;grid-template-columns:22px 1fr;gap:8px;text-align:left;border:0;background:none;padding:7px 0;font:500 13.5px/1.3 var(--f-body);color:var(--ink);width:100%;text-decoration:none}
.sommaire a::before{content:counter(s);font:800 14px/1.3 var(--f-display);color:var(--ink-rose)}
.sommaire a:hover{color:var(--accent)}
.sommaire .ep a::before{content:"▶";font-size:10px;line-height:1.9;color:var(--ink-cyan)}
.ed-edito{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:40px;padding-top:32px;border-top:1px solid var(--line);align-items:start}
.ep-card{background:var(--night);color:#fff;border-radius:16px;overflow:hidden}
.ep-card img{width:100%;height:auto}
.ep-card .b{padding:16px 18px 18px;display:grid;gap:8px}
.ep-card h3{color:#fff;font-size:19px;font-weight:700}
.ep-card p{color:#C6CBEA;font-size:14px;line-height:1.6}
.ep-card .btn{justify-self:start}
.ed-lead{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}
.ed-lead img,.ed-pic img{width:100%;height:auto;border-radius:14px}
.ed-pic{margin-top:22px}.ed-pic img{display:block}/* lot 15 : image de une dans l'en-tete, meme traitement que .ed-lead img ; lot 19 : la meme image est AUSSI en tete de .ed-lead, en grand (voulu, Emmanuel 24/09) */
.ed-lead h2{font-size:clamp(26px,2.8vw,38px);font-weight:800;line-height:1.08;margin-top:10px;max-width:28ch}
.ed-lead .body{columns:2 320px;column-gap:40px;margin-top:18px;font-size:16px;line-height:1.72;color:var(--ink)}
.ed-lead .body p:first-child::first-letter{font:800 3.4em/.82 var(--f-display);float:left;margin:.06em .1em 0 0;color:var(--title)}
.ed-lead .body p+p,.ed-story .body p+p{margin-top:12px}
.st-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:18px}
.st-meta .k{font:600 11px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-rose)}
.st-meta .n{font:700 12px/1 var(--f-display);color:var(--ink-3)}
.st-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;font-size:13px;color:var(--ink-3)}
.st-actions a.srcl{color:var(--accent);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.ed-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3.5vw,48px);align-items:start;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.ed-story.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ed-story.flip .pic{order:2}
.ed-story .pic img{width:100%;height:auto;border-radius:12px}
.ed-story .noimg{aspect-ratio:640/545;border-radius:12px;background:var(--night);position:relative;overflow:hidden;display:grid;place-items:end start;padding:18px;color:#fff;font:700 18px/1.2 var(--f-display)}
.ed-story .noimg::after{content:"+";position:absolute;right:-.1em;bottom:-.34em;font:800 220px/1 var(--f-display);color:var(--plus)}
.ed-story .noimg span{position:relative;z-index:1}
.ed-story h3{font-size:clamp(21px,2vw,27px);font-weight:700;line-height:1.14;margin-top:8px}
.ed-story .body{margin-top:12px;font-size:15.5px;line-height:1.72;color:var(--ink);max-width:68ch}
.ed-social{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;align-items:center;margin-top:48px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.ed-social .carousel .track img{width:100%;height:100%;object-fit:cover;flex:none;user-select:none;-webkit-user-drag:none}
.ed-pager{display:flex;justify-content:space-between;gap:12px;margin-top:40px;flex-wrap:wrap}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.toolbar .count{font-size:13px;color:var(--ink-3);margin-left:auto}
.toolbar a.fchip{text-decoration:none}
.rub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px;align-items:start}
.rub{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rub img{width:100%;height:auto}
.rub .b{padding:14px 16px 16px}
.rub h3{font-size:17px;font-weight:700;line-height:1.22;margin-top:6px}
.rub .x{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.6}
.rub details{margin-top:8px}
.rub summary{cursor:pointer;color:var(--accent);font:600 13px/1 var(--f-display);list-style:none;padding:6px 0}
.rub summary::-webkit-details-marker{display:none}
.rub details[open] summary{display:none}
.ed-lead,.ed-story,.ep-card,.rub,.nl-foot{scroll-margin-top:90px}
@media (max-width:1100px){.ed-head{grid-template-columns:auto minmax(0,1fr)}.ed-head .sommaire{grid-column:1/-1}.nl-row{grid-template-columns:1fr 1fr}.rub-grid{grid-template-columns:1fr 1fr}}
@media (max-width:960px){.nl-front,.ed-edito,.ed-story,.ed-story.flip,.ed-social{grid-template-columns:1fr}.ed-story.flip .pic{order:0}}
@media (max-width:720px){.nl-row,.rub-grid,.ed-head{grid-template-columns:1fr}}/* .ed-head : regle de la maquette (720 px), tout s'empile */

/* ---------- Lot 4-bis (23/09) : l'editeur de rails (maquette « Editeur de rails SMILE+ » v18). Classes reprises de la maquette
   (.pleine, .serie, .band, .nl-epi, .actu, .vmeta .d) avec les jetons du front ; rien d'inventé. ---------- */
/* description sous le titre (interrupteur du rail) : deux lignes, comme .vm .d de la maquette */
.vmeta .d{margin:5px 0 0;font:400 12.5px/1.45 var(--f-body);color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Largeur page : la BANNIERE 2560x1068 = 2,40:1 ; aucun recadrage (le cadre a le ratio de la banniere) ; le texte est POSE SUR le visuel ;
   le voile a une hauteur FIXE (120 px, 86 px en mobile), jamais un pourcentage */
.pleine{display:block;position:relative;width:100%;aspect-ratio:2560/1068;border-radius:16px;overflow:hidden;background:linear-gradient(140deg,var(--deep,#072566),#001040);color:#fff;text-decoration:none}
.pleine .shot{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.pleine .plaque{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font:700 clamp(16px,2vw,24px)/1.2 var(--f-display);color:#AEB4D4;letter-spacing:-.02em}
.pleine::before{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;background:linear-gradient(180deg,rgba(2,3,20,0) 0%,rgba(2,3,20,.38) 42%,rgba(2,3,20,.9) 100%)}
.pleine .badges{position:absolute;left:16px;top:14px;z-index:2;display:flex;gap:6px}
.pleine .dur{position:absolute;top:12px;right:12px;z-index:2;background:rgba(0,0,20,.78);color:#fff;font:600 10px/1 var(--f-body);padding:4px 6px;border-radius:5px}
.pleine .s{position:absolute;left:16px;bottom:38px;z-index:2;font:600 10px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.pleine .tt{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;margin:0;font:700 clamp(16px,1.6vw,21px)/1.18 var(--f-display);max-width:70%;text-shadow:0 2px 14px rgba(0,0,20,.8)}
.pleine.avecdesc .tt{bottom:30px}
.pleine .desc{position:absolute;left:16px;right:16px;bottom:-2px;z-index:2;font:400 12.5px/1.4 var(--f-body);color:rgba(255,255,255,.82);max-width:58%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:720px){.pleine::before{height:86px}.pleine .tt{font-size:15px;max-width:88%;bottom:12px}.pleine.avecdesc .tt{bottom:26px}.pleine .desc{font-size:10.5px;max-width:90%}.pleine .s{font-size:8.5px;bottom:32px}}
/* carte de serie (rail « Serie entiere ») : le visuel de la serie, et par-dessus ses episodes */
.serie-card{position:relative;display:block;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,var(--deep,#072566),#001040);border:1px solid var(--line);color:#fff;text-decoration:none;flex:none}
.serie-card.p34{width:clamp(190px,18vw,240px);aspect-ratio:3/4}
.serie-card.l169{width:min(100%,420px);aspect-ratio:16/9}
.serie-card.hero{width:100%;max-width:640px;aspect-ratio:16/9}
.serie-card.pleine{width:100%;max-width:none;aspect-ratio:2560/1068;border-radius:16px}
.serie-card .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.serie-card .secours{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;font:700 16px/1.2 var(--f-display);color:#AEB4D4;letter-spacing:-.02em}
.serie-card .sbas{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 11px;display:flex;flex-direction:column;gap:6px;background:linear-gradient(180deg,rgba(2,3,20,0) 0%,rgba(2,3,20,.55) 38%,rgba(2,3,20,.93) 100%)}
.serie-card.pleine .sbas{padding:52px 16px 14px;background:linear-gradient(180deg,rgba(2,3,20,0) 0%,rgba(2,3,20,.38) 42%,rgba(2,3,20,.9) 100%)}
.serie-card .snom{font:700 14.5px/1.2 var(--f-display);color:#fff;letter-spacing:-.02em}
.serie-card.pleine .snom{font-size:19px}
.serie-card .sn{font-size:11.5px;color:var(--cyan);font-weight:600}
.serie-card .sdesc{font:400 11px/1.4 var(--f-body);color:rgba(255,255,255,.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.serie-card.pleine .sdesc{font-size:12.5px;max-width:58%}
.serie-card .minis{display:flex;gap:4px;align-items:center;margin-top:2px}
.serie-card .minis img{width:26px;height:35px;border-radius:4px;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.serie-card.l169 .minis img,.serie-card.hero .minis img{width:32px;height:43px}
.serie-card.pleine .minis img{width:38px;height:51px}
.serie-card .minis .plus{font:600 11px/1 var(--f-body);color:#AEB4D4;background:rgba(255,255,255,.12);border-radius:4px;padding:5px 6px}
/* ======== lot 4-ter (23/09) : LES TAILLES SUIVENT LA LARGEUR DE LA CARTE, pas un nombre de pixels. Le bloc px ci-dessus est la maquette v18
   telle quelle (calibree sur son panneau d'apercu, 586 px) et reste le repli des navigateurs sans unites de conteneur. Ici : chaque element
   est un conteneur (container-type:inline-size), --u vaut UN PIXEL DE LA MAQUETTE a l'echelle de la carte (100cqw / largeur de la carte
   dans la maquette, MOINS sa bordure de 1 px de chaque cote puisque 100cqw mesure la boite de contenu : p34 190-2, l169 320-2, hero 520-2,
   Largeur page 586-2 ; mesure du 23/09 : avec 586, 18,94 px au lieu de 19 a 586 px), chaque valeur s'ecrit <px maquette> x --u, avec un plancher (la
   valeur de la maquette, ou sa valeur mobile en Largeur page) et un plafond (<px maquette> x --kmax) pour ne pas s'emballer.
   Critere de recette : a 586 px de large, identique au pixel a l'apercu de la maquette ; au-dela, tout grandit ensemble.
   Seul le rayon de la carte reste en px : une unite cqw posee sur le conteneur lui-meme se resout contre son ANCETRE conteneur. ======== */
@supports (width:1cqw){
.serie-card{container-type:inline-size;--u:calc(100cqw / 188);--kmax:1.3}
.serie-card.l169{--u:calc(100cqw / 318);--kmax:1.35}
.serie-card.hero{--u:calc(100cqw / 518);--kmax:1.25}
.serie-card.pleine{--u:calc(100cqw / 584);--kmax:2.2;border-radius:12px}
.serie-card .secours{padding:clamp(14px,calc(14 * var(--u)),calc(14px * var(--kmax)));font-size:clamp(16px,calc(16 * var(--u)),calc(16px * var(--kmax)))}
.serie-card .sbas{padding:clamp(34px,calc(34 * var(--u)),calc(34px * var(--kmax))) clamp(12px,calc(12 * var(--u)),calc(12px * var(--kmax))) clamp(11px,calc(11 * var(--u)),calc(11px * var(--kmax)));gap:clamp(6px,calc(6 * var(--u)),calc(6px * var(--kmax)))}
.serie-card.pleine .sbas{padding:clamp(34px,calc(52 * var(--u)),calc(52px * var(--kmax))) clamp(12px,calc(16 * var(--u)),calc(16px * var(--kmax))) clamp(11px,calc(14 * var(--u)),calc(14px * var(--kmax)));gap:clamp(4px,calc(6 * var(--u)),calc(6px * var(--kmax)))}
.serie-card .snom{font-size:clamp(14.5px,calc(14.5 * var(--u)),calc(14.5px * var(--kmax)))}
.serie-card.pleine .snom{font-size:clamp(14px,calc(19 * var(--u)),calc(19px * var(--kmax)))}
.serie-card .sn{font-size:clamp(11.5px,calc(11.5 * var(--u)),calc(11.5px * var(--kmax)))}
.serie-card.pleine .sn{font-size:clamp(10px,calc(11.5 * var(--u)),calc(11.5px * var(--kmax)))}
.serie-card .sdesc{font-size:clamp(11px,calc(11 * var(--u)),calc(11px * var(--kmax)))}
.serie-card.pleine .sdesc{font-size:clamp(10.5px,calc(12.5 * var(--u)),calc(12.5px * var(--kmax)))}
.serie-card .minis{gap:clamp(4px,calc(4 * var(--u)),calc(4px * var(--kmax)));margin-top:clamp(2px,calc(2 * var(--u)),calc(2px * var(--kmax)))}
.serie-card .minis img{width:clamp(26px,calc(26 * var(--u)),calc(26px * var(--kmax)));height:clamp(35px,calc(35 * var(--u)),calc(35px * var(--kmax)));border-radius:clamp(4px,calc(4 * var(--u)),calc(4px * var(--kmax)))}
.serie-card.l169 .minis img,.serie-card.hero .minis img{width:clamp(32px,calc(32 * var(--u)),calc(32px * var(--kmax)));height:clamp(43px,calc(43 * var(--u)),calc(43px * var(--kmax)))}
.serie-card.pleine .minis img{width:clamp(26px,calc(38 * var(--u)),calc(38px * var(--kmax)));height:clamp(35px,calc(51 * var(--u)),calc(51px * var(--kmax)))}
.serie-card .minis .plus{font-size:clamp(11px,calc(11 * var(--u)),calc(11px * var(--kmax)));padding:clamp(5px,calc(5 * var(--u)),calc(5px * var(--kmax))) clamp(6px,calc(6 * var(--u)),calc(6px * var(--kmax)));border-radius:clamp(4px,calc(4 * var(--u)),calc(4px * var(--kmax)))}
.serie-card .actions{gap:clamp(6px,calc(8 * var(--u)),calc(8px * var(--kmax)));margin-top:clamp(2px,calc(4 * var(--u)),calc(4px * var(--kmax)))}
.serie-card .actions .btn{padding:clamp(7px,calc(8 * var(--u)),calc(8px * var(--kmax))) clamp(11px,calc(14 * var(--u)),calc(14px * var(--kmax)));font-size:clamp(11px,calc(13 * var(--u)),calc(13px * var(--kmax)))}
.serie-card .actions .ba-btn svg{width:clamp(12px,calc(14 * var(--u)),calc(14px * var(--kmax)));height:clamp(12px,calc(14 * var(--u)),calc(14px * var(--kmax)))}
/* ---------- Lot BA-2 (23/09, docs/instructions/2026-09-23-lot-ba2-bande-annonce-sur-le-rail.md) : la bande-annonce de serie SUR LE RAIL.
   La video prend la place de l'IMAGE dans le MEME cadre (memes dimensions, meme rayon) : .ba-zone est calee sur le cadre, sous le lien
   couvrant (.couvre) et sous le montage (.sbas : voile, titre, description, apercus, boutons), qui restent par-dessus. Le lecteur Gumlet
   est en 16:9 : dans un cadre plus large (Largeur page 2,40:1) il prend toute la largeur et sa hauteur 16:9, centre ; dans un cadre plus
   etroit (Portrait 3:4) toute la hauteur ; le cadre coupe le reste (une video, pas un visuel : le fond floute d'une image n'a pas d'equivalent
   dans une iframe opaque, un « contain » y donnerait des bandes noires). Jamais de rectangle noir : .ba-zone est invisible tant que la
   lecture n'a pas commence (front.js pose .joue au premier timeupdate). Deux boutons, un seul en aplat : « Voir la serie » .btn-primary
   (bleu de la charte), « Bande-annonce » .btn-ghost (contour). En Largeur page, la bande FIXE de 120 px (86 px en mobile) de
   .pleine::before (correction du 23/09) s'applique deja a la carte de serie (classe .pleine partagee, mesure sur la 2.92) ; pendant la
   lecture elle passe au-dessus de la video (z-index 2 > .ba-zone 1) : l'image bouge, le contraste varie, le voile reste. ---------- */
.serie-card .couvre{position:absolute;inset:0;z-index:2;border-radius:inherit}
.serie-card .couvre:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.serie-card .ba-zone{position:absolute;inset:0;z-index:1;overflow:hidden;background:transparent;opacity:0;transition:opacity .45s ease}
.serie-card.joue .ba-zone{opacity:1}
.serie-card .ba-zone iframe{position:absolute;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:100%;height:100%;border:0;display:block}
.serie-card.pleine .ba-zone iframe,.serie-card.l169 .ba-zone iframe,.serie-card.hero .ba-zone iframe{height:auto;aspect-ratio:16/9;min-height:100%}
.serie-card.p34 .ba-zone iframe{width:auto;height:100%;aspect-ratio:16/9;min-width:100%}
.serie-card.ba-bouton.lecture .couvre{display:none}   /* le lecteur demande par un clic garde ses commandes (pause, son, plein ecran) */
.serie-card.pleine.lecture::before{z-index:2;pointer-events:none}   /* la bande FIXE de 120 px (86 en mobile) de .pleine::before s'applique deja a la carte (classe partagee) : en lecture elle passe au-dessus de la video */
.serie-card .sbas{z-index:3;pointer-events:none}   /* le montage laisse passer le clic vers le lien couvrant… */
.serie-card .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.serie-card .actions>*{pointer-events:auto}        /* …sauf les boutons */
.serie-card .actions .btn{padding:8px 14px;font-size:13px;line-height:1}
.serie-card .actions .btn[hidden]{display:none}   /* .btn{display:inline-flex} l'emporte sur la feuille du navigateur : sans cette regle, hidden n'efface rien (vu sur la capture de la 2.93) */
.serie-card .actions .ba-btn{background:rgba(0,0,44,.45);border-color:rgba(255,255,255,.6);backdrop-filter:blur(3px)}
.serie-card .actions .ba-btn:hover{background:rgba(0,0,44,.75);border-color:#fff}
.serie-card .actions .ba-btn svg{width:14px;height:14px;fill:currentColor}
.serie-card .actions .btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* breve en Largeur page (.actu.pleine de la maquette, 586 px) : meme regle */
.actu-card.pleine{container-type:inline-size;--u:calc(100cqw / 584);--kmax:2.2}
.actu-card.pleine .bd{padding:clamp(16px,calc(16 * var(--u)),calc(16px * var(--kmax))) clamp(18px,calc(18 * var(--u)),calc(18px * var(--kmax)));gap:clamp(6px,calc(6 * var(--u)),calc(6px * var(--kmax)))}
.actu-card.pleine .k{font-size:clamp(10px,calc(10 * var(--u)),calc(10px * var(--kmax)))}
.actu-card.pleine .tt{font-size:clamp(17px,calc(17 * var(--u)),calc(17px * var(--kmax)))}
.actu-card.pleine .src{font-size:clamp(11px,calc(11 * var(--u)),calc(11px * var(--kmax)))}
/* bloc de texte (.band de la maquette, 586 px) : le conteneur est .blocs-texte (meme largeur que la bande) pour que marges, arc et rayon suivent */
.blocs-texte{container-type:inline-size;--u:calc(100cqw / 584);--kmax:2.2}
.blocs-texte .band{padding:clamp(18px,calc(18 * var(--u)),calc(18px * var(--kmax))) clamp(20px,calc(20 * var(--u)),calc(20px * var(--kmax)));border-left-width:clamp(4px,calc(4 * var(--u)),calc(4px * var(--kmax)));border-radius:clamp(16px,calc(16 * var(--u)),calc(16px * var(--kmax))) clamp(8px,calc(8 * var(--u)),calc(8px * var(--kmax))) clamp(8px,calc(8 * var(--u)),calc(8px * var(--kmax))) clamp(16px,calc(16 * var(--u)),calc(16px * var(--kmax)))}
.blocs-texte .band+.band{margin-top:clamp(16px,calc(16 * var(--u)),calc(16px * var(--kmax)))}
.blocs-texte .band .tt{font-size:clamp(19px,calc(19 * var(--u)),calc(19px * var(--kmax)))}
.blocs-texte .band p{margin-top:clamp(9px,calc(9 * var(--u)),calc(9px * var(--kmax)));font-size:clamp(13.5px,calc(13.5 * var(--u)),calc(13.5px * var(--kmax)))}
.blocs-texte .band .btn{margin-top:clamp(12px,calc(12 * var(--u)),calc(12px * var(--kmax)));padding:clamp(8px,calc(8 * var(--u)),calc(8px * var(--kmax))) clamp(13px,calc(13 * var(--u)),calc(13px * var(--kmax)));font-size:clamp(13px,calc(13 * var(--u)),calc(13px * var(--kmax)))}
/* #home-news reste un conteneur (lot 4-ter) ; le .nl-epi n'y est PLUS mis a l'echelle depuis le lot Z (01/10) : ses clamp x2,2 portaient
   le titre a 38 px quand les cartes d'articles voisines restent a 16 px. Il suit les tailles fixes des .nl-card (regle plus bas). */
#home-news{container-type:inline-size;--u:calc(100cqw / 584);--kmax:2.2}
}
/* Bloc de texte : les blocs du rail, arc de gauche a la couleur de la charte, espaces de 16 px */
.blocs-texte .band{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:16px 8px 8px 16px;padding:18px 20px}
.blocs-texte .band+.band{margin-top:16px}
.blocs-texte .band .tt{margin:0;font:700 19px/1.2 var(--f-display);color:var(--title);max-width:30ch}
.blocs-texte .band p{margin:9px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.6;max-width:62ch}
.blocs-texte .band .btn{margin-top:12px}
/* Smile+ News : l'episode de la semaine (nl-epi). Lot Z (01/10, Emmanuel) : cadre 16:9 (plus le portrait 3:4 de la maquette v18), pose dans
   la PREMIERE colonne de la grille des breves (.nl-row : 4 colonnes, 2 sous 1100 px, 1 sous 720 px, gap 22 px), texte sur les colonnes
   suivantes, empile sous 720 px comme une carte d'article ; tailles = celles des .nl-card (11 / 16 / 13,5 / 12,5 px), a toutes les largeurs. */
.nl-epi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.nl-epi .vthumb{aspect-ratio:16/9;border-radius:10px;box-shadow:none;background:var(--night)}
.nl-epi .vthumb img{width:100%;height:100%;display:block}
.nl-epi .vthumb .bg{width:calc(100% + 24px);height:calc(100% + 24px)}
.nl-epi .bd{grid-column:2/-1;display:flex;flex-direction:column;gap:7px;min-width:0}
.nl-epi .k{font:600 11px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--violet,#6F49FF)}
.nl-epi .t{font:700 16px/1.25 var(--f-display);color:var(--title);letter-spacing:-.01em;text-decoration:none}
.nl-epi p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.nl-epi .src{font-size:12.5px;color:var(--turq,#26DDCF)}
@media (max-width:1100px){.nl-epi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.nl-epi{grid-template-columns:minmax(0,1fr);row-gap:16px}.nl-epi .bd{grid-column:auto}}
/* breves en cartes (.actu de la maquette) : Paysage 16:9 et Largeur page d'un rail Actu */
.rail.actu{grid-auto-columns:216px}
.actu-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);text-decoration:none;height:100%}
.actu-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.actu-card .bd{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.actu-card .k{font:600 10px/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.actu-card .tt{font:600 13.5px/1.3 var(--f-display);color:var(--title)}
.actu-card .src{margin-top:auto;font-size:11px;color:var(--ink-3)}
.actu-card.pleine{width:100%;flex-direction:row;align-items:stretch;aspect-ratio:auto}
.actu-card.pleine::before{content:none}
.actu-card.pleine img{width:44%;aspect-ratio:16/9;flex:none}
.actu-card.pleine .bd{justify-content:center;padding:16px 18px}
.actu-card.pleine .tt{font-size:17px;position:static;max-width:none;text-shadow:none}
@media (max-width:640px){.actu-card.pleine{flex-direction:column}.actu-card.pleine img{width:100%}}
/* ---------- Lot 9 (23/09) : /offres = la section #offres de la maquette (plans, plan, plan.hi, price, ab-code, ab-msg, fi),
   extraits tels quels de docs/reference/maquette-smileplus-2.0.html ; puis les ajouts propres au front (cartes centrees,
   formulaire dans la carte, boites de Mon compte, page de confirmation). ---------- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px}
.plan.hi{background:var(--night);color:#fff;border-color:var(--night);position:relative;overflow:hidden}
.plan.hi h3,.plan.hi .price{color:#fff}
.plan h3{font-size:20px;font-weight:700}
.price{font:800 38px/1 var(--f-display);letter-spacing:-.03em;color:var(--title)}
.price small{font:500 14px/1 var(--f-body);letter-spacing:0;color:var(--ink-2)}
.plan.hi .price small,.plan.hi .muted{color:#AEB4E0}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:9px}
.plan li svg{width:16px;height:16px;margin-top:3px;stroke:var(--turq)}
.plan .btn{margin-top:auto}
.price s{font-size:22px;color:var(--ink-3);margin-right:8px;font-weight:600}
.plan.hi .price s{color:#7C84C4}
.plan .sub{font-size:13px}
.ab-code{display:flex;gap:8px;align-items:center}
.fi{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 12px;font:400 14px/1.2 var(--f-body);min-width:0;width:100%}
.fi:focus{outline:2px solid var(--focus);outline-offset:1px}
.ab-code .fi{width:220px;text-transform:uppercase}
.ab-msg{min-height:20px;font-size:13.5px;color:var(--ink-2);margin:0 0 14px}
.ab-msg.ok{color:#0A8661}.ab-msg.bad{color:#CC2447}
@media (max-width:960px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.plans{grid-template-columns:1fr}}
/* ajouts du front : cartes centrees (deux ou trois formules), formulaire et code dans la carte */
.plans.centre{grid-template-columns:repeat(auto-fit,minmax(280px,400px));justify-content:center}
.offres-page .sec-head{justify-content:center;text-align:center}.offres-page .sec-head>div{max-width:760px}.offres-page .sec-head p{margin-inline:auto}
.plan .form{margin-top:auto;gap:10px;position:relative}
.plan .case.renonciation{font-size:12.5px;margin:0}
.plan.hi .case.renonciation{color:#AEB4E0;border-color:#3B4386}
.plan .price .ht{font-size:13px;color:var(--ink-3)}.plan.hi .price .ht{color:#AEB4E0}
.plan .prix-plein[hidden],.plan .ab-duree[hidden]{display:none}
.plan .ab-duree{color:var(--ink-turq,#0A8661);font-weight:600}.plan.hi .ab-duree{color:var(--turq)}
.plan .discret{margin:0;font-size:13px;text-align:center}
.plan .btn .ab-libelle{white-space:normal}
.offres-note{text-align:center;margin-top:18px}
.mc-plans{margin:12px 0 6px}.mc-plans .plan{padding:18px 20px;gap:10px}.mc-plans .price{font-size:30px}
.mc-etat .mc-premium{margin-left:auto}
@media (max-width:640px){.mc-etat .mc-premium{margin-left:0;width:100%;text-align:center}.ab-code{width:100%}.ab-code .fi{width:auto;flex:1}}
/* ---------- Lot 23 (24/09) : la boite de code promo DANS chaque carte, sous le bouton « S'abonner », REPLIEE (details/summary,
   s'ouvre sans JavaScript) ; le champ .offres-code du lot 9 sous les cartes a disparu (doublon). Ligne discrete de 13 px, cible de
   36 px de haut ; chevron dessine en CSS ; en carte nuit (.plan.hi), champ et messages sur le fond --night. ---------- */
.plan .ab-code-boite{position:relative;margin-top:-4px}
.plan .ab-code-boite summary{list-style:none;cursor:pointer;font-size:13px;color:var(--ink-2);text-align:center;min-height:36px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;user-select:none}
.plan .ab-code-boite summary::-webkit-details-marker{display:none}
.plan .ab-code-boite summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.plan .ab-code-boite[open] summary::before{transform:translateY(2px) rotate(225deg)}
.plan .ab-code-boite summary:hover{color:var(--accent)}
.plan .ab-code-boite summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.plan .ab-code-boite .ab-code{width:100%;margin-top:2px}
.plan .ab-code-boite .ab-code .fi{width:auto;flex:1;text-transform:uppercase}
.plan .ab-code-boite .ab-msg{margin:8px 0 0;min-height:0;text-align:left;background:none;padding:0;border-radius:0;font-size:13.5px}   /* la pastille globale .ok (chip turquoise) ne s'applique pas ici : texte seul, meme forme pour « appliqué » et pour un refus */
.plan .ab-code-boite .ab-msg:empty{display:none}
.plan.hi .ab-code-boite summary{color:#AEB4E0}.plan.hi .ab-code-boite summary:hover{color:#fff}
.plan.hi .ab-code-boite .fi{background:#12164A;border-color:#3B4386;color:#fff}.plan.hi .ab-code-boite .fi::placeholder{color:#7C84C4}
.plan.hi .ab-code-boite .btn-line{background:transparent;border-color:#3B4386;color:#fff}.plan.hi .ab-code-boite .btn-line:hover{border-color:var(--cyan);color:var(--cyan)}
.plan.hi .ab-msg{color:#AEB4E0}.plan.hi .ab-msg.ok{color:var(--turq)}.plan.hi .ab-msg.bad{color:#FFA6BC}
/* page de confirmation (§4) : les lignes lues chez Stripe, les liens discrets */
.mc-fiche.confirmation{margin:14px 0 4px}.liens-discrets{text-align:center;margin-top:14px}

/* ---------- Bande-annonce de serie (v1.30, 23/09, docs/instructions/2026-09-23-bande-annonce-de-serie.md) : bouton SUR le visuel
   de la page de serie, rendu par le serveur seulement quand une bande-annonce encodee existe ; au clic, la lecture prend la place du
   visuel, dans le meme lecteur que la fiche (.lecteur, pont Player.js). Jetons et .btn-ghost de la maquette, rien d'invente. ---------- */
.hero.hero-ba{position:relative}
.hero .ba-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;line-height:1;background:rgba(0,0,44,.72);border-color:rgba(255,255,255,.55);backdrop-filter:blur(4px);padding:12px 22px;font-size:15px}
.hero .ba-btn:hover{background:rgba(0,0,44,.9);border-color:#fff}
.hero .ba-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.hero .ba-btn svg{width:18px;height:18px;fill:currentColor}
.hero .ba-lecteur{position:relative;width:100%;max-width:calc(min(70vh,640px) * 16 / 9);margin:0 auto;aspect-ratio:16/9;background:var(--night)}
.hero .ba-lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hero .ba-lecteur:focus{outline:none}

/* lot 9-bis (23/09, docs/instructions/2026-09-23-lot-9bis-acces-separe-et-bouton-retour.md) : le bloc ACCES sous le tableau (fiche et serie),
   deux voies l'une au-dessus de l'autre separees par le lisere .ou de la charte, un bouton sous chacune ; et le cadre dore de l'offre premium */
.acces-bloc{margin-top:22px}
.acces-bloc .acces-k{font:600 10.5px/1.6 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.acces-voie{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow)}
.acces-voie .acces-nom{margin:0}
.acces-voie .acces-desc{margin:0;font-size:14px;color:var(--ink-2)}
.acces-voie .acces-desc+.btn+.acces-desc{margin-top:6px}
.acces-voie .btn-large{margin-top:2px}
.acces-voie .discret{margin:0;font-size:13px;color:var(--ink-3);text-align:center}
.acces-bloc .ou{margin:12px 0}
.acces-bloc .acces-note{margin:10px 0 0;font-size:13px;color:var(--ink-3)}
.mc-offre-premium{margin-top:22px;padding:18px 20px;border:1px solid var(--or);border-radius:var(--radius)}
.mc-offre-premium h3{margin-top:0;color:var(--or)}
.mc-offre-premium .mc-plans{margin-bottom:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}   /* les boites remplissent le cadre (la grille a trois colonnes de /offres laissait un tiers vide) */
@media (max-width:640px){.mc-offre-premium{padding:14px 14px}}

/* ---------- Lot 10 (23/09) : les intervenants deviennent cliquables et ont leur page (docs/instructions/2026-09-23-lot-10-pages-intervenants.md).
   Une tete n'est un lien que si sa page existe (.person.lie > .person-lien) : au survol et au clavier, le nom passe a l'accent et le
   portrait ou l'avatar se souleve ; une tete sans page garde son apparence d'aujourd'hui. Page /intervenants/<slug> : ossature de la
   page de thematique (page-head, sec-head, grille land), portrait ou avatar a initiales en grand, biographie seulement si elle existe. ---------- */
.person-lien{display:block;color:inherit;text-decoration:none;border-radius:var(--radius-sm);outline-offset:4px}
.person-lien img,.person-lien .av{transition:transform .15s ease,box-shadow .15s ease}
.person-lien:hover b,.person-lien:focus-visible b{color:var(--accent)}
.person-lien:hover img,.person-lien:hover .av,.person-lien:focus-visible img,.person-lien:focus-visible .av{transform:translateY(-2px);box-shadow:0 8px 20px rgba(7,37,102,.18)}
.person-lien:focus-visible{outline:2px solid var(--accent)}
.fcard.intervenant h4 a{color:inherit;text-decoration:none}
.fcard.intervenant h4 a:hover,.fcard.intervenant h4 a:focus-visible{color:var(--accent)}
.intervenant-head{display:flex;gap:clamp(18px,3vw,32px);align-items:center}
.intervenant-head .av.grand,.intervenant-head img.grand{width:clamp(96px,12vw,140px);height:clamp(96px,12vw,140px);border-radius:50%;object-fit:cover;font-size:clamp(34px,4vw,48px);border:4px solid rgba(255,255,255,.18);box-shadow:var(--shadow);margin:0;flex:none}
.intervenant-head h1{margin-top:6px}
.intervenant-titre{color:#C6CBEA;font:600 15px/1.4 var(--f-body);margin-top:8px}
.intervenant-head .serie-stats a{color:#fff;text-decoration:none}
.intervenant-head .serie-stats a:hover,.intervenant-head .serie-stats a:focus-visible{text-decoration:underline}
.intervenant-bio{max-width:70ch;margin:28px 0 8px}
.series-chips{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.series-chips .n{color:var(--ink-3)}

/* ---------- Lot 13 (24/09, docs/instructions/2026-09-24-lot-13-mobile-connexion-menu-hero.md) : le HEROS LARGEUR PAGE EN 16:9 SUR MOBILE.
   A 390 px, 2,40:1 = 163 px de haut (un bandeau) ; 16:9 = 219 px. Le serveur (visuelPleine, _front.js) choisit le visuel : m-vrai = un
   VRAI 16:9 existe (servi par <picture><source media> a la place de la banniere, ou seul, .m-seul) ; m-recadre = la BANNIERE 2,40:1
   RECADREE AU CENTRE (cover) ; m-portrait = le portrait en contain (rien de coupe) ; m-vide = aucun visuel, le rail ne s'affiche pas.
   Le reste du montage NE BOUGE PAS : le voile fixe de 86 px (.pleine::before), le titre et la description par-dessus, les apercus, et
   la bande-annonce du lot BA-2 (.ba-zone iframe : hauteur libre au ratio 16:9, largeur 100 %) suit le cadre devenu 16:9.
   SUR DESKTOP RIEN NE CHANGE : aucune de ces regles ne s'applique au-dessus de 720 px, .m-seul n'y est jamais affiche.
   LOT 34 (24/09, docs/instructions/2026-09-24-lot-34-hero-banniere-desktop-169-mobile.md) : les TROIS HEROS (.hero-entier : serie,
   collection, fiche) prennent les MEMES classes, posees par heros() / choixMobile() (_front.js), et les MEMES regles ci-dessous : cadre 16:9,
   img.contain tendue sur le cadre (cover pour m-169, contain pour m-portrait), img.bg floutee dessous (filet si le ratio reel s'ecarte).
   .hero.m-seul = heros sans visuel desktop (portrait seul) : il n'existe que sur mobile. `picture{display:contents}` : la boite du heros
   reste celle d'avant le lot (un <img> direct), au pixel. ---------- */
.pleine .m-seul,.hero.m-seul{display:none}
.hero-entier picture{display:contents}
@media (max-width:720px){
  .pleine.m-169,.serie-card.pleine.m-169,.pleine.m-portrait,.serie-card.pleine.m-portrait,.hero-entier.m-169,.hero-entier.m-portrait{aspect-ratio:16/9}
  .hero-entier.m-169 img.contain,.hero-entier.m-portrait img.contain{position:absolute;inset:0;width:100%;height:100%;max-height:none}
  .pleine.m-169 .shot,.hero-entier.m-169 img.contain{object-fit:cover;object-position:center}
  .pleine.m-portrait .shot,.hero-entier.m-portrait img.contain{object-fit:contain}
  .pleine .m-seul,.hero.m-seul{display:block}
  .pleine.m-169 .plaque,.pleine.m-169 .secours,.pleine.m-portrait .plaque,.pleine.m-portrait .secours{display:none}
  .rail-section.m-vide{display:none}
}
/* ---------- LOT 16 §2 (24/09, docs/instructions/2026-09-24-lot-16-acces-gratuit-hero-et-justificatif.md) : le heros de serie ENTIER.
   LOT 26 (24/09, docs/instructions/2026-09-24-lot-26-hero-entier-sur-la-fiche.md) : la MEME mecanique s'applique a la fiche d'episode :
   le scope du lot 16 (serie seulement) est renomme `.hero-entier` (nom neutre, UNE implementation, DEUX pages : /series/<slug> et /episodes/<slug>), aucune regle
   ajoutee, aucune dupliquee. Le mobile ne bouge pas (le lot 13 commande la forme du cadre, celle-ci ce qui se passe dedans).
   `.hero img` garde son plafond min(58vh,600px) (necessaire : sans lui un bandeau sur 2560 px ferait plus de 1000 px de haut) mais quand il
   mord, l'image n'est plus coupee (cover) : elle reste entiere (contain) et c'est la copie floutee d'elle-meme (img.bg, regle v2 de la
   maquette, memes classes que .vthumb) qui remplit ce qui reste. Le plafond ne mord que sur les ecrans larges (1240 px : ~517 px de bandeau
   contre 464 px de plafond a 58vh) ; a 390 px (163 px) il n'est jamais atteint, l'image en contain a exactement la taille du cadre, le fond
   est entierement couvert : rendu mobile identique au pixel. Le bouton Bande-annonce (.ba-btn, z-index 2) reste au-dessus ; en lecture,
   front.js vide la figure et pose le lecteur (.ba-lecteur) a la place. ---------- */
.hero-entier{position:relative;overflow:hidden}
.hero-entier img.contain{position:relative;z-index:1;object-fit:contain}
.hero-entier img.bg{position:absolute;inset:-12px;z-index:0;width:calc(100% + 24px);height:calc(100% + 24px);max-height:none;object-fit:cover;filter:blur(16px) brightness(.55)}

/* ---------- Lot 20 (24/09, docs/instructions/2026-09-24-lot-20-carte-episode-actu.md) : la carte « Cette semaine sur Smile+ »
   1. Au sommaire, l'entree episode (li.ep) prend le CYAN : bordure et surtitre en --ink-cyan (le cyan pur #32C5FF manque de
   contraste sur fond clair ; --ink-cyan est le ton profond de la charte, #036A95 clair / #8ADCFF nuit), le fond reste celui du
   sommaire : on marque, on ne colorie pas. Le sommaire et la carte se repondent (meme entree vue de deux endroits, la carte porte
   deja son surtitre en cyan). Regle SCOPEE .sommaire li.ep : jusqu'au lot 19, cette entree tombait dans la regle .ep de la page de
   serie (grille 28px 200px 1fr, bordure --line) : le lien etait ecrase dans la colonne de 28 px (mesure : 28 x 84 px a 1280).
   2. La carte : cadre 16:9 depuis le lot Z (01/10, Emmanuel : « le 16/9 partout ou l'episode de la semaine est annonce » ; 2,40:1 du lot 20 au lot Z)
   qui ne bouge plus, regle v2 (.vthumb .bg + img.contain). .ep-card img{height:auto} (maquette)
   est plus tardif que .vthumb img : on remet height:100% sur les deux images du cadre. Meme cadre a toutes les largeurs. ---------- */
.sommaire li.ep{display:block;margin-top:8px;padding:6px 10px;border:1px solid var(--ink-cyan);border-radius:10px;background:var(--surface);box-shadow:none;transition:none}
.sommaire li.ep:hover{border-color:var(--ink-cyan)}
.sommaire li.ep a{grid-template-columns:22px 1fr}
.sommaire li.ep .l{display:inline} /* UN seul element de grille apres le marqueur : sans ce span, le nœud texte du titre devenait un troisieme element et tombait dans la colonne de 22 px (mesure 2.104) */
.sommaire li.ep .k{color:var(--ink-cyan);font-weight:600}
.ep-card .vthumb{aspect-ratio:16/9;border-radius:0;box-shadow:none;background:var(--night)}
.ep-card .vthumb img{width:100%;height:100%;display:block}
.ep-card .vthumb .bg{width:calc(100% + 24px);height:calc(100% + 24px)}

/* ---------- lot 21 (24/09, docs/instructions/2026-09-24-lot-21-thematiques-boite-depliante.md) : /thematiques, une BOITE DEPLIANTE par
   thematique. <details>/<summary> : s'ouvre SANS JavaScript. Fermee : titre (seul lien vers la page), nombre, chevron ; cible 44 px ;
   focus visible. Ouverte, desktop : SIX vignettes landscape (16:9, regle v2) puis la pastille « +N » ; mobile (<= 720 px) : TOUS les
   contenus en liste verticale, plusieurs boites ouvertes a la fois. Le survol (pointeur fin, front.js) ouvre la meme boite, le clic
   l'epingle. Jetons de la charte, rien d'invente. ---------- */
.themes.boites{display:flex;flex-direction:column;gap:10px}
.theme{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow)}
.theme summary{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 14px 6px 16px;cursor:pointer;list-style:none;font:600 15px/1.25 var(--f-display);color:var(--ink);border-radius:var(--radius-sm)}
.theme summary::-webkit-details-marker{display:none}
.theme summary::marker{content:""}
.theme summary .titre{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:none} /* le lien ne prend que son texte : tout le reste de la ligne deplie (mesure 2.106 : en flex:1 un tap au milieu de la ligne naviguait) */
.theme summary .n{margin-left:auto}
.theme summary .titre:hover{color:var(--accent);text-decoration:underline}
.theme summary .n{font:600 12px/1 var(--f-body);color:var(--ink-3);white-space:nowrap}
.theme summary .chev{width:20px;height:20px;color:var(--ink-3);transition:transform .2s ease}
.theme[open]{border-color:var(--accent)}
.theme[open] summary .chev{transform:rotate(180deg);color:var(--accent)}
.theme summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.theme summary .titre:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.theme-panel{padding:12px 16px 16px;border-top:1px solid var(--line)}
.theme-vignettes{gap:14px 12px;grid-template-columns:repeat(6,minmax(0,1fr))}
.theme-panel.avec-plus .theme-vignettes{grid-template-columns:repeat(7,minmax(0,1fr))}
.theme-vignettes .vmeta .t{font-size:13px}
.theme-vignettes>li:nth-child(n+7):not(.plus){display:none} /* desktop : six vignettes puis la pastille ; le mobile annule cette regle */
.theme-plus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:16/9;border:1px dashed var(--accent);border-radius:var(--radius-sm);text-decoration:none;color:var(--accent);font:800 24px/1 var(--f-display);text-align:center}
.theme-plus small{font:600 11px/1.2 var(--f-body);color:var(--ink-3)}
.theme-plus:hover{background:var(--surface-2)}
.theme-plus:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.theme:hover{border-color:var(--accent)}}
@media (max-width:1100px){.theme-vignettes,.theme-panel.avec-plus .theme-vignettes{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){
  .theme-vignettes,.theme-panel.avec-plus .theme-vignettes{grid-template-columns:1fr}
  .theme-vignettes>li:nth-child(n+7):not(.plus){display:block} /* mobile : TOUS les contenus, en liste verticale */
  .theme-vignettes>li.plus{display:none}
}
/* ---------- LOT 39 (25/09, docs/instructions/2026-09-25-lot-39-badge-acces-sur-le-visuel.md) : LE BADGE D'ACCES SUR LE VISUEL d'une serie
   ou d'une collection, sur son HEROS (/series/<slug>, /collections/<slug>) et sur sa CARTE DE RAIL (.serie-card). Les pastilles sont
   celles des vignettes de contenu (.tag, .tag-dark, .tag-achat, .tag-free, rien de nouveau), en haut a gauche comme .vthumb .badges et
   .pleine .badges : le bouton Bande-annonce du heros est au centre, le titre, le nombre, les apercus « +N » et les boutons de la carte sont
   en bas (.sbas) : rien n'est recouvert. Une ombre portee detache la pastille d'un visuel clair (la pastille Gratuit, turquoise, sur un
   visuel clair) ; sur un visuel sombre elle ne change rien. Aucun clic n'est pris : la carte reste un seul lien.
   Selecteur `figure.hero>.badges` (le heros est une <figure>, la carte .serie-card.hero un <a>/<div>) : il ne touche ni la forme du
   cadre ni la mecanique du heros entier (lots 16, 26, 34), qui reste seule a la commander. ---------- */
figure.hero>.badges{position:absolute;left:16px;top:14px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 32px);line-height:1;pointer-events:none}
.serie-card .badges{position:absolute;left:auto;right:8px;top:8px;z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:calc(100% - 16px);pointer-events:none}   /* lot AP : a droite ; left:auto, sinon .pleine .badges{left:16px} (Largeur page d'un contenu) l'emporte sur la carte de serie en Largeur page */
.serie-card.pleine .badges{left:auto;right:16px;top:14px;max-width:calc(100% - 32px)}
figure.hero>.badges .tag,.serie-card .badges .tag{box-shadow:0 1px 4px rgba(0,0,20,.45)}
/* ---------- Lot 51 (26/09, docs/instructions/2026-09-26-lot-51-format-de-visuel-par-rail.md) : LE FORMAT DE VISUEL D'UN RAIL.
   Deux cadres de plus, sur la colonne du portrait (.rail.port) : 9:16 (.r-vert) et 1:1 (.r-carre) ; le visuel entier (contain sur son fond
   floute, regle v2), jamais recadre. Un intervenant sans le format choisi garde SON picto rond (repli b) au centre du meme cadre, sur le fond
   nuit des cartes de serie ; un cadre de 88 px, comme les Visages. Grand format d'intervenant : la banniere 2,40:1 dans le .feature.
   La carte d'une serie ou d'une collection en 9:16 (.serie-card.v916) a la largeur de la carte portrait. ---------- */
.rail.r-vert,.rail.r-carre{grid-auto-columns:clamp(150px,13.5vw,196px)}
.rail.r-vert,.rail.r-carre,.rail.intervenants{list-style:none;margin:0;padding:0 0 10px}
.r-vert .vthumb{aspect-ratio:9/16}
.r-carre .vthumb{aspect-ratio:1/1}
.r-vert .vmeta .t,.r-carre .vmeta .t{font-size:14px}
.vthumb .picto{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(140deg,var(--deep,#072566),#001040)}
.vthumb .picto img,.vthumb .picto .av{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--surface);box-shadow:var(--shadow)}
.vthumb .picto .av{font-size:26px}
.vcard:hover .vthumb .picto img{transform:none}
.vthumb.banniere{aspect-ratio:2.4/1}
.serie-card.v916{width:clamp(190px,18vw,240px);aspect-ratio:9/16}
/* ---------- LOT 59 (28/09, docs/instructions/2026-09-28-lot-59-thematiques-affiches-portrait-slider.md) : les pages de thematiques
   (/thematiques et /thematiques/<slug>) montrent, au-dessus de 720 px, des AFFICHES PORTRAIT dans UN SLIDER : le rail a ratio naturel
   de l'accueil (.rail.nat.tall, --h 260 px, carteNat), fleches .rbtn de la maquette. Donnees SOUS l'affiche : serie, titre ENTIER
   (jamais coupe : aucun clamp, cesure seulement aux espaces ; 95 caracteres au plus mesures en production = 4 lignes), duree (.vmeta .m).
   Anneau de focus visible : le rail garde 4 px de marge interieure (overflow-x le couperait sinon). Sous 720 px : la liste d'avant, telle
   quelle, le slider est cache. Jetons de la charte seulement. ---------- */
.rail-btns[hidden]{display:none}
.rbtn[aria-disabled="true"]{opacity:.4;cursor:default}
.rbtn[aria-disabled="true"]:hover{border-color:var(--line);color:var(--ink)}
.affiches-nav{display:flex;justify-content:flex-end;margin-bottom:8px}
.affiches-nav:has(.rail-btns[hidden]){display:none}
.rail.affiches{list-style:none;margin:-4px -4px 0;padding:4px 4px 10px;scroll-padding-inline:4px}
.rail.affiches .vmeta .t{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:14px;overflow-wrap:normal;hyphens:manual}
.vmeta .m{margin:5px 0 0;font:600 12px/1.2 var(--f-body);color:var(--ink-3)}
.rail.affiches .vcard:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
/* Dans la boite de /thematiques, `.themes a` (la liste de liens d'avant le lot 21 : flex, bordure, fond, padding) habillait chaque carte :
   c'est elle qui rangeait la vignette a gauche du texte dans la capture d'Emmanuel. Neutralisee pour les affiches, pas pour la liste mobile. */
.themes .affiches a.vcard,.themes .affiches a.vcard:hover{display:block;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;color:inherit}
@media (min-width:721px){.liste-mobile,.theme-panel .theme-vignettes{display:none}}
@media (max-width:720px){.affiches-wrap,.affiches-nav,.sec-head .rail-btns[data-fleches]{display:none}}
/* ---------- LOT B v2 (28/09, docs/instructions/2026-09-28-lot-b-v2-recherche-emet-base-dediee.md) : /recherche, PREPROD SEULEMENT.
   Composants « recherche IA » de la MAQUETTE du front (docs/reference/maquette-smileplus-2.0.html, lignes 103-110 et 354-392), repris
   tels quels : .ask (formulaire blanc a etincelle), .qchip (questions sur fond de nuit), .sx-top (bande de nuit), .ai-box (liseré
   bleu-violet-cyan) et .ai-answer, .res-group / .res-list / .res-row, .note. Deux adaptations, dites : la surimpression devient une page
   (la bande .sx-top sert d'en-tete), et la vignette carree .mini devient le PORTRAIT 3:4 demande (72 x 96, 56 x 75 sous 480 px), la
   ligne portant ses moments (instant en mm:ss + phrase du passage, mots trouves en gras). Mobile d'abord : une colonne, cibles 44 px.
   Jetons de la charte seulement. ---------- */
.recherche-page .sx-top{background:var(--night);padding:18px 0 20px}
.recherche-page .ask{background:#fff;border-radius:18px;padding:8px;display:flex;gap:8px;align-items:center;box-shadow:0 20px 50px -20px rgba(0,85,255,.55)}
.recherche-page .ask .spark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--violet));display:grid;place-items:center;flex:none}
.recherche-page .ask .spark svg{stroke:#fff}
.recherche-page .ask input{flex:1;min-width:0;border:0;outline:0;font:500 16px/1.3 var(--f-body);color:#00002C;background:transparent;padding:10px 4px;-webkit-appearance:none;appearance:none}
.recherche-page .ask input::placeholder{color:#7B80A3}
.recherche-page .ask:focus-within{outline:2px solid var(--cyan);outline-offset:2px}
.recherche-page .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.recherche-page .qchip{background:#0A0F4E;border:1px solid #1B2170;color:#D6DAF5;border-radius:999px;padding:7px 12px;font-size:13px;text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.recherche-page .qchip:hover{border-color:var(--cyan);color:#fff}
.recherche-page .emet-bloc{margin-bottom:22px}   /* la boite elle-meme : regles communes, bloc LOT D + E plus bas */
.recherche-page .note{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.recherche-page .res-group .h5{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.recherche-page .res-list{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.recherche-page .res-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;text-decoration:none;color:inherit;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.recherche-page .res-row:hover{border-color:var(--accent)}
.recherche-page .mini{width:56px;height:56px;border-radius:9px;overflow:hidden;position:relative;background:var(--night);flex:none}
.recherche-page .mini img{width:100%;height:100%;object-fit:cover}
.recherche-page .mini .typo{padding:6px}
.recherche-page .mini .typo .t{font-size:9px;-webkit-line-clamp:3;color:#fff}
.recherche-page .mini .typo::after{font-size:60px}
.recherche-page .res-row .t{font:600 14.5px/1.3 var(--f-display);color:var(--ink)}
.recherche-page .res-row .s{font-size:12px;color:var(--ink-3);margin-top:3px}
.recherche-page .res-row.rr{grid-template-columns:72px minmax(0,1fr);align-items:start;padding:10px}
.recherche-page .mini.portrait{width:72px;height:96px;display:block}
.recherche-page .rr .t{display:block;text-decoration:none;overflow-wrap:anywhere}
.recherche-page .rr .t:hover{text-decoration:underline}
.recherche-page .moments{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.recherche-page .moments a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;min-height:44px;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.45}
.recherche-page .moments a:hover{border-color:var(--accent)}
.recherche-page .moments a:focus-visible,.recherche-page .rr .t:focus-visible,.recherche-page .qchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.recherche-page .moments .tc{font:700 13px/1.45 var(--f-display);color:var(--ink);background:var(--bg);border-radius:6px;padding:0 6px}
.recherche-page .moments mark{background:none;color:inherit;font-weight:700}
/* mesure du 28/09 (2.154, 390 px) : une phrase de passage porte un mot sans espace plus large que la colonne (page a 567 px) : on coupe partout */
.recherche-page .moments .ph,.recherche-page .res-row .s{min-width:0;overflow-wrap:anywhere}
@media (max-width:480px){.recherche-page .res-row.rr{grid-template-columns:56px minmax(0,1fr);gap:10px}.recherche-page .mini.portrait{width:56px;height:75px}.recherche-page .ask .btn span{display:none}.recherche-page .ask input{font-size:15px}}

/* ---------- LOT C (28/09, docs/instructions/2026-09-28-lot-c-volet-emet-fil-des-reponses.md) : la barre Emet et le volet ----------
   Reference du comportement et du style : docs/maquettes/volet-emet-prototype.html (valide par Emmanuel, « C'est parfait »). Les VALEURS
   viennent des jetons de ce fichier, jamais du prototype : le fond d'or et son liseré, le voile, l'anneau de focus sont DERIVES de --or,
   --night, --focus par color-mix. La barre vit DANS l'en-tete (.hdr, collant) : elle colle avec lui sans hauteur ecrite en dur. Le volet
   est un calque fixe sous l'en-tete (--emet-haut = bas de l'en-tete, mesure par front.js a l'ouverture) : la page reste dessous, a sa
   position, intacte. Ordinateur : il descend sous la barre, largeur du .wrap, deux hauteurs. <= 720 px : il monte du bas, deux hauteurs,
   poignee. L'en-tete (z 40) reste au-dessus du voile : la barre est le SEUL champ, a toutes les largeurs. */
.hdr .emet-barre{background:var(--surface);color:var(--ink);border-top:1px solid #12165A;border-bottom:1px solid var(--line)}
.hdr .emet-barre .wrap{display:block;height:auto;padding-block:10px}
.hdr .emet-barre[hidden]{display:none}   /* LOT O / D1 : /recherche garde son propre champ, un seul champ Emet par page */
/* LOT H (29/09) : la barre est BLANCHE dans les DEUX themes, comme la boite d'Emet (lot D) : posee sur l'en-tete bleu nuit, c'est elle qui
   designe l'endroit ou l'on parle (prototype docs/maquettes/volet-emet-prototype.html, .champ .loupe .demander). Couleurs EN DUR sur le blanc :
   les jetons --ink-2 / --ink-3 du theme sombre n'y passent pas. Texte d'exemple #7B80A3 (3,85:1, SOUS le 4,5:1 AA : impose, signale), question #00002C (20,26:1), calcules dans le
   fichier du lot. Focus : liseré #0055FF sur le blanc (5,61:1, meme valeur dans les deux themes) + anneau --focus hors de la barre. */
.emet-champ{display:flex;align-items:center;gap:10px;height:48px;padding:0 6px 0 10px;border-radius:999px;border:1px solid rgba(0,0,44,.10);background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,44,.06),0 10px 24px -16px rgba(0,0,44,.30);transition:border-color .18s ease,box-shadow .18s ease;max-width:760px}
.emet-champ:focus-within{border-color:#0055FF;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 35%,transparent),0 10px 24px -16px rgba(0,0,44,.30)}
.emet-champ input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:#00002C;font:400 15px/1 var(--f-body);outline:none;-webkit-appearance:none;appearance:none}
.emet-champ input::placeholder{color:#7B80A3;opacity:1}
.emet-champ input::-webkit-search-cancel-button{-webkit-appearance:none}
/* l'avatar d'Emet (remplace la pastille « E » partout) : rond, cover, fond de repli discret le temps que l'image arrive ; 28 px barre et volet,
   32 px dans la boite d'Emet (.emet .hd) */
.emet-avatar{flex:none;display:block;width:28px;height:28px;border-radius:50%;object-fit:cover;background:#E6E9F4}
.emet .hd .emet-avatar{width:32px;height:32px}
.emet-loupe{flex:none;display:block;width:22px;height:22px}
/* LOT BD (02/10) : le « i » d'Emet, une INFORMATION et pas un appel a l'action. Le lien ENVELOPPE l'avatar (28 px) : cible 44 x 44, marges de
   -8 px, la ligne compte 28 px comme avant (mesure : un « i » en ligne retirait 44 px au champ, 17 px restants a 360). Le « i » est une
   pastille de 15 px au coin bas-droit de l'avatar : fond blanc, trait #6B7095 (4,9:1 sur le blanc). Focus : anneau #0055FF (liseré de la
   barre, 5,61:1 sur le blanc, les deux themes). */
.emet-info{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -8px;border-radius:50%;color:#6B7095;text-decoration:none}
.emet-info .i{position:absolute;right:3px;bottom:5px;width:15px;height:15px;border-radius:50%;background:#FFFFFF;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.emet-info .i .pt{fill:currentColor;stroke-width:1.2}
.emet-info:hover{color:#0055FF}
.emet-info:focus-visible{outline:2px solid #0055FF;outline-offset:-2px;border-radius:50%}
/* LOT BE (02/10) : le MEME « i », seul, en ligne a cote de « Emet sans limite » dans le bloc Option des cartes de /offres. Cible 44 x 44 gardee,
   marges negatives pour ne grandir ni la ligne ni le bloc ; le cercle quitte le coin de l'avatar (statique, sans fond blanc), couleur du texte
   secondaire de la carte (information, pas un appel a l'action). */
.emet-info.en-ligne{display:inline-flex;vertical-align:middle;margin:-15px -10px;color:var(--ink-2)}
.emet-info.en-ligne .i{position:static;background:none}
.plan.hi .emet-info.en-ligne{color:#AEB4E0}
.plan.hi .emet-info.en-ligne:hover{color:#fff}
.plan.hi .emet-info.en-ligne:focus-visible{outline-color:#32C5FF}
.emet-go{flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--blue);color:#fff;font:600 13.5px/1 var(--f-display);white-space:nowrap;cursor:pointer}
.emet-go:hover{background:#0047D6}
.emet-go:focus-visible{outline:2px solid #00002C;outline-offset:2px}
.emet-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ev-tete .icon,.ev-commandes .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.emet-ouvert{overflow:hidden}
.emet-voile{position:fixed;inset:0;z-index:38;background:color-mix(in srgb,var(--night) 58%,transparent);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}
.emet-voile[data-on="1"]{opacity:1;visibility:visible;transition:opacity .28s ease}
.emet-volet{position:fixed;left:0;right:0;top:var(--emet-haut,120px);z-index:39;pointer-events:none;visibility:hidden;transition:visibility 0s linear .34s}
.emet-volet[data-on="1"]{visibility:visible;transition:none}
.ev-panneau{pointer-events:auto;display:flex;flex-direction:column;height:min(600px,calc(100dvh - var(--emet-haut,120px) - 24px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-14px);opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .22s ease,height .28s ease}
.emet-volet[data-on="1"] .ev-panneau{transform:none;opacity:1}
.ev-panneau[data-grand="1"]{height:calc(100dvh - var(--emet-haut,120px) - 16px)}
.ev-poignee{display:none}
.ev-tete{flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line)}
.ev-tete .ev-q{flex:1 1 auto;min-width:0;font:600 14.5px/1.3 var(--f-display);color:var(--title);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-tete button{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;padding:0}
.ev-tete button:hover{background:var(--surface-2);color:var(--ink)}
.ev-grille{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.ev-grille.sans-fil{grid-template-columns:minmax(0,1fr)}
.ev-scene{min-height:0;overflow-y:auto;padding:16px 18px;border-right:1px solid var(--line)}
.ev-corps{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 22px}
.ev-lecteur{--or:#E9C76B;position:relative;aspect-ratio:16/9;border-radius:var(--radius);background:#000;border:1px solid var(--line);overflow:hidden}
.ev-lecteur .ev-cadre,.ev-lecteur .ev-affiche{position:absolute;inset:0;width:100%;height:100%;border:0}
/* lot 32 : une iframe d'une autre origine sous un color-scheme different est peinte opaque en blanc */
.ev-lecteur .ev-cadre{color-scheme:light;opacity:0;z-index:1;transition:opacity .25s ease}
.ev-lecteur .ev-cadre.actif{opacity:1;z-index:2}
.ev-lecteur .ev-affiche{object-fit:contain;z-index:0}
/* display:flex l'emporte sur la feuille du navigateur : sans cette regle, carton et refus restaient POSES sur la video (mesure du 28/09, 2.159 :
   cadre noir pendant la lecture, meme piege qu'au lot BA-2) */
.ev-lecteur [hidden]{display:none}
.ev-rang{position:absolute;top:10px;left:10px;z-index:4;pointer-events:none;display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--night) 70%,transparent);border:1px solid color-mix(in srgb,var(--or) 45%,transparent);font:700 11px/1 var(--f-display);color:var(--or)}
.ev-carton{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px;text-align:center;background:color-mix(in srgb,var(--night) 84%,transparent);color:#fff;pointer-events:none}
.ev-carton .kicker{color:var(--cyan)}
.ev-carton strong{font:700 clamp(16px,2vw,21px)/1.2 var(--f-display);max-width:32ch}
.ev-carton .ts{font:600 12.5px/1 var(--f-display);color:var(--or)}
.ev-refus{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;text-align:center;background:var(--night);color:#fff}
.ev-refus p{max-width:44ch;font-size:14px;line-height:1.5}
.ev-refus .liens{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
/* LOT V : etat final (lecture qui ne part pas par nos boutons) et son coupe : un BANDEAU en haut, le lecteur reste visible et touchable dessous */
.ev-refus[data-final]{inset:0 0 auto 0;justify-content:flex-start;gap:0;padding:8px 12px;background:color-mix(in srgb,var(--night) 92%,transparent)}
.ev-refus[data-final] p{max-width:none;font-size:13px;line-height:1.4}
.ev-refus[data-final] a{color:var(--cyan);text-decoration:underline}
.ev-refus[data-final] .ev-son{margin-left:8px;padding:6px 12px;min-height:32px;font-size:13px}
.ev-demarrer{position:absolute;inset:0;margin:auto;z-index:3;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--night) 62%,transparent);border:1.5px solid rgba(255,255,255,.34);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.ev-demarrer svg{width:22px;height:24px;fill:#fff;margin-left:3px}
.ev-perles{display:flex;gap:5px;margin-top:10px}
.ev-perles button{flex:1 1 0;height:24px;border:0;background:transparent;padding:0;display:flex;align-items:center}
.ev-perles button i{display:block;width:100%;height:5px;border-radius:3px;background:var(--surface-2);transition:background .2s ease}
.ev-perles button[data-e="vu"] i{background:color-mix(in srgb,var(--or) 40%,transparent)}
.ev-perles button[data-e="ici"] i{background:linear-gradient(90deg,var(--or) calc(var(--p,0) * 100%),color-mix(in srgb,var(--or) 40%,transparent) 0)}
.ev-perles button[data-e="refuse"] i{background:repeating-linear-gradient(135deg,var(--line) 0 4px,transparent 4px 7px)}
.ev-commandes{display:flex;align-items:center;gap:6px;margin-top:6px}
.ev-commandes button{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;padding:0}
.ev-commandes button:disabled{opacity:.4;cursor:default}
.ev-commandes .ev-pos{flex:1 1 auto;min-width:0;margin-left:6px;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.ev-commandes .ev-pos b{color:var(--or);font:700 12.5px/1 var(--f-display)}
.ev-note{margin-top:8px;font-size:12px;line-height:1.5;color:var(--ink-3)}
.ev-cour{margin-bottom:14px}
.ev-cour .ts{font:700 12px/1 var(--f-display);color:var(--or);margin-bottom:6px}
.ev-cour h3{font-size:17px;margin-bottom:3px}
.ev-cour .mt{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.ev-cour .tx{font-size:14px;line-height:1.55;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ev-lire{width:100%;min-height:46px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 14.5px/1.2 var(--f-display);display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:16px;padding:8px 16px}
.ev-lire svg{width:12px;height:14px;fill:currentColor;flex:none}
.ev-titre{font:600 11px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:4px 0 9px}
.ev-fil,.ev-videos{list-style:none;margin:0 0 16px;padding:0}
.ev-mom{width:100%;text-align:left;display:flex;gap:11px;padding:11px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line);margin-bottom:8px;color:var(--ink)}
.ev-mom[aria-current="true"]{background:color-mix(in srgb,var(--or) 10%,transparent);border-color:color-mix(in srgb,var(--or) 40%,transparent)}
.ev-mom .h{flex:none;width:52px;font:700 12.5px/1.25 var(--f-display);color:var(--ink-3);padding-top:2px}
.ev-mom[aria-current="true"] .h{color:var(--or)}
.ev-mom .c{flex:1 1 auto;min-width:0}
.ev-mom .c b{display:block;font:500 13.5px/1.4 var(--f-body);color:var(--ink);margin-bottom:4px;overflow-wrap:anywhere}
.ev-mom .c b mark,.ev-cour mark{background:none;color:inherit;font-weight:700}
.ev-mom .c em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3)}
.ev-mom[data-refuse="1"] .c em::after{content:" · réservé"}
.ev-videos li a{display:block;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none}
.ev-videos li a:hover .t{text-decoration:underline}
.ev-videos .t{display:block;font:600 13.5px/1.35 var(--f-display);color:var(--title)}
.ev-videos .s{display:block;font-size:11.5px;color:var(--ink-3)}
.ev-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ev-chips button{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:999px;padding:8px 13px;min-height:40px;font-size:13.5px;text-align:left}
.ev-chips button:hover{border-color:var(--focus)}
.ev-attente{color:var(--ink-2);font-size:14px}
.ev-plus{display:inline-block;margin-top:4px;font:600 13.5px/1.4 var(--f-display);color:var(--accent)}
@media (max-width:960px){
  /* une colonne qui defile d'un bloc ; min-height:auto : avec 0, les lignes de la grille retrecissaient sous leur contenu et la scene
     chevauchait le corps (mesure du 28/09 a 390 px, 2.158) */
  .ev-grille{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;overflow-y:auto;overscroll-behavior:contain}
  .ev-scene{border-right:0;overflow:visible;padding-bottom:0;min-height:auto}
  .ev-corps{overflow:visible;min-height:auto}
}
@media (max-width:720px){
  .hdr .emet-barre .wrap{padding-block:8px}
  .emet-volet{top:auto;bottom:0}
  .emet-volet .wrap{padding-inline:0}
  .ev-panneau{height:min(64dvh,calc(100dvh - var(--emet-haut,120px) - 8px));border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;transform:translateY(100%);opacity:1}
  .ev-panneau[data-grand="1"]{height:calc(100dvh - var(--emet-haut,120px) - 8px)}
  .ev-poignee{display:flex;flex:none;position:relative;z-index:1;width:120px;height:44px;margin:0 auto -18px;border:0;background:transparent;justify-content:center;align-items:flex-start;padding:9px 0 0}
  .ev-poignee i{display:block;width:40px;height:4px;border-radius:2px;background:var(--line)}
  .ev-tete{padding:0 6px 4px 14px}
  .ev-tete .ev-taille{display:none}
  .ev-tete button{width:44px;height:44px}
  .ev-scene{padding:12px 14px 0}
  .ev-corps{padding:12px 14px calc(18px + env(safe-area-inset-bottom,0px))}
  /* 8 perles a 390 px : 41 px avec l'ecart de 5 px (mesure du 28/09) ; l'ecart passe DANS le bouton pour que chaque cible fasse 44 px */
  .ev-perles{margin-top:0;gap:1px}
  .ev-perles button{height:44px;min-width:0}
  .ev-perles button i{margin:0 2px}
  .ev-commandes{margin-top:0}
}
@media (prefers-reduced-motion: reduce){.emet-champ,.emet-voile,.emet-volet,.ev-panneau,.ev-lecteur .ev-cadre,.ev-perles button i{transition:none}}
/* ---------- LOT G (29/09, docs/instructions/2026-09-29-lot-g-tout-se-lit-sur-place.md) : dans la recherche, tout se lit sur place ----------
   UNE scene (.ev-scene, construite par front.js) pour deux hotes : le volet, et /recherche (#rp-scene dans .rp-grille). Les regles de la
   scene restent celles du lot C ci-dessus, communes aux deux ; ici seulement : les actions du moment en cours (« Reprendre le fil », la
   seule sortie « Ouvrir la fiche »), la mise en page de /recherche, et le lecteur qui RESTE A L'ECRAN une fois lance (collant) pour qu'un
   clic plus bas dans la liste se voie jouer sans faire defiler la liste. */
.ev-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-height:44px;margin-top:6px}
.ev-reprendre{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--or) 45%,var(--line));background:color-mix(in srgb,var(--or) 10%,transparent);color:var(--ink);font:600 13px/1.2 var(--f-display)}
.ev-fiche{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-left:auto;white-space:nowrap;font:600 13px/1.2 var(--f-display);color:var(--accent);text-decoration:none}
.ev-fiche:hover{text-decoration:underline}
.ev-fiche .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ev-reprendre[hidden],.ev-fiche[hidden]{display:none}
/* hauteurs constantes d'un moment a l'autre : la ligne de position tient sur deux lignes au plus (44 px, la hauteur des boutons) */
.ev-commandes .ev-pos{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-reprendre:focus-visible,.ev-fiche:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.recherche-page .rp-grille.avec-scene{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.recherche-page .rp-scene{position:sticky;top:calc(var(--emet-haut,68px) + 12px);z-index:2}
.recherche-page .rp-scene[hidden]{display:none}
.recherche-page .rp-scene .ev-scene{padding:0;border:0;overflow:visible;min-height:0}
@media (max-width:960px){
  /* une colonne : SEUL le cadre video colle (perles, commandes et actions defilent avec la liste) ; la scene et son hote passent en
     display:contents pour que le cadre ait toute la colonne comme bloc conteneur. Rien ne se masque ni ne change de hauteur au lancement :
     la liste ne bouge pas (mesure du 29/09 en 2.171 : toute la scene collante = 340 px sur 664, et 77 px de saut quand la note se masquait).
     2.173 : le cadre ET les actions du moment (.ev-colle) collent ensemble, sinon « Reprendre le fil » partait avec la liste
     LOT P (30/09) : PERIME en partie, le bloc colle colle toujours et les actions en sont sorties (bloc LOT P en fin de fichier) */
  .recherche-page .rp-grille.avec-scene{grid-template-columns:minmax(0,1fr);gap:0}
  .recherche-page .rp-scene,.recherche-page .rp-scene .ev-scene{display:contents}
  .recherche-page .rp-scene .ev-note{display:none}
  .recherche-page .rp-corps{margin-top:16px}
  .recherche-page .rp-scene .ev-colle{background:var(--bg);padding-bottom:4px}   /* toujours : rien ne change de hauteur au lancement */
  .recherche-page .rp-grille[data-sur-place="1"] .ev-colle{position:sticky;top:var(--emet-haut,68px);z-index:3}
  .ev-grille>.ev-scene{display:contents}
  .ev-grille>.ev-scene[hidden]{display:none}
  .ev-grille>.ev-scene>*{margin-inline:18px}
  .ev-grille>.ev-scene>.ev-colle{padding-top:16px;padding-bottom:4px;background:var(--surface)}
  .ev-grille[data-sur-place="1"]>.ev-scene>.ev-colle{position:sticky;top:0;z-index:3}
}
@media (max-width:720px){.ev-grille>.ev-scene>*{margin-inline:14px}.ev-grille>.ev-scene>.ev-colle{padding-top:12px}}
@media (max-width:720px){.ev-reprendre,.ev-fiche{min-height:44px}}
/* le bloc « moment en cours » du volet (.ev-cour) est AU-DESSUS de la liste : sa hauteur ne varie plus d'un moment a l'autre (titre sur deux
   lignes reservees, une ligne de meta, six lignes de texte reservees), sinon chaque changement de moment ferait sauter la liste (mesure du
   29/09 en 2.170 : 63 px, compenses par le defilement ; desormais 0) */
.ev-cour h3{line-height:1.25;height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-cour .mt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.ev-cour .tx{height:calc(1.55em * 6)}
/* ---------- LOTS D et E (28/09, docs/instructions/2026-09-28-lot-d-boite-emet-blanche.md et 2026-09-28-lot-e-explication-collee-a-la-boite-emet.md) :
   LA BOITE D'EMET, UN SEUL JEU DE REGLES pour le volet (front.js, rendre()) ET la page /recherche (_recherche_emet.js, pageRecherche()).
   Reference exacte : docs/maquettes/volet-emet-prototype.html, regles .emet-bloc / .emet / .emet-quoi. La reponse est posee sur une FEUILLE
   BLANCHE dans les deux themes (voulu : c'est ce qui la detache de l'interface), d'ou les couleurs EN DUR : les jetons --ink-2 / --ink-3 /
   --surface-2 du theme sombre ne passent pas sur ce blanc. .emet-bloc est l'objet visible (bordure, ombre, rayon, overflow:hidden) ; la
   feuille .emet n'a que son fond et son rembourrage ; l'explication .emet-quoi est COLLEE dessous (fond #EEF1F8 = --surface-2 du theme
   clair, filet en haut), sans espace ni rayon entre les deux : les coins du bas sont ceux du conteneur. ---------- */
.emet-bloc{margin-bottom:12px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid rgba(0,0,44,.09);box-shadow:0 1px 2px rgba(0,0,44,.06),0 12px 28px -16px rgba(0,0,44,.32)}
.emet{padding:14px 15px;background:#FFFFFF}
.emet .hd{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.emet .hd .nom{margin:0;font:600 11px/1 var(--f-body);letter-spacing:.15em;text-transform:uppercase;color:#4A5078}
.emet .hd .sp{flex:1 1 auto}
.emet .ia{flex:none;display:block;width:21px;height:21px}
.emet-texte{font-size:13.5px;line-height:1.58;color:#00002C;overflow-wrap:anywhere;margin:0}
.emet-bloc[data-etat="attente"] .emet-texte,.emet-bloc[data-etat="indispo"] .emet-texte{color:#4A5078}
.emet-texte.thinking::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.emet-texte.thinking::after{animation:none;content:"…"}}
/* LOT N (29/09) : la boite qui attend. La mention (.emet-etat, aria-live) porte la LOUPE ETOILEE de la barre, dessin intact : ses trois etoiles
   (path 2, 3 et 4 ; le 1er path est le manche) s'allument l'une apres l'autre en boucle lente (2,4 s, 0,8 s d'ecart). On anime fill-opacity,
   jamais opacity : l'attribut opacity de chaque etoile (1 / 0,72 / 0,5) reste le plafond, l'ordre des trois intensites est garde. Sous
   prefers-reduced-motion, rien ne bouge et le texte reste. Les pistes arrivent en fondu (0,4 s), puis restent sous la reponse (.emet-pistes).
   La NATURE : une ligne sobre avant le texte (approchante, rien), aucune pour une reponse exacte. */
.emet-etat{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;font-size:13.5px;line-height:1.58;color:#4A5078}
.emet-etat[hidden]{display:none}   /* display:flex l'emporte sur la feuille du navigateur (piege de la 2.93) */
.emet-etat .emet-loupe{flex:none;width:20px;height:20px;margin-right:2px}
.emet-etat .emet-loupe path:nth-of-type(n+2){fill-opacity:.28;animation:emet-etoile 2.4s ease-in-out infinite}
.emet-etat .emet-loupe path:nth-of-type(3){animation-delay:.8s}
.emet-etat .emet-loupe path:nth-of-type(4){animation-delay:1.6s}
@keyframes emet-etoile{0%,55%,100%{fill-opacity:.28}22%{fill-opacity:1}}
.emet-etat .p{color:#00002C;animation:emet-piste .4s ease-out both}
.emet-etat .sep{color:#7B80A3}
@keyframes emet-piste{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.emet-etat .emet-loupe path{animation:none;fill-opacity:1}.emet-etat .p{animation:none}}
.emet-nature{margin:0 0 5px;font:600 12px/1.4 var(--f-body);color:#4A5078}
.emet-pistes{margin:10px 0 0;font-size:12px;line-height:1.5;color:#4A5078}
.emet-pistes .k{font-weight:600}
.emet-pistes .sep{color:#7B80A3}
.emet-quoi{display:flex;align-items:flex-start;gap:7px;padding:9px 15px 10px;margin:0;background:#EEF1F8;border-top:1px solid rgba(0,0,44,.08);font:400 11.5px/1.45 var(--f-body);color:#4A5078}
.emet-quoi svg{flex:none;width:13px;height:13px;margin-top:1px;color:#7B80A3}
/* ---------- LOT P (30/09, docs/instructions/2026-09-30-lot-p-volet-emet-sur-mobile.md) : le volet d'Emet sur TELEPHONE ----------
   1. Champs de question a 16 px sur telephone et ecran tactile : sous 16 px, Safari iOS AGRANDIT la page au focus du champ et ne la rend pas
      (la barre etait a 15 px, le champ de /recherche a 15 px sous 480 px). Page agrandie = plus large que l'ecran (defilement lateral), volet
      « trop bas », croix et commandes hors champ : les constats 1, 2 et 6 d'Emmanuel. Non reproductible hors d'un vrai iPhone (suppose).
   2. <= 720 px : le volet occupe TOUTE la hauteur utile, du bas de l'en-tete (--emet-haut, mesure) au bas de l'ecran, par ANCRAGE (top + bottom
      d'un calque fixe) et non par une hauteur en vh : le bas suit la barre d'outils du navigateur, sans le piege de 100vh ; l'encoche du bas
      est deja dans le rembourrage de .ev-corps (env(safe-area-inset-bottom)). Jusqu'en 2.184 : 64dvh, haut du volet a 304 px sur 844.
   3. <= 960 px : le bloc colle (.ev-colle : cadre, perles, fleches et ligne du moment ; les actions en sont sorties) colle TOUJOURS, plus seulement apres un
      lancement sur place (lot G : data-sur-place) ; mesure en 2.184 : avant tout lancement, 600 px de defilement emportaient le lecteur.
   4. Rien ne defile lateralement dans le volet : overflow-y:auto calculait overflow-x a auto sur .ev-grille. */
@media (max-width:720px),(pointer:coarse){
  .emet-champ input,.recherche-page .ask input{font-size:16px}
}
@media (max-width:960px){
  .ev-grille{overflow-x:hidden}
  .ev-grille>.ev-scene>.ev-colle{position:sticky;top:0;z-index:3}
  .recherche-page .rp-scene .ev-colle{position:sticky;top:var(--emet-haut,68px);z-index:3}
  .ev-colle .ev-perles,.ev-colle .ev-commandes{margin-inline:0}
  .ev-grille{scroll-padding-top:var(--ev-colle-h,0px)}
  html:has(.rp-grille.avec-scene){scroll-padding-top:calc(var(--emet-haut,68px) + var(--ev-colle-h,0px))}
}
@media (max-width:720px){
  .emet-volet{top:var(--emet-haut,120px);bottom:0}
  .emet-volet .wrap{height:100%;max-width:none}
  .ev-panneau,.ev-panneau[data-grand="1"]{height:100%}
  .ev-poignee{touch-action:none}
  /* la croix, en haut a droite : une cible de 44 px qui se voit (fond et liseré), pas un trait gris sur le blanc du volet */
  .ev-tete .ev-fermer{background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
}
/* ecran court (iPhone SE : 568 et 667 px) : le lecteur colle ne prend jamais plus de la moitie de la hauteur sous l'en-tete ; mesure en 2.186 a
   320 x 568 : bloc colle 317 px, 18 px de liste visibles. Le cadre garde son 16:9, il retrecit et se centre. */
@media (max-width:720px) and (max-height:700px){
  .ev-colle .ev-lecteur{max-width:calc((100vh - var(--emet-haut,120px)) * .5);max-width:calc((100dvh - var(--emet-haut,120px)) * .5);margin-inline:auto}
}

/* ---------- LOT Q (30/09, docs/instructions/2026-09-30-lot-q-volet-feuille-pleine-page-mobile.md) : le volet RECOUVRE la page sur telephone ----------
   0. Le site coupe a droite sur l'iPhone d'Emmanuel (2.187). MESURE en WebKit et Chromium mobiles (UA iPhone, 320 a 414 px, echantillonnage
      toutes les 80 ms de tout element, fixes et collants compris, pendant tout le parcours) : AUCUN element ne depasse, scrollX = 0, echelle
      du viewport visuel = 1. Cause non reproductible hors d'un vrai iPhone ; la seule mecanique trouvee : QUATORZE champs sous 16 px sur
      telephone (lettre d'information 14 px, connexion et Mon compte 15 px) : Safari iOS agrandit la page au focus et garde ce zoom (bord
      droit rogne partout, fixes compris). Remedes : tout champ a 16 px sur telephone ; maximum-scale=1 sur iOS seulement (_front.js) ;
      text-size-adjust fige ; le document ne peut plus defiler lateralement (overflow-x:clip sur la racine : les rails gardent leur propre
      defilement) ; viewport-fit=cover et encoches laterales respectees (.wrap, tete et bloc colle du volet).
   1. <= 760 px : le volet est une FEUILLE qui recouvre la page (en-tete du site et barre de recherche compris) sous le seul temoin
      d'environnement (--emet-feuille-haut, 0 en production) ; barre de titre d'UNE ligne de 44 px (question tronquee, croix) ; toucher la
      question RAMENE le champ (data-champ : la feuille descend sous l'en-tete). Le lecteur vient juste dessous.
   2. Bloc colle compact : lecteur, puis UNE rangee (perles dans leur propre defilement horizontal, fleches), puis la ligne du moment sur UNE
      ligne. Sur la feuille, la reponse d'Emet se lit repliee a deux lignes (« Lire toute la reponse ») ; le rappel du moment en cours
      (.ev-cour), la note des marges et le bouton « Lire le fil » (doublons du bloc colle) ne s'y affichent plus. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (overflow:clip){html{overflow-x:clip}}
@media (max-width:720px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px}
}
.ev-tete .ev-q{flex:1 1 auto;display:block;width:auto;height:auto;min-width:0;padding:0;border:0;border-radius:0;background:transparent;text-align:left;cursor:text}
.ev-tete .ev-q:hover{background:transparent;color:var(--title)}
.ev-tete .ev-q:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.emet-deplier{display:none}
@media (max-width:760px){
  /* le bloc colle, commun au volet et a /recherche : lecteur / [perles | ‹ ▶ ›] / ligne du moment ; l'ordre du DOM est l'ordre a l'ecran */
  .ev-colle{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 44px;column-gap:2px;align-items:center}
  .ev-colle .ev-lecteur{grid-column:1/-1;margin-bottom:4px}
  .ev-colle .ev-commandes{display:contents}
  .ev-colle .ev-perles{grid-column:1;grid-row:2;margin:0 4px 0 0;gap:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .ev-colle .ev-perles::-webkit-scrollbar{display:none}
  .ev-colle .ev-perles button{flex:0 0 44px;width:44px;height:44px;scroll-snap-align:center}
  .ev-colle .ev-perles button i{margin:0 3px}
  .ev-colle .ev-prec{grid-column:2;grid-row:2}
  .ev-colle .ev-jouer{grid-column:3;grid-row:2}
  .ev-colle .ev-suiv{grid-column:4;grid-row:2}
  .ev-colle .ev-commandes .ev-pos{grid-column:1/-1;grid-row:3;display:block;margin:2px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.4}
  .ev-colle .ev-commandes .ev-pos b{font-size:12px}
  /* la feuille */
  .emet-voile{display:none}
  .emet-volet{top:var(--emet-feuille-haut,0px);bottom:0;z-index:101}
  .emet-volet[data-champ="1"]{top:var(--emet-haut,120px)}
  .emet-volet .wrap{height:100%;max-width:none;padding-inline:0}
  .ev-panneau,.ev-panneau[data-grand="1"]{height:100%;border:0;border-radius:0;box-shadow:none;transform:translateY(100%);opacity:1}
  .emet-volet[data-on="1"] .ev-panneau{transform:none}
  .ev-poignee{display:none}
  .ev-tete{box-sizing:border-box;height:44px;gap:8px;padding:0 max(0px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));border-bottom:0;box-shadow:0 1px 0 var(--line);position:relative;z-index:4}
  .ev-tete .emet-avatar{width:24px;height:24px}
  .ev-tete .ev-q{font:600 14px/44px var(--f-display);height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--title)}
  .ev-tete .ev-taille{display:none}
  /* la croix : cible de 44 px, rond visible de 34 px dedans (la barre ne fait que 44 px) */
  .ev-tete .ev-fermer{position:relative;isolation:isolate;width:44px;height:44px;background:transparent;border:0;color:var(--ink)}
  .ev-tete .ev-fermer::before{content:"";position:absolute;inset:5px;z-index:-1;border-radius:50%;background:var(--surface-2);border:1px solid var(--line)}
  .ev-grille>.ev-scene>*{margin-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))}
  .ev-grille>.ev-scene>.ev-colle{padding-top:8px;padding-bottom:2px}
  .ev-colle .ev-lecteur{max-width:none;margin-inline:0}
  .ev-grille>.ev-scene>.ev-note,#emet-volet .ev-cour,#emet-volet .ev-lire{display:none}
  .ev-actions{margin-top:2px;min-height:44px}
  .ev-corps{padding:8px 12px calc(16px + env(safe-area-inset-bottom,0px))}
  /* la reponse d'Emet, repliee sur la feuille */
  #emet-volet .emet{padding:10px 12px}
  #emet-volet .emet .hd{margin-bottom:5px}
  #emet-volet .emet .hd .emet-avatar{width:22px;height:22px}
  #emet-volet .emet-texte{font-size:13px;line-height:1.5}
  #emet-volet .emet-bloc:not([data-deplie="1"]) .emet-texte{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #emet-volet .emet-bloc:not([data-deplie="1"]) .emet-pistes,#emet-volet .emet-bloc:not([data-deplie="1"]) .emet-quoi{display:none}
  #emet-volet .emet-deplier{display:block;flex:none;min-height:32px;margin:-6px 4px -6px 0;padding:0 4px;border:0;background:transparent;color:#0047D6;font:600 12.5px/32px var(--f-display)}
  #emet-volet .emet-deplier[hidden]{display:none}
  #emet-volet .emet-bloc{margin-bottom:8px}
  /* les passages : texte reduit, interligne resserre, trois lignes au plus */
  .ev-titre{margin:2px 0 6px}
  .ev-mom{gap:9px;padding:8px 10px;margin-bottom:6px}
  .ev-mom .h{width:42px;font-size:11.5px;padding-top:1px;color:var(--ink-2)}
  /* l'or du moment en cours, fonce vers l'encre : 3,63:1 sur le fond creme en theme clair (mesure 2.190), sous le seuil a cette taille */
  .ev-mom[aria-current="true"] .h{color:color-mix(in srgb,var(--or) 72%,var(--ink))}
  .ev-mom .c b{font-size:12.5px;line-height:1.38;margin-bottom:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ev-mom .c em{font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ev-videos li a{padding:7px 0}
  .ev-videos .t{font-size:13px}
  .ev-videos .s{font-size:11px;color:var(--ink-2)}
}
/* ecran court (360 x 640, iPhone SE) : deux passages entiers sous le bloc colle ; le titre « Le fil des reponses » reste pour les lecteurs
   d'ecran, l'extrait d'un passage tient en deux lignes (la ligne du moment et le lecteur disent le reste) */
@media (max-width:760px) and (max-height:700px){
  #emet-volet .ev-titre:has(+ .ev-fil){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
  .ev-mom .c b{-webkit-line-clamp:2}
  .ev-corps{padding-top:6px}
}
/* LOT S (30/09, docs/instructions/2026-09-30-lot-s-liste-de-ce-qu-emet-a-retenu.md) : la liste montre ce qu'Emet a RETENU. Sur /recherche,
   la liste attend le jugement (data-jugement pose en ligne, retire par front.js, 15 s au plus) ; ce que la recherche a ramene et qu'Emet n'a
   pas retenu est REPLIE sous un resume qui le dit, dans le volet (.ev-autres) comme sur la page (.rp-autres), jamais au rang des retenus. */
.recherche-page .rp-grille[data-jugement="attente"] .rp-liste{display:none}
.ev-autres,.recherche-page .rp-autres{margin:4px 0 16px}
.ev-autres>summary,.recherche-page .rp-autres>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:600 12.5px/1.35 var(--f-body);color:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ev-autres>summary::-webkit-details-marker,.recherche-page .rp-autres>summary::-webkit-details-marker{display:none}
.ev-autres>summary::before,.recherche-page .rp-autres>summary::before{content:"";flex:none;width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.ev-autres[open]>summary::before,.recherche-page .rp-autres[open]>summary::before{transform:rotate(45deg)}
.ev-autres>summary:focus-visible,.recherche-page .rp-autres>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ev-autres>.ev-note,.recherche-page .rp-autres>.note{margin:8px 0}
@media (prefers-reduced-motion:reduce){.ev-autres>summary::before,.recherche-page .rp-autres>summary::before{transition:none}}
/* LOT U (30/09) : le repli invite a l'ouvrir : titre a l'encre pleine (« Voir les N autres vidéos trouvées »), apercu des deux premiers titres
   dessous, coupe a une ligne (jamais de defilement lateral a 390 px : min-width:0 et ellipse) ; survol = liseré, la zone reste de 44 px au moins. */
.ev-autres>summary,.recherche-page .rp-autres>summary{padding:8px 0;color:var(--ink)}
.ev-autres>summary .l,.recherche-page .rp-autres>summary .l{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ev-autres>summary .t,.recherche-page .rp-autres>summary .t{font:600 13.5px/1.35 var(--f-body)}
.ev-autres>summary .ap,.recherche-page .rp-autres>summary .ap{font:400 12.5px/1.35 var(--f-body);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-autres>summary:hover .t,.recherche-page .rp-autres>summary:hover .t{text-decoration:underline;text-underline-offset:3px}
/* LOT S : /recherche diffusee par morceaux ; la boite d'attente (pistes a mesure) s'efface des que le contenu la suit (sans JavaScript
   compris ; avec JavaScript elle est retiree du document) */
.recherche-page .rp-attente:not(:last-child){display:none}
/* LOT T (30/09, docs/instructions/2026-09-30-lot-t-acces-a-emet-compte-10-questions-abonnement.md) : LE MUR D'EMET dans la MEME feuille
   blanche que la reponse (.emet-bloc / .emet, couleurs en dur comme elle : lisible dans les deux themes), et la ligne du compteur collee
   dessous comme .emet-quoi. Les boutons gardent la charte (.btn-primary) ; le contour est ramene sur le blanc. */
.emet-mur-t{margin:2px 0 6px;font:600 16px/1.3 var(--f-title,var(--f-body));color:#00002C}
.emet-mur-p{margin:0 0 12px;font:400 13.5px/1.55 var(--f-body);color:#23284F}
.emet-mur-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.emet-mur .btn-line{background:#FFFFFF;border-color:rgba(0,0,44,.28);color:#00002C}
.emet-mur .discret{margin:8px 0 0;font:400 12.5px/1.4 var(--f-body)}
.emet-mur .discret a{color:#0047D6;text-decoration:underline}
.emet-compteur{margin:0;padding:8px 15px 9px;background:#EEF1F8;border-top:1px solid rgba(0,0,44,.08);font:500 12px/1.45 var(--f-body);color:#23284F}
.emet-bloc[data-restantes="0"] .emet-compteur,.emet-bloc[data-restantes="1"] .emet-compteur,.emet-bloc[data-restantes="2"] .emet-compteur,.emet-bloc[data-restantes="3"] .emet-compteur{color:#7A3E00}
#emet-volet .emet-mur .emet-mur-t{font-size:15px}
/* LOT T : la carte de l'offre Emet sur /offres (section a part, sous les formules Premium) */
.offre-emet{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.offre-emet{scroll-margin-top:144px}   /* LOT BD : #emet (lien du « i », « Ajouter Emet », OFFRE_EMET_LIEN) arrive SOUS l'en-tete collant (139 px mesures a 1280, 127 a 390), pas dessous */
.offre-emet .plan{max-width:520px;margin:0 auto}
.offre-emet .prix-ht{font:600 30px/1.1 var(--f-title,var(--f-body))}
.offre-emet .prix-ttc{font:500 15px/1.3 var(--f-body);color:var(--ink-2)}
.offre-emet .separe{padding:10px 12px;border-radius:var(--radius-sm);background:var(--surface-2);font:500 13.5px/1.5 var(--f-body)}
.plan .pas-inclus{color:var(--ink-2)}
/* LOT Y (01/10, docs/instructions/2026-10-01-lot-y-option-emet-sur-les-abonnements.md) : la bande d'OPTION Emet en pied de chaque carte
   Premium, et la presentation d'Emet au-dessus de son offre. Le bouton est VIOLET (--violet, blanc dessus : 5,16:1), jamais bleu : le bleu est
   l'achat Premium. Bande bord a bord (marges negatives = padding de .plan), filet violet en tete, fond un cran plus clair que la carte. */
.option-emet{position:relative;margin:4px -24px -24px;padding:16px 24px 20px;border-top:2px solid var(--violet);border-radius:0 0 17px 17px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.plan.hi .option-emet{background:rgba(255,255,255,.07)}
.option-emet .oe-tete{display:flex;align-items:center;gap:8px}
.option-emet .emet-loupe{width:20px;height:20px;flex:none}
.option-emet .oe-mot{font:700 11.5px/1 var(--f-display);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-violet)}
.plan.hi .option-emet .oe-mot{color:#BFAEFF}
.option-emet .oe-separe{margin-left:auto;font:500 12px/1.2 var(--f-body);color:var(--ink-2)}
.plan.hi .option-emet .oe-separe,.plan.hi .option-emet .oe-prix{color:#AEB4E0}
.option-emet .oe-texte{margin:0;font:400 14px/1.45 var(--f-body)}
.option-emet .oe-texte strong{font-weight:600}
.option-emet .oe-prix{white-space:nowrap;color:var(--ink-2)}
.btn-emet{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--violet);color:#fff;font:600 14px/1 var(--f-body);text-decoration:none;border:0}
.btn-emet:hover{background:#5B34F0;color:#fff}
.btn-emet:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn-emet .oe-plus{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.option-emet .oe-actif{margin:0;font:600 13px/1.3 var(--f-body);color:var(--ink-violet)}
.plan.hi .option-emet .oe-actif{color:#BFAEFF}
/* LOT AU (02/10) : l'option Emet COCHEE dans la carte, avant le bouton qu'elle modifie ; le total est ecrit par le serveur */
.option-emet.avant{margin:4px -24px 6px;border-radius:0;border-bottom:1px solid var(--line)}
.plan.hi .option-emet.avant{border-bottom-color:rgba(255,255,255,.14)}
.option-emet .oe-case{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font:600 15px/1.3 var(--f-body);color:var(--ink);cursor:pointer}
.plan.hi .option-emet .oe-case{color:#fff}
.option-emet .oe-case input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--violet);cursor:pointer}
.option-emet .oe-case input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.option-emet .oe-total{margin:0;font:400 13.5px/1.4 var(--f-body);color:var(--ink-2)}
.option-emet .oe-total b{font-weight:600;color:var(--ink)}
.plan.hi .option-emet .oe-total{color:#AEB4E0}
.plan.hi .option-emet .oe-total b{color:#fff}
.emet-presente{max-width:760px;margin:0 auto 28px}
.emet-presente .ep-tete{display:flex;align-items:center;gap:14px}
.emet-presente .ep-tete .emet-avatar{width:46px;height:46px}
.emet-presente h2{margin:0;font:700 clamp(22px,2.6vw,30px)/1.2 var(--f-display);color:var(--title)}
.emet-presente .ep-accroche{margin:14px 0 0;font:400 16px/1.6 var(--f-body);color:var(--ink)}
.emet-presente .ep-chiffres{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.emet-presente .ep-chiffres li{padding:14px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:flex;flex-direction:column;gap:4px;min-width:0}
.emet-presente .ep-chiffres b{font:700 28px/1.05 var(--f-display);color:var(--title);white-space:nowrap}
.emet-presente .ep-chiffres span{font:500 12.5px/1.3 var(--f-body);color:var(--ink-2)}
.emet-presente .ep-arguments{margin:24px 0 0;padding:0 0 0 1.4em;display:grid;gap:12px;font:400 15px/1.55 var(--f-body)}
.emet-presente .ep-arguments li::marker{font:700 14px var(--f-display);color:var(--ink-violet)}
.emet-presente .ep-arguments strong{font-weight:600;color:var(--title)}
.emet-presente .ep-reserve{margin:18px 0 0;display:flex;gap:8px;align-items:flex-start;font:400 12.5px/1.5 var(--f-body);color:var(--ink-2)}
.emet-presente .ep-info{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:640px){
  .emet-presente .ep-tete{align-items:flex-start}
  .emet-presente .ep-tete .emet-avatar{width:38px;height:38px}
  .emet-presente .ep-chiffres{grid-template-columns:1fr 1fr}
  .emet-presente .ep-chiffres b{font-size:24px}
  .btn-emet{align-self:stretch}
}
/* LOT R2 bis (30/09, docs/instructions/2026-09-30-lot-r2bis-historique-des-recherches-emet.md ; maquette : docs/maquettes/
   historique-des-recherches-emet-specification.md) : « VOS RECHERCHES » dans le volet au repos, sous les puces d'exemple, et le bandeau
   d'une recherche rejouee (volet et /recherche). Jetons de la charte : lisible dans les deux themes, rien en dur. */
.ev-histo{margin:18px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.ev-histo-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ev-histo-tete h2{margin:0;font:600 15px/1.3 var(--f-display);color:var(--title)}
.ev-histo-tete .n{font:400 12.5px/1.3 var(--f-body);color:var(--ink-2)}
.ev-histo-tout{margin-left:auto;border:0;background:none;padding:10px 2px;min-height:44px;font:500 13px/1 var(--f-body);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.ev-histo-tout:hover{color:var(--ink)}
.ev-histo-sous{display:none;margin:0 0 8px;font:400 11.5px/1.4 var(--f-body);color:var(--ink-2)}
.ev-histo-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.ev-histo-liste li{position:relative}
.ev-histo-l{display:grid;grid-template-columns:46px minmax(0,1fr) auto 76px;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 48px 8px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);text-align:left}
.ev-histo-l:hover{border-color:var(--focus)}
.ev-histo-l .sg{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;font:700 13px/1 var(--f-display);letter-spacing:.02em;background:var(--surface);color:var(--ink-2)}
.ev-histo-l .sg[data-t="0"]{background:var(--chip-violet);color:var(--ink-violet)}
.ev-histo-l .sg[data-t="1"]{background:var(--chip-cyan);color:var(--ink-cyan)}
.ev-histo-l .sg[data-t="2"]{background:var(--chip-turq);color:var(--ink-turq)}
.ev-histo-l .sg[data-t="3"]{background:var(--chip-rose);color:var(--ink-rose)}
.ev-histo-l .sg[data-t="4"]{background:var(--chip-blue);color:var(--ink-blue)}
.ev-histo-l .sg[data-t="5"]{background:var(--surface);color:var(--ink)}
.ev-histo-l .c{min-width:0;display:grid;gap:2px}
.ev-histo-l .q{font:500 14.5px/1.35 var(--f-body);color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ev-histo-l .m{font:400 12px/1.35 var(--f-body);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-histo-l .nat{justify-self:start;padding:3px 9px;border-radius:999px;font:600 11.5px/1.3 var(--f-body);background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.ev-histo-l .nat[data-n="exacte"]{background:var(--chip-turq);color:var(--ink-turq);border-color:transparent}
.ev-histo-l .nat[data-n="approchante"]{background:transparent;color:var(--or);border-color:var(--or)}
.ev-histo-l .qd{font:400 12px/1.3 var(--f-body);color:var(--ink-2);text-align:right}
.ev-histo-x{position:absolute;top:50%;right:4px;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:10px;color:var(--ink-2)}
.ev-histo-x:hover{color:var(--ink);background:var(--surface)}
.ev-histo-x .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ev-histo-pied{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font:400 12.5px/1.45 var(--f-body);color:var(--ink-2)}
.ev-histo-pied svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--or)}
/* la recherche rejouee (planche 2) : bandeau turquoise sourd, en tete, AVANT la boite d'Emet */
.emet-memoire{margin:0 0 12px;padding:10px 13px;border-radius:10px;background:var(--chip-turq);color:var(--ink-turq);font:500 13px/1.45 var(--f-body)}
.emet-memoire .ecarte{display:block;margin-top:4px;font-weight:400;color:var(--ink)}
@media (max-width:760px){
  .ev-histo-tete .n{display:none}
  .ev-histo-sous{display:block}
  /* deux lignes : la question, puis la pastille de nature et la meta (la date part : la place manque a 390 px) */
  .ev-histo-l{grid-template-columns:40px auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:5px;padding-right:46px}
  .ev-histo-l .sg{width:40px;height:40px;grid-column:1;grid-row:1 / span 2}
  .ev-histo-l .c{display:contents}
  .ev-histo-l .q{grid-column:2 / 4;grid-row:1}
  .ev-histo-l .nat{grid-column:2;grid-row:2}
  .ev-histo-l .m{grid-column:3;grid-row:2;align-self:center}
  .ev-histo-l .qd{display:none}
}

/* ---------- LOT AV (02/10) : la page de bienvenue (/bienvenue), fin de parcours unique de l'inscription ----------
   Jetons de la charte SEULEMENT (aucune couleur en dur) ; cibles de 44 px ; tient a 390 px (une colonne sous 960 px). */
.bienvenue{padding:clamp(24px,4vw,48px) 0 clamp(40px,6vw,72px)}
.bv-ok{display:flex;align-items:flex-start;gap:12px;margin:0 0 clamp(24px,3vw,36px);padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius-sm);font:400 15px/1.5 var(--f-body);color:var(--ink)}
.bv-coche{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent)}
.bv-coche svg{width:16px;height:16px;fill:none;stroke:var(--surface);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bv-adresse{color:var(--ink-2);overflow-wrap:anywhere}
.bv-accroche{margin:0 0 clamp(24px,3vw,36px);max-width:760px}
.bv-accroche h1{margin:0 0 10px;font:700 clamp(30px,4.4vw,52px)/1.08 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.bv-accroche p{margin:0;font:400 clamp(16px,1.5vw,19px)/1.5 var(--f-body);color:var(--ink-2)}
.bv-cartes{list-style:none;margin:0 0 clamp(20px,3vw,32px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
.bv-carte{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.bv-carte h2{margin:0;font:700 clamp(20px,1.8vw,24px)/1.2 var(--f-display);color:var(--ink)}
.bv-vedette{border:2px solid var(--accent)}
.bv-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
.bv-num{font:700 13px/1 var(--f-display);letter-spacing:.14em;color:var(--ink-2)}
.bv-pastille{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--surface-2);font:600 11.5px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right}
.bv-pastille-emet{background:transparent;border:1px solid var(--accent);color:var(--ink);text-transform:none;letter-spacing:0;font-size:13px}
.bv-pastille-or{background:transparent;border:1px solid var(--or);color:var(--ink)}
.bv-chiffres,.bv-texte,.bv-noms{margin:0;font:400 15px/1.5 var(--f-body);color:var(--ink-2)}
.bv-chiffres b{color:var(--ink);font-weight:600}
.bv-noms{font-size:14px;color:var(--ink-2)}
.bv-emet-tete{display:flex;align-items:center;gap:12px}
.bv-emet-tete .emet-avatar{width:40px;height:40px}
.bv-emet{display:flex;flex-direction:column;gap:12px;margin:0}
.bv-btn{margin-top:auto;align-self:flex-start;min-height:44px;padding-inline:20px;white-space:normal;text-align:center}
.bv-emet .bv-btn{margin-top:0}
.bv-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bv-prix{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.bv-prix li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--surface-2);border-radius:var(--radius-sm)}
.bv-formule{font:600 14px/1.3 var(--f-display);color:var(--ink)}
.bv-montant{font:400 15px/1.4 var(--f-body);color:var(--ink)}
.bv-option{font:400 13.5px/1.4 var(--f-body);color:var(--ink-2)}
.bv-reprise{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 clamp(28px,4vw,44px);padding:14px 18px;border:1px dashed var(--ink-3);border-radius:var(--radius-sm);font:400 15px/1.5 var(--f-body);color:var(--ink-2)}
.bv-reprise b{color:var(--ink)}
.bv-reprise a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px/1.2 var(--f-display);color:var(--accent);text-decoration:none}
.bv-reprise a:hover{text-decoration:underline}
.bv-reprise svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bv-series h2{margin:0 0 14px;font:700 clamp(20px,1.8vw,24px)/1.2 var(--f-display);color:var(--ink)}
.bv-series ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.bv-series a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);min-height:44px}
.bv-cadre{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-2)}
.bv-cadre img{display:block;width:100%;height:100%;object-fit:cover}
.bv-nom{margin-top:6px;font:600 15px/1.3 var(--f-display)}
.bv-ep{font:400 13.5px/1.3 var(--f-body);color:var(--ink-2)}
.bv-series a:hover .bv-nom{color:var(--accent)}
.mc-bienvenue{margin:18px 0 6px;font:400 14px/1.5 var(--f-body)}
.mc-bienvenue a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent)}
@media (max-width:960px){.bv-cartes{grid-template-columns:minmax(0,1fr)}.bv-series ul{grid-template-columns:repeat(2,minmax(0,1fr))}}