/* Wire & Gate — feuille de style unique, écrite pour le téléphone d'abord. */
/* Deux thèmes (14/10) : sombre par défaut, clair sur <html data-theme="light">. Le choix du visiteur (bouton soleil/lune
   de l'en-tête, gardé dans localStorage « wg-theme ») est posé avant l'affichage par le script du <head>
   (generer.SCRIPT_THEME). Les « écrans » (plateau du jeu, circuit animé de l'accueil, vignettes des mondes, robot Bit)
   gardent les couleurs sombres dans les deux thèmes : les fils et les portes du jeu sont dessinés pour un fond sombre. */
:root, :root[data-theme="light"] .scene, :root[data-theme="light"] .demo svg, :root[data-theme="light"] .monde .visuel,
:root[data-theme="light"] .robot, :root[data-theme="light"] .choix-porte {
  --fond: #0f1724; --carte: #161b22; --bord: #30363d; --texte: #e6edf3; --doux: #8b949e;
  --bleu: #58a6ff; --vert: #3fb950; --vert-fonce: #238636; --or: #d29922; --violet: #a371f7; --rouge: #f85149;
  --fond-page: #0f1724; --entete: #0d1320; --survol: #161b22; --carte2: #21262d; --champ: #0d1117; --sur-vert: #06210f;
  --fond-vert: #10241a; --fond-or: #241c0b; --fond-violet: #1d1630; --surligne: #3b2a06; --surligne-texte: #f2cc60;
  --rond: #1b2433; --rond-bord: #4b5a70; --rond-fait: #12391f; --ambre: #e09b3d;
  --trace: rgba(59, 111, 214, .08); --lumiere: rgba(163, 113, 247, .12);   /* fond animé : opacité la plus forte */
  color-scheme: dark;
}
/* Le clair : les couleurs du monde des images (Jessy, 13/10), assombries pour un contraste de 4,5:1 sur fond clair */
:root[data-theme="light"] {
  --fond: #f4f1ea; --carte: #ffffff; --bord: #d8d3c8; --texte: #1d2330; --doux: #5f6672;
  --bleu: #1a5fb4; --vert: #1f7a38; --vert-fonce: #27793f; --or: #8a6508; --violet: #6e40c9; --rouge: #b3261e;
  --fond-page: linear-gradient(180deg, #fbf9f4 0%, #f1ede4 100%); --entete: #fffdf8; --survol: #f2ede3; --carte2: #efe9dc;
  --champ: #ffffff; --sur-vert: #ffffff; --fond-vert: #e6f2e8; --fond-or: #fff6dc; --fond-violet: #f1ebfb;
  --surligne: #fff1c2; --surligne-texte: #6b4e00; --rond: #ffffff; --rond-bord: #8f897c; --rond-fait: #e6f2e8; --ambre: #9a5405;
  --trace: rgba(255, 255, 255, .9); --lumiere: rgba(255, 255, 255, .95);   /* en clair, le fond éclaircit (traces douces) */
  color-scheme: light;
}
:root { --rayon: 12px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--fond-page);
       color: var(--texte); font-size: 1rem; line-height: 1.55; }
a { color: var(--bleu); }
img, svg { max-width: 100%; height: auto; }
picture { display: block; }   /* <picture> = WebP avec repli JPEG ; l'image dedans garde les règles de son bloc */
/* Focus clavier visible partout (le thème choisit la couleur via --bleu) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }   /* sinon un display: flex l'emporte (filtre de la galerie, encart « Reprendre ») */
.contenu { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* Fond animé (14/10, décision n° 36) : des traces de circuit fines qui dérivent très lentement et quelques lucioles,
   SOUS tout le contenu (z-index -1, aucun clic). CSS pur : seuls transform et opacity bougent, le navigateur les anime
   sans repeindre la page ; rien ne tourne quand l'onglet est caché. Cadence : steps() fait avancer les lucioles 15 fois
   par seconde et les traces 7,5 fois, toutes sur la même horloge (un pas de luciole = 1/15 s : durée d'un intervalle /
   nombre de pas, retards en secondes entières ; un pas des traces = deux), donc l'image ne change que 15 fois par
   seconde. Mesuré par fond_cpu.py dans Edge sans carte graphique : à 30 pas/s non calés et avec un masque, le fond
   coûtait 20 % d'un cœur ; c'est la dérive des traces (tout l'écran) qui coûte, d'où 7,5 pas/s et pas de masque.
   Couleurs : --trace et --lumiere de chaque thème, assez faibles pour qu'un texte posé sur la page garde 4,5:1 même
   sur une trace ET une luciole (accessibilite.py et theme_contrastes_rendus.py le vérifient). Les traces sont un motif
   SVG de 320 px dont la couleur et l'opacité de groupe sont celles de --trace (accessibilite.py vérifie qu'elles
   restent égales) ; elles glissent de 320 px en 160 s, puis le motif boucle. */
.fond-anime { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.fond-anime .traces { position: absolute; top: 0; left: -320px; right: 0; bottom: -320px; background: 0 0 / 320px 320px repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg opacity='.08' fill='none' stroke='%233b6fd6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 64H72L96 88H172M244 40H292L316 64H320M224 0V116L248 140V196M196 262V292L224 320M0 240H28M272 176V216L296 240H320M70 185H120L144 209V250M8 178H40M8 192H40M40 170H55A15 15 0 0 1 55 200H40Z'/%3E%3Cpath d='M180 88a4 4 0 1 1-8 0a4 4 0 1 1 8 0M244 40a4 4 0 1 1-8 0a4 4 0 1 1 8 0M252 200a4 4 0 1 1-8 0a4 4 0 1 1 8 0M200 258a4 4 0 1 1-8 0a4 4 0 1 1 8 0M36 240a4 4 0 1 1-8 0a4 4 0 1 1 8 0M276 172a4 4 0 1 1-8 0a4 4 0 1 1 8 0M148 254a4 4 0 1 1-8 0a4 4 0 1 1 8 0'/%3E%3Cg fill='%233b6fd6' stroke='none'%3E%3Ccircle cx='120' cy='30' r='2.5'/%3E%3Ccircle cx='290' cy='120' r='2.5'/%3E%3Ccircle cx='60' cy='290' r='2.5'/%3E%3Ccircle cx='160' cy='140' r='2.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: derive 160s steps(1200) infinite; will-change: transform; }   /* 1200 pas en 160 s = 7,5 par seconde */
:root[data-theme="light"] .fond-anime .traces {   /* le même motif, en blanc : en clair, les traces éclaircissent la page */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg opacity='.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 64H72L96 88H172M244 40H292L316 64H320M224 0V116L248 140V196M196 262V292L224 320M0 240H28M272 176V216L296 240H320M70 185H120L144 209V250M8 178H40M8 192H40M40 170H55A15 15 0 0 1 55 200H40Z'/%3E%3Cpath d='M180 88a4 4 0 1 1-8 0a4 4 0 1 1 8 0M244 40a4 4 0 1 1-8 0a4 4 0 1 1 8 0M252 200a4 4 0 1 1-8 0a4 4 0 1 1 8 0M200 258a4 4 0 1 1-8 0a4 4 0 1 1 8 0M36 240a4 4 0 1 1-8 0a4 4 0 1 1 8 0M276 172a4 4 0 1 1-8 0a4 4 0 1 1 8 0M148 254a4 4 0 1 1-8 0a4 4 0 1 1 8 0'/%3E%3Cg fill='white' stroke='none'%3E%3Ccircle cx='120' cy='30' r='2.5'/%3E%3Ccircle cx='290' cy='120' r='2.5'/%3E%3Ccircle cx='60' cy='290' r='2.5'/%3E%3Ccircle cx='160' cy='140' r='2.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
@keyframes derive { to { transform: translate(320px, -320px); } }
/* Lucioles : un point de lumière qui s'allume, flotte et s'éteint. 4 intervalles d'un quart de la durée ; pas par
   intervalle = durée / 4 × 15 (16 s -> 60 pas). Changer une durée = changer ses pas, sinon l'horloge commune se perd. */
.lucioles { transition: opacity .8s; }
.lucioles i { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, var(--lumiere) 0 22%, transparent); animation: luciole 16s steps(60) infinite; }
@keyframes luciole { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 50% { opacity: .35; transform: translate(var(--dx), var(--dy)); }
  75% { opacity: .9; } 100% { opacity: 0; transform: translate(calc(var(--dx) * -.5), calc(var(--dy) * 2)); } }
.lucioles i:nth-child(1) { left: 7%; top: 18%; --dx: 26px; --dy: -34px; animation-delay: -2s; }
.lucioles i:nth-child(2) { left: 19%; top: 64%; --dx: 22px; --dy: -40px; animation-duration: 20.8s; animation-timing-function: steps(78); animation-delay: -11s; }
.lucioles i:nth-child(3) { left: 33%; top: 30%; --dx: -28px; --dy: -30px; animation-duration: 14.4s; animation-timing-function: steps(54); animation-delay: -6s; }
.lucioles i:nth-child(4) { left: 48%; top: 82%; --dx: 30px; --dy: -26px; animation-duration: 19.2s; animation-timing-function: steps(72); animation-delay: -15s; }
.lucioles i:nth-child(5) { left: 62%; top: 12%; --dx: -20px; --dy: -38px; animation-duration: 22.4s; animation-timing-function: steps(84); animation-delay: -4s; }
.lucioles i:nth-child(6) { left: 76%; top: 48%; --dx: 24px; --dy: -32px; animation-duration: 13.6s; animation-timing-function: steps(51); animation-delay: -9s; }
.lucioles i:nth-child(7) { left: 88%; top: 26%; --dx: -26px; --dy: -28px; animation-duration: 17.6s; animation-timing-function: steps(66); animation-delay: -13s; }
.lucioles i:nth-child(8) { left: 93%; top: 74%; --dx: -22px; --dy: -36px; animation-duration: 18.4s; animation-timing-function: steps(69); animation-delay: -1s; }
/* Pendant une partie (souris sur le plateau ou focus dedans) : les lucioles s'effacent et tout s'arrête */
body:has(.jeu:hover) .lucioles, body:has(.jeu:focus-within) .lucioles,
body:has(.puz-canvas:hover) .lucioles, body:has(.puz-canvas:focus) .lucioles { opacity: 0; }
body:has(.jeu:hover) .fond-anime *, body:has(.jeu:focus-within) .fond-anime *,
body:has(.puz-canvas:hover) .fond-anime *, body:has(.puz-canvas:focus) .fond-anime * { animation-play-state: paused; }
/* « Réduire les animations » : les traces restent, immobiles, sans lucioles ; rien à l'impression */
@media (prefers-reduced-motion: reduce) { .fond-anime .traces { animation: none; } .lucioles { display: none; } }
@media print { .fond-anime { display: none; } }

/* En-tête et menu */
header { border-bottom: 1px solid var(--bord); background: var(--entete); position: sticky; top: 0; z-index: 10; }
header .contenu { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 1.25rem; color: var(--texte); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.logo span { color: var(--vert); }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav a { color: var(--texte); text-decoration: none; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
nav a:hover, nav a[aria-current="page"] { background: var(--survol); color: var(--vert); }
/* Téléphone (15/10, visiteur G1) : le menu passe sur deux lignes au lieu de défiler, pour qu'« Offres » se voie sans glisser ;
   l'en-tête ne reste plus collé en haut (il mangerait un quart de l'écran) */
@media (max-width: 719px) {
  header { position: static; }
  header .contenu { gap: 0; }
  nav { flex: 1 1 100%; gap: 0 2px; margin: 0 -8px; }
  nav a { padding: 8px 8px; white-space: nowrap; font-size: .9375rem; }
}
/* 15/10 (chantier site_suite) : à 360 px, le menu FR (8 liens) passait sur 3 lignes, à 10 px près ; en 15 px et 8 px de
   marge, il tient sur 2 lignes avec ~20 px de réserve (polices un peu plus larges d'Android). Sous 360 px (320 px), un
   cran de plus pour garder 2 lignes. Mesuré par tests_chantier\test_menu_telephone.py */
@media (max-width: 359px) { nav a { padding: 8px 6px; font-size: .875rem; } }
/* Bascule de langue FR ↔ EN (pages traduites, en.py) et bouton du thème : après le menu sur PC ; sur téléphone, à droite du logo */
.entete-outils { display: flex; align-items: center; gap: 8px; }
.langue { color: var(--texte); text-decoration: none; font-weight: 700; font-size: .95rem; border: 1px solid var(--bord);
          border-radius: 8px; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; }
.langue:hover { color: var(--vert); border-color: var(--vert); }
.theme-bouton { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; background: none; color: var(--texte);
                border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.theme-bouton:hover { color: var(--vert); border-color: var(--vert); }
.theme-bouton svg { width: 22px; height: 22px; display: block; }
.theme-bouton .lune, :root[data-theme="light"] .theme-bouton .soleil { display: none; }   /* l'icône dit le thème qu'on obtient */
:root[data-theme="light"] .theme-bouton .lune { display: block; }
@media (min-width: 720px) { header nav { flex: 1 1 auto; justify-content: flex-end; } }
@media (max-width: 719px) { .entete-outils { order: 1; margin-top: 6px; } header nav { order: 2; } }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px;
       border-radius: 10px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: 1rem; }
.btn-vert { background: var(--vert-fonce); color: #fff; }
.btn-vert:hover { background: #1a6b2c; }   /* blanc sur ce vert : 6,6:1, dans les deux thèmes */
.btn-clair { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); }
.btn-attente { background: var(--bord); color: var(--texte); cursor: not-allowed; }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* Bandeau d'accueil */
.hero { padding: 40px 0 28px; }
.hero h1 { font-size: clamp(1.8rem, 1.2rem + 3vw, 3rem); line-height: 1.15; margin: 0 0 12px; }
.hero h1 em { font-style: normal; color: var(--vert); }
.hero p { color: var(--doux); font-size: 1.1rem; max-width: 640px; margin: 0; }

section { padding: 28px 0; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); margin: 0 0 14px; }
.sous { color: var(--doux); margin: -6px 0 18px; }

/* Étapes « comment ça marche » */
.etapes { display: grid; gap: 12px; }
.etape { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
.etape .n { color: var(--vert); font-size: 1.6rem; font-weight: 800; display: block; }

/* Offres */
.declic { display: flex; gap: 14px; align-items: center; background: var(--fond-violet); border: 2px solid var(--violet);
          border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 22px; flex-wrap: wrap; }
.declic .gros { font-size: 2.4rem; font-weight: 800; color: var(--violet); line-height: 1; }
.declic div { flex: 1 1 220px; }
.offres { display: grid; gap: 16px; align-items: stretch; }
.offres + .declic { margin-top: 22px; }   /* 15/10 : le bloc « €0 » collait aux cartes (en/offers.html) */
.offre { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px 18px;
         display: flex; flex-direction: column; position: relative; }
.offre h3 { margin: 0; font-size: 1.25rem; }
.offre .prix { font-size: 2.4rem; font-weight: 800; margin: 6px 0 2px; }
.offre ul { padding-left: 20px; margin: 12px 0 18px; flex: 1; }
.offre li { margin: 4px 0; }
.offre .btn { width: 100%; }
@media (max-width: 719px) { .offre .btn { order: 1; margin-top: 8px; } .offre ul { order: 2; margin-bottom: 0; } }   /* téléphone : prix et bouton d'abord */
.offre.top { border: 3px solid var(--vert); background: var(--fond-vert); }
.offre.top .prix, .offre.top h3 { color: var(--vert); }
.ruban { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--vert);
         color: var(--sur-vert); font-weight: 800; font-size: .85rem; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.barre { color: var(--doux); font-size: .92rem; font-weight: 400; margin: 2px 0; }   /* comparaison à l'achat séparé : gris discret, le prix réel (.prix) reste en avant */
.barre s { color: var(--doux); }
.eco { display: inline-block; background: var(--vert); color: var(--sur-vert); font-weight: 800; border-radius: 8px; padding: 3px 10px; margin-top: 6px; }
.lancement { margin: 18px 0 22px; border: 2px dashed var(--or); border-radius: var(--rayon); padding: 12px 16px; text-align: center; background: var(--fond-or); }
.lancement b { color: var(--or); }
/* position: relative : les « Inclus / Non inclus » des lecteurs d'écran (.sr-only, en absolu) restent dans le cadre qui défile ;
   sans elle, ils élargissaient la page entre 700 et ~770 px (vu par Watt, 15/10, en ajoutant les colonnes du kit 3) */
.tableau-comparatif { position: relative; overflow: auto; max-height: 85vh; border: 1px solid var(--bord); border-radius: var(--rayon); margin: 14px 0; }
.tableau-comparatif table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: .92rem; }
.tableau-comparatif caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tableau-comparatif th, .tableau-comparatif td { padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--bord); background: var(--carte); }
.tableau-comparatif tbody th, .tableau-comparatif tfoot th { text-align: left; font-weight: 600; min-width: 190px; }
.tableau-comparatif thead th { position: sticky; top: 0; z-index: 2; }
.tableau-comparatif tbody th, .tableau-comparatif tfoot th, .tableau-comparatif thead th:first-child { position: sticky; left: 0; z-index: 1; }
.tableau-comparatif thead th:first-child { z-index: 3; }
.tableau-comparatif .oui { color: var(--vert); font-weight: 700; font-size: 1.15rem; }
.tableau-comparatif .non { color: var(--doux); }
.tableau-comparatif tfoot th, .tableau-comparatif tfoot td { border-bottom: 0; border-top: 2px solid var(--bord); }
.tableau-comparatif .lanc { color: var(--or); font-size: .8rem; }
.tableau-comparatif .lien-col { display: inline-block; min-width: 44px; padding: 12px 4px; }
.comparatif-liste { display: none; }
.comparatif-offre { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); padding: 12px 14px; margin: 10px 0; }
.comparatif-offre h3 { margin: 0 0 6px; font-size: 1.05rem; }
.comparatif-offre h3 a { display: inline-block; padding: 8px 0; }
.comparatif-offre .prix-petit { color: var(--vert); font-weight: 700; }
.comparatif-offre .lanc { color: var(--or); font-size: .85rem; }
.comparatif-offre ul { list-style: none; margin: 0; padding: 0; }
.comparatif-offre li { padding: 3px 0; }
.comparatif-offre li span { color: var(--vert); font-weight: 700; }
@media (max-width: 700px) { .tableau-comparatif { display: none; } .comparatif-liste { display: block; } }
.note-paiement { color: var(--doux); font-size: .9rem; margin-top: 10px; }

/* Fiches produit : l'encart du prix vient en premier (sur téléphone, prix et bouton dès le premier écran) ; sur un
   écran large, il passe à droite et reste visible pendant qu'on lit le contenu */
.fiche { display: grid; gap: 22px; }
.hero-fiche { padding-bottom: 8px; }
.hero-fiche + .fiche { padding-top: 16px; }
.fiche .achat .prix { line-height: 1.1; }
.fiche .achat .boutons { margin-top: 12px; }
@media (max-width: 719px) { .hero-fiche { padding-top: 22px; } .hero-fiche h1 { font-size: 1.75rem; } .hero-fiche p { font-size: 1rem; } }
.fiche .encart { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px; }
.fiche .encart h2 { font-size: 1.35rem; margin: 0 0 8px; }
.fiche .encart ul + h2 { margin-top: 22px; }
.fiche .lancement { margin: 14px 0 0; }
.fiche .prix { font-size: 2.6rem; font-weight: 800; color: var(--vert); }
.fiche ul { padding-left: 20px; }

/* Jeu */
.jeu { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
.jeu .entete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jeu h3 { color: var(--bleu); margin: 0; font-size: 1.2rem; }
.jeu .num { color: var(--doux); font-size: .9rem; }
.jeu .histoire { margin: 10px 0 4px; }
.jeu .nouvelle { color: var(--or); font-weight: 600; margin: 0 0 12px; }
.circuit { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.bloc { background: var(--carte2); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, monospace; }
.bloc select { display: block; margin-top: 6px; min-height: 44px; width: 100%; background: var(--champ); color: var(--bleu);
               border: 1px solid var(--bleu); border-radius: 6px; padding: 6px 8px; font-size: 1rem; font-weight: 600; }
.bloc .sortie { color: var(--vert); }
.verite { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 480px; }
.verite th, .verite td { border: 1px solid var(--bord); padding: 6px 8px; text-align: center; font-family: ui-monospace, monospace; }
.verite th { background: var(--carte2); color: var(--doux); }
.verite tr.ok td.res { background: #1a7f37; color: #fff; font-weight: 700; }
.verite tr.ko td.res { background: #a1251f; color: #fff; font-weight: 700; }
.etat { font-weight: 700; margin-top: 10px; }
.etat.gagne { color: var(--vert); }
.etat.encours { color: var(--doux); }
.jeu .nav { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.porteNom { color: var(--or); }
.fin-gratuit { margin-top: 16px; border: 2px solid var(--vert); border-radius: var(--rayon); padding: 14px; background: var(--fond-vert); }

/* Exercices du cours Apprendre (apprendre.js) : boutons réels, résultat dit en mots (pas seulement en couleur) */
.quiz { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; margin: 24px 0; }
.quiz-progression { font-weight: 700; color: var(--doux); margin: 0 0 8px; }
.quiz-question { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz-question legend { font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: 12px; }
.quiz-option { display: flex; width: 100%; max-width: 520px; margin: 8px 0; text-align: left; justify-content: flex-start; }
.quiz-option.juste, .quiz-champ.juste { border: 2px solid var(--vert); background: var(--fond-vert); }
.quiz-option.faux, .quiz-champ.faux { border: 2px solid var(--rouge); }
.quiz-saisie { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.quiz-champ { width: 4.5rem; min-height: 48px; font-size: 1.4rem; text-align: center; border-radius: 10px; border: 1px solid var(--bord);
              background: var(--champ); color: var(--texte); }
.quiz-retour { min-height: 1.6em; margin: 12px 0 0; font-weight: 600; }
.quiz-retour.juste { color: var(--vert); }
.quiz-retour.faux { color: var(--rouge); }
.quiz-suite { margin-top: 12px; }
.quiz-badge.juste, .quiz-resume { color: var(--vert); font-weight: 700; }

/* Circuit animé */
.aide { color: var(--doux); font-size: .92rem; margin: 0 0 8px; }
/* le plateau garde ses couleurs sombres dans les deux thèmes (variables sombres redéclarées sur .scene, en tête de fichier) */
.scene { overflow-x: auto; -webkit-overflow-scrolling: touch; background: radial-gradient(circle at 30% 20%, #142236, #0b1220 70%);
         border: 1px solid var(--bord); border-radius: var(--rayon); padding: 6px; }
.circuit-svg { display: block; width: 100%; height: auto; }
.fil { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke .25s; }
.fil-0 { stroke: #3a4555; }
.fil-inconnu { stroke: #2a3340; stroke-dasharray: 4 7; }
.fil-1 { stroke: var(--vert); stroke-dasharray: 10 8; animation: courant .6s linear infinite; filter: url(#lueur); }
@keyframes courant { to { stroke-dashoffset: -18; } }
.inter { cursor: pointer; }
.inter-fond { fill: #1b2433; stroke: #4b5a70; stroke-width: 2; transition: fill .2s, stroke .2s; }
.inter.allume .inter-fond { fill: #12391f; stroke: var(--vert); filter: url(#lueur); }
.inter-nom { fill: var(--texte); font: 700 17px system-ui, sans-serif; text-anchor: middle; }
.inter-val { fill: var(--doux); font: 700 15px ui-monospace, monospace; text-anchor: middle; }
.inter.allume .inter-val { fill: var(--vert); }
.case { cursor: pointer; }
.case-zone { fill: transparent; stroke: #4b5a70; stroke-width: 2; stroke-dasharray: 6 5; transition: stroke .2s; }
.case.posee .case-zone { stroke: transparent; }
.case:hover .case-zone, .case:focus .case-zone { stroke: var(--bleu); }
.case-vide { fill: var(--bleu); font: 800 26px system-ui, sans-serif; text-anchor: middle; animation: clignote 1.6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: .35; } }
.porte-corps { fill: url(#gPorte); stroke: #6aa7ff; stroke-width: 2.5; stroke-linejoin: round; transition: stroke .2s; }
.porte-bulle { fill: #132238; stroke: #6aa7ff; stroke-width: 2.5; }
.porte-pattes { fill: none; stroke: #6aa7ff; stroke-width: 3; stroke-linecap: round; }
.case.allume .porte-pattes { stroke: var(--vert); }
.case.allume .porte-corps, .case.allume .porte-bulle { stroke: var(--vert); filter: url(#lueur); }
.porte-nom { fill: var(--or); font: 700 15px system-ui, sans-serif; text-anchor: middle; }
.case-num { fill: var(--bleu); font: 700 13px system-ui, sans-serif; }
.lampe-verre { fill: #1e2633; stroke: #4b5a70; stroke-width: 2.5; transition: fill .3s; }
.lampe-coeur { fill: #3a4555; transition: fill .3s; }
.lampe.allume .lampe-verre { fill: #5c4a0c; stroke: #ffd33d; filter: url(#lueur); animation: pulse 1.2s ease-in-out infinite; }
.lampe.allume .lampe-coeur { fill: #ffd33d; }
@keyframes pulse { 50% { stroke-width: 6; } }
.lampe-nom { fill: var(--doux); font: 700 13px system-ui, sans-serif; text-anchor: middle; }
.etincelle { fill: #ffd33d; animation: eclat 1.2s ease-out forwards; }
@keyframes eclat { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.verite tr.courant td { outline: 2px solid var(--bleu); outline-offset: -2px; }
.btn:disabled { background: var(--bord); color: var(--doux); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .fil-1, .case-vide, .lampe.allume .lampe-verre, .etincelle { animation: none; } }

/* Jeu au clavier (14/10, moteur.js) : un anneau doré autour de l'entrée ou de la case choisie (au lieu du contour carré
   du navigateur), un menu des portes à côté de la case (Entrée ou Espace), une aide montrée seulement pendant le jeu au clavier.
   À la souris et au doigt, rien ne change. Le menu garde les couleurs sombres du plateau dans les deux thèmes. */
.jeu { position: relative; }
.inter:focus-visible, .case:focus-visible { outline: none; }
.anneau { fill: none; stroke: var(--or); stroke-width: 3; display: none; }
.inter:focus-visible .anneau, .case:focus-visible .anneau, .case.choix-ouvert .anneau { display: inline; }
.aide-clavier { display: none; color: var(--doux); font-size: .88rem; margin: 6px 0 0; }
.jeu:has(.scene :focus-visible) .aide-clavier, .jeu:has(.choix-porte) .aide-clavier { display: block; }
.choix-porte { position: absolute; z-index: 5; min-width: 150px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
               background: var(--carte); border: 2px solid var(--or); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.choix-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 6px;
              color: var(--texte); font: 700 1rem system-ui, sans-serif; cursor: pointer; }
.choix-item svg { width: 44px; height: 30px; flex: 0 0 44px; overflow: visible; }
.choix-item:hover, .choix-item:focus { background: var(--carte2); }
.choix-item:focus-visible { outline-offset: -3px; }
.choix-item[aria-checked="true"]::after { content: "✓"; margin-left: auto; padding-left: 10px; color: var(--vert); }
.choix-vide { width: 44px; flex: 0 0 44px; text-align: center; color: var(--bleu); font-size: 1.4rem; font-weight: 800; }

/* Pages de texte (légal) */
.texte { max-width: 760px; }
.texte h2 { font-size: 1.3rem; margin-top: 26px; }
.a-remplir { background: var(--surligne); color: var(--surligne-texte); padding: 0 4px; border-radius: 4px; }

/* Pied de page (14/10, décision n° 36) : un fond plein, la marque, puis trois colonnes Jouer / Offres / Aide et légal.
   Téléphone : la marque sur toute la largeur, puis deux colonnes. */
footer { border-top: 1px solid var(--bord); background: var(--entete); margin-top: 30px; padding: 26px 0 30px; color: var(--doux); font-size: .95rem; }
footer p { margin: 0; }
.pied { display: grid; gap: 18px 24px; grid-template-columns: 1fr 1fr; }
.pied-marque { grid-column: 1 / -1; }
.pied-marque p { margin-top: 2px; max-width: 34ch; }
footer .logo { font-size: 1.1rem; }
.pied-col h2 { font-size: .95rem; margin: 0 0 4px; color: var(--texte); text-transform: uppercase; letter-spacing: .06em; }
.pied-col ul { list-style: none; margin: 0; padding: 0; }
.pied-col a { color: var(--doux); min-height: 36px; display: inline-flex; align-items: center; text-decoration: none; line-height: 1.3; }
.pied-col a:hover, .pied-col a:focus-visible { color: var(--texte); text-decoration: underline; }
footer .copie { font-size: .85rem; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--bord); }
@media (min-width: 720px) { .pied { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .pied-marque { grid-column: auto; } }

/* Bandeau de confiance (14/10) : sous les offres et sur chaque fiche ; rien d'autre que ce que disent les CGV */
.confiance { list-style: none; margin: 18px 0 0; padding: 14px 16px; display: grid; gap: 12px 18px;
             grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); }
.confiance li { display: flex; gap: 10px; align-items: flex-start; color: var(--doux); font-size: .92rem; line-height: 1.4; }
.confiance b { color: var(--texte); }
.confiance svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--vert); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.achat .confiance { background: none; border: 0; padding: 0; margin-top: 16px; grid-template-columns: 1fr; gap: 10px; }

/* Écrans plus larges */
@media (min-width: 720px) {
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .offres { grid-template-columns: 1fr 1.15fr 1fr; }
  .offre.top { transform: scale(1.03); }
  .fiche { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .fiche .achat { grid-column: 2; grid-row: 1; }
  .declic .gros { min-width: 3.3em; }   /* les textes des encadrés de prix commencent tous au même endroit */
}

/* Page 404 : le « 0 » est une lampe éteinte qui clignote doucement */
.erreur-404 { text-align: center; }
.erreur-404 p { margin-left: auto; margin-right: auto; }
.erreur-404 .boutons { justify-content: center; }
.hero .code-404 { font-size: clamp(4rem, 3rem + 8vw, 8rem); font-weight: 800; line-height: 1; margin: 0 auto 8px; color: var(--bord); letter-spacing: .05em; }
.code-404 span { color: var(--or); text-shadow: 0 0 18px rgba(210, 153, 34, .55); animation: clignote-404 2.4s ease-in-out infinite; }
@keyframes clignote-404 { 0%, 100% { opacity: 1; } 45% { opacity: .35; } 50% { opacity: .9; } 55% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .code-404 span { animation: none; } }

/* ---------- Lot B (11/10) : retour à chaque geste, progression, fête, thème à débloquer ---------- */
.scene { position: relative; }
.jeu .son { margin-left: auto; min-height: 44px; padding: 0 12px; border-radius: 8px; background: var(--carte2); color: var(--texte);
            border: 1px solid var(--bord); font: 600 .95rem system-ui, sans-serif; cursor: pointer; }
.jeu .son[aria-pressed="true"] { border-color: var(--vert); color: var(--vert); }

/* Carte des niveaux : un chemin de pastilles reliées par un fil */
.carte-niveaux { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 12px 0 4px; padding: 8px 4px 2px; position: relative; }
.etape-niv { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; min-height: 52px; padding: 0;
             background: none; border: none; color: var(--doux); cursor: pointer; font: inherit; position: relative; }
.etape-niv:not(:first-child)::before { content: ""; position: absolute; top: 18px; right: calc(50% + 17px); width: 14px; height: 3px;
             background: var(--bord); border-radius: 2px; }
.etape-niv.fait:not(:first-child)::before { background: var(--vert); }
.etape-niv .rond { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
                   background: var(--rond); border: 2px solid var(--rond-bord); color: var(--texte); transition: transform .2s, box-shadow .2s; }
.etape-niv.fait .rond { background: var(--rond-fait); border-color: var(--vert); color: var(--vert); }
.etape-niv.ici .rond { border-color: var(--or); box-shadow: 0 0 0 3px rgba(210, 153, 34, .35); transform: scale(1.08); }
.etape-niv.ferme { cursor: not-allowed; opacity: .55; }
.etape-niv.ferme .rond { font-size: .85rem; }
.etape-niv .etoiles { color: var(--or); font-size: .72rem; letter-spacing: -1px; min-height: 1em; }
.etape-niv:not(.ferme):hover .rond, .etape-niv:focus-visible .rond { transform: scale(1.12); }
.legende-etoiles { color: var(--doux); font-size: .8rem; margin: 4px 0 0; }

/* La porte posée fait un petit rebond */
.porte-corps, .porte-pattes, .porte-bulle { transform-box: fill-box; transform-origin: center; }
.case.pop .porte-corps, .case.pop .porte-pattes, .case.pop .porte-bulle { animation: rebond .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes rebond { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Réussite : une vague de lumière part des entrées et arrive à la lampe */
.cascade .fil-1 { animation: courant .6s linear infinite, vague .55s ease-out var(--d, 0s) 1; }
@keyframes vague { 0% { stroke-width: 4; } 40% { stroke-width: 10; stroke: #c8ffd2; } 100% { stroke-width: 4; } }
.cascade .lampe.allume .lampe-verre { animation: eclaire .7s ease-out var(--fin, 0s) 1, pulse 1.2s ease-in-out infinite; }
@keyframes eclaire { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.lampe-verre { transform-box: fill-box; transform-origin: center; }

/* Mot de félicitation au-dessus du circuit */
.bravo { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -8px) scale(.9); opacity: 0; pointer-events: none;
         background: rgba(13, 19, 32, .92); border: 2px solid var(--vert); border-radius: 999px; padding: 6px 16px; z-index: 2;
         display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.bravo b { color: var(--vert); font-size: 1.05rem; }
.bravo span { color: var(--or); letter-spacing: 1px; }
.bravo.montre { animation: bravo 2.2s ease-out forwards; }
@keyframes bravo { 0% { opacity: 0; transform: translate(-50%, -8px) scale(.8); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
                   22% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .case.pop .porte-corps, .case.pop .porte-pattes, .case.pop .porte-bulle, .cascade .fil-1,
  .cascade .lampe.allume .lampe-verre { animation: none; }
  .bravo.montre { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .etape-niv .rond { transition: none; }
}

/* Thème « Néon », débloqué dans les packs achetés (classe theme-neon sur <body>) */
body.theme-neon { --vert: #ff4fd8; --vert-fonce: #a3218f; --bleu: #39f3ff; --or: #ffe14d; --fond: #0b0618; --fond-page: #0b0618; --carte: #160d26; --bord: #3b2a55; }
body.theme-neon header { background: #0e0720; }
body.theme-neon .scene { background: radial-gradient(circle at 30% 20%, #2a0f3d, #0b0618 70%); }
body.theme-neon .inter.allume .inter-fond { fill: #3a0f35; }
body.theme-neon .case.allume .porte-corps { fill: #2a0f3d; }

/* Fiche « Collection d'images HD » : les vignettes de la galerie (13/10) */
.apercu-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.apercu-images figure { margin: 0; }
.apercu-images img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--bord); display: block; }
.apercu-images figcaption { font-size: .85rem; color: var(--doux); margin-top: 4px; }

/* Accueil : « Choisis ton monde » (13/10, décision n° 25) : les trois univers du site en cartes */
.mondes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.monde { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
/* les vignettes des mondes sont des illustrations : fond sombre dans les deux thèmes (variables sombres, en tête de fichier) */
.monde .visuel { height: 130px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #0d1117; border: 1px solid var(--bord); }
.monde .visuel picture { width: 100%; height: 100%; }
.monde .visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.monde .visuel svg { width: 84px; height: 84px; }
.monde .visuel-enigme { background: #1c1709; }
/* les deux kits à imprimer : deux vignettes côte à côte, chacune mène à sa fiche */
.monde .visuel-kits { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; place-items: stretch; }
.kit { border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
       padding: 6px; text-align: center; text-decoration: none; color: var(--texte); font-size: .85rem; font-weight: 700; line-height: 1.2; }
.kit-volt { background: linear-gradient(160deg, #2b2009, #17130a); border: 1px solid #5c4614; }
.kit-lucioles { background: linear-gradient(160deg, #10301f, #0a1912); border: 1px solid #1f5a37; }
.monde .visuel-kits svg { width: 52px; height: 52px; transition: transform .2s; }
.kit-lucioles circle { filter: drop-shadow(0 0 3px #e9f56b); }
.kit:hover svg, .kit:focus-visible svg { transform: scale(1.08); }
.kit:hover span, .kit:focus-visible span { text-decoration: underline; }
.monde h3 { margin: 4px 0 0; font-size: 1.15rem; }
.monde p { margin: 0; color: var(--doux); flex: 1; }
.monde .boutons { margin-top: 6px; }

/* Accueil : le circuit qui s'anime tout seul (13/10). Cycle de 4 s : A B = 00, 01, 10, 11 ; la lampe s'allume sur 11. */
.hero-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.hero-demo > div:first-child { flex: 1 1 320px; }
.demo { flex: 0 1 330px; width: 100%; max-width: 330px; margin: 0 auto; }
.demo svg { width: 100%; height: auto; display: block; }
/* thème clair : le circuit animé garde ses couleurs sombres, sur un écran sombre comme le plateau du jeu */
:root[data-theme="light"] .demo svg { background: radial-gradient(circle at 30% 20%, #142236, #0b1220 70%); border-radius: var(--rayon); }
.demo .fil { fill: none; stroke: var(--bord); stroke-width: 4; stroke-linecap: round; animation: 4s steps(1, end) infinite; }
.demo .fa { animation-name: demo-a; } .demo .fb { animation-name: demo-b; } .demo .fs { animation-name: demo-s; }
.demo .inter rect { fill: var(--carte); stroke: var(--bord); stroke-width: 2; animation: 4s steps(1, end) infinite; }
.demo .ia rect { animation-name: demo-a-rect; } .demo .ib rect { animation-name: demo-b-rect; }
.demo .inter text { fill: var(--texte); font: 700 15px Arial, sans-serif; text-anchor: middle; }
.demo .inter .v0, .demo .inter .v1 { font-size: 13px; font-weight: 600; animation: 4s steps(1, end) infinite; }
.demo .inter .v0 { fill: var(--doux); } .demo .inter .v1 { fill: var(--vert); }
.demo .ia .v0 { animation-name: demo-a-v0; } .demo .ia .v1 { animation-name: demo-a-v1; }
.demo .ib .v0 { animation-name: demo-b-v0; } .demo .ib .v1 { animation-name: demo-b-v1; }
.demo .porte .pattes { fill: none; stroke: var(--bord); stroke-width: 4; }
.demo .porte .corps { fill: #1f3a5f; stroke: var(--bleu); stroke-width: 2.5; }
.demo .porte text { fill: var(--texte); font: 800 14px Arial, sans-serif; text-anchor: middle; }
.demo .lampe .verre { fill: #2a2f36; stroke: var(--bord); stroke-width: 2; animation: demo-verre 4s steps(1, end) infinite; }
.demo .lampe .coeur { fill: var(--doux); animation: demo-coeur 4s steps(1, end) infinite; }
.demo-legende { color: var(--doux); font-size: .95rem; text-align: center; margin: 6px 0 0; }
.demo-legende b { color: var(--bleu); }
@keyframes demo-a { 0% { stroke: var(--bord); } 50% { stroke: var(--vert); } }
@keyframes demo-b { 0% { stroke: var(--bord); } 25% { stroke: var(--vert); } 50% { stroke: var(--bord); } 75% { stroke: var(--vert); } }
@keyframes demo-s { 0% { stroke: var(--bord); } 75% { stroke: var(--vert); } }
@keyframes demo-a-rect { 0% { stroke: var(--bord); } 50% { stroke: var(--vert); } }
@keyframes demo-b-rect { 0% { stroke: var(--bord); } 25% { stroke: var(--vert); } 50% { stroke: var(--bord); } 75% { stroke: var(--vert); } }
@keyframes demo-a-v0 { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes demo-a-v1 { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes demo-b-v0 { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } }
@keyframes demo-b-v1 { 0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 1; } }
@keyframes demo-verre { 0% { fill: #2a2f36; stroke: var(--bord); filter: none; } 75% { fill: var(--or); stroke: #f5c451; filter: drop-shadow(0 0 10px var(--or)); } }
@keyframes demo-coeur { 0% { fill: var(--doux); } 75% { fill: #fff; } }
/* hors de l'écran, en pause (classe posée par le script de generer.demo_hero) ; !important : les règles .demo .ia .v0,
   .demo .lampe .verre… sont plus précises (15/10, chantier perf_site) */
.demo.demo-pause * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  /* !important pour la même raison : sans lui, six animations demo-* tournaient encore (audit_perf) */
  .demo .fil, .demo .inter rect, .demo .inter text, .demo .lampe circle { animation: none !important; }
  .demo .fil { stroke: var(--vert); } .demo .inter rect { stroke: var(--vert); }
  .demo .inter .v0 { opacity: 0; } .demo .inter .v1 { opacity: 1; }
  .demo .lampe .verre { fill: var(--or); stroke: #f5c451; } .demo .lampe .coeur { fill: #fff; }
}

/* Le robot Bit, guide du jeu (13/10) : l'histoire et la nouvelle porte dans sa bulle. Option `guide` du moteur. */
.guide { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 6px; }
.guide-avatar { flex: 0 0 56px; }
.guide-avatar .robot { width: 56px; height: auto; display: block; animation: bit-flotte 3s ease-in-out infinite; }
.guide-bulle { flex: 1 1 auto; position: relative; background: var(--fond); border: 1px solid var(--bord); border-radius: 14px; padding: 8px 14px; min-width: 0; }
.guide-bulle::before { content: ""; position: absolute; left: -9px; top: 16px; border: 8px solid transparent; border-left: 0; border-right-color: var(--bord); }
.guide-bulle .histoire, .guide-bulle .nouvelle { margin: 4px 0; }
.robot .r-tete { fill: #1f3a5f; stroke: var(--bleu); stroke-width: 4; }
.robot .r-oeil { fill: var(--fond); } .robot .r-pupille { fill: var(--vert); }
.robot .r-lampe { fill: var(--or); } .robot .r-eteinte { fill: var(--bord); }
.robot .r-trait { stroke: var(--doux); stroke-width: 5; stroke-linecap: round; fill: none; }
@keyframes bit-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .guide-avatar .robot { animation: none; } }
/* Pages Apprendre : la table de vérité hors jeu */
.tv { margin: 8px 0 4px; } .tv td b { color: var(--vert); }
.texte h3 { margin: 16px 0 4px; font-size: 1.05rem; }
/* Le bandeau de saison de l'accueil (16/10, chantier fiches_saison, generer.bandeau_saison) : discret, montré par la
   date de l'appareil ; la citrouille ou le flocon se balance trois fois puis s'arrête (rien au repos), et pas du tout
   avec « réduire les animations » */
.saison { display: flex; gap: 14px; align-items: center; margin: 4px 0 18px; padding: 12px 16px; background: var(--carte);
  border: 1px solid var(--bord); border-left: 4px solid var(--ambre); border-radius: var(--rayon); }
.saison-hiver { border-left-color: var(--bleu); }
.saison > svg { width: 52px; height: 52px; flex: none; transform-origin: 50% 85%; animation: saison-balance 1.6s ease-in-out 3; }
.saison h2 { font-size: 1.1rem; margin: 0 0 2px; }
.saison p { margin: 0 0 8px; }
.saison .boutons { margin: 0; }
@keyframes saison-balance { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .saison > svg { animation: none; } }
@media (max-width: 480px) { .saison { align-items: flex-start; padding: 10px 12px; } .saison > svg { width: 38px; height: 38px; } }