/* ============================================================
     Charte Loufoque — carnet de croquis (lot UX 2026-05-26)
     - Manrope (400/500/700) : tout le corps, UI, mots russes, traductions
     - Caveat : UNIQUEMENT touches manuscrites (streak, "tes niveaux ↓",
       kickers du héro, brand placeholder). Jamais pour info critique ni boutons.
     - Sentence case partout. Pas d'ALL CAPS. Pas de tiret cadratin en FR.
     - Codage grammatical : verbe=charbon, nom=turquoise, adj=tangerine, autre=jaune
     - Accent tonique russe = framboise (très saillant sur la voyelle)
     - Cartes : légèrement inclinées, ombres dures "sticker découpé", contours
       au feutre 2-2.5px charbon. C'est la signature visuelle.

     NB SUR LES NOMS DE VARIABLES :
     Les variables historiques (--marine, --blue, --terre) sont conservées mais
     leur VALEUR pointe maintenant vers la nouvelle palette (framboise, turquoise,
     tangerine). Ça évite un refactor de 200 callsites. Les alias modernes
     (--framboise, --turquoise…) sont disponibles pour tout nouveau code.
     ============================================================ */
  :root{
    /* Surfaces et neutres */
    --bg:#FCF8F0;            /* crème chaud, fond principal */
    --surface:#FFFFFF;        /* blanc, surface des cartes d'étude */
    --mist:#F0E8D8;           /* mist plus chaleureux pour les zones secondaires */
    --line:#E5DCC8;           /* trait clair (séparateurs, contours discrets) */
    --ink:#2D2A32;            /* charbon chaud, texte + contours feutre */
    --ink-soft:#7A7480;       /* charbon adouci */

    /* Accents Loufoque */
    --framboise:#E84A6F;      --framboise-d:#C03056;  --framboise-soft:#FCE3EA;
    --turquoise:#2EC4B6;      --turquoise-d:#1F948A;  --turquoise-soft:#D5F1ED;
    --tangerine:#FF8C42;      --tangerine-d:#CB6824;  --tangerine-soft:#FFE2CC;
    --jaune:#F5B82E;          --jaune-d:#C99211;       --jaune-soft:#FBEED0;
    --vert:#3AA66B;           --vert-soft:#DFF3E8;
    --rouge:#E25555;          --rouge-soft:#FBE6E6;

    /* Alias rétro-compatibles pour le code existant. Mappent vers la nouvelle palette. */
    --marine:var(--framboise);          --marine-d:var(--framboise-d);
    --marine-soft:var(--framboise-soft);
    --blue:var(--turquoise);            --blue-soft:var(--turquoise-soft);
    --terre:var(--tangerine);           --terre-d:var(--tangerine-d);
    --terre-soft:var(--tangerine-soft);

    /* Ombres : SIGNATURE — dure "sticker découpé", offset franc, pas de flou */
    --shadow-sketch:    2px 3px 0 var(--ink);
    --shadow-sketch-lg: 4px 5px 0 var(--ink);
    --shadow-sketch-sm: 1px 2px 0 var(--ink);
    /* Ombres douces conservées pour quelques contextes où le sticker shadow
       ne convient pas (overlays, modales, vignettes flottantes) */
    --shadow:    0 4px 16px rgba(45,42,50,.10),0 1px 3px rgba(45,42,50,.06);
    --shadow-lg: 0 18px 40px rgba(232,74,111,.18),0 6px 16px rgba(45,42,50,.08);

    /* Contours feutre standardisés */
    --border-sketch: 2.5px solid var(--ink);
    --border-sketch-thin: 2px solid var(--ink);
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
  body.no-scroll{overflow:hidden}

  /* Utilitaire manuscrit — Caveat, à appliquer en petites doses */
  .handwriting{font-family:'Caveat','Manrope',cursive;font-weight:700;letter-spacing:.005em}
  .app{max-width:440px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative}
  .screen{display:none;flex-direction:column;flex:1;animation:fade .35s ease both}
  .screen.active{display:flex}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* top bars */
  .hd{padding:calc(20px + env(safe-area-inset-top)) 20px 12px;position:sticky;top:0;background:var(--bg);z-index:20}
  .hd-row{display:flex;align-items:center;gap:12px}
  /* Cadavre en partie : header ne montre QUE le cœur (cliquable) ; le reste en popup. */
  .hd-game{margin-left:auto;display:flex;align-items:center}
  .hd-game:empty{display:none}
  .cdv-hud-btn{border:var(--border-sketch-thin);background:#fff;border-radius:12px;padding:6px 13px;box-shadow:var(--shadow-sketch-sm);cursor:pointer;line-height:1}
  .cdv-hud-btn .cdv-hearts{font-size:18px;line-height:1}
  .cdv-hud-pop-backdrop{position:fixed;inset:0;background:rgba(20,18,25,.28);z-index:60;display:flex;align-items:flex-start;justify-content:flex-end;padding:calc(62px + env(safe-area-inset-top)) 16px 0}
  .cdv-hud-pop{background:#fff;border:var(--border-sketch);border-radius:16px;box-shadow:var(--shadow-sketch);padding:12px;display:flex;flex-direction:column;gap:10px;min-width:230px}
  .cdv-hud-pop .cdv-hud{position:static;background:none;backdrop-filter:none;padding:0;top:auto}
  .cdv-quit-pop{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:800;color:var(--ink-soft);cursor:pointer}
  /* En partie : on masque le sous-titre pour un header net. */
  .hd--game .hd-sub{display:none}
  .back{width:38px;height:38px;border-radius:12px;background:var(--mist);border:none;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:transform .12s}
  .back:active{transform:scale(.92)}
  .back svg{width:18px;height:18px;stroke:var(--ink)}
  .hd-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.015em;line-height:1.1;color:var(--marine)}
  .hd-sub{font-size:13px;color:var(--ink-soft);margin-top:2px}

  /* ---- HOME ---- */
  .home-hero{padding:8px 20px 18px}
  .home-hero .big{font-family:'Manrope',sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;line-height:1.05;color:var(--marine)}
  .home-hero .big .acc{color:var(--blue)}
  .home-hero .tag{font-size:14px;color:var(--ink-soft);margin-top:6px}
  .global-bar{margin-top:16px;height:10px;background:var(--mist);border-radius:10px;overflow:hidden}
  .global-fill{height:100%;background:linear-gradient(90deg,var(--marine),var(--blue));border-radius:10px;width:0;transition:width .6s cubic-bezier(.2,.8,.2,1)}
  .global-lbl{font-size:12px;color:var(--ink-soft);margin-top:7px;font-weight:600}

  .list{padding:4px 20px 30px;display:flex;flex-direction:column;gap:12px}
  .lvl-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);transition:transform .14s,box-shadow .2s}
  .lvl-card:active{transform:scale(.985)}
  .lvl-card.done{background:linear-gradient(160deg,var(--vert-soft),#fff);border-color:#C5E5D2}
  .lvl-num{width:48px;height:48px;border-radius:14px;background:var(--marine-soft);color:var(--marine);font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;display:grid;place-items:center;flex-shrink:0}
  .lvl-card.done .lvl-num{background:var(--vert-soft);color:var(--vert)}
  .lvl-info{flex:1;min-width:0}
  .lvl-info .t{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:var(--marine)}
  .lvl-info .s{font-size:13px;color:var(--ink-soft);margin-top:2px}
  .lvl-mini{height:6px;background:var(--mist);border-radius:6px;overflow:hidden;margin-top:9px}
  .lvl-mini i{display:block;height:100%;background:var(--marine);border-radius:6px}
  .lvl-card.done .lvl-mini i{background:var(--vert)}
  .lvl-check{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--vert);display:none;place-items:center}
  .lvl-card.done .lvl-check{display:grid}
  .lvl-check svg{width:15px;height:15px;stroke:#fff;stroke-width:3}
  .chev{width:18px;height:18px;stroke:var(--ink-soft);flex-shrink:0}

  /* ---- LEVEL (5 sublevels) ---- */
  .sub-list{padding:8px 20px 30px;display:flex;flex-direction:column;gap:14px}
  .sub-card{background:#fff;border:var(--border-sketch-thin);border-radius:18px;padding:17px 19px;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transition:transform .14s,box-shadow .14s,background .2s;position:relative;overflow:hidden}
  .sub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:transparent;transition:background .25s}
  .sub-card:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .sub-card:active{transform:translate(1px,1px);box-shadow:none}
  .sub-top{display:flex;align-items:center;gap:14px}
  .sub-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;font-size:20px;background:var(--marine-soft);color:var(--marine);border:1.5px solid transparent;transition:background .25s,border-color .25s}
  .sub-card.idle .sub-ico{background:var(--mist);color:var(--ink-soft)}
  .sub-card.done{background:linear-gradient(140deg,var(--vert-soft) 0%,#fff 75%)}
  .sub-card.done::before{background:var(--vert)}
  .sub-card.done .sub-ico{background:var(--vert);color:#fff;border-color:var(--ink)}
  .sub-meta{flex:1;min-width:0}
  .sub-meta .t{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;color:var(--marine)}
  .sub-meta .ru-t{font-family:'Manrope',sans-serif;color:var(--marine);font-weight:700}
  .sub-card.done .sub-meta .ru-t,
  .sub-card.done .sub-meta .t{color:var(--vert)}
  .sub-meta .s{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
  .badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--mist);color:var(--ink-soft)}
  .badge.ok{background:var(--vert-soft);color:var(--vert)}
  .badge.go{background:var(--marine-soft);color:var(--marine)}
  .sub-steps{display:flex;gap:6px;margin-top:13px}
  .step{flex:1;height:6px;border-radius:6px;background:var(--mist)}
  .step.fill{background:var(--marine)}
  .step.story{background:var(--jaune)}

  /* ---- STUDY ---- */
  .legend{display:flex;gap:13px;padding:2px 20px 8px;font-size:11.5px;font-weight:600;color:var(--ink-soft);flex-wrap:wrap}
  .legend span{display:flex;align-items:center;gap:5px}
  .dot{width:9px;height:9px;border-radius:50%}
  /* Codage grammatical (charte Loufoque) :
     verbe = charbon (autorité), nom = turquoise, adj = tangerine, autre = moutarde */
  .dot.v{background:var(--ink)}
  .dot.n{background:var(--turquoise)}
  .dot.a{background:var(--tangerine)}
  .dot.x{background:var(--jaune-d)}
  .stage{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 20px}
  .mnemo{padding:0 0 14px;animation:fade .3s ease both}
  .mnemo-lbl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--terre);margin-bottom:7px;letter-spacing:.01em}
  .mnemo-lbl svg{width:15px;height:15px}
  .mnemo-input-wrap{position:relative}
  .mnemo-input{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:13px 88px 13px 15px;font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s;outline:none}
  .mnemo-input::placeholder{color:#B6B0A1}
  .mnemo-input:focus{border-color:var(--terre);box-shadow:0 0 0 3px var(--terre-soft)}
  .mnemo-input.saved{border-color:var(--terre);background:linear-gradient(0deg,var(--terre-soft),#fff)}
  /* Coche de confirmation à droite : cachée tant que le champ est vide,
     apparaît en vert quand le mnémo est dans le user_v1. */
  .mnemo-check{position:absolute;right:8px;top:50%;transform:translateY(-50%) scale(.7);width:34px;height:34px;border:none;border-radius:50%;background:var(--vert);color:#fff;display:none;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(58,166,107,.32);transition:transform .2s cubic-bezier(.34,1.56,.5,1),opacity .15s}
  .mnemo-check.visible{display:grid;transform:translateY(-50%) scale(1)}
  .mnemo-check:active{transform:translateY(-50%) scale(.92)}
  .mnemo-check svg{width:16px;height:16px}
  .mnemo-check.pulse{animation:checkPulse .55s cubic-bezier(.34,1.56,.5,1)}
  @keyframes checkPulse{
    0%   {transform:translateY(-50%) scale(1);box-shadow:0 4px 10px rgba(58,166,107,.32)}
    40%  {transform:translateY(-50%) scale(1.18);box-shadow:0 6px 18px rgba(58,166,107,.5)}
    100% {transform:translateY(-50%) scale(1);box-shadow:0 4px 10px rgba(58,166,107,.32)}
  }

  /* ============================================================
     MNEMO IMAGE GENERATION v2 (lot 8 v2 — modale plein écran)
     ============================================================ */
  /* Petit bouton-icône à gauche de la coche save, dans le champ mnémo.
     Apparait dès que le mnémo n'est pas vide. Dot indicator visible
     quand une illustration validée existe déjà pour ce mot. */
  .mnemo-imggen-icon{position:absolute;right:46px;top:50%;transform:translateY(-50%) scale(.7);width:34px;height:34px;border:none;border-radius:50%;background:linear-gradient(135deg, var(--terre), var(--terre-d));color:#fff;display:none;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(224,122,63,.34);transition:transform .2s cubic-bezier(.34,1.56,.5,1),filter .15s,opacity .15s}
  .mnemo-imggen-icon.visible{display:grid;transform:translateY(-50%) scale(1)}
  .mnemo-imggen-icon:active{transform:translateY(-50%) scale(.94)}
  .mnemo-imggen-icon:hover{filter:brightness(1.08)}
  .mnemo-imggen-icon svg{width:16px;height:16px}
  /* Dot indicator : signale "une illustration est validée pour ce mot" */
  .mnemo-imggen-icon-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--vert);border:2px solid var(--bg);box-shadow:0 1px 3px rgba(58,166,107,.4);opacity:0;transition:opacity .2s}
  .mnemo-imggen-icon-dot.on{opacity:1}

  /* Lock body scroll while modal is open */
  body.no-scroll{overflow:hidden}

  /* Modale plein écran de génération */
  .imggen-overlay{padding:20px;background:rgba(27,36,48,.55);backdrop-filter:blur(5px)}
  .imggen-card{background:var(--bg);border-radius:24px;padding:22px 22px 18px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:14px;box-shadow:0 40px 100px rgba(27,36,48,.4);animation:pop .35s cubic-bezier(.34,1.56,.5,1);max-height:calc(100vh - 40px);overflow-y:auto}

  .imggen-header{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .imggen-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--marine);letter-spacing:-.01em}
  .imggen-close{width:32px;height:32px;border:none;border-radius:50%;background:var(--mist);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,transform .12s}
  .imggen-close:active{transform:scale(.92)}
  .imggen-close:hover{background:var(--line);color:var(--marine)}
  .imggen-close svg{width:14px;height:14px}

  /* Aperçu du mnémo source */
  .imggen-mnemo-preview{font-family:'Manrope',sans-serif;font-style:italic;font-size:13.5px;color:var(--terre-d);background:var(--terre-soft);border-radius:12px;padding:10px 14px;line-height:1.5;text-align:center}

  /* Stage carré qui contient l'un des 3 états */
  .imggen-stage{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;place-items:center}

  /* Loading */
  .imggen-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px;text-align:center}
  .imggen-spinner-big{width:48px;height:48px;border:5px solid rgba(224,122,63,.18);border-top-color:var(--terre);border-radius:50%;animation:spin 1s linear infinite}
  .imggen-loading-lbl{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:var(--marine)}
  .imggen-loading-sub{font-family:'Manrope',sans-serif;font-size:12.5px;color:var(--ink-soft);font-style:italic}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Result : l'image */
  .imggen-result{position:absolute;inset:0;display:grid;place-items:center}
  .imggen-image{width:100%;height:100%;object-fit:cover}

  /* Error */
  .imggen-error{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px;text-align:center}
  .imggen-error-emoji{font-size:38px;line-height:1}
  .imggen-error-lbl{font-family:'Manrope',sans-serif;font-size:13.5px;color:#9A3A3A;line-height:1.5;max-width:280px}

  /* Footer actions : 2 colonnes × 2 lignes (Annuler/Recommencer puis Valider/Partager) */
  .imggen-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  .imggen-btn{border:none;border-radius:12px;padding:12px 12px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s,background .15s,color .15s,opacity .15s}
  .imggen-btn:active{transform:scale(.96)}
  .imggen-btn:disabled{opacity:.4;cursor:not-allowed}
  .imggen-btn svg{width:15px;height:15px}
  .imggen-btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
  .imggen-btn-ghost:hover:not(:disabled){background:var(--mist);color:var(--ink)}
  .imggen-btn-secondary{background:var(--terre-soft);color:var(--terre-d)}
  .imggen-btn-secondary:hover:not(:disabled){background:var(--terre);color:#fff}
  .imggen-btn-primary{background:var(--vert);color:#fff;box-shadow:0 6px 14px rgba(58,166,107,.28)}
  .imggen-btn-primary:hover:not(:disabled){background:#2F8F58}
  .imggen-btn-share{background:var(--turquoise-soft);color:var(--turquoise);border:2px solid var(--turquoise)}
  .imggen-btn-share:hover:not(:disabled){background:var(--turquoise);color:#fff}
  .imggen-btn-danger{background:#9A3A3A;color:#fff;border:2px solid #6F2828;box-shadow:0 6px 14px rgba(154,58,58,.28)}
  .imggen-btn-danger:hover:not(:disabled){background:#6F2828}
  .rgpd-warning{background:#FCE3E7;border:1.5px solid #D89B9B;border-radius:10px;padding:10px 14px;color:#5e1f1f;font-weight:600}

  /* === Modales partage social (lot 9) ================================ */
  .share-overlay{padding:20px;background:rgba(27,36,48,.55);backdrop-filter:blur(5px)}
  .share-card{background:var(--bg);border-radius:24px;padding:22px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px;box-shadow:0 40px 100px rgba(27,36,48,.4);animation:pop .35s cubic-bezier(.34,1.56,.5,1);max-height:calc(100vh - 40px);overflow-y:auto}
  .share-header{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .share-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--marine);letter-spacing:-.01em}
  .share-title-center{text-align:center}
  .share-close{width:32px;height:32px;border:none;border-radius:50%;background:var(--mist);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,transform .12s}
  .share-close:active{transform:scale(.92)}
  .share-close:hover{background:var(--line);color:var(--marine)}
  .share-close svg{width:14px;height:14px}

  /* Preview carte dans le consentement */
  .share-preview{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}
  .share-preview-img{width:84px;height:84px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--mist)}
  .share-preview-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .share-preview-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--ink);line-height:1.15}
  .share-preview-tr{font-family:'Manrope',sans-serif;font-size:13px;color:var(--ink-soft)}
  .share-preview-mnemo{font-family:'Manrope',sans-serif;font-style:italic;font-size:12.5px;color:var(--terre-d);margin-top:4px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

  /* Attribution anonyme / pseudo */
  .share-attrib{display:flex;flex-direction:column;gap:8px}
  .share-attrib-label{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--marine)}
  .share-attrib-options{display:flex;gap:10px}
  .share-attrib-opt{display:flex;align-items:center;gap:6px;font-family:'Manrope',sans-serif;font-size:13.5px;cursor:pointer;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;flex:1}
  .share-attrib-opt input{margin:0;accent-color:var(--turquoise)}
  .share-attrib-pseudo{display:none;width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:'Manrope',sans-serif;font-size:14px;background:#fff}
  .share-attrib-pseudo:focus{outline:none;border-color:var(--turquoise);box-shadow:0 0 0 3px var(--turquoise-soft)}
  .share-attrib.show-pseudo .share-attrib-pseudo{display:block}

  /* Puces de consentement */
  .share-bullets{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;font-family:'Manrope',sans-serif;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
  .share-bullets li::marker{color:var(--turquoise)}

  /* Status (loading, error de modération, autre) */
  .share-status{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.45;padding:0 4px;min-height:0;text-align:center}
  .share-status.loading{color:var(--marine)}
  .share-status.error{color:#9A3A3A}
  .share-status:empty{display:none}

  .share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .share-actions-success{margin-top:6px}

  /* Bloc succès : lien copiable */
  .share-success-emoji{font-size:42px;line-height:1;text-align:center}
  .share-success-sub{font-family:'Manrope',sans-serif;font-size:13.5px;color:var(--ink-soft);text-align:center;line-height:1.5}
  .share-link-row{display:flex;gap:6px;align-items:stretch}
  .share-link-input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:'Manrope',sans-serif;font-size:13px;background:#fff;color:var(--ink);min-width:0}
  .share-link-input:focus{outline:none;border-color:var(--turquoise)}
  .share-link-copy{border:none;border-radius:10px;background:var(--turquoise);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .15s,transform .12s}
  .share-link-copy:hover{background:#26A89C}
  .share-link-copy:active{transform:scale(.96)}
  .share-link-copy svg{width:14px;height:14px}
  .share-link-copy.copied{background:var(--vert)}

  /* Modale image preview (clic sur image au verso d'une carte) */
  .image-preview-card{max-width:480px}
  .image-preview-tr{font-family:'Manrope',sans-serif;color:var(--ink-soft);font-size:14px;margin-top:-8px}
  .image-preview-wrap{margin:0;border:var(--border-sketch, 2.5px solid var(--ink));border-radius:16px;
    overflow:hidden;background:var(--turquoise-soft);box-shadow:var(--shadow-sketch, 2px 3px 0 var(--ink));
    transform:rotate(-0.6deg)}
  .image-preview-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .image-preview-hint{margin:6px 2px 0;font-family:'Manrope',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.4;text-align:center}

  /* Niveau verrouillé (freemium, lot 14) — opacity + petit cadenas */
  .lvl-card.locked{opacity:.62}
  .lvl-card.locked:hover{opacity:.85}
  .lvl-card .lvl-lock{width:18px;height:18px;color:var(--ink-soft);flex-shrink:0;margin-right:4px}
  .lvl-card.locked .lvl-num{background:var(--mist);color:var(--ink-soft)}
  .lvl-card.locked .chev{opacity:.5}

  /* Modale paywall */
  /* padding-top : respecte la safe-area (Dynamic Island / encoche) pour que le
     bouton de fermeture (X) descende sous l'encoche sur iPhone. */
  .paywall-card{max-width:440px;text-align:left;padding-top:max(22px, calc(env(safe-area-inset-top) + 14px))}
  .paywall-emoji{font-size:44px;line-height:1;text-align:center;margin:4px 0}
  .paywall-intro{margin:0;font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink);line-height:1.5}
  .paywall-celebrate{margin:0 0 6px;font-family:'Caveat',cursive;font-weight:700;font-size:26px;
    color:var(--framboise);line-height:1.15;text-align:center}
  .paywall-intro-block{display:flex;flex-direction:column;gap:4px}
  .paywall-features{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:10px}
  .paywall-features li{display:flex;flex-direction:column;gap:2px;background:var(--bg);
    border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);padding:10px 14px}
  .paywall-features li::before{content:"✦";color:var(--framboise);font-weight:800;font-size:13px;margin-bottom:2px}
  .paywall-features li strong{font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;color:var(--ink)}
  .paywall-features li span{font-family:'Manrope',sans-serif;font-size:13px;color:var(--ink-soft);line-height:1.4}
  .paywall-features li.paywall-feat-star{background:var(--framboise-soft);border-color:var(--framboise)}
  .paywall-features li.paywall-feat-star::before{content:"★ nouveau"}
  .paywall-features li.paywall-feat-star strong{color:var(--framboise)}
  .paywall-pricing{background:var(--framboise-soft);border:var(--border-sketch);border-radius:14px;
    box-shadow:var(--shadow-sketch);padding:14px 16px;text-align:center;transform:rotate(-0.3deg)}
  .paywall-price-soon{font-family:'Caveat',cursive;font-weight:700;font-size:26px;color:var(--framboise);line-height:1.1;margin-bottom:6px}
  .paywall-pricing-sub{margin:0 0 10px;font-size:13px;color:var(--ink);line-height:1.4}
  .paywall-notify{display:inline-block;background:var(--framboise);color:#fff;text-decoration:none;
    border:var(--border-sketch-thin);border-radius:10px;box-shadow:var(--shadow-sketch-sm);
    padding:9px 16px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;
    transition:transform .12s,box-shadow .12s}
  .paywall-notify:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .paywall-later{flex:1}

  /* 2 plans abos côte à côte */
  .paywall-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 6px}
  .paywall-plan{position:relative;background:#fff;border:var(--border-sketch);border-radius:16px;
    box-shadow:var(--shadow-sketch);padding:14px 12px;font-family:'Manrope',sans-serif;
    cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:4px;
    transition:transform .12s,box-shadow .12s}
  .paywall-plan:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .paywall-plan-label{font-weight:800;font-size:14px;color:var(--ink);letter-spacing:-.005em}
  .paywall-plan-price{font-weight:800;font-size:22px;color:var(--marine);letter-spacing:-.02em;line-height:1.05}
  .paywall-plan-sub{font-weight:600;font-size:11.5px;color:var(--ink-soft)}
  .paywall-plan-best{background:var(--framboise-soft);border-color:var(--framboise);box-shadow:3px 3px 0 var(--framboise)}
  .paywall-plan-best .paywall-plan-price{color:var(--framboise)}
  .paywall-best-ribbon{position:absolute;top:-12px;right:8px;background:var(--framboise);color:#fff;
    padding:2px 10px;border-radius:14px;font-family:'Caveat',cursive;font-weight:700;font-size:15px;
    transform:rotate(3deg);box-shadow:1px 1px 0 var(--ink)}

  /* Packs images (collapsible) */
  .paywall-packs{margin:4px 0 0;background:var(--bg);border:var(--border-sketch-thin);
    border-radius:12px;padding:0 12px}
  .paywall-packs summary{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;
    color:var(--ink);cursor:pointer;padding:11px 0;list-style:none}
  .paywall-packs summary::-webkit-details-marker{display:none}
  .paywall-packs[open] summary{border-bottom:1.5px dashed var(--line);margin-bottom:10px}
  .paywall-packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:8px}
  .paywall-pack{background:#fff;border:var(--border-sketch-thin);border-radius:12px;padding:10px 6px;
    font-family:'Manrope',sans-serif;cursor:pointer;display:flex;flex-direction:column;gap:2px;
    text-align:center;box-shadow:var(--shadow-sketch-sm);transition:transform .12s}
  .paywall-pack:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .paywall-pack-qty{font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.02em}
  .paywall-pack-lbl{font-weight:600;font-size:11px;color:var(--ink-soft)}
  .paywall-pack-price{font-weight:800;font-size:13px;color:var(--marine);margin-top:3px}
  .paywall-packs-note{font-family:'Caveat',cursive;font-weight:600;font-size:14px;
    color:var(--ink-soft);text-align:center;margin:6px 0 8px}

  .paywall-status{min-height:18px;font-family:'Manrope',sans-serif;font-size:13px;
    color:var(--marine);text-align:center;margin:8px 0 4px}
  .paywall-footer{display:flex;align-items:center;gap:12px;margin-top:6px}
  .paywall-restore{font-family:'Manrope',sans-serif;font-size:12px;color:var(--ink-soft);
    text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
    font-weight:600;white-space:nowrap}
  .paywall-restore:hover{color:var(--marine)}

  /* Indicateur de sync dans le topbar home (lot 14) */
  .home-topbar-right{display:flex;align-items:center;gap:8px}
  .sync-indicator{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
    border:var(--border-sketch-thin);border-radius:10px;box-shadow:var(--shadow-sketch-sm);
    padding:5px 10px;font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:700;
    color:var(--ink);cursor:pointer;transition:transform .12s,background .15s}
  .sync-indicator:hover{transform:translate(-1px,-1px)}
  .sync-indicator:active{transform:translate(1px,1px)}
  .sync-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-soft);flex-shrink:0;
    transition:background .2s}
  .sync-indicator.state-synced .sync-dot{background:var(--vert)}
  .sync-indicator.state-synced{color:var(--vert)}
  .sync-indicator.state-pending .sync-dot{background:var(--jaune);animation:pulseDot 1.4s ease-in-out infinite}
  .sync-indicator.state-pending{color:var(--jaune-d)}
  .sync-indicator.state-syncing .sync-dot{background:var(--turquoise);animation:pulseDot .8s ease-in-out infinite}
  .sync-indicator.state-syncing{color:var(--turquoise)}
  .sync-indicator.state-failed .sync-dot{background:#9A3A3A}
  .sync-indicator.state-failed{color:#9A3A3A}
  .sync-indicator.state-offline .sync-dot{background:var(--ink-soft)}
  .sync-indicator.state-offline{color:var(--ink-soft)}
  @keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}
  /* Sur mobile très étroit, on cache le label texte, on garde juste le dot. */
  @media (max-width:380px){
    .sync-label{display:none}
    .sync-indicator{padding:6px 7px}
  }

  /* Bandeau invitation à se connecter dans la home (lot 14) */
  .home-auth-banner{margin:0 0 14px;background:var(--surface);border:var(--border-sketch);
    border-radius:16px;box-shadow:var(--shadow-sketch);padding:14px 16px;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;transform:rotate(-0.3deg)}
  .home-auth-banner-text{flex:1;min-width:160px}
  .home-auth-banner-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:var(--ink);line-height:1.2}
  .home-auth-banner-sub{font-family:'Manrope',sans-serif;font-size:13px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
  .home-auth-banner-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
  .home-auth-google,
  .home-auth-apple{display:inline-flex;align-items:center;gap:8px;
    border:var(--border-sketch-thin);border-radius:10px;box-shadow:var(--shadow-sketch-sm);
    padding:9px 14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;
    transition:transform .12s,box-shadow .12s,background .15s}
  .home-auth-google{background:#fff;color:var(--ink)}
  .home-auth-google:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch);background:#FAFAFA}
  .home-auth-google svg{width:16px;height:16px}
  .home-auth-apple{background:#000;color:#fff;border-color:#000}
  .home-auth-apple:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch);background:#1a1a1a}
  .home-auth-apple svg{width:16px;height:16px}
  .home-auth-email-link{font-family:'Manrope',sans-serif;font-size:12px;color:var(--turquoise);
    text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}
  .home-auth-email-link:hover{color:var(--turquoise-d)}
  @media (max-width:420px){
    .home-auth-banner-actions{align-items:stretch;width:100%}
    .home-auth-google,
    .home-auth-apple{justify-content:center}
    .home-auth-email-link{text-align:center}
  }

  /* Auth modals (lot 12) */
  .auth-card{max-width:420px}
  .auth-intro{margin:-6px 0 4px;font-family:'Manrope',sans-serif;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
  .auth-method-note{margin:-2px 0 12px;font-family:'Manrope',sans-serif;font-size:12.5px;
    color:var(--ink);line-height:1.45;background:var(--jaune-soft);border:1.5px solid var(--jaune);
    border-radius:10px;padding:9px 12px}
  .auth-method-note b{font-weight:800}
  .auth-field{display:flex;flex-direction:column;gap:5px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:700;color:var(--marine)}
  .auth-field input{border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;font-weight:500}
  .auth-field input:focus{border-color:var(--turquoise);box-shadow:0 0 0 3px var(--turquoise-soft)}
  .auth-hint{margin:0 2px;font-family:'Manrope',sans-serif;font-size:12px;color:var(--ink-soft);line-height:1.45}
  .auth-status{font-family:'Manrope',sans-serif;font-size:13px;line-height:1.45;padding:0 4px;text-align:center;min-height:0}
  .auth-status:empty{display:none}
  .auth-status.loading{color:var(--marine)}
  .auth-status.error{color:#9A3A3A}
  .auth-status.success{color:var(--vert)}
  .auth-switch{margin:0;font-family:'Manrope',sans-serif;font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.6}
  .auth-switch a{color:var(--turquoise);text-decoration:underline;text-decoration-thickness:2px;font-weight:700}
  .auth-switch a:hover{color:var(--turquoise-d)}
  .auth-legal{margin:8px 2px 0;font-family:'Manrope',sans-serif;font-size:11.5px;color:var(--ink-soft);text-align:center;line-height:1.45}
  .auth-legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}

  /* Boutons sociaux (Google + Apple) */
  .auth-social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);
    padding:11px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
    cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s;margin-bottom:8px}
  .auth-social:active{transform:translate(1px,1px);box-shadow:none}
  .auth-social svg{width:18px;height:18px;flex-shrink:0}
  .auth-social-google{background:#fff;color:var(--ink)}
  .auth-social-google:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch);background:#FAFAFA}
  .auth-social-apple{background:#000;color:#fff;border-color:#000}
  .auth-social-apple:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch);background:#1a1a1a}
  .auth-divider{display:flex;align-items:center;gap:10px;color:var(--ink-soft);
    font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
  .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1.5px;background:var(--line)}

  /* Section compte du profil — 2 états */
  .prof-account-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .prof-account-actions .prof-account-btn{flex:1;min-width:140px}
  .prof-account-btn{background:var(--surface);color:var(--ink);border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);padding:11px 14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:transform .12s,box-shadow .12s}
  .prof-account-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .prof-account-btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:none}
  .prof-account-btn:disabled{opacity:.5;cursor:not-allowed}
  .prof-account-btn.primary{background:var(--framboise);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-sketch);font-weight:800}
  .prof-account-btn.primary:hover:not(:disabled){background:var(--framboise-d);box-shadow:var(--shadow-sketch-lg)}
  .prof-account-btn.danger{color:#9A3A3A;border-color:#D89B9B}
  .prof-account-btn.danger:hover:not(:disabled){background:#FCE3E7}
  /* Variantes vives charte pour les actions du compte (alignees sur l'accueil). */
  .prof-account-btn.cv-turquoise{background:var(--turquoise);color:var(--ink);border-color:var(--ink);box-shadow:var(--shadow-sketch);font-weight:800}
  .prof-account-btn.cv-turquoise:hover:not(:disabled){background:var(--turquoise-d);color:#FFF8F1;box-shadow:var(--shadow-sketch-lg)}
  .prof-account-btn.cv-jaune{background:var(--jaune);color:var(--ink);border-color:var(--ink);box-shadow:var(--shadow-sketch);font-weight:800}
  .prof-account-btn.cv-jaune:hover:not(:disabled){background:var(--jaune-d);box-shadow:var(--shadow-sketch-lg)}
  .prof-account-btn.cv-tangerine{background:var(--tangerine);color:#FFF8F1;border-color:var(--ink);box-shadow:var(--shadow-sketch);font-weight:800}
  .prof-account-btn.cv-tangerine:hover:not(:disabled){background:var(--tangerine-d);box-shadow:var(--shadow-sketch-lg)}
  .prof-account-signed-row{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
  .prof-account-signed-lbl{font-family:'Manrope',sans-serif;font-size:12px;color:var(--ink-soft);font-weight:600}
  .prof-account-signed-email{font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);font-weight:700}

  /* Banque des cartes (lot 13) */
  .bank-card-modal{max-width:480px}
  .bank-intro{margin:-6px 0 4px;font-family:'Manrope',sans-serif;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
  .bank-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;margin:0 -4px;padding:0 4px}
  .bank-loading,.bank-empty{font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink-soft);line-height:1.5;text-align:center;padding:24px 12px}
  .bank-retry{margin-top:12px;background:var(--turquoise);color:#fff;border:var(--border-sketch-thin);border-color:var(--ink);border-radius:10px;box-shadow:var(--shadow-sketch-sm);padding:8px 14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;cursor:pointer;transition:transform .12s,box-shadow .12s}
  .bank-retry:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .bank-retry:active{transform:translate(1px,1px);box-shadow:none}
  .bank-item{display:flex;gap:14px;background:#fff;border:var(--border-sketch-thin);border-radius:14px;box-shadow:var(--shadow-sketch-sm);padding:12px;align-items:flex-start}
  .bank-item:nth-child(odd){transform:rotate(-0.4deg)}
  .bank-item:nth-child(even){transform:rotate(0.4deg)}
  .bank-item-img{width:128px;height:128px;flex-shrink:0;border-radius:12px;object-fit:cover;background:var(--mist);border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm)}
  .bank-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .bank-item-mnemo{margin:0;font-family:'Manrope',sans-serif;font-style:italic;font-size:13.5px;color:var(--ink);line-height:1.4;word-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .bank-item-author{margin:0;font-size:11.5px;color:var(--ink-soft)}
  .bank-item-author strong{color:var(--ink)}
  .bank-item-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
  .bank-item-inspire,.bank-item-adopt{border:var(--border-sketch-thin);border-radius:10px;
    box-shadow:var(--shadow-sketch-sm);padding:6px 12px;font-family:'Manrope',sans-serif;
    font-weight:700;font-size:12px;cursor:pointer;transition:transform .12s,box-shadow .12s}
  .bank-item-inspire{background:#fff;color:var(--ink)}
  .bank-item-adopt{background:var(--turquoise);color:#fff;border-color:var(--ink)}
  .bank-item-inspire:hover,.bank-item-adopt:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .bank-item-inspire:active,.bank-item-adopt:active{transform:translate(1px,1px);box-shadow:none}
  /* Bouton « ⋯ » discret de modération, à côté de « Utiliser cette carte ». */
  .bank-item-more{margin-left:auto;border:none;background:transparent;color:var(--ink-soft);
    font-size:18px;line-height:1;font-weight:700;padding:4px 8px;border-radius:8px;cursor:pointer;
    transition:background .12s,color .12s}
  .bank-item-more:hover{background:var(--mist);color:var(--ink)}
  .bank-item-more:active{transform:translateY(1px)}
  /* Sur mobile très étroit, on passe en colonne (image en haut, contenu dessous). */
  @media (max-width:380px){
    .bank-item{flex-direction:column;align-items:stretch}
    .bank-item-img{width:100%;height:auto;aspect-ratio:1/1}
  }

  /* Feuille de menu « ⋯ » (modération UGC) — ancrée en bas, sobre. */
  .bank-menu-sheet{align-items:flex-end;justify-content:center;padding:0}
  .bank-menu-card{width:100%;max-width:440px;background:#fff;border:var(--border-sketch);
    border-bottom:none;border-radius:18px 18px 0 0;box-shadow:var(--shadow-sketch-lg);
    padding:10px;display:flex;flex-direction:column;gap:6px;
    margin-bottom:env(safe-area-inset-bottom, 0)}
  .bank-menu-item{width:100%;border:var(--border-sketch-thin);border-radius:12px;background:#fff;
    padding:14px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:var(--ink);
    cursor:pointer;box-shadow:var(--shadow-sketch-sm)}
  .bank-menu-item:active{transform:translateY(1px);box-shadow:none}
  .bank-menu-cancel{font-weight:500;color:var(--ink-soft);box-shadow:none}

  /* Toast in-app (lot 13) — notification non bloquante en bas d'écran */
  .app-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0) + 18px);
    transform:translateX(-50%) translateY(100px);
    max-width:min(92%, 440px);background:var(--tangerine-soft);color:var(--ink);
    border:var(--border-sketch);border-radius:14px;box-shadow:var(--shadow-sketch-lg);
    padding:13px 18px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;
    line-height:1.5;z-index:1000;cursor:pointer;opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.34,1.56,.5,1),opacity .25s}
  .app-toast.show{transform:translateX(-50%) translateY(0) rotate(-0.4deg);opacity:1;pointer-events:auto}
  .app-toast.info{background:var(--tangerine-soft)}
  .app-toast.success{background:var(--vert-soft);color:var(--ink)}
  .app-toast.error{background:var(--framboise-soft);color:#9A3A3A}

  /* Vignette de rappel au verso de la carte d'étude (sous la traduction) */
  .card-mnemo-img{max-width:160px;max-height:160px;width:auto;height:auto;border-radius:14px;object-fit:cover;margin-top:14px;border:2px solid var(--terre-soft);box-shadow:0 8px 20px rgba(224,122,63,.22)}

  /* Illustration sur la question reverse-mnémo du quiz */
  .quiz-mnemo-img{display:block;width:170px;height:170px;object-fit:cover;border-radius:18px;margin:6px auto 16px;border:2px solid var(--terre-soft);box-shadow:0 10px 24px rgba(224,122,63,.22);background:#fff}
  /* Carte d'étude — Loufoque : papier blanc, contour feutre subtil, ombre dure
     très discrète. Pas de fond coloré derrière le texte russe : lecture
     reposante prioritaire (15 min d'étude). Angle infime (≤0.5°). */
  .card{position:relative;width:100%;height:60vh;max-height:520px;min-height:380px;cursor:pointer;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sketch-sm);border:var(--border-sketch-thin);overflow:hidden;transform:rotate(-.3deg)}
  .face{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;padding:26px;animation:faceIn .26s ease}
  @keyframes faceIn{from{opacity:0}to{opacity:1}}
  .face.rear{display:none}
  .card.flip .face.front{display:none}
  .card.flip .face.rear{display:flex}
  .type-pill{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:20px}
  .type-pill.v{color:var(--ink);background:#EEEAE0}
  .type-pill.n{color:var(--turquoise-d);background:var(--turquoise-soft)}
  .type-pill.a{color:var(--tangerine-d);background:var(--tangerine-soft)}
  .type-pill.x{color:var(--jaune-d);background:var(--jaune-soft)}
  .card-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
  .ru-word{font-family:'Manrope',sans-serif;font-weight:700;font-size:50px;line-height:1.06;letter-spacing:-.015em;color:var(--marine)}
  .ru-word .stress{color:var(--framboise)}
  /* Phonetic transcription, displayed just under the russian word on the
     front face. Smaller, italic, terre-coloured to signal "pronunciation
     hint" without competing with the word itself. */
  .ru-phon{font-family:'Manrope',sans-serif;font-weight:600;font-size:17px;font-style:italic;color:var(--terre);letter-spacing:.01em;margin-top:-4px;text-align:center}
  .hint{font-size:13px;color:var(--ink-soft);font-weight:500;display:flex;align-items:center;gap:6px}
  .hint svg{width:15px;height:15px;stroke:currentColor;fill:none}
  .fr-word{font-family:'Manrope',sans-serif;font-weight:700;font-size:32px;line-height:1.12;color:var(--marine)}
  .card-foot{font-size:12px;color:var(--ink-soft);text-align:center;font-weight:500}
  .controls{padding:8px 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
  .judge{display:flex;gap:11px}
  .btn{flex:1;border:none;border-radius:16px;padding:15px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s}
  .btn:active{transform:scale(.96)}
  .btn svg{width:18px;height:18px;fill:none;stroke:currentColor}
  .btn.again{background:var(--terre-soft);color:var(--terre)}
  .btn.know{background:var(--vert-soft);color:var(--vert)}
  .nav{display:flex;gap:11px}
  .nav-btn{flex:1;background:var(--mist);border:none;border-radius:14px;padding:13px;font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:transform .12s}
  .nav-btn:active{transform:scale(.96)}
  .nav-btn.primary{background:var(--marine);color:#fff;box-shadow:var(--shadow-lg);font-family:'Manrope',sans-serif;font-weight:700}
  .nav-btn:disabled{opacity:.4}

  /* ---- WORDS DONE → unlock story ---- */
  .interlude{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 32px;gap:6px}
  .interlude .ring{width:120px;height:120px;margin-bottom:14px}
  .interlude .big{font-family:'Manrope',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--marine)}
  .interlude .sub{font-size:14px;color:var(--ink-soft);margin-top:4px;line-height:1.5}
  .interlude .cta{margin-top:26px;background:var(--marine);color:#fff;border:none;border-radius:16px;padding:16px 30px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 14px 40px rgba(27,58,107,.28);display:flex;align-items:center;gap:9px}
  .interlude .cta:hover{background:var(--marine-d)}
  .interlude .cta svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2}
  .interlude .skip{margin-top:14px;background:none;border:none;color:var(--ink-soft);font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline}

  /* ---- STORY ---- */
  .story-wrap{flex:1;overflow-y:auto;padding:4px 22px 30px}
  .story-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;box-shadow:var(--shadow)}
  .story-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--terre);background:var(--terre-soft);padding:6px 13px;border-radius:20px;margin-bottom:18px}
  .story-badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
  .story-ru{font-family:'Manrope',sans-serif;font-weight:500;font-size:21px;line-height:1.75;color:var(--ink)}
  .story-ru w{color:var(--terre);font-weight:700;cursor:pointer;border-bottom:2px solid var(--terre-soft);position:relative;white-space:nowrap}
  .story-ru w.on{color:var(--terre-d)}
  .pop{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-6px);background:var(--ink);color:#fff;font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;padding:6px 11px;border-radius:10px;white-space:nowrap;z-index:5;box-shadow:0 6px 20px rgba(0,0,0,.2)}
  .pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
  .story-ru w.on .pop{display:block}
  .story-divider{height:1px;background:var(--line);margin:22px 0}
  .story-fr{font-size:15px;line-height:1.6;color:var(--ink-soft);font-style:italic}
  .story-tip{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:16px;padding:0 10px}
  .story-done{margin:20px 22px calc(36px + env(safe-area-inset-bottom));background:var(--vert);color:#fff;border:none;border-radius:16px;padding:16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 14px 40px rgba(58,166,107,.28);display:flex;align-items:center;justify-content:center;gap:9px}
  .story-done svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4}

  /* ---- OVERLAYS encouragement & félicitation ---- */
  .overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:30px;background:rgba(27,36,48,.34);backdrop-filter:blur(3px)}
  /* Porte pseudo : au-dessus de TOUT (home-coach 1000, reveal 99999) — bloquante. */
  .pseudo-gate-overlay{z-index:100050;background:rgba(27,36,48,.6)}
  .overlay.show{display:flex;animation:ovIn .25s ease}
  @keyframes ovIn{from{opacity:0}to{opacity:1}}
  /* Génération d'image (#imggenOverlay) et saisie mnémo (#cwImgOverlay) doivent
     se poser AU-DESSUS de #wordCardOverlay (z-index base 50) quand on recrée une
     image depuis la carte d'un mot perso, sinon la carte recouvre le modal. On
     reste sous sync (80) / lang (90/95) / coach (1000). */
  #imggenOverlay.show, #cwImgOverlay.show{z-index:60}
  /* Sync/login loading overlay : voile fort flouté qui masque la réhydratation. */
  .sync-overlay{z-index:80;background:rgba(27,36,48,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .sync-card{background:linear-gradient(165deg,#fff,var(--jaune-soft));border-radius:28px;padding:38px 30px 34px;width:100%;max-width:340px;text-align:center;box-shadow:0 30px 80px rgba(27,36,48,.34);animation:pop .4s cubic-bezier(.34,1.56,.5,1)}
  .sync-emoji{font-size:46px;line-height:1;animation:syncBob 1.6s ease-in-out infinite}
  @keyframes syncBob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
  .sync-spinner{width:40px;height:40px;margin:18px auto 6px;border:5px solid rgba(224,122,63,.18);border-top-color:var(--terre);border-radius:50%;animation:spin 1s linear infinite}
  .sync-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--marine);margin-top:8px}
  .sync-sub{font-family:'Caveat',cursive;font-size:19px;color:var(--terre);line-height:1.3;margin-top:8px}
  .cheer-card{background:#fff;border-radius:26px;padding:34px 28px;width:100%;max-width:340px;text-align:center;box-shadow:0 30px 80px rgba(27,36,48,.3);animation:pop .4s cubic-bezier(.34,1.56,.5,1)}
  @keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
  .cheer-tag{display:flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:var(--jaune-d)}
  .cheer-tag span:first-child{font-size:22px}
  .cheer-dots{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}
  .cheer-dots i{width:11px;height:11px;border-radius:50%;background:var(--mist);transition:transform .3s,background .3s}
  .cheer-dots i.on{background:var(--jaune);transform:scale(1.15)}
  .cheer-btn{margin-top:20px;width:100%;background:var(--marine);color:#fff;border:none;border-radius:15px;padding:15px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform .12s}
  .cheer-btn:active{transform:scale(.96)}
  .mini-box{margin-top:18px;text-align:left;background:var(--jaune-soft);border-radius:18px;padding:20px 18px}
  .mini-ru{font-family:'Manrope',sans-serif;font-weight:500;font-size:19px;line-height:1.65;color:var(--ink)}
  .mini-ru w{color:var(--jaune-d);font-weight:700;cursor:pointer;border-bottom:2px solid rgba(201,146,17,.4);position:relative;white-space:nowrap}
  .mini-ru w.on{color:var(--marine-d)}
  .mini-ru w .pop{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px);background:var(--ink);color:#fff;font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;padding:5px 9px;border-radius:8px;white-space:nowrap;z-index:5}
  .mini-ru w.on .pop{display:block}
  .mini-fr{font-size:14px;color:var(--ink-soft);font-style:italic;line-height:1.55;margin-top:14px;padding-top:14px;border-top:1px solid rgba(201,146,17,.22);display:none}
  .mini-fr.show{display:block;animation:fade .3s ease both}
  .mini-reveal{margin-top:13px;background:transparent;border:none;color:var(--jaune-d);font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;padding:4px 0;display:inline-flex;align-items:center;gap:5px}
  .mini-reveal::before{content:"👁";font-size:13px}
  .mini-reveal.hidden{display:none}

  .bravo-card{position:relative;background:linear-gradient(165deg,#fff,var(--jaune-soft));border-radius:28px;padding:42px 30px 32px;width:100%;max-width:360px;text-align:center;box-shadow:0 34px 90px rgba(245,184,46,.32);overflow:hidden;animation:pop .45s cubic-bezier(.34,1.56,.5,1)}
  .bravo-medal{font-size:72px;line-height:1;margin-bottom:14px;animation:medalIn .7s cubic-bezier(.34,1.56,.5,1)}
  @keyframes medalIn{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:none}}
  .bravo-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;color:var(--marine)}
  .bravo-sub{font-size:15px;color:var(--ink-soft);margin-top:9px;line-height:1.55}
  .bravo-btn{margin-top:26px;width:100%;background:linear-gradient(90deg,var(--jaune),var(--jaune-d));color:var(--marine-d);border:none;border-radius:16px;padding:16px;font-family:'Manrope',sans-serif;font-weight:800;font-size:15.5px;cursor:pointer;box-shadow:0 14px 40px rgba(245,184,46,.4);transition:transform .12s}
  .bravo-btn:active{transform:scale(.96)}
  .bravo-btn-secondary{margin-top:10px;width:100%;background:none;border:none;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;padding:6px}
  .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .confetti i{position:absolute;top:-12px;width:9px;height:9px;border-radius:2px;opacity:.9;animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(460px) rotate(540deg);opacity:0}}

  /* ============================================================
     HOME TOPBAR — Loufoque : "russe" manuscrit à gauche, avatar à droite
     ============================================================ */
  .home-topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 20px 4px;min-height:54px}
  /* Wordmark Loufoque (PNG griffonné) à gauche du header */
  .home-brand-logo{height:38px;width:auto;display:block;flex-shrink:0;transform:rotate(-1.5deg)}
  /* Placeholder Caveat conservé pour rétro-compat éventuelle */
  .home-brand{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:30px;line-height:1;color:var(--ink);letter-spacing:.01em}
  /* Bouton profil — sticker rond, contour feutre, ombre dure */
  .home-profile-btn{margin-left:auto;position:relative;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--ink);border:var(--border-sketch-thin);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transform:rotate(-2deg);transition:transform .12s,box-shadow .12s}
  .home-profile-btn:active{transform:rotate(-2deg) translate(1px,2px);box-shadow:0 0 0 0 var(--ink)}
  .home-profile-avatar{font-size:22px;line-height:1}
  /* Bulle langues (drapeaux source → cible) dans le topbar */
  .home-lang-btn{position:relative;height:44px;padding:0 12px;border-radius:22px;background:var(--surface);border:var(--border-sketch-thin);display:flex;align-items:center;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transform:rotate(1.5deg);transition:transform .12s,box-shadow .12s}
  .home-lang-btn:active{transform:rotate(1.5deg) translate(1px,2px);box-shadow:0 0 0 0 var(--ink)}
  .home-lang-flags{display:inline-flex;align-items:center;gap:3px;font-size:19px;line-height:1}
  .home-lang-arrow{font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;color:var(--ink-soft);margin:0 1px}
  .home-profile-notif{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--tangerine);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;display:grid;place-items:center;border:1.5px solid var(--ink);box-shadow:1px 1px 0 var(--ink)}
  .home-multi-notif{position:absolute;z-index:3;top:8px;right:10px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--framboise);color:#fff;font-family:'Manrope',sans-serif;font-weight:900;font-size:12px;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
  /* Bouton ampoule legacy (non utilisé sur le home v3, gardé pour rétro-compat */
  .home-tips-btn{margin-left:auto;width:36px;height:36px;border-radius:50%;background:var(--mist);color:var(--ink);border:var(--border-sketch-thin);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sketch-sm)}
  .home-tips-btn svg{width:20px;height:20px}

  /* ============================================================
     HOME STATS ROW — streak + objectif côte à côte, inclinés, sticker
     ============================================================ */
  .home-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 20px 4px}
  .home-stat-card{display:flex;align-items:center;gap:10px;background:var(--surface);border:var(--border-sketch);border-radius:16px;padding:12px 14px;box-shadow:var(--shadow-sketch);animation:flameIn .35s cubic-bezier(.34,1.56,.5,1)}
  .home-stat-card.home-stat-streak{background:var(--tangerine);transform:rotate(-1.3deg)}
  .home-stat-card.home-stat-goal{background:var(--turquoise);transform:rotate(.9deg)}
  .home-stat-emoji{font-size:26px;line-height:1;flex-shrink:0}
  .home-stat-body{display:flex;flex-direction:column;min-width:0;line-height:1}
  .home-stat-value{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:28px;line-height:1;color:var(--ink)}
  .home-stat-lbl{font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:600;color:var(--ink);opacity:.78;margin-top:2px}
  /* Legacy chip (utilisé pour fallback éventuel) */
  .home-streak-flame,.home-streak-count,.home-streak-suffix{display:inline}
  @keyframes flameIn{from{transform:scale(.7) rotate(-3deg);opacity:0}to{opacity:1}}

  /* ============================================================
     PROFIL (écran s-profile)
     ============================================================ */
  .prof-wrap{flex:1;overflow-y:auto;padding:4px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}

  /* Identité — bloc d'accueil du profil, halo framboise→marine pour le pop visuel */
  .prof-identity{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 14px 22px;background:linear-gradient(155deg, var(--framboise-soft) 0%, var(--marine-soft) 55%, var(--bg) 95%);border:var(--border-sketch-thin);border-radius:22px;box-shadow:var(--shadow-sketch-sm);text-align:center;overflow:hidden}
  .prof-identity::after{content:"";position:absolute;top:-40px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(232,74,111,.18) 0%, transparent 70%);pointer-events:none}
  .prof-avatar-big{width:84px;height:84px;border-radius:50%;background:linear-gradient(140deg,var(--marine) 0%,var(--framboise) 100%);color:#fff;display:grid;place-items:center;font-size:42px;font-weight:800;line-height:1;border:2.5px solid var(--ink);box-shadow:var(--shadow-sketch);margin-bottom:4px;position:relative;z-index:1}
  .prof-name-row{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:286px;position:relative;z-index:1}
  .prof-name-input{background:transparent;border:none;border-bottom:1.5px dashed transparent;font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--marine);text-align:center;padding:4px 6px;width:100%;min-width:0;outline:none;letter-spacing:-.01em;transition:border-color .2s}
  .prof-name-input:focus{border-bottom-color:var(--marine)}
  .prof-name-input::placeholder{color:var(--ink-soft);font-weight:600}
  .prof-name-save{width:34px;height:34px;flex:0 0 34px;border:var(--border-sketch-thin);border-radius:50%;background:#fff;color:var(--vert);display:grid;place-items:center;box-shadow:var(--shadow-sketch-sm);cursor:pointer;transition:transform .12s,box-shadow .12s,background .2s}
  .prof-name-save svg{width:18px;height:18px;stroke:currentColor}
  .prof-name-save:active{transform:translate(1px,1px) scale(.96)}
  .prof-name-save:hover{box-shadow:var(--shadow-sketch);background:var(--vert-soft)}
  .prof-name-save.saved{animation:pop .25s ease}
  /* Toggle affichage fixe (defaut) <-> edition. La classe .editing est posee par
     profileStartEditName() et retiree a la validation/annulation. Input + coche
     masques hors edition (point 3). */
  .prof-name-row .prof-name-input,
  .prof-name-row .prof-name-save{display:none}
  .prof-name-row.editing .prof-name-input{display:block}
  .prof-name-row.editing .prof-name-save{display:grid}
  .prof-name-row.editing .prof-name-display{display:none}
  .prof-name-display{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--marine);letter-spacing:-.01em;padding:4px 6px;max-width:100%}
  .prof-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .prof-name-text:empty::before{content:attr(data-placeholder);color:var(--ink-soft);font-weight:600}
  .prof-name-edit-ico{font-size:15px;color:var(--marine);opacity:.7;flex-shrink:0}
  .prof-name-display:active{opacity:.7}
  .prof-identity-meta{font-size:12px;color:var(--ink-soft);font-style:italic;margin-top:2px}
  .prof-pair{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .prof-pair-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
  .prof-pair-value{display:inline-flex;align-items:center;gap:6px;font-family:'Manrope',sans-serif;font-weight:700;color:var(--marine);font-size:14px}
  .prof-pair-flag{font-size:18px;line-height:1}
  .prof-pair-arrow{font-size:14px;color:var(--terre);font-weight:800}
  .prof-pair-text{margin-left:4px}

  /* Bloc "Langues" cliquable (entête profil) */
  .prof-langs-btn{display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 14px;background:var(--turquoise);border:var(--border-sketch-thin);border-radius:14px;box-shadow:var(--shadow-sketch);cursor:pointer;transition:transform .12s,box-shadow .12s}
  .prof-langs-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .prof-langs-btn:hover{box-shadow:var(--shadow-sketch-lg)}
  .prof-langs-btn .prof-langs-value,.prof-langs-btn .prof-pair-lbl{color:var(--ink)}
  .prof-langs-btn .prof-langs-edit{color:var(--ink);opacity:.7}
  .prof-langs-value{display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-weight:700;color:var(--marine);font-size:14px}
  .prof-lang-chip{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  .prof-langs-edit{margin-left:auto;font-size:15px;color:var(--terre);opacity:.85}

  /* Popup sélecteur de langues (les 2 d'un coup) */
  .lang-overlay{z-index:90}
  .lang-card{background:linear-gradient(165deg,#fff,var(--turquoise-soft));border:var(--border-sketch);border-radius:26px;padding:26px 22px 22px;width:100%;max-width:360px;text-align:center;box-shadow:0 30px 80px rgba(27,36,48,.34);animation:pop .4s cubic-bezier(.34,1.56,.5,1)}
  .lang-emoji{font-size:40px;line-height:1}
  .lang-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;color:var(--marine);margin:6px 0 16px}
  .lang-field{text-align:left;margin-bottom:16px}
  .lang-field-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
  .lang-options{display:flex;flex-wrap:wrap;gap:8px}
  .lang-opt{flex:1 1 30%;min-width:92px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:11px 8px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;transition:transform .12s,border-color .15s,background .15s}
  .lang-opt:active{transform:scale(.96)}
  .lang-opt.selected{border-color:var(--marine);background:linear-gradient(160deg,var(--marine-soft),#fff);color:var(--marine);box-shadow:var(--shadow-sketch-sm)}
  .lang-actions{display:flex;gap:10px;margin-top:8px}
  .lang-btn{flex:1;border:none;border-radius:14px;padding:14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s}
  .lang-btn:active{transform:scale(.96)}
  .lang-btn-cancel{background:var(--mist);color:var(--ink-soft)}
  .lang-btn-ok{background:var(--marine);color:#fff;box-shadow:var(--shadow-lg)}

  /* Overlay transitoire de préparation (2,5 s avant reload) */
  .lang-prep{z-index:95;background:rgba(27,36,48,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .lang-prep-card{background:linear-gradient(165deg,#fff,var(--jaune-soft));border-radius:26px;padding:34px 30px;text-align:center;max-width:320px;box-shadow:0 30px 80px rgba(27,36,48,.34);animation:pop .4s cubic-bezier(.34,1.56,.5,1)}
  .lang-prep-emoji{font-size:46px;line-height:1;animation:syncBob 1.6s ease-in-out infinite}
  .lang-prep-text{font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:var(--marine);margin-top:12px;line-height:1.25}

  /* ===== Recherche (accueil) ===== */
  .home-search{position:relative;padding:8px 20px 2px;z-index:20}
  .home-search-bar{display:flex;align-items:center;gap:10px;background:#fff;border:var(--border-sketch-thin);border-radius:16px;box-shadow:var(--shadow-sketch-sm);padding:11px 14px}
  .home-search-ico{width:18px;height:18px;color:var(--ink-soft);flex-shrink:0}
  .home-search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;color:var(--ink);-webkit-appearance:none;appearance:none}
  .home-search-input::placeholder{color:var(--ink-soft);font-weight:500}
  /* Masque le bouton "effacer" natif des inputs type=search (Chrome/Safari) :
     on a notre propre croix. */
  .home-search-input::-webkit-search-cancel-button,.home-search-input::-webkit-search-decoration,
  .cw-input::-webkit-search-cancel-button,.cw-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
  .cw-input{-webkit-appearance:none;appearance:none}
  .home-search-add{border:none;background:var(--framboise);color:#fff;width:26px;height:26px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:18px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-sketch-sm);padding:0}
  .home-search-add:active{transform:scale(.92)}
  .home-search-clear{border:none;background:var(--mist);color:var(--ink-soft);width:24px;height:24px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:12px;line-height:1}
  .home-search-results{position:absolute;left:20px;right:20px;top:calc(100% - 2px);background:#fff;border:var(--border-sketch-thin);border-radius:16px;box-shadow:0 18px 50px rgba(27,36,48,.22);max-height:min(56vh,420px);overflow-y:auto;z-index:30}
  .search-result{display:flex;align-items:baseline;gap:8px;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--line);font-family:'Manrope',sans-serif}
  .search-result:last-child{border-bottom:none}
  .search-result:active{background:var(--marine-soft)}
  .search-result-word{font-weight:800;color:var(--marine);font-size:15px}
  .search-result-tr{color:var(--ink-soft);font-size:13.5px}
  .search-result-mine{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tangerine);background:var(--tangerine-soft);padding:2px 7px;border-radius:8px;align-self:center}
  .search-add-row{padding:12px 16px;text-align:center;border-top:1px solid var(--line)}
  .search-empty{padding:16px;text-align:center}
  .search-empty-txt{font-family:'Caveat',cursive;font-size:19px;color:var(--ink-soft);line-height:1.2}
  .search-add-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:var(--framboise);color:#fff;border:none;border-radius:13px;padding:10px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--shadow-sketch-sm)}
  .search-add-btn:active{transform:scale(.96)}
  .search-add-btn::before{content:"+";font-size:18px;line-height:1}

  /* ===== Pop-up carte (depuis la recherche) ===== */
  .word-card-modal{position:relative;width:100%;max-width:460px}
  .word-card-close{position:absolute;top:-14px;right:-6px;z-index:5;width:34px;height:34px;border:none;border-radius:50%;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);cursor:pointer;font-size:15px;line-height:1}
  .word-card{height:90vh;max-height:760px;min-height:460px;cursor:pointer;perspective:1400px}
  .word-card-inner{position:relative;width:100%;height:100%;transition:transform .5s linear;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
  .word-card.flip .word-card-inner{transform:rotateY(180deg)}
  .wc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px);-webkit-transform:translateZ(1px);background:var(--surface);border:var(--border-sketch);border-radius:22px;box-shadow:var(--shadow-sketch-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 20px;text-align:center;transition:visibility 0s linear 0.25s}
  /* FILET DE SÉCURITÉ WKWebView : masque réellement la face arrière. */
  .word-card .wc-rear{visibility:hidden}
  .word-card.flip .wc-rear{visibility:visible}
  .word-card.flip .wc-front{visibility:hidden}
  .wc-front{}
  .wc-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:34px;color:var(--marine);letter-spacing:-.01em;line-height:1.1}
  .wc-phon{font-family:'Manrope',sans-serif;font-size:16px;color:var(--ink-soft)}
  .wc-audio{margin-top:6px;width:46px;height:46px;border:none;border-radius:50%;background:var(--marine-soft);color:var(--marine);display:grid;place-items:center;cursor:pointer}
  .wc-audio svg{width:22px;height:22px}
  .wc-hint{margin-top:14px;font-size:16px;color:var(--turquoise-d)}
  .wc-rear{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);justify-content:flex-start;gap:8px}
  .wc-tr{font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;color:var(--framboise);margin-top:4px}
  .wc-word-sm{font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink-soft)}
  .wc-imgbox{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0;margin:6px 0}
  .wc-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;border:2px solid var(--terre-soft)}
  .wc-img-empty{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-soft);padding:14px}
  .wc-img-empty svg{width:34px;height:34px;opacity:.5}
  .wc-img-empty-lbl{font-family:'Caveat',cursive;font-weight:700;font-size:15px}
  .wc-mnemo{font-family:'Caveat',cursive;font-weight:600;font-size:18px;color:#993C1D;line-height:1.2;max-width:300px}
  .wc-actions{display:flex;gap:8px;width:100%;justify-content:center}
  .wc-btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:13px;padding:10px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;transition:transform .12s}
  .wc-btn:active{transform:scale(.96)}
  .wc-btn svg{width:16px;height:16px}
  .wc-btn-create{background:var(--terre);color:#fff}
  .wc-btn-create.regen{background:var(--mist);color:var(--ink)}
  .wc-btn-share{background:var(--marine);color:#fff}

  /* Pop-up création de mot perso (premium) */
  .create-word-modal{position:relative;width:100%;max-width:380px;background:var(--surface);border:var(--border-sketch);border-radius:24px;box-shadow:var(--shadow-sketch-lg);padding:26px 22px 22px;text-align:center}
  .cw-step{display:flex;flex-direction:column;align-items:center;gap:14px}
  .cw-emoji{font-size:40px;line-height:1}
  .cw-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:21px;color:var(--marine);letter-spacing:-.01em;line-height:1.2}
  .cw-input{width:100%;border:var(--border-sketch-thin);border-radius:14px;padding:14px 16px;font-family:'Manrope',sans-serif;font-size:17px;font-weight:700;color:var(--ink);text-align:center;outline:none}
  .cw-input:focus{border-color:var(--marine)}
  .cw-cta{width:100%;background:var(--framboise);color:#fff;border:none;border-radius:15px;padding:15px 18px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transition:transform .12s}
  .cw-cta:active{transform:scale(.97)}
  .cw-cta:disabled{opacity:.55;cursor:default}
  .cw-cancel{background:none;border:none;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;padding:6px}
  .cw-spinner{width:38px;height:38px;border:3px solid var(--mist);border-top-color:var(--framboise);border-radius:50%;animation:cwSpin .8s linear infinite}
  @keyframes cwSpin{to{transform:rotate(360deg)}}
  .cw-loading-txt{font-size:18px;color:var(--ink-soft)}
  .cw-warn{font-size:16px;color:var(--terre-d,#993C1D);margin:-4px 0 2px;line-height:1.25}
  .cw-field{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left}
  .cw-field-lbl{font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
  .cw-field-input{width:100%;border:var(--border-sketch-thin);border-radius:12px;padding:11px 13px;font-family:'Manrope',sans-serif;font-size:16px;font-weight:600;color:var(--ink);outline:none}
  .cw-field-input:focus{border-color:var(--marine)}
  .cw-actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-top:4px}
  .cw-err-txt{font-size:19px;color:var(--ink-soft);line-height:1.25}
  .cw-mnemo-input{width:100%;border:var(--border-sketch-thin);border-radius:14px;padding:13px 15px;font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:600;color:var(--ink);outline:none;resize:none;line-height:1.4}
  .cw-mnemo-input:focus{border-color:var(--marine)}

  /* Pop-up streak (visu avancée) */
  .home-stat-card.clickable{cursor:pointer}
  .streak-modal{position:relative;width:100%;max-width:360px;background:var(--surface);border:var(--border-sketch);border-radius:24px;box-shadow:var(--shadow-sketch-lg);padding:28px 22px 24px;text-align:center}
  .streak-flame{font-size:46px;line-height:1}
  .streak-big{display:flex;flex-direction:column;align-items:center;margin-top:2px}
  .streak-big-count{font-family:'Caveat',cursive;font-weight:700;font-size:62px;line-height:1;color:var(--jaune-d,#C99211)}
  .streak-big-lbl{font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;color:var(--ink-soft);margin-top:-4px}
  .streak-record{margin-top:10px;display:inline-block;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;color:var(--jaune-d,#C99211);background:var(--jaune-soft,#FBEED0);border-radius:12px;padding:5px 12px}
  .streak-strip{display:flex;justify-content:center;gap:7px;margin:22px 0 4px}
  .streak-day{display:flex;flex-direction:column;align-items:center;gap:5px;width:36px}
  .streak-day-wd{font-family:'Manrope',sans-serif;font-weight:700;font-size:11px;color:var(--ink-soft);text-transform:uppercase}
  .streak-day-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;border:2px solid var(--line);background:var(--bg)}
  .streak-day.on .streak-day-ico{background:var(--jaune-soft,#FBEED0);border-color:var(--jaune,#F5B82E)}
  .streak-day.today .streak-day-ico{border-style:dashed;border-color:var(--marine);color:var(--ink-soft)}
  .streak-day.today .streak-day-wd{color:var(--marine)}
  .streak-day.off .streak-day-ico{opacity:.45}
  .streak-msg{font-family:'Caveat',cursive;font-size:20px;color:var(--ink-soft);line-height:1.25;margin-top:12px}

  /* Carte « Mes mots » sur l'accueil + actions propriétaire de la pop-up */
  .lvl-card.mywords{border-color:var(--framboise);background:linear-gradient(160deg, var(--framboise-soft,#FDE7EF) 0%, var(--surface) 78%)}
  .lvl-num.mywords-num{background:var(--framboise);color:#fff}
  .wc-owner-actions{display:flex;gap:18px;justify-content:center;margin-top:12px}
  .wc-mini-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;padding:4px}
  .wc-mini-btn svg{width:15px;height:15px}
  .wc-mini-btn.danger{color:var(--framboise)}

  /* Écran « Mes mots » : liste */
  .mywords-list{padding:6px 20px 4px;display:flex;flex-direction:column;gap:10px}
  .myword-row{display:flex;align-items:center;gap:13px;background:#fff;border:var(--border-sketch-thin);border-radius:16px;padding:11px 13px;box-shadow:var(--shadow-sketch-sm);cursor:pointer}
  .myword-row:active{transform:scale(.99)}
  .myword-thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;border:2px solid var(--terre-soft);flex-shrink:0}
  .myword-thumb.empty{display:grid;place-items:center;background:var(--bg);border-style:dashed;color:var(--ink-soft)}
  .myword-thumb.empty svg{width:24px;height:24px;opacity:.5}
  .myword-info{flex:1;min-width:0}
  .myword-target{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:var(--marine);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .myword-phon{font-weight:600;font-size:13px;color:var(--ink-soft)}
  .myword-tr{font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink-soft);margin-top:2px}
  .myword-row .chev{width:18px;height:18px;color:var(--ink-soft);flex-shrink:0;stroke:currentColor;stroke-width:2.4}
  .mywords-empty{padding:36px 20px;text-align:center}
  .mywords-empty-txt{font-family:'Caveat',cursive;font-size:21px;color:var(--ink-soft);line-height:1.3}
  .mywords-add{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 20px 28px;background:var(--framboise);color:#fff;border:none;border-radius:16px;padding:15px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;cursor:pointer;box-shadow:var(--shadow-sketch-sm);width:calc(100% - 40px)}
  .mywords-add:active{transform:scale(.98)}
  .mywords-add-plus{font-size:21px;line-height:1}

  /* Sections génériques */
  .prof-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px;box-shadow:var(--shadow)}
  .prof-section.disabled{opacity:.65}
  .prof-section-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;color:var(--marine);margin:0 0 14px;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
  .prof-section-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--framboise);box-shadow:0 0 0 2px var(--framboise-soft);flex-shrink:0}
  .prof-section-note{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-top:10px}
  /* Rappels : toggle + créneau */
  .prof-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:10px 14px;background:var(--jaune-soft);border:var(--border-sketch-thin);border-radius:14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}
  .prof-switch{appearance:none;-webkit-appearance:none;width:46px;height:27px;border-radius:14px;background:var(--mist);border:2px solid var(--ink);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s}
  .prof-switch::after{content:"";position:absolute;top:1.5px;left:1.5px;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--ink);transition:transform .15s}
  .prof-switch:checked{background:var(--turquoise)}
  .prof-switch:checked::after{transform:translateX(19px)}
  .prof-notif-hour{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;color:var(--ink-soft)}
  .prof-notif-select{font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:var(--ink);border:var(--border-sketch-thin);border-radius:12px;padding:8px 12px;background:#fff;cursor:pointer}

  /* Stats grid */
  .prof-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .prof-stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 14px;background:#fff;border:var(--border-sketch-thin);border-radius:14px;box-shadow:var(--shadow-sketch-sm);font-family:'Manrope',sans-serif;text-align:left;transition:transform .14s,box-shadow .14s}
  .prof-stat-value{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--marine);letter-spacing:-.01em;line-height:1.1}
  .prof-stat-lbl{font-size:12px;color:var(--ink-soft);font-weight:600}
  .prof-stat.clickable{cursor:pointer;border-color:var(--terre);background:linear-gradient(160deg, var(--terre-soft) 0%, var(--bg) 80%);transition:transform .12s,box-shadow .2s}
  .prof-stat.clickable:active{transform:scale(.97)}
  .prof-stat.clickable .prof-stat-value{color:var(--terre)}

  /* Abonnement */
  .prof-sub-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .prof-sub-btn{width:100%;background:var(--surface);color:var(--marine);border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);padding:12px 14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s,color .15s}
  .prof-sub-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .prof-sub-btn:active{transform:translate(1px,1px);box-shadow:none}
  .prof-sub-upgrade{background:var(--framboise);color:#fff;border-color:var(--ink);box-shadow:var(--shadow-sketch-lg);font-weight:800}
  .prof-sub-upgrade:hover{background:var(--framboise-d);box-shadow:var(--shadow-sketch-lg)}
  /* Actions de gestion d'abonnement volontairement discretes (ne pas inciter au desabonnement). */
  .prof-sub-btn.cv-muted{background:var(--surface);color:var(--ink-soft);border:1px solid var(--line);box-shadow:none;font-weight:700}
  .prof-sub-btn.cv-muted:hover{transform:none;color:var(--ink);background:var(--mist);box-shadow:none}
  .prof-sub-btn.cv-muted:active{transform:translate(1px,1px);box-shadow:none}
  .prof-sub-link{align-self:center;background:transparent;border:none;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;line-height:1.35;cursor:pointer;padding:4px 8px;text-decoration:underline;text-underline-offset:3px}
  .prof-sub-link:hover{color:var(--marine)}
  .prof-sub-active{display:inline-flex;align-items:center;gap:8px;background:var(--vert-soft);color:var(--marine);border:1px solid rgba(27,58,107,.12);border-radius:999px;padding:8px 12px;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px}
  .prof-sub-active::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--turquoise);box-shadow:0 0 0 2px rgba(84,190,170,.18)}
  .prof-debug-collection-btn{margin-top:12px;width:100%;background:#F7F7FA;color:#5B6472;border:1px dashed #AAB2BF;border-radius:10px;padding:9px 12px;font-family:'Manrope',sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;box-shadow:none;transition:background .12s,color .12s,border-color .12s}
  .prof-debug-collection-btn:hover{background:#ECEFF4;color:#303844;border-color:#7D8796}
  .prof-debug-collection-btn:active{transform:translateY(1px)}

  /* Toggle (langue + audio) */
  .prof-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--mist);padding:6px;border-radius:14px}
  .prof-toggle.three{grid-template-columns:1fr 1fr 1fr}
  .prof-toggle-opt{background:transparent;color:var(--ink-soft);border:none;border-radius:10px;padding:10px 10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer;transition:background .15s,color .15s}
  .prof-toggle-opt:hover{color:var(--marine)}
  .prof-toggle-opt.active{background:var(--turquoise);color:#FFF8F1;border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm)}

  /* Dropdowns "Langues de jeu" : 2 selects côte à côte. */
  .prof-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
  .prof-pair-field{display:flex;flex-direction:column;gap:6px}
  .prof-pair-lbl{font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;color:var(--ink-soft);letter-spacing:.01em}
  .prof-pair-select{appearance:none;-webkit-appearance:none;background:var(--mist) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 4l3 3 3-3' fill='none' stroke='%231b3a6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center/12px 12px;color:var(--marine);border:none;border-radius:12px;padding:11px 36px 11px 14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s}
  .prof-pair-select:hover{background-color:#eee5d9}
  .prof-pair-select:focus{outline:2px solid var(--marine);outline-offset:1px}

  /* Compte (bouton désactivé pour login futur) */
  .prof-account-btn{margin-top:12px;width:100%;background:var(--mist);color:var(--ink-soft);border:1px dashed var(--line);border-radius:12px;padding:13px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:not-allowed}

  /* Footer du profil */
  .prof-footer{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:4px;padding:18px 0 8px}
  .prof-footer-link{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;color:var(--marine);font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;padding:8px 12px;text-decoration:none;transition:opacity .2s}
  .prof-footer-link:active{opacity:.6}
  .prof-footer-link svg{width:16px;height:16px}
  .prof-footer-version{font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:6px;letter-spacing:.04em}
  .prof-reset-btn{margin-top:14px;background:transparent;border:1px solid rgba(224,122,63,.4);color:var(--terre);border-radius:12px;padding:10px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
  .prof-reset-btn:hover{background:var(--terre);color:#fff;border-color:var(--terre)}

  /* ============================================================
     HOME HERO — Loufoque : carte framboise inclinée, sticker découpé,
     l'accent principal et le seul vrai CTA au-dessus de la pliure
     ============================================================ */
  /* Le héro est désormais une rangée flex : contenu à gauche (texte + CTA),
     emplacement vide à droite pour la future mascotte griffonnée. */
  /* Carte en COLONNE : titre (haut-gauche) + mascotte (absolue, haut-droite, remplit
     le vide) + barre/boutons en rangée pleine largeur en bas. Plus compacte. */
  .home-hero-card{position:relative;display:flex;flex-direction:column;text-align:left;margin:14px 20px 8px;padding:15px 18px 15px;background:var(--framboise);color:#FFF8F1;border:var(--border-sketch);border-radius:20px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;font-family:inherit;transition:transform .14s,box-shadow .12s;overflow:hidden;transform:rotate(-.6deg)}
  .home-hero-content{min-width:0;display:flex;flex-direction:column;padding-right:108px}
  /* Mascotte logée en haut-droite, dans l'espace laissé libre par le titre. */
  .home-hero-mascot-img{position:absolute;right:-4px;top:2px;width:112px;height:auto;transform:rotate(3deg);pointer-events:none;filter:drop-shadow(1.5px 2.5px 0 var(--ink))}
  .home-hero-card:active{transform:rotate(-.6deg) translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
  .home-hero-card.takeoff{background:var(--jaune);color:var(--ink)}
  .home-hero-card.allDone{background:var(--vert);color:#FFF8F1}
  .home-hero-kicker{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:22px;letter-spacing:.005em;color:#FFF8F1;margin-bottom:4px;line-height:1.05}
  .home-hero-card.takeoff .home-hero-kicker,
  .home-hero-card.allDone .home-hero-kicker{color:var(--ink)}
  .home-hero-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.01em;line-height:1.1;color:#FFF8F1}
  .home-hero-card.takeoff .home-hero-title{color:var(--ink)}
  .home-hero-card.allDone .home-hero-title{color:#FFF8F1}
  .home-hero-sub{font-size:13.5px;margin-top:5px;font-weight:600;opacity:.92}
  .home-hero-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
  .home-hero-progress{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
  .home-hero-progress-bar{height:8px;background:rgba(255,248,241,.28);border:1.5px solid var(--ink);border-radius:6px;overflow:hidden}
  .home-hero-card.takeoff .home-hero-progress-bar{background:rgba(45,42,50,.15)}
  .home-hero-progress-bar i{display:block;height:100%;background:var(--jaune);transition:width .5s ease}
  .home-hero-progress-lbl{font-size:12px;font-weight:800;letter-spacing:.01em}
  .home-hero-progress-lbl.home-hero-badge{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--turquoise);color:#fff;border:1.5px solid var(--ink);box-shadow:1px 1px 0 var(--ink);font-size:13px;line-height:1}
  .home-hero-cta{flex-shrink:0;background:var(--jaune);color:var(--ink);border:var(--border-sketch-thin);border-radius:12px;padding:10px 16px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;box-shadow:var(--shadow-sketch-sm)}
  .home-hero-card.takeoff .home-hero-cta{background:var(--framboise);color:#FFF8F1}
  .home-hero-card.allDone .home-hero-cta{background:var(--jaune);color:var(--ink)}

  /* ============================================================
     HOME SECTION TITLE — titre manuscrit "tes niveaux ↓"
     ============================================================ */
  .home-section-title{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:26px;line-height:1;color:var(--ink);padding:12px 22px 4px;margin-top:6px}

  /* ============================================================
     HOME GOAL (legacy single-line — désormais remplacé par stats-row)
     ============================================================ */
  .home-goal{margin:10px 20px 2px;display:flex;align-items:center;gap:8px;font-family:'Manrope',sans-serif;font-size:13.5px;color:var(--ink-soft);font-weight:600}
  .home-goal-emoji{font-size:16px}
  .home-goal-text{letter-spacing:.005em}

  /* ============================================================
     HOME FOOTNOTE : 0/1000 mots déplacé en bas, version discrète
     ============================================================ */
  .home-footnote{margin:6px 20px calc(20px + env(safe-area-inset-bottom));font-size:11.5px;color:var(--ink-soft);font-weight:600;text-align:center}
  .home-footnote-lbl{display:block;margin-bottom:5px;letter-spacing:.02em}
  .global-bar.tiny{height:4px;max-width:200px;margin:0 auto}

  /* ============================================================
     LEVEL CARDS — Loufoque : lignes blanches, contour feutre,
     pastille numéro colorée. État à venir = bordure pointillée + opacité.
     ============================================================ */
  .list.compact{padding:6px 20px 6px;gap:10px}
  /* Brief univers plongée : la liste des niveaux se lit comme une descente
     sous-marine. Gradient vertical turquoise pâle (surface) → marine profond
     (abysses). Les cards restent en crème pour bien ressortir sur l'eau. */
  #levelList.list.compact{
    padding:14px 14px 18px;
    border-radius:20px;
    background:linear-gradient(180deg,
      var(--turquoise-soft) 0%,
      var(--turquoise) 22%,
      #1f9fb3 45%,
      #15648a 70%,
      #0c2f4f 100%);
    position:relative;
    overflow:hidden;
    margin:6px 14px 0;
  }
  /* Quelques bulles fantômes en arrière-plan pour renforcer l'effet aquatique. */
  #levelList.list.compact::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 4px, transparent 5px),
      radial-gradient(circle at 78% 32%, rgba(255,255,255,.12) 7px, transparent 8px),
      radial-gradient(circle at 25% 58%, rgba(255,255,255,.10) 5px, transparent 6px),
      radial-gradient(circle at 88% 72%, rgba(255,255,255,.08) 8px, transparent 9px),
      radial-gradient(circle at 18% 88%, rgba(255,255,255,.10) 6px, transparent 7px);
    background-repeat:no-repeat;
  }
  /* Les cards passent au-dessus du fond aquatique (z-index relatif). */
  #levelList.list.compact .lvl-card{position:relative;z-index:1}
  .lvl-card.compact{padding:12px 14px;border-radius:14px;gap:12px;min-height:0;background:var(--surface);border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm)}
  .lvl-card.compact:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .lvl-card.compact .lvl-num{width:38px;height:38px;border-radius:11px;font-size:15px;font-family:'Manrope',sans-serif;font-weight:800;border:var(--border-sketch-thin);box-shadow:1px 1px 0 var(--ink)}
  .lvl-card.compact .lvl-info .t{font-size:15px;font-weight:700;color:var(--ink)}
  .lvl-card.compact .lvl-info .s{font-size:12.5px;margin-top:1px;color:var(--ink-soft)}
  /* Sous-titre Caveat (phrase plongée) — un peu plus grand car font scripte. */
  .lvl-card.compact .lvl-info .s.handwriting{font-size:15px;color:var(--tangerine);font-weight:700;line-height:1.1;margin-top:2px}
  /* Sous-titre Caveat dans l'en-tête de l'écran niveau. */
  .hd-sub.handwriting{font-size:18px;color:var(--tangerine);font-weight:700;line-height:1.1;margin-top:4px}
  .lvl-card.compact .lvl-mini{display:none}

  /* État ACTIVE — niveau en cours : pastille turquoise + anneau de progression,
     fond blanc (la framboise est réservée au héro). La pastille colorée +
     l'anneau suffisent largement à signaler "en cours". */
  .lvl-card.compact.active{background:var(--surface)}
  .lvl-card.compact.active .lvl-num{background:var(--turquoise);color:var(--ink)}
  .lvl-card.compact.active .lvl-info .t{color:var(--ink)}

  /* État IDLE — à venir : bordure pointillée + opacité (effet "verrouillé doux") */
  .lvl-card.compact.idle{opacity:.62;border:2px dashed var(--ink);box-shadow:none}
  .lvl-card.compact.idle .lvl-num{background:var(--bg);color:var(--ink-soft);border-style:dashed}
  .lvl-card.compact.idle .lvl-info .t{color:var(--ink-soft)}

  /* État DONE — niveau terminé : pastille turquoise */
  .lvl-card.compact.done{background:var(--turquoise-soft)}
  .lvl-card.compact.done .lvl-num{background:var(--turquoise);color:var(--ink)}
  .lvl-card.compact.done .lvl-check{background:var(--turquoise);border:var(--border-sketch-thin)}

  /* Carte décollage (Я jaune) en tête de liste — visible mais ne doit pas
     rivaliser avec le héro. Padding/pastille un cran plus serrés que les
     autres cartes en cours pour réduire le poids visuel. */
  .lvl-card.compact.takeoff{background:var(--jaune-soft);transform:rotate(-.4deg);padding:9px 12px}
  .lvl-card.compact.takeoff .lvl-num{width:32px;height:32px;font-size:14px;background:var(--jaune);color:var(--ink)}
  .lvl-card.compact.takeoff .lvl-info .t{color:var(--ink);font-size:14px}
  .lvl-card.compact.takeoff .lvl-info .s{font-size:11.5px}

  /* Progress ring (lot 5bis) — affiché à droite des cartes "active" uniquement */
  .lvl-ring{width:22px;height:22px;flex-shrink:0}

  /* ============================================================
     SUB-CARDS (écran NIVEAU) — états (lot 5bis)
     ============================================================ */
  /* Suppression des steps vides : la div .sub-steps n'est plus rendue. */
  .sub-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .14s,opacity .2s}
  .sub-card .sub-top{display:flex;align-items:center;gap:12px}
  .sub-card .sub-ico{width:36px;height:36px;border-radius:11px;font-size:16px}

  /* État ACTIVE (bloc en cours) : barre latérale framboise + halo marine doux */
  .sub-card.active{background:linear-gradient(135deg, var(--marine-soft) 0%, #fff 65%);border-color:var(--ink)}
  .sub-card.active::before{background:var(--framboise)}
  .sub-card.active .sub-ico{background:var(--marine);color:#fff;border-color:var(--ink);font-size:13px}
  .sub-card.active .sub-meta .t{color:var(--marine)}
  .sub-card.active .badge.go-active{background:var(--terre);color:#fff;border:1px solid var(--ink);box-shadow:1px 1px 0 var(--ink)}

  /* État IDLE (non commencé) : doux et discret, jamais terne */
  .sub-card.idle{box-shadow:1px 1px 0 var(--ink),0 1px 3px rgba(27,36,48,.04)}
  .sub-card.idle .sub-ico{background:var(--mist);color:var(--ink-soft);font-size:22px;line-height:0}
  .sub-card.idle .sub-meta .t{color:var(--ink)}
  .sub-card.idle .sub-meta .ru-t{color:var(--ink-soft)}
  .sub-card.idle .badge.go{background:#fff;color:var(--marine);border:1px solid var(--marine);box-shadow:1px 1px 0 var(--marine)}

  /* Indicator on the right (ring or check) */
  .sub-indicator{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:grid;place-items:center}
  .sub-indicator.ring{width:24px;height:24px}
  .sub-indicator.done{width:26px;height:26px;border-radius:50%;background:var(--vert);color:#fff}
  .sub-indicator.done svg{width:14px;height:14px}
  /* Adjust badge spacing to avoid overlap with indicator */
  .sub-card .sub-top .badge{margin-right:28px}

  /* ============================================================
     TIPS page (Conseils éditoriaux, lot 5)
     ============================================================ */
  .tips-wrap{flex:1;overflow-y:auto;padding:6px 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
  .tip-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px 20px 64px;box-shadow:var(--shadow)}
  .tip-num{position:absolute;left:18px;top:18px;width:34px;height:34px;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px}
  .tip-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;color:var(--marine);line-height:1.25;margin:2px 0 8px;letter-spacing:-.005em}
  .tip-body{font-size:14.5px;color:var(--ink);line-height:1.6}
  .tips-footer{margin-top:6px;padding:18px 18px;background:var(--jaune-soft);border-radius:16px;font-size:13.5px;color:var(--jaune-d);line-height:1.6;font-style:italic;text-align:center}

  /* ============================================================
     QUIZ / RÉVISION (lot 4 — QCM + reverse mnémo)
     ============================================================ */
  .quiz-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 20px 0;text-align:center}
  .quiz-kicker{font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terre);margin-bottom:14px}
  .quiz-prompt{font-family:'Manrope',sans-serif;font-weight:800;font-size:42px;letter-spacing:-.015em;line-height:1.12;color:var(--marine);margin-bottom:6px;word-break:break-word}
  /* For mnemo prompts (long text) we want a smaller, more readable size */
  .quiz-prompt.mnemo{font-family:'Manrope',sans-serif;font-weight:500;font-size:20px;line-height:1.5;color:var(--ink);font-style:italic;letter-spacing:0}
  .quiz-audio{margin:10px auto 22px;background:var(--marine-soft);color:var(--marine);border:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .12s,background .2s}
  .quiz-audio:active{transform:scale(.92)}
  .quiz-audio:hover{background:var(--marine);color:#fff}
  .quiz-audio svg{width:20px;height:20px}
  .quiz-audio.hidden{visibility:hidden}
  .quiz-audio.solo{width:88px;height:88px;margin:18px auto 26px;border:var(--border-sketch);box-shadow:var(--shadow-sketch)}
  .quiz-audio.solo svg{width:38px;height:38px}

  .quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;margin-top:6px}
  .quiz-option{background:#fff;border:2px solid var(--line);border-radius:18px;padding:18px 14px;font-family:'Manrope',sans-serif;font-weight:600;font-size:16px;color:var(--ink);cursor:pointer;min-height:74px;display:grid;place-items:center;text-align:center;box-shadow:var(--shadow);transition:transform .12s,border-color .2s,background .2s}
  .quiz-option:not(:disabled):active{transform:scale(.985)}
  .quiz-option:not(:disabled):hover{border-color:var(--marine)}
  .quiz-option.cyrillic{font-family:'Manrope',sans-serif;font-weight:700;font-size:21px;color:var(--marine);letter-spacing:-.01em}
  .quiz-option:disabled{cursor:default;opacity:1}
  .quiz-option.correct{background:linear-gradient(160deg,var(--vert-soft),#fff);border-color:var(--vert);color:var(--vert);animation:pop .25s ease}
  .quiz-option.correct.cyrillic{color:var(--vert)}
  .quiz-option.wrong{background:linear-gradient(160deg,var(--terre-soft),#fff);border-color:var(--terre);color:var(--terre);animation:shake .3s ease}
  .quiz-option.wrong.cyrillic{color:var(--terre)}
  /* Épreuve image → mnémo : options texte (petites phrases), alignées à gauche */
  .quiz-option-mnemo{place-items:center start;text-align:left;font-weight:600;font-size:14.5px;line-height:1.35;padding:14px 15px;min-height:0}
  @keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-3px)}
    80%{transform:translateX(3px)}
  }

  /* Reverse QCM — options visuelles (type targetToImage) : 4 images en grille 2×2 */
  .quiz-image-options{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;margin-top:6px}
  .quiz-image-option{background:#fff;border:2px solid var(--line);border-radius:18px;padding:6px;cursor:pointer;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;box-shadow:var(--shadow);transition:transform .12s,border-color .2s,background .2s}
  .quiz-image-option:not(:disabled):active{transform:scale(.985)}
  .quiz-image-option:not(:disabled):hover{border-color:var(--marine)}
  .quiz-image-option:disabled{cursor:default}
  .quiz-image-option img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;background:#fff}
  .quiz-image-option.correct{background:linear-gradient(160deg,var(--vert-soft),#fff);border-color:var(--vert);animation:pop .25s ease}
  .quiz-image-option.wrong{background:linear-gradient(160deg,var(--terre-soft),#fff);border-color:var(--terre);animation:shake .3s ease}

  /* Reverse QCM — image+clavier (type imageToKeyboard) */
  .quiz-keyboard-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
  .quiz-kb-input{min-height:60px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-family:'Manrope',sans-serif;font-weight:700;font-size:32px;letter-spacing:-.01em;color:var(--marine);min-width:200px}
  .quiz-kb-slot{display:inline-block;width:14px;height:3px;background:var(--line);border-radius:2px;vertical-align:middle;margin:0 3px}
  .quiz-kb-input.correct{color:var(--vert);animation:pop .25s ease}
  .quiz-kb-input.wrong{color:var(--terre);animation:shake .3s ease}
  .quiz-keyboard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;width:100%;max-width:420px}
  .quiz-key{background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px 0;font-family:'Manrope',sans-serif;font-weight:700;font-size:20px;color:var(--marine);cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,border-color .2s,background .2s}
  .quiz-key:not(:disabled):active{transform:scale(.92);background:var(--marine-soft)}
  .quiz-key:not(:disabled):hover{border-color:var(--marine)}
  .quiz-key:disabled{opacity:.45;cursor:default}
  .quiz-kb-backspace{background:var(--marine-soft);color:var(--marine);border:none;border-radius:14px;padding:10px 22px;display:grid;place-items:center;cursor:pointer;width:96px;height:42px;transition:transform .12s,background .2s}
  .quiz-kb-backspace:not(:disabled):active{transform:scale(.92);background:var(--marine);color:#fff}
  .quiz-kb-backspace:disabled{opacity:.4;cursor:default}
  .quiz-kb-backspace svg{width:22px;height:22px}
  .quiz-kb-hint{background:var(--jaune,#F5B82E);color:var(--ink);border:none;border-radius:13px;padding:10px 22px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;cursor:pointer;transition:transform .12s}
  .quiz-kb-hint:not(:disabled):active{transform:scale(.94)}
  .quiz-kb-hint:disabled{opacity:.4;cursor:default}

  /* Reverse QCM — image en grand pour les types image* (sans texte de mnémo) */
  .quiz-mnemo-img.large{width:240px;height:240px;border-radius:22px}

  .match-hud{margin-top:12px;border:var(--border-sketch);border-radius:16px;padding:10px 12px;background:linear-gradient(135deg,#20D0C2 0%,#E13B83 100%);color:#fff;box-shadow:var(--shadow-sketch);text-align:left}
  .match-hud-main{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:'Manrope',sans-serif;font-weight:900;font-size:14px;line-height:1.15}
  .match-hud-label,.match-hud-score{min-width:0}
  .match-hud-score{text-align:right}
  .match-hud-sub{margin-top:4px;font-family:'Caveat',cursive;font-size:17px;line-height:1;color:rgba(255,255,255,.9)}
  .quiz-end{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 20px}
  .quiz-end-card{background:#fff;border-radius:24px;padding:38px 28px;box-shadow:var(--shadow-lg);text-align:center;max-width:340px;width:100%;animation:pop .4s cubic-bezier(.34,1.56,.5,1)}
  .quiz-end-medal{font-size:60px;line-height:1;margin-bottom:14px}
  .quiz-end-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;color:var(--marine);letter-spacing:-.02em}
  .quiz-end-score{font-family:'Manrope',sans-serif;font-weight:700;font-size:30px;color:var(--marine);margin-top:14px}
  .quiz-end-stats{font-size:14px;color:var(--ink-soft);margin:8px 0 24px;line-height:1.5}
  .quiz-end-actions{display:flex;flex-direction:column;gap:10px}
  .quiz-end-actions .bravo-btn{width:100%}
  .match-result-lines{display:flex;flex-direction:column;gap:8px;margin-top:4px;text-align:left}
  .match-result-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px solid var(--line);border-radius:14px;padding:9px 10px;background:#fff}
  .match-result-round{font-family:'Manrope',sans-serif;font-size:13px;font-weight:900;color:var(--marine)}
  .match-result-points{font-family:'Manrope',sans-serif;font-size:13px;font-weight:800;color:var(--ink)}
  .match-result-winner{font-family:'Caveat',cursive;font-size:17px;color:var(--ink-soft);white-space:nowrap}
  .match-end-secondary{background:#fff;color:var(--marine);border:2px solid var(--marine);box-shadow:none}

  /* Home : bloc Révisions — titre manuscrit + 2 boutons compacts côte à côte.
     Layout horizontal : icône emoji à gauche, label + sous-ligne à droite. */
  .home-revisions{margin:10px 20px 4px;display:flex;flex-direction:column;gap:6px}
  .home-revisions-title{font-size:20px;color:var(--ink);line-height:1;margin-left:2px;text-transform:lowercase}
  /* Entrée principale SRS sur l'accueil */
  .home-dive-btn{display:flex;align-items:center;gap:12px;width:100%;border:var(--border-sketch);border-radius:16px;padding:13px 15px;background:linear-gradient(135deg,var(--marine) 0%,var(--marine-d,#13294b) 100%);color:#fff;box-shadow:var(--shadow-sketch-lg);cursor:pointer;transition:transform .12s,box-shadow .12s;margin-bottom:8px}
  .home-dive-btn:active{transform:translate(1px,2px);box-shadow:var(--shadow-sketch)}
  .home-dive-ico{font-size:26px;line-height:1;flex-shrink:0}
  .home-dive-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;text-align:left}
  .home-dive-lbl{font-family:'Manrope',sans-serif;font-weight:800;font-size:15.5px}
  .home-dive-sub{font-family:'Caveat',cursive;font-size:15px;color:rgba(255,255,255,.85);line-height:1.1}
  .home-dive-btn .chev{width:18px;height:18px;color:rgba(255,255,255,.8);stroke:currentColor;stroke-width:2.4;flex-shrink:0}
  .home-parle-btn{background:linear-gradient(135deg,var(--jaune),var(--jaune-d))}
  .home-parle-btn .home-dive-lbl{color:var(--ink)}
  .home-parle-btn .home-dive-sub,.home-parle-btn .chev{color:rgba(27,36,48,.78)}
  .home-oral-btn{background:linear-gradient(135deg,var(--vert),var(--vert-d,#257B4B))}
  .home-beta-badge{align-self:flex-start;margin-top:4px;padding:2px 7px;border:1.5px solid rgba(255,255,255,.78);border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-family:'Manrope',sans-serif;font-size:9px;font-weight:900;line-height:1.1;text-transform:uppercase;letter-spacing:0}

  /* Centre de révisions : option guidée + 3 sections */
  .rev-list{padding:8px 20px 24px;display:flex;flex-direction:column;gap:12px}
  .rev-guided{display:flex;align-items:center;gap:13px;width:100%;border:var(--border-sketch);border-radius:18px;padding:16px 16px;background:linear-gradient(135deg,var(--framboise) 0%,#C0306B 100%);color:#fff;box-shadow:var(--shadow-sketch-lg);cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:left}
  .rev-guided:active{transform:translate(1px,2px);box-shadow:var(--shadow-sketch)}
  .rev-guided-ico{font-size:28px;line-height:1;flex-shrink:0}
  .rev-guided-body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .rev-guided-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px}
  .rev-guided-sub{font-family:'Caveat',cursive;font-size:16px;color:rgba(255,255,255,.9);line-height:1.1}
  .rev-guided-empty{font-family:'Caveat',cursive;font-size:19px;color:var(--ink-soft);text-align:center;padding:24px 12px;line-height:1.3}
  .rev-sections-label{font-family:'Caveat',cursive;font-size:17px;color:var(--ink-soft);text-align:center;margin:4px 0 -2px;text-transform:lowercase}
  .rev-card{background:#fff;border:var(--border-sketch);border-radius:18px;padding:15px 16px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;transition:transform .12s,box-shadow .12s}
  .rev-card:not(.rev-empty):active{transform:translate(1px,2px);box-shadow:var(--shadow-sketch)}
  .rev-card:nth-child(1){transform:rotate(-0.6deg)}
  .rev-card:nth-child(2){transform:rotate(0.5deg)}
  .rev-card:nth-child(3){transform:rotate(-0.4deg)}
  .rev-card-top{display:flex;align-items:center;gap:12px}
  .rev-card-emoji{font-size:30px;line-height:1;flex-shrink:0}
  .rev-card-head{flex:1;min-width:0}
  .rev-card-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:21px;color:var(--marine);line-height:1.1}
  .rev-card-line{font-family:'Caveat',cursive;font-size:19px;color:var(--ink-soft);line-height:1.15;margin-top:2px}
  .rev-card-count{font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--framboise);line-height:1;flex-shrink:0;background:transparent;border:none;padding:0}
  .rev-card-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:10px;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;color:var(--marine);text-transform:lowercase}
  .rev-card-meta .chev{width:16px;height:16px;stroke:currentColor;stroke-width:2.6}
  .rev-card-chev{width:16px;height:16px;stroke:var(--ink-soft);stroke-width:2.6;flex-shrink:0;margin-left:-4px}
  .rev-card-empty{font-family:'Caveat',cursive;font-size:19px;color:var(--ink-soft);margin-top:8px;text-align:right}
  .rev-card.rev-empty{cursor:default;opacity:.78}
  .rev-card.rev-empty .rev-card-count{color:var(--ink-soft)}
  .rev-card-betenoire{border-color:var(--tangerine);background:linear-gradient(160deg,var(--tangerine-soft,#FFE2CC) 0%,#fff 80%)}
  .rev-card-tendres{border-color:var(--turquoise);background:linear-gradient(160deg,var(--turquoise-soft,#D6F7F2) 0%,#fff 80%)}
  .rev-card-rafraichir{border-color:var(--marine);background:linear-gradient(160deg,var(--marine-soft,#FDE7EF) 0%,#fff 80%)}
  .rev-card-anchor{border-color:var(--framboise);background:linear-gradient(160deg,var(--framboise-soft,#FDE7EF) 0%,#fff 80%)}
  .rev-match-card{position:relative;overflow:hidden;margin-top:4px;border:3px solid var(--ink);border-radius:18px;padding:18px 16px 16px;background:linear-gradient(135deg,#19D6C5 0%,#F53B86 100%);color:#fff;box-shadow:7px 8px 0 rgba(27,36,48,.26);display:flex;flex-direction:column;gap:14px;transform:rotate(.6deg)}
  .rev-match-card::after{content:"";position:absolute;right:-28px;top:-34px;width:110px;height:110px;border:3px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(255,255,255,.12);pointer-events:none}
  .rev-match-copy,.rev-match-cta,.rev-match-gate{position:relative;z-index:1}
  .rev-match-eyebrow{display:inline-block;border:2px solid rgba(255,255,255,.84);border-radius:999px;padding:3px 9px;background:rgba(27,36,48,.18);font-family:'Manrope',sans-serif;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0;color:#fff}
  .rev-match-title{margin-top:8px;font-family:'Manrope',sans-serif;font-weight:900;font-size:25px;line-height:1.05;letter-spacing:0;color:#fff;text-shadow:0 2px 0 rgba(27,36,48,.2)}
  .rev-match-line{margin-top:5px;font-family:'Caveat',cursive;font-size:19px;line-height:1.1;color:rgba(255,255,255,.92)}
  .rev-match-cta{align-self:flex-start;border:3px solid var(--ink);border-radius:14px;padding:12px 16px;background:#fff;color:var(--marine);box-shadow:4px 5px 0 rgba(27,36,48,.32);font-family:'Manrope',sans-serif;font-weight:900;font-size:15px;cursor:pointer;transition:transform .12s,box-shadow .12s}
  .rev-match-cta:active{transform:translate(1px,2px);box-shadow:2px 3px 0 rgba(27,36,48,.32)}
  .rev-match-gate{border:2px solid rgba(255,255,255,.62);border-radius:13px;padding:8px 10px;background:rgba(255,255,255,.14);font-family:'Caveat',cursive;font-size:18px;line-height:1.05;color:#fff}

  /* Grille « Mes cartes à ancrer » */
  .anchor-grid{padding:10px 16px 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .anchor-cell{display:flex;flex-direction:column;align-items:stretch;gap:6px;background:#fff;border:var(--border-sketch-thin);border-radius:16px;padding:10px;box-shadow:var(--shadow-sketch-sm);cursor:pointer;text-align:center;font-family:'Manrope',sans-serif}
  .anchor-cell:active{transform:scale(.97)}
  .anchor-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:2px solid var(--terre-soft)}
  .anchor-thumb.empty{display:grid;place-items:center;background:var(--bg);border-style:dashed;color:var(--ink-soft)}
  .anchor-thumb.empty svg{width:34px;height:34px;opacity:.5}
  .anchor-cell-word{font-weight:800;font-size:15px;color:var(--marine);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .anchor-cell-tr{font-size:12.5px;color:var(--ink-soft);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .anchor-empty{grid-column:1 / -1;text-align:center;font-family:'Caveat',cursive;font-size:20px;color:var(--ink-soft);padding:40px 16px;line-height:1.3}

  /* Aperçu avant ancrage : carte flottante (image + mnémo) + CTA */
  .anchor-pv-wrap{padding:20px 18px 36px;display:flex;flex-direction:column;align-items:center;gap:24px;max-width:420px;margin:0 auto}
  .anchor-pv-card{width:100%;max-width:320px;background:#fff;border:var(--border-sketch);border-radius:24px;box-shadow:var(--shadow-sketch-lg);overflow:hidden;transform:rotate(-.5deg);animation:anchorPvFloat 4s ease-in-out infinite}
  @keyframes anchorPvFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-6px) rotate(.4deg)}}
  .anchor-pv-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:var(--border-sketch)}
  .anchor-pv-body{padding:16px 18px 20px;text-align:center}
  .anchor-pv-word{font-weight:800;font-size:24px;color:var(--marine);line-height:1.15}
  .anchor-pv-tr{font-size:14px;color:var(--ink-soft);margin-top:3px}
  .anchor-pv-mnemo{margin-top:14px;font-family:'Caveat',cursive;font-size:20px;line-height:1.32;color:var(--ink);background:var(--bg);border-radius:14px;padding:12px 14px;text-align:left}
  .anchor-pv-mnemo.empty{font-style:italic;color:var(--ink-soft);text-align:center}
  .anchor-pv-cta{width:100%;max-width:320px;padding:16px;background:var(--marine);color:#fff;font-weight:800;font-size:17px;border:var(--border-sketch);border-radius:18px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;font-family:'Manrope',sans-serif}
  .anchor-pv-cta:active{transform:translate(2px,2px);box-shadow:none}

  /* Session d'ancrage : 5 épreuves */
  .anchor-ep{padding:12px 20px 28px;display:flex;flex-direction:column;gap:18px}
  .anchor-ep-prompt{display:flex;align-items:center;justify-content:center;min-height:120px;text-align:center}
  .anchor-prompt-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:34px;color:var(--marine);line-height:1.1}
  .anchor-prompt-tr{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;color:var(--framboise);line-height:1.15}
  .anchor-prompt-img{max-width:230px;max-height:230px;border-radius:16px;border:2px solid var(--terre-soft);object-fit:contain}
  .anchor-audio-big{width:90px;height:90px;border-radius:50%;border:var(--border-sketch);background:var(--marine-soft);color:var(--marine);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sketch)}
  .anchor-audio-big svg{width:40px;height:40px}
  .anchor-ep-options{display:flex;flex-direction:column;gap:10px}
  .anchor-opt{border:var(--border-sketch);border-radius:15px;background:#fff;color:var(--ink);padding:15px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transition:transform .1s}
  .anchor-opt:active{transform:scale(.98)}
  .anchor-opt.correct{background:var(--turquoise);color:#fff;border-color:var(--turquoise)}
  .anchor-opt.wrong{background:var(--tangerine);color:#fff;border-color:var(--tangerine)}
  /* Épreuve 6 (mot→image) : grille d'options visuelles */
  .anchor-ep-options--grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
  .anchor-opt-img{padding:6px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;font-size:0}
  .anchor-opt-img img{width:100%;height:100%;object-fit:cover;border-radius:11px;display:block}
  .anchor-opt-img.correct{background:var(--turquoise-soft,#D5F1ED);border-color:var(--turquoise)}
  .anchor-opt-img.wrong{background:var(--tangerine-soft,#FFE2CC);border-color:var(--tangerine)}
  /* Épreuve image → mnémo : boutons texte (petites phrases), alignés à gauche */
  .anchor-ep-options--mnemo{gap:10px}
  .anchor-opt-mnemo{text-align:left;font-weight:600;font-size:15px;line-height:1.35;white-space:normal;padding:13px 15px}
  /* Épreuve 7 (image→audio) : options sonores */
  .anchor-opt-audio{display:flex;align-items:center;gap:12px;justify-content:flex-start}
  .anchor-opt-audio .anchor-audio-ic{width:24px;height:24px;flex:0 0 auto;color:var(--marine,#1B3A6B)}
  .anchor-opt-audio.armed{border-color:var(--marine,#1B3A6B);box-shadow:var(--shadow-sketch)}
  .anchor-ep-hint{margin:10px 0 0;text-align:center;font-family:'Caveat',cursive;font-weight:700;font-size:16px;color:var(--ink-soft)}
  /* Indice écriture fantôme / alternée : lettre en filigrane sur un slot vide */
  .quiz-kb-slot.anchor-hint{width:auto;height:auto;background:none;color:var(--ink);opacity:.26;font-weight:800}
  /* Épreuve 5 : écriture */
  .anchor-ep-write{display:flex;flex-direction:column;gap:14px}
  .anchor-write-input{width:100%;border:var(--border-sketch);border-radius:14px;padding:14px 16px;font-family:'Manrope',sans-serif;font-size:22px;font-weight:800;color:var(--marine);text-align:center;outline:none;background:#fff}
  .anchor-write-input.correct{color:var(--vert);border-color:var(--vert);background:var(--vert-soft)}
  .anchor-write-input.wrong{color:var(--terre);border-color:var(--terre)}
  .anchor-kbd{display:grid;grid-template-columns:repeat(6,minmax(38px,46px));gap:6px;justify-content:center}
  .akbd-key{width:100%;min-width:0;height:40px;padding:0 6px;border:1.5px solid var(--ink);border-radius:9px;background:#fff;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:700;font-size:17px;cursor:pointer;box-shadow:1px 1px 0 var(--ink)}
  .akbd-key:active{transform:translate(1px,1px);box-shadow:none}
  .akbd-back{min-width:0;background:var(--mist)}
  .anchor-write-actions{display:flex;gap:10px}
  .anchor-write-help{flex:0 0 auto;background:var(--jaune,#F5B82E);color:var(--ink);border:none;border-radius:13px;padding:13px 18px;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;cursor:pointer}
  .anchor-write-validate{flex:1;background:var(--turquoise);color:#fff;border:none;border-radius:13px;padding:13px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;cursor:pointer}
  /* Flash « ancré ! » */
  .anchor-done-flash{background:rgba(27,58,107,.92);backdrop-filter:blur(3px)}
  .anchor-done-flash.show{display:flex}
  .anchor-done-inner{display:flex;flex-direction:column;align-items:center;gap:12px;animation:ovIn .3s ease}
  .anchor-done-emoji{font-size:64px;line-height:1}
  .anchor-done-text{font-family:'Caveat',cursive;font-weight:700;font-size:46px;color:#fff}

  /* Écran de fin de session de révision (chaleureux, sans score) */
  .revdone-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:18px;padding:24px;text-align:center}
  .revdone-emoji{font-size:64px;line-height:1}
  .revdone-title{font-family:'Caveat',cursive;font-weight:700;font-size:34px;color:var(--marine);line-height:1.15;max-width:300px}
  .revdone-actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;margin-top:6px}
  .revdone-btn{border:var(--border-sketch);border-radius:15px;padding:14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;cursor:pointer;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch)}
  .revdone-btn.primary{background:var(--marine);color:#fff}
  .revdone-btn:active{transform:translate(1px,2px);box-shadow:0 0 0 0 var(--ink)}
  .home-revisions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
  .home-rev-btn{border:var(--border-sketch-thin);border-radius:14px;padding:8px 10px;font-family:'Manrope',sans-serif;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .12s,box-shadow .12s;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch);text-align:left;min-height:54px}
  .home-rev-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .home-rev-icon{font-size:22px;line-height:1;flex-shrink:0}
  .home-rev-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
  .home-rev-lbl{font-weight:800;font-size:13px;letter-spacing:-.005em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-rev-sub{font-weight:600;font-size:11px;color:var(--ink-soft);letter-spacing:.01em;line-height:1.1}
  .home-rev-loufoque{background:var(--turquoise)}
  .home-rev-loufoque:hover{background:var(--turquoise-d);color:#FFF8F1}
  .home-rev-loufoque:hover .home-rev-sub{color:rgba(255,248,241,.85)}
  .home-rev-tempete{background:var(--jaune)}
  .home-rev-tempete:hover{background:var(--jaune-d)}
  .home-rev-btn.disabled{opacity:.5;filter:grayscale(.3)}

  /* Popup choix taille de session */
  .session-size-card{max-width:360px;text-align:center}
  .session-size-intro{font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--ink);margin:4px 0 16px}
  .session-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
  .session-size-opt{border:var(--border-sketch-thin);border-radius:14px;padding:18px 8px;font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--ink);background:#fff;cursor:pointer;box-shadow:var(--shadow-sketch);transition:transform .12s,background .2s}
  .session-size-opt:not(:disabled):active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .session-size-opt:not(:disabled):hover{background:var(--jaune)}
  .session-size-opt:disabled{opacity:.4;cursor:default}
  .session-size-note{font-family:'Manrope',sans-serif;font-size:12px;color:var(--ink-soft);margin-top:8px;min-height:14px}

  /* ============================================================
     AUDIO ICONS (lot 3 — speak buttons on cards, stories, mini-stories)
     ============================================================ */
  /* Circular icon on study cards (under the word) */
  .card-audio{margin:6px auto 0;background:var(--marine-soft);color:var(--marine);border:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .12s,background .2s}
  .card-audio:active{transform:scale(.92)}
  .card-audio:hover{background:var(--marine);color:#fff}
  .card-audio svg{width:20px;height:20px}

  /* Story header row: badge on the left, audio button on the right */
  .story-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
  .story-head .story-badge{margin-bottom:0}
  .story-audio{background:var(--marine);color:#fff;border:none;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:transform .12s,background .2s}
  .story-audio:active{transform:scale(.92)}
  .story-audio:hover{background:var(--marine-d)}
  .story-audio svg{width:20px;height:20px}

  /* Cheer mini-story row: phrase on the left, small audio chip on the right */
  .mini-row{display:flex;align-items:flex-start;gap:10px}
  .mini-row .mini-ru{flex:1}
  .mini-audio{background:var(--jaune-d);color:#fff;border:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:transform .12s,background .2s;margin-top:2px}
  .mini-audio:active{transform:scale(.9)}
  .mini-audio:hover{background:var(--marine)}
  .mini-audio svg{width:17px;height:17px}

  /* ============================================================
     TAKEOFF (alphabet learning, lot 2 phase C)
     ============================================================ */
  /* Home card for "Décollage", visually distinct from level cards: jaune accent
     because the alphabet learning is the warm "first step" experience. */
  .lvl-card.takeoff{background:linear-gradient(160deg,var(--jaune-soft),#fff);border-color:#F0DEB0}
  .lvl-card.takeoff .lvl-num{background:var(--jaune);color:var(--marine-d);font-size:22px}
  .lvl-card.takeoff.done{background:linear-gradient(160deg,var(--vert-soft),#fff);border-color:#C5E5D2}
  .lvl-card.takeoff.done .lvl-num{background:var(--vert);color:#fff}
  .lvl-card.takeoff .lvl-info .t{color:var(--marine)}
  .lvl-card.takeoff.done .lvl-info .t{color:var(--vert)}
  .lvl-card.takeoff .lvl-mini i{background:var(--jaune-d)}

  /* Letter card — bigger letter, no mnemo, dedicated example block */
  .take-pill{background:var(--jaune-soft);color:var(--jaune-d)}
  .take-letter{font-family:'Manrope',sans-serif;font-weight:800;font-size:120px;line-height:1;letter-spacing:-.02em;color:var(--marine);text-align:center}
  .take-audio{margin:8px auto 4px;background:var(--marine-soft);color:var(--marine);border:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:transform .12s,background .2s}
  .take-audio:active{transform:scale(.92)}
  .take-audio:hover{background:var(--marine);color:#fff}
  .take-audio svg{width:24px;height:24px}
  .take-equiv{font-family:'Manrope',sans-serif;font-weight:700;font-size:42px;line-height:1.08;color:var(--marine);text-align:center}
  .take-tip{font-size:14px;color:var(--ink-soft);text-align:center;padding:0 6px;line-height:1.55}
  .take-example-block{background:var(--marine-soft);border-radius:16px;padding:14px 16px;margin-top:6px;text-align:center;width:100%}
  .take-example-lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--marine);opacity:.7}
  .take-example{font-family:'Manrope',sans-serif;font-weight:700;font-size:22px;color:var(--marine);margin-top:4px}
  .take-example-tr{font-size:13.5px;color:var(--ink-soft);font-style:italic;margin-top:2px}

  /* End-of-palier mini-read */
  .take-mini{flex:1;display:flex;flex-direction:column;justify-content:center;padding:6px 22px}
  .take-mini-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;box-shadow:var(--shadow);text-align:center}
  .take-mini-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--jaune-d);background:var(--jaune-soft);padding:6px 13px;border-radius:20px;margin-bottom:16px}
  .take-mini-target{font-family:'Manrope',sans-serif;font-weight:700;font-size:26px;line-height:1.4;color:var(--marine);letter-spacing:-.005em}
  .take-mini-audio{margin:14px auto 0;background:var(--marine);color:#fff;border:none;border-radius:14px;padding:11px 18px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,background .2s}
  .take-mini-audio:active{transform:scale(.96)}
  .take-mini-audio:hover{background:var(--marine-d)}
  .take-mini-audio svg{width:18px;height:18px}
  .take-mini-divider{height:1px;background:var(--line);margin:18px 0}
  .take-mini-tip{font-size:13px;color:var(--ink-soft);line-height:1.6;text-align:left}
  .take-mini-tr{font-size:14.5px;color:var(--ink);font-style:italic;line-height:1.55;text-align:left;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}

  /* Décollage — page catégories : MÊME STYLE que les tuiles accueil "On révise" /
     "On explore" (.home-deck) : bordure sketch + ombre noire opaque bas-droite. */
  .tkmap-list{padding:14px 20px 28px;display:flex;flex-direction:column;gap:16px;width:100%}
  .tkmap-tile{background:var(--surface);border:var(--border-sketch);border-radius:20px;box-shadow:var(--shadow-sketch-lg);padding:15px 18px;transform:rotate(-.3deg);transition:transform .14s}
  .tkmap-tile:nth-child(even){transform:rotate(.3deg)}
  .tkmap-tile:active{transform:rotate(0)}
  .tkmap-head{margin-bottom:12px}
  .tkmap-t{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;line-height:1.05;color:var(--ink);display:flex;align-items:center;gap:8px}
  .tkmap-h{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:18px;color:var(--tangerine);margin-top:4px;line-height:1.2}
  .tkmap-badge{width:24px;height:24px;border-radius:50%;border:2px solid var(--ink);display:inline-grid;place-items:center;font-size:12px;font-weight:800;background:var(--vert-soft);color:var(--vert,#2c8a4a)}
  .tkmap-badge.mastered{background:#ffce4d;color:#7a4a00}
  .tkmap-btns{display:flex;gap:10px;margin-top:4px}
  .tkmap-btn{flex:1;font-family:inherit;font-weight:800;font-size:15px;padding:11px;border-radius:13px;cursor:pointer;border:var(--border-sketch);box-shadow:var(--shadow-sketch);transition:transform .1s,box-shadow .1s}
  .tkmap-btn.lesson{background:#fff;color:var(--ink)}
  .tkmap-btn.test{background:var(--turquoise);color:#FFF8F1}
  .tkmap-btn.ok::after{content:' ✓';opacity:.85}
  .tkmap-btn:active{transform:translate(2px,2px);box-shadow:none}
  /* leçon faite : fond vert (garde bordure + ombre sketch) */
  .tkmap-tile.done{background:var(--vert-soft)}
  /* maîtrisé : leçon + quiz 100% — fond doré */
  .tkmap-tile.mastered{background:linear-gradient(160deg,#ffe9a8,#fff7e0)}
  .tkmap-tile.mastered .tkmap-h{color:#9a6400}
  .tkmap-tile.mastered .tkmap-t{color:#9a6400}

  /* Décollage — épreuve (quiz son↔lettre) */
  .tkquiz{padding:16px;max-width:560px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:18px}
  .tkquiz-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
  .tkquiz-prompt{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:var(--ink)}
  .tkquiz-letter{font-family:'Manrope',sans-serif;font-weight:800;font-size:96px;line-height:1;color:var(--marine)}
  .tkquiz-play{background:var(--marine);color:#fff;border:none;border-radius:16px;padding:14px 22px;display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-weight:800;font-size:16px;cursor:pointer}
  .tkquiz-play svg{width:26px;height:26px}
  .tkquiz-play:active{transform:scale(.97)}
  .tkquiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tkquiz-opt{border:2px solid var(--line);background:#fff;border-radius:16px;cursor:pointer;font-family:'Manrope',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s,border-color .15s,background .15s}
  .tkquiz-opt.char{font-weight:800;font-size:34px;color:var(--marine);min-height:78px}
  .tkquiz-opt.sound{min-height:64px;color:var(--marine);font-weight:800;font-size:18px}
  .tkquiz-opt.sound svg{width:24px;height:24px}
  .tkquiz-opt.selected{border-color:var(--marine);background:var(--marine-soft)}
  .tkquiz-opt.correct{border-color:var(--vert,#3aa35a);background:#e7f6ec;color:var(--vert,#2c8a4a)}
  .tkquiz-opt.wrong{border-color:var(--framboise,#e3556e);background:#fde9ec;color:var(--framboise,#c13a52)}
  .tkquiz-opt:disabled{cursor:default}
  .tkquiz-opt:not(:disabled):active{transform:scale(.97)}
  .tkquiz-foot{display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .tkquiz-fb{text-align:center;font-weight:800;font-size:15px;padding:10px;cursor:pointer}
  .tkquiz-hint{text-align:center;font-size:13.5px;font-weight:700;color:var(--ink-soft);padding:8px}
  .tkquiz-fb.ok{color:var(--vert,#2c8a4a)}
  .tkquiz-fb.ko{color:var(--framboise,#c13a52)}
  .tkquiz-cta{width:100%;background:var(--marine);color:#fff;border:none;border-radius:14px;padding:14px;font-family:inherit;font-weight:800;font-size:16px;cursor:pointer}
  .tkquiz-cta:disabled{opacity:.4;cursor:default}
  .tkquiz-cta:not(:disabled):active{transform:scale(.985)}
  .tkquiz-done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 16px}
  .tkquiz-done-emo{font-size:56px}
  .tkquiz-done-score{font-family:'Manrope',sans-serif;font-weight:800;font-size:24px;color:var(--marine)}

  /* ============================================================
     ONBOARDING (first launch only, lot 2 phase B)
     ============================================================ */
  #s-onboarding{padding:calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));justify-content:flex-start;background:var(--bg)}
  .onb-bar{display:flex;gap:8px;justify-content:center;margin:0 auto 32px;max-width:120px}
  .onb-dot{width:32px;height:6px;border-radius:6px;background:var(--mist);transition:background .3s,width .3s}
  .onb-dot.on{background:var(--marine);width:42px}
  .onb-dot.done{background:var(--vert)}

  .onb-step{display:none;flex-direction:column;flex:1;animation:fade .35s ease both}
  .onb-step.on{display:flex}

  .onb-back{align-self:flex-start;background:none;border:none;color:var(--marine);font-family:'Manrope',sans-serif;font-weight:600;font-size:14px;cursor:pointer;padding:6px 4px;margin-bottom:14px}
  .onb-back:active{opacity:.6}

  .onb-eyebrow{font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terre);text-align:center;margin-bottom:14px}
  .onb-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1.12;color:var(--marine);text-align:center;margin-bottom:28px}

  .onb-cards{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
  .onb-card{position:relative;background:#fff;border:2px solid var(--line);border-radius:20px;padding:22px 20px;cursor:pointer;text-align:left;font-family:'Manrope',sans-serif;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);transition:transform .14s,border-color .2s,box-shadow .2s}
  .onb-card:not(:disabled):active{transform:scale(.985)}
  .onb-card:not(:disabled):hover{border-color:var(--marine)}
  .onb-card.selected{border-color:var(--marine);background:linear-gradient(160deg,var(--marine-soft),#fff);box-shadow:var(--shadow-lg)}
  .onb-card:disabled{cursor:not-allowed;opacity:.6}
  .onb-card-flag,.onb-card-emoji{font-size:38px;line-height:1;flex-shrink:0}
  .onb-card-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:18px;color:var(--marine);line-height:1.15}
  .onb-card-sub{font-size:13.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
  .onb-card-soon{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:var(--jaune-soft);color:var(--jaune-d)}

  .onb-hint{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:auto;padding:14px 18px 0;line-height:1.5}
  .onb-login-wrap{display:flex;justify-content:center;margin-top:24px}
  .onb-login-link{display:inline-flex;align-items:center;gap:7px;
    background:#fff;color:var(--marine);border:var(--border-sketch-thin);border-radius:12px;
    box-shadow:var(--shadow-sketch-sm);padding:9px 16px;font-family:'Manrope',sans-serif;
    font-size:13.5px;font-weight:800;cursor:pointer;text-decoration:none;
    transition:transform .12s,box-shadow .12s,background .15s}
  .onb-login-link::before{content:"👋";font-size:15px;line-height:1}
  .onb-login-link:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch);background:var(--turquoise-soft)}
  .onb-login-link:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}

  .onb-points{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-direction:column;gap:18px}
  .onb-points li{display:flex;gap:16px;align-items:flex-start}
  .onb-bullet{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px}
  .onb-point-t{font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;color:var(--marine);line-height:1.2}
  .onb-point-b{font-size:14px;color:var(--ink-soft);margin-top:4px;line-height:1.55}

  .onb-cta{margin-top:auto;background:var(--marine);color:#fff;border:none;border-radius:16px;padding:17px;font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform .12s,background .2s}
  .onb-cta:active{transform:scale(.96)}
  .onb-cta:hover{background:var(--marine-d)}

  /* Écran carte-démo de l'onboarding */
  .onb-demo-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:10px 0}
  .onb-bubble{position:relative;background:var(--jaune);color:var(--ink);border:var(--border-sketch-thin);
    border-radius:16px;box-shadow:var(--shadow-sketch);padding:16px 20px;max-width:360px;text-align:center;
    font-family:'Caveat',cursive;font-weight:600;font-size:28px;line-height:1.22;transform:rotate(-1deg)}
  .onb-bubble::after{content:"";position:absolute;bottom:-9px;left:50%;transform:translateX(-50%) rotate(45deg);
    width:16px;height:16px;background:var(--jaune);border-right:var(--border-sketch-thin);border-bottom:var(--border-sketch-thin)}
  /* Carte démo flippable (perspective 3D, autonome) */
  .onb-demo-card{width:240px;height:300px;perspective:1200px;cursor:pointer}
  .onb-demo-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
    transition:transform .55s linear;transform:rotate(-1deg)}
  .onb-demo-inner.flipped{transform:rotate(-1deg) rotateY(180deg)}
  .onb-demo-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    transform:translateZ(1px);-webkit-transform:translateZ(1px);
    background:var(--surface);border:var(--border-sketch);border-radius:20px;box-shadow:var(--shadow-sketch-lg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;
    transition:visibility 0s linear 0.275s}
  /* FILET DE SÉCURITÉ WKWebView : flip linéaire → 90° à durée/2 = 0.275s ; swap calé pile dessus. */
  .onb-demo-inner .onb-demo-rear{visibility:hidden}
  .onb-demo-inner.flipped .onb-demo-rear{visibility:visible}
  .onb-demo-inner.flipped .onb-demo-front{visibility:hidden}
  .onb-demo-front .onb-demo-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:30px;color:var(--marine);letter-spacing:-.01em}
  .onb-demo-front .onb-demo-phon{font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink-soft)}
  .onb-demo-front .onb-demo-tr{font-family:'Manrope',sans-serif;font-size:15px;color:var(--framboise);font-weight:700;margin-top:4px}
  .onb-demo-tapcue{margin-top:14px;font-size:19px;color:var(--turquoise-d)}
  .onb-demo-rear{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);gap:10px}
  .onb-demo-img{width:170px;height:170px;object-fit:cover;border-radius:14px;border:2px solid var(--terre-soft);background:#fff}
  .onb-demo-mnemo{font-family:'Caveat',cursive;font-weight:600;font-size:20px;color:#993C1D;line-height:1.2}
  .onb-demo-authors{font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;color:var(--ink-soft)}

  /* Écran "À toi" : création guidée */
  .onb-bubble-static{transform:rotate(-1deg);margin:0 auto 18px;max-width:380px}
  .onb-create-card{background:var(--surface);border:var(--border-sketch);border-radius:18px;box-shadow:var(--shadow-sketch-lg);
    padding:18px;display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px;min-height:120px;justify-content:center}
  .onb-create-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:28px;color:var(--marine);letter-spacing:-.01em}
  .onb-create-phon{font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink-soft)}
  .onb-create-imgbox{margin-top:10px}
  .onb-create-img{width:180px;height:180px;object-fit:cover;border-radius:14px;border:2px solid var(--terre-soft);background:#fff}
  .onb-create-loading{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:8px}
  .onb-create-loading-lbl{font-family:'Caveat',cursive;font-weight:600;font-size:20px;color:var(--turquoise-d)}
  .onb-create-input{width:100%;border:var(--border-sketch-thin);border-radius:14px;padding:12px 14px;
    font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);background:#fff;resize:none;box-shadow:var(--shadow-sketch-sm);margin-bottom:12px}
  .onb-create-input:focus{outline:2px solid var(--marine);outline-offset:1px}
  .onb-create-actions{display:flex;flex-direction:column}
  .onb-create-generate{margin-top:0}
  .onb-create-generate:disabled{opacity:.45;cursor:default}
  .onb-create-next{margin-top:12px;background:var(--vert)}
  .onb-create-next:hover{background:var(--vert)}

  /* Mini-test onboarding */
  .onb-quiz-q{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--marine);text-align:center;margin-bottom:16px;line-height:1.2}
  .onb-quiz-img{width:150px;height:150px;object-fit:cover;border-radius:14px;border:2px solid var(--terre-soft);display:block;margin:0 auto 18px;background:#fff}
  .onb-quiz-options{display:flex;flex-direction:column;gap:10px}
  .onb-quiz-opt{background:#fff;border:var(--border-sketch-thin);border-radius:14px;padding:15px;font-family:'Manrope',sans-serif;
    font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sketch-sm);transition:transform .12s,border-color .2s}
  .onb-quiz-opt:not(:disabled):active{transform:translate(1px,1px)}
  .onb-quiz-opt:not(:disabled):hover{border-color:var(--marine)}
  .onb-quiz-opt:disabled{cursor:default}
  .onb-quiz-opt.correct{background:linear-gradient(160deg,var(--vert-soft),#fff);border-color:var(--vert);color:var(--vert)}
  .onb-quiz-opt.wrong{background:linear-gradient(160deg,var(--terre-soft),#fff);border-color:var(--terre);color:var(--terre)}
  .onb-quiz-verdict{font-family:'Caveat',cursive;font-weight:700;font-size:27px;color:var(--framboise);text-align:center;margin-top:18px;line-height:1.2}

  /* Écran 7 — Partage */
  .onb-share-emoji{font-size:52px;text-align:center;line-height:1;margin-bottom:10px;animation:syncBob 1.8s ease-in-out infinite}
  .onb-share-imgbox{display:flex;justify-content:center;margin-bottom:18px}
  .onb-share-img{width:200px;height:200px;object-fit:cover;border-radius:16px;border:2px solid var(--terre-soft);background:#fff;box-shadow:var(--shadow-sketch-sm)}
  /* Bouton secondaire (ghost) : "commencer à apprendre" sous le CTA partage */
  .onb-cta-secondary{margin-top:10px;background:transparent;color:var(--marine);border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm)}
  .onb-cta-secondary:hover{background:var(--marine-soft)}

  /* Écran 8 — Tour express : 3 bulles coachmark sur la home */
  .home-coach{position:fixed;inset:0;z-index:1000;display:none;background:rgba(27,36,48,.5)}
  .home-coach.show{display:block;animation:ovIn .2s ease}
  .home-coach-ring{position:absolute;border-radius:16px;box-shadow:0 0 0 3px var(--jaune),0 0 0 9px rgba(245,184,46,.35);transition:all .25s ease;pointer-events:none}
  .home-coach-ring.pulse{animation:coachPulse 1.4s ease-in-out infinite}
  @keyframes coachPulse{0%,100%{box-shadow:0 0 0 3px var(--jaune),0 0 0 9px rgba(245,184,46,.35)}50%{box-shadow:0 0 0 3px var(--jaune),0 0 0 14px rgba(245,184,46,.12)}}
  .home-coach-bubble{position:absolute;max-width:300px;background:#fff;border:var(--border-sketch-thin);border-radius:18px;padding:16px 18px;box-shadow:0 18px 50px rgba(27,36,48,.34);transform:rotate(-1deg)}
  .home-coach-text{display:block;font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--ink);line-height:1.25}
  .home-coach-next{margin-top:12px;width:100%;background:var(--marine);color:#fff;border:none;border-radius:13px;padding:11px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transition:transform .12s}
  .home-coach-next:active{transform:scale(.96)}
  .home-coach-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
  .home-coach-actions .home-coach-next{margin-top:0;flex:1}
  .home-coach-skip{flex-shrink:0;background:none;border:none;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;padding:8px 4px;text-decoration:underline;text-underline-offset:2px}

  /* ============================================================
     Carte d'étude refondue (lot 10) — image en héros, charte sketch
     ============================================================ */
  /* Brief carte d'étude v2 : flex 100dvh, no-scroll. Le header + judge row
     ont des hauteurs intrinsèques, la card stage prend tout le reste via
     flex:1. Le scope .active garantit qu'on ne casse pas display:none. */
  #s-study.active{
    padding:calc(12px + env(safe-area-inset-top)) 14px calc(env(safe-area-inset-bottom,0) + 14px);
    flex-direction:column;
    gap:14px;
    /* 100svh = small viewport height : garantit que tout tient à l'écran
       même quand la barre Chrome mobile flotte en bas. Fallback 100vh. */
    height:100vh;
    height:100svh;
    max-height:100svh;
    overflow:hidden;
  }
  /* Android + clavier logiciel : Chrome peut réduire le viewport visuel tout
     en gardant le layout d'étude verrouillé en 100svh/no-scroll. Dès que le
     mnémo a le focus (fallback) ou que visualViewport confirme le clavier, on
     utilise la hauteur visuelle pilotée en JS. La carte peut alors rétrécir ;
     son verso scrolle en interne si son contenu est plus haut que la stage, ce
     qui garde le CTA dans le flux sous la carte au lieu de le peindre par-dessus
     un débordement de face absolue. */
  body.is-android.android-study-mnemo-focus #s-study.active,
  body.is-android.android-keyboard-open #s-study.active{
    height:var(--lfq-vvh, 100dvh);
    max-height:var(--lfq-vvh, 100dvh);
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    gap:10px;
    padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
  }
  body.is-android.android-study-mnemo-focus #s-study.active .study-card-stage,
  body.is-android.android-keyboard-open #s-study.active .study-card-stage{
    flex:1 1 0;
    min-height:0;
  }
  body.is-android.android-study-mnemo-focus #s-study.active .face-front,
  body.is-android.android-study-mnemo-focus #s-study.active .face-rear,
  body.is-android.android-keyboard-open #s-study.active .face-front,
  body.is-android.android-keyboard-open #s-study.active .face-rear{
    overflow:hidden;
  }
  body.is-android.android-study-mnemo-focus #s-study.active .face-rear,
  body.is-android.android-keyboard-open #s-study.active .face-rear{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  @media (max-height:520px){
    body.is-android.android-study-mnemo-focus #s-study.active .study-card-stage,
    body.is-android.android-keyboard-open #s-study.active .study-card-stage{min-height:0}
    body.is-android.android-study-mnemo-focus #s-study.active .judge-btn,
    body.is-android.android-keyboard-open #s-study.active .judge-btn{min-height:52px;padding:14px 16px}
  }
  .study-hd{display:flex;align-items:center;gap:12px}
  .study-back{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--surface);
    border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);
    display:grid;place-items:center;cursor:pointer;color:var(--ink);
    transition:transform .12s,box-shadow .12s}
  .study-back:active{transform:translate(1px,1px);box-shadow:none}
  .study-back svg{width:18px;height:18px}
  .study-hd-title{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
    font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
  .study-lvl{color:var(--ink)}
  .study-sep{color:var(--ink-soft);font-weight:600}
  .study-ru{color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .study-fr{color:var(--framboise);font-weight:800}
  .study-count{flex-shrink:0;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--ink-soft);min-width:42px;text-align:center}
  .study-hd-arrow{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--surface);
    border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);
    display:grid;place-items:center;cursor:pointer;color:var(--ink);
    transition:transform .12s,box-shadow .12s,opacity .15s}
  .study-hd-arrow:active{transform:translate(1px,1px);box-shadow:none}
  .study-hd-arrow svg{width:14px;height:14px}
  .study-hd-arrow:disabled{opacity:.3;cursor:not-allowed}
  /* Compense le gap parent pour rapprocher la barre de progression du header
     (elle est visuellement une continuation du header). */
  .study-prog{height:5px;background:var(--mist);border-radius:5px;overflow:hidden;flex-shrink:0;margin-top:-8px}
  .study-prog-fill{height:100%;background:var(--turquoise);border-radius:5px;width:0;
    transition:width .6s cubic-bezier(.2,.8,.2,1)}

  /* Carte : zone flexible qui prend tout l'espace disponible (no-scroll global). */
  .study-card-stage{
    flex:1;
    min-height:0;            /* clé pour que flex:1 marche dans un parent flex */
    display:flex;
    perspective:1400px;      /* effet 3D du flip + transitions next/prev */
    transition:transform .12s cubic-bezier(.4,0,.2,1), opacity .12s ease;
    will-change:transform, opacity;
  }
  /* Animations de navigation next/prev : la carte sort en tournant 3D vers
     un côté, puis la nouvelle revient de l'autre. Effet "cube qui tourne". */
  .study-card-stage.swipe-out-left{
    transform:translateX(-30%) rotateY(-60deg);
    opacity:0;
  }
  .study-card-stage.swipe-out-right{
    transform:translateX(30%) rotateY(60deg);
    opacity:0;
  }
  .study-card-stage.pre-in-right{
    transform:translateX(30%) rotateY(60deg);
    opacity:0;
    transition:none;
  }
  .study-card-stage.pre-in-left{
    transform:translateX(-30%) rotateY(-60deg);
    opacity:0;
    transition:none;
  }
  @media (prefers-reduced-motion: reduce){
    .study-card-stage{transition:none}
    .study-card-stage.swipe-out-left,
    .study-card-stage.swipe-out-right,
    .study-card-stage.pre-in-right,
    .study-card-stage.pre-in-left{transform:none;opacity:1}
  }
  .study-card{
    position:relative;
    flex:1;
    width:100%;
    min-height:0;
    cursor:pointer;
    /* Empêche : (a) la sélection de texte (qui déclenche le tap-to-search
       de Chrome Android sur les mots russes), (b) le menu contextuel iOS,
       (c) le double-tap zoom et accélère le tap. */
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
    touch-action:manipulation;
  }
  /* Les enfants doivent aussi désactiver la sélection sauf les input/textarea. */
  .study-card *:not(input):not(textarea){
    user-select:none;
    -webkit-user-select:none;
  }
  .study-card input,.study-card textarea{
    user-select:text;
    -webkit-user-select:text;
    -webkit-touch-callout:default;
  }
  /* Empêche Chrome Android d'attacher son tap-to-search aux mots et phrases
     décoratifs : on coupe tous les events au niveau de ces éléments, le tap
     remonte alors directement au container .study-card (qui gère flip/swipe). */
  .study-card .ru-word,
  .study-card .ru-word-small,
  .study-card .fr-word,
  .study-card .ru-phon,
  .study-card .card-hint,
  .study-card .card-swipe-hint,
  .study-card .card-front-body,
  .study-card .card-rear-words,
  .study-card .card-img-placeholder,
  .study-card .card-img-placeholder-lbl,
  .study-card .type-pill{
    pointer-events:none;
  }
  /* Conteneur 3D qui se retourne. Les 2 faces sont absolutes, superposées. */
  .study-card-inner{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transition:transform .5s linear;
    transform:rotate(-0.4deg);
  }
  .study-card.flip .study-card-inner{
    transform:rotate(-0.4deg) rotateY(180deg);
  }
  /* Pendant le swap de carte, on coupe la transition flip pour ne pas voir
     la rotation s'achever sur la nouvelle carte. */
  .study-card.no-flip-transition .study-card-inner{transition:none}
  @media (prefers-reduced-motion: reduce){
    .study-card-inner{transition:none}
  }
  .face-front,.face-rear{
    position:absolute;
    inset:0;
    background:var(--surface);
    border:var(--border-sketch);
    border-radius:18px;
    box-shadow:var(--shadow-sketch-lg);
    padding:12px 14px 10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    /* Sépare les faces en profondeur : aide WebKit à trier l'occlusion. */
    transform:translateZ(1px);
    -webkit-transform:translateZ(1px);
    min-height:0;
    /* FILET DE SÉCURITÉ WKWebView : on bascule la visibilité réelle de la
       face non affichée. Flip rendu linéaire ci-dessus → rotateY franchit 90°
       (tranche, largeur projetée nulle) EXACTEMENT à durée/2 = 0.25s. On cale
       le swap de visibilité pile sur cet instant : invisible, sans coupure. */
    transition:visibility 0s linear 0.25s;
  }
  .face-rear{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px)}
  /* Au repos (recto visible) : on masque le verso ; flippé : on masque le recto. */
  .study-card .face-rear{visibility:hidden}
  .study-card.flip .face-rear{visibility:visible}
  .study-card.flip .face-front{visibility:hidden}

  /* Ligne du haut : badge grammatical + bouton son */
  .card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .study-card .card-audio{margin:0;width:38px;height:38px;border-radius:50%;
    background:var(--surface);color:var(--ink);
    border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);
    display:grid;place-items:center;cursor:pointer;transition:transform .12s,background .2s}
  .study-card .card-audio:active{transform:translate(1px,1px);box-shadow:none}
  .study-card .card-audio:hover{background:var(--framboise-soft)}
  .study-card .card-audio svg{width:18px;height:18px}

  /* Badge grammatical (codage couleur, sketch) */
  .study-card .type-pill{align-self:flex-start;font-family:'Manrope',sans-serif;font-weight:700;
    font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:20px;
    border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);background:var(--surface)}
  .study-card .type-pill.v{color:var(--ink);background:var(--mist)}
  .study-card .type-pill.n{color:var(--turquoise);background:var(--turquoise-soft)}
  .study-card .type-pill.a{color:var(--tangerine);background:var(--tangerine-soft)}
  .study-card .type-pill.x{color:var(--jaune-d);background:var(--jaune-soft)}

  /* Recto : mot russe gros à deviner (centré, prend tout l'espace dispo) */
  .card-front-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;text-align:center;padding:8px;min-height:0}
  .study-card .ru-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:48px;
    line-height:1.05;letter-spacing:-.015em;color:var(--ink)}
  .study-card .ru-word .stress{color:var(--framboise)}
  .study-card .ru-phon{font-family:'Manrope',sans-serif;font-weight:600;font-size:16px;
    font-style:italic;color:var(--ink-soft);letter-spacing:.01em}

  /* Verso : traduction (framboise) + mot russe (gris) en haut, alignés à
     gauche dans la rangée du haut, à côté du bouton audio. Remplace le
     badge grammatical (retiré conformément au brief carte v2). */
  .card-top-rear{align-items:flex-start}
  .card-rear-words{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;flex-shrink:1;min-width:0;flex:1}
  .study-card .fr-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;line-height:1.1;
    letter-spacing:-.01em;color:var(--framboise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .ru-word-small{font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--ink-soft);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  /* Spacer pour aligner l'audio à droite sur le recto (qui n'a plus de badge). */
  .card-top-front{justify-content:space-between}
  .card-top-spacer{flex:1}

  /* Image héros : carré 1/1, centrée. Ne prend pas tout l'espace pour
     éviter qu'elle devienne énorme sur grand écran. */
  .card-img-box{position:relative;width:100%;aspect-ratio:1/1;margin:auto;
    max-height:min(60vh, 360px);max-width:min(60vh, 360px);
    border:var(--border-sketch);border-radius:14px;background:var(--mist);
    box-shadow:var(--shadow-sketch);transform:rotate(0.5deg);
    overflow:hidden;display:grid;place-items:center;flex-shrink:0}
  .card-img{display:block;width:100%;height:100%;object-fit:cover}
  .card-img-placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink-soft);padding:14px;text-align:center}
  .card-img-placeholder svg{width:36px;height:36px;opacity:.55}
  .card-img-placeholder-lbl{font-family:'Caveat',cursive;font-weight:700;font-size:16px;color:var(--ink-soft);line-height:1.2}

  /* Bouton "partager" jaune en coin bas-droite de l'image (sketch) */
  .card-share-btn{position:absolute;right:8px;bottom:8px;background:var(--jaune);color:var(--ink);
    border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch);
    padding:7px 12px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    transition:transform .12s,box-shadow .12s}
  .card-share-btn svg{width:14px;height:14px}
  .card-share-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 4px 0 var(--ink)}
  .card-share-btn:active{transform:translate(1px,1px);box-shadow:var(--shadow-sketch-sm)}

  /* Mnémo COMPACT INTERNE au verso (Brief carte v2) */
  .card-mnemo-row{display:flex;gap:6px;align-items:stretch;flex-shrink:0}
  .card-mnemo-input{flex:1;min-width:0;border:var(--border-sketch-thin);border-radius:12px;
    background:var(--bg);padding:11px 14px;font-family:'Manrope',sans-serif;font-size:15px;
    color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;
    resize:none;line-height:1.4;height:48px;max-height:120px;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;display:block;width:100%;word-break:break-word}
  .card-mnemo-input::placeholder{color:var(--ink-soft);opacity:.7}
  .card-mnemo-input:focus{border-color:var(--tangerine);box-shadow:0 0 0 2px var(--tangerine-soft);
    overflow-y:auto;white-space:pre-wrap;text-overflow:clip}
  .card-mnemo-row:has(.card-mnemo-input:focus){flex-direction:column;align-items:stretch}
  .card-mnemo-create{flex-shrink:0;background:var(--turquoise);color:#fff;
    border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);
    padding:0 14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;
    display:inline-flex;align-items:center;gap:5px;cursor:pointer;
    transition:transform .12s,box-shadow .12s,opacity .15s;height:48px;white-space:nowrap}
  .card-mnemo-create:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .card-mnemo-create:active:not(:disabled){transform:translate(1px,1px);box-shadow:none}
  .card-mnemo-create:disabled{opacity:.45;cursor:not-allowed}
  .card-mnemo-create svg{width:16px;height:16px}
  .card-mnemo-create.regen{background:var(--surface);color:var(--ink);border-color:var(--ink)}
  .card-mnemo-create.regen:hover:not(:disabled){background:var(--mist)}

  /* Footer carte : lien banque + indice swipe sur une ligne */
  .card-foot-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;margin-top:-2px}
  .card-bank-link{display:inline-flex;align-items:center;gap:5px;font-family:'Manrope',sans-serif;
    font-weight:700;font-size:11.5px;color:var(--turquoise);text-decoration:underline;
    text-decoration-color:var(--turquoise);text-decoration-thickness:1.5px;text-underline-offset:3px;
    cursor:pointer;padding:2px 4px}
  .card-bank-link:hover{color:var(--turquoise-d)}
  .card-bank-link svg{width:12px;height:12px}
  .card-swipe-hint{font-family:'Caveat',cursive;font-weight:700;font-size:14px;color:var(--ink-soft);opacity:.7;line-height:1}
  /* Poubelle discrète "retirer du deck" alignée à droite du footer carte */
  .card-deck-remove{color:#9aa0a6;opacity:.7;background:none;border:0;padding:6px;margin-left:auto;cursor:pointer;display:grid;place-items:center}
  .card-deck-remove svg{width:18px;height:18px}
  .card-deck-remove:active{opacity:1}

  /* Indice manuscrit (recto seulement maintenant : "touche pour révéler") */
  .card-hint{text-align:center;font-family:'Caveat',cursive;font-weight:700;font-size:16px;
    color:var(--ink-soft);opacity:.78;line-height:1.1;flex-shrink:0}

  /* ---------- Bloc création mnémo (champ + bouton créer l'image) ----- */
  .mnemo-block{display:flex;flex-direction:column;gap:8px;background:var(--surface);
    border:2px dashed var(--tangerine);border-radius:16px;padding:12px 14px;
    box-shadow:var(--shadow-sketch-sm)}
  .mnemo-block-label{display:flex;align-items:center;gap:8px;font-family:'Caveat',cursive;
    font-weight:700;font-size:20px;color:var(--tangerine);line-height:1}
  .mnemo-block-bulb{width:20px;height:20px;color:var(--tangerine)}
  .mnemo-block-row{display:flex;gap:8px;align-items:stretch}
  /* Champ mnémo : compact (1 ligne) au repos. Expansion + scroll uniquement
     pendant l'édition (au focus). Le bouton "créer l'image" passe sous
     pendant l'édition pour laisser place au champ. */
  .mnemo-block-input{flex:1;min-width:0;border:var(--border-sketch-thin);border-radius:12px;
    background:var(--bg);padding:12px 14px;font-family:'Manrope',sans-serif;font-size:14.5px;
    color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;
    resize:none;line-height:1.5;height:46px;max-height:160px;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;
    display:block;width:100%;word-break:break-word}
  .mnemo-block-input::placeholder{color:var(--ink-soft);opacity:.7}
  .mnemo-block-input:focus{border-color:var(--tangerine);box-shadow:0 0 0 3px var(--tangerine-soft);
    overflow-y:auto;white-space:pre-wrap;text-overflow:clip}
  .mnemo-block-row:has(.mnemo-block-input:focus){flex-direction:column;align-items:stretch}
  .mnemo-block-create{flex-shrink:0;background:var(--turquoise);color:#fff;
    border:var(--border-sketch);border-radius:12px;box-shadow:var(--shadow-sketch);
    padding:0 16px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    transition:transform .12s,box-shadow .12s,opacity .15s}
  .mnemo-block-create:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch-lg)}
  .mnemo-block-create:active:not(:disabled){transform:translate(1px,1px);box-shadow:var(--shadow-sketch-sm)}
  .mnemo-block-create:disabled{opacity:.45;cursor:not-allowed}
  .mnemo-block-create svg{width:16px;height:16px}
  /* Mode "regénérer" : bouton plus discret quand une image existe déjà,
     pour réduire les clics accidentels qui consomment le quota. */
  .mnemo-block-create.regen{background:var(--surface);color:var(--ink);border-color:var(--ink)}
  .mnemo-block-create.regen:hover:not(:disabled){background:var(--mist)}

  /* ---------- Actions judge (rangée 1) — boutons "musclés" charte ----- */
  /* Coachmark premier mnémo : bulle complice au-dessus de la barre de jugement. */
  .mnemo-coach{flex-shrink:0;display:flex;justify-content:center;margin:0 0 8px;cursor:pointer;animation:coachIn .3s ease}
  @keyframes coachIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .mnemo-coach-bubble{display:flex;align-items:center;gap:9px;background:var(--jaune);color:var(--ink);
    border:var(--border-sketch-thin);border-radius:14px;box-shadow:var(--shadow-sketch);
    padding:10px 12px;max-width:520px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;line-height:1.35}
  .mnemo-coach-emoji{font-size:20px;flex-shrink:0}
  .mnemo-coach-text{flex:1}
  .mnemo-coach-close{flex-shrink:0;background:rgba(45,42,50,.14);color:var(--ink);border:none;
    width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:800;cursor:pointer;line-height:1}
  .mnemo-coach-close:hover{background:rgba(45,42,50,.26)}

  /* Pied d'étude : regroupe le bouton « Ajouter à mon deck » et son indice.
     flex-shrink:0 => hauteur intrinsèque garantie : la card stage (flex:1)
     absorbe l'espace et ce bloc reste TOUJOURS sous la carte, jamais superposé,
     clavier ouvert ou non. */
  .study-judge-foot{display:flex;flex-direction:column;flex-shrink:0}
  /* Indice du gate image : visibility (pas display) pilotée par
     _syncJudgeAddBtn. Caché par défaut tant que le JS n'a pas statué, mais sa
     place reste réservée => aucun décalage à l'apparition/disparition. */
  #judgeAddHint{visibility:hidden}
  .judge-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex-shrink:0}
  .judge-btn{border:var(--border-sketch);border-radius:16px;box-shadow:var(--shadow-sketch-lg);
    padding:18px 16px;font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
    transition:transform .12s,box-shadow .12s;color:#fff;min-height:60px}
  .judge-btn svg{width:22px;height:22px}
  .judge-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--ink)}
  .judge-btn:active{transform:translate(1px,1px);box-shadow:var(--shadow-sketch)}
  .judge-again{background:var(--tangerine)}
  .judge-know{background:var(--turquoise)}
  /* Découverte : un seul bouton « Ajouter à mon deck » pleine largeur. */
  .judge-row-single{grid-template-columns:1fr}
  .judge-add{background:var(--turquoise)}
  .judge-btn.is-disabled,.judge-btn:disabled{background:var(--mist);color:var(--marine);opacity:.55;box-shadow:none;cursor:default;pointer-events:none}
  .judge-btn.is-disabled:hover,.judge-btn:disabled:hover{transform:none;box-shadow:none}

  /* ---------- Nav (rangée 2) -------------------------------------- */
  .nav-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .nav-row-btn{background:var(--surface);color:var(--ink);
    border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);
    padding:11px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
    cursor:pointer;transition:transform .12s,box-shadow .12s,opacity .15s}
  .nav-row-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:var(--shadow-sketch)}
  .nav-row-btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:none}
  .nav-row-btn:disabled{opacity:.4;cursor:not-allowed}

  /* Mobile : carte plus compacte sur petits écrans */
  @media (max-width:380px){
    .study-card .ru-word{font-size:36px}
    .study-card .fr-word{font-size:28px}
    .ru-word-small{font-size:16px}
    .card-hint{font-size:16px}
    .mnemo-block-create span{font-size:13px}
  }

  /* ============================================================
     FORMAT TABLETTE (≥768px) — l'app est pensée mobile-first (440px). Sur
     tablette on élargit la colonne et on centre les contenus pour qu'ils ne
     soient ni minuscules ni étirés. Le parcours de niveaux reste une colonne
     centrée ; ce qui se prête à la grille (stats profil, cartes de langue
     d'onboarding) profite de la largeur. Les overlays gardent leur max-width.
     ============================================================ */
  @media (min-width: 768px) {
    .app{max-width:640px}
    /* Parcours de niveaux + sous-niveaux : colonne centrée, pas étirée */
    .list{max-width:560px;margin-left:auto;margin-right:auto;width:100%}
    /* Onboarding : contenu centré, cartes de langue en grille 2 colonnes */
    .onb-step{max-width:520px;margin-left:auto;margin-right:auto;width:100%}
    .onb-cards{display:grid;grid-template-columns:1fr 1fr;align-items:start}
    .onb-cta,.onb-cta-secondary{max-width:440px;margin-left:auto;margin-right:auto}
    .onb-skip-link{align-self:center}
    /* Profil : stats en 3 colonnes */
    .prof-stats{grid-template-columns:repeat(3,1fr)}
    /* Carte d'étude : plafonnée pour rester portrait/lisible (pas un bandeau) */
    .study-card-stage{max-width:460px;margin-left:auto;margin-right:auto;width:100%}
  }

  /* Tablette paysage / grand écran (≥1180px) : colonne un peu plus large. */
  @media (min-width: 1180px) {
    .app{max-width:680px}
  }

  /* ============================================================
     HOME V2 (2026-05-31) : héros compact + accordéons Révisions /
     Bibliothèque + carte Mon Deck + bouton "Se connecter" en
     remplacement de l'avatar quand pas connecté.
     Les anciennes règles .home-hero-card restent ; .compact override.
     ============================================================ */

  /* Bouton profil "Se connecter" pulsé quand non connecté. Quand connecté,
     l'avatar standard reprend (homeProfileBtn sans classe signin-cta). */
  .home-profile-btn .home-profile-signin-label{display:none;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;letter-spacing:.01em;color:#FFF8F1;padding:0 4px;white-space:nowrap}
  .home-profile-btn.signin-cta{
    width:auto;height:auto;min-height:44px;padding:8px 16px;
    border-radius:22px;background:var(--framboise);color:#FFF8F1;
    border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);
    transform:rotate(-2deg);
    animation:lfqSigninPulse 2.4s ease-in-out infinite;
  }
  .home-profile-btn.signin-cta .home-profile-avatar{display:none}
  .home-profile-btn.signin-cta .home-profile-signin-label{display:inline}
  .home-profile-btn.signin-cta .home-profile-notif{display:none !important}
  @keyframes lfqSigninPulse{
    0%,100%{box-shadow:var(--shadow-sketch-sm)}
    50%{box-shadow:1px 1px 0 var(--ink), 0 0 0 4px rgba(232,74,111,.18)}
  }

  /* Héros compact V2 : structure plate à 3 lignes (top streak+objectif /
     titre / actions). Le kicker + sub + progress bar sont masqués pour
     rester court. La mascotte centrée verticale, taille = hauteur de la
     carte, pas de vide en bas. */
  .home-hero-card.compact{padding:14px 16px 14px 18px;min-height:0;gap:10px;align-items:center}
  .home-hero-card.compact .home-hero-content{gap:8px;min-width:0;flex:1}
  .home-hero-card.compact .home-hero-mascot-slot{width:108px;align-self:stretch;display:flex;align-items:center;justify-content:center}
  .home-hero-card.compact .home-hero-mascot-img{position:static;width:130px;height:auto;transform:rotate(4deg);margin-right:-14px}
  .home-hero-card.compact .home-hero-kicker{display:none}
  .home-hero-card.compact .home-hero-sub{display:none !important}
  .home-hero-card.compact .home-hero-progress{display:none !important}
  .home-hero-top{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;color:#ffd8e0;font-family:'Caveat','Manrope',cursive;font-size:17px;line-height:1.1;margin-bottom:0;min-width:0}
  .home-hero-card.takeoff .home-hero-top,
  .home-hero-card.allDone .home-hero-top{color:var(--ink)}
  .home-hero-top .home-stat-streak{display:inline-flex;align-items:center;gap:4px;background:#FFF8F1;border:1.5px solid var(--ink);border-radius:12px;padding:2px 8px;color:var(--ink);cursor:pointer;font-family:inherit;font-size:14px;box-shadow:1.5px 1.5px 0 var(--ink);flex-shrink:0}
  .home-hero-card.takeoff .home-hero-top .home-stat-streak,
  .home-hero-card.allDone .home-hero-top .home-stat-streak{color:var(--ink);background:#FFF8F1}
  .home-hero-top .home-stat-streak .home-stat-emoji{font-size:13px}
  .home-hero-top .home-stat-streak .home-stat-value{font-weight:800;font-size:14px}
  /* Le label "jours d'affilée" reste lu par les screen readers mais masqué
     visuellement : la flamme + le chiffre suffisent dans le héros compact. */
  .home-hero-top .home-stat-streak .home-stat-lbl{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .home-hero-goal{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .home-hero-card.compact .home-hero-kicker{font-size:17px;margin-bottom:0;line-height:1.1}
  .home-hero-card.compact .home-hero-title{font-size:22px;line-height:1.1;max-width:none;padding-right:6px}
  .home-hero-card.compact .home-hero-progress{flex-direction:row;align-items:center;gap:8px;margin-top:6px}
  .home-hero-card.compact .home-hero-progress-bar{height:7px;flex:0 0 80px}
  .home-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
  .home-hero-card.compact .home-hero-cta{padding:9px 16px;font-size:14px}
  .home-hero-secondary{background:none;border:none;color:#FFF8F1;font-family:'Manrope',sans-serif;font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;padding:0;cursor:pointer;opacity:.92;margin-top:10px;align-self:flex-start;text-align:left}
  .home-hero-card.takeoff .home-hero-secondary,
  .home-hero-card.allDone .home-hero-secondary{color:var(--ink)}
  .home-hero-card.compact:active{transform:rotate(-.6deg) translate(1px,1px)}

  /* Accordéons "deck" (Révisions / Bibliothèque). Cartes fanées repliées
     qui s'écartent légèrement à l'ouverture. */
  .home-deck{margin:14px 20px 0;background:var(--surface);border:var(--border-sketch);border-radius:20px;box-shadow:var(--shadow-sketch-lg);overflow:hidden;transform:rotate(-.3deg)}
  .home-deck + .home-deck{transform:rotate(.3deg)}
  .home-deck-head{display:flex;align-items:center;gap:14px;padding:14px 18px;width:100%;background:none;border:none;font-family:inherit;text-align:left;color:var(--ink);cursor:pointer}
  /* Emoji XL pour les decks "On révise" / "On explore" (la carte fanée
     reste utilisée seulement dans Mon Deck via .home-solo-single). */
  .home-deck-emoji{width:64px;height:64px;flex-shrink:0;display:grid;place-items:center;font-size:48px;line-height:1;filter:drop-shadow(2px 2px 0 var(--ink))}
  .home-deck-emoji-rev{transform:rotate(-6deg)}
  .home-deck-emoji-bib{transform:rotate(5deg)}
  .home-deck-fan{position:relative;width:64px;height:64px;flex-shrink:0}
  .home-deck-pcard{position:absolute;top:6px;left:10px;width:42px;height:58px;border:2px solid var(--ink);border-radius:9px;box-shadow:2px 2px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;background:#fff;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
  .home-deck-pcard .idx{position:absolute;font-size:10px;font-weight:800;line-height:1;color:rgba(0,0,0,.6)}
  .home-deck-pcard .idx.tl{top:4px;left:5px}
  .home-deck-pcard .idx.br{bottom:4px;right:5px;transform:rotate(180deg)}
  .home-deck-fan .c1{transform:rotate(-14deg) translateX(-4px);z-index:1}
  .home-deck-fan .c2{transform:rotate(8deg) translateX(8px);z-index:2}
  .home-deck.open .home-deck-fan .c1{transform:rotate(-22deg) translateX(-10px) translateY(-2px)}
  .home-deck.open .home-deck-fan .c2{transform:rotate(16deg) translateX(14px) translateY(-2px)}
  .home-deck-fan-rev .home-deck-pcard{background:var(--framboise);color:#FFF8F1}
  .home-deck-fan-rev .home-deck-pcard .idx{color:rgba(255,255,255,.85)}
  .home-deck-fan-bib .home-deck-pcard{background:var(--turquoise);color:#FFF8F1}
  .home-deck-fan-bib .home-deck-pcard .idx{color:rgba(255,255,255,.85)}
  .home-deck-tt{flex:1;min-width:0}
  .home-deck-tt .t{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;line-height:1.05;color:var(--ink)}
  .home-deck-tt .s{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:20px;color:var(--tangerine);margin-top:3px;line-height:1.15}
  .home-deck-chev{width:22px;height:22px;flex-shrink:0;color:var(--ink);transition:transform .3s ease}
  .home-deck.open .home-deck-chev{transform:rotate(180deg)}
  .home-deck-body{max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease;overflow:hidden}
  .home-deck.open .home-deck-body{max-height:2400px;opacity:1}
  .home-deck-inner{padding:4px 14px 16px;display:flex;flex-direction:column;gap:12px}
  .home-deck-empty{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:18px;color:var(--ink-soft);text-align:center;padding:6px 6px 4px}

  /* La search bar étant désormais à l'intérieur d'un container "deck-inner",
     son dropdown absolu reste positionné par rapport à .home-search (déjà
     position:relative). On retire le padding latéral implicite. */
  .home-deck-inner .home-search{padding:0;z-index:auto}
  .home-deck-inner .home-search-results{left:0;right:0;top:calc(100% + 4px)}
  /* Liste des niveaux à l'intérieur du deck Bibliothèque : pas de marge
     supplémentaire, déjà géré par .home-deck-inner gap. */
  .home-deck-inner .list.compact{margin:0;padding:0}

  /* Carte Mon Deck (non dépliable) : single card verticale jaune. */
  .home-solo{display:flex;align-items:center;gap:14px;width:calc(100% - 40px);margin:14px 20px 0;padding:14px 18px;background:var(--jaune);color:var(--ink);border:var(--border-sketch);border-radius:20px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;font-family:inherit;text-align:left;transform:rotate(-.2deg);transition:transform .14s,box-shadow .12s}
  .home-solo:active{transform:rotate(-.2deg) translate(1px,2px);box-shadow:1px 1px 0 var(--ink)}
  .home-solo-single{position:relative;width:50px;height:68px;border:2.5px solid var(--ink);border-radius:10px;background:#FFF8F1;box-shadow:2px 2px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
  .home-solo-idx{position:absolute;font-size:11px;font-weight:800;line-height:1;color:rgba(0,0,0,.6)}
  .home-solo-idx.tl{top:4px;left:5px}
  .home-solo-idx.br{bottom:4px;right:5px;transform:rotate(180deg)}
  .home-solo-tt{flex:1;min-width:0}
  .home-solo-tt .t{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;line-height:1.05}
  .home-solo-tt .s{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:20px;color:var(--ink-soft);margin-top:3px;line-height:1.15}
  .home-solo-arrow{width:22px;height:22px;flex-shrink:0;color:var(--ink)}
  .home-multi{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;width:calc(100% - 40px);margin:14px 20px 0;padding:15px 18px;background:linear-gradient(135deg,#19D6C5 0%,#F53B86 58%,#FFD84D 100%);color:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:7px 8px 0 rgba(27,36,48,.26);cursor:pointer;font-family:inherit;text-align:left;transform:rotate(.45deg);transition:transform .14s,box-shadow .12s}
  /* Écran multijoueur : la carte (.rev-match-card) vit normalement dans .rev-list ;
     ici on lui redonne les marges latérales de page. */
  .multiplayer-scaffold{margin:16px 20px 0}
  #s-multiplayer{position:relative}
  .multi-mascot{position:absolute;top:6px;right:12px;width:58px;height:58px;object-fit:contain;transform:rotate(9deg);pointer-events:none;z-index:5;filter:drop-shadow(2px 3px 0 rgba(27,36,48,.18))}
  .games-tabs{display:flex;gap:8px;align-items:center;width:calc(100% - 40px);max-width:760px;margin:12px auto 0;padding:4px;border:2px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 3px 0 rgba(45,42,50,.06)}
  .games-tab{flex:1;min-width:0;min-height:40px;border:0;border-radius:12px;background:transparent;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:900;font-size:15px;line-height:1.1;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
  .games-tab.active{background:var(--turquoise);color:#fff;box-shadow:0 2px 6px rgba(46,196,182,.35)}
  .games-tab:focus-visible{outline:3px solid var(--turquoise-soft);outline-offset:2px}
  .multiplayer-shell{padding:14px 20px 28px;display:flex;flex-direction:column;gap:14px}
  /* ====== Écran Amis (refonte 3 onglets, classes namespacées .fr-* anti-collision) ====== */
  .friends-shell{padding:6px 16px 30px;display:flex;flex-direction:column;gap:8px;width:100%;max-width:760px;margin:0 auto;box-sizing:border-box}
  /* segmented control */
  .fr-tabs{display:flex;gap:4px;margin:6px 0 4px;background:var(--jaune-soft);background:#efe9dc;padding:5px;border-radius:16px}
  .fr-tab{flex:1;min-width:0;border:none;background:transparent;font-family:inherit;font-weight:800;font-size:13.5px;color:var(--muted);padding:9px 4px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:.16s}
  .fr-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  @media(max-width:380px){.fr-tab{font-size:12px}}
  .fr-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.08)}
  .fr-tab .fr-count{font-weight:800;color:var(--muted)}
  .fr-tab.active .fr-count{color:var(--ink)}
  .fr-badge{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--framboise);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
  .fr-panel{display:flex;flex-direction:column}
  .fr-status{background:var(--framboise-soft);color:var(--framboise-d);border-radius:12px;padding:9px 13px;font-weight:800;font-size:13px;margin:4px 0}
  .fr-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:16px 2px 9px}
  .fr-eyebrow:first-child{margin-top:8px}
  .fr-eyebrow span{opacity:.8}
  .fr-hint{font-size:13px;font-weight:700;color:var(--muted);padding:6px 2px 2px}
  /* barre d'ajout */
  .fr-addbar{display:flex;gap:8px;margin:6px 0 2px}
  .fr-addbar input{flex:1;border:2px solid var(--line);background:#fff;border-radius:14px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink)}
  .fr-addbar input::placeholder{color:var(--muted)}
  .fr-addbar input:focus{outline:none;border-color:var(--turquoise)}
  .fr-add-btn{border:none;background:var(--turquoise);color:#fff;border-radius:14px;width:50px;flex-shrink:0;display:grid;place-items:center;cursor:pointer;font-size:24px;font-weight:800;box-shadow:0 4px 0 var(--turquoise-d)}
  .fr-add-btn:active{transform:translateY(3px);box-shadow:none}
  /* avatar */
  .fr-av{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
  .fr-av-sm{width:40px;height:40px;font-size:16px;border-radius:12px}
  .fr-av-blocked{background:var(--muted);color:#fff}
  /* ligne ami / résultat / demande reçue */
  .fr-row{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:11px 12px;margin-bottom:10px}
  .fr-row-result{border-color:var(--turquoise)}
  .fr-meta{flex:1;min-width:0}
  .fr-name{font-weight:800;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fr-sub{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .fr-flame{color:var(--tangerine)}
  .fr-chip-lang{font-weight:800}
  .fr-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
  /* boutons */
  .fr-btn{border:none;font-family:inherit;font-weight:800;font-size:13.5px;border-radius:13px;padding:10px 15px;cursor:pointer;transition:.12s}
  .fr-btn:active{transform:translateY(2px)}
  .fr-btn-action{background:var(--turquoise);color:#fff;box-shadow:0 3px 0 var(--turquoise-d)}
  .fr-btn-action:active{box-shadow:none}
  .fr-btn-cta{background:var(--framboise);color:#fff;box-shadow:0 3px 0 var(--framboise-d)}
  .fr-btn-cta:active{box-shadow:none}
  .fr-btn-ghost{background:transparent;color:var(--muted);border:2px solid var(--line)}
  .fr-icon-btn{width:38px;height:38px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:17px;flex-shrink:0}
  .fr-icon-btn:active{transform:scale(.92)}
  /* carte défi reçu (mise en avant) */
  .fr-duel-card{background:var(--turquoise-soft);border:2px solid var(--turquoise);border-radius:18px;padding:13px;margin-bottom:10px}
  .fr-duel-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
  .fr-chip{background:#fff;color:var(--turquoise-d);font-weight:800;padding:2px 8px;border-radius:8px;font-size:11px}
  .fr-duel-actions{display:flex;gap:8px}
  .fr-duel-actions .fr-btn{flex:1;padding:12px}
  /* ligne en attente (envoyé) */
  .fr-pending{display:flex;align-items:center;gap:11px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:9px}
  .fr-pill{margin-left:auto;font-size:12px;font-weight:800;color:var(--jaune-d);display:flex;align-items:center;gap:5px;flex-shrink:0}
  .fr-dot{width:7px;height:7px;border-radius:50%;background:var(--jaune);animation:frPulse 1.4s infinite}
  @keyframes frPulse{0%,100%{opacity:1}50%{opacity:.35}}
  .fr-cancel{margin-left:6px;color:var(--muted);background:none;border:none;font-size:17px;cursor:pointer;flex-shrink:0;padding:4px}
  /* états vides */
  .fr-empty{text-align:center;padding:40px 24px;color:var(--muted)}
  .fr-empty-emo{font-size:36px;margin-bottom:10px}
  .fr-empty p{font-size:14px;font-weight:700;line-height:1.5}
  @media(prefers-reduced-motion:reduce){.fr-dot{animation:none}}
  /* Tuile Amis dans le header multijoueur (remplace la tuile accueil) */
  .multi-friends-tile{position:relative;margin-left:auto;display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 11px;font-family:inherit;font-weight:800;font-size:13px;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 rgba(27,36,48,.10);flex-shrink:0}
  .multi-friends-tile:active{transform:translateY(2px);box-shadow:none}
  .multi-friends-tile svg{width:18px;height:18px;color:var(--turquoise-d)}
  .multi-friends-notif{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--framboise);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--fond)}
  /* la tuile cède la place au HUD pendant une partie Cadavre (progressif, :has) */
  .multi-friends-tile:has(~ .hd-game:not(:empty)){display:none}
  @media(max-width:360px){.multi-friends-label{display:none}}

  /* ====== Lobby multijoueur (refonte, classes .mlobby-*) ====== */
  .mlobby-eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:18px 2px 9px}
  .mlobby-av{width:48px;height:48px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px}
  .mlobby-av-sm{width:42px;height:42px;border-radius:13px;font-size:17px}
  /* hero "ton tour" */
  .mlobby-hero{background:var(--turquoise-soft);border:2px solid var(--turquoise);border-radius:22px;padding:16px;position:relative;overflow:hidden}
  .mlobby-tag{display:inline-flex;align-items:center;gap:6px;background:var(--turquoise);color:#fff;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:5px 11px;border-radius:20px}
  .mlobby-hero-who{display:flex;align-items:center;gap:12px;margin:13px 0 4px}
  .mlobby-hero-txt{min-width:0;flex:1}
  .mlobby-hero-n{font-weight:800;font-size:19px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mlobby-hero-d{font-size:13px;color:var(--turquoise-d);font-weight:700;margin-top:2px}
  .mlobby-hero-score{text-align:right;flex-shrink:0}
  .mlobby-hero-score b{font-size:23px;font-weight:800;color:var(--ink);white-space:nowrap}
  .mlobby-hero-score span{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
  .mlobby-hero-cta{width:100%;margin-top:14px;border:none;background:var(--framboise);color:#fff;font-family:inherit;font-weight:800;font-size:16px;padding:15px;border-radius:16px;cursor:pointer;box-shadow:0 4px 0 var(--framboise-d)}
  .mlobby-hero-cta:active{transform:translateY(4px);box-shadow:none}
  /* nouvelle partie + code */
  .mlobby-new{width:100%;border:none;background:var(--turquoise);color:#fff;font-family:inherit;font-weight:800;font-size:16px;padding:15px;border-radius:16px;cursor:pointer;box-shadow:0 4px 0 var(--turquoise-d);display:flex;align-items:center;justify-content:center;gap:8px}
  .mlobby-new:active{transform:translateY(4px);box-shadow:none}
  .mlobby-codelink{display:block;width:100%;text-align:center;background:none;border:none;font-family:inherit;font-weight:700;font-size:14px;color:var(--muted);padding:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .mlobby-codebox{display:flex;gap:8px;margin-top:2px}
  .mlobby-codebox input{flex:1;min-width:0;border:2px solid var(--line);background:#fff;border-radius:14px;padding:13px 15px;font-family:inherit;font-size:15px;color:var(--ink)}
  .mlobby-codebox input:focus{outline:none;border-color:var(--turquoise)}
  .mlobby-codebox button{border:none;background:var(--ink);color:#fff;border-radius:14px;padding:0 18px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;flex-shrink:0}
  /* liste de matchs (carte = décider) */
  .mlobby-match{width:100%;text-align:left;display:flex;align-items:center;gap:13px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:12px;margin-bottom:10px;cursor:pointer;position:relative;transition:.12s;font-family:inherit;overflow:hidden}
  .mlobby-match:active{transform:scale(.985)}
  .mlobby-match::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:5px;border-radius:0 4px 4px 0}
  .mlobby-match.mlobby-moi::before{background:var(--turquoise)}
  .mlobby-match.mlobby-eux::before{background:var(--muted)}
  .mlobby-match.mlobby-gagne::before{background:var(--vert)}
  .mlobby-match.mlobby-perdu::before{background:var(--framboise)}
  .mlobby-match.mlobby-nul::before{background:var(--jaune)}
  .mlobby-match-info{flex:1;min-width:0}
  .mlobby-match-n{font-weight:800;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mlobby-match-s{font-size:13px;font-weight:700;margin-top:3px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mlobby-match.mlobby-moi .mlobby-match-s{color:var(--turquoise-d)}
  .mlobby-match.mlobby-gagne .mlobby-match-s{color:var(--vert-d,#2c8553)}
  .mlobby-match.mlobby-perdu .mlobby-match-s{color:var(--framboise-d)}
  .mlobby-match-right{flex-shrink:0;text-align:right}
  .mlobby-match-right b{font-size:18px;font-weight:800;color:var(--ink);white-space:nowrap}
  .mlobby-chev{color:var(--muted);font-size:22px;flex-shrink:0;line-height:1}
  .mlobby-empty{text-align:center;padding:30px 20px;color:var(--muted)}
  .mlobby-empty-emo{font-size:34px;margin-bottom:8px}
  .mlobby-empty p{font-size:14px;font-weight:700;line-height:1.5}
  /* barre retour de la vue détail */
  .mlobby-detailbar{margin:2px 0 10px}
  .mlobby-back{background:none;border:none;font-family:inherit;font-weight:800;font-size:15px;color:var(--turquoise-d);cursor:pointer;padding:6px 2px;display:inline-flex;align-items:center;gap:4px}
  .mlobby-back span{font-size:20px;line-height:1}
  /* Modale "nouvelle partie" : popup centrée classique, montée sous <body> (#mlobby-modal-host)
     pour que position:fixed se cale sur le viewport et non sur le .screen animé (transform). */
  .mlobby-overlay{position:fixed;inset:0;background:rgba(20,24,32,.5);z-index:90000;animation:mlobbyFade .2s ease}
  .mlobby-sheet{position:fixed;inset:0;margin:auto;width:calc(100% - 36px);max-width:420px;height:fit-content;max-height:82vh;z-index:90001;background:var(--fond);border-radius:24px;padding:16px 18px 20px;box-shadow:0 24px 60px rgba(0,0,0,.32);animation:mlobbyPop .2s cubic-bezier(.2,.8,.2,1);overflow-y:auto}
  .mlobby-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
  .mlobby-sheet-head strong{font-size:18px;font-weight:800;color:var(--ink)}
  .mlobby-sheet-x{width:34px;height:34px;border-radius:11px;border:2px solid var(--line);background:#fff;color:var(--muted);font-size:15px;cursor:pointer;flex-shrink:0}
  .mlobby-friend{width:100%;text-align:left;display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 12px;margin-bottom:9px;cursor:pointer;font-family:inherit}
  .mlobby-friend:active{transform:scale(.985)}
  .mlobby-friend-n{flex:1;min-width:0;font-weight:800;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mlobby-friend-go{flex-shrink:0;font-weight:800;font-size:13px;color:#fff;background:var(--turquoise);padding:7px 13px;border-radius:11px;box-shadow:0 2px 0 var(--turquoise-d)}
  .mlobby-sheet-hint{font-size:14px;font-weight:700;color:var(--muted);line-height:1.5;padding:6px 2px 14px}
  .mlobby-sheet-loading{text-align:center;color:var(--muted);font-weight:700;padding:24px}
  .mlobby-invite-btn{width:100%;margin-top:6px;border:2px dashed var(--turquoise);background:var(--turquoise-soft);color:var(--turquoise-d);font-family:inherit;font-weight:800;font-size:15px;padding:14px;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .mlobby-invite-btn:active{transform:scale(.985)}
  .mlobby-invite{display:flex;gap:8px;margin-top:6px}
  .mlobby-invite input{flex:1;min-width:0;border:2px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;font-family:inherit;font-weight:700;font-size:14px;color:var(--ink)}
  .mlobby-invite button{border:none;background:var(--ink);color:#fff;border-radius:14px;padding:0 16px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;flex-shrink:0}
  /* Lobby Cadavre : bouton « défier un ami » secondaire + solo désactivé (style mlobby) */
  .cdv-friend-btn{width:100%;border:2px solid var(--turquoise);background:#fff;color:var(--turquoise-d);font-family:inherit;font-weight:800;font-size:15px;padding:14px;border-radius:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box}
  .cdv-friend-btn:active{transform:scale(.985)}
  .cdv-solo-off{opacity:.55;cursor:default;box-shadow:none}
  @keyframes mlobbyPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
  @keyframes mlobbyFade{from{opacity:0}to{opacity:1}}
  @media(prefers-reduced-motion:reduce){.mlobby-sheet,.mlobby-overlay{animation:none}}
  .multi-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .multi-primary,.multi-secondary,.multi-turn{min-height:44px;border:2px solid var(--ink);border-radius:10px;padding:10px 14px;font-family:'Manrope',sans-serif;font-weight:900;cursor:pointer;box-shadow:3px 4px 0 rgba(27,36,48,.18)}
  .multi-primary{background:var(--jaune);color:var(--ink);flex:1}
  .multi-primary.multi-rose{background:var(--framboise);color:#fff}
  .multi-primary.multi-turq{background:var(--turquoise);color:#fff}
  .multi-primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
  .multi-secondary{background:#fff;color:var(--ink)}
  .multi-turn{width:100%;background:#19D6C5;color:var(--ink);text-align:left}
  .multi-pair-choice{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px;background:#E9FFFC}
  .multi-pair-choice select,.multi-pair-choice button{min-width:0;height:36px;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900}
  .multi-pair-choice select{padding:0 8px}
  .multi-pair-choice button{padding:0 10px;background:#fff;color:var(--ink);cursor:pointer}
  /* Bouton de confirmation du deck = ACTION turquoise (jamais jaune, réservé aux histoires). */
  .multi-pair-choice button[data-act="confirmDeckChoice"],.multi-pair-choice button[data-cdv-action="confirm-deck"]{background:var(--turquoise);color:#fff}
  .multi-pair-choice button:disabled,.multi-pair-choice select:disabled{opacity:.55;cursor:not-allowed}
  .multi-status,.multi-empty{border:2px solid var(--ink);border-radius:12px;background:#fff;padding:13px 14px;font-family:'Manrope',sans-serif;font-weight:800;color:var(--ink);box-shadow:3px 4px 0 rgba(27,36,48,.12)}
  .multi-match{border:2px solid var(--ink);border-left:6px solid var(--turquoise);border-radius:14px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:4px 5px 0 rgba(27,36,48,.16)}
  .multi-match-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-family:'Manrope',sans-serif;color:var(--ink)}
  .multi-match-head strong{display:block;font-size:18px;line-height:1.1}
  .multi-match-head span{display:block;margin-top:4px;font-size:12px;font-weight:800;opacity:.72}
  .multi-match-head>b{font-size:22px;line-height:1}
  .multi-muted{font-family:'Manrope',sans-serif;font-size:13px;font-weight:800;opacity:.7}
  .multi-hands{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .multi-pair-label{font-family:'Manrope',sans-serif;font-weight:900;font-size:14px;color:var(--ink);margin-bottom:6px}
  .multi-join{display:flex;gap:8px;align-items:stretch}
  .multi-join input{flex:1;min-height:42px;border:2px solid var(--ink);border-radius:10px;padding:0 10px;font-family:'Manrope',sans-serif;font-weight:800;color:var(--ink);background:#fff}
  .multi-join .multi-secondary{white-space:nowrap}
  /* Tuile de DUEL — style pétant aligné sur l'accueil (bandeau dégradé). */
  .multi-duel{border:3px solid var(--ink);border-radius:18px;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:6px 7px 0 rgba(27,36,48,.20)}
  .multi-band{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;background:linear-gradient(135deg,#19D6C5 0%,#F53B86 60%,#FFD84D 120%);color:#fff;font-family:'Manrope',sans-serif}
  .multi-vs{font-size:18px;font-weight:950;letter-spacing:.2px;text-shadow:0 1px 0 rgba(27,36,48,.25)}
  .multi-score{font-size:22px;font-weight:950;text-shadow:0 1px 0 rgba(27,36,48,.25)}
  .multi-score i{opacity:.75;font-style:normal;margin:0 3px}
  .multi-body{padding:13px 15px;display:flex;flex-direction:column;gap:11px}
  .multi-sub{font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}
  .multi-turnline{font-family:'Manrope',sans-serif;font-weight:900;font-size:14px;color:var(--turquoise-d);background:var(--turquoise-soft);border-radius:11px;padding:9px 12px}
  .multi-turnline.mine{background:var(--framboise-soft);color:var(--framboise-d)}
  .multi-turnline.mine b{color:var(--framboise-d)}
  .multi-turnline.done{background:var(--jaune-soft);color:var(--jaune-d)}
  /* Tuile partie Cadavre = même design que la tuile Duel (.multi-duel), en bouton. */
  .cdv-coop-tile{width:100%;text-align:left;cursor:pointer;font:inherit;color:var(--ink);padding:0}
  .cdv-coop-tile + .cdv-coop-tile{margin-top:12px}
  .multi-match-head + .cdv-coop-tile{margin-top:12px}
  .cdv-coop-tile:active{transform:translate(1px,1px)}
  .multi-match-foot{display:flex;justify-content:flex-end}
  .multi-close{min-height:34px;border:none;background:none;padding:4px 6px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;color:#C0392B;opacity:.85;cursor:pointer;text-decoration:underline}
  .multi-close:active{opacity:.6}
  .multi-hand{min-height:54px;border:2px solid rgba(27,36,48,.22);border-radius:10px;padding:8px;background:#F7FAFC;font-family:'Manrope',sans-serif;display:flex;flex-direction:column;gap:3px}
  .multi-hand span{font-size:11px;font-weight:900;text-transform:uppercase;opacity:.62}
  .multi-hand b{font-size:14px;line-height:1.1}
  .multi-hand em{font-size:12px;font-style:normal;font-weight:900;color:var(--framboise)}
  .multi-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .multi-card{height:174px;border:2px solid var(--ink);border-radius:12px;background:#fff;padding:8px;display:grid;grid-template-rows:1fr auto auto;gap:5px;text-align:left;font-family:'Manrope',sans-serif;cursor:pointer;box-shadow:3px 4px 0 rgba(27,36,48,.14);overflow:hidden}
  .multi-card.selected{background:#FFF4BE;outline:3px solid #19D6C5}
  .multi-card img{width:100%;height:104px;object-fit:cover;border-radius:8px;border:1px solid rgba(27,36,48,.16);background:#eef2f7}
  .multi-card span{font-size:15px;font-weight:950;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .multi-card em{font-size:12px;font-style:normal;font-weight:900;opacity:.72}
  @media (min-width:720px){
    .games-tabs{width:min(100%,380px)}
    .multiplayer-shell{max-width:760px;margin:0 auto;width:100%}
    .multi-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  }
  @media (prefers-reduced-motion: reduce){
    .games-tab{transition:none}
  }
  .home-multi::after{content:"";position:absolute;right:-30px;top:-36px;width:118px;height:118px;border:3px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(255,255,255,.14);pointer-events:none}
  .home-multi:active{transform:rotate(.45deg) translate(1px,2px);box-shadow:4px 5px 0 rgba(27,36,48,.26)}
  .home-multi-mark{position:relative;z-index:1;width:54px;height:54px;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--framboise);box-shadow:4px 4px 0 rgba(27,36,48,.28);display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-size:18px;font-weight:1000;line-height:1;flex-shrink:0;transform:rotate(-4deg)}
  .home-multi-tt{position:relative;z-index:1;flex:1;min-width:0}
  .home-multi-tt .t{font-family:'Manrope',sans-serif;font-weight:900;font-size:22px;line-height:1.05;color:#fff;text-shadow:0 2px 0 rgba(27,36,48,.22)}
  .home-multi-tt .s{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:21px;color:rgba(255,255,255,.94);margin-top:3px;line-height:1.1}
  .home-multi-arrow{position:relative;z-index:1;width:22px;height:22px;flex-shrink:0;color:#fff}
  /* ============================================================
     CADAVRE EXQUIS Lot A - mock local jouable
     ============================================================ */
  .cadavre-shell{padding:12px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;margin:0 auto}
  .cadavre-shell button,
  .cadavre-shell input{font-family:'Manrope',sans-serif}
  .cadavre-shell button:focus-visible,
  .cadavre-shell input:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px}
  .cdv-empty{margin:16px 20px;background:#fff;border:var(--border-sketch);border-radius:14px;padding:16px;font-family:'Manrope',sans-serif;font-weight:800;box-shadow:var(--shadow-sketch)}
  .cdv-lobby{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:24px 18px 8px}
  .cdv-lobby-mascot{width:96px;height:96px;object-fit:contain;transform:rotate(-5deg);filter:drop-shadow(2px 3px 0 rgba(27,36,48,.18))}
  .cdv-lobby-title{font-family:'Manrope',sans-serif;font-weight:950;font-size:24px;color:var(--framboise);margin:0}
  .cdv-lobby-sub{font-family:'Manrope',sans-serif;font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:300px;margin:0 0 6px}
  .cdv-lobby .cdv-primary,.cdv-lobby .cdv-secondary{width:100%;max-width:320px}
  .cdv-lobby-note{font-size:13px;font-weight:800;color:var(--turq-d);background:var(--turq-t);border-radius:12px;padding:10px 12px;max-width:320px}
  .cdv-quitbar{display:flex;justify-content:flex-end;margin-bottom:2px}
  .cdv-quit{border:none;background:none;padding:4px 6px;font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;color:var(--ink-soft);cursor:pointer;text-decoration:underline}
  .cdv-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:sticky;top:74px;z-index:12;background:rgba(252,248,240,.94);backdrop-filter:blur(8px);padding:6px 0}
  .cdv-hud>div{min-height:54px;background:#fff;border:var(--border-sketch-thin);border-radius:12px;box-shadow:var(--shadow-sketch-sm);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .cdv-hud-k{font-size:10.5px;font-weight:900;color:var(--ink-soft);line-height:1}
  .cdv-hud strong{font-size:18px;font-weight:950;line-height:1;color:var(--ink)}
  .cdv-hearts{font-size:22px;letter-spacing:1px;color:var(--framboise);line-height:1}
  .cdv-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .cdv-slot{min-height:126px;background:#fff;border:2px dashed var(--line);border-radius:14px;padding:7px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow-sketch-sm);overflow:hidden}
  .cdv-slot.filled{border-style:solid;border-color:var(--ink)}
  .cdv-slot.active{background:var(--jaune-soft);border-color:var(--jaune-d)}
  .cdv-slot-img{flex:1 1 auto;min-height:64px;border-radius:11px;background:var(--mist);display:grid;place-items:center;font-size:25px;font-weight:900;border:1.5px solid rgba(45,42,50,.14)}
  .cdv-visual-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
  .cdv-slot-meta{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.05}
  .cdv-slot-meta span{font-size:10px;font-weight:900;color:var(--ink-soft)}
  .cdv-slot-meta strong{font-size:12px;font-weight:950;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cdv-slot-meta em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--framboise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cdv-panel{background:#fff;border:var(--border-sketch);border-radius:18px;padding:15px;box-shadow:var(--shadow-sketch);display:flex;flex-direction:column;gap:13px}
  .cdv-message{background:var(--turquoise-soft);border:2px solid rgba(45,42,50,.14);border-radius:12px;padding:10px 12px;font-weight:850;font-size:13.5px;color:var(--ink);line-height:1.35}
  .cdv-turn{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .cdv-turn b{font-size:13px;font-weight:950;color:var(--ink-soft)}
  .cdv-turn span{background:var(--tangerine-soft);color:var(--tangerine-d);border-radius:999px;padding:5px 10px;font-weight:950;font-size:12px}
  .cdv-deck{height:398px;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));align-content:start;gap:12px;overflow-y:auto;overflow-x:hidden;padding:3px 4px 10px 2px;margin:0 -2px}
  .cdv-card{min-width:0;border:var(--border-sketch-thin);border-radius:14px;background:#fff;color:var(--ink);padding:9px;box-shadow:var(--shadow-sketch-sm);cursor:pointer;text-align:center;display:grid;grid-template-rows:auto auto auto;gap:7px;transition:transform .12s,box-shadow .12s}
  .cdv-card:active{transform:translate(1px,2px);box-shadow:none}
  /* image CARRÉE et COMPLÈTE (pas de rognage) : la boîte suit le ratio 1:1 de l'image mnémo */
  .cdv-card-img{aspect-ratio:1/1;width:100%;overflow:hidden;border-radius:11px;display:grid;place-items:center;font-size:38px;border:1.5px solid rgba(45,42,50,.16);background:#fff}
  .cdv-coop-deck{height:360px}
  .cdv-coop-card{grid-template-rows:auto auto}
  .cdv-coop-card:disabled{opacity:.7;cursor:wait}
  .cdv-card-ru{font-size:17px;font-weight:950;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cdv-card-fr{font-size:12px;font-weight:800;color:var(--ink-soft);line-height:1.15}
  .cdv-bot-wait{min-height:120px;border:2px dashed var(--line);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);font-weight:900}
  .cdv-dotspin,.cdv-spinner{border-radius:50%;border:4px solid var(--mist);border-top-color:var(--framboise);animation:cdvSpin .8s linear infinite}
  .cdv-dotspin{width:28px;height:28px}
  .cdv-spinner{width:58px;height:58px;margin:5px auto}
  .cdv-generation{text-align:center;align-items:center}
  .cdv-gen-title{font-size:18px;font-weight:950;color:var(--framboise)}
  .cdv-generation p{font-size:13px;color:var(--ink-soft);line-height:1.4}
  .cdv-bars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .cdv-bar{display:flex;flex-direction:column;gap:5px;min-width:0}
  .cdv-bar span{height:8px;border-radius:999px;background:var(--mist);border:1px solid rgba(45,42,50,.08)}
  .cdv-bar b{font-size:9.5px;font-weight:950;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cdv-bar.active span{background:var(--framboise)}
  .cdv-bar.active b{color:var(--framboise)}
  .cdv-task-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .cdv-task-head span{font-weight:950;color:var(--ink)}
  .cdv-task-head b{font-size:12px;font-weight:950;background:var(--jaune-soft);color:var(--jaune-d);border-radius:999px;padding:5px 9px;white-space:nowrap}
  .cdv-prompt{font-size:14px;line-height:1.45;color:var(--ink);font-weight:750}
  /* Phrase FORMÉE qui coule (ordre des mots cible), image au-dessus du mot,
     seule la carte active encadrée. Lit comme une phrase, pas une grille. */
  .cdv-sentence-line{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:9px 12px;margin-top:0;padding:14px 10px;background:var(--cream);border-radius:14px;line-height:1.2}
  .cdv-word{display:inline-flex;flex:1 1 28%;max-width:32%;min-width:82px;flex-direction:column;align-items:center;gap:4px;padding:4px 5px;border-radius:10px}
  .cdv-word-emoji{font-size:46px;line-height:1;opacity:.9}
  .cdv-word-emoji .cdv-visual-img{width:72px;height:72px;border-radius:11px;border:1px solid rgba(45,42,50,.14)}
  .cdv-word b{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .cdv-word .cdv-blank{font-size:19px;font-weight:900;color:var(--framboise);letter-spacing:1px}
  .cdv-word .cdv-blank.locked{color:#C7BFAF}
  /* On encadre UNIQUEMENT l'image de la carte à deviner (pas le « ? » en dessous),
     et on la rend un peu plus grosse que les autres. */
  .cdv-word.active{background:none;box-shadow:none;max-width:40%}
  .cdv-word.active .cdv-word-emoji{padding:3px;border-radius:14px;background:var(--framboise-t);box-shadow:0 0 0 3px var(--framboise);font-size:60px}
  .cdv-word.active .cdv-word-emoji .cdv-visual-img{width:92px;height:92px}
  .cdv-word.solved b{color:var(--vert)}
  .cdv-word .cdv-wrong{font-size:19px;font-weight:900;color:var(--framboise-d);text-decoration:line-through;text-decoration-thickness:2px}
  .cdv-period{align-self:flex-end;font-size:19px;font-weight:800;color:var(--ink)}
  .cdv-fr-line{text-align:center;font-size:22px;font-weight:900;color:var(--ink);line-height:1.35}
  .cdv-fr-word.active{color:var(--framboise-d);font-style:normal;font-weight:900;background:var(--framboise-t);border-radius:6px;padding:1px 5px}
  .cdv-task-hint{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
  .cdv-task-hint b{color:var(--turq-d)}
  .cdv-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .cdv-option{min-height:48px;border:var(--border-sketch-thin);border-radius:12px;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch-sm);font-weight:950;font-size:16px;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s}
  .cdv-option.selected{background:var(--turquoise);color:#fff}
  .cdv-option:active{transform:translate(1px,2px);box-shadow:none}
  .cdv-primary,.cdv-secondary,.cdv-linkbtn{min-height:46px;border:var(--border-sketch-thin);border-radius:12px;padding:11px 14px;font-weight:950;cursor:pointer;box-shadow:var(--shadow-sketch-sm);transition:transform .12s,box-shadow .12s}
  .cdv-primary{background:var(--framboise);color:#fff}
  .cdv-secondary{background:var(--turquoise);color:#fff}
  .cdv-linkbtn{background:#fff;color:var(--ink-soft);border-color:var(--line);box-shadow:none}
  .cdv-primary:active,.cdv-secondary:active,.cdv-linkbtn:active{transform:translate(1px,2px);box-shadow:none}
  .cdv-field{display:flex;flex-direction:column;gap:7px;font-weight:900;color:var(--ink)}
  .cdv-field span{font-size:13px;color:var(--ink-soft)}
  .cdv-field input{width:100%;height:50px;border:var(--border-sketch-thin);border-radius:12px;background:#fff;padding:0 12px;font-size:18px;font-weight:900;color:var(--ink)}
  .cdv-syllable-answer{min-height:44px;border:2px dashed var(--turquoise);border-radius:12px;background:var(--turquoise-soft);display:grid;place-items:center;font-size:20px;font-weight:950;color:var(--ink)}
  .cdv-feedback{border-radius:12px;background:var(--jaune-soft);color:var(--ink);font-size:13px;font-weight:850;line-height:1.35;padding:9px 11px}
  .cdv-catch-card{border:var(--border-sketch-thin);border-radius:14px;background:var(--framboise-soft);padding:13px;text-align:center;display:flex;flex-direction:column;gap:6px}
  .cdv-catch-card span{font-size:12px;font-weight:900;color:var(--ink-soft)}
  .cdv-catch-card b{font-size:26px;font-weight:950;color:var(--framboise)}
  .cdv-catch-card em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--ink)}
  .cdv-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
  .cdv-strip-cell{aspect-ratio:1/1;border:var(--border-sketch-thin);border-radius:14px;display:grid;place-items:center;box-shadow:var(--shadow-sketch-sm)}
  .cdv-strip-cell span{width:100%;height:100%;display:grid;place-items:center;font-size:30px}
  .cdv-strip-cell .cdv-visual-img{width:100%;height:100%;border-radius:12px}
  .cdv-sentence{font-size:24px;font-weight:950;line-height:1.2;color:var(--ink);text-align:center}
  .cdv-literal{font-size:14px;font-weight:800;color:var(--ink-soft);line-height:1.4;text-align:center}
  .cdv-bonus{border-radius:12px;background:var(--jaune-soft);padding:9px 11px;font-size:13px;font-weight:900;text-align:center;color:var(--jaune-d)}
  .cdv-bonus.ok{background:var(--vert-soft);color:var(--vert)}
  .cdv-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .cdv-gameover{text-align:center;align-items:stretch}
  .cdv-gameover h2{font-size:26px;font-weight:950;color:var(--framboise);line-height:1.1}
  .cdv-gameover p{font-size:15px;line-height:1.45;color:var(--ink)}
  .cdv-results{display:grid;gap:8px}
  .cdv-result-lines{display:grid;gap:3px;margin-top:6px;font-size:12px;font-weight:800;color:var(--ink-soft)}
  .cdv-medal{font-size:54px;line-height:1}
  .cdv-rewards{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
  .cdv-rewards span{background:var(--turquoise-soft);color:var(--turquoise-d);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:950}
  .cdv-color-turquoise{background:var(--turquoise-soft)}
  .cdv-color-framboise{background:var(--framboise-soft)}
  .cdv-color-tangerine{background:var(--tangerine-soft)}
  .cdv-color-jaune{background:var(--jaune-soft)}
  .cdv-color-ink{background:var(--mist)}
  @keyframes cdvSpin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion: reduce){
    .cdv-dotspin,.cdv-spinner{animation:none}
    .cdv-card,.cdv-option,.cdv-primary,.cdv-secondary,.cdv-linkbtn{transition:none}
  }
  @media (max-width:390px){
    .cadavre-shell{padding-left:14px;padding-right:14px}
    .cdv-hud{gap:5px}
    .cdv-hud>div{min-height:48px}
    .cdv-hud strong{font-size:16px}
    .cdv-chain{gap:5px}
    .cdv-slot{min-height:112px;padding:5px}
    .cdv-slot-img{min-height:54px;font-size:22px}
    .cdv-options,.cdv-actions{grid-template-columns:1fr}
    .cdv-sentence{font-size:21px}
  }

  .home-hint{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:16px;color:var(--ink-soft);text-align:center;margin:12px 20px 0}

  /* ============================================================
     MON DECK (s-mondeck) — galerie unifiée des cartes perso de l'user.
     ============================================================ */
  #s-mondeck{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
  .mondeck-search{padding:8px 20px 6px;position:relative;z-index:5}
  .mondeck-search-bar{display:flex;align-items:center;gap:10px;background:#fff;border:var(--border-sketch-thin);border-radius:16px;box-shadow:var(--shadow-sketch-sm);padding:11px 14px}
  .mondeck-search-ico{width:18px;height:18px;color:var(--ink-soft);flex-shrink:0}
  .mondeck-search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;color:var(--ink);-webkit-appearance:none;appearance:none}
  .mondeck-search-input::placeholder{color:var(--ink-soft);font-weight:500}
  .mondeck-search-clear{border:none;background:var(--mist);color:var(--ink-soft);width:24px;height:24px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:12px;line-height:1}

  .mondeck-filters{display:flex;flex-wrap:wrap;gap:8px;padding:8px 20px 4px}
  .mondeck-filter{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:var(--ink);background:#fff;border:var(--border-sketch-thin);border-radius:18px;padding:7px 14px;cursor:pointer;box-shadow:1.5px 1.5px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}
  .mondeck-filter:active{transform:translate(1px,1px);box-shadow:0 0 0 0 var(--ink)}
  .mondeck-filter.active{background:var(--framboise);color:#FFF8F1}
  .mondeck-filter-mine{background:var(--jaune)}
  .mondeck-filter-mine.active{background:var(--framboise);color:#FFF8F1}

  .mondeck-count{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:15px;color:var(--ink-soft);padding:6px 22px 2px}

  .mondeck-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px 20px 0}
  .mondeck-card{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;background:#fff;border:var(--border-sketch-thin);border-radius:16px;box-shadow:var(--shadow-sketch-sm);overflow:hidden;cursor:pointer;font-family:inherit;color:var(--ink);padding:0;transition:transform .14s,box-shadow .12s}
  .mondeck-card:active{transform:translate(1px,2px);box-shadow:0 0 0 0 var(--ink)}
  .mondeck-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--mist);border-bottom:2px solid var(--ink)}
  .mondeck-card-noimg{width:100%;aspect-ratio:1/1;display:grid;place-items:center;font-size:46px;color:var(--ink-soft);background:linear-gradient(135deg,var(--mist) 0%,#EFE6D2 100%);border-bottom:2px solid var(--ink)}
  .mondeck-card-info{padding:9px 12px 11px;display:flex;flex-direction:column;gap:2px}
  .mondeck-card-target{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;line-height:1.15;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mondeck-card-tr{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:14px;color:var(--ink-soft);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mondeck-card-badge{position:absolute;top:8px;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.8px solid var(--ink);box-shadow:1.5px 1.5px 0 var(--ink);font-family:'Manrope',sans-serif;font-weight:800;font-size:13px}
  .mondeck-card-badge.mastered{right:8px;background:var(--turquoise);color:#fff}
  .mondeck-card-badge.custom{left:8px;background:var(--jaune);color:var(--ink)}
  .mondeck-card-badge.rarity{right:8px;color:#fff}
  .mondeck-card-badge.mastered + .mondeck-card-badge.rarity{right:40px}
  /* Couleurs alignées sur la palette du reveal (core/reveal.js) */
  .mondeck-card-badge.rarity.commune{background:var(--vert)}
  .mondeck-card-badge.rarity.rare{background:var(--turquoise)}
  .mondeck-card-badge.rarity.epique{background:var(--framboise)}
  .mondeck-card-badge.rarity.legendaire{background:var(--jaune);color:var(--ink)}
  .mondeck-card.mastered{outline:2px solid var(--turquoise);outline-offset:-2px}
  .mondeck-card.is-custom .mondeck-card-noimg{color:var(--framboise)}
  .mondeck-card.is-collection .mondeck-card-noimg{color:var(--marine);background:linear-gradient(135deg,#EAF7F4 0%,#F6E8F0 100%)}

  .mondeck-empty{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:20px;color:var(--ink-soft);text-align:center;padding:32px 20px 20px;line-height:1.3}

  .mondeck-create{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom));background:var(--framboise);color:#FFF8F1;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;border:var(--border-sketch);border-radius:24px;padding:13px 24px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;z-index:20}
  .mondeck-create:active{transform:translateX(-50%) translate(1px,2px);box-shadow:var(--shadow-sketch)}

  /* ============================================================
     LEVEL V2 (page sous-niveaux) — refonte 2026-05-31. Header rose
     framboise, barre de progression thème, fil pointillé décoratif,
     cartes blocs avec médaillon + 4 états (idle/active/done/locked).
     ============================================================ */
  .lvl-head{display:flex;gap:14px;align-items:flex-start;padding:calc(18px + env(safe-area-inset-top)) 20px 10px;background:var(--bg);position:sticky;top:0;z-index:10}
  .lvl-head-back{flex:0 0 48px;height:48px;background:#FFF8F1;border:var(--border-sketch);border-radius:14px;box-shadow:var(--shadow-sketch-sm);font-family:'Manrope',sans-serif;font-size:26px;font-weight:800;color:var(--ink);cursor:pointer;line-height:1;display:grid;place-items:center}
  .lvl-head-back:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
  .lvl-head-titles{flex:1;min-width:0}
  .lvl-head-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;color:var(--framboise);line-height:1.04;letter-spacing:-.01em}
  .lvl-head-sub{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:22px;color:var(--tangerine);margin-top:4px;line-height:1.1}

  .lvl-tprog{display:flex;align-items:center;gap:12px;padding:6px 22px 18px}
  .lvl-tprog-bar{flex:1;height:16px;background:#FFF8F1;border:2.5px solid var(--ink);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sketch-sm);position:relative}
  /* Track décoratif quand vide : dégradé framboise → tangerine très discret
     pour casser la monotonie du blanc. La fill verte recouvre dès qu'il y a
     un bloc terminé. */
  .lvl-tprog-bar::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--framboise-soft) 0%,var(--tangerine-soft) 50%,var(--vert-soft) 100%);opacity:.55;pointer-events:none}
  .lvl-tprog-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--vert) 0%,var(--turquoise) 100%);transition:width .5s ease;position:relative;z-index:1;border-right:2px solid var(--ink)}
  .lvl-tprog-bar i:empty{border-right:none}
  .lvl-tprog-lbl{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:18px;color:var(--ink);white-space:nowrap}

  .lvl-path{position:relative;padding:4px 20px 28px}
  .lvl-path::before{content:"";position:absolute;left:54px;top:32px;bottom:32px;width:4px;background:repeating-linear-gradient(var(--ink) 0 6px,transparent 6px 14px);opacity:.18;z-index:0;border-radius:2px}

  .lvl-block{position:relative;z-index:1;display:flex;align-items:stretch;gap:14px;background:#fff;border:var(--border-sketch);border-radius:20px;box-shadow:var(--shadow-sketch-lg);padding:14px 14px;margin-bottom:18px;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);transition:transform .14s,box-shadow .12s;width:100%}
  .lvl-block:active:not(:disabled){transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
  .lvl-block:disabled{cursor:not-allowed}
  .lvl-block:focus-visible{outline:3px solid var(--framboise);outline-offset:2px}

  .lvl-block-medal{position:relative;flex:0 0 60px;height:80px;border:2.5px solid var(--ink);border-radius:12px;box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;background:#FFF8F1;font-family:'Manrope',sans-serif;font-weight:800;color:var(--ink-soft)}
  .lvl-block-num{font-size:30px;line-height:1;color:var(--ink)}
  .lvl-block-tag{position:absolute;bottom:-9px;right:-9px;width:28px;height:28px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;background:var(--ink-soft);box-shadow:1.5px 1.5px 0 var(--ink)}
  .lvl-block-tag.tag-done{background:var(--vert)}
  .lvl-block-tag.tag-locked{background:#8A8470}

  .lvl-block-info{flex:1;min-width:0;display:flex;flex-direction:column}
  .lvl-block-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:21px;line-height:1.05;color:var(--ink);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .lvl-block-gloss{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:17px;color:var(--ink-soft);opacity:.85}
  .lvl-block-desc{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.3}
  .lvl-block-desc-hl{color:var(--tangerine);font-weight:800}

  .lvl-block-cta-wrap{flex:0 0 auto;display:flex;align-items:center;align-self:center}
  .lvl-pill{border:2px solid var(--ink);border-radius:30px;padding:9px 16px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transform:rotate(-1.5deg)}
  .lvl-pill-start{background:#fff;color:var(--framboise)}
  .lvl-pill-cont{background:var(--tangerine);color:#FFF8F1;transform:rotate(1.5deg)}
  .lvl-pill-redo{background:#fff;color:var(--vert)}
  .lvl-pill-locked{background:#E9E4D6;color:#8A8470;border-color:#8A8470;box-shadow:none;transform:none}

  /* État ACTIF : dégradé teal soft, médaillon turquoise. La mini-barre vit
     dans la colonne info, alignée au bas du médaillon via margin-top:auto. */
  .lvl-block-active{background:linear-gradient(115deg,var(--turquoise-soft) 0%,#FFF8F1 75%);border-color:var(--ink)}
  .lvl-block-active .lvl-block-medal{background:var(--turquoise);color:#fff}
  .lvl-block-active .lvl-block-num{color:#fff}
  .lvl-block-active .lvl-block-word{color:var(--turquoise-d)}
  .lvl-block-active .lvl-block-gloss{color:var(--turquoise-d);opacity:.78}
  .lvl-block-pbar{margin-top:auto;height:7px;background:#D9F2EB;border:1.8px solid var(--ink);border-radius:10px;overflow:hidden;width:100%}
  .lvl-block-pbar i{display:block;height:100%;background:var(--turquoise);transition:width .5s ease}

  /* État DONE : médaillon vert pâle + badge ✓ vert. */
  .lvl-block-done .lvl-block-medal{background:#DFF3E8}

  /* État LOCKED : grayscale + opacity + pill désactivé. */
  .lvl-block-locked{filter:grayscale(.7);opacity:.6;box-shadow:var(--shadow-sketch-sm)}
  .lvl-block-locked .lvl-block-medal{background:#E9E4D6}

  .lvl-foot{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:18px;color:var(--ink-soft);text-align:center;padding:0 20px 24px}

  /* Variante Ancrage du bouton "Plonge" : jaune + badge compteur. État
     disabled (opacity réduite) si le deck d'ancrage est vide. */
  .home-anchor-btn{background:linear-gradient(135deg,var(--jaune) 0%,#E5A613 100%);color:var(--ink)}
  .home-anchor-btn .chev{color:var(--ink)}
  .home-anchor-btn.disabled{opacity:.5;filter:grayscale(.3)}
  .home-anchor-count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;background:var(--framboise);color:#FFF8F1;border:1.5px solid var(--ink);border-radius:13px;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;box-shadow:1.5px 1.5px 0 var(--ink);flex-shrink:0}
  .home-dive-btn.disabled{opacity:.5;filter:grayscale(.3)}

  /* ============================================================
     IMGGEN REVEAL V2 (2026-05-31) — refonte du moment de découverte.
     Carte 3D (face mot → flip → face image), shimmer pendant pending,
     breath subtle, actions fade-in après le beat. Tout GPU (transform/opacity).
     ============================================================ */
  .imggen-reveal{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
  .imggen-card3d{width:100%;max-width:min(60vh, 360px);aspect-ratio:1/1;perspective:1200px}
  .imggen-card3d-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s linear}
  .imggen-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(1px);-webkit-transform:translateZ(1px);border:var(--border-sketch);border-radius:18px;box-shadow:var(--shadow-sketch-lg);overflow:hidden;background:#FFF8F1;transition:visibility 0s linear 0.4s}

  /* Face MOT : recto, visible quand pas flippée (transform 0deg). */
  .imggen-face-word{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 18px;text-align:center}
  .imggen-face-mnemo{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:22px;color:var(--ink-soft);line-height:1.2;max-width:90%}
  .imggen-face-word-block{display:flex;flex-direction:column;align-items:center;gap:4px}
  .imggen-face-target{font-family:'Manrope',sans-serif;font-weight:800;font-size:30px;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
  .imggen-face-phon{font-family:'Manrope',sans-serif;font-size:14px;color:var(--turquoise-d)}
  .imggen-face-tr{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:20px;color:var(--framboise)}

  /* Face IMAGE : verso, révélée après flip 180deg. */
  .imggen-face-image{transform:rotateY(180deg) translateZ(1px);-webkit-transform:rotateY(180deg) translateZ(1px);background:var(--mist);display:grid;place-items:center;padding:7px}
  /* FILET DE SÉCURITÉ WKWebView : on masque réellement la face MOT (recto) dès
     que la carte est retournée sur la face IMAGE (states reveal-flip/beat/actions),
     et inversement la face IMAGE tant que le flip n'a pas eu lieu. La transition
     visibility (délai 0.42s ≈ moitié du flip 0.8s) évite de voir une face
     disparaître pendant la rotation. */
  .imggen-reveal[data-state="reveal-flip"] .imggen-face-word,
  .imggen-reveal[data-state="beat"] .imggen-face-word,
  .imggen-reveal[data-state="actions"] .imggen-face-word{visibility:hidden}
  .imggen-reveal[data-state="pending"] .imggen-face-image,
  .imggen-reveal[data-state="reveal-in"] .imggen-face-image,
  .imggen-reveal[data-state="error"] .imggen-face-image{visibility:hidden}
  .imggen-face-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}

  /* Dos générique : superposé en pending (z au-dessus de la face MOT). On le
     masque dès que la carte commence à entrer (state ≠ pending). */
  .imggen-face-back{display:flex;align-items:center;justify-content:center;background:var(--turquoise);transition:opacity .35s ease;z-index:2}
  .imggen-face-back-motif{font-size:56px;color:#FFF8F1;text-shadow:2px 2px 0 rgba(0,0,0,.15)}
  .imggen-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}

  /* Wait copy + caption */
  .imggen-wait{min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:20px;line-height:1.25;color:var(--ink-soft);transition:opacity .25s ease;padding:0 12px}
  .imggen-caption{min-height:18px;text-align:center;font-family:'Manrope',sans-serif;font-size:13px;color:#9A3A3A;line-height:1.4;max-width:280px;padding:0 8px}

  /* Mur des trouvailles : bandeau défilant de cartes d'autres joueurs, affiché
     uniquement en pending. Vue passive (pointer-events:none). Masqué tant que
     le JS n'a pas posé .show (stock insuffisant → reste display:none). */
  .imggen-wall{display:none;width:100%;max-width:min(60vh,360px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .imggen-wall.show{display:block;animation:imggenWallIn .4s ease both}
  .imggen-wall-kicker{margin:0 0 8px;text-align:center;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:16px;color:var(--ink-soft)}
  .imggen-wall-strip{display:flex;gap:10px;width:max-content;animation:imggenWallScroll 32s linear infinite}
  .imggen-wall-tile{flex:0 0 auto;width:84px}
  .imggen-wall-img{width:84px;height:84px;object-fit:cover;border:var(--border-sketch);border-radius:12px;box-shadow:var(--shadow-sketch);background:var(--mist)}
  .imggen-wall-cap{margin:5px 0 0;width:84px;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:11px;line-height:1.15;color:var(--ink-soft);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  @keyframes imggenWallScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes imggenWallIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion: reduce){.imggen-wall-strip{animation:none}}

  /* Onboarding : on borne la taille du dos animé réutilisé (le reveal V2 plein
     écran fait min(60vh,360px) ; ici on veut une vignette compacte dans la
     carte d'onboarding). Aucune duplication de @keyframes : on réutilise
     imggenBreath / imggenShimmer / imggenBackHue via .imggen-reveal[pending]. */
  .onb-create-reveal{gap:10px;width:auto}
  .onb-create-reveal .imggen-card3d{width:180px;max-width:180px}
  .onb-create-reveal .imggen-wait{font-size:18px;min-height:auto}
  .onb-create-reveal .imggen-wall{max-width:240px}

  /* ===== Machine d'état ===== */

  /* PENDING : carte affichée avec face arrière (teal) au-dessus, shimmer +
     breath. La face MOT est déjà préparée dessous mais cachée par le dos. */
  .imggen-reveal[data-state="pending"] .imggen-card3d{animation:imggenBreath 2.6s ease-in-out infinite}
  .imggen-reveal[data-state="pending"] .imggen-face-back{opacity:1;animation:imggenBackHue 9s ease-in-out infinite}
  .imggen-reveal[data-state="pending"] .imggen-shimmer{animation:imggenShimmer 1.1s linear infinite}
  .imggen-reveal[data-state="pending"] .imggen-wait{opacity:1;min-height:52px}
  .imggen-reveal[data-state="pending"] .imggen-actions-v2{opacity:0;pointer-events:none}

  /* REVEAL-IN : carte entre via scale .85 → 1 + fade-in. Dos disparaît. */
  .imggen-reveal[data-state="reveal-in"] .imggen-card3d{animation:imggenEntry .8s cubic-bezier(.34,1.56,.5,1) both}
  .imggen-reveal[data-state="reveal-in"] .imggen-face-back{opacity:0;pointer-events:none}
  .imggen-reveal[data-state="reveal-in"] .imggen-shimmer{display:none}
  .imggen-reveal[data-state="reveal-in"] .imggen-wait{opacity:0}
  .imggen-reveal[data-state="reveal-in"] .imggen-actions-v2{opacity:0;pointer-events:none}

  /* REVEAL-FLIP : flip 180deg vers face image. */
  .imggen-reveal[data-state="reveal-flip"] .imggen-card3d-inner{transform:rotateY(180deg)}
  .imggen-reveal[data-state="reveal-flip"] .imggen-face-back{opacity:0;pointer-events:none}
  .imggen-reveal[data-state="reveal-flip"] .imggen-shimmer{display:none}
  .imggen-reveal[data-state="reveal-flip"] .imggen-wait{opacity:0}
  .imggen-reveal[data-state="reveal-flip"] .imggen-actions-v2{opacity:0;pointer-events:none}
  .imggen-reveal[data-state="reveal-flip"] .imggen-card3d{transform:rotate(0.5deg)}

  /* BEAT : pause de respiration, carte toujours flippée. */
  .imggen-reveal[data-state="beat"] .imggen-card3d{transform:rotate(0.5deg)}
  .imggen-reveal[data-state="beat"] .imggen-card3d-inner{transform:rotateY(180deg)}
  .imggen-reveal[data-state="beat"] .imggen-face-back{opacity:0;pointer-events:none}
  .imggen-reveal[data-state="beat"] .imggen-shimmer{display:none}
  .imggen-reveal[data-state="beat"] .imggen-wait{opacity:0}
  .imggen-reveal[data-state="beat"] .imggen-actions-v2{opacity:0;pointer-events:none}

  /* ACTIONS : carte flippée, boutons apparaissent. */
  .imggen-reveal[data-state="actions"] .imggen-card3d{transform:rotate(0.5deg)}
  .imggen-reveal[data-state="actions"] .imggen-card3d-inner{transform:rotateY(180deg)}
  .imggen-reveal[data-state="actions"] .imggen-face-back{opacity:0;pointer-events:none}
  .imggen-reveal[data-state="actions"] .imggen-shimmer{display:none}
  .imggen-reveal[data-state="actions"] .imggen-wait{opacity:0}
  .imggen-reveal[data-state="actions"] .imggen-actions-v2{opacity:1;pointer-events:auto;animation:imggenActionsIn .35s ease both}

  /* ERROR : carte arrêtée sur face MOT avec emoji, juste Recréer/Retour. */
  .imggen-reveal[data-state="error"] .imggen-card3d{animation:none}
  .imggen-reveal[data-state="error"] .imggen-face-back{opacity:1;background:#9A3A3A}
  .imggen-reveal[data-state="error"] .imggen-face-back-motif{font-size:48px}
  .imggen-reveal[data-state="error"] .imggen-shimmer{display:none}
  .imggen-reveal[data-state="error"] .imggen-wait{opacity:0}
  .imggen-reveal[data-state="error"] .imggen-actions-v2{opacity:1;pointer-events:auto}
  .imggen-reveal[data-state="error"] .imggen-btn-validate,
  .imggen-reveal[data-state="error"] #imggenBtnShare{display:none}

  /* Pause animations si onglet caché (économie batterie) */
  @media (prefers-reduced-motion: reduce){
    .imggen-card3d{animation:none !important}
    .imggen-card3d-inner{transition:none !important}
    .imggen-shimmer{animation:none !important;display:none !important}
    .imggen-face-back{animation:none !important}
  }

  @keyframes imggenBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.015)}}
  @keyframes imggenShimmer{to{transform:translateX(100%)}}
  @keyframes imggenEntry{from{opacity:0;transform:scale(.85) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
  @keyframes imggenActionsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  /* Dos de carte qui change de couleur pendant le chargement (pas que teal). */
  @keyframes imggenBackHue{0%,100%{background:var(--turquoise)}25%{background:var(--tangerine)}50%{background:var(--jaune)}75%{background:var(--framboise)}}

  /* ===== Actions V2 ===== */
  .imggen-actions-v2{display:flex;flex-direction:column;gap:22px;align-items:center;width:100%;padding-bottom:8px}
  .imggen-actions-v2 .imggen-btn-validate{background:var(--tangerine);color:#FFF8F1;border:var(--border-sketch);border-radius:16px;padding:14px 30px;font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;transform:rotate(-1deg);transition:transform .12s,box-shadow .12s}
  .imggen-actions-v2 .imggen-btn-validate:active{transform:rotate(-1deg) translate(2px,3px);box-shadow:var(--shadow-sketch)}
  .imggen-actions-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .imggen-actions-v2 .imggen-btn-ghost{color:#FFF8F1;border:var(--border-sketch-thin);padding:9px 15px;font-family:'Manrope',sans-serif;font-weight:800;font-size:13px;border-radius:12px;box-shadow:var(--shadow-sketch-sm);cursor:pointer}
  .imggen-actions-v2 .imggen-btn-ghost:active{transform:translate(1px,1px) scale(.96);box-shadow:none}
  .imggen-actions-v2 .imggen-btn-ghost:hover:not(:disabled){filter:brightness(1.06)}
  /* 3 couleurs vives Loufoque sur les 3 boutons secondaires */
  .imggen-actions-v2 #imggenBtnRegen{background:var(--tangerine)}
  .imggen-actions-v2 #imggenBtnShare{background:var(--turquoise);color:var(--ink)}
  .imggen-actions-v2 .imggen-actions-row .imggen-btn-ghost:last-child{background:var(--framboise);color:#FFF8F1}
  /* Valider / Partager grisés + non cliquables tant que l'image n'est pas prête
     (piloté par JS dans _setRevealState). N'invite pas au clic en chargement. */
  .imggen-actions-v2 .imggen-btn:disabled{opacity:.4;filter:grayscale(.35);box-shadow:var(--shadow-sketch-sm);cursor:default;pointer-events:none}

  /* ===== CTA "Ajouter à mon deck" dans wordCardOverlay ===== */
  .wc-add-to-deck{margin-top:12px;background:var(--framboise);color:#FFF8F1;border:var(--border-sketch);border-radius:16px;padding:12px 22px;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;box-shadow:var(--shadow-sketch-lg);cursor:pointer;transform:rotate(-1deg);transition:transform .12s,box-shadow .12s;width:100%;max-width:280px}
  .wc-add-to-deck:active{transform:rotate(-1deg) translate(2px,3px);box-shadow:var(--shadow-sketch)}
  /* Gate image : sans image, l'ajout au deck est désactivé (l'image est l'ancre mnémo). */
  .wc-add-to-deck:disabled{background:var(--mist);color:var(--ink-soft);box-shadow:var(--shadow-sketch-sm);cursor:not-allowed;opacity:.9}
  .wc-add-to-deck:disabled:active{transform:rotate(-1deg);box-shadow:var(--shadow-sketch-sm)}
  .wc-add-to-deck-hint{margin-top:7px;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:15px;line-height:1.2;color:var(--ink-soft);text-align:center;max-width:280px;align-self:center}

  /* ============================================================
     CARTE LECTURE V2 (2026-05-31) — refonte expérience attachante
     pour la lecture depuis Mon Deck (et tout autre contexte popup).
     Mascotte loup-sirène (12 frames, 4 poses × 3 frames anim).
     Flip 3D + float + parallax (3 transforms, 3 couches CSS distinctes).
     ============================================================ */

  /* Cache le bouton "Ajouter au deck" quand l'overlay porte .from-mondeck */
  .from-mondeck #wcAddToDeckBtn{display:none !important}

  /* Couche 1 (float) : utilise la propriété native `translate:` séparée de
     `transform:` pour ne pas écraser le tilt/flip qui vivent ailleurs. */
  .word-card{will-change:transform;animation:wcFloat 3.6s ease-in-out infinite}
  @keyframes wcFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}

  /* Couche 2 (parallax) : rotateX/Y via CSS vars mises à jour par JS au gyro
     (mobile) ou mousemove (desktop). 2-3° max. */
  .wc-tilt{position:relative;width:100%;height:100%;transform:perspective(1400px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transform-style:preserve-3d;transition:transform .15s ease-out}

  /* Swipe-to-dismiss : pendant le drag, on coupe le float, le tilt et le flip
     pour que la carte suive proprement le pouce. Ombre portée renforcée pour
     l'effet "carte soulevée". */
  .word-card.is-dragging{animation:none;touch-action:none;will-change:transform,opacity}
  .word-card.is-dragging .wc-tilt,
  .word-card.is-throwing .wc-tilt{transition:none;transform:perspective(1400px) rotateX(0) rotateY(0)}
  .word-card.is-dragging .word-card-inner,
  .word-card.is-throwing .word-card-inner{transition:none}
  .word-card.is-dragging .wc-face{box-shadow:0 34px 70px rgba(27,36,48,.28),0 18px 42px rgba(232,74,111,.20),var(--shadow-sketch-lg)}

  /* Clipping FACE PAR FACE (pas sur .word-card-inner qui a preserve-3d :
     overflow!=visible y aplatirait le 3D et casserait backface-visibility,
     rendant le recto miroité visible au flip). Chaque .wc-face est déjà
     position:absolute;inset:0 → un overflow:hidden y clippe son propre
     contenu sans toucher au contexte 3D du parent. */
  .wc-face{overflow:hidden;height:100%;max-height:100%}

  /* Verso : bornes strictes sur les enfants flex pour empêcher l'image et
     le groupe mnémo de pousser la carte hors gabarit. cf. diagnostic Codex. */
  .wc-rear{justify-content:flex-start;gap:6px;overflow:hidden;min-height:0}
  .wc-rear .wc-imgbox{flex:1 1 0;min-height:0;max-height:42%}
  .wc-rear .wc-mnemo-group{flex:0 0 auto;min-height:0}
  .wc-rear .wc-add-to-deck{flex:0 0 auto}
  .wc-mascot-front,.wc-mascot-rear{contain:layout paint}

  /* Couche 3 (flip) : déjà existante .word-card-inner avec rotateY 180deg. */

  /* Reset class pour redémarrer les animations CSS (idle/breath) à chaque
     ouverture de carte. */
  .wc-no-anim,.wc-no-anim *{animation:none !important;transition:none !important}
  /* Reset stagger animations au re-flip pour éviter le bloc en cours. */
  .wc-no-stagger > *{animation:none !important}

  /* Texture papier + grain : appliquée via ::before sur chaque face. Le
     gradient micro-radial casse l'uniformité, le repeating-linear donne le
     "grain crayon". PAS de position:relative ici : ça écraserait le
     position:absolute du V1 et les faces sortiraient du 3D (verso "sous"
     recto). Le ::before n'a pas besoin de position:relative — position:
     absolute du V1 suffit comme contexte de positionnement. */
  /* Texture papier via gradient discret. PAS de mix-blend-mode (créerait un
     stacking context d'isolation qui bloque le multiply de la mascotte).
     Opacity faible suffit pour le grain. */
  .wc-face::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 22% 18%, rgba(0,0,0,.045), transparent 55%),radial-gradient(circle at 78% 82%, rgba(0,0,0,.035), transparent 55%),repeating-linear-gradient(48deg, transparent 0, transparent 2px, rgba(28,34,55,.012) 2px, rgba(28,34,55,.012) 3px);opacity:.6;pointer-events:none;z-index:1}
  /* Ombre teintée chaude au lieu de neutre. Combine framboise discrète +
     ombre crayon dure existante. */
  .wc-face{box-shadow:0 24px 50px rgba(232,74,111,.18), var(--shadow-sketch-lg)}
  /* Bords légèrement irréguliers selon la face (subtils) */
  .wc-front{border-radius:22px 24px 21px 23px}
  .wc-rear{border-radius:23px 21px 24px 22px}
  /* Le contenu doit passer au-dessus de la texture (z-index 2+) */
  .wc-face > *{position:relative;z-index:2}

  /* === Mascotte logo statique ===
     Animations abandonnées. Une seule image, la mascotte du logo. */
  .wc-mascot{position:absolute;width:64px;height:64px;background-image:url('/assets/mascotte_loufoque.png?v=3');background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:3;filter:drop-shadow(1px 1.5px 0 var(--ink));contain:layout paint}
  .wc-mascot-front{bottom:6px;right:6px;transform:rotate(-4deg)}
  /* Bulle mnémo : structure conservée pour la bulle de texte. */
  .wc-mnemo-group{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:0 0 4px;position:relative;min-height:60px}
  .wc-mnemo-bubble{background:#FFF8F1;color:var(--ink);border:var(--border-sketch-thin);border-radius:14px 14px 14px 4px;padding:8px 11px;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:15px;line-height:1.25;box-shadow:var(--shadow-sketch-sm);max-width:70%;align-self:flex-start;margin-left:72px;position:relative;z-index:2}
  .wc-mnemo-bubble::after{content:"";position:absolute;left:-12px;bottom:6px;width:0;height:0;border-style:solid;border-width:7px 12px 7px 0;border-color:transparent var(--ink) transparent transparent}
  .wc-mnemo-bubble::before{content:"";position:absolute;left:-9px;bottom:6px;width:0;height:0;border-style:solid;border-width:7px 12px 7px 0;border-color:transparent #FFF8F1 transparent transparent;z-index:1}
  .wc-mascot-rear{bottom:4px;left:4px;transform:rotate(4deg)}

  /* === Polish verso (2026-05-31 #2) ===
     1) image plus large (90%+), 2) mascotte SOUS la bulle centrée,
     bulle police +, 3) boutons collés au bas via margin-top:auto. */
  /* Image : copie EXACTE de .card-img-box / .card-img des cartes Study.
     width:100% + margin:auto + max-width:min(60vh, 360px) → image plafonnée
     à 360px de côté, alignée sur le rendu study. object-fit:cover sans
     max-* qui pourraient brider. cf. rapport Codex. */
  .wc-rear .wc-imgbox{position:relative;width:100%;aspect-ratio:1/1;margin:auto;max-height:min(60vh, 360px);max-width:min(60vh, 360px);border:var(--border-sketch);border-radius:14px;background:var(--mist);box-shadow:var(--shadow-sketch);transform:rotate(0.5deg);overflow:hidden;display:grid;place-items:center;flex-shrink:0}
  .wc-rear .wc-img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;border:none;border-radius:0}
  .wc-rear .wc-mnemo-group{align-items:center;min-height:0;padding:0;gap:6px}
  .wc-rear .wc-mnemo-bubble{max-width:96%;align-self:center;margin-left:0;font-size:21px;line-height:1.25;text-align:center;border-radius:14px;padding:11px 15px}
  /* Queue de bulle vers le BAS (mascotte sous la bulle). */
  .wc-rear .wc-mnemo-bubble::after{left:50%;top:auto;bottom:-12px;transform:translateX(-50%);border-width:12px 7px 0 7px;border-color:var(--ink) transparent transparent transparent}
  .wc-rear .wc-mnemo-bubble::before{left:50%;top:auto;bottom:-9px;transform:translateX(-50%);border-width:10px 6px 0 6px;border-color:#FFF8F1 transparent transparent transparent}
  /* Mascotte sort de l'absolute → revient dans le flux centré sous la bulle. */
  .wc-rear .wc-mascot-rear{position:relative;left:auto;bottom:auto;width:56px;height:56px;transform:rotate(4deg);margin:6px auto 0}
  /* Boutons collés au bas du verso, avec ombre crayon comme les autres CTA. */
  .wc-rear .wc-actions{margin-top:auto;flex:0 0 auto}
  .wc-rear .wc-btn{box-shadow:var(--shadow-sketch-sm)}
  .wc-rear .wc-btn:active{box-shadow:var(--shadow-sketch-sm);transform:translate(1px,1px) scale(.96)}

  /* === Stagger des éléments du verso au flip === */
  .word-card.flip .wc-rear .wc-tr,
  .word-card.flip .wc-rear .wc-word-sm,
  .word-card.flip .wc-rear .wc-imgbox,
  .word-card.flip .wc-rear .wc-mnemo-group,
  .word-card.flip .wc-rear .wc-actions{animation:wcStaggerIn .35s cubic-bezier(.34,1.06,.5,1) both}
  .word-card.flip .wc-rear .wc-tr{animation-delay:.06s}
  .word-card.flip .wc-rear .wc-word-sm{animation-delay:.12s}
  .word-card.flip .wc-rear .wc-imgbox{animation-delay:.18s}
  .word-card.flip .wc-rear .wc-mnemo-group{animation-delay:.24s}
  .word-card.flip .wc-rear .wc-actions{animation-delay:.32s}
  @keyframes wcStaggerIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  /* Pop spécifique de l'image au flip */
  .word-card.flip .wc-img{animation:wcImgPop .42s cubic-bezier(.34,1.56,.5,1) both;animation-delay:.22s}
  @keyframes wcImgPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}

  /* === Audio button + wave === */
  .wc-audio{position:relative;display:inline-grid;place-items:center;width:54px;height:54px;border:none;border-radius:50%;background:var(--marine-soft);color:var(--marine);cursor:pointer;transition:background .15s,transform .12s}
  .wc-audio:active{transform:scale(.88);background:var(--framboise);color:#FFF8F1}
  .wc-audio.is-tapped{animation:wcAudioTap .35s ease-out}
  @keyframes wcAudioTap{0%{transform:scale(.88);background:var(--framboise);color:#FFF8F1}60%{transform:scale(1.08)}100%{transform:scale(1)}}
  .wc-audio.is-playing{background:var(--framboise);color:#FFF8F1;animation:wcAudioPulse 1.2s ease-in-out infinite}
  .wc-audio .wc-audio-ico{width:22px;height:22px}
  .wc-audio.is-playing .wc-audio-ico{display:none}
  .wc-audio-wave{display:none;align-items:center;gap:2.5px;height:18px}
  .wc-audio.is-playing .wc-audio-wave{display:inline-flex}
  .wc-audio-wave i{display:block;width:3px;background:#FFF8F1;border-radius:3px;animation:wcWaveBar 1s ease-in-out infinite}
  .wc-audio-wave i:nth-child(1){height:8px;animation-duration:.55s}
  .wc-audio-wave i:nth-child(2){height:14px;animation-duration:.70s}
  .wc-audio-wave i:nth-child(3){height:18px;animation-duration:.60s}
  .wc-audio-wave i:nth-child(4){height:12px;animation-duration:.50s}
  .wc-audio-wave i:nth-child(5){height:6px;animation-duration:.65s}
  @keyframes wcAudioPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,74,111,.45)}50%{box-shadow:0 0 0 9px rgba(232,74,111,0)}}
  @keyframes wcWaveBar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

  /* === Alignement largeur sur cartes Study + boutons sous la carte ===
     Diagnostic Codex : .overlay{padding:30px} bridait la modale à
     viewport-60px. .wc-face{padding:24px 20px} prenait 40px (vs 28px sur
     .face-rear). Double pénalité corrigée ici. */
  #wordCardOverlay{padding:calc(12px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px))}
  #wordCardOverlay .word-card-modal{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
  #wordCardOverlay .word-card{width:100%}
  #wordCardOverlay .wc-face{padding:12px 14px 10px}
  @media (min-width:768px){
    #wordCardOverlay .word-card-modal{max-width:460px}
  }
  /* Boutons recréer / partager : sortis du verso, posés SOUS la carte. */
  #wordCardOverlay .wc-actions{width:100%;display:flex;justify-content:center;gap:10px;padding:0 8px;margin:0}
  #wordCardOverlay .wc-actions .wc-btn{flex:1;max-width:170px;justify-content:center;box-shadow:var(--shadow-sketch-sm)}
  #wordCardOverlay .wc-actions .wc-btn:active{box-shadow:var(--shadow-sketch-sm);transform:translate(1px,1px) scale(.96)}
  /* Annule l'ancien stagger qui ciblait .wc-actions à l'intérieur du verso. */
  .word-card.flip .wc-rear .wc-actions{animation:none}

  /* === Reduced-motion : coupe float, parallax, stagger, wave === */
  @media (prefers-reduced-motion: reduce){
    .word-card{animation:none}
    .wc-tilt{transition:none;transform:perspective(1400px) rotateX(0) rotateY(0)}
    .word-card.flip .wc-rear > *{animation:none}
    .wc-audio.is-playing{animation:none}
    .wc-audio-wave i{animation:none;transform:scaleY(.7)}
  }

  /* ============================================================
     HELP CHAT V1 (2026-05-31) — bouton "?" en bas d'accueil +
     bottom sheet chat-style Joe. Anim transform/opacity uniquement.
     ============================================================ */
  .home-bottom-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 20px calc(20px + env(safe-area-inset-bottom))}
  .home-bottom-left{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
  .home-bottom-left .home-hint{margin:0}
  .home-bottom-left .home-footnote{margin:0}
  .home-help-btn{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#FFF8F1;color:var(--ink);border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transform:rotate(-2deg);transition:transform .12s,box-shadow .12s}
  .home-help-btn:active{transform:rotate(-2deg) translate(1px,2px);box-shadow:1px 1px 0 var(--ink)}
  .home-help-btn:hover{background:#fff}
  .home-help-btn:focus-visible{outline:3px solid var(--framboise);outline-offset:2px}

  /* Bottom sheet overlay : aligné en bas, slide up à l'ouverture. */
  .help-chat-overlay{display:none;align-items:flex-end;justify-content:center;background:rgba(27,36,48,.55);backdrop-filter:blur(4px);padding:0}
  .help-chat-overlay.show{display:flex;animation:ovIn .25s ease}
  .help-chat-sheet{width:100%;max-width:520px;background:var(--bg);border:var(--border-sketch);border-bottom:none;border-radius:24px 24px 0 0;box-shadow:0 -10px 40px rgba(27,36,48,.25);max-height:88vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.34,1.06,.5,1)}
  .help-chat-overlay.show .help-chat-sheet{transform:translateY(0)}

  /* Header : avatar + meta + close */
  .help-chat-header{display:flex;align-items:center;gap:12px;padding:16px 18px 12px;border-bottom:2px dashed var(--line)}
  .help-chat-avatar{width:48px;height:48px;border-radius:50%;background:var(--turquoise);display:grid;place-items:center;font-size:28px;border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);flex-shrink:0;transform:rotate(-4deg)}
  .help-chat-meta{flex:1;min-width:0}
  .help-chat-name{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;line-height:1.05;color:var(--ink);letter-spacing:-.01em}
  .help-chat-subtitle{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:18px;color:var(--tangerine);margin-top:2px;line-height:1.1}
  .help-chat-close{flex-shrink:0;width:34px;height:34px;border:none;border-radius:50%;background:var(--mist);color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;font-size:14px;font-weight:800;transition:background .15s,transform .12s}
  .help-chat-close:hover{background:var(--line);color:var(--ink)}
  .help-chat-close:active{transform:scale(.92)}

  /* Body : flux de bulles, scrollable */
  .help-chat-body{flex:1;min-height:120px;max-height:48vh;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
  .help-chat-bubble{max-width:84%;font-family:'Manrope',sans-serif;font-size:14.5px;line-height:1.45;padding:11px 14px;border-radius:18px;border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);animation:pop .25s cubic-bezier(.34,1.56,.5,1)}
  .help-chat-bubble.joe{align-self:flex-start;background:var(--framboise);color:#FFF8F1;border-bottom-left-radius:6px}
  .help-chat-bubble.user{align-self:flex-end;background:#FFF8F1;color:var(--ink);border-bottom-right-radius:6px;font-weight:700}
  .help-chat-bubble a.help-chat-link{color:#FFF8F1;text-decoration:underline;text-underline-offset:2px;font-weight:800}
  .help-chat-bubble a.help-chat-link:hover{color:var(--jaune)}

  /* Footer : topics / back / form */
  .help-chat-footer{padding:12px 18px calc(16px + env(safe-area-inset-bottom));border-top:2px dashed var(--line);display:flex;flex-direction:column;gap:10px}
  .help-chat-topics{display:flex;flex-direction:column;gap:8px}
  .help-chat-chip{background:#FFF8F1;color:var(--ink);border:var(--border-sketch-thin);box-shadow:var(--shadow-sketch-sm);border-radius:14px;padding:11px 14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s}
  .help-chat-chip:nth-child(odd){transform:rotate(-.6deg)}
  .help-chat-chip:nth-child(even){transform:rotate(.6deg)}
  .help-chat-chip:active{transform:translate(1px,2px) rotate(0);box-shadow:1px 1px 0 var(--ink)}
  .help-chat-chip:hover{background:var(--tangerine-soft)}
  .help-chat-chip:focus-visible{outline:3px solid var(--framboise);outline-offset:2px}

  .help-chat-back{align-self:flex-start;background:transparent;color:var(--ink-soft);border:1.5px solid var(--line);border-radius:14px;padding:8px 14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s,color .15s}
  .help-chat-back:hover{background:var(--mist);color:var(--ink)}
  .help-chat-back:active{transform:scale(.96)}

  .help-chat-form{display:flex;flex-direction:column;gap:10px}
  .help-chat-textarea{width:100%;background:#FFF8F1;color:var(--ink);border:var(--border-sketch-thin);border-radius:14px;padding:11px 14px;font-family:'Manrope',sans-serif;font-size:14.5px;line-height:1.45;resize:vertical;min-height:96px;-webkit-appearance:none;appearance:none;box-shadow:inset 1px 1px 0 rgba(0,0,0,.05)}
  .help-chat-textarea:focus{outline:3px solid var(--framboise);outline-offset:2px}
  .help-chat-submit{align-self:flex-end;background:var(--tangerine);color:#FFF8F1;border:var(--border-sketch);border-radius:14px;padding:11px 22px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14.5px;box-shadow:var(--shadow-sketch);cursor:pointer;transform:rotate(-1deg);transition:transform .12s,box-shadow .12s}
  .help-chat-submit:active{transform:rotate(-1deg) translate(2px,3px);box-shadow:var(--shadow-sketch-sm)}
  .help-chat-submit:focus-visible{outline:3px solid var(--framboise);outline-offset:3px}

  @media (prefers-reduced-motion: reduce){
    .help-chat-sheet{transition:none}
    .help-chat-bubble{animation:none}
  }
/* ============================================================
   PARLE LOUFOQUE V1 (2026-06-01) — incrément (a) : deck read-only
   ============================================================ */

/* Écran principal */
#s-parle{padding:calc(16px + env(safe-area-inset-top, 0)) 16px calc(20px + env(safe-area-inset-bottom, 0));min-height:100vh;background:var(--surface);color:var(--ink)}
.parle-head{display:flex;align-items:flex-start;gap:12px;margin:4px 0 16px}
.parle-back{width:46px;height:46px;min-width:46px;min-height:46px;border:var(--border-sketch-thin);border-radius:14px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sketch);cursor:pointer;flex-shrink:0}
.parle-back svg{width:22px;height:22px;stroke:currentColor}
.parle-head-copy{min-width:0;flex:1}
.parle-title{font-family:'Manrope',sans-serif;font-weight:900;font-size:29px;line-height:1.02;color:var(--framboise)}
.parle-subtitle{font-size:17px;color:var(--tangerine);line-height:1.05;margin-top:4px}
.parle-review-cta{border:var(--border-sketch-thin);border-radius:14px;padding:10px 14px;background:var(--mist);color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;cursor:default;opacity:.65}
.parle-anchor-badge{flex:0 0 auto;min-width:54px;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--jaune);color:#fff;border-radius:14px;padding:6px 9px;box-shadow:0 3px 0 var(--jaune-d,#c99211)}
.parle-anchor-n{font-family:'Manrope',sans-serif;font-size:17px;font-weight:900;line-height:1}
.parle-anchor-l{font-family:'Manrope',sans-serif;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;margin-top:3px}

/* Filtres + recherche sur une ligne */
.parle-filterbar{display:flex;align-items:center;gap:9px;margin:0 0 14px;position:relative}
/* Bannière « Réviser tes erreurs » (Étape B) — accent tangerine, pastille de compte. */
.parle-review-cta{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:12px 14px;border:2px solid var(--tangerine);border-radius:16px;background:var(--tangerine-soft);color:var(--tangerine-d,#c96a1f);font-family:'Manrope',sans-serif;font-weight:900;font-size:15px;line-height:1.1;cursor:pointer;box-shadow:0 4px 0 rgba(255,140,66,.28);transition:transform .12s,box-shadow .12s}
.parle-review-cta:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(255,140,66,.28)}
.parle-review-cta:focus-visible{outline:3px solid var(--tangerine-soft);outline-offset:2px}
.parle-review-cta-ic{font-size:19px;line-height:1;flex:0 0 auto}
.parle-review-cta-label{flex:1;text-align:left}
.parle-review-cta-count{flex:0 0 auto;min-width:26px;text-align:center;background:var(--tangerine);color:#fff;border-radius:30px;padding:3px 9px;font-size:14px}
#parleFilters{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
#parleSearch{display:flex;align-items:center;justify-content:flex-end;min-width:0;flex:0 0 auto}
.parle-filterbar.searching #parleFilters,.parle-filterbar.searching .parle-loupe{display:none}
.parle-filterbar.searching #parleSearch{flex:1}
.parle-dropdown,.parle-sort{position:relative;flex:0 1 auto;min-width:0}
.parle-ddbtn,.parle-sortbtn{min-height:48px;border:var(--border-sketch-thin);border-radius:14px;padding:0 13px;background:#fff;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900;font-size:14.5px;box-shadow:var(--shadow-sketch-sm);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parle-sortbtn.active{background:var(--tangerine);border-color:var(--tangerine);color:#fff;box-shadow:0 3px 0 var(--tangerine-d,#cb6824)}
.parle-ddpanel{display:none;position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;min-width:240px;max-height:320px;overflow:auto;background:#fff;border:var(--border-sketch-thin);border-radius:14px;box-shadow:var(--shadow-sketch);padding:8px}
.parle-dropdown.open .parle-ddpanel{display:block}
.parle-opt{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;text-align:left;padding:9px 8px;border-radius:10px;cursor:pointer}
.parle-opt:hover{background:var(--mist)}
.parle-opt.reset{color:var(--framboise);justify-content:center;font-weight:800}
.parle-sortpanel{display:none;position:absolute;z-index:21;top:calc(100% + 6px);left:0;min-width:280px;background:#fff;border:var(--border-sketch-thin);border-radius:16px;box-shadow:var(--shadow-sketch);padding:6px}
.parle-sort.open .parle-sortpanel{display:block}
.parle-sortopt{display:flex;flex-direction:column;width:100%;border:0;border-radius:11px;background:transparent;color:var(--ink);font-family:'Manrope',sans-serif;text-align:left;padding:11px 12px;cursor:pointer}
.parle-sortopt:hover,.parle-sortopt:focus-visible{background:var(--mist)}
.parle-sortopt-title{font-size:15px;font-weight:900;line-height:1.15}
.parle-sortopt-sub{font-size:12.5px;font-weight:700;color:var(--ink-soft);line-height:1.25;margin-top:3px}

.parle-loupe{flex:0 0 48px;width:48px;height:48px;min-width:48px;min-height:48px;border:var(--border-sketch-thin);border-radius:14px;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch-sm);cursor:pointer;display:grid;place-items:center}
.parle-loupe svg,.parle-searchicon svg{width:20px;height:20px}
.parle-searchbox{display:none;width:100%;height:48px;align-items:center;gap:9px;border:var(--border-sketch-thin);border-radius:14px;background:#fff;color:var(--ink-soft);padding:0 11px;box-shadow:var(--shadow-sketch-sm)}
.parle-searchbox.open{display:flex}
.parle-searchbox input{flex:1;min-width:0;height:42px;border:0;background:transparent;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;outline:none}
.parle-search-close{width:44px;height:44px;border:0;background:transparent;color:var(--ink-soft);font-size:24px;line-height:1;cursor:pointer}
.parle-section-head{display:flex;align-items:center;gap:8px;margin:2px 2px 12px}
.parle-section-head h2{margin:0;font-family:'Manrope',sans-serif;font-size:16px;font-weight:900;color:var(--ink);line-height:1.2}
.parle-section-head span{font-family:'Manrope',sans-serif;font-size:13px;font-weight:800;color:var(--ink-soft)}

/* Grille des stories */
.parle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.parle-story{border:var(--border-sketch);border-radius:18px;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch);padding:0;text-align:left;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;min-width:0;transition:transform .12s,box-shadow .12s}
.parle-story:active{transform:translate(1px,1px);box-shadow:var(--shadow-sketch-sm)}
.parle-thumb{aspect-ratio:1/1;background:radial-gradient(circle at 42% 38%,var(--jaune-soft),var(--turquoise-soft));position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:flex-end;border-bottom:var(--border-sketch-thin)}
.parle-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.parle-card-badge{position:absolute;z-index:2;top:9px;right:9px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--turquoise);color:#fff;font-family:'Manrope',sans-serif;font-size:15px;font-weight:900;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.parle-story.is-locked .parle-card-badge{background:rgba(45,42,50,.72)}
.parle-story.is-done .parle-card-badge{background:var(--vert)}
.parle-story-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px;min-height:72px;flex:1}
.parle-meta{font-family:'Manrope',sans-serif;font-weight:800;font-size:12px;line-height:1.2;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pagination + footer */
.parle-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 8px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px}
.parle-pagination button{width:40px;height:40px;border:var(--border-sketch-thin);border-radius:14px;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch-sm);font-size:22px;cursor:pointer;display:grid;place-items:center}
.parle-pagination button:disabled{opacity:.35;cursor:default;box-shadow:none}
.parle-footer-count{text-align:center;color:var(--ink-soft);font-size:18px;margin:8px 0 24px;font-family:'Caveat','Manrope',cursive;font-weight:700}

/* États (loading / erreur / vide) */
.parle-status{border:var(--border-sketch-thin);border-radius:14px;background:#fff;padding:18px;margin:12px 0;font-family:'Manrope',sans-serif;font-weight:800;text-align:center;box-shadow:var(--shadow-sketch-sm)}
.parle-status.loading{color:var(--marine)}
.parle-status.error{color:var(--framboise)}
.parle-retry{margin-top:12px;border:var(--border-sketch-thin);border-radius:14px;background:var(--framboise);color:#fff;font-family:'Manrope',sans-serif;font-weight:900;padding:10px 16px;box-shadow:var(--shadow-sketch-sm);cursor:pointer}

/* Toast "Bientôt disponible" */
.parle-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom, 0) + 24px);z-index:1000;transform:translate(-50%,12px);opacity:0;background:var(--ink);color:#fff;border-radius:14px;padding:12px 18px;font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;box-shadow:var(--shadow-sketch);transition:opacity .18s,transform .18s;pointer-events:none}
.parle-toast.show{opacity:1;transform:translate(-50%,0)}

/* Tablette : grille plus large, écran centré */
@media (min-width:720px){
  #s-parle{max-width:860px;margin:0 auto;padding:24px}
  .parle-grid{grid-template-columns:1fr 1fr;gap:14px}
}
@media (prefers-reduced-motion: reduce){
  .parle-story,.parle-unlock-fill,.parle-toast{transition:none}
}

/* === Parle Loufoque : déblocage (lock badge + popup mots manquants) === */
.parle-story.is-locked .parle-thumb{filter:grayscale(.72);opacity:.66}
.parle-story.is-locked{box-shadow:var(--shadow-sketch-sm)}
.parle-unlock{display:flex;flex-direction:column;gap:6px}
.parle-unlock-count{font-family:'Manrope',sans-serif;font-weight:900;font-size:12px;line-height:1.25;color:var(--turquoise)}
.parle-story.is-locked .parle-unlock-count{color:var(--ink-soft);font-size:11.5px;font-weight:800}
.parle-story.is-done .parle-unlock-count{color:var(--vert)}
.parle-unlock-bar{width:100%;height:7px;border-radius:6px;background:var(--line,var(--trait));overflow:hidden}
.parle-unlock-fill{height:100%;border-radius:6px;background:var(--turquoise);transition:width .3s ease-out}
.parle-story.is-done .parle-unlock-fill{background:var(--vert)}
.parle-back:focus-visible,.parle-ddbtn:focus-visible,.parle-sortbtn:focus-visible,.parle-loupe:focus-visible,.parle-search-close:focus-visible,.parle-story:focus-visible{outline:3px solid var(--turquoise-soft);outline-offset:2px}

/* Popup mots manquants */
#parleMissingOverlay .parle-missing-sheet{position:relative;width:100%;max-width:420px;max-height:80vh;display:flex;flex-direction:column;background:var(--surface);border:var(--border-sketch);border-radius:22px;box-shadow:var(--shadow-sketch-lg);padding:24px 22px 22px;overflow:hidden}
.parle-missing-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:none;border-radius:50%;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch-sm);cursor:pointer;font-size:15px;line-height:1}
.parle-missing-head{margin-bottom:12px}
.parle-missing-title{font-family:'Manrope',sans-serif;font-weight:900;font-size:22px;color:var(--framboise);line-height:1.1}
.parle-missing-sub{font-size:17px;color:var(--ink-soft);margin-top:4px}
.parle-missing-list{flex:1;min-height:0;overflow:auto;border:var(--border-sketch-thin);border-radius:14px;background:#fff;padding:8px;box-shadow:var(--shadow-sketch-sm) inset;display:flex;flex-direction:column;gap:4px}
.parle-missing-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:10px;background:var(--mist)}
.parle-missing-ru{font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;color:var(--ink)}
.parle-missing-fr{font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;color:var(--ink-soft);text-align:right;max-width:55%}
.parle-missing-empty{padding:20px;text-align:center;color:var(--turquoise-d);font-family:'Manrope',sans-serif;font-weight:800}
.parle-missing-hint{margin-top:12px;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:17px;color:var(--ink-soft);text-align:center;line-height:1.25}

/* Manche Parle Loufoque */
#parleRoundOverlay{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;align-items:stretch;justify-content:stretch}
.parle-round-sheet{position:relative;width:100%;max-width:none;height:100vh;max-height:none;display:flex;flex-direction:column;gap:0;background:var(--bg);border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top, 0px) 18px env(safe-area-inset-bottom, 0px);overflow:hidden}
.parle-round-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:15}
.parle-round-conf{position:absolute;width:9px;height:9px;border-radius:2px;opacity:0}
.parle-round-topbar{display:flex;align-items:center;gap:12px;padding:12px 2px;position:relative;z-index:2;flex:0 0 auto}
.parle-round-close{width:38px;height:38px;border:none;border-radius:50%;background:var(--mist);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900;font-size:19px;line-height:1;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:transform .15s,background .15s}
.parle-round-close:active{transform:scale(.92)}
.parle-round-progress{flex:1;display:flex;gap:5px;min-width:0}
.parle-round-seg{height:8px;flex:1;border-radius:4px;background:var(--line);overflow:hidden;position:relative}
.parle-round-seg-fill{position:absolute;inset:0;width:0;background:var(--turquoise);border-radius:4px;transition:width .4s ease,background .2s ease}
.parle-round-seg.done .parle-round-seg-fill{width:100%}
.parle-round-seg.active .parle-round-seg-fill{width:100%;background:var(--tangerine)}
.parle-round-streak{flex:0 0 auto;min-height:34px;display:flex;align-items:center;gap:4px;background:var(--tangerine-soft);color:var(--tangerine);font-weight:900;font-size:14px;padding:6px 11px;border-radius:30px}
.parle-round-streak-flame{font-size:15px;line-height:1}
.parle-round-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;overflow:auto;padding:2px 2px 14px}
.parle-round-head{display:flex;gap:11px;align-items:flex-start;padding:2px 2px 12px;position:relative;z-index:2;transition:all .25s ease;flex:0 0 auto}
.parle-round-head.mini .parle-round-mascot{width:40px;height:40px}
.parle-round-mascot{width:52px;height:52px;flex:0 0 auto;object-fit:contain;transition:transform .2s ease,width .25s ease,height .25s ease}
.parle-round-bubble{background:var(--surface);border:2px solid var(--line);border-radius:6px 18px 18px 18px;padding:11px 14px;flex:1;box-shadow:0 4px 0 rgba(45,42,50,.06);transition:border-color .2s,background .2s}
.parle-round-prompt-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.parle-round-source{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;line-height:1.3;color:var(--ink)}
.parle-round-head[data-state="ok"] .parle-round-bubble{border-color:var(--vert);background:linear-gradient(0deg,var(--vert-soft),#fff)}
.parle-round-head[data-state="ko"] .parle-round-bubble{border-color:var(--rouge);background:linear-gradient(0deg,var(--rouge-soft),#fff)}
.parle-round-head[data-state="ok"] .parle-round-mascot{transform:rotate(-4deg) scale(1.04)}
.parle-round-head[data-state="ko"] .parle-round-mascot{transform:rotate(4deg)}
.parle-round-cloze{border:2px solid var(--ink);border-radius:22px;background:#fff;padding:18px 16px 16px;font-family:'Manrope',sans-serif;font-size:20px;font-weight:700;line-height:1.95;color:var(--ink);box-shadow:0 4px 0 rgba(45,42,50,.10);position:relative;z-index:2;flex:0 0 auto}
.parle-round-cloze-text{white-space:pre-wrap}
.parle-round-speak{position:absolute;top:-12px;right:14px;display:flex;align-items:center;gap:5px;background:var(--turquoise);color:#fff;border:none;font-family:'Manrope',sans-serif;font-weight:900;font-size:13px;padding:6px 12px;border-radius:30px;cursor:pointer;box-shadow:0 2px 6px rgba(46,196,182,.35)}
.parle-round-speak:active{transform:scale(.94)}
.parle-round-blank-slot{display:inline-block;vertical-align:middle}
.parle-round-options{display:grid;grid-template-columns:1fr;gap:10px;position:relative;z-index:2}
.parle-round-option{width:100%;min-height:54px;border:2px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;line-height:1.15;text-align:left;padding:14px 18px;box-shadow:0 3px 0 rgba(45,42,50,.07);cursor:pointer;transition:transform .12s,border-color .15s,background .15s,color .15s,box-shadow .12s}
.parle-round-option:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(45,42,50,.07)}
.parle-round-option:focus-visible,.parle-round-next:focus-visible,.parle-round-conv:focus-visible,.parle-round-close:focus-visible{outline:3px solid var(--turquoise-soft);outline-offset:2px}
.parle-round-option:disabled{cursor:default;opacity:.55}
.parle-round-option.is-selected{border-color:var(--tangerine);background:var(--tangerine-soft)}
.parle-round-option.is-correct{border-color:var(--vert);background:var(--vert-soft);color:var(--vert);opacity:1}
.parle-round-option.is-wrong{border-color:var(--rouge);background:var(--rouge-soft);color:var(--rouge);opacity:1}
.parle-round-feedback{display:none;align-items:center;gap:10px;border-radius:20px;padding:14px 16px;margin:0;font-family:'Manrope',sans-serif;font-weight:900;font-size:17px;line-height:1.25;position:relative;z-index:2}
.parle-round-feedback.ok{display:flex;background:var(--vert-soft);color:var(--vert)}
.parle-round-feedback.ko{display:flex;background:var(--rouge-soft);color:var(--rouge)}
.parle-round-notion{display:flex;flex-direction:column;gap:6px;margin-top:-2px;background:var(--mist);border-left:4px solid var(--tangerine);border-radius:12px;padding:13px 15px;position:relative;z-index:2}
.parle-round-notion-title{font-family:'Manrope',sans-serif;font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.parle-round-rule{font-family:'Manrope',sans-serif;font-weight:700;font-size:14.5px;line-height:1.45;color:var(--ink)}
.parle-round-example-title{margin-top:2px;font-family:'Manrope',sans-serif;font-weight:900;font-size:12px;letter-spacing:.04em;color:var(--ink-soft)}
.parle-round-example{font-family:'Manrope',sans-serif;font-weight:800;font-size:14.5px;line-height:1.35;color:var(--tangerine)}
.parle-round-correction{display:none;flex-direction:column;gap:12px;position:relative;z-index:2;animation:parleRoundPop .25s ease}
.parle-round-correction.show{display:flex}
.parle-round-result{display:flex;align-items:center;gap:10px;border-radius:18px;padding:16px 18px;font-family:'Manrope',sans-serif;font-weight:900;font-size:18px;line-height:1.2}
.parle-round-result.ok{background:var(--vert-soft);color:var(--vert)}
.parle-round-result.ko{background:var(--rouge-soft);color:var(--rouge)}
.parle-round-answer-line{background:#fff;border:2px solid var(--vert);border-radius:18px;padding:14px 18px;font-family:'Manrope',sans-serif;font-size:18px;font-weight:900;color:var(--vert);display:flex;align-items:center;gap:10px}
.parle-round-answer-label{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.parle-round-why-pill{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--mist);border:2px solid var(--line);border-radius:18px;padding:14px;font-family:'Manrope',sans-serif;font-weight:900;font-size:16px;color:var(--ink);cursor:pointer;transition:transform .12s}
.parle-round-why-pill:active{transform:translateY(2px)}
@keyframes parleRoundPop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.parle-round-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0 22px;position:relative;z-index:2;background:var(--bg)}
.parle-round-score{font-size:18px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.parle-round-score:empty{display:none}
.parle-round-actions{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.parle-round-next,.parle-round-conv{min-height:54px;border:0;border-radius:18px;font-family:'Manrope',sans-serif;font-weight:900;font-size:18px;line-height:1.1;padding:0 16px;box-shadow:0 4px 0 var(--line);cursor:pointer;white-space:nowrap}
.parle-round-next{width:100%;background:var(--mist);color:var(--ink-soft)}
.parle-round-next.active{background:var(--framboise);color:#fff;box-shadow:0 4px 0 var(--framboise-d)}
.parle-round-conv{background:#fff;color:var(--ink);border:2px solid var(--line)}
.parle-round-next:disabled{cursor:default}
.parle-round-sheet-back{position:absolute;inset:0;background:rgba(45,42,50,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.parle-round-sheet-back.open{opacity:1;pointer-events:auto}
.parle-round-sheet-panel{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:24px 24px 0 0;padding:10px 22px calc(22px + env(safe-area-inset-bottom, 0px));transform:translateY(100%);transition:transform .35s cubic-bezier(.3,.7,.2,1);z-index:21;box-shadow:0 -10px 40px rgba(0,0,0,.2)}
.parle-round-sheet-panel.open{transform:translateY(0)}
.parle-round-sheet-grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 16px}
.parle-round-sheet-title{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--tangerine);margin-bottom:8px}
.parle-round-sheet-rule{font-size:16px;color:var(--ink);line-height:1.5;font-weight:700}
.parle-round-sheet-example-title{margin-top:16px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.parle-round-sheet-example{margin-top:4px;color:var(--tangerine);font-weight:900;font-size:17px;line-height:1.35}
.parle-round-sheet-close{margin-top:18px;width:100%;min-height:46px;border:0;border-radius:16px;background:var(--mist);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900;font-size:16px;cursor:pointer}
.parle-round-shake{animation:parleRoundShake .35s}
@keyframes parleRoundShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* Carte-réponse de la manche — MODULE DÉDIÉ (s'inspire du flip du test oral mais
   classes propres, tailles explicites pour ne jamais s'effondrer). Dos mascotte
   sur fond tangerine ; au tap, flip 3D -> miniature de la phrase. */
.parle-flip-card{display:inline-block;width:54px;height:58px;vertical-align:-18px;margin:0 4px;cursor:pointer;perspective:600px;-webkit-tap-highlight-color:transparent;position:relative;transition:transform .35s cubic-bezier(.34,1.45,.5,1)}
.parle-flip-card:focus-visible{outline:none}
.parle-flip-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.7,.3,1.2)}
.parle-flip-card.flipped .parle-flip-card-inner{transform:rotateY(180deg)}
/* Aperçu agrandi : la carte grossit en se retournant (pop), passe au-dessus du
   texte, puis se referme via le minuteur JS (2,5 s) ou un 2e tap. */
.parle-flip-card.flipped{transform:scale(1.85);z-index:6}
.parle-flip-card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:var(--border-sketch-thin);border-radius:13px;box-shadow:var(--shadow-sketch-sm);overflow:hidden;display:grid;place-items:center}
.parle-flip-card-back{background:linear-gradient(135deg,var(--tangerine),#ff7a2b)}
.parle-flip-card-back img{width:32px;height:32px;object-fit:contain}
.parle-flip-card-front{transform:rotateY(180deg);background:var(--mist)}
.parle-flip-card-front img{width:100%;height:100%;object-fit:cover;display:block}
.parle-flip-card-text{padding:4px;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900;font-size:13px;line-height:1.05;text-align:center;overflow-wrap:anywhere}
.parle-flip-card.is-ok .parle-flip-card-face{box-shadow:0 0 0 3px var(--vert-soft),var(--shadow-sketch-sm)}
.parle-flip-card.is-ko .parle-flip-card-face{box-shadow:0 0 0 3px var(--rouge-soft),var(--shadow-sketch-sm)}
.parle-flip-card:focus-visible .parle-flip-card-face{box-shadow:0 0 0 3px var(--turquoise-soft),var(--shadow-sketch-sm)}
@media (prefers-reduced-motion:reduce){
  .parle-flip-card{perspective:none;transition:none}
  .parle-flip-card-inner{transform-style:flat;transition:opacity .2s ease}
  .parle-flip-card.flipped .parle-flip-card-inner{transform:none}
  .parle-flip-card-face{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .2s ease}
  .parle-flip-card-front{transform:none;opacity:0}
  .parle-flip-card.flipped .parle-flip-card-front{opacity:1}
  .parle-flip-card.flipped .parle-flip-card-back{opacity:0}
}
@media (max-width:420px){
  .parle-round-sheet{padding:env(safe-area-inset-top, 0px) 14px env(safe-area-inset-bottom, 0px)}
  .parle-round-source{font-size:16px}
  .parle-round-cloze{font-size:18px;padding:16px}
  .parle-round-footer{align-items:stretch;flex-direction:column}
  .parle-round-actions{width:100%}
  .parle-round-next,.parle-round-conv{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .parle-round-seg-fill,.parle-round-option,.parle-round-mascot,.parle-round-bubble,.parle-round-sheet-panel,.parle-round-sheet-back{transition:none}
  .parle-round-shake{animation:none}
}

/* Conversation Parle Loufoque */
#convOverlay{background:rgba(27,36,48,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:calc(18px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px))}
#convOverlay .parle-missing-sheet{position:relative;width:100%;max-width:430px;max-height:88vh;display:flex;flex-direction:column;gap:16px;background:var(--surface);border:var(--border-sketch);border-radius:22px;box-shadow:var(--shadow-sketch-lg);padding:28px 22px 22px;overflow:auto}
#convOverlay .parle-missing-close{width:42px;height:42px;font-size:20px}
#convOverlay .parle-missing-head{margin-bottom:0;padding-right:44px}
#convOverlay .parle-missing-title{font-size:28px;line-height:1.08}
.conv-scene{display:flex;flex-direction:column;gap:10px;border:var(--border-sketch-thin);border-radius:16px;background:#fff;padding:16px;box-shadow:var(--shadow-sketch-sm)}
.conv-scene-target{font-family:'Manrope',sans-serif;font-weight:900;font-size:28px;line-height:1.18;color:var(--marine)}
.conv-scene-tr{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:25px;line-height:1.15;color:var(--ink-soft)}
.conv-consigne{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;line-height:1.25;color:var(--ink)}
.conv-controls{display:flex;flex-direction:column;gap:12px}
.conv-mic,.conv-send,.conv-close-btn{border:var(--border-sketch-thin);border-radius:15px;font-family:'Manrope',sans-serif;font-weight:900;font-size:21px;line-height:1.1;cursor:pointer;box-shadow:var(--shadow-sketch-sm)}
.conv-mic{width:100%;padding:15px 16px;background:var(--framboise);color:#fff}
.conv-fallback{display:flex;gap:10px;align-items:center}
.conv-fallback input{min-width:0;flex:1;height:54px;border:var(--border-sketch-thin);border-radius:15px;background:#fff;color:var(--ink);font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;padding:0 14px;box-shadow:var(--shadow-sketch-sm);outline:none}
.conv-fallback input::placeholder{color:var(--ink-soft);opacity:.9}
.conv-send{flex:0 0 auto;min-height:54px;padding:0 15px;background:var(--turquoise);color:#fff}
.conv-verdict,.conv-correction{font-family:'Manrope',sans-serif;font-weight:800;font-size:20px;line-height:1.28;color:var(--ink)}
.conv-correction{color:var(--marine)}
.conv-close-btn{width:100%;padding:14px 16px;background:#fff;color:var(--ink)}

/* Prototype conversation orale */
.home-rev-oral{background:linear-gradient(135deg,#fff,var(--turquoise-soft))}
/* Test oral — RE-SKIN aligné sur le design plein-page de « Parle loufoque »
   (sheet 100vh, topbar, mascotte + bulle, boutons à ombre pleine, couleurs
   charte). Aucune nouvelle fonction : mêmes IDs/handlers ; on conserve
   .parle-missing-sheet/.parle-missing-close (focus trap), .oral-cloze, .recording. */
#oralConvOverlay{background:var(--bg);padding:0}
#oralConvOverlay .parle-missing-sheet{position:relative;width:100%;max-width:none;height:100vh;max-height:none;display:flex;flex-direction:column;gap:0;background:var(--bg);border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top, 0px) 18px env(safe-area-inset-bottom, 0px);overflow:hidden}
.oral-topbar{display:flex;align-items:center;gap:12px;padding:12px 2px;flex:0 0 auto}
#oralConvOverlay .parle-missing-close.oral-close{position:static;width:38px;height:38px;border:none;border-radius:50%;background:var(--mist);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900;font-size:19px;line-height:1;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:transform .15s}
#oralConvOverlay .parle-missing-close.oral-close:active{transform:scale(.92)}
.oral-topbar-title{font-family:'Manrope',sans-serif;font-weight:900;font-size:18px;color:var(--ink)}
.oral-content{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;overflow:hidden;padding:6px 2px 14px}
.oral-mode-tabs{display:flex;gap:8px;align-items:center;padding:4px;border:2px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 3px 0 rgba(45,42,50,.06);flex:0 0 auto}
.oral-mode-tab{flex:1;min-height:40px;border:0;border-radius:12px;background:transparent;color:var(--ink-soft);font-family:'Manrope',sans-serif;font-weight:900;font-size:15px;cursor:pointer;transition:background .15s,color .15s}
.oral-mode-tab.active{background:var(--turquoise);color:#fff;box-shadow:0 2px 6px rgba(46,196,182,.35)}
.oral-mode-tab:disabled{cursor:wait;opacity:.72}
.oral-mode-tab:focus-visible{outline:3px solid var(--turquoise-soft);outline-offset:2px}
.oral-head{display:flex;gap:11px;align-items:flex-start;padding:2px;flex:0 0 auto}
.oral-mascot{width:52px;height:52px;flex:0 0 auto;object-fit:contain}
.oral-bubble{background:var(--surface);border:2px solid var(--line);border-radius:6px 18px 18px 18px;padding:11px 14px;flex:1;min-width:0;box-shadow:0 4px 0 rgba(45,42,50,.06)}
.oral-prompt-label{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.oral-source{font-family:'Manrope',sans-serif;font-weight:900;font-size:21px;line-height:1.22;color:var(--ink)}
.oral-meta{margin-top:5px;font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:18px;line-height:1.15;color:var(--ink-soft)}
.oral-meta:empty{display:none}
.oral-word-imgs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.oral-word-imgs:empty{display:none}
.oral-cloze{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:5px;font-family:'Manrope',sans-serif;font-weight:700;font-size:18px;line-height:1.35;color:var(--ink-soft)}
.oral-cloze-text{white-space:pre-wrap}
.oral-cloze-full{width:100%;text-align:center}
/* Mini-carte mnémo FACE CACHÉE par défaut. Tap (.flipped) => révèle l'image.
   Flip 3D rotateY réutilisant le pattern .imggen-card3d ; fallback sobre en
   reduced-motion (opacity, pas de 3D). */
.oral-word-img{width:78px;height:84px;flex:0 0 auto;cursor:pointer;perspective:600px;-webkit-tap-highlight-color:transparent;background:none;border:none;padding:0;position:relative;transition:transform .35s cubic-bezier(.34,1.45,.5,1)}
.oral-word-img-inline{width:50px;height:54px;vertical-align:-14px}
/* Aperçu agrandi : la carte grossit en se retournant (pop), passe au-dessus des
   voisines, puis se referme via le minuteur JS (2,5 s) ou un 2e tap. */
.oral-word-img.flipped{transform:scale(1.7);z-index:6}
.oral-word-img-inline.flipped{transform:scale(1.95)}
.oral-word-img:focus-visible{outline:none}
.oral-word-img-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.7,.3,1.2)}
.oral-word-img.flipped .oral-word-img-inner{transform:rotateY(180deg)}
.oral-word-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:var(--border-sketch-thin);border-radius:14px;box-shadow:var(--shadow-sketch-sm);overflow:hidden;display:grid;place-items:center}
.oral-word-face-back{background:var(--turquoise)}
.oral-word-face-motif{font-size:30px;line-height:1;text-shadow:1px 1px 0 rgba(0,0,0,.15)}
.oral-word-img-inline .oral-word-face-motif{font-size:23px}
.oral-word-face-front{transform:rotateY(180deg);background:var(--mist)}
.oral-word-face-front img{width:100%;height:100%;object-fit:cover;display:block}
.oral-word-text-fallback{padding:5px;color:var(--marine);font-family:'Manrope',sans-serif;font-weight:900;font-size:14px;line-height:1.05;text-align:center;overflow-wrap:anywhere}
.oral-word-img:focus-visible .oral-word-face-back,
.oral-word-img:focus-visible .oral-word-face-front{box-shadow:0 0 0 3px var(--turquoise-soft),var(--shadow-sketch-sm)}
@media (prefers-reduced-motion: reduce){
  .oral-word-img{perspective:none;transition:none}
  .oral-word-img-inner{transform-style:flat;transition:opacity .2s ease}
  .oral-word-img.flipped .oral-word-img-inner{transform:none}
  .oral-word-face{backface-visibility:visible;-webkit-backface-visibility:visible;transition:opacity .2s ease}
  .oral-word-face-front{transform:none;opacity:0}
  .oral-word-img.flipped .oral-word-face-front{opacity:1}
  .oral-word-img.flipped .oral-word-face-back{opacity:0}
}
.oral-tap-hint{margin-top:-4px;text-align:center;font-size:17px;line-height:1;color:var(--ink-soft)}
.oral-reveal{border:var(--border-sketch-thin);border-radius:14px;background:var(--jaune-soft);padding:10px 12px;color:var(--ink);font-family:'Manrope',sans-serif;box-shadow:var(--shadow-sketch-sm)}
.oral-reveal-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.oral-reveal-list{display:flex;flex-wrap:wrap;gap:6px}
.oral-reveal-item{display:inline-flex;align-items:center;border-radius:999px;background:#fff;padding:5px 9px;font-weight:900;font-size:15px;line-height:1.1}
.oral-feedback-tabs{margin-top:2px}
.oral-feedback-tab.active{background:var(--framboise);color:#fff;box-shadow:0 2px 6px rgba(239,71,111,.28)}
.oral-feedback-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;padding:2px 2px 10px}
.oral-feedback-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.oral-feedback{border:var(--border-sketch-thin);border-radius:14px;background:#fff;padding:12px 14px;font-family:'Manrope',sans-serif;font-weight:800;font-size:16px;line-height:1.25;color:var(--ink);box-shadow:var(--shadow-sketch-sm)}
.oral-feedback-verdict{font-size:20px;font-weight:900;line-height:1.15;color:inherit}
.oral-feedback-heard{margin-top:5px;font-size:14px;font-weight:700;line-height:1.25;color:var(--ink-soft)}
.oral-feedback-analysis-title{margin-top:10px;font-size:14px;font-weight:900;line-height:1.15;color:inherit}
.oral-feedback-analysis{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:750;line-height:1.3;color:var(--ink)}
.oral-feedback-analysis li::marker{color:var(--turquoise)}
.oral-notion-panel{border:var(--border-sketch-thin);border-radius:14px;background:#fff;padding:12px 14px;font-family:'Manrope',sans-serif;color:var(--ink);box-shadow:var(--shadow-sketch-sm)}
.oral-notion-label{font-weight:900;font-size:17px;line-height:1.18;color:var(--framboise)}
.oral-notion-explication{margin-top:7px;font-weight:750;font-size:15px;line-height:1.35;color:var(--ink)}
.oral-notion-table{margin-top:12px;border:1px solid rgba(39,35,42,.12);border-radius:10px;overflow:hidden;background:#fff}
.oral-notion-table-title{padding:8px 10px;background:var(--framboise-soft,#FCE3EA);color:var(--framboise);font-weight:900;font-size:13px;line-height:1.15}
.oral-notion-table-grid{width:100%;border-collapse:collapse;font-size:15px;line-height:1.2}
.oral-notion-table-grid tr{border-top:1px solid rgba(39,35,42,.09)}
.oral-notion-table-grid td{padding:7px 10px;vertical-align:middle}
.oral-notion-table-person{width:42%;color:var(--ink-soft);font-weight:800}
.oral-notion-table-form{color:var(--ink);font-weight:850}
.oral-notion-table-grid tr.is-used{background:var(--framboise-soft,#FCE3EA)}
.oral-notion-table-grid tr.is-used td{color:var(--framboise);font-weight:950}
.oral-notion-empty{font-family:'Manrope',sans-serif;font-weight:800;font-size:15px;line-height:1.25;color:var(--ink-soft)}
.oral-feedback.success{background:var(--turquoise-soft);color:var(--marine)}
.oral-feedback.close{background:var(--jaune-soft);color:var(--ink)}
.oral-feedback.retry,.oral-feedback.recording{background:var(--framboise-soft,#FCE3EA);color:var(--framboise-d,#C03056)}
.oral-footer{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding:8px 0 calc(12px + env(safe-area-inset-bottom, 0px));background:var(--bg)}
#oralConvOverlay .oral-mic{width:100%;min-height:56px;border:0;border-radius:18px;background:var(--framboise);color:#fff;font-family:'Manrope',sans-serif;font-weight:900;font-size:19px;line-height:1.1;box-shadow:0 4px 0 var(--framboise-d);cursor:pointer;margin:0;transition:transform .12s,box-shadow .12s,background .15s}
#oralConvOverlay .oral-mic:active{transform:translateY(2px);box-shadow:0 2px 0 var(--framboise-d)}
#oralConvOverlay .oral-mic.recording{position:relative;background:var(--rouge);box-shadow:0 4px 0 var(--rouge-d,#b23b3b);animation:oralMicPulse .9s ease-in-out infinite}
#oralConvOverlay .oral-mic.recording::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:#fff;vertical-align:2px;animation:pulseDot .8s ease-in-out infinite}
#oralConvOverlay .conv-close-btn{width:100%;min-height:50px;border:0;border-radius:18px;background:var(--mist);color:var(--ink);font-family:'Manrope',sans-serif;font-weight:900;font-size:17px;line-height:1.1;box-shadow:0 4px 0 var(--line);cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s,color .15s}
#oralConvOverlay .conv-close-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
#oralConvOverlay .conv-close-btn:disabled{opacity:.5;cursor:default}
#oralConvOverlay .oral-next.active{background:var(--turquoise-soft);color:var(--turquoise-d)}
@media (min-width:720px){
  #oralConvOverlay{padding:24px;align-items:center;justify-content:center}
  #oralConvOverlay .parle-missing-sheet{width:min(100%,600px);height:min(720px,calc(100dvh - 48px));min-height:min(620px,calc(100dvh - 48px));max-height:calc(100dvh - 48px);padding:18px 24px 22px;margin:auto}
  .oral-topbar{padding:0 0 12px}
  .oral-topbar-title{font-size:19px}
  .oral-content{padding:8px 0 22px;gap:18px;overflow:hidden}
  .oral-mode-tabs{width:min(100%,380px);align-self:center}
  .oral-head{align-items:center;gap:14px;padding-top:4px}
  .oral-mascot{width:72px;height:72px}
  .oral-bubble{padding:16px 18px;border-radius:6px 20px 20px 20px}
  .oral-source{font-size:26px}
  .oral-meta{font-size:20px}
  .oral-word-imgs{flex:1;min-height:120px;align-content:center;align-items:center;overflow:visible}
  .oral-word-img{width:96px;height:104px}
  .oral-word-img.flipped{position:fixed;top:50%;left:50%;width:min(42vw,260px);height:min(45vw,280px);transform:translate(-50%,-50%);z-index:10050}
  .oral-word-img-inline.flipped{transform:translate(-50%,-50%)}
  .oral-feedback-tabs{width:min(100%,520px)}
  .oral-feedback-scroll{width:min(100%,520px);align-self:center}
  .oral-feedback-panel,.oral-reveal,.oral-feedback,.oral-notion-panel{width:min(100%,520px);align-self:center}
  .oral-footer{width:min(100%,420px);align-self:center;padding:0;background:transparent}
  #oralConvOverlay .oral-mic{min-height:62px;font-size:20px}
}
@keyframes oralMicPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}

/* === Tes Révisions : popup détail bucket (miniatures) === */
.rev-card-count{cursor:pointer;transition:transform .12s, opacity .2s}
.rev-card-count:active{transform:scale(.94)}
.rev-card-count-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.rev-card-upcoming{font-family:'Caveat','Manrope',cursive;font-weight:700;font-size:15px;color:var(--ink-soft);line-height:1;white-space:nowrap}

.review-detail-sheet{position:relative;width:100%;max-width:520px;max-height:82vh;display:flex;flex-direction:column;background:var(--surface);border:var(--border-sketch);border-radius:22px;box-shadow:var(--shadow-sketch-lg);padding:22px;overflow:hidden}
.review-detail-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:none;border-radius:50%;background:#fff;color:var(--ink);box-shadow:var(--shadow-sketch-sm);cursor:pointer;font-size:15px;line-height:1}
.review-detail-title{padding-right:40px;font-family:'Manrope',sans-serif;font-weight:900;font-size:22px;color:var(--framboise);line-height:1.1}
.review-detail-grid{margin-top:16px;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px;padding:2px}
.review-detail-cell{display:flex;flex-direction:column;gap:5px;border:var(--border-sketch-thin);border-radius:14px;background:#fff;padding:8px;box-shadow:var(--shadow-sketch-sm);cursor:pointer;text-align:center}
.review-detail-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--mist)}
.review-detail-thumb.empty{display:flex;align-items:center;justify-content:center;padding:8px;font-family:'Manrope',sans-serif;font-weight:900;font-size:17px;color:var(--marine)}
.review-detail-word{font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;color:var(--marine);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-detail-tr{font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;color:var(--ink-soft);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.review-detail-badge{align-self:center;margin-top:1px;padding:1px 8px;border-radius:999px;background:var(--framboise-soft,#FCE3EA);color:var(--framboise);font-family:'Caveat','Manrope',cursive;font-size:13px;font-weight:700;line-height:1.1}
.review-detail-empty{grid-column:1/-1;padding:24px 10px;text-align:center;color:var(--ink-soft);font-size:18px}
@media (min-width:560px){
  .review-detail-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
}