/* Système de dessin de la plateforme (docs/SAAS.md §7, docs/THEMING.md) : un seul thème sombre façon catalogue de
   streaming, deux densités (adulte, enfant). Atkinson Hyperlegible pour l'interface, Andika pour le texte des
   histoires. Contrastes vérifiés par tests/unit/test_theme_plateforme.py. */
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/polices/AtkinsonHyperlegible-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/polices/AtkinsonHyperlegible-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Andika"; src: url("/polices/Andika-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("/polices/Andika-Bold.ttf"); font-weight: 700; font-display: swap; }

:root {
  /* surfaces, du plus profond au plus proche */
  --fond: #121110; --surface: #1b1916; --surface-2: #262320; --surface-3: #332f29;
  --bord: #3b372f;
  --bord-fort: #7d7568;
  --texte: #f5f0e6; --texte-doux: #b8b0a2;
  --accent: #f2b84b; --accent-texte: #1a1405; --accent-doux: #3d3217;
  --principal: #ffffff; --principal-texte: #121110;
  --alerte: #ff9a80; --focus: #ffd166;
  --u-animaux: #7aa95c; --u-quotidien: #e0a050; --u-feerie: #a77fd0; --u-aventure: #d9714e; --u-science_amusante: #4f97c8;
  --voile: rgba(18, 17, 16, .72);
  /* forme */
  --rayon: 12px; --rayon-vignette: 8px; --rayon-petit: 6px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --gouttiere: clamp(16px, 4vw, 64px);
  /* texte */
  --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.5rem; --t-xxl: clamp(2rem, 5vw, 3.75rem);
  --t-rangee: clamp(1.25rem, 2vw, 1.5rem);
  --vignette: clamp(9.5rem, 24vw, 12.5rem); --cible: 44px; --entete: 64px;
  --duree: 200ms; --courbe: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 var(--t-m)/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.visuellement-cache:focus-visible { position: fixed !important; top: var(--e2); left: var(--e2); width: auto; height: auto; clip: auto; z-index: 20;
  padding: var(--e2) var(--e4); background: var(--principal); color: var(--principal-texte); border-radius: var(--rayon-petit); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.icone.plein, .bouton .icone use[href="#i-jouer"] { fill: currentColor; }
.icone { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.sprite { display: none; }

/* en-tête : posé sur la une (transparent, puis opaque au défilement), plein ailleurs */
.entete { display: flex; align-items: center; gap: var(--e5); min-height: var(--entete); padding: var(--e2) var(--gouttiere);
  background: var(--fond); position: sticky; top: 0; z-index: 10; transition: background-color var(--duree) var(--courbe); }
body.avec-une .entete { position: fixed; left: 0; right: 0; background: linear-gradient(rgba(18, 17, 16, .85), rgba(18, 17, 16, 0)); }
body.avec-une .entete.defilee { background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(8px); }
@supports not (backdrop-filter: blur(1px)) { body.avec-une .entete.defilee { background: var(--fond); } }
.marque { font-weight: 700; font-size: var(--t-l); letter-spacing: .02em; text-decoration: none; color: var(--texte); display: flex; align-items: center; gap: var(--e2); min-height: var(--cible); }
.marque svg { width: 30px; height: 30px; }
.entete nav { display: flex; gap: var(--e1); align-items: center; flex-wrap: wrap; }
.entete nav.principale { flex: 1; }
.entete nav a, .entete nav button, .entete summary { font: inherit; color: var(--texte-doux); text-decoration: none; background: none; border: 0;
  padding: var(--e2) var(--e3); cursor: pointer; min-height: var(--cible); display: inline-flex; align-items: center; gap: var(--e2); border-radius: var(--rayon-petit); }
.entete nav a:hover, .entete nav button:hover, .entete summary:hover { color: var(--texte); }
.entete nav a[aria-current="page"] { color: var(--texte); font-weight: 700; }
.entete .outils { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }
.recherche-entete { display: none; position: relative; }
.recherche-entete .icone { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%); color: var(--texte-doux); pointer-events: none; }
.recherche-entete input[type=search] { width: 15rem; padding-left: 2.5rem; background: var(--voile); }
@media (min-width: 900px) { .recherche-entete { display: block; } .lien-recherche { display: none !important; } }
.entete .bouton { color: var(--principal-texte); }

/* menu du profil : un <details>, utilisable au clavier sans script */
.menu { position: relative; }
.menu summary { list-style: none; color: var(--texte); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .icone { transition: transform var(--duree) var(--courbe); }
.menu[open] summary .icone { transform: rotate(180deg); }
.menu .panneau { position: absolute; right: 0; top: calc(100% + var(--e2)); min-width: 15rem; background: var(--surface); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: var(--e2); box-shadow: 0 12px 32px rgba(0, 0, 0, .6); display: grid; gap: 2px; }
.menu .panneau a, .menu .panneau button { width: 100%; justify-content: flex-start; color: var(--texte); }
.menu .panneau a:hover, .menu .panneau button:hover { background: var(--surface-2); }
.menu .panneau hr { border: 0; border-top: 1px solid var(--bord); margin: var(--e1) 0; width: 100%; }
.menu .panneau .groupe { color: var(--texte-doux); font-size: var(--t-s); padding: var(--e2) var(--e3) 0; margin: 0; }
.menu .panneau button[aria-pressed="true"] { font-weight: 700; }
.menu .panneau button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }

.pied { margin-top: var(--e7); padding: var(--e6) var(--gouttiere); color: var(--texte-doux); font-size: var(--t-s); }
.pied a { color: var(--texte-doux); }
.pied a:hover { color: var(--texte); }
.pied ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5); }
.note-ia { font-size: var(--t-s); color: var(--texte-doux); }
main { display: block; padding: var(--e5) var(--gouttiere); }
main.etroit { max-width: calc(40rem + 2 * var(--gouttiere)); margin: 0 auto; }
body.avec-une main { padding: 0; }
h1 { font-size: var(--t-xxl); line-height: 1.1; margin: var(--e4) 0; letter-spacing: -.01em; }
main.etroit h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: var(--t-xl); line-height: 1.25; margin: var(--e5) 0 var(--e3); }

/* boutons et formulaires */
.bouton, button.bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: var(--cible);
  padding: var(--e2) var(--e5); border-radius: var(--rayon-petit); border: 1px solid var(--principal); background: var(--principal); color: var(--principal-texte);
  font: 700 var(--t-m)/1.2 inherit; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: background-color var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.bouton:hover { background: #e9e4da; }
.bouton.secondaire, .bouton.discret { background: rgba(124, 117, 104, .35); border-color: var(--bord-fort); color: var(--texte); }
.bouton.secondaire:hover, .bouton.discret:hover { background: rgba(124, 117, 104, .55); }
.bouton.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton.danger { background: transparent; border-color: var(--alerte); color: var(--alerte); }
.bouton.danger:hover { background: rgba(255, 154, 128, .12); }
.bouton[aria-pressed="true"] { border-color: var(--accent); }
.bouton.coeur[aria-pressed="true"] .icone { fill: var(--accent); stroke: var(--accent); }
.boutons { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: var(--e4) 0; }
form.formulaire { display: grid; gap: var(--e4); }
label { font-weight: 700; }
input[type=email], input[type=text], input[type=password], input[type=search], select, textarea {
  font: inherit; width: 100%; padding: var(--e3); border-radius: var(--rayon-petit); border: 1px solid var(--bord-fort); background: var(--surface-2); color: var(--texte); min-height: var(--cible); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 1.15em; height: 1.15em; }
fieldset { border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e4); background: var(--surface); }
legend { font-weight: 700; padding: 0 var(--e2); }
details > summary { cursor: pointer; min-height: var(--cible); display: flex; align-items: center; font-weight: 700; }
.choix { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.choix label { font-weight: 400; display: inline-flex; gap: var(--e2); align-items: center; min-height: var(--cible); }
.aide { color: var(--texte-doux); font-size: var(--t-s); margin: 0; }
.erreur { color: var(--alerte); font-weight: 700; }
.info { color: var(--accent); font-weight: 700; }
.carte { background: var(--surface); border-radius: var(--rayon); padding: var(--e5); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

/* la une : bannière floutée en fond, couverture nette à droite, dégradés vers le fond de page */
.une { position: relative; isolation: isolate; min-height: min(62vh, 520px); display: grid; align-items: end; gap: var(--e6);
  padding: calc(var(--entete) + var(--e6)) var(--gouttiere) calc(var(--e7) + 3rem); overflow: hidden; }
.une-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.08); }
.une::before, .une::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.une::before { background: linear-gradient(to top, var(--fond) 0%, rgba(18, 17, 16, .8) 30%, rgba(18, 17, 16, 0) 70%); }
.une::after { background: linear-gradient(to right, var(--fond) 0%, rgba(18, 17, 16, .75) 40%, rgba(18, 17, 16, .1) 100%); }
.une-texte { max-width: 38rem; animation: apparaitre 300ms var(--courbe) both; }
.une-sur { margin: 0 0 var(--e2); color: var(--texte-doux); font-size: var(--t-s); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.une-sur .marqueur { color: var(--accent); }
.une h2, .une .titre-une { font-size: var(--t-xxl); line-height: 1.05; margin: 0 0 var(--e3); letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.une-accroche { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; max-width: 34rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.une .boutons { margin-bottom: 0; }
.une .bouton { min-height: 48px; padding: var(--e2) var(--e5); font-size: 1.05rem; }
.une-couverture { display: none; }
@media (min-width: 900px) {
  .une { min-height: 70vh; grid-template-columns: 1fr auto; }
  .une-couverture { display: block; height: min(52vh, 26rem); aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .6); margin-right: 4vw; animation: apparaitre 400ms var(--courbe) both; }
}
@keyframes apparaitre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* rangées : la première chevauche le bas de la une ; défilement horizontal en scroll-snap */
.rangees { position: relative; z-index: 1; padding: 0 var(--gouttiere) var(--e5); }
.une + .rangees, .une + .profils-bar { margin-top: -3rem; }
.rangees.sans-une { padding-top: var(--e3); }
.rangee { position: relative; margin: 0 0 var(--e5); }
.rangee > h2 { display: flex; align-items: baseline; gap: var(--e3); font-size: var(--t-rangee); margin: 0 0 var(--e1); }
.rangee > h2 a { font-size: var(--t-s); font-weight: 700; color: var(--accent); text-decoration: none; }
.rangee > h2 a:hover { text-decoration: underline; }
.defilement { list-style: none; margin: 0 calc(-1 * var(--gouttiere)); padding: var(--e3) var(--gouttiere) var(--e4); display: flex; gap: var(--e3);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gouttiere); overscroll-behavior-x: contain; scroll-behavior: smooth; }
.defilement > li { scroll-snap-align: start; flex: 0 0 auto; width: var(--vignette); position: relative; }
.chargement { width: 2rem; }
@media not all and (pointer: coarse) {
  .defilement { scrollbar-width: none; }
  .defilement::-webkit-scrollbar { display: none; }
}
.fleche { position: absolute; top: 2.25rem; bottom: var(--e4); width: calc(var(--gouttiere) - 4px); min-width: 44px; z-index: 3; border: 0; cursor: pointer;
  color: var(--texte); display: grid; place-items: center; opacity: 0; transition: opacity var(--duree) var(--courbe), background-color var(--duree); }
.fleche[hidden] { display: none; }
.fleche .icone { width: 2rem; height: 2rem; stroke-width: 2.5; }
.fleche.gauche { left: calc(-1 * var(--gouttiere)); background: linear-gradient(to right, rgba(18, 17, 16, .9), rgba(18, 17, 16, 0)); }
.fleche.droite { right: calc(-1 * var(--gouttiere)); background: linear-gradient(to left, rgba(18, 17, 16, .9), rgba(18, 17, 16, 0)); }
.rangee:hover .fleche, .fleche:focus-visible { opacity: 1; }
.fleche:disabled { opacity: 0 !important; pointer-events: none; }

/* vignette : couverture 3:4, titre sur une ligne ; en adulte, actions et détails au survol ou au focus */
.tuile { position: relative; transition: transform var(--duree) var(--courbe); }
.vignette { display: block; text-decoration: none; color: var(--texte); position: relative; border-radius: var(--rayon-vignette); }
.vignette .image { display: block; aspect-ratio: 3 / 4; border-radius: var(--rayon-vignette); overflow: hidden; background: var(--surface-2); position: relative;
  border-bottom: 3px solid transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.tuile.u-animaux .image { border-bottom-color: var(--u-animaux); }
.tuile.u-quotidien .image { border-bottom-color: var(--u-quotidien); }
.tuile.u-feerie .image { border-bottom-color: var(--u-feerie); }
.tuile.u-aventure .image { border-bottom-color: var(--u-aventure); }
.tuile.u-science_amusante .image { border-bottom-color: var(--u-science_amusante); }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette .titre { display: block; margin-top: var(--e2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badges { position: absolute; bottom: 12px; left: var(--e2); right: var(--e2); display: flex; gap: var(--e1); flex-wrap: wrap-reverse; align-items: center; }
.badge { background: var(--voile); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
  backdrop-filter: blur(4px); }
.badge .icone { width: 1em; height: 1em; }
.badge.nouveau { background: var(--accent); color: var(--accent-texte); }
.actions { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 4; display: flex; align-items: flex-start; padding-top: 22%; justify-content: center; gap: var(--e2);
  background: rgba(18, 17, 16, .55); border-radius: var(--rayon-vignette); opacity: 0; pointer-events: none; transition: opacity var(--duree) var(--courbe); }
.actions form { margin: 0; }
.rond { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; cursor: pointer; text-decoration: none;
  background: var(--voile); color: var(--texte); border: 1px solid var(--bord-fort); transition: transform var(--duree) var(--courbe), background-color var(--duree); }
.rond:hover { transform: scale(1.08); border-color: var(--texte); }
.rond.principal { background: var(--principal); color: var(--principal-texte); border-color: var(--principal); }
.rond.principal .icone { fill: currentColor; }
.rond[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.rond.coeur[aria-pressed="true"] .icone { fill: var(--accent); }
.details { position: absolute; left: 0; right: 0; bottom: calc(1.5em + var(--e2)); margin: 0; padding: var(--e6) var(--e3) var(--e3); z-index: 4;
  background: linear-gradient(rgba(18, 17, 16, 0), rgba(18, 17, 16, .95) 28%); border-radius: 0 0 var(--rayon-vignette) var(--rayon-vignette);
  font-size: var(--t-s); line-height: 1.35; opacity: 0; pointer-events: none; transition: opacity var(--duree) var(--courbe); }
.details .texte { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.details .meta { display: block; margin-top: var(--e1); color: var(--texte-doux); }
.defilement > li:hover, .defilement > li:focus-within, .grille > li:hover, .grille > li:focus-within { z-index: 5; }
.tuile:focus-within .actions, .tuile:focus-within .details { opacity: 1; pointer-events: auto; }
.tuile[data-actions]:focus-within .badges { opacity: 0; }
@media not all and (pointer: coarse) {
  .tuile:hover { transform: scale(1.06); }
  .tuile:hover .actions, .tuile:hover .details { opacity: 1; pointer-events: auto; }
  .tuile[data-actions]:hover .badges { opacity: 0; }
}
.progression-barre { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 4px; border: 0; appearance: none; accent-color: var(--accent); background: var(--voile); display: block; }
.progression-barre::-webkit-progress-bar { background: rgba(255, 255, 255, .25); }
.progression-barre::-webkit-progress-value { background: var(--accent); }
.progression-barre::-moz-progress-bar { background: var(--accent); }
.rangee.banniere .defilement > li { width: min(88vw, 40rem); }
.rangee.banniere .vignette .image, .rangee.banniere .actions { aspect-ratio: 16 / 9; }
.rangee.grande .defilement > li { width: min(64vw, 16rem); }
.grille { list-style: none; padding: 0; display: grid; gap: var(--e5) var(--e4); grid-template-columns: repeat(auto-fill, minmax(var(--vignette), 1fr)); }
.grille > li { width: auto; position: relative; }

/* barre des profils sous la une (adulte) */
.profils-bar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); padding: 0 var(--gouttiere); margin: var(--e4) 0 var(--e5); }
.profils-bar form { display: contents; }
.profils-bar .libelle { color: var(--texte-doux); font-weight: 700; }
.profils-bar .bouton { min-height: 40px; padding: 4px var(--e4) 4px 4px; border-radius: 999px; }
.profils-bar .bouton.discret { color: var(--texte); }
.profils-bar .liens { display: flex; flex-wrap: wrap; gap: var(--e3); margin-left: auto; align-items: center; }
.profils-bar .liens a:not(.bouton) { color: var(--texte-doux); }

/* fiche : bannière floutée derrière, couverture nette, boutons comme sur la une */
.fiche-entete { position: relative; isolation: isolate; margin: calc(-1 * var(--e5)) calc(-1 * var(--gouttiere)) 0; padding: var(--e6) var(--gouttiere) var(--e5); overflow: hidden; }
.fiche-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transform: scale(1.1); }
.fiche-entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--fond) 0%, rgba(18, 17, 16, .7) 55%, rgba(18, 17, 16, .4) 100%); }
.fiche { display: grid; gap: var(--e6); grid-template-columns: minmax(10rem, 18rem) 1fr; align-items: start; }
.fiche .couverture { border-radius: var(--rayon); width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--surface-2); box-shadow: 0 24px 48px rgba(0, 0, 0, .6); }
.fiche h1 { margin-top: 0; }
.meta-ligne { color: var(--texte-doux); font-weight: 700; margin: 0 0 var(--e3); }
.etiquettes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.etiquettes a, .etiquettes span { display: inline-flex; align-items: center; gap: var(--e2); padding: 4px 14px; border-radius: 999px; background: var(--surface-2); color: var(--texte);
  text-decoration: none; font-size: var(--t-s); border: 1px solid var(--bord); }
.etiquettes a:hover { border-color: var(--bord-fort); }
.etiquettes .point { width: 10px; height: 10px; border-radius: 50%; background: var(--texte-doux); padding: 0; border: 0; }
.point.u-animaux { background: var(--u-animaux); } .point.u-quotidien { background: var(--u-quotidien); } .point.u-feerie { background: var(--u-feerie); }
.point.u-aventure { background: var(--u-aventure); } .point.u-science_amusante { background: var(--u-science_amusante); }
.apercu { font-family: "Andika", sans-serif; font-size: 1.15rem; background: var(--surface); border-left: 4px solid var(--accent); padding: var(--e3) var(--e4); border-radius: var(--rayon-petit); }
.questions li { margin: var(--e2) 0; }
.donnees { display: grid; grid-template-columns: max-content 1fr; gap: var(--e1) var(--e4); margin: 0; }
.donnees dt { color: var(--texte-doux); }
.donnees dd { margin: 0; }
.fiche-suite { max-width: 48rem; }
@media (max-width: 640px) { .fiche { grid-template-columns: 1fr; } .fiche .couverture { max-width: 12rem; } }

/* qui lit ce soir ? */
.qui-lit { text-align: center; padding-top: 8vh; }
.qui-lit h1 { margin-bottom: var(--e6); }
.lecteurs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e6); }
.lecteurs button { background: none; border: 0; color: var(--texte-doux); font: 700 var(--t-l) inherit; font-family: inherit; cursor: pointer; display: grid; gap: var(--e3);
  justify-items: center; padding: var(--e3); border-radius: var(--rayon); transition: color var(--duree); }
.lecteurs button img { width: 8rem; height: 8rem; border-radius: 50%; border: 4px solid transparent; background: var(--surface-2); transition: border-color var(--duree), transform var(--duree) var(--courbe); }
.lecteurs button:hover, .lecteurs button:focus-visible { color: var(--texte); }
.lecteurs button:hover img, .lecteurs button:focus-visible img { border-color: var(--accent); transform: scale(1.04); }
.qui-lit .boutons { justify-content: center; margin-top: var(--e7); }
.avatar { width: 7rem; height: 7rem; }
.avatar.petit { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: var(--e2); }
.avatars label { display: grid; justify-items: center; cursor: pointer; }
.avatars input { position: absolute; opacity: 0; }
.avatars img { width: 4rem; height: 4rem; border-radius: 50%; border: 3px solid transparent; background: var(--surface-2); }
.avatars input:checked + img { border-color: var(--accent); }
.avatars input:focus-visible + img { outline: 3px solid var(--focus); }

/* code PIN */
.pave { display: grid; grid-template-columns: repeat(3, 64px); gap: var(--e3); justify-content: center; }
.pave button { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--bord-fort); background: var(--surface-2); color: var(--texte); font: 700 1.5rem inherit; font-family: inherit; cursor: pointer; }
.pave button:hover { background: var(--surface-3); }
.points { display: flex; gap: var(--e3); justify-content: center; margin: var(--e3); }
.points span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--texte); }
.points span.plein { background: var(--texte); }
.coin { position: fixed; top: 0; right: 0; width: 72px; height: 72px; z-index: 11; }
.dialogue-pin { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: grid; place-items: center; z-index: 12; }
.dialogue-pin[hidden] { display: none; }
.dialogue-pin .carte { min-width: 18rem; text-align: center; background: var(--surface-2); }

/* mode enfant : cibles ≥ 56 px, aucun texte sous 18 px, une ligne par vignette (§7) */
body.mode-enfant { font-size: 1.25rem; --cible: 56px; --vignette: clamp(12rem, 30vw, 15rem); --t-s: 1.125rem; }
body.mode-enfant .vignette .titre { font-size: 1.25rem; }
body.mode-enfant .badge { font-size: 1.125rem; }
body.mode-enfant .entete nav a, body.mode-enfant .bouton { min-height: 56px; min-width: 56px; font-size: 1.25rem; }
body.mode-enfant.tranche-3-5 { --vignette: clamp(14rem, 36vw, 17rem); }
body.mode-enfant .fleche { min-width: 56px; }
body.mode-enfant .une .bouton { min-height: 56px; }
body.mode-enfant .une-accroche { font-size: 1.25rem; }
.qui { display: flex; align-items: center; gap: var(--e3); font-weight: 700; color: var(--texte); }
.qui .avatar.petit { width: 2.75rem; height: 2.75rem; }
body.mode-enfant .entete nav a { color: var(--texte); }
body.mode-enfant .entete nav a .icone { width: 1.6rem; height: 1.6rem; }
body.mode-enfant .etiquettes a, body.mode-enfant .etiquettes span:not(.point) { min-height: 56px; padding: 0 var(--e4); }

/* administration */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--e2); border-bottom: 1px solid var(--bord); vertical-align: top; }
.indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--e3); }
.indicateurs .carte strong { display: block; font-size: var(--t-xl); }
.urgent { color: var(--alerte); font-weight: 700; }
.jeton { font-family: ui-monospace, monospace; word-break: break-all; background: var(--surface-2); padding: var(--e3); border-radius: var(--rayon-petit); }

/* accueil public */
.vitrine { display: grid; gap: var(--e2); }
.accroche-site { font-size: var(--t-l); max-width: 40rem; }
.atouts { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); list-style: none; padding: 0; margin: 0 0 var(--e6); }
.atouts strong { display: block; font-size: var(--t-l); margin-bottom: var(--e2); color: var(--accent); }

/* téléphone : la marque sur une ligne, la navigation sur une rangée qui défile */
@media (max-width: 600px) {
  .entete { flex-wrap: wrap; gap: var(--e1) var(--e2); padding: var(--e2) var(--e3); }
  .entete nav.principale { order: 3; width: 100%; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .entete nav a, .entete nav button { white-space: nowrap; padding: var(--e2) var(--e3); }
  body.mode-enfant .entete { flex-wrap: nowrap; }
  body.mode-enfant .entete nav { width: auto; margin-left: auto; }
  body.mode-enfant .entete nav { flex-wrap: nowrap; }
  body.mode-enfant .entete .etiquette { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.avec-une .une { padding-top: calc(var(--entete) + 3.5rem); }
  .profils-bar .liens { margin-left: 0; }
}

/* bandes-annonces (docs/vHARNESS.md §5.4) : lecteur inséré sous les boutons après un toucher */
.une-video:empty, .fiche-video:empty { display: none; }
.une-video, .fiche-video { margin-top: var(--e4); max-width: 40rem; }
.lecteur-video video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rayon); box-shadow: 0 16px 32px rgba(0, 0, 0, .5); }
.lecteur-video .transcription { color: var(--texte); margin: var(--e2) 0 0; font-style: italic; }
.lecteur-video .note-ia { color: var(--texte-doux); font-size: .875rem; margin: var(--e1) 0 0; }
.lecteur-video .apres-video { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: var(--e3); }
.lecteur-video .apres-video[hidden] { display: none; }
body.mode-enfant .lecteur-video .transcription { font-size: 1.25rem; }

/* histoires sur mesure (docs/CHAT.md) : badge, mention sur la fiche, conversation de commande */
.badge.sur-mesure { background: var(--accent-doux); color: var(--accent); border: 1px solid var(--accent); }
.sur-mesure { display: inline-flex; align-items: center; gap: var(--e2); color: var(--accent); font-weight: 700; margin: 0 0 var(--e2); }
details.supprimer { margin: var(--e4) 0; }
details.supprimer summary { color: var(--alerte); }
.conversation { display: grid; gap: var(--e5); }
.fil { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.bulle { max-width: 34rem; padding: var(--e3) var(--e4); border-radius: var(--rayon); line-height: 1.45; }
.bulle.plateforme { background: var(--surface-2); justify-self: start; border-bottom-left-radius: var(--e1); }
.bulle.adulte { background: var(--accent-doux); justify-self: end; border-bottom-right-radius: var(--e1); display: flex; gap: var(--e3); align-items: baseline; flex-wrap: wrap; }
.bulle.adulte form { margin: 0; }
button.lien { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--t-s); text-decoration: underline; cursor: pointer; min-height: auto; }
.etape fieldset { display: grid; gap: var(--e3); }
.voix-choix { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.voix-choix li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.voix-choix label { font-weight: 400; display: inline-flex; gap: var(--e2); align-items: center; min-height: var(--cible); min-width: 12rem; }
.voix-choix audio { height: 36px; max-width: 100%; }
.recapitulatif .donnees { margin-bottom: var(--e4); }
.commandes { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.commandes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--surface); border-radius: var(--rayon-petit); }
.statut-commande { font-weight: 700; color: var(--texte-doux); }
.statut-commande.statut-prete { color: var(--accent); }
.statut-commande.statut-refusee { color: var(--alerte); }
.etapes-commande { padding-left: var(--e5); }
.etapes-commande time { color: var(--texte-doux); margin-right: var(--e2); }
.commander .choix label { min-width: 10rem; }