/* « C'est combien ? » : la feuille de style de la version de classe (jeu.html), reprise telle quelle en phase 1. */
  :root {
    --creme:#FAF5ED; --lichen:#57774F; --bordeaux:#5a2a3c; --rose:#D9B4C1; --ambre:#E8A33D; --beige:#EFE6D6; --rouge:#C8465F;
    --txt2:#5B544B; --line:#DDD3C4; --bois:#7A5A44;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { background:var(--creme); color:#000; font-family:'Poppins', Arial, sans-serif; font-size:15px; line-height:1.45; }
  button { font:inherit; color:inherit; }
  .wrap { max-width:1120px; margin:0 auto; padding:14px 14px 48px; }
  .hidden { display:none !important; }
  .lab { font-size:11.5px; text-transform:uppercase; letter-spacing:1.4px; color:#4A4239; font-weight:700; }
  .hint { font-size:13.5px; color:var(--txt2); font-weight:400; }
  @keyframes up { from { transform:translateY(10px); opacity:0; } }
  @keyframes pop { 0% { transform:scale(0) rotate(-20deg); } 70% { transform:scale(1.3); } }

  /* ---------- Accueil ---------- */
  .auvent { height:30px; margin:-14px -14px 12px; background:repeating-linear-gradient(90deg, #D64045 0 46px, #FFF6E9 46px 92px); border-bottom:3px solid #000; border-radius:0 0 20px 20px; box-shadow:0 5px 0 rgba(0,0,0,.08); }
  .bulleLulu:empty { display:none; }
  .bulleLulu { margin-left:auto; display:flex; gap:10px; align-items:center; max-width:400px; padding:8px 16px 8px 8px; background:#fff; border:3px solid #000; border-radius:18px; box-shadow:4px 4px 0 var(--rose); font-size:13.5px; line-height:1.4; }
  .bulleLulu .av { width:58px; height:58px; flex:none; border-radius:50%; overflow:hidden; background:var(--beige); border:2px solid #000; }
  .bulleLulu .av svg { width:100%; height:100%; display:block; }
  .clientJ { display:flex; gap:14px; align-items:center; margin:12px 0 4px; }
  .clientJ .pt { width:84px; height:84px; flex:none; border-radius:50%; overflow:hidden; background:var(--beige); border:3px solid #000; font-size:40px; text-align:center; line-height:78px; }
  .clientJ .pt svg { width:100%; height:100%; display:block; } .clientJ b { font-size:17px; }
  .regleB.lecon { background:#F2F6EF; border-color:var(--lichen); font-size:14.5px; } .regleB.lecon > .lab { color:var(--lichen); font-size:12.5px; }
  details.sec > summary { cursor:pointer; list-style:none; } details.sec > summary::-webkit-details-marker { display:none; }
  details.sec > summary::before { content:"▸ "; font-weight:800; } details.sec[open] > summary::before { content:"▾ "; } details.sec[open] > summary { margin-bottom:6px; }
  .bro:not(.lock)::before { content:""; position:absolute; top:0; left:0; right:0; height:7px; border-radius:12px 12px 0 0; background:repeating-linear-gradient(90deg, #D64045 0 14px, #FFF6E9 14px 28px); }
  .bro.on::before { height:9px; }
  /* Le chemin de la saison (maquette) : des étapes rondes sur une allée en pointillés, en zigzag ; rien que des bordures CSS */
  .saisonT { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:26px; }
  .saisonT .lab { font-size:13px; color:#000; letter-spacing:1.2px; padding-left:10px; border-left:4px solid var(--ambre); }
  .vueSaison { display:flex; gap:6px; } .vueSaison .pill { font-size:12.5px; padding:5px 12px; }
  .chemin { margin-top:12px; --gap:18px; --pt:40px; --pb:12px; --r:44px; }
  .chemin .allee, .chemin .branche { display:flex; flex-direction:column; gap:var(--gap); }
  .rangee { position:relative; display:flex; padding:var(--pt) 0 var(--pb); border-radius:22px; background:#fff; border:2px solid var(--line); }
  .rangee.inv { flex-direction:row-reverse; } .rangee.cale { justify-content:flex-end; }
  .rangee[data-monde] { } .allee .rangee:nth-child(-n+2) { }
  .rangee .monde { position:absolute; top:10px; left:16px; right:16px; font-size:12.5px; color:var(--txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rangee .monde b { color:#000; }
  .annee { margin-top:10px; font-size:14px; font-weight:600; color:#3F3A33; }
  .finaleT { flex:1; align-self:center; padding:0 18px 0 6px; font-size:13.5px; color:#3F3A33; } .finaleT b { display:block; font-size:16px; color:#000; margin-bottom:2px; }
  /* Les couleurs des saisons : la rangée, et les bulles (plus pâles quand l'étape est fermée) */
  .rangee.s-automne { background:#FDF3EA; border-color:#E8C9A8; } .noeud.s-automne .rond { background:#F2C394; } .noeud.s-automne.ferme .rond { background:#F8E4D0; }
  .rangee.s-hiver { background:#F1F6FA; border-color:#C4D6E4; } .noeud.s-hiver .rond { background:#B9D3E8; } .noeud.s-hiver.ferme .rond { background:#E1ECF5; }
  .rangee.s-printemps { background:#F2F8EE; border-color:#C6DDB9; } .noeud.s-printemps .rond { background:#BFDDAD; } .noeud.s-printemps.ferme .rond { background:#E3F0DB; }
  .rangee.s-ete { background:#FFF9E8; border-color:#EBD58E; } .noeud.s-ete .rond { background:#FFD966; } .noeud.s-ete.ferme .rond { background:#FFF0C2; }
  .rangee.s-final { background:#FFF3D1; border:3px solid #000; box-shadow:4px 4px 0 var(--ambre); } .noeud.s-final .rond { background:var(--ambre); } .noeud.s-final.ferme .rond { background:#FBE3B5; }
  .rangee { --fond:#fff; } .rangee.s-automne { --fond:#FDF3EA; } .rangee.s-hiver { --fond:#F1F6FA; } .rangee.s-printemps { --fond:#F2F8EE; } .rangee.s-ete { --fond:#FFF9E8; } .rangee.s-final { --fond:#FFF3D1; } .branche .rangee { --fond:#FFFDF9; } .branche.nuit .rangee { --fond:#2A2D33; }
  .noeud .et, .noeud .nm, .noeud .cons { background:var(--fond) !important; }
  .rangee.s-final .noeud::after { display:none; }
  .noeud { position:relative; flex:0 0 calc(100% / var(--cols)); display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px; }
  .noeud:not(:last-child)::after { content:""; position:absolute; top:var(--r); left:50%; width:100%; border-top:5px dashed #C9B79C; z-index:0; }
  .rangee.inv .noeud:not(:last-child)::after { left:auto; right:50%; }
  .noeud.tourne::before { content:""; position:absolute; top:var(--r); left:calc(50% - 2px); height:calc(100% - var(--r) + var(--pb) + var(--gap) + var(--pt) + var(--r)); border-left:5px dashed #C9B79C; z-index:0; }
  .noeud .rond { position:relative; z-index:1; width:calc(var(--r) * 2); height:calc(var(--r) * 2); border-radius:50%; border:4px solid #000; background:#FFF6E9; box-shadow:0 5px 0 #000; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s; }
  .noeud .rond:hover { transform:translateY(-3px); }
  .noeud .rond .ic { font-size:38px; line-height:1; }
  .noeud .rond .num { position:absolute; left:-10px; bottom:-6px; min-width:28px; height:26px; padding:0 8px; border-radius:999px; background:#000; color:#fff; font-weight:800; font-size:11.5px; line-height:26px; }
  .noeud .rond .cad { position:absolute; right:-6px; bottom:-6px; font-size:20px; }
  .noeud .rond .luluIci { position:absolute; right:-20px; bottom:-14px; width:46px; height:46px; border-radius:50%; overflow:hidden; background:#fff; border:3px solid #000; }
  .noeud .rond .luluIci svg { width:100%; height:100%; display:block; }
  .noeud.ferme .rond { background:#EDE6DA; border-style:dashed; box-shadow:0 5px 0 #BDB2A2; } .noeud.ferme .rond .num { background:#6B645A; } .noeud.ferme .rond .ic { filter:grayscale(1); opacity:.45; }
  .noeud.ici .rond { border-width:5px; animation:pouls 1.8s ease-in-out infinite; }
  .noeud.examen { --r:52px; } .noeud.examen .rond { background:#FFE9A8; }
  @keyframes pouls { 0%, 100% { box-shadow:0 5px 0 #000, 0 0 0 0 rgba(232,163,61,.55); } 50% { box-shadow:0 5px 0 #000, 0 0 0 14px rgba(232,163,61,0); } }
  @media (prefers-reduced-motion: reduce) { .noeud.ici .rond { animation:none; } }
  .noeud .et { margin-top:10px; font-size:19px; letter-spacing:2px; } .noeud .et i { font-style:normal; color:#D9CFC0; } .noeud .et i.on { color:var(--ambre); -webkit-text-stroke:1px #8A5A10; }
  .noeud .nm { font-size:12.5px; font-weight:700; line-height:1.25; max-width:170px; margin-top:2px; } .noeud.ferme .nm { color:var(--txt2); font-weight:600; }
  .noeud .et, .noeud .nm, .noeud .cons { position:relative; z-index:1; background:#fff; padding:0 6px; border-radius:6px; }
  .branche .noeud .et, .branche .noeud .nm { background:#FFFDF9; } .branche.nuit .noeud .et, .branche.nuit .noeud .nm { background:#2A2D33; }
  .noeud .cons { margin-top:4px; font-size:11px; font-weight:800; color:var(--lichen); text-transform:uppercase; letter-spacing:1px; }
  .branche { margin-top:26px; } .brancheT { font-weight:800; font-size:14px; } .brancheT span { font-weight:400; color:var(--txt2); font-size:13px; margin-left:6px; }
  .branche .rangee { background:#FFFDF9; }
  .branche.nuit .rangee { background:#2A2D33; border-color:#2A2D33; } .branche.nuit .noeud .nm { color:#E8E6E1; } .branche.nuit .noeud .et i { color:#4A505A; } .branche.nuit .noeud .et i.on { color:var(--ambre); }
  .branche.nuit .noeud:not(:last-child)::after { border-top-color:#5A606B; } .branche.nuit .noeud.ferme .rond { background:#3B4048; box-shadow:0 5px 0 #15171B; }
  .etapeF { font-size:64px !important; line-height:110px !important; background:#FFF6E9; border-radius:50%; border:4px solid #000; }
  .etE { font-size:22px; letter-spacing:2px; } .etE i { font-style:normal; color:#D9CFC0; } .etE i.on { color:var(--ambre); }
  @media (max-width:700px) { .chemin { --r:31px; --pt:46px; } .noeud .rond .ic { font-size:26px; } .rangee .monde { font-size:11px; white-space:normal; } .noeud .nm { font-size:11.5px; } .noeud .et { font-size:15px; }
    .noeud .rond .luluIci { width:34px; height:34px; right:-14px; } .finaleT { font-size:12px; padding:0 10px 0 4px; } .finaleT b { font-size:14px; } .noeud .rond .num { font-size:10px; padding:0 6px; } }
  /* L'encart Grune Berg, en bas de l'accueil */
  .gb { display:flex; gap:22px; align-items:center; margin-top:34px; padding:20px 22px; background:#fff; border:3px solid #000; border-radius:18px; box-shadow:6px 6px 0 #000; }
  .gbLogo { flex:none; } .gbLogo img { width:132px; height:132px; display:block; border-radius:14px; }
  .gbT h3 { font-size:20px; margin:4px 0 6px; } .gbT p { font-size:14px; color:#3F3A33; margin-top:6px; } .gbT .btn { display:inline-block; margin-top:12px; text-decoration:none; }
  @media (max-width:700px) { .gb { flex-direction:column; align-items:flex-start; text-align:left; } .gbLogo img { width:96px; height:96px; } }
  #intro > .lab, #allee > .lab { font-size:13px; color:#000; letter-spacing:1.2px; padding-left:10px; border-left:4px solid var(--ambre); }
  .hero { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:6px; }
  .logo { font-weight:800; font-size:clamp(38px, 7vw, 60px); line-height:1; letter-spacing:-2px; }
  .logo em { font-style:normal; display:inline-block; background:var(--ambre); padding:0 14px 4px; border:3px solid #000; border-radius:14px; transform:rotate(-3deg); box-shadow:4px 4px 0 #000; }
  .tag { display:inline-block; font-weight:700; font-size:13px; padding:6px 12px; border-radius:999px; background:#000; color:var(--creme); transform:rotate(3deg); }
  .tagline { display:none; }
  .next { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); gap:18px; margin-top:16px; align-items:start; }
  .brief { background:#fff; border:3px solid #000; border-radius:18px; padding:20px 22px; box-shadow:6px 6px 0 #000; font-size:15px; line-height:1.55; }
  .brief > p { margin-top:8px; }
  .brief .sec { margin-top:16px; padding-top:12px; border-top:2px dashed var(--line); }
  .reglages { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin-top:8px; }
  .reglages .rg .lab { margin-top:0 !important; font-size:10.5px; color:var(--txt2); }
  .reglages .rg .repB { margin-top:8px; }
  .goBar { display:flex; align-items:center; gap:14px; margin-top:18px; padding:12px 14px; background:var(--beige); border-radius:16px; }
  .goBar .go { margin-top:0; font-size:17px; padding:14px 30px; flex:none; box-shadow:4px 4px 0 #000; } .goBar .goT { font-size:13.5px; color:var(--txt2); line-height:1.3; }
  .cote { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; display:flex; flex-direction:column; gap:10px; padding:0 4px 6px 0; }
  .cote .colB { margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .tuile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px 14px; background:#fff; border:3px solid #000; border-radius:14px; box-shadow:3px 3px 0 #000; cursor:pointer; text-align:left; }
  .tuile:hover { transform:translate(-1px, -1px); box-shadow:4px 4px 0 #000; } .tuile .te { font-size:24px; line-height:1; } .tuile b { font-size:14.5px; margin-top:4px; } .tuile .tc { font-size:12.5px; color:var(--txt2); }
  .cote .prog { margin-top:0; } .cote > .lab { margin-top:6px; }
  .brief .when { font-size:12.5px; color:var(--txt2); font-weight:600; }
  .brief h2 { font-size:23px; font-weight:800; letter-spacing:-.4px; margin:4px 0 8px; }
  .brief .obj { display:flex; gap:12px; align-items:center; background:var(--beige); border-radius:14px; padding:10px 12px; margin:8px 0 10px; }
  .brief .obj .e { font-size:46px; line-height:1; }
  .go { display:inline-block; margin-top:14px; padding:12px 24px; border:3px solid #000; border-radius:999px; background:var(--lichen); color:var(--creme); font-weight:800; font-size:15px; cursor:pointer; box-shadow:3px 3px 0 #000; }
  .go:hover { transform:translate(-1px, -1px); box-shadow:4px 4px 0 #000; }
  .howto { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-content:start; }
  .howto div { background:#FFFDF9; border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:12.5px; line-height:1.45; color:var(--txt2); }
  .howto b { display:block; color:#000; font-size:14px; margin-bottom:2px; }
  .saison { display:grid; grid-template-columns:repeat(auto-fill, minmax(176px, 1fr)); gap:12px; margin-top:10px; }
  .bro { position:relative; border-radius:14px; padding:12px 14px 14px; background:#fff; border:2px solid var(--line); cursor:pointer; transition:transform .12s, border-color .12s; }
  .bro:not(.lock):hover { border-color:#000; transform:translateY(-2px); }
  .bro .e { font-size:28px; line-height:1; }
  .bro .n { font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; color:var(--txt2); font-weight:700; margin-top:6px; }
  .bro .t { font-size:14.5px; font-weight:800; line-height:1.25; margin-top:1px; }
  .bro .p { font-size:12.5px; color:var(--txt2); margin-top:3px; }
  .bro .s { font-size:12px; font-weight:800; margin-top:8px; }
  .bro.lock { background:#F3EDE3; border-style:dashed; cursor:default; } .bro.lock .e, .bro.lock .t, .bro.lock .p { opacity:.55; } .bro.lock .s { color:#5B544B; font-weight:700; }
  .bro.on { border:3px solid #000; box-shadow:4px 4px 0 var(--ambre); }

  /* ---------- Barre du haut ---------- */
  .hud { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
  .hud .logo2 { font-weight:800; font-size:22px; letter-spacing:-.8px; }
  .hud .where { font-size:12.5px; color:var(--txt2); line-height:1.3; }
  .hud .where b { display:block; color:#000; font-size:13.5px; }
  .sp { flex:1; }
  .clock { font-weight:800; font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:-.5px; line-height:1; }
  .clock small { display:block; font-size:10.5px; font-weight:600; color:var(--txt2); letter-spacing:0; }
  .clock.low { color:var(--rouge); animation:low 1s infinite; }
  @keyframes low { 50% { opacity:.45; } }
  .hb { border:2px solid #000; border-radius:999px; padding:6px 12px; background:#fff; font-size:12.5px; font-weight:700; cursor:pointer; }
  .serie { display:none; font-weight:800; font-size:13px; padding:4px 11px; border-radius:999px; background:var(--ambre); border:2px solid #000; }
  .serie.on { display:inline-block; animation:pop .4s; }
  .main { display:grid; grid-template-columns:1fr 290px; gap:14px; margin-top:12px; }

  /* ---------- La scène : un décor vivant (météo, heure, affluence) ---------- */
  .scene { position:relative; height:390px; border-radius:22px 22px 0 0; overflow:hidden; isolation:isolate; border:3px solid #000; border-bottom:none; background:#F6DCC0; }
  .scene > * { position:absolute; }
  .contour { filter:drop-shadow(2.5px 0 0 #1D1619) drop-shadow(-2.5px 0 0 #1D1619) drop-shadow(0 2.5px 0 #1D1619) drop-shadow(0 -2.5px 0 #1D1619) drop-shadow(0 7px 0 rgba(0,0,0,.18)); }
  .contour.fin { filter:drop-shadow(1.8px 0 0 #1D1619) drop-shadow(-1.8px 0 0 #1D1619) drop-shadow(0 1.8px 0 #1D1619) drop-shadow(0 -1.8px 0 #1D1619) drop-shadow(0 4px 0 rgba(0,0,0,.15)); }
  .ciel { inset:0; transition:background 1.4s; }
  .soleil { left:10%; width:76px; height:76px; border-radius:50%; transition:top 1.4s, background 1.4s, opacity 1.4s, box-shadow 1.4s; }
  .nuages { inset:0 0 180px 0; pointer-events:none; }
  .nuage { position:absolute; left:0; height:30px; border-radius:30px; background:var(--nc); opacity:var(--no); animation:derive linear infinite; }
  .nuage::before, .nuage::after { content:""; position:absolute; background:inherit; border-radius:50%; }
  .nuage::before { width:48%; height:170%; left:14%; bottom:22%; }
  .nuage::after { width:34%; height:130%; left:52%; bottom:28%; }
  @keyframes derive { from { transform:translateX(-200px); } to { transform:translateX(1320px); } }
  .village { left:0; right:0; bottom:150px; height:140px; }
  .village i { position:absolute; bottom:0; display:block; }
  .village i.toit { clip-path:polygon(50% 0, 100% 100%, 0 100%); }
  .village i.fen { width:7px; height:9px; border-radius:2px 2px 0 0; background:rgba(0,0,0,.12); transition:background 1.2s, box-shadow 1.2s; }
  .scene.soir .village i.fen.lum { background:#FFD98A; box-shadow:0 0 8px 2px rgba(255,200,97,.8); }
  .village i.horloge { border-radius:50%; background:#F3E6D6; border:2px solid rgba(0,0,0,.18); }
  .arbre { bottom:112px; width:110px; height:110px; border-radius:50%; background:#5FAE5A; box-shadow:inset -14px -10px 0 rgba(0,0,0,.07); }
  .arbre::after { content:""; position:absolute; left:50%; bottom:-40px; width:12px; height:46px; margin-left:-6px; background:var(--bois); z-index:-1; }
  .sol { left:0; right:0; bottom:0; height:124px; transition:background 1.4s; }
  .flaque { position:absolute; height:14px; border-radius:50%; background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.55), rgba(150,130,145,.35) 62%, transparent 72%); }
  .flaque::after { content:""; position:absolute; inset:2px 22%; border-radius:50%; border:1.5px solid rgba(255,255,255,.7); animation:ronds 1.7s ease-out infinite; }
  @keyframes ronds { from { transform:scale(.3); opacity:1; } to { transform:scale(1.5); opacity:0; } }
  /* Les saisons (affichage/interface.js, ambiance ; donnees/decor.js, DECOR_SAISON) : les couleurs seulement */
  .scene.saison-hiver .arbre { box-shadow:inset -14px -10px 0 rgba(0,0,0,.07), inset 0 18px 0 rgba(255,255,255,.55); }
  .scene.saison-printemps .arbre { background-image:radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 2.6px); background-size:17px 15px; }
  .feuille { position:absolute; width:12px; height:7px; border-radius:0 80% 0 80%; opacity:.9; }
  .fleur { position:absolute; width:7px; height:7px; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.5); }
  .givre { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.6px) 0 0 / 13px 11px, linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)); }
  .fond { left:0; right:0; bottom:116px; height:90px; }
  .fond .st { position:absolute; bottom:0; width:118px; height:80px; transform-origin:50% 100%; }
  .fond .st .aw { position:absolute; top:0; left:-6px; right:-6px; height:22px; border-radius:5px 5px 0 0; background:repeating-linear-gradient(90deg, var(--c) 0 12px, var(--creme) 12px 24px); border-bottom:3px solid rgba(0,0,0,.14); transform-origin:50% 0; transition:transform .9s, opacity .9s; }
  .fond .st .po { position:absolute; top:22px; width:4px; height:58px; background:var(--bois); transition:height .9s; }
  .fond .st .tb { position:absolute; bottom:0; left:6px; right:6px; height:28px; background:#EADCC8; border-top:3px solid #fff; }
  .fond .st .tb b { position:absolute; bottom:28px; width:13px; height:11px; border-radius:3px 3px 0 0; transition:opacity .7s, transform .7s; }
  .fond .st .carton { position:absolute; bottom:28px; left:34%; width:36px; height:24px; background:#C9A57B; border:2px solid #8A6A4A; border-radius:2px; opacity:0; transform:translateY(10px); transition:all .7s; }
  .fond .st.rem .aw { transform:scaleY(0); opacity:0; }
  .fond .st.rem .po { height:0; }
  .fond .st.rem .tb b { opacity:0; transform:translateY(8px); }
  .fond .st.rem .carton { opacity:1; transform:none; }
  .fanions { top:126px; left:-10px; right:-10px; height:30px; }
  .fanions::before { content:""; position:absolute; left:0; right:0; top:0; height:1.5px; background:var(--bois); opacity:.7; }
  .fanions i { position:absolute; top:1px; width:18px; height:21px; clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:50% 0; animation:flotte 3s ease-in-out infinite; opacity:.9; }
  @keyframes flotte { 50% { transform:rotate(6deg); } }
  .foule { left:0; right:0; bottom:64px; height:170px; pointer-events:none; }
  .passant { position:absolute; bottom:0; width:104px; height:104px; animation:passe linear forwards; }
  .passant.g { animation-name:passeG; }
  .passant .sens { width:100%; height:100%; }
  .passant.g .sens { transform:scaleX(-1); }
  .passant .corps { width:100%; height:100%; animation:pas .42s ease-in-out infinite alternate; }
  .passant .corps svg { width:100%; height:100%; display:block; }
  .passant .parapluie { position:absolute; left:50%; top:-50px; width:100px; margin-left:-50px; transform:rotate(-8deg); }
  @keyframes passe { from { left:-130px; } to { left:105%; } }
  @keyframes passeG { from { left:105%; } to { left:-130px; } }
  @keyframes pas { to { transform:translateY(-4px); } }
  .store { top:0; left:-2%; right:-2%; height:52px; background:repeating-linear-gradient(90deg, #D64045 0 44px, #FFF6E9 44px 88px); box-shadow:inset 0 -10px 16px rgba(0,0,0,.07); }
  .lambrequin { top:52px; left:-2%; right:-2%; height:20px; background:radial-gradient(circle at 22px 0, #D64045 20px, transparent 21px) 0 0 / 88px 20px repeat-x, radial-gradient(circle at 66px 0, #FFF6E9 20px, transparent 21px) 0 0 / 88px 20px repeat-x; filter:drop-shadow(0 3px 0 rgba(0,0,0,.1)); }
  .guirlande { left:2%; right:2%; top:56px; height:40px; pointer-events:none; }
  .guirlande .fil { position:absolute; left:0; right:0; top:0; height:24px; border-bottom:2px solid #4A3B2E; border-radius:0 0 50% 50% / 0 0 100% 100%; }
  .guirlande b { position:absolute; width:11px; height:15px; margin-left:-5.5px; border-radius:50% 50% 45% 45%; background:#E6DCCB; border:1.5px solid #4A3B2E; transition:background .7s, box-shadow .7s; }
  .guirlande b.on { background:#FFE3A1; box-shadow:0 0 10px 4px rgba(255,205,120,.8); }
  .guirlande.noel b.on:nth-of-type(3n+1) { background:#FF9F8F; box-shadow:0 0 10px 4px rgba(255,140,120,.75); }
  .guirlande.noel b.on:nth-of-type(3n+2) { background:#BFE6A6; box-shadow:0 0 10px 4px rgba(170,225,150,.7); }
  .pole { top:60px; bottom:60px; width:12px; background:var(--bois); border-radius:3px; box-shadow:inset -3px 0 0 rgba(0,0,0,.18); }
  .pole.l { left:2.5%; } .pole.r { right:2.5%; }
  .nappe { left:-1%; right:-1%; bottom:0; height:78px; border-top:5px solid #fff; background:linear-gradient(90deg, rgba(214,64,69,.5) 50%, transparent 50%) 0 0 / 26px 26px, linear-gradient(rgba(214,64,69,.5) 50%, transparent 50%) 0 0 / 26px 26px, var(--creme); box-shadow:inset 0 -18px 24px rgba(0,0,0,.08), 0 -3px 0 rgba(0,0,0,.08); }
  .objet { left:12%; bottom:56px; width:100px; height:100px; transform-origin:50% 100%; }
  .objet img, .bric img, .caisse img { display:block; width:100%; height:100%; }
  .etiq { left:calc(12% + 92px); bottom:130px; padding:2px 9px; background:#FFF6DE; border:2px solid #000; border-radius:5px; font-weight:800; font-size:15px; transform:rotate(9deg); }
  .etiq::before { content:""; position:absolute; left:-24px; top:60%; width:26px; height:2px; background:#4A3B2E; transform:rotate(28deg); transform-origin:100% 50%; }
  .bric { right:16%; bottom:62px; display:flex; gap:8px; align-items:flex-end; }
  .bric img { width:42px; height:42px; }
  .bric img:nth-child(2) { width:36px; height:36px; }
  .caisse { left:calc(12% + 150px); bottom:60px; width:38px; height:38px; }
  /* Les six lieux : arrière-plan (#arriere) et plan intermédiaire (#milieu) */
  .arriere, .milieu { inset:0; pointer-events:none; }
  .arriere > *, .milieu > * { position:absolute; }
  .village { left:0; right:0; bottom:150px; height:140px; }
  .mer { left:0; right:0; bottom:186px; height:52px; background:linear-gradient(180deg, var(--mer1, #B9C8BE), var(--mer2, #A3B8AD)); border-top:3px solid rgba(255,255,255,.7); box-shadow:inset 0 3px 0 rgba(0,0,0,.08); overflow:hidden; }
  .mer::after, .canal::after { content:""; position:absolute; left:-30px; right:-30px; top:0; bottom:0; background:repeating-linear-gradient(180deg, transparent 0 8px, rgba(255,255,255,.4) 8px 9px); animation:houle 5s ease-in-out infinite alternate; }
  @keyframes houle { to { transform:translateX(-24px); } }
  .sable { left:0; right:0; bottom:110px; height:84px; background:linear-gradient(180deg, #F8E3B0, #F1D594); }
  .reflet { bottom:186px; width:46px; height:52px; margin-left:-23px; background:linear-gradient(180deg, var(--refl, rgba(255,236,200,.85)), transparent); filter:blur(3px); transition:opacity 1.4s, left 1.4s; }
  .mouette { width:28px; height:10px; animation:plane 9s ease-in-out infinite alternate; }
  .mouette::before, .mouette::after { content:""; position:absolute; top:0; width:15px; height:9px; border-top:2.5px solid #4A3B2E; border-radius:50% 50% 0 0; }
  .mouette::before { left:0; } .mouette::after { left:13px; }
  @keyframes plane { to { transform:translate(46px, -14px); } }
  .cabine { bottom:176px; width:40px; height:44px; background:repeating-linear-gradient(90deg, var(--c) 0 7px, #FAF5ED 7px 14px); border:2px solid rgba(0,0,0,.28); }
  .cabine::before { content:""; position:absolute; left:-6px; right:-6px; top:-20px; height:20px; background:var(--c); clip-path:polygon(50% 0, 100% 100%, 0 100%); }
  .cabine::after { content:""; position:absolute; left:12px; bottom:0; width:12px; height:22px; background:rgba(0,0,0,.28); border-radius:6px 6px 0 0; }
  .parasol { bottom:150px; width:4px; height:66px; background:#4A3B2E; }
  .parasol::before { content:""; position:absolute; left:-40px; top:-8px; width:84px; height:30px; border-radius:84px 84px 6px 6px; background:repeating-conic-gradient(from -90deg at 50% 100%, var(--c) 0 22.5deg, #FAF5ED 0 45deg); border:2px solid rgba(0,0,0,.22); }
  .colomb { bottom:208px; height:var(--h); width:var(--w); background-color:var(--c); background-image:linear-gradient(90deg, #6B4A36 3px, transparent 3px), linear-gradient(#6B4A36 3px, transparent 3px), linear-gradient(45deg, transparent 45%, #6B4A36 45% 55%, transparent 55%); background-size:26px 100%, 100% 30px, 26px 30px; border:3px solid #6B4A36; }
  .colomb::before { content:""; position:absolute; left:-9px; right:-9px; bottom:100%; height:var(--t); background:#B5482F; clip-path:polygon(50% 0, 100% 100%, 0 100%); }
  .colomb i { position:absolute; width:12px; height:15px; background:#F3E6D6; border:2px solid #6B4A36; transition:background 1.2s, box-shadow 1.2s; }
  .colomb i::after { content:""; position:absolute; left:-4px; right:-4px; bottom:-7px; height:5px; background:radial-gradient(circle, #E63946 2px, transparent 2.5px) 0 0 / 5px 5px, #3F8F48; }
  .scene.soir .colomb i.lum, .scene.soir .batiment i.lum { background:#FFD98A; box-shadow:0 0 8px 2px rgba(255,200,97,.8); }
  .canal { left:0; right:0; bottom:190px; height:18px; background:linear-gradient(180deg, var(--mer1, #B7C3B9), var(--mer2, #9FB2A8)); overflow:hidden; }
  .batiment { left:-10px; right:-10px; bottom:150px; height:116px; background:#F3E9D2; border-top:12px solid #B5482F; }
  .batiment i { position:absolute; width:16px; height:30px; background:#9CC3D9; border:2px solid #FAF5ED; outline:2px solid rgba(0,0,0,.12); transition:background 1.2s, box-shadow 1.2s; }
  .fronton { left:18%; bottom:150px; width:128px; height:150px; background:#F6EDE0; border:3px solid rgba(0,0,0,.14); }
  .fronton::before { content:""; position:absolute; left:-12px; right:-12px; bottom:100%; height:40px; background:#B5482F; clip-path:polygon(50% 0, 100% 100%, 0 100%); }
  .fronton .h { position:absolute; left:50%; top:10px; width:30px; height:30px; margin-left:-15px; border-radius:50%; background:#FAF5ED; border:3px solid #4A3B2E; }
  .fronton .h::after { content:""; position:absolute; left:12px; top:4px; width:2px; height:10px; background:#4A3B2E; box-shadow:4px 7px 0 -0.5px #4A3B2E; }
  .fronton .t { position:absolute; left:0; right:0; top:48px; text-align:center; font-weight:800; font-size:12px; letter-spacing:3px; color:#6B4A36; }
  .fronton .porte { position:absolute; left:42px; bottom:0; width:38px; height:58px; background:#8A6A52; border-radius:19px 19px 0 0; }
  .preau { right:6%; bottom:150px; width:170px; height:92px; }
  .preau::before { content:""; position:absolute; left:-8px; right:-8px; top:0; height:16px; background:#B5482F; }
  .preau::after { content:""; position:absolute; left:6px; right:6px; top:16px; bottom:0; background:repeating-linear-gradient(90deg, #6B4A36 0 6px, transparent 6px 52px); }
  .panier { right:31%; bottom:150px; width:6px; height:122px; background:#4A3B2E; }
  .panier .pl { position:absolute; left:-32px; top:-8px; width:66px; height:44px; background:#FAF5ED; border:3px solid #4A3B2E; }
  .panier .pl::after { content:""; position:absolute; left:20px; top:14px; width:20px; height:14px; border:2.5px solid #E63946; }
  .panier .ce { position:absolute; left:-12px; top:32px; width:28px; height:8px; border:3px solid #F77F00; border-radius:50%; }
  .panier .fi { position:absolute; left:-9px; top:39px; width:24px; height:18px; background:repeating-linear-gradient(90deg, #FAF5ED 0 2px, transparent 2px 5px); clip-path:polygon(0 0, 100% 0, 80% 100%, 20% 100%); }
  .briques { left:0; right:0; top:0; bottom:110px; background-color:#B5533C; background-image:linear-gradient(rgba(255,255,255,.2) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.2) 2px, transparent 2px); background-size:46px 18px, 46px 36px; }
  .baie { bottom:196px; width:112px; height:128px; border:6px solid #2B3A42; border-radius:56px 56px 0 0; background:var(--ciel, #F6DCC0); overflow:hidden; }
  .scene.pluvieux .baie { background:repeating-linear-gradient(100deg, transparent 0 9px, rgba(255,255,255,.45) 9px 10px), var(--ciel, #D8CFCB); }
  .baie::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 47%, #2B3A42 47% 53%, transparent 53%), linear-gradient(transparent 46%, #2B3A42 46% 50%, transparent 50%); }
  .poutre { left:0; right:0; top:86px; height:12px; background:#2B3A42; }
  .colonne { top:86px; bottom:112px; width:12px; background:#2B3A42; box-shadow:inset -3px 0 0 rgba(255,255,255,.12); }
  .suspension { top:98px; width:2px; height:34px; background:#2B3A42; }
  .suspension::after { content:""; position:absolute; left:-20px; top:34px; width:42px; height:18px; background:#2B3A42; border-radius:22px 22px 4px 4px; box-shadow:0 16px 34px 8px rgba(255,200,120,.55); }
  .haie { left:-20px; right:-20px; bottom:146px; height:48px; background:#4E9A4B; border-radius:34px 34px 0 0; box-shadow:inset 0 8px 0 rgba(255,255,255,.14); }
  .kiosque { left:15%; bottom:160px; width:146px; height:120px; }
  .kiosque .to { position:absolute; left:-16px; right:-16px; top:0; height:46px; background:#2A9D8F; clip-path:polygon(50% 0, 90% 66%, 100% 100%, 0 100%, 10% 66%); }
  .kiosque .po { position:absolute; left:70px; top:-16px; width:6px; height:18px; background:#F4C430; border-radius:3px; }
  .kiosque .fr { position:absolute; left:-4px; right:-4px; top:44px; height:8px; background:#F4C430; }
  .kiosque .co { position:absolute; left:6px; right:6px; top:52px; height:46px; background:repeating-linear-gradient(90deg, #FAF5ED 0 6px, transparent 6px 33px); }
  .kiosque .so { position:absolute; left:-8px; right:-8px; bottom:0; height:22px; background:#E9DCC8; border:2px solid rgba(0,0,0,.15); }
  .lampadaire { bottom:140px; width:5px; height:116px; background:#2B3A42; }
  .lampadaire::after { content:""; position:absolute; left:-8px; top:-20px; width:21px; height:22px; background:#F3E6D6; border:3px solid #2B3A42; border-radius:4px 4px 9px 9px; transition:background 1.2s, box-shadow 1.2s; }
  .scene.soir .lampadaire::after { background:#FFE3A1; box-shadow:0 0 18px 7px rgba(255,205,120,.8); }
  .scene.dedans .nuages, .scene.dedans .soleil, .scene.dedans .pluie, .scene.dedans .fanions { display:none !important; }
  .scene.dedans .fond .st .aw, .scene.dedans .fond .st .po { display:none; }
  .scene.sans-fanions .fanions { display:none; }
  .lieux { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
  .lieux .pill { font-size:12.5px; padding:5px 10px; }
  .pluie { inset:0; pointer-events:none; overflow:hidden; display:none; }
  .scene.pluvieux .pluie { display:block; }
  .pluie b { position:absolute; top:-30px; width:1.6px; height:20px; background:linear-gradient(rgba(110,95,110,0), rgba(110,95,110,.6)); transform:rotate(10deg); animation:goutte .55s linear infinite; }
  @keyframes goutte { to { transform:translate(-70px, 440px) rotate(10deg); } }
  .lumiere { inset:0; pointer-events:none; mix-blend-mode:multiply; transition:background 1.4s; z-index:5; }
  .scene.vent .fanions i { animation:rafale .25s 6; }
  .scene.vent .objet, .scene.vent .bric, .scene.vent .store, .scene.vent .lambrequin { animation:tremble .2s 7; }
  .scene.vent .passant .parapluie { animation:tremble .2s 7; }
  @keyframes rafale { 50% { transform:rotate(28deg); } }
  @keyframes tremble { 50% { transform:rotate(-4deg) translateX(3px); } }
  .terrain { display:flex; gap:6px; flex-wrap:wrap; order:10; flex-basis:100%; }
  .terrain span { font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:#fff; border:2px solid #000; animation:pop .35s; }
  .terrain span.alerte { background:#F5E0E5; border-color:var(--rouge); color:var(--rouge); }
  .terrainB { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 8px; }
  .terrainB span { font-size:13px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--beige); }

  /* Le chineur (CSS) */
  .char { left:52%; bottom:56px; width:190px; height:240px; transform-origin:50% 100%; transform:translateX(-50%) scale(calc(var(--s, 1.04) * var(--m, 1))); transition:transform .5s, opacity .5s; }
  .scene.absent .char { opacity:0; transform:translateX(30%) scale(.9); }
  /* Personnages Open Peeps (lib/peeps.js) ; le personnage CSS ne sert plus que de secours */
  .has-peeps .char { display:none; }
  .peep { left:52%; bottom:50px; width:252px; height:252px; transform:translateX(-50%) scale(var(--m, 1)); transform-origin:50% 100%; transition:transform .5s, opacity .5s; }
  .peep svg, .lulu-scene svg, .av svg { display:block; width:100%; height:100%; }
  .peep svg { animation:souffle 4.5s ease-in-out infinite; transform-origin:50% 100%; }
  .peep.pop svg { animation:sursaut .32s, souffle 4.5s ease-in-out .32s infinite; }
  @keyframes sursaut { 45% { transform:scale(1.05) rotate(-2deg); } }
  .peep.parle svg { animation:parler .22s ease-in-out infinite alternate; }
  @keyframes parler { to { transform:translateY(-3px) rotate(.8deg); } }
  .peep.m0 { --m:1.04; } .peep.m4 { --m:.96; }
  .scene.absent .peep { opacity:0; transform:translateX(-10%) scale(.9); }
  .lulu-scene { right:-14px; bottom:58px; width:150px; height:150px; display:none; }
  .has-peeps .lulu-scene { display:block; }
  .has-peeps .bric { right:16%; }
  .lulu-scene.pop svg { animation:sursaut .32s; }
  .has-peeps .av { overflow:hidden; background:#FFF6DE; }
  .bob { position:absolute; inset:0; animation:souffle 4.5s ease-in-out infinite; }
  @keyframes souffle { 50% { transform:translateY(-3px); } }
  .bob > div, .head > div { position:absolute; transition:all .35s; }
  .hairB { display:none; left:50%; background:var(--cheveux); }
  .torso { bottom:0; left:8px; right:8px; height:96px; border-radius:92px 92px 14px 14px; background:var(--veste); box-shadow:inset -12px 0 0 rgba(0,0,0,.08); }
  .shirt { position:absolute; top:0; left:50%; margin-left:-22px; width:0; height:0; border-left:22px solid transparent; border-right:22px solid transparent; border-top:40px solid #F1E6D6; }
  .scarf { position:absolute; top:-4px; left:28%; right:28%; height:22px; border-radius:12px; background:var(--ambre); display:none; }
  .prof-I .scarf { display:block; }
  .neck { bottom:86px; left:50%; width:36px; margin-left:-18px; height:28px; background:var(--peau); filter:brightness(.85); }
  .head { bottom:104px; left:50%; width:108px; height:128px; margin-left:-54px; border-radius:50% 50% 46% 46% / 44% 44% 56% 56%; background:var(--peau); box-shadow:inset -10px 0 0 rgba(0,0,0,.06); }
  .ear { top:46%; width:16px; height:24px; border-radius:50%; background:var(--peau); }
  .ear.l { left:-7px; } .ear.r { right:-7px; }
  .hair { top:-8px; left:-5px; right:-5px; height:42%; border-radius:56px 56px 16px 16px; background:var(--cheveux); }
  .brow { top:35%; width:19%; height:4px; border-radius:2px; background:var(--cheveux); filter:brightness(.7); }
  .brow.l { left:21%; } .brow.r { right:21%; }
  .eye { top:45%; width:10px; height:11px; border-radius:50%; background:#1A1012; animation:cligne 5.5s infinite; }
  .eye.l { left:29%; } .eye.r { right:29%; }
  @keyframes cligne { 0%, 95%, 100% { transform:scaleY(1); } 97% { transform:scaleY(.1); } }
  .bob.cash .eye { background:transparent; animation:none; }
  .bob.cash .eye::before { content:"€"; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font:800 19px Poppins, Arial, sans-serif; color:#B07A12; animation:pop .35s; }
  .bob.cash .shades { opacity:0; }
  .glass { display:none; top:39%; width:30%; height:21%; border:3px solid #120911; border-radius:40%; }
  .glass.l { left:14%; } .glass.r { right:14%; }
  .prof-C .glass { display:block; }
  .shades { display:none; top:40%; left:12%; right:12%; height:18%; border-radius:8px 8px 14px 14px; background:#1D1619; z-index:2; }
  .prof-D .shades { display:block; }
  .hat { display:none; z-index:3; }
  .prof-I .hat { display:block; top:-30px; left:-34px; right:-34px; height:46px; }
  .hat::before { content:""; position:absolute; left:0; right:0; bottom:0; height:14px; border-radius:50%; background:#E9C98F; }
  .hat::after { content:""; position:absolute; left:28%; right:28%; bottom:8px; height:40px; border-radius:40px 40px 6px 6px; background:#E9C98F; box-shadow:inset 0 -9px 0 var(--bordeaux); }
  .nose { top:53%; left:50%; width:8px; height:15px; margin-left:-4px; border-radius:4px 4px 8px 8px; background:rgba(0,0,0,.12); }
  .cheek { top:62%; width:15%; height:8%; border-radius:50%; background:var(--rose); opacity:0; }
  .cheek.l { left:13%; } .cheek.r { right:13%; }
  .mouth { left:35%; right:35%; top:70%; height:12%; border:4px solid transparent; }
  .prof-D .hair { top:-4px; left:8px; right:8px; height:27%; border-radius:42px 42px 6px 6px; }
  .prof-D .brow { height:5px; }
  .prof-I .hair { top:-6px; left:-12px; right:-12px; height:40%; border-radius:64px 64px 26px 26px; }
  .prof-I .hairB { display:block; bottom:66px; width:146px; margin-left:-73px; height:160px; border-radius:72px 72px 34px 34px; }
  .prof-S .hair { height:40%; border-radius:54px 54px 22px 22px; }
  .prof-S .hairB { display:block; bottom:212px; width:46px; height:46px; margin-left:-23px; border-radius:50%; }
  .prof-C .hair { height:35%; border-radius:54px 54px 6px 44px; }
  .m-int { --m:1.04; }
  .m-int .mouth { border-bottom-color:#2A1216; border-radius:0 0 30px 30px; }
  .m-int .cheek { opacity:.75; }
  .m-int .brow { top:32%; }
  .m-neu .mouth, .m-mef .mouth { top:76%; height:0; border-width:0 0 4px; border-bottom-color:#2A1216; }
  .m-mef .mouth { transform:rotate(-9deg); }
  .m-mef .brow.r { transform:translateY(-6px) rotate(-12deg); }
  .m-mef .eye { height:8px; top:46%; }
  .m-aga .mouth, .m-fer .mouth { top:73%; border-top-color:#2A1216; border-radius:30px 30px 0 0; }
  .m-aga .brow.l { transform:rotate(18deg); } .m-aga .brow.r { transform:rotate(-18deg); }
  .m-aga .cheek { opacity:.6; background:var(--rouge); }
  .m-fer { --m:.97; }
  .m-fer .eye { height:3px; top:48%; border-radius:2px; }
  .m-fer .brow.l { transform:translateY(3px) rotate(24deg); } .m-fer .brow.r { transform:translateY(3px) rotate(-24deg); }
  .m-fer .cheek { opacity:.85; background:var(--rouge); }
  .m-fer .mouth { left:38%; right:38%; }

  /* Gaston, le chien de Lulu, qui traverse l'allée */
  .chien { bottom:84px; left:-110px; width:100px; height:64px; z-index:1; cursor:pointer; display:none; }
  .chien.on { display:block; animation:traverse 6.5s linear forwards; }
  @keyframes traverse { to { left:105%; } }
  .chien i { position:absolute; display:block; background:#9A6A45; }
  .chien .cb { left:14px; bottom:14px; width:64px; height:30px; border-radius:30px; }
  .chien .ch { left:68px; bottom:30px; width:30px; height:28px; border-radius:50%; }
  .chien .ea { left:68px; bottom:30px; width:12px; height:24px; border-radius:8px; background:#6E4630; transform:rotate(18deg); }
  .chien .ey { left:88px; bottom:44px; width:5px; height:5px; border-radius:50%; background:#1A1012; }
  .chien .nz { left:94px; bottom:36px; width:7px; height:6px; border-radius:50%; background:#1A1012; }
  .chien .qu { left:-4px; bottom:38px; width:24px; height:7px; border-radius:7px; transform-origin:100% 50%; animation:queue .35s ease-in-out infinite; }
  @keyframes queue { 50% { transform:rotate(-35deg); } }
  .chien .pa { bottom:0; width:8px; height:18px; border-radius:3px; animation:patte .4s ease-in-out infinite; }
  .chien .pa:nth-of-type(7) { left:20px; } .chien .pa:nth-of-type(8) { left:32px; animation-delay:.2s; }
  .chien .pa:nth-of-type(9) { left:60px; } .chien .pa:nth-of-type(10) { left:70px; animation-delay:.2s; }
  @keyframes patte { 50% { transform:rotate(18deg); } }

  /* Effets */
  .reac { z-index:6; bottom:200px; font-size:34px; line-height:1; pointer-events:none; animation:reac 2.4s ease-out forwards; }
  @keyframes reac { 0% { opacity:0; transform:translateY(20px) scale(.5); } 15% { opacity:1; transform:translateY(0) scale(1.2); } 100% { opacity:0; transform:translateY(-140px) scale(1); } }
  .stk { left:50%; top:40%; z-index:7; padding:8px 18px; border-radius:14px; border:3px solid #000; background:#fff; font-weight:800; font-size:26px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; box-shadow:5px 5px 0 #000; opacity:0; pointer-events:none; transform:translate(-50%, -50%) rotate(-6deg) scale(0); }
  .stk.on { animation:stk 1.6s forwards; }
  .stk.ok { background:#E3EADF; color:var(--lichen); } .stk.ko { background:#F5E0E5; color:var(--rouge); } .stk.info { background:#F8EAD2; color:#8A5A10; }
  @keyframes stk { 0% { opacity:0; transform:translate(-50%, -50%) rotate(-6deg) scale(2); } 12%, 82% { opacity:1; transform:translate(-50%, -50%) rotate(-6deg) scale(1); } 100% { opacity:0; transform:translate(-50%, -50%) rotate(-6deg) scale(.95); } }
  .scene.shake { animation:shake .45s; }
  @keyframes shake { 20% { transform:translateX(-7px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(2px); } }
  .bandeau { top:68px; left:50%; z-index:8; transform:translateX(-50%); padding:7px 14px; border-radius:12px; border:2px solid #000; background:#fff; font-size:14px; font-weight:600; display:none; white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis; }
  .bandeau.on { display:block; animation:up .2s; }

  /* Le dialogue */
  .dlg { position:relative; padding:24px 18px 14px; min-height:122px; cursor:pointer; background:#fff; border:3px solid #000; border-radius:0 0 22px 22px; }
  .plate { position:absolute; top:-19px; left:16px; display:flex; gap:8px; align-items:center; padding:3px 12px; border-radius:10px; background:var(--ambre); border:3px solid #000; font-weight:800; font-size:14px; max-width:calc(100% - 32px); }
  .plate #nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .plate .mood { font-weight:600; font-size:13px; white-space:nowrap; flex-shrink:0; }
  .mine { font-size:13px; color:var(--txt2); margin-bottom:6px; min-height:4px; }
  .mine b { color:var(--bordeaux); margin-right:6px; }
  .txt { font-size:17px; font-weight:500; line-height:1.55; min-height:50px; }
  .dots span { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#000; animation:dot 1s infinite; }
  .dots span:nth-child(2) { animation-delay:.2s; } .dots span:nth-child(3) { animation-delay:.4s; }
  @keyframes dot { 50% { opacity:.2; } }

  /* Lulu, la voisine de stand */
  .lulu { background:#fff; border:3px solid #000; border-radius:22px; display:flex; flex-direction:column; height:534px; overflow:hidden; }
  .lulu .hd { display:flex; gap:10px; align-items:center; padding:10px 12px; border-bottom:2px solid #000; background:var(--rose); }
  .av { flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:#fff; border:2px solid #000; display:flex; align-items:center; justify-content:center; font-size:24px; }
  .lulu .hd b { display:block; font-size:14px; } .lulu .hd span { font-size:11.5px; }
  .msgs { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; background:var(--creme); }
  .msg { background:#fff; border:2px solid #000; border-radius:4px 14px 14px 14px; padding:7px 11px; font-size:13.5px; line-height:1.4; animation:up .25s; }
  .msg .t { display:block; font-size:10.5px; color:var(--txt2); margin-top:2px; }
  .typing { font-size:12px; color:var(--txt2); padding:6px 12px; min-height:30px; background:var(--creme); }
  .notif { position:fixed; top:12px; left:50%; z-index:22; width:min(92vw, 380px); display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:16px; background:#fff; border:3px solid #000; box-shadow:4px 4px 0 var(--rose); transform:translate(-50%, -170%); transition:transform .35s cubic-bezier(.3, 1.3, .5, 1); font-size:13.5px; }
  .notif.on { transform:translate(-50%, 0); }
  .notif b { display:block; font-size:12px; }

  /* Les offres sur la table */
  .fil { margin-top:14px; background:#fff; border:3px solid #000; border-radius:18px; padding:10px 14px 8px; overflow:hidden; }
  .rope { position:relative; height:104px; margin:4px 12px 0; }
  .rope > * { position:absolute; }
  .track { left:0; right:0; top:50px; height:4px; border-radius:2px; background:var(--line); }
  .zopa { top:42px; height:20px; border-radius:8px; background:rgba(87,119,79,.22); border:2px solid var(--lichen); opacity:0; transition:opacity .9s; }
  .floor { top:34px; height:36px; border-left:3px dashed var(--bordeaux); }
  .floor > span { position:absolute; top:22px; right:6px; white-space:nowrap; font-size:10.5px; color:var(--bordeaux); font-weight:700; }
  .floor.gauche > span { right:auto; left:6px; }   /* un plancher près du bord gauche : l'étiquette passe à droite du trait */
  @media (max-width: 900px) { .floor .floorLab { display:none; } }   /* sur téléphone, le montant seul : la légende dit le reste */
  .lim { top:30px; width:4px; height:44px; margin-left:-2px; background:#000; opacity:0; transition:opacity .9s; }
  .mk { top:0; z-index:2; transform:translateX(-50%); text-align:center; white-space:nowrap; opacity:0; transition:left .7s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
  .mk.vu { opacity:1; }
  .mk .tag { font-size:12px; font-weight:800; padding:3px 10px; border-radius:8px; border:2px solid #000; }
  .mk .pin { width:3px; height:24px; margin:0 auto; background:#000; }
  .mk.me .tag { background:var(--ambre); }
  .mk.him { top:52px; } .mk.him .tag { background:var(--rose); }
  .dot { top:47px; width:10px; height:10px; margin-left:-5px; border-radius:50%; border:2px solid #000; }
  .axis { display:flex; justify-content:space-between; font-size:11px; color:var(--txt2); margin:0 12px; }
  .leg { font-size:12.5px; color:var(--txt2); margin-top:4px; }
  .leg b { color:#000; }

  /* Les cartes */
  .hand { display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:8px; margin-top:14px; }
  .card { position:relative; height:170px; padding:10px; border:3px solid #000; border-radius:14px; text-align:left; cursor:pointer; background:#fff; box-shadow:0 4px 0 #000; transition:transform .15s, box-shadow .15s, opacity .2s; }
  .card::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; border-radius:10px 10px 0 0; background:var(--c); }
  .card:hover:not(:disabled) { transform:translateY(-6px) rotate(-1.5deg); box-shadow:0 10px 0 #000; }
  .card .e { font-size:28px; line-height:1; margin-top:6px; }
  .card .fam { position:absolute; top:14px; right:9px; font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--c2); }
  .card .ct { font-weight:800; font-size:14px; margin-top:6px; letter-spacing:-.2px; }
  .card .cd { font-size:11px; color:var(--txt2); margin-top:3px; line-height:1.3; }
  .card .cost { position:absolute; left:10px; bottom:9px; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--beige); }
  .card.batna { background:var(--bordeaux); color:#fff; } .card.batna .cd, .card.batna .fam { color:#F0DCE3; } .card.batna .cost { background:rgba(255,255,255,.2); }
  .card:disabled { opacity:.3; cursor:default; }
  .card.sel { transform:translateY(-8px); box-shadow:0 0 0 3px var(--ambre), 0 10px 0 #000; }
  .cfg { display:none; margin-top:14px; padding:14px 16px; border-radius:18px; background:#fff; border:3px solid #000; box-shadow:5px 5px 0 var(--ambre); }
  .cfg.on { display:block; animation:up .25s; }
  .cfg h4 { font-size:17px; font-weight:800; margin-bottom:8px; }
  .cfg .sub2 { font-size:13px; font-weight:700; margin-top:10px; }
  .price { font-size:42px; font-weight:800; text-align:center; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-1px; }
  .steps, .pills { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 2px; }
  .steps { justify-content:center; }
  .pill { font-size:13px; font-weight:600; border-radius:999px; padding:7px 12px; border:2px solid var(--line); background:var(--creme); cursor:pointer; }
  .pill:hover { border-color:#000; }
  .pill.on { background:#000; border-color:#000; color:var(--creme); }
  .jouer { display:block; width:100%; margin-top:12px; padding:12px 20px; border:3px solid #000; border-radius:999px; background:var(--lichen); color:var(--creme); font-weight:800; font-size:15px; cursor:pointer; }
  .warn { color:var(--rouge); font-weight:600; font-size:13px; margin-top:6px; }
  .event { margin-top:14px; padding:14px; border-radius:18px; background:#fff; border:3px solid #000; box-shadow:5px 5px 0 var(--rose); animation:up .3s; }
  .event .t { font-size:18px; font-weight:800; margin-bottom:10px; }
  .event .rs { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px; }
  .event .rs.cinq { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
  .event button { text-align:left; padding:12px 14px; border-radius:12px; border:2px solid var(--line); background:var(--creme); cursor:pointer; font-size:14px; }
  .event button:hover { border-color:#000; }

  /* ---------- Fin de vente ---------- */
  .end { display:none; margin-top:20px; overflow-x:clip; }   /* le tampon animé ne fait pas déborder la page */
  .end.on { display:block; animation:up .45s; }
  .bilan { text-align:center; background:#fff; border:3px solid #000; border-radius:20px; padding:18px; box-shadow:6px 6px 0 #000; }
  .bilan h2 { font-size:clamp(26px, 5.5vw, 38px); font-weight:800; letter-spacing:-.8px; line-height:1.1; margin:4px 0 6px; }
  .stars { font-size:46px; letter-spacing:6px; color:var(--line); line-height:1.2; }
  .stars span.on { display:inline-block; color:var(--ambre); -webkit-text-stroke:2px #000; animation:pop .45s backwards; }
  .score { font-size:15px; font-weight:700; }
  .score b { font-size:30px; font-variant-numeric:tabular-nums; }
  .crit { font-size:12.5px; color:var(--txt2); margin-top:6px; }
  .duo { display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:center; margin-top:22px; }
  .carnet { position:relative; padding:16px 18px 26px 44px; border-radius:6px; font-size:14px; transform:rotate(-1.2deg); box-shadow:0 12px 26px -14px rgba(0,0,0,.5); background:linear-gradient(90deg, transparent 32px, rgba(200,70,95,.45) 32px 34px, transparent 34px), repeating-linear-gradient(180deg, #FFFDF6 0 27px, #D9E0D3 27px 28px); }
  .carnet .ph { font-weight:800; font-size:15px; margin-bottom:4px; }
  .carnet .row { display:flex; justify-content:space-between; gap:12px; padding:2px 0; line-height:24px; }
  .carnet .row span { color:var(--txt2); flex-shrink:0; } .carnet .row b { text-align:right; }
  .tampon { position:absolute; right:16px; bottom:-16px; max-width:70%; white-space:normal; line-height:1.2; text-align:center; padding:4px 12px; border:3px solid; border-radius:8px; font-weight:800; text-transform:uppercase; letter-spacing:1px; font-size:14px; transform:rotate(-10deg); background:rgba(255,253,246,.92); animation:frappe .5s .9s backwards; }
  .tampon.ok { color:var(--lichen); } .tampon.ko { color:var(--bordeaux); }
  @keyframes frappe { 0% { opacity:0; transform:rotate(-10deg) scale(2.5); } 100% { opacity:1; transform:rotate(-10deg) scale(1); } }
  .flipwrap { perspective:900px; width:100%; max-width:340px; height:300px; margin:0 auto; cursor:pointer; }
  .flip { position:relative; width:100%; height:100%; transition:transform .9s; transform-style:preserve-3d; }
  .flip.on { transform:rotateY(180deg); }
  .flip > div { position:absolute; inset:0; border-radius:16px; padding:16px; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; gap:2px; font-size:12.5px; line-height:1.35; border:3px solid #000; }
  .flip .fr { background:#fff; box-shadow:5px 5px 0 var(--rose); }
  .flip .fr i { font-style:normal; color:var(--txt2); }
  .flip .bk { transform:rotateY(180deg); background:var(--rose); }
  .box { margin-top:18px; padding:14px 16px; border-radius:18px; background:#fff; border:3px solid #000; }
  .box h4 { display:flex; gap:8px; align-items:center; font-size:15px; font-weight:800; margin-bottom:6px; }
  .box .lu { font-size:14px; font-style:italic; color:var(--txt2); margin-bottom:6px; }
  .mo { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .mo:last-child { border-bottom:none; }
  .mo .h { flex:0 0 46px; font-weight:800; color:var(--txt2); font-variant-numeric:tabular-nums; }
  .mo.ok .i { color:var(--lichen); font-weight:800; } .mo.ko .i { color:var(--rouge); font-weight:800; }
  .mo .redo { display:block; font-size:12.5px; color:var(--bordeaux); font-weight:600; margin-top:2px; }
  .btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
  .btn { font-weight:800; font-size:14px; border-radius:999px; padding:10px 18px; border:3px solid #000; background:#fff; cursor:pointer; box-shadow:3px 3px 0 #000; }
  .btn.p { background:var(--lichen); color:var(--creme); }
  /* Le code de la partie (retours de test) : la zone de secours quand le presse-papiers est indisponible */
  .codeMsg { margin-top:8px; }
  .jaugesRaid { margin-top:14px; background:#fff; border:3px solid #000; border-radius:18px; padding:12px 14px; }
  .jaugesRaid .jauges { max-width:none; margin:8px 0 0; }
  .pas { font-size:13px; font-weight:700; margin-top:6px; min-height:1em; }
  .pas .ok { color:var(--lichen); } .pas .ko { color:#B23A48; }
  button.bro { font:inherit; text-align:left; cursor:pointer; color:inherit; }
  .raz { background:none; border:none; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer; }
  .codeMsg textarea { display:block; width:100%; margin-top:6px; font:11px/1.35 Consolas, monospace; border:2px solid #000; border-radius:8px; padding:6px; resize:vertical; word-break:break-all; }

  /* ---------- Badges ---------- */
  .toast:not(.on) { visibility:hidden; transition:transform .45s, visibility 0s .45s; }
  .toast { position:fixed; left:50%; bottom:22px; z-index:31; pointer-events:none; width:max-content; max-width:92vw; display:flex; gap:12px; align-items:center; padding:12px 18px; border-radius:16px; background:#fff; border:3px solid #000; box-shadow:5px 5px 0 var(--ambre); transform:translateX(-50%) translateY(180%); transition:transform .45s cubic-bezier(.3, 1.4, .5, 1); }
  .toast.on { transform:translateX(-50%) translateY(0); }
  .toast .be { font-size:32px; }
  .toast .k { font-size:10.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--txt2); font-weight:700; }
  .toast .n { font-weight:800; font-size:16px; }
  .modal { position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.5); }
  .modal.on { display:flex; }
  .cab { width:100%; max-width:820px; max-height:88vh; overflow-y:auto; padding:18px; border-radius:18px; background:var(--creme); border:3px solid #000; }
  .cab h3 { font-size:24px; font-weight:800; letter-spacing:-.4px; }
  .wall { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px; margin-top:14px; }
  .ens { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background:#fff; border:2px solid #000; }
  .ens .be { font-size:30px; }
  .ens .n { font-weight:800; font-size:14px; } .ens .d { font-size:12px; color:var(--txt2); }
  .ens.lock { border-color:var(--line); } .ens.lock .be { filter:grayscale(1); opacity:.35; } .ens.lock .n { color:var(--txt2); }
  .ranks { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
  .ranks span { font-size:12px; padding:3px 10px; border-radius:999px; border:2px solid var(--line); color:var(--txt2); background:#fff; }
  .ranks span.on { border-color:#000; color:#000; font-weight:700; }

  /* ---------- Défi, réputation, bilan en trois jauges ---------- */
  .regleB { margin-top:10px; padding:10px 12px; border-radius:12px; background:#fff; border:2px solid #000; font-size:13.5px; line-height:1.45; }
  .regleB .lab { margin:0 0 4px; }
  .regleB .obj2 { margin-top:6px; padding-top:6px; border-top:1px dashed #000; }
  .prog { margin-top:22px; background:#fff; border:2px solid #000; border-radius:14px; padding:10px 14px; }
  .prog summary { cursor:pointer; font-size:14.5px; }
  .prog .ligne { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:7px 0; border-top:1px dashed #ccc; font-size:13.5px; }
  .prog .ligne:first-of-type { margin-top:8px; }
  .prog .ligne.lock { opacity:.5; }
  .prog .et { color:var(--ambre); letter-spacing:1px; }
  .prog .defi { color:var(--txt2); }
  .prog .st { text-align:right; font-weight:700; color:var(--txt2); } .prog .st.ok { color:var(--lichen); }
  .science .ref { color:var(--txt2); font-size:12px; }
  .science .sol { font-size:11.5px; color:var(--lichen); font-weight:700; margin-left:6px; }
  .colB { margin-top:22px; }
  .album { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; margin-top:14px; }
  .carteP { padding:12px; border-radius:14px; background:#fff; border:2px solid #000; font-size:13px; }
  .carteP .pt { width:86px; height:86px; margin:0 auto 6px; font-size:40px; text-align:center; line-height:86px; }
  .carteP .pt svg { width:100%; height:100%; display:block; }
  .carteP .n { font-weight:800; font-size:15px; text-align:center; } .carteP .m { text-align:center; color:var(--lichen); font-weight:700; margin-bottom:6px; }
  .carteP .d { color:var(--txt2); margin-top:3px; } .carteP .ph { font-style:italic; margin-top:6px; } .carteP .sep { border-top:1px dashed #ccc; padding-top:6px; margin-top:8px; }
  .carteP.verrou .pt { filter:grayscale(1); opacity:.5; } .carteP.inconnu { opacity:.55; } .carteP.pro { border-color:var(--bordeaux, #5a2a3c); }
  .niveauJ { margin:10px 0 14px; padding:12px 14px; border:2px solid #000; border-radius:14px; background:#fff; }
  .niveauJ .nl { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; } .niveauJ .nl span { color:var(--txt2); font-size:13px; }
  .niveauJ .barre { position:relative; height:14px; margin:8px 0; border:2px solid #000; border-radius:999px; background:var(--beige); overflow:hidden; }
  .niveauJ .barre i { position:absolute; left:0; top:0; bottom:0; background:var(--ambre); border-radius:999px; }
  .niveauJ .barre em { position:absolute; top:0; bottom:0; width:2px; background:rgba(0,0,0,.35); }
  .niveauJ .parts { display:flex; gap:6px 14px; flex-wrap:wrap; font-size:12px; color:var(--txt2); }
  .repuJ .barre em.seuil { width:3px; background:var(--rouge); }
  .carteO, .carteP[data-nom] { cursor:pointer; } .carteO .pt img { width:64px; height:64px; margin:11px auto; display:block; } .carteO.inconnu .pt img { filter:grayscale(1); opacity:.4; } .carteO.rossignolO .pt img { filter:grayscale(.5); opacity:.75; } .carteO.rossignolO .d { color:var(--bordeaux); font-weight:700; }
  .cab.fiche { max-width:620px; } .ficheT { display:flex; gap:14px; align-items:center; } .ficheT .pt { width:110px; height:110px; flex:none; font-size:48px; text-align:center; line-height:110px; font-weight:800; color:var(--txt2); }
  .ficheT .pt svg, .ficheT .pt img { width:100%; height:100%; display:block; }
  .ficheT h3 { margin:0 0 4px; } .cab.fiche .m { color:var(--lichen); font-weight:700; } .cab.fiche .ph { font-style:italic; } .cab.fiche .ligneF { margin:10px 0; font-size:13px; }
  .grilleF.haut { align-items:start; }   /* les fiches du carnet : chaque case à sa hauteur */
  .grilleF { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; margin-top:10px; font-size:13px; } .grilleF div { padding:10px; border:2px solid var(--line); border-radius:12px; background:#fff; } .grilleF b { display:block; margin-bottom:3px; }
  .histoires { margin-top:12px; padding:10px 12px; border:2px dashed var(--line); border-radius:12px; background:#FFFDF8; font-size:13px; } .histoires b { display:block; margin-bottom:2px; }
  .histoires p { margin:6px 0 0; } .histoires p.lock { color:var(--txt2); font-style:italic; } .histoireB p { margin:6px 0 8px; font-size:14px; line-height:1.5; }
  .histoireB .hint { margin:-4px 0 12px; } .histoireB .hint:last-child { margin-bottom:0; } .liens p b { display:inline; margin:0; } .histoires + .hint { margin-top:12px; }
  .sceneMois { margin:6px 0 10px; font-style:italic; color:var(--txt2); line-height:1.5; }   /* la scène du mois, la voix du narrateur */
  .radarL { display:grid; grid-template-columns:1fr auto 40px; gap:10px; align-items:center; font-size:13px; padding:4px 0; border-bottom:1px dashed var(--line); }
  .radarL .pts { display:flex; gap:4px; } .radarL .pts i { width:18px; height:12px; border-radius:4px; border:2px solid #000; background:#fff; } .radarL .pts i.on { background:var(--lichen); } .radarL .pts i.na { border-style:dashed; border-color:#bbb; }
  .radarL b { text-align:right; }
  .carnetL { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; margin:10px 0 6px; }
  .conseilC { padding:12px; border-radius:14px; background:#fff; border:2px solid #000; font-size:13px; } .conseilC .n { font-weight:800; margin-bottom:4px; } .conseilC.lock { opacity:.55; border-color:#bbb; }
  /* Le carnet par thèmes : chaque carte est un bouton (sa fiche au clic) ; le souvenir de Lulu en tête du thème ; les témoignages sur la fiche */
  button.conseilC { display:block; width:100%; text-align:left; font:inherit; font-size:13px; color:inherit; cursor:pointer; line-height:1.4; } button.conseilC > span { display:block; }
  button.conseilC:hover, button.conseilC:focus-visible { box-shadow:3px 3px 0 #000; } button.conseilC.lock:hover, button.conseilC.lock:focus-visible { box-shadow:3px 3px 0 #bbb; }
  .souvenir { margin:6px 0 2px; padding:10px 12px; border-left:4px solid var(--rose); border-radius:0 12px 12px 0; background:#FFFDF8; font-size:13px; font-style:italic; line-height:1.5; }
  .souvenir > b:first-child { display:block; font-style:normal; margin-bottom:2px; } .souvenir.lock { color:var(--txt2); border-left-color:#bbb; } .cab.fiche .souvenir { margin-top:12px; }
  .temoin { margin-top:12px; padding:10px 12px; border:2px dashed var(--line); border-radius:12px; background:#fff; font-size:13px; line-height:1.5; } .temoin > b:first-child { display:block; margin-bottom:2px; }
  .temoin .nuance { display:block; margin-top:4px; color:var(--txt2); font-size:12px; } .temoin.ecole { border-style:solid; } .temoinB { margin:10px 0 0; font-size:14px; }
  .albumT { grid-column:1 / -1; font-weight:800; font-size:16px; margin-top:8px; } .albumT span { display:block; font-weight:400; font-size:13px; color:var(--txt2); } .carteP.inconnu .pt { font-weight:800; color:var(--txt2); }
  .pill.lock { opacity:.55; cursor:default; }
  .manque { margin:4px auto 6px; max-width:560px; font-size:14px; color:var(--rouge); }
  .defiB { margin-top:10px; padding:8px 12px; border-radius:12px; background:#FFF3C4; border:2px dashed #000; font-size:13.5px; }
  .repB { margin-top:12px; font-size:13px; color:var(--txt2); }
  .jauges { display:grid; gap:6px; max-width:470px; margin:12px auto 0; text-align:left; }
  .jauges > div { display:grid; grid-template-columns:132px 1fr 48px; gap:10px; align-items:center; font-size:13px; font-weight:600; }
  .jauges i { height:12px; border-radius:99px; border:2px solid #000; background:linear-gradient(90deg, var(--c) var(--v), #fff var(--v)); }
  .jauges b { text-align:right; font-variant-numeric:tabular-nums; }
  .miroir { display:flex; gap:14px; align-items:center; margin-top:16px; padding:12px 16px; border-radius:16px; background:#fff; border:3px solid #000; box-shadow:4px 4px 0 var(--lichen); }
  .miroir .e { font-size:36px; line-height:1; }
  .miroir b { display:block; font-size:16px; }
  .miroir div span { font-size:13.5px; color:var(--txt2); }
  .defiR { margin-top:10px; padding:9px 14px; border-radius:12px; border:2px dashed var(--line); font-size:13.5px; background:#fff; }
  .defiR.ok { border-color:#000; background:#FFF3C4; }
  .record { display:inline-block; margin-top:6px; padding:3px 10px; border-radius:999px; background:#000; color:var(--creme); font-size:12.5px; font-weight:800; }

  /* ---------- Téléphone ---------- */
  @media (max-width:900px) {
    .main { grid-template-columns:1fr; } .lulu { display:none; }
    .hand { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 12px; }
    .card { flex:0 0 122px; scroll-snap-align:start; }
    .next { grid-template-columns:1fr; } .cote { position:static; } .reglages { grid-template-columns:1fr; }
    .goBar { flex-direction:column; align-items:stretch; text-align:center; gap:8px; } .goBar .go { padding:13px 18px; font-size:16px; } .goBar .goT { font-size:12.5px; }
    .bulleLulu { margin-left:0; max-width:none; width:100%; } .auvent { height:22px; } .clientJ .pt { width:68px; height:68px; line-height:62px; }
    .howto { grid-template-columns:1fr; } .brief { padding:16px 16px; }
  }
  /* Les négociations de crise : un décor sobre à la place de la brocante (affichage/decors.js, DECORS_CRISE) */
  .crise, .crise-avant { display:none; inset:0; pointer-events:none; }
  .scene.en-crise { background:#2A2D33; }
  .scene.en-crise > *:not(.crise):not(.crise-avant):not(.peep):not(.stk):not(.bandeau):not(.reac) { display:none !important; }
  .scene.en-crise .crise, .scene.en-crise .crise-avant { display:block; }
  .scene.en-crise.sans-visage .peep { display:none; }
  .crise > *, .crise-avant > * { position:absolute; }
  .crise.telephone { background:radial-gradient(ellipse at 50% 42%, #3B4048 0%, #23262B 72%); }
  .cr-tel { left:50%; top:50%; transform:translate(-50%, -54%); width:min(360px, 82%); padding:18px 18px 14px; border-radius:22px; background:#15171B; border:2px solid #4A505A; color:#E8E6E1; text-align:center; box-shadow:0 18px 40px rgba(0,0,0,.35); }
  .cr-h { font-weight:700; font-size:15px; letter-spacing:.2px; }
  .cr-onde { display:flex; align-items:center; justify-content:center; gap:4px; height:70px; margin:14px 0 10px; }
  .cr-onde i { width:5px; height:var(--h); border-radius:3px; background:#C9A86A; transform:scaleY(.12); transition:transform .3s; }
  .scene.parle .cr-onde i { animation:onde .42s ease-in-out var(--d) infinite alternate; }
  @keyframes onde { from { transform:scaleY(.25); } to { transform:scaleY(1); } }
  .cr-b { font-size:12px; color:#A3A7AE; }
  .cr-notes { left:22px; top:22px; display:flex; flex-direction:column; gap:10px; }
  .cr-notes i { font-style:normal; font-size:12.5px; font-weight:600; color:#2A2D33; background:#E6D8A8; padding:6px 10px; border-radius:3px; transform:rotate(-2deg); box-shadow:0 3px 8px rgba(0,0,0,.3); }
  .cr-notes i:nth-child(2) { transform:rotate(1.5deg); }
  .crise.reunion { background:linear-gradient(180deg, #E9E5DE 0%, #DCD6CC 78%, #BFB7AA 78%, #B3AB9E 100%); }
  .cr-fenetre { right:6%; top:36px; width:210px; height:150px; border:7px solid #B9B2A6; background:repeating-linear-gradient(180deg, #F4F2ED 0 9px, #CFC9BE 9px 11px); }
  .cr-paper { left:6%; top:30px; width:160px; height:200px; padding:14px 14px; background:#FBFAF7; border:3px solid #8C857A; display:flex; flex-direction:column; gap:8px; font-family:"Segoe Print", "Comic Sans MS", cursive; color:#6E2B3A; font-size:15px; }
  .cr-paper b { font-size:14px; color:#3A3D42; }
  .cr-horloge { left:50%; top:18px; width:40px; height:40px; margin-left:-20px; border-radius:50%; background:#fff; border:3px solid #6B655C; }
  .cr-horloge::after { content:""; position:absolute; left:50%; top:6px; width:2px; height:14px; background:#3A3D42; transform-origin:50% 100%; transform:rotate(40deg); }
  .cr-table { left:4%; right:4%; bottom:0; height:74px; background:#5B4636; border-top:7px solid #73594A; }
  .cr-table i { position:absolute; display:block; }
  .cr-table .p1 { left:22%; top:12px; width:70px; height:46px; background:#F7F5F0; transform:rotate(-6deg); }
  .cr-table .p2 { right:26%; top:14px; width:64px; height:44px; background:#ECE8E0; transform:rotate(4deg); }
  .cr-table .st { right:22%; top:28px; width:46px; height:5px; background:#1F2226; border-radius:2px; transform:rotate(-14deg); }
  .crise.messagerie { background:linear-gradient(180deg, #24272D, #1A1C20); }
  .cr-ecran { left:50%; top:22px; transform:translateX(-50%); width:min(560px, 88%); height:290px; border:10px solid #2E3238; border-radius:14px; background:#0F1114; color:#D7D9DC; font-family:Consolas, "Courier New", monospace; font-size:14px; padding:0 0 12px; overflow:hidden; }
  .cr-barre { display:flex; justify-content:space-between; gap:10px; padding:8px 12px; background:#1C1F24; font-size:12px; color:#A3A7AE; }
  .cr-barre b { color:#D06A72; font-weight:700; }
  .cr-msg { position:relative; display:block; width:fit-content; max-width:80%; margin:12px 14px 0; padding:8px 12px; border-radius:10px; background:#23272E; }
  .cr-msg:nth-of-type(2) { color:#E7A1A7; font-weight:700; }
  .cr-ecrit { display:flex; gap:5px; opacity:0; transition:opacity .2s; }
  .cr-ecrit i { width:7px; height:7px; border-radius:50%; background:#A3A7AE; animation:dot 1s infinite; }
  .cr-ecrit i:nth-child(2) { animation-delay:.15s; } .cr-ecrit i:nth-child(3) { animation-delay:.3s; }
  .scene.parle .cr-ecrit { opacity:1; }
  .cr-pied { left:50%; top:330px; width:120px; height:40px; margin-left:-60px; background:#2E3238; clip-path:polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
  @media (max-width:640px) {
    .scene { height:330px; }
    .char { --s:.86; left:56%; }
    .peep { width:196px; height:196px; left:58%; }
    .has-peeps .lulu-scene { display:none; }
    .cr-notes, .cr-fenetre { display:none; } .cr-paper { width:118px; height:150px; font-size:12px; } .cr-ecran { height:240px; } .cr-pied { top:282px; }
    .has-peeps .bric { right:3%; }
    .objet { left:3%; width:72px; height:72px; } .etiq { left:calc(3% + 66px); bottom:108px; font-size:13px; }
    .bric { right:3%; } .bric img { width:30px; height:30px; } .bric img:nth-child(2) { width:26px; height:26px; } .caisse { display:none; }
    .arbre { display:none; } .soleil { width:54px; height:54px; }
    .passant { width:92px; height:92px; } .passant .parapluie { width:80px; margin-left:-40px; top:-40px; }
    .txt { font-size:15.5px; }
    .stk { font-size:19px; }
    .duo { grid-template-columns:1fr; }
    .jauges > div { grid-template-columns:112px 1fr 44px; }
    .hud .where { order:5; flex-basis:100%; }
  }
  @media (prefers-reduced-motion: reduce) { .scene.parle .cr-onde i { animation:none; transform:scaleY(.6); } .bob, .eye, .fanions i, .chien .qu, .chien .pa, .nuage, .flaque::after { animation:none; } .pluie, .foule { display:none !important; } }
  /* « Et dans la vraie vie ? » et le quiz de Lulu (lot 7 bis) */
  .vvS { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 12px; font-size:14px; line-height:1.5; } .vvS b { display:block; margin-bottom:2px; }
  .vvR { display:flex; flex-direction:column; gap:6px; margin-top:6px; } .vvR .pill { text-align:left; border-radius:12px; line-height:1.4; } .vvR .pill:disabled { cursor:default; }
  .vvR .pill.ko { opacity:.6; text-decoration:line-through; } .vvR .pill.on { background:var(--lichen); border-color:var(--lichen); color:#fff; } .vvF p { margin:10px 0 4px; } .vvF .lu { font-style:italic; } .quizQ .qs { font-size:15px; line-height:1.5; margin:8px 0 4px; }
  .colB .tuile.large { grid-column:1 / -1; }
  @media (max-width:640px) { .vvS { grid-template-columns:1fr; } }
  /* Le cabinet « Plantage et Associés » (lot 9) : l'embranchement du chemin ; l'autopsie (la scène, les étapes, la comparaison des coups) */
  .rangee.s-cabinet { --fond:var(--beige); } .branche.cabinet .rangee { background:var(--beige); } .branche.cabinet .noeud .et, .branche.cabinet .noeud .nm { background:var(--beige); }
  .autopsie .cache { display:none; } .autopsie .etape { margin-top:14px; } .autopsie .scAuto { background:var(--creme); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; line-height:1.5; }
  .autopsie .scAuto div + div { margin-top:4px; } .autopsie .pari { margin:6px 0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .autopsie .vvR .pill.vu { outline:2px solid var(--ambre); }
  .cmp { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; } .cmp > div { background:var(--creme); border:1px solid var(--line); border-radius:12px; padding:8px 10px; }
  .cmp .dit { margin:4px 0; font-style:italic; } .cmp .vals div { display:flex; justify-content:space-between; gap:8px; font-size:13px; } .cmp .vals div.m b { color:var(--lichen); }
  .autopsie .verdict { margin:8px 0 0; font-weight:700; } .autopsie .verdict.ok { color:var(--lichen); }
  @media (max-width:520px) { .cmp { grid-template-columns:1fr; } }
  .grilleF .mo { padding:6px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; } .grilleF .mo:last-child { border-bottom:0; } .grilleF .mo b { display:inline; }   /* les étoiles d'un associé, sur sa carte */
  .mo .h.ic.on { color:var(--ambre); }   /* une étoile gagnée */
  .cabRegles { background:#fff; border:2px dashed var(--line); border-radius:14px; padding:10px 14px; margin:2px 0 12px; font-size:14px; line-height:1.45; }   /* les règles du cabinet (interface.js, encartCabinet) */
  .nomCab { white-space:nowrap; } @media (max-width:380px) { .nomCab { white-space:normal; } }   /* un nom du cabinet, entier (interface.js, nomI) */
  .mo .h.ic { flex-basis:24px; }   /* une icône seule, pas une heure : la colonne étroite laisse la place au texte sur téléphone */