/**
 * La Clé Cachée — Visual Novel CSS (Voleur Payeur)
 */

/* ============================================
   CADRE GÉNÉRAL
   ============================================ */
body.lcc-playing-vn .site-header,
body.lcc-playing-vn .site-footer { display: none !important; }

#lcc-vn-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #0a0a0f;
}

.lcc-vn {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* v1.00 — Mobile : `inset:0` remplissait le viewport de MISE EN PAGE, qui sur
       iOS s'étend DERRIÈRE les barres Safari → l'écran-titre était coupé en haut
       (barre d'adresse) et rogné en bas (barre d'outils). On utilise la hauteur
       de viewport DYNAMIQUE (dvh) qui exclut les barres → plus rien n'est coupé.
       Fallback vh pour les vieux navigateurs. */
    height: 100vh;
    height: 100dvh;
    color: #f5efe6;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.lcc-vn-error {
    padding: 60px;
    text-align: center;
    color: #e74c3c;
    background: #0a0a0f;
}

/* ============================================
   ÉCRAN TITRE
   ============================================ */
.lcc-vn-title-screen {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* v1.36 — La Brume : zoom + décalage du fond pour qu'on voie le perso
   encapuchonné et la cathédrale APRÈS la pose de l'overlay des boutons
   (sinon le carré central cache pile ces deux éléments clés de l'affiche). */
#lcc-vn-root[data-game="la_brume"] .lcc-vn-title-screen {
    background-size: cover;
    background-position: 28% center;
}
@media (min-aspect-ratio: 16/9) {
    #lcc-vn-root[data-game="la_brume"] .lcc-vn-title-screen {
        background-size: 118% auto;
        background-position: 28% center;
    }
}
.lcc-vn-title-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6));
    padding: 60px 80px;
    border-radius: 16px;
    text-align: center;
    border: 2px solid rgba(212, 177, 106, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    max-width: 600px;
}
.lcc-vn-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(40px, 7vw, 72px);
    color: #d4b16a;
    margin: 0 0 8px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.lcc-vn-subtitle {
    font-style: italic;
    font-size: 20px;
    color: rgba(245, 239, 230, 0.85);
    margin: 0 0 40px;
}
/* v1.12 — Crédit musique discret dans l'écran-titre VN.
   Bas du title-screen, sous le bouton « Retour à la bibliothèque ».
   Petit + transparent pour ne pas distraire de l'ambiance immersive. */
.lcc-vn-title-credit {
    margin: 18px 0 0;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.4px;
    color: rgba(232, 224, 210, 0.55);
    font-style: italic;
}
.lcc-vn-title-credit a {
    color: rgba(212, 177, 106, 0.75);
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.lcc-vn-title-credit a:hover {
    color: #E5C68A;
}

.lcc-vn-title-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

/* Sélecteur de nombre de joueurs sur l'écran titre */
.lcc-vn-player-picker {
    margin: 0 0 28px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(212, 177, 106, 0.4);
    border-radius: 10px;
    text-align: center;
}
.lcc-vn-player-picker__label {
    display: block;
    color: rgba(245, 239, 230, 0.85);
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lcc-vn-player-picker__buttons {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.lcc-vn-player-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(245, 239, 230, 0.35);
    background: rgba(0, 0, 0, 0.4);
    color: #f5efe6;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}
.lcc-vn-player-btn:hover,
.lcc-vn-player-btn:focus-visible {
    border-color: #d4b16a;
    color: #d4b16a;
    outline: none;
    transform: scale(1.05);
}
.lcc-vn-player-btn.is-active {
    background: linear-gradient(135deg, #d4b16a, #c19a55);
    border-color: #d4b16a;
    color: #1a1410;
    box-shadow: 0 4px 12px rgba(212, 177, 106, 0.4);
}
.lcc-vn-player-picker__hint {
    margin: 12px 0 0;
    color: rgba(245, 239, 230, 0.65);
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   BOUTONS GÉNÉRIQUES
   ============================================ */
.lcc-vn-btn {
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 15px;
    border: 1px solid rgba(245, 239, 230, 0.35);
    background: rgba(0,0,0,0.4);
    color: #f5efe6;
    text-align: center;
    display: inline-block;
}
.lcc-vn-btn:hover {
    border-color: #d4b16a;
    color: #d4b16a;
    transform: translateY(-1px);
}
.lcc-vn-btn-primary {
    background: linear-gradient(135deg, #d4b16a, #c4985a);
    color: #0F1E3D;
    border-color: transparent;
    font-size: 17px;
}
.lcc-vn-btn-primary:hover {
    color: #0F1E3D;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 177, 106, 0.4);
}

/* ============================================
   HUD (haut de l'écran)
   ============================================ */
.lcc-vn-hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    pointer-events: none;
    gap: 16px;
}
.lcc-vn-hud > * { pointer-events: auto; }

.lcc-vn-hud-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.lcc-vn-hud-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(212, 177, 106, 0.5);
    color: #d4b16a;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}
.lcc-vn-hud-btn:hover {
    background: rgba(212, 177, 106, 0.2);
    transform: scale(1.05);
}

/* Bouton Skip admin (pas circulaire) */
/* v1.08 — Contraste renforcé (retour Benjamin) : fond plus opaque, texte ivoire
   clair, bordure plus marquée. Lisible sur tous les fonds image. */
.lcc-vn-hud-btn-skip {
    width: auto;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    background: rgba(140, 70, 45, 0.78);
    border: 1px solid rgba(220, 145, 115, 0.85);
    color: #FFE9DC;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.lcc-vn-hud-btn-skip:hover {
    background: rgba(170, 90, 60, 0.9);
    border-color: #F0A988;
    color: #FFFFFF;
    transform: scale(1.03);
}

.lcc-vn-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(212, 177, 106, 0.4);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    font-size: 14px;
}
.lcc-vn-stat-icon { font-size: 18px; }
.lcc-vn-stat-value {
    color: #d4b16a;
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
}
.lcc-vn-stat-label {
    color: rgba(245, 239, 230, 0.7);
    font-size: 12px;
}
.lcc-vn-stat-ecus-mini {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.4);
}
.lcc-vn-stat-ecus-mini .lcc-vn-stat-value {
    color: #f1c40f;
}

.lcc-vn-timer-low .lcc-vn-stat-value { color: #f1c40f; }
.lcc-vn-timer-critical .lcc-vn-stat-value {
    color: #e74c3c;
    animation: lccTimerPulse 1s ease-in-out infinite;
}
@keyframes lccTimerPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* === Indices collectés (Trésor Caché — sous les Tâches) === */
.lcc-vn-clues-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 177, 106, 0.25);
}
.lcc-vn-clues-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(245, 239, 230, 0.65);
    margin-bottom: 6px;
}
.lcc-vn-clues-list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lcc-vn-clue {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(245, 239, 230, 0.12);
    transition: all 0.18s ease;
}
.lcc-vn-clue.has {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.5);
}
.lcc-vn-clue.missing {
    opacity: 0.55;
}
.lcc-vn-clue-icon {
    font-size: 18px;
    line-height: 1;
}
.lcc-vn-clue-mark {
    font-size: 11px;
    margin-top: 2px;
    font-weight: 700;
    color: rgba(245, 239, 230, 0.55);
}
.lcc-vn-clue.has .lcc-vn-clue-mark {
    color: #2ecc71;
}

/* === Panneau Tâches (haut droite) === */
.lcc-vn-tasks-panel {
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(212, 177, 106, 0.5);
    border-radius: 10px;
    /* v1.08 — Compactage (retour Benjamin : « beaucoup de blanc inutile »).
       Padding réduit, hauteur naturellement adaptative au contenu. */
    padding: 10px 12px;
    min-width: 240px;
    max-width: 320px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.lcc-vn-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* v1.08 — Header plus serré */
    margin-bottom: 6px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(212, 177, 106, 0.3);
}
/* v1.08 — Bouton « +X autres tâches » (toggle overflow) */
.lcc-vn-tasks-overflow {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    justify-content: center;
}
.lcc-vn-tasks-overflow-btn {
    background: none;
    border: 1px dashed rgba(212, 177, 106, 0.4);
    color: rgba(212, 177, 106, 0.85);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lcc-vn-tasks-overflow-btn:hover {
    background: rgba(212, 177, 106, 0.12);
    border-color: rgba(212, 177, 106, 0.7);
    color: #f5efe6;
}
.lcc-vn-tasks-overflow-btn .t-less { display: none; }
.lcc-vn-tasks-overflow-btn[aria-expanded="true"] .t-more { display: none; }
.lcc-vn-tasks-overflow-btn[aria-expanded="true"] .t-less { display: inline; }
.lcc-vn-tasks-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #d4b16a;
    font-weight: 700;
}
.lcc-vn-ecus-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    background: rgba(212, 177, 106, 0.15);
    border: 1px solid rgba(212, 177, 106, 0.4);
    border-radius: 999px;
    padding: 4px 12px;
}
.lcc-vn-ecus-value {
    color: #f1c40f;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.lcc-vn-ecus-label {
    color: rgba(245, 239, 230, 0.85);
    font-size: 13px;
}

.lcc-vn-tasks-list {
    list-style: none;
    margin: 0; padding: 0;
}
.lcc-vn-task {
    /* v1.08 — Lignes plus compactes (retour Benjamin) */
    padding: 3px 0;
    font-size: 13px;
    color: #f5efe6;
    line-height: 1.35;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.lcc-vn-task[hidden] { display: none !important; }
.lcc-vn-task-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-weight: 700;
}
.lcc-vn-task-active .lcc-vn-task-icon {
    color: #f1c40f;
    animation: lccTaskBlink 2s ease-in-out infinite;
}
@keyframes lccTaskBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.lcc-vn-task-done {
    color: rgba(46, 204, 113, 0.85);
}
.lcc-vn-task-done .lcc-vn-task-icon { color: #2ecc71; }
.lcc-vn-task-locked {
    color: rgba(245, 239, 230, 0.35);
    font-style: italic;
}
.lcc-vn-task-locked .lcc-vn-task-icon { color: rgba(245, 239, 230, 0.25); }
.lcc-vn-task-hidden {
    font-style: italic;
    color: rgba(245, 239, 230, 0.4);
}
.lcc-vn-task-reward {
    color: #f1c40f;
    font-weight: 700;
    font-size: 11px;
    margin-left: 4px;
}

/* ============================================
   PERSONNAGES (portraits sur les côtés)
   Gros plan, ils descendent jusqu'en bas, dépassent un peu
   sur les côtés pour donner de la présence.
   ============================================ */
/* === Voleur Payeur (et défaut) : taille d'origine, ne pas toucher === */
.lcc-vn-character {
    position: absolute;
    bottom: -2%;
    width: 50%;
    max-width: 900px;
    height: 105%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
    pointer-events: none;
    z-index: 10;
    animation: lccCharIn .55s cubic-bezier(.2, .9, .3, 1.1) both;
}
/* === Trésor Caché v0.26.2 — persos UNIFORMISÉS.
   Toutes les images TC sont désormais recadrées de façon identique
   (plan poitrine « chest-up », figure ~92% d'un canvas 16:9, ancrée en
   bas, centrée). On les affiche plus GRANDS que VP et CENTRÉS sur la
   bulle de dialogue : les bulles sont posées à 12% du bord, on règle
   left/right à 2% pour qu'un perso (large) ait son centre aligné sur
   le centre de la bulle. */
/* Perso : largeur en % PUR (pas de max-width) → centre du perso TOUJOURS
   à 37%/63% quelle que soit la largeur d'écran (width 56% + left 9% →
   centre = 9 + 28 = 37%). */
.lcc-vn-staged .lcc-vn-character {
    width: 56% !important;
    max-width: none !important;
    height: 112% !important;
    bottom: -2% !important;
}
.lcc-vn-staged .lcc-vn-character-left  { left: 9% !important; }
.lcc-vn-staged .lcc-vn-character-right { right: 9% !important; }
/* Bulle TC : s'adapte à son texte (fit-content → fini le vide quand le
   texte est court) et CENTRÉE sur le perso. La bulle est centrée par le
   conteneur flex (justify-content:center) ; une marge de 26% du côté
   opposé décale son centre à 37% (gauche) / 63% (droite) — pile sur le
   centre du perso. v0.26.3. */
/* v0.45 / v0.46 — Bulles staged (TC/Zoubeul/Léo/Quentin) très compactes :
   max-width 460, min-width 240, padding réduit. v0.46 : on attaque aussi
   la HAUTEUR (qui couvrait le perso plus que la largeur) en réduisant
   font-size 17→15, line-height 1.6→1.4 et margins du texte interne. */
.lcc-vn-staged .lcc-vn-bubble {
    width: fit-content !important;
    max-width: 460px !important;
    min-width: 240px !important;
    padding: 10px 16px !important;
}
.lcc-vn-staged .lcc-vn-bubble-text {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
    min-height: 1.4em !important;
}
.lcc-vn-staged .lcc-vn-bubble-name {
    /* v1.08 — Retour Benjamin : « taille des noms perso un peu trop petite
       par rapport au reste des textes ». Avant 13px (plus petit que le texte
       15px), maintenant 16px (un poil au-dessus du texte → meilleure
       hiérarchie visuelle). */
    font-size: 16px !important;
    margin-bottom: 5px !important;
    font-weight: 700;
}
.lcc-vn-staged .lcc-vn-continue {
    padding: 4px 10px !important;
    font-size: 13px !important;
}
/* Réglage taille texte utilisateur : on respecte si Large mais on continue
   à compacter pour Small/Medium qui correspondent à l'usage normal. */
.lcc-vn-staged .lcc-vn-text-small  .lcc-vn-bubble-text { font-size: 13px !important; }
.lcc-vn-staged .lcc-vn-text-medium .lcc-vn-bubble-text { font-size: 15px !important; }
.lcc-vn-staged .lcc-vn-text-large  .lcc-vn-bubble-text { font-size: 18px !important; }
.lcc-vn-staged .lcc-vn-bubble-left {
    margin-left: 0 !important;
    margin-right: 26% !important;
}
.lcc-vn-staged .lcc-vn-bubble-right {
    margin-right: 0 !important;
    margin-left: 26% !important;
}
.lcc-vn-staged .lcc-vn-bubble-narrator {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* v1.00 — PAYSAGE MOBILE (écran large mais TRÈS court, ~390px de haut). Aucun
   media query ne le ciblait (largeur > 768 → la règle « mobile » ne s'applique
   pas), d'où : bulles énormes qui mangent l'écran + perso quasi invisible (retour
   Benjamin, screenshot in-game). On compacte la bulle et on ajuste le perso. */
@media (orientation: landscape) and (max-height: 520px) {
    .lcc-vn-staged .lcc-vn-character {
        height: 100% !important;
        width: 44% !important;
        bottom: 0 !important;
    }
    .lcc-vn-staged .lcc-vn-character-left  { left: 1% !important; }
    .lcc-vn-staged .lcc-vn-character-right { right: 1% !important; }
    .lcc-vn-staged .lcc-vn-bubble {
        max-width: 54% !important;
        min-width: 0 !important;
        padding: 7px 13px !important;
    }
    .lcc-vn-staged .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-small  .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-medium .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-large  .lcc-vn-bubble-text {
        font-size: 13px !important;
        line-height: 1.34 !important;
        margin: 0 0 5px !important;
        min-height: 0 !important;
    }
    .lcc-vn-staged .lcc-vn-bubble-name { font-size: 11.5px !important; margin-bottom: 3px !important; }
    .lcc-vn-staged .lcc-vn-continue { padding: 3px 9px !important; font-size: 12px !important; }
}
@media (max-width: 768px) {
    /* Mobile : perso centré (width 92% + left 4% → centre 50%) + bulle centrée. */
    .lcc-vn-staged .lcc-vn-character {
        width: 92% !important;
    }
    .lcc-vn-staged .lcc-vn-character-left  { left: 4% !important; }
    .lcc-vn-staged .lcc-vn-character-right { right: 4% !important; }
    .lcc-vn-staged .lcc-vn-bubble {
        max-width: 88% !important;
    }
    .lcc-vn-staged .lcc-vn-bubble-left,
    .lcc-vn-staged .lcc-vn-bubble-right {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* v0.29 — Biologiste (cours_quentin) & Courses de Léo (cl) : personnages à
   taille INTERMÉDIAIRE (entre l'ancien 56% jugé trop petit et le 74% jugé
   trop grand → 62%) et bien centrés sur leur bulle : width 62% + left/right
   6% → centre du perso à 37%/63%, pile sur le centre de la bulle staged
   (marge 26%). TC et Zoubeul ne sont PAS touchés. */
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-character,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-character,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-character {
    width: 62% !important;
    height: 112% !important;
}
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-character-left,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-character-left,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-character-left  { left: 6% !important; }
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-character-right,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-character-right,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-character-right { right: 6% !important; }
/* v0.29.2 — Bulles RESSERRÉES pour Léo & le Biologiste : padding vertical
   minimal, marges internes réduites, bouton « continuer » compact → fini
   le vide inutile en bas de la bulle. */
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-bubble,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-bubble,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-bubble {
    min-width: 230px !important;
    padding: 10px 20px 8px !important;
}
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-bubble-name,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-bubble-name,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-bubble-name {
    margin-bottom: 3px !important;
}
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-bubble-text,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-bubble-text,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-bubble-text {
    margin-bottom: 2px !important;
    min-height: 0 !important;
}
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-continue,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-continue,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-continue {
    padding: 2px 13px !important;
    margin-top: 2px !important;
}
@media (max-width: 768px) {
    .lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-character,
    .lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-character,
    .lcc-vn-game-cl.lcc-vn-staged .lcc-vn-character {
        width: 92% !important;
    }
    .lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-character-left,
    .lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-character-left,
    .lcc-vn-game-cl.lcc-vn-staged .lcc-vn-character-left  { left: 4% !important; }
    .lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-character-right,
    .lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-character-right,
    .lcc-vn-game-cl.lcc-vn-staged .lcc-vn-character-right { right: 4% !important; }
}
/* v1.68.39 — Cours du Biologiste (renard roux & roussette) : les longs
   paragraphes pédagogiques (200-250 caractères) faisaient grimper la bulle
   SUR le visage du perso — la bulle staged est centrée sur lui par design,
   pensé pour les répliques courtes de TC. Retour Benjamin (roussette) :
   « des textes cachent le personnage ». Sur desktop, la bulle de ces deux
   cours passe À CÔTÉ du Biologiste (centre décalé du côté opposé) et
   s'élargit pour raccourcir les pavés. Le perso reste visible même sur le
   paragraphe le plus long. Léo/TC/Zoubeul : inchangés. Mobile et paysage
   court : inchangés (pas de place côte à côte, la bulle reste centrée). */
@media (min-width: 769px) and (min-height: 521px) {
    .lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-bubble,
    .lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-bubble {
        max-width: 560px !important;
    }
    /* Perso à gauche (centre 37 %) → bulle décalée à droite (centre ~66 %). */
    .lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-bubble-left,
    .lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-bubble-left {
        margin-right: 0 !important;
        margin-left: 32% !important;
    }
    /* Perso à droite (centre 63 %) → bulle décalée à gauche (centre ~34 %). */
    .lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-bubble-right,
    .lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-bubble-right {
        margin-left: 0 !important;
        margin-right: 32% !important;
    }
}
/* Apparition douce du perso quand il entre en scène */
@keyframes lccCharIn {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0);    }
}
.lcc-vn-character.dimmed { animation: none; }
.lcc-vn-character-right  { animation-name: lccCharInRight; }
@keyframes lccCharInRight {
    0%   { opacity: 0; transform: scaleX(-1) translateY(20px); }
    100% { opacity: 1; transform: scaleX(-1) translateY(0);    }
}

/* Fade-in subtil sur les nouvelles bulles de dialogue */
.lcc-vn-bubble,
.lcc-vn-narration {
    animation: lccBubbleIn .35s ease-out both;
}
@keyframes lccBubbleIn {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
    .lcc-vn-character, .lcc-vn-character-right,
    .lcc-vn-bubble, .lcc-vn-narration { animation: none !important; }
}
/* Voleur Payeur (et défaut) : positions d'origine */
.lcc-vn-character-left {
    left: -3%;            /* déborde à gauche pour donner de la présence */
}
.lcc-vn-character-right {
    right: -3%;           /* déborde à droite */
    transform: scaleX(-1);
}
/* v0.26 : Trésor Caché hérite des positions VP (left/right -3%) — overrides retirés. */

/* === Cours FOXL2 : HUD masquée (pas de tâches, écus, timer en mode cours).
   Le panneau Tâches est inutile pour un parcours linéaire pédagogique. */
.lcc-vn-game-foxl2 .lcc-vn-tasks-panel,
.lcc-vn-game-foxl2 .lcc-vn-stat-ecus,
.lcc-vn-game-foxl2 .lcc-vn-stat-ecus-mini {
    display: none !important;
}
/* v0.29 — Le Biologiste est aussi un COURS : pas de panneau Tâches ni d'écus. */
.lcc-vn-game-cours_quentin .lcc-vn-tasks-panel,
.lcc-vn-game-cours_roussette .lcc-vn-tasks-panel,
.lcc-vn-game-cours_quentin .lcc-vn-stat-ecus,
.lcc-vn-game-cours_roussette .lcc-vn-stat-ecus,
.lcc-vn-game-cours_quentin .lcc-vn-stat-ecus-mini,
.lcc-vn-game-cours_roussette .lcc-vn-stat-ecus-mini {
    display: none !important;
}
/* v0.29 — Courses de Léo : on garde le panneau Tâches (c'est un escape) mais on
   retire le compteur d'écus « /3 » qui n'a aucun sens dans ce jeu éducatif. */
.lcc-vn-game-cl .lcc-vn-ecus-counter,
.lcc-vn-game-cl .lcc-vn-stat-ecus,
.lcc-vn-game-cl .lcc-vn-stat-ecus-mini {
    display: none !important;
}

/* === Cours FOXL2 (steampunk) : style VP — perso part du BAS, grand,
       tête qui dépasse au-dessus de la bulle. v2 : encore plus grand,
       décalé vers le centre pour que le perso soit aligné avec sa
       bulle de texte. */
#lcc-vn-root.lcc-vn-game-foxl2 .lcc-vn-character,
[data-game="cours_foxl2"] .lcc-vn-character,
.lcc-vn-game-foxl2 .lcc-vn-character {
    bottom: -2% !important;
    width: 60% !important;            /* +5pt vs v1 : présence plus forte */
    max-width: 1100px !important;     /* +200px vs v1 */
    height: 115% !important;          /* +10pt : tête bien au-dessus de la bulle */
    max-height: none !important;
    background-position: bottom center !important;
    background-size: contain !important;
}
/* Avatar à gauche, Spark à droite, ramenés vers le centre pour que le
   centre vertical du perso soit aligné avec le centre horizontal de
   sa bulle de texte (cf. règles bubble-left/right ci-dessous). */
.lcc-vn-game-foxl2 .lcc-vn-character-left  { left: 0% !important; }
/* v0.12.9 : on N'INVERSE PLUS la Mentor (image générée déjà cadrée vers le centre).
   v0.12.10 : MAIS on ré-inverse le robot (Spark) qui lui regarde vers la fenêtre
   par défaut → mirror pour qu'il regarde vers le centre. */
.lcc-vn-game-foxl2 .lcc-vn-character-right { right: 0% !important; transform: none !important; }
.lcc-vn-game-foxl2 .lcc-vn-character-right[data-char="robot"] { transform: scaleX(-1) !important; }
/* L'animation d'entrée par la droite : on garde lccCharIn (sans miroir intégré)
   pour la Mentor, et lccCharInRight (avec scaleX(-1)) pour le robot uniquement. */
.lcc-vn-game-foxl2 .lcc-vn-character-right { animation-name: lccCharIn !important; }
.lcc-vn-game-foxl2 .lcc-vn-character-right[data-char="robot"] { animation-name: lccCharInRight !important; }

/* PIC de bulle qui pointe vers la BOUCHE du perso. La bouche est
   à peu près au centre horizontal du perso → on déplace le pic à
   l'aplomb de ce centre.
   - Avatar (left:0%, width:60%) → centre = 30% écran
   - Bulle gauche (margin-left:12%, width 50% par défaut) occupe
     12 % à 62 % → pour que le pic tombe à 30 % écran, il doit être
     à (30 − 12) / 50 = 36 % de la bulle.
   - Symétrique pour Spark à droite. */
.lcc-vn-game-foxl2 .lcc-vn-bubble-left::before,
.lcc-vn-game-foxl2 .lcc-vn-bubble-left::after {
    left: 36% !important;
    right: auto !important;
    transform: translateX(-50%) skewX(-12deg) !important;
}
.lcc-vn-game-foxl2 .lcc-vn-bubble-right::before,
.lcc-vn-game-foxl2 .lcc-vn-bubble-right::after {
    right: 36% !important;
    left: auto !important;
    transform: translateX(50%) skewX(12deg) !important;
}

@media (max-width: 768px) {
    #lcc-vn-root.lcc-vn-game-foxl2 .lcc-vn-character,
    [data-game="cours_foxl2"] .lcc-vn-character,
    .lcc-vn-game-foxl2 .lcc-vn-character {
        width: 75% !important;
        max-width: 700px !important;
    }
    .lcc-vn-game-foxl2 .lcc-vn-character-left  { left: -8% !important; }
    .lcc-vn-game-foxl2 .lcc-vn-character-right { right: -8% !important; }
}

/* === Trésor Caché — bulles : on garde le style VP par défaut.
   Bulle en bas + pic vers le haut qui pointe vers la bouche du perso.
   Le perso est volontairement plus haut que la bulle → sa tête dépasse
   au-dessus, comme dans VP. */
.lcc-vn-character.dimmed {
    opacity: 0.28;
    filter: brightness(0.45) saturate(0.4) blur(0.5px);
    z-index: 5;                       /* perso dimmed PASSE DERRIÈRE l'actif */
}
.lcc-vn-character.active {
    opacity: 1;
    filter: drop-shadow(0 0 40px rgba(212, 177, 106, 0.5));
    z-index: 12;                      /* perso actif AU-DESSUS du dimmed */
}

/* La zone dialogue laisse de la place pour les persos
   en s'auto-centrant et en limitant sa largeur. */
.lcc-vn-dialog-zone {
    pointer-events: none;
}
.lcc-vn-bubble,
.lcc-vn-narration,
.lcc-vn-choices {
    pointer-events: auto;
}

@media (max-width: 768px) {
    .lcc-vn-character { width: 65%; max-width: none; height: 100%; bottom: 0; }
    .lcc-vn-character-left, .lcc-vn-character-right { left: auto; right: auto; }
    .lcc-vn-character-left { left: -10%; }
    .lcc-vn-character-right { right: -10%; }
}

/* ============================================
   ZONE DE DIALOGUE (bas de l'écran)
   ============================================ */
.lcc-vn-dialog-zone {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 20px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}
.lcc-vn-dialog-zone > * {
    pointer-events: auto;
}

/* ============================================
   BULLES DE DIALOGUE (style BD)
   ============================================ */
/* VP : bulle largeur fixe (50% capped à 540px) → centre stable, l'alignement
   perso/bulle de v0.44 (inline styles width 52% + left/right 2%) reste valide.
   Réduction modeste vs ancien max 600px pour ne pas dominer l'écran. */
.lcc-vn-bubble {
    background: rgba(15, 15, 22, 0.95);
    border: 2px solid rgba(212, 177, 106, 0.7);
    border-radius: 14px;
    padding: 16px 22px;
    max-width: 540px;
    min-width: 280px;
    width: 50%;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    position: relative;
    margin-bottom: 30px;
    animation: lccBubbleIn 0.3s ease;
    z-index: 25;
}
@keyframes lccBubbleIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Queue de bulle (style BD) — pointe VERS LE HAUT vers la bouche du
   personnage (les portraits sont des grands plans : la bouche est dans
   le tiers supérieur de la moitié de l'écran). */
.lcc-vn-bubble-left {
    align-self: flex-start;
    margin-left: 12%;
    margin-right: auto;
}
.lcc-vn-bubble-left::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%) skewX(-12deg);
    border: 14px solid transparent;
    border-bottom: 18px solid rgba(212, 177, 106, 0.7);
    border-top: 0;
}
.lcc-vn-bubble-left::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) skewX(-12deg);
    border: 12px solid transparent;
    border-bottom: 14px solid rgba(15, 15, 22, 0.95);
    border-top: 0;
}

.lcc-vn-bubble-right {
    align-self: flex-end;
    margin-right: 12%;
    margin-left: auto;
}
.lcc-vn-bubble-right::before {
    content: '';
    position: absolute;
    top: -16px;
    right: 50%;
    transform: translateX(50%) skewX(12deg);
    border: 14px solid transparent;
    border-bottom: 18px solid rgba(212, 177, 106, 0.7);
    border-top: 0;
}
.lcc-vn-bubble-right::after {
    content: '';
    position: absolute;
    top: -12px;
    right: 50%;
    transform: translateX(50%) skewX(12deg);
    border: 12px solid transparent;
    border-bottom: 14px solid rgba(15, 15, 22, 0.95);
    border-top: 0;
}

.lcc-vn-bubble-narrator {
    background: rgba(0,0,0,0.85);
    border-color: rgba(245, 239, 230, 0.3);
    font-style: italic;
    color: rgba(245, 239, 230, 0.85);
}

.lcc-vn-bubble-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.lcc-vn-bubble-text {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 12px;
    color: #f5efe6;
    min-height: 1.6em;
}

/* Tailles de texte (paramétrable) */
.lcc-vn-text-small .lcc-vn-bubble-text { font-size: 14px; }
.lcc-vn-text-medium .lcc-vn-bubble-text { font-size: 17px; }
.lcc-vn-text-large .lcc-vn-bubble-text { font-size: 20px; }

/* Bouton continuer */
.lcc-vn-continue {
    background: transparent;
    border: 1px solid rgba(212, 177, 106, 0.4);
    color: rgba(212, 177, 106, 0.6);
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    float: right;
    transition: all 0.2s ease;
    opacity: 0.4;
}
.lcc-vn-continue.ready {
    opacity: 1;
    color: #d4b16a;
    border-color: #d4b16a;
    animation: lccBlink 1.5s ease-in-out infinite;
}
@keyframes lccBlink {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
.lcc-vn-continue:hover {
    background: rgba(212, 177, 106, 0.15);
}

/* ============================================
   NARRATION (sans personnage)
   ============================================ */
.lcc-vn-narration {
    background: rgba(0,0,0,0.88);
    border: 1px solid rgba(212, 177, 106, 0.5);
    border-radius: 14px;
    padding: 28px 36px;
    max-width: 700px;
    box-shadow: 0 16px 50px rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    text-align: center;
}
.lcc-vn-narration-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    line-height: 1.7;
    font-style: italic;
    color: rgba(245, 239, 230, 0.95);
    margin: 0 0 16px;
    min-height: 1.7em;
}
.lcc-vn-loc-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: #d4b16a;
    margin: 0 0 12px;
}

/* ============================================
   CHOIX
   ============================================ */
.lcc-vn-choices {
    background: rgba(0,0,0,0.92);
    border: 2px solid rgba(212, 177, 106, 0.6);
    border-radius: 14px;
    padding: 24px 28px;
    max-width: 700px;
    width: 60%;
    box-shadow: 0 16px 50px rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    animation: lccBubbleIn 0.3s ease;
}
.lcc-vn-choices-title {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #d4b16a;
    margin-bottom: 16px;
    font-weight: 700;
}
/* v0.12.10 : la question/contexte affichée au-dessus des choix
   pour que le joueur garde le contexte pendant qu'il choisit. */
.lcc-vn-choices-question {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid rgba(212, 177, 106, 0.6);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 18px;
    text-align: left;
}
.lcc-vn-choices-question-name {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    margin-bottom: 6px;
}
.lcc-vn-choices-question-text {
    color: #f5efe6;
    font-size: 15px;
    line-height: 1.45;
}
/* Élargit la boîte de choix quand elle contient une question (sinon ça serre) */
.lcc-vn-choices:has(.lcc-vn-choices-question) {
    width: 70%;
    max-width: 760px;
}
/* v0.40 — Liste de choix : flex layout par défaut (icône à gauche, texte qui
   prend la place restante). Quand .is-grid est posé sur le conteneur parent
   (.lcc-vn-choices, ajouté automatiquement dès 4 choix visibles), on bascule
   en grille 2 colonnes pour mieux scanner les longues listes. */
.lcc-vn-choice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lcc-vn-choices.is-grid {
    width: 80%;
    max-width: 900px;
}
.lcc-vn-choices.is-grid .lcc-vn-choice-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.lcc-vn-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(15, 15, 22, 0.6);
    border: 1px solid rgba(212, 177, 106, 0.3);
    color: #f5efe6;
    padding: 14px 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    margin-bottom: 0;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    min-height: 56px;
}
.lcc-vn-choice:hover {
    background: rgba(212, 177, 106, 0.18);
    border-color: #d4b16a;
    color: #f5efe6;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.lcc-vn-choice-arrow {
    color: #d4b16a;
    margin-right: 0;
    font-weight: 700;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.lcc-vn-choice-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s ease;
}
.lcc-vn-choice:hover .lcc-vn-choice-icon {
    transform: scale(1.12) rotate(-3deg);
}
.lcc-vn-choice-text {
    flex: 1;
    line-height: 1.35;
}
@media (max-width: 768px) {
    /* Mobile : on garde toujours en stack vertical, même en is-grid
       (la grille 2 col devient illisible sur petit écran). */
    .lcc-vn-choices.is-grid .lcc-vn-choice-list {
        grid-template-columns: 1fr;
    }
    .lcc-vn-choices.is-grid { width: 90%; }
    .lcc-vn-choice { min-height: 50px; padding: 11px 14px; font-size: 14px; }
    .lcc-vn-choice-icon { font-size: 24px; width: 34px; }
}

/* ============================================================
   v0.47 — MULTIJOUEUR : badges de vote + pile-ou-face
   ============================================================ */
.lcc-vn-choices.is-multiplayer .lcc-vn-choice {
    /* Plus de hauteur pour accueillir la rangée de badges en bas */
    align-items: flex-start;
    padding-bottom: 18px;
}
.lcc-vn-vote-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-left: 8px;
    flex-shrink: 0;
    min-height: 26px;
}
.lcc-vn-vote-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #a3884d;
    background: #d4b16a;
    color: #1a1408;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    animation: lccVoteBadgePop 0.28s ease-out;
}
@keyframes lccVoteBadgePop {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}
.lcc-vn-choice.is-my-vote {
    border-color: #d4b16a;
    box-shadow: 0 0 0 2px rgba(212, 177, 106, 0.55), 0 6px 18px rgba(0, 0, 0, 0.4);
    background: rgba(212, 177, 106, 0.22);
}
.lcc-vn-vote-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(212, 177, 106, 0.10);
    border: 1px solid rgba(212, 177, 106, 0.35);
    border-radius: 8px;
    color: #e8dec6;
    font-size: 13px;
}
.lcc-vn-vote-hint-icon { font-size: 18px; }
.lcc-vn-vote-hint-text strong { color: #d4b16a; }

/* Overlay pile-ou-face */
.lcc-vn-vote-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(10, 16, 32, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lccOverlayFadeIn 0.32s ease-out;
}
.lcc-vn-vote-overlay.is-fading { animation: lccOverlayFadeOut 0.38s ease-in forwards; }
@keyframes lccOverlayFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes lccOverlayFadeOut { from { opacity: 1; } to { opacity: 0; } }
.lcc-vn-vote-overlay-card {
    background: linear-gradient(180deg, rgba(28, 24, 18, 0.96), rgba(15, 13, 10, 0.96));
    border: 2px solid rgba(212, 177, 106, 0.6);
    border-radius: 16px;
    padding: 36px 48px;
    text-align: center;
    color: #f5efe6;
    min-width: 360px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}
.lcc-vn-vote-overlay-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px;
    color: #d4b16a;
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}
.lcc-vn-vote-coin {
    margin: 12px auto 18px;
    width: 220px;
    min-height: 80px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #d4b16a 0%, #f3dca2 50%, #a3884d 100%);
    color: #1a1408;
    border-radius: 50%;
    font-weight: 800;
    font-size: 17px;
    text-align: center;
    line-height: 1.2;
    box-shadow: inset 0 -6px 12px rgba(0, 0, 0, 0.3), 0 12px 26px rgba(0, 0, 0, 0.6);
    border: 3px solid #8a6f33;
    transition: transform 0.2s ease;
    word-break: break-word;
    overflow: hidden;
}
.lcc-vn-vote-coin.is-spinning {
    animation: lccCoinFlip 0.36s linear infinite;
}
.lcc-vn-vote-coin.is-landed {
    animation: lccCoinLand 0.5s ease-out;
}
@keyframes lccCoinFlip {
    0%   { transform: rotateY(0deg)   scale(1);    }
    50%  { transform: rotateY(180deg) scale(0.88); }
    100% { transform: rotateY(360deg) scale(1);    }
}
@keyframes lccCoinLand {
    0%   { transform: scale(1.4); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.lcc-vn-vote-overlay-msg {
    margin-top: 10px;
    font-size: 16px;
    color: #f5efe6;
    font-weight: 600;
}
@media (max-width: 768px) {
    .lcc-vn-vote-overlay-card { min-width: 0; padding: 26px 22px; width: calc(100% - 40px); max-width: 380px; }
    .lcc-vn-vote-coin { width: 170px; padding: 14px 16px; font-size: 15px; }
    .lcc-vn-vote-badge { width: 22px; height: 22px; font-size: 10px; }
    .lcc-vn-vote-badges { gap: 4px; }
}

/* v0.40 / v0.41 — VOLEUR PAYEUR : personnages un peu plus grands ET vraiment
   alignés avec leur bulle de texte.
   Math du centrage (testé sur la boulangère, screenshot Benjamin) :
     - Bulle width = min(50% écran, 600px), margin-right 12% côté droit.
       Sur un écran 1900 px → bulle = 600 px = 31,5 % → centre bulle = 100 − 12 − 15,75 = 72,25 %.
     - Image VP : la figure est dessinée dans la MOITIÉ GAUCHE de son canvas
       (la moitié droite est vide / décor). Quand on l'affiche à droite avec
       scaleX(-1), la figure se retrouve dans la moitié droite du canvas affiché.
       → centre visible du perso = (right_edge_canvas) − (width/4).
     - Pour aligner avec la bulle (centre 72 %), il faut right_edge − width/4 = 72,25
       → avec width 58 % : right_edge = 86,5 % → right: 13,5 %. Arrondi à 14 %.
   Symétrique sur le côté gauche.
   Mobile : on garde la même logique avec margins plus modérées. */
.lcc-vn-game-voleur_payeur .lcc-vn-character {
    width: 58% !important;
    max-width: 1000px !important;
    height: 108% !important;
}
.lcc-vn-game-voleur_payeur .lcc-vn-character-left  { left: 14% !important; right: auto !important; }
.lcc-vn-game-voleur_payeur .lcc-vn-character-right { right: 14% !important; left: auto !important; }
@media (max-width: 768px) {
    .lcc-vn-game-voleur_payeur .lcc-vn-character {
        width: 88% !important;
    }
    .lcc-vn-game-voleur_payeur .lcc-vn-character-left  { left: 6% !important; }
    .lcc-vn-game-voleur_payeur .lcc-vn-character-right { right: 6% !important; }
}

/* ============================================
   CARTE
   ============================================ */
.lcc-vn-map-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a1410;
}
.lcc-vn-map-frame {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 80px auto 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-vn-map-image {
    max-width: 100%;
    max-height: 75vh;
    width: auto;
    height: auto;
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}
.lcc-vn-map-pins {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lcc-vn-map-pins button {
    pointer-events: auto;
}
.lcc-vn-map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    background: rgba(212, 177, 106, 0.95);
    color: #0F1E3D;
    border: 3px solid #fff;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    white-space: nowrap;
    animation: lccPinPulse 2.5s ease-in-out infinite;
}
@keyframes lccPinPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 0 0 rgba(212, 177, 106, 0.6); }
    50% { box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 0 12px rgba(212, 177, 106, 0); }
}
.lcc-vn-map-pin:hover {
    transform: translate(-50%, -110%) scale(1.1);
    background: #fff;
}
.lcc-vn-map-pin.done {
    background: rgba(46, 204, 113, 0.9);
    color: #fff;
    animation: none;
    opacity: 0.8;
}
.lcc-vn-map-pin.retour {
    background: linear-gradient(135deg, #d4b16a, #e74c3c);
    color: #fff;
    border-color: #f1c40f;
}
.lcc-vn-pin-icon {
    font-size: 16px;
}

/* v0.92 — Multi « postes parallèles » : badges des joueurs présents sur un poste
   (qui s'occupe de quelle tâche), affichés sous l'épingle de carte. */
.lcc-vn-pin-claims {
    position: absolute;
    top: -10px;
    right: -8px;
    display: flex;
    gap: 2px;
    z-index: 3;
}
.lcc-vn-pin-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    border: 1.5px solid;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.lcc-vn-map-narration {
    text-align: center;
    color: rgba(245, 239, 230, 0.85);
    font-style: italic;
    font-size: 15px;
    padding: 16px 32px;
    background: rgba(0,0,0,0.5);
    border-radius: 8px;
    max-width: 600px;
    margin-bottom: 20px;
}

/* Bouton flottant « Larguer les amarres » sur la carte ville (TC) */
.lcc-vn-map-largue {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    padding: 14px 32px;
    border-radius: 999px;
    border: 2px solid #d4b16a;
    background: linear-gradient(135deg, #d4b16a, #c19a55);
    color: #1a1410;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(212, 177, 106, 0.5);
    animation: lccLargueAttention 2.4s ease-in-out infinite;
    transition: transform 0.18s ease;
}
.lcc-vn-map-largue:hover,
.lcc-vn-map-largue:focus-visible {
    transform: translateX(-50%) scale(1.06);
    outline: none;
}
@keyframes lccLargueAttention {
    0%, 100% { box-shadow: 0 8px 28px rgba(212, 177, 106, 0.5), 0 0 0 0 rgba(212, 177, 106, 0.4); }
    50%      { box-shadow: 0 8px 28px rgba(212, 177, 106, 0.5), 0 0 0 14px rgba(212, 177, 106, 0); }
}

/* ============================================
   CARTE AU TRÉSOR — 9 hotspots dynamiques (Trésor Caché)
   ============================================ */
.lcc-tc-map-scene {
    background: radial-gradient(ellipse at center, #2a1f12 0%, #14100a 70%);
    overflow: hidden;
}
.lcc-tc-map-frame {
    position: absolute;
    inset: 70px 20px 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* v0.46 — Wrapper avec aspect-ratio EXACT du parchemin (2752/1536 ≈ 1.79).
   Le navigateur calcule la plus grande taille possible qui respecte à la fois
   max-width:100%, max-height:100% ET aspect-ratio. Image et hotspots
   occupent ensuite EXACTEMENT la même zone (inset:0 sur les deux). */
.lcc-tc-map-inner {
    position: relative;
    aspect-ratio: 2752 / 1536;
    /* v1.68.23 — SANS width/height explicites la div collapse a 0 dans le
       flex parent (aspect-ratio seul ne donne pas de taille intrinseque).
       Consequence : carte + hotspots invisibles (bug user 04/07). Fix :
       width:100% fill horizontal, hauteur calculee via aspect-ratio, et
       max-width:calc(...) empeche l'overflow vertical dans les frames
       moins larges que le ratio 2752/1536 (typiquement portrait). */
    width: 100%;
    height: auto;
    max-width: min(100%, calc((100dvh - 160px) * 2752 / 1536));
    max-height: 100%;
    border: 3px solid rgba(212, 177, 106, 0.55);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.85);
    overflow: hidden;
}
.lcc-tc-map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    pointer-events: none;
    display: block;
}
.lcc-tc-map-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lcc-tc-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(212, 177, 106, 0.18);
    border: 2px dashed rgba(212, 177, 106, 0.65);
    border-radius: 50%;
    cursor: pointer;
    font-family: inherit;
    color: transparent; /* le label se révèle au hover */
    pointer-events: auto;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    overflow: visible;
    padding: 0;
}
.lcc-tc-hotspot:hover,
.lcc-tc-hotspot:focus-visible {
    background: rgba(212, 177, 106, 0.32);
    border-color: #f1c40f;
    color: #fff;
    outline: none;
    transform: translate(-50%, -50%) scale(1.06);
}
.lcc-tc-hotspot-label {
    position: absolute;
    left: 50%;
    bottom: 105%;
    transform: translateX(-50%);
    background: rgba(20, 16, 10, 0.92);
    color: #f5efe6;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(212, 177, 106, 0.55);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.lcc-tc-hotspot:hover .lcc-tc-hotspot-label,
.lcc-tc-hotspot:focus-visible .lcc-tc-hotspot-label {
    opacity: 1;
}
.lcc-tc-hotspot--checking {
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.25);
}
.lcc-tc-hotspot--correct {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.4);
    animation: lccTcOk .9s ease;
}
.lcc-tc-hotspot--wrong {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.4);
    animation: lccTcKo .6s ease;
}
@keyframes lccTcOk {
    0% { transform: translate(-50%, -50%) scale(1); }
    40% { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes lccTcKo {
    0%,100% { transform: translate(-50%, -50%); }
    25% { transform: translate(-55%, -50%); }
    75% { transform: translate(-45%, -50%); }
}
.lcc-tc-map-narration {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: rgba(245, 239, 230, 0.92);
    font-style: italic;
    font-size: 14px;
    padding: 10px 22px;
    background: rgba(0,0,0,0.65);
    border-radius: 8px;
    max-width: 640px;
    border: 1px solid rgba(212, 177, 106, 0.4);
}

/* ============================================
   MODAL D'AIDE « Comment jouer » (Trésor Caché)
   ============================================ */
.lcc-vn-help-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 10, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}
.lcc-vn-help-modal[hidden] { display: none; }
.lcc-vn-help-card {
    position: relative;
    background: linear-gradient(135deg, #2a1f12 0%, #14100a 100%);
    border: 2px solid rgba(212, 177, 106, 0.55);
    border-radius: 14px;
    padding: 32px 38px;
    max-width: 680px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    color: #f5efe6;
    box-shadow: 0 30px 80px rgba(0,0,0,0.85);
}
.lcc-vn-help-card h2 {
    margin: 0 0 20px;
    color: #d4b16a;
    font-family: Georgia, serif;
    font-size: 28px;
}
.lcc-vn-help-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    counter-reset: helpsteps;
}
.lcc-vn-help-list li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(212, 177, 106, 0.18);
    font-size: 15px;
    line-height: 1.55;
}
.lcc-vn-help-list li:last-child { border-bottom: none; }
.lcc-vn-help-list strong {
    color: #d4b16a;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 4px;
}
.lcc-vn-help-tip {
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
}
.lcc-vn-help-close {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(245, 239, 230, 0.3);
    background: rgba(0,0,0,0.35);
    color: #f5efe6;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all .2s ease;
}
.lcc-vn-help-close:hover,
.lcc-vn-help-close:focus-visible {
    background: #d4b16a;
    color: #1a1410;
    outline: none;
    transform: scale(1.1);
}

/* ============================================
   ZONE D'OISEAUX — Trésor Caché (ile_choix_zone)
   ============================================ */
.lcc-bird-zone-scene {
    background-size: cover;
    background-position: center;
}
.lcc-bird-zone-overlay {
    position: absolute;
    inset: 70px 4% 4% 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.lcc-bird-zone-narration {
    background: rgba(20, 16, 10, 0.85);
    color: #f5efe6;
    padding: 14px 22px;
    border-radius: 8px;
    border: 1px solid rgba(212, 177, 106, 0.55);
    font-style: italic;
    font-size: 15px;
    max-width: 720px;
    text-align: center;
    margin-bottom: 22px;
}
.lcc-bird-zone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 1100px;
}
.lcc-bird-card {
    background: rgba(20, 16, 10, 0.85);
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    color: #f5efe6;
    font-family: inherit;
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.lcc-bird-card:hover,
.lcc-bird-card:focus-visible {
    border-color: #d4b16a;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 177, 106, 0.4);
    outline: none;
}
.lcc-bird-card.clicked {
    transform: scale(0.98);
    background: rgba(212, 177, 106, 0.25);
}
.lcc-bird-card-img {
    aspect-ratio: 4/3;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-bird-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.lcc-bird-card-info {
    text-align: center;
}
.lcc-bird-card-zone {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}
.lcc-bird-card-size {
    font-size: 12px;
    color: rgba(245, 239, 230, 0.7);
}

/* ============================================
   MINI-JEUX (overlay sur background)
   ============================================ */
/* ⚠ NE PAS mettre position: relative sur .lcc-mg-scene car .lcc-vn
   est déjà position: fixed (création de contexte de positionnement).
   Sinon ça écrase et l'écran devient noir / collapse. */
.lcc-mg-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
}
.lcc-mg-overlay > * {
    pointer-events: auto;
}
/* v0.12.9 : centrage explicite des mini-jeux FOXL2 (les boîtes étaient
   collées en haut-gauche → on les rend des CONTAINERS flex full-écran
   et on déplace le styling card sur la classe __card interne).
   v0.12.12 : ajout .lcc-mg-cw (mots croisés) au même bloc. */
.lcc-mg-overlay.lcc-mg-foxl2,
.lcc-mg-overlay.lcc-mg-adn,
.lcc-mg-overlay.lcc-mg-cw,
.lcc-mg-overlay.lcc-mg-cf,
.lcc-mg-overlay.lcc-mg-mf,
.lcc-mg-overlay.lcc-mg-ps,
.lcc-mg-overlay.lcc-mg-mt,
.lcc-mg-overlay.lcc-mg-poi,
.lcc-mg-overlay.lcc-mg-bq,
.lcc-mg-overlay.lcc-mg-lock,
.lcc-mg-overlay.lcc-mg-ordre,
/* v1.68.37 — mini-jeux du cours « roussette d'Égypte » */
.lcc-mg-overlay.lcc-mg-echo,
.lcc-mg-overlay.lcc-mg-balance {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    padding: 24px !important;
    width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
}
.lcc-mg-foxl2__card,
.lcc-mg-adn__card,
.lcc-mg-cw__card,
.lcc-mg-cf__card,
.lcc-mg-mf__card,
.lcc-mg-ps__card {
    background: rgba(15, 25, 40, 0.95);
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 16px;
    padding: 24px 28px;
    width: 92%;
    max-width: 760px;
    color: #f5efe6;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
/* Mots croisés : carte plus large pour afficher grille + indices côte à côte */
.lcc-mg-cw__card {
    max-width: 1180px;
    max-height: 94vh;
    overflow-y: auto;
}

/* ---------- Mots croisés (v0.12.12) ---------- */
.lcc-mg-cw__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--dore, #D4B16A);
}
.lcc-mg-cw__hint {
    font-size: 13px;
    color: rgba(245, 239, 230, 0.75);
    margin-bottom: 18px;
}
.lcc-mg-cw__layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.lcc-mg-cw__grid {
    display: grid;
    gap: 2px;
    background: rgba(0, 0, 0, 0.55);
    padding: 3px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}
.lcc-mg-cw__block {
    width: 36px;
    height: 36px;
    background: rgba(20, 30, 50, 0.85);
}
.lcc-mg-cw__cell {
    position: relative;
    width: 36px;
    height: 36px;
    background: #faf5e8;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    transition: background 0.15s ease;
}
.lcc-mg-cw__cell.is-in-word { background: #fff3c2; }
.lcc-mg-cw__cell.is-active  { background: #ffd966; box-shadow: inset 0 0 0 2px var(--dore, #D4B16A); }
.lcc-mg-cw__cell.is-correct { background: #c8f7d0; }
.lcc-mg-cw__cell.is-wrong   { background: #f7c8c8; animation: shake 0.4s; }
.lcc-mg-cw__num {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 9px;
    font-weight: 700;
    color: #2a1f0c;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}
.lcc-mg-cw__cell input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #2a1f0c;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    padding: 0;
    outline: none;
    caret-color: transparent;
}
.lcc-mg-cw__clues {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
    max-width: 380px;
    flex: 1;
    min-width: 260px;
}
.lcc-mg-cw__cluescol h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--dore, #D4B16A);
    font-size: 15px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(212, 177, 106, 0.4);
    padding-bottom: 5px;
}
.lcc-mg-cw__cluescol ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lcc-mg-cw__cluescol li {
    padding: 5px 10px;
    margin: 2px 0;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #f5efe6;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    border-left: 3px solid transparent;
}
.lcc-mg-cw__cluescol li strong {
    color: var(--dore, #D4B16A);
    margin-right: 4px;
}
.lcc-mg-cw__cluescol li:hover {
    background: rgba(255, 255, 255, 0.06);
}
.lcc-mg-cw__cluescol li.is-active {
    background: rgba(212, 177, 106, 0.18);
    border-left-color: var(--dore, #D4B16A);
}
.lcc-mg-cw__actions {
    margin-top: 22px;
    display: flex;
    gap: 14px;
    justify-content: center;
}
@media (max-width: 900px) {
    .lcc-mg-cw__layout { gap: 14px; }
    .lcc-mg-cw__clues { max-width: none; width: 100%; }
}
@media (max-width: 480px) {
    .lcc-mg-cw__block,
    .lcc-mg-cw__cell { width: 28px; height: 28px; }
    .lcc-mg-cw__cell input { font-size: 16px; }
    .lcc-mg-cw__num { font-size: 8px; }
}
.lcc-mg-overlay.lcc-mg-success {
    animation: lccMgSuccess 1.2s ease;
}
@keyframes lccMgSuccess {
    0% { background: transparent; }
    40% { background: rgba(46, 204, 113, 0.3); }
    100% { background: transparent; }
}

/* Bandeau d'instruction (haut centre) */
.lcc-mg-instruction {
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.88);
    border: 1px solid rgba(212, 177, 106, 0.55);
    border-radius: 999px;
    padding: 10px 24px;
    color: #f5efe6;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    white-space: nowrap;
}
.lcc-mg-instruction strong {
    color: #f5efe6;
}
.lcc-mg-progress {
    color: #d4b16a;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 700;
}

/* Placeholder Mini-Jeu */
.lcc-vn-minigame {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.92);
    border: 2px solid rgba(212, 177, 106, 0.6);
    border-radius: 14px;
    padding: 32px 40px;
    text-align: center;
    max-width: 500px;
    backdrop-filter: blur(10px);
}
.lcc-vn-minigame-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: #d4b16a;
    margin: 0 0 16px;
}

/* === Tutoriel mini-jeu (overlay avant démarrage) === */
.lcc-mg-tutorial-backdrop {
    position: absolute;
    inset: 0;
    z-index: 28;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lcc-mg-tutorial-card {
    background: linear-gradient(180deg, #15141a, #0a0a12);
    border: 2px solid rgba(212, 177, 106, 0.7);
    border-radius: 14px;
    padding: 36px 44px;
    max-width: 540px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    color: #f5efe6;
    animation: lccBubbleIn 0.3s ease;
}
.lcc-mg-tutorial-icon {
    font-size: 64px;
    margin-bottom: 12px;
    line-height: 1;
}
.lcc-mg-tutorial-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: #d4b16a;
    margin: 0 0 16px;
}
.lcc-mg-tutorial-text {
    color: rgba(245, 239, 230, 0.9);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* === MINI-JEU 1 : LAMPES === */
.lcc-mg-lampe {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 3px solid rgba(245, 239, 230, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.2s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.lcc-mg-lampe.unlit {
    border-color: rgba(245, 239, 230, 0.4);
    color: rgba(245, 239, 230, 0.5);
    animation: lccLampeUnlit 1.5s ease-in-out infinite;
}
@keyframes lccLampeUnlit {
    0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.15); }
    50% { box-shadow: 0 0 30px rgba(255,255,255,0.4); }
}
.lcc-mg-lampe.unlit:hover {
    transform: translate(-50%, -50%) scale(1.15);
    border-color: #f1c40f;
    background: rgba(241, 196, 15, 0.2);
}
.lcc-mg-lampe.lit {
    border-color: #f39c12;
    background: radial-gradient(circle, rgba(241, 196, 15, 0.6), rgba(231, 126, 34, 0.3));
    box-shadow: 0 0 40px rgba(241, 196, 15, 0.8);
    cursor: default;
}
.lcc-mg-lampe.just-lit {
    animation: lccLampeJustLit 0.6s ease;
}
@keyframes lccLampeJustLit {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 60px rgba(241, 196, 15, 1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* === MINI-JEU 2 : COMMANDES === */
.lcc-mg-cmd-card {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 22, 0.95);
    border: 2px solid rgba(212, 177, 106, 0.6);
    border-radius: 12px;
    padding: 18px 26px;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
}
.lcc-mg-cmd-title {
    color: #d4b16a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    font-weight: 700;
}
.lcc-mg-cmd-list {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 12px;
}
.lcc-mg-cmd-item {
    width: 56px; height: 56px;
    border-radius: 8px;
    border: 2px dashed rgba(245, 239, 230, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}
.lcc-mg-cmd-item.filled {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.2);
    border-style: solid;
}
.lcc-mg-cmd-item.wrong {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.3);
    animation: lccShake 0.4s;
}
@keyframes lccShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.lcc-mg-cmd-reset {
    background: transparent;
    border: 1px solid rgba(245, 239, 230, 0.3);
    color: rgba(245, 239, 230, 0.7);
    padding: 4px 12px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}
.lcc-mg-cmd-reset:hover {
    border-color: #d4b16a;
    color: #d4b16a;
}
.lcc-mg-stall {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 15, 22, 0.92);
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 12px;
    padding: 18px 24px;
    backdrop-filter: blur(10px);
}
.lcc-mg-stall-title {
    text-align: center;
    color: #d4b16a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    font-weight: 700;
}
.lcc-mg-stall-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.lcc-mg-legume {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(245, 239, 230, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #f5efe6;
    font-family: inherit;
}
.lcc-mg-legume:hover {
    background: rgba(212, 177, 106, 0.2);
    border-color: #d4b16a;
    transform: translateY(-2px);
}
.lcc-mg-legume:active {
    transform: scale(0.95);
}
.lcc-mg-legume-icon {
    font-size: 36px;
    line-height: 1;
}
.lcc-mg-legume-name {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === MINI-JEU 3 : TRI DES FILS === */
.lcc-mg-fils-zone {
    position: absolute;
    /* Zone de jeu : sous le bandeau d'instruction (top 150) et au-dessus
       des paniers (qui font ~140px de haut + 30px de bottom = ~180px).
       On laisse 200px en bas pour être tranquille. */
    inset: 150px 4% 220px 4%;
    pointer-events: auto;
}
.lcc-mg-fil {
    position: absolute;
    width: 70px;
    height: 12px;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.5);
    cursor: grab;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    pointer-events: auto;
}
.lcc-mg-fil:active { cursor: grabbing; }
.lcc-mg-fil:hover {
    filter: brightness(1.2);
    transform: scale(1.1) rotate(0);
    z-index: 5;
}
.lcc-mg-fil:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}
.lcc-mg-fil.selected {
    box-shadow: 0 0 20px 4px rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.5);
    transform: scale(1.2);
    z-index: 10;
}
/* v0.14 : feedback visuel pendant le drag (fil semi-transparent + pas
   d'autres événements pendant qu'il glisse). */
.lcc-mg-fil.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
    z-index: 20;
}
.lcc-mg-paniers {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
    background: rgba(15, 15, 22, 0.92);
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 12px;
    padding: 14px 18px;
    backdrop-filter: blur(10px);
}
.lcc-mg-panier {
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--c, #888);
    border-radius: 10px;
    padding: 14px 18px;
    color: #f5efe6;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}
.lcc-mg-panier:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-3px);
}
/* v0.14 : drop zone active quand on survole avec un fil — gros highlight
   à la couleur du panier pour signaler clairement où on peut lâcher. */
.lcc-mg-panier.is-over {
    background: var(--c, rgba(255, 255, 255, 0.18));
    border-width: 3px;
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 0 24px var(--c, rgba(255, 255, 255, 0.4));
}
.lcc-mg-panier-icon {
    font-size: 28px;
    filter: drop-shadow(0 0 8px var(--c, transparent));
}
.lcc-mg-panier-name {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c, #f5efe6);
    font-weight: 700;
}
.lcc-mg-panier.flash-ok {
    background: rgba(46, 204, 113, 0.4);
    border-color: #2ecc71;
}
.lcc-mg-panier.flash-bad {
    background: rgba(231, 76, 60, 0.4);
    border-color: #e74c3c;
    animation: lccShake 0.4s;
}

/* === MINI-JEUX TRÉSOR CACHÉ === */

/* MJ4 — Recette du rhum */
.lcc-mg-recipes {
    position: absolute;
    top: 90px;
    left: 20px;
    background: rgba(15, 15, 22, 0.92);
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 10px;
    padding: 14px 18px;
    max-width: 280px;
    color: #f5efe6;
    font-size: 13px;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.lcc-mg-recipes-title {
    color: #d4b16a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    margin-bottom: 8px;
}
.lcc-mg-recipe {
    padding: 4px 0;
    border-top: 1px solid rgba(212, 177, 106, 0.15);
    font-size: 12px;
    color: rgba(245, 239, 230, 0.75);
}
.lcc-mg-recipe-rum {
    color: #f1c40f;
    border-color: rgba(241, 196, 15, 0.4);
}
.lcc-mg-cauldron {
    position: absolute;
    top: 180px;
    right: 30px;
    background: rgba(0, 0, 0, 0.7);
    border: 3px solid rgba(212, 177, 106, 0.6);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* v0.14 : drop zone */
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.lcc-mg-cauldron-icon { font-size: 56px; transition: transform 0.2s ease; }
.lcc-mg-cauldron-label {
    color: #d4b16a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
/* Drop zone active : on agrandit + halo doré quand on survole avec un ingrédient */
.lcc-mg-cauldron.is-over {
    border-color: #d4b16a;
    background: rgba(212, 177, 106, 0.25);
    transform: scale(1.12);
    box-shadow: 0 0 32px rgba(212, 177, 106, 0.7);
}
.lcc-mg-cauldron.is-over .lcc-mg-cauldron-icon { transform: rotate(-8deg) scale(1.1); }
/* Bulle qui sort du chaudron quand on lâche un BON ingrédient */
.lcc-mg-cauldron.cauldron-bubble {
    animation: lcc-cauldron-bubble 0.6s ease;
}
@keyframes lcc-cauldron-bubble {
    0%   { transform: scale(1); box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
    40%  { transform: scale(1.18); box-shadow: 0 0 32px rgba(46, 204, 113, 0.8); border-color: #2ecc71; }
    100% { transform: scale(1); box-shadow: 0 0 0 rgba(46, 204, 113, 0); }
}
/* Rejet d'un MAUVAIS ingrédient (shake + halo rouge) */
.lcc-mg-cauldron.cauldron-reject {
    animation: lcc-cauldron-reject 0.5s ease;
}
@keyframes lcc-cauldron-reject {
    0%, 100% { transform: translateX(0); border-color: rgba(212, 177, 106, 0.6); }
    20%      { transform: translateX(-8px); border-color: #e74c3c; box-shadow: 0 0 24px rgba(231, 76, 60, 0.7); }
    60%      { transform: translateX(8px); }
}
/* État dragging sur ingrédient (cohérent avec le scrabble/ADN) */
.lcc-mg-ingredient[draggable="true"] { cursor: grab; }
.lcc-mg-ingredient[draggable="true"]:active { cursor: grabbing; }
.lcc-mg-ingredient.is-dragging { opacity: 0.4; }
.lcc-mg-grid-8 { grid-template-columns: repeat(4, 1fr); }
.lcc-mg-ingredient {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(245, 239, 230, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #f5efe6;
    font-family: inherit;
}
.lcc-mg-ingredient:hover {
    background: rgba(212, 177, 106, 0.2);
    border-color: #d4b16a;
    transform: translateY(-2px);
}
.lcc-mg-ingredient-icon { font-size: 36px; line-height: 1; }
.lcc-mg-ingredient-name { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.lcc-mg-ingredient.used {
    opacity: 0.4;
    cursor: not-allowed;
}
.lcc-mg-ingredient.flash-ok {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.3);
}
.lcc-mg-ingredient.flash-bad {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.3);
    animation: lccShake 0.4s;
}

/* MJ5 — Drapeau pirate */
.lcc-mg-mot {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(15, 15, 22, 0.85);
    border: 2px solid rgba(212, 177, 106, 0.45);
    color: #f5efe6;
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: 1.5px;
}
.lcc-mg-mot:hover {
    background: rgba(212, 177, 106, 0.25);
    border-color: #d4b16a;
    transform: translate(-50%, -50%) scale(1.1);
}
.lcc-mg-mot.found {
    background: rgba(46, 204, 113, 0.4);
    border-color: #2ecc71;
    color: #fff;
    cursor: default;
}
.lcc-mg-mot.wrong {
    background: rgba(231, 76, 60, 0.4);
    border-color: #e74c3c;
    color: #fff;
    cursor: default;
    text-decoration: line-through;
}
.lcc-mg-drapeaux {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    background: rgba(15, 15, 22, 0.92);
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 12px;
    padding: 18px 22px;
    max-width: 600px;
}
.lcc-mg-drapeau {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(245, 239, 230, 0.2);
    border-radius: 8px;
    padding: 14px 18px;
    color: #f5efe6;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.lcc-mg-drapeau:hover {
    background: rgba(212, 177, 106, 0.15);
    border-color: #d4b16a;
}
.lcc-mg-drapeau-emoji { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.lcc-mg-drapeau-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.lcc-mg-drapeau.flash-ok {
    background: rgba(46, 204, 113, 0.4);
    border-color: #2ecc71;
}
.lcc-mg-drapeau.flash-bad {
    background: rgba(231, 76, 60, 0.4);
    border-color: #e74c3c;
    animation: lccShake 0.4s;
}

/* MJ6 — Quiz du trésor */
.lcc-mg-quiz-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #15141a, #0a0a12);
    border: 2px solid rgba(155, 89, 182, 0.7);
    border-radius: 14px;
    padding: 30px 40px;
    max-width: 700px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    color: #f5efe6;
}
.lcc-mg-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(155, 89, 182, 0.4);
}
.lcc-mg-quiz-progress {
    color: rgba(245, 239, 230, 0.7);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.lcc-mg-quiz-lives {
    font-size: 22px;
    letter-spacing: 4px;
}
.lcc-mg-quiz-question {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 24px;
    color: #f5efe6;
}
.lcc-mg-quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lcc-mg-quiz-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(155, 89, 182, 0.3);
    border-radius: 8px;
    color: #f5efe6;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.lcc-mg-quiz-choice:hover {
    background: rgba(155, 89, 182, 0.2);
    border-color: #9b59b6;
}
.lcc-mg-quiz-letter {
    background: rgba(155, 89, 182, 0.4);
    color: #fff;
    font-weight: 700;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    flex-shrink: 0;
}
.lcc-mg-quiz-choice.flash-ok {
    background: rgba(46, 204, 113, 0.4);
    border-color: #2ecc71;
}
.lcc-mg-quiz-choice.flash-bad {
    background: rgba(231, 76, 60, 0.4);
    border-color: #e74c3c;
    animation: lccShake 0.4s;
}

/* === Modale d'avertissement (boulangerie sans 3 écus) === */
.lcc-vn-warning-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: lccFadeIn 0.2s ease;
}
@keyframes lccFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lcc-vn-warning-card {
    background: linear-gradient(180deg, #2a1810, #1a0f08);
    border: 2px solid #e67e22;
    border-radius: 14px;
    padding: 36px 44px;
    max-width: 500px;
    text-align: center;
    color: #f5efe6;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.lcc-vn-warning-icon {
    font-size: 60px;
    margin-bottom: 12px;
}
.lcc-vn-warning-card h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: #e67e22;
    margin: 0 0 16px;
}
.lcc-vn-warning-card p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
}
.lcc-vn-warning-card strong {
    color: #f1c40f;
}
.lcc-vn-warning-card .lcc-vn-btn {
    margin-top: 16px;
}

/* ============================================
   PARAMÈTRES (modale)
   ============================================ */
.lcc-vn-settings-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lcc-vn-settings-modal[hidden] {
    display: none;
}
.lcc-vn-settings-card {
    background: linear-gradient(180deg, #15141a, #0a0a12);
    border: 2px solid rgba(212, 177, 106, 0.6);
    border-radius: 14px;
    padding: 36px 44px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.lcc-vn-settings-card h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: #d4b16a;
    margin: 0 0 24px;
    text-align: center;
}
.lcc-vn-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(212, 177, 106, 0.06);
    border: 1px solid rgba(212, 177, 106, 0.14);
    color: #f5efe6;
}
.lcc-vn-setting > span {
    font-size: 14px;
    font-weight: 500;
    flex: 1 1 auto; /* label prend l'espace, contrôle aligné à droite */
}

/* v0.88 — Réglages « segmentés » (Taille / Vitesse du texte) en pleine largeur :
   label sur sa propre ligne, boutons répartis également en dessous. Évite le
   débordement/retour à la ligne disgracieux des 4 boutons « Vitesse » et rend
   les deux réglages parfaitement cohérents. */
.lcc-vn-setting--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.lcc-vn-setting--stack > span {
    flex: 0 0 auto;
}
.lcc-vn-setting--stack .lcc-vn-segmented {
    width: 100%;
    flex-wrap: nowrap;
}
.lcc-vn-setting--stack .lcc-vn-seg-btn {
    flex: 1 1 0;
    text-align: center;
    white-space: nowrap;
    padding: 8px 6px;
}
/* v0.29 — selects à fort contraste : appearance:none + chevron custom + couleurs
   forcées pour que le texte reste lisible (l'ancien rendu sortait en sombre). */
.lcc-vn-setting select {
    min-width: 152px;
    /* v0.29 : color-scheme dark → le navigateur rend la liste déroulante
       native (les <option>) en mode sombre, texte clair lisible garanti. */
    color-scheme: dark;
    background-color: #15141a;
    border: 1px solid rgba(212, 177, 106, 0.55);
    color: #f8f3e9 !important;
    padding: 9px 34px 9px 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d4b16a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
}
.lcc-vn-setting select:hover,
.lcc-vn-setting select:focus-visible {
    border-color: #d4b16a;
    outline: none;
}
.lcc-vn-setting select option {
    background: #15141a;
    color: #f8f3e9;
}
.lcc-vn-setting input[type="checkbox"] {
    width: 24px; height: 24px;
    accent-color: #d4b16a;
    cursor: pointer;
}
/* v0.29.2 — Boutons segmentés : remplacent les <select> natifs Taille/Vitesse
   du texte (la liste déroulante native restait illisible sur macOS/Windows).
   Contraste 100% maîtrisé, aucune dépendance au rendu OS. */
.lcc-vn-segmented {
    display: flex;
    gap: 4px;
    background: #100d1c;
    border: 1px solid rgba(212, 177, 106, 0.45);
    border-radius: 9px;
    padding: 3px;
    flex-wrap: wrap;
}
.lcc-vn-seg-btn {
    border: none;
    background: transparent;
    color: #cfc8dc;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lcc-vn-seg-btn:hover { color: #f8f3e9; background: rgba(212, 177, 106, 0.12); }
.lcc-vn-seg-btn.is-active {
    background: linear-gradient(135deg, #E6C77E, #C49A45);
    color: #15120a;
}

/* v0.29 — Bannière de rappel de pause, bien visible en haut de l'écran de jeu */
.lcc-vn-pause-banner {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate(-50%, -170%);
    z-index: 210;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(92%, 560px);
    padding: 13px 15px 13px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1d1b15, #14120d);
    border: 1.5px solid rgba(212, 177, 106, 0.7);
    box-shadow: 0 16px 46px rgba(0,0,0,0.62);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(.2,.9,.3,1.15), opacity 0.36s ease;
}
.lcc-vn-pause-banner.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}
.lcc-vn-pause-banner-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.lcc-vn-pause-banner-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.4;
}
.lcc-vn-pause-banner-body strong { color: #e6c77e; font-size: 14.5px; font-weight: 700; }
.lcc-vn-pause-banner-body span  { color: #d9d1c3; font-size: 13px; }
.lcc-vn-pause-banner-close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(212, 177, 106, 0.4);
    background: rgba(0,0,0,0.3);
    color: #d4b16a;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
}
.lcc-vn-pause-banner-close:hover { background: rgba(212, 177, 106, 0.2); }
.lcc-vn-settings-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

/* v0.14.3 — Sélecteur de langue custom avec drapeaux SVG */
.lcc-vn-lang-picker {
    position: relative;
}
.lcc-vn-lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(212, 177, 106, 0.4);
    background: rgba(0, 0, 0, 0.4);
    color: #f5efe6;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.18s ease;
    min-width: 160px;
}
.lcc-vn-lang-trigger:hover {
    background: rgba(212, 177, 106, 0.18);
    border-color: #d4b16a;
}
.lcc-vn-lang-picker.is-open .lcc-vn-lang-trigger {
    background: rgba(212, 177, 106, 0.2);
    border-color: #d4b16a;
}
.lcc-vn-lang-trigger svg {
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.75;
}
.lcc-vn-lang-picker.is-open .lcc-vn-lang-trigger svg {
    transform: rotate(180deg);
}
.lcc-vn-lang-flag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    display: inline-block;
}
.lcc-vn-lang-name {
    font-weight: 500;
}
/* Le menu déroulant : positionné au-dessus du trigger pour éviter d'être
   coupé par le bord du modal Settings (qui scroll si trop haut). */
.lcc-vn-lang-menu[hidden] { display: none !important; }
.lcc-vn-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    min-width: 220px;
    background: rgba(15, 25, 40, 0.98);
    border: 1px solid rgba(212, 177, 106, 0.5);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 320px;
    overflow-y: auto;
    animation: lcc-vn-lang-menu-in 0.18s ease-out;
    transform-origin: top right;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@keyframes lcc-vn-lang-menu-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lcc-vn-lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #f5efe6;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
    width: 100%;
}
.lcc-vn-lang-option:hover {
    background: rgba(212, 177, 106, 0.18);
}
.lcc-vn-lang-option.is-current {
    background: rgba(212, 177, 106, 0.14);
    color: #d4b16a;
    font-weight: 600;
}
.lcc-vn-lang-check {
    margin-left: auto;
    color: #d4b16a;
    font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
    .lcc-vn-lang-menu { animation: none; }
}

/* ============================================
   FIN DE PARTIE
   ============================================ */
.lcc-vn-ending {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-vn-ending-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.95));
    padding: 60px 80px;
    border-radius: 16px;
    text-align: center;
    border: 2px solid rgba(212, 177, 106, 0.5);
    backdrop-filter: blur(10px);
    max-width: 600px;
}
.lcc-vn-ending-positive .lcc-vn-ending-overlay {
    border-color: #2ecc71;
}
.lcc-vn-ending-negative .lcc-vn-ending-overlay {
    border-color: #e74c3c;
}
.lcc-vn-ending-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    margin: 0 0 16px;
}
.lcc-vn-ending-positive .lcc-vn-ending-title { color: #2ecc71; }
.lcc-vn-ending-negative .lcc-vn-ending-title { color: #e74c3c; }
.lcc-vn-ending-text {
    color: rgba(245, 239, 230, 0.9);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 32px;
}
.lcc-vn-ending-stats {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(212, 177, 106, 0.3);
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 32px;
    color: #f5efe6;
    font-size: 15px;
    text-align: left;
}
.lcc-vn-ending-stats > div {
    margin-bottom: 8px;
}
.lcc-vn-ending-stats strong {
    color: #d4b16a;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
}
.lcc-vn-ending-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .lcc-vn-bubble { width: 90%; min-width: 0; }
    .lcc-vn-choices { width: 90%; }
    .lcc-vn-tasks-panel { display: none; }
    .lcc-vn-map-pin { padding: 6px 10px; font-size: 11px; }
    .lcc-vn-pin-label { display: none; }
}

/* v0.73 — Retour Benjamin : sur iPhone en mode paysage (932 / 852 / 812 px de
   large), le panel TÂCHES (min-width 280 / max-width 360) prenait ~30 % de la
   largeur et masquait la bulle de dialogue à droite. Le breakpoint mobile
   d'origine était à 768 px, ce qui laissait passer tous les téléphones en
   paysage. On étend la dissimulation jusqu'à 1023 px (tablette portrait
   incluse). Une future itération pourrait remplacer la dissimulation par
   un panneau collapsable avec un bouton « 📋 Tâches » dans le HUD bas-gauche. */
@media (max-width: 1023px) {
    .lcc-vn-tasks-panel { display: none; }
}
/* Sur tablette landscape et plus (≥ 1024 px), le panneau reprend sa place
   normale en haut-droite, comme prévu pour les écrans larges. */

/* ============================================
   v0.74 — MODAL « AJOUTER À L'ÉCRAN D'ACCUEIL » iOS
   Affiché quand l'utilisateur clique « Activer le plein écran » sur Safari
   iOS (où requestFullscreen n'existe pas). Explique en 3 étapes comment
   installer la PWA pour obtenir un vrai plein écran natif.
   ============================================ */
#lcc-ios-fs-prompt {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: rgba(5, 10, 24, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: lcc-ios-fs-fade 0.25s ease;
}
@keyframes lcc-ios-fs-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#lcc-ios-fs-prompt.is-fading { opacity: 0; transition: opacity 0.25s ease; }
.lcc-ios-fs-card {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(135deg, #1a2848 0%, #0a1124 100%);
    border: 1px solid rgba(212, 177, 106, 0.4);
    border-radius: 16px;
    padding: 28px 26px 24px;
    color: #F5EFE6;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: lcc-ios-fs-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lcc-ios-fs-pop {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.lcc-ios-fs-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    color: #F5EFE6;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-ios-fs-close:hover { background: rgba(255, 255, 255, 0.16); }
.lcc-ios-fs-icon {
    text-align: center;
    font-size: 44px;
    margin-bottom: 8px;
}
.lcc-ios-fs-card h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: #D4B16A;
    text-align: center;
    margin: 0 0 12px;
}
.lcc-ios-fs-card p {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(245, 239, 230, 0.85);
    text-align: center;
    margin: 0 0 18px;
}
.lcc-ios-fs-steps {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    counter-reset: step;
}
.lcc-ios-fs-steps li {
    counter-increment: step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(212, 177, 106, 0.08);
    border-left: 3px solid #D4B16A;
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.45;
}
.lcc-ios-fs-steps li::before {
    content: counter(step);
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #D4B16A;
    color: #1a1408;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-ios-fs-step-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.2;
    width: 24px;
    text-align: center;
}
.lcc-ios-fs-ok {
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, #D4B16A 0%, #B8923D 100%);
    color: #1a1408;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}
.lcc-ios-fs-ok:hover { transform: translateY(-1px); }

/* ============================================
   ROTATE PROMPT — overlay "tourne ton téléphone"
   Visible UNIQUEMENT sur mobile en mode portrait.
   ============================================ */
.lcc-rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 10, 24, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #F2EBD9;
    padding: 24px;
    text-align: center;
}
.lcc-rotate-prompt__inner {
    max-width: 320px;
}
.lcc-rotate-prompt__icon {
    color: #D4B16A;
    animation: lccRotateWiggle 2.4s ease-in-out infinite;
    margin-bottom: 18px;
}
@keyframes lccRotateWiggle {
    0%, 70%, 100% { transform: rotate(0deg); }
    80% { transform: rotate(-12deg); }
    90% { transform: rotate(-90deg); }
}
.lcc-rotate-prompt__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 28px;
    color: #D4B16A;
    margin: 0 0 12px;
}
.lcc-rotate-prompt__text {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 24px;
    opacity: 0.85;
}
.lcc-rotate-prompt #lcc-rotate-fullscreen {
    margin: 0 auto;
    min-width: 220px;
}

/* Affichage : seulement quand on joue à un VN ET en portrait étroit */
@media (max-width: 900px) and (orientation: portrait) {
    body.lcc-playing-vn .lcc-rotate-prompt { display: flex; }
    /* Cache le reste du jeu en arrière-plan pour ne pas confondre */
    body.lcc-playing-vn #lcc-vn-root { visibility: hidden; }
}

/* ============================================
   Mobile (paysage) : ajustements TC
   ============================================ */
@media (max-width: 900px) {
    /* Sélecteur de joueurs : un peu plus compact */
    .lcc-vn-player-picker { margin-bottom: 18px; padding: 10px 14px; }
    .lcc-vn-player-btn { width: 38px; height: 38px; font-size: 14px; }
    .lcc-vn-player-picker__hint { font-size: 11px; }

    /* Indices : icônes un peu plus petites pour ne pas envahir le panneau */
    .lcc-vn-clue-icon { font-size: 16px; }
    .lcc-vn-clue-mark { font-size: 10px; }

    /* Zone d'oiseaux : 2 colonnes max */
    .lcc-bird-zone-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .lcc-bird-card-zone { font-size: 13px; }
    .lcc-bird-card-size { font-size: 11px; }

    /* Carte au trésor : labels hotspots toujours visibles (pas de hover sur tactile) */
    .lcc-tc-hotspot-label {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Bouton "Larguer les amarres" : plus compact mais bien visible */
    .lcc-vn-map-largue {
        bottom: 12px;
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* ============================================
   MINI-JEUX « COURSES DE LÉO » (éducatif maths)
   ============================================ */
.lcc-mg-courses {
    /* v0.29 — centrage explicite : .lcc-mg-overlay pose inset:0, mais avec
       width:92%/max-width:760px le panneau restait collé en haut-gauche.
       On repasse en absolute parfaitement centré. */
    position: absolute;
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 25, 40, 0.97);
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 16px;
    padding: 22px 28px;
    max-width: 760px;
    width: 92%;
    max-height: 88%;
    overflow-y: auto;
    color: #f5efe6;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.lcc-mg-courses__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--dore, #D4B16A);
}
.lcc-mg-courses__target {
    font-size: 18px;
    font-weight: 700;
    color: #f5efe6;
    margin: 4px 0 18px;
}
.lcc-mg-courses__counter {
    display: inline-block;
    padding: 8px 18px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: rgba(212, 177, 106, 0.12);
    border: 1px solid rgba(212, 177, 106, 0.35);
    font-weight: 700;
    font-size: 16px;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lcc-mg-courses__counter.is-ok {
    background: rgba(0, 200, 100, 0.20);
    border-color: rgba(0, 200, 100, 0.6);
    color: #b8f0c8;
}
.lcc-mg-courses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.lcc-mg-courses-card {
    background: rgba(245, 239, 230, 0.06);
    border: 2px solid rgba(212, 177, 106, 0.3);
    color: #f5efe6;
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    transition: all 0.2s ease;
    min-height: 90px;
    justify-content: center;
}
.lcc-mg-courses-card:hover {
    background: rgba(212, 177, 106, 0.15);
    transform: translateY(-2px);
    border-color: var(--dore, #D4B16A);
}
.lcc-mg-courses-card.is-selected {
    background: rgba(212, 177, 106, 0.30);
    border-color: var(--dore, #D4B16A);
    box-shadow: 0 0 0 3px rgba(212, 177, 106, 0.25);
    transform: translateY(-2px);
}
.lcc-mg-courses-card__icon {
    font-size: 28px;
    line-height: 1;
}
.lcc-mg-courses-card__label {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}
/* v0.67 — Pièces vs billets : différenciation par TEINTE BLEUTÉE neutre
   (l'ancien vert imitait l'état .is-selected et faisait croire que les
   billets étaient pré-cochés — confusion remontée par les testeurs). */
.lcc-mg-courses-card.is-bill {
    background: rgba(95, 130, 180, 0.10);
    border-color: rgba(95, 130, 180, 0.45);
}
.lcc-mg-courses-card.is-bill.is-selected {
    background: rgba(212, 177, 106, 0.30);
    border-color: var(--dore, #D4B16A);
}

@media (max-width: 768px) {
    .lcc-mg-courses { padding: 16px 14px; }
    .lcc-mg-courses__title { font-size: 18px; }
    .lcc-mg-courses__target { font-size: 16px; }
    .lcc-mg-courses__grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .lcc-mg-courses-card { padding: 10px 6px; min-height: 72px; }
    .lcc-mg-courses-card__icon { font-size: 22px; }
    .lcc-mg-courses-card__label { font-size: 13px; }
}

/* ============================================
   MINI-JEU « LE MULOTAGE » (Biologiste — renard roux) — v0.29
   ============================================ */
.lcc-mg-overlay.lcc-mg-mulot {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-mg-mulot__card {
    background: linear-gradient(180deg, rgba(28,34,46,0.97), rgba(16,20,28,0.97));
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 18px;
    padding: 24px 30px 30px;
    max-width: 680px;
    width: 92%;
    color: #f5efe6;
    text-align: center;
    box-shadow: 0 16px 50px rgba(0,0,0,0.65);
}
.lcc-mg-mulot__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--dore, #D4B16A);
    margin-bottom: 8px;
}
.lcc-mg-mulot__hint {
    font-size: 14.5px;
    line-height: 1.55;
    color: #d9d2c4;
    margin: 0 auto 14px;
    max-width: 520px;
}
.lcc-mg-mulot__hint strong { color: #e6c77e; }
.lcc-mg-mulot__score {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 24px;
    margin-bottom: 18px;
}
.lcc-mg-mulot-paw { filter: grayscale(1) opacity(0.35); transition: filter 0.3s ease, transform 0.3s ease; }
.lcc-mg-mulot-paw.is-on { filter: none; transform: scale(1.15); }
.lcc-mg-mulot__field {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    background: linear-gradient(180deg, #dfeaf2, #c5d6e4);
    border-radius: 14px;
    padding: 22px 18px;
}
.lcc-mg-mulot-mound {
    position: relative;
    aspect-ratio: 1 / 1;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.lcc-mg-mulot-hump {
    width: 88%;
    height: 64%;
    border-radius: 50% 50% 42% 42% / 70% 70% 30% 30%;
    background: radial-gradient(ellipse at 40% 30%, #ffffff, #d7e3ec 70%, #b9cad8);
    box-shadow: inset 0 -6px 12px rgba(120,140,160,0.35), 0 4px 8px rgba(0,0,0,0.18);
    transition: transform 0.15s ease;
}
.lcc-mg-mulot-mound:hover .lcc-mg-mulot-hump { transform: translateY(-3px) scale(1.04); }
.lcc-mg-mulot-mound.is-rustling .lcc-mg-mulot-hump {
    animation: lccMulotRustle 0.5s ease-in-out infinite;
}
@keyframes lccMulotRustle {
    0%,100% { transform: translateX(0) rotate(0); }
    25%     { transform: translateX(-2px) rotate(-1.5deg); }
    75%     { transform: translateX(2px) rotate(1.5deg); }
}
.lcc-mg-mulot-mound.is-caught .lcc-mg-mulot-hump {
    background: radial-gradient(ellipse at 40% 30%, #bff0cf, #6fce97 75%);
}
.lcc-mg-mulot-mound.is-caught::after {
    content: '🐭';
    position: absolute;
    top: 4%;
    font-size: 30px;
    animation: lccMulotPop 0.5s cubic-bezier(.2,.9,.3,1.5) both;
}
.lcc-mg-mulot-mound.is-missed .lcc-mg-mulot-hump {
    background: radial-gradient(ellipse at 40% 30%, #f3c4c4, #d98686 75%);
}
.lcc-mg-mulot-mound.is-reveal::after {
    content: '🐭';
    position: absolute;
    top: 4%;
    font-size: 28px;
    opacity: 0.85;
    animation: lccMulotFlee 0.9s ease both;
}
@keyframes lccMulotPop  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes lccMulotFlee { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (max-width: 768px) {
    .lcc-mg-mulot__field { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 12px; }
    .lcc-mg-mulot__card  { padding: 18px 16px 22px; }
}

/* v0.29 — flash juste/faux des quiz (cours du Biologiste) */
.lcc-vn-quiz-fx {
    position: absolute;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: lccQuizFxBg 1.1s ease forwards;
}
.lcc-vn-quiz-fx--correct { background: radial-gradient(circle at 50% 44%, rgba(70,200,130,0.5), transparent 62%); }
.lcc-vn-quiz-fx--wrong   { background: radial-gradient(circle at 50% 44%, rgba(214,76,76,0.5), transparent 62%); }
@keyframes lccQuizFxBg { 0% { opacity: 0; } 16% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
.lcc-vn-quiz-fx-icon {
    font-size: 130px;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0,0,0,0.55);
    animation: lccQuizFxIcon 1.1s cubic-bezier(.2,.9,.3,1.35) forwards;
}
.lcc-vn-quiz-fx--correct .lcc-vn-quiz-fx-icon { color: #d8ffe6; }
.lcc-vn-quiz-fx--wrong   .lcc-vn-quiz-fx-icon { color: #ffdcdc; }
@keyframes lccQuizFxIcon {
    0%   { transform: scale(0.2);  opacity: 0; }
    26%  { transform: scale(1.18); opacity: 1; }
    62%  { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1);    opacity: 0; }
}

/* ============================================
   MINI-JEU « CADENAS À COMBINAISON » (escape rooms) — v0.30
   ============================================ */
.lcc-mg-lock__card {
    position: relative;
    background: linear-gradient(180deg, #2a2622, #18150f);
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 16px;
    padding: 42px 36px 30px;
    max-width: 560px;
    width: 92%;
    text-align: center;
    color: #f5efe6;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
    margin-top: 30px;
}
.lcc-mg-lock__shackle {
    position: absolute;
    top: -34px; left: 50%;
    width: 78px; height: 56px;
    transform: translateX(-50%);
    border: 11px solid #b9bcc4;
    border-bottom: none;
    border-radius: 40px 40px 0 0;
    box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.35);
}
.lcc-mg-lock__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 700;
    color: var(--dore, #D4B16A);
    margin-bottom: 8px;
}
.lcc-mg-lock__hint {
    font-size: 14px; line-height: 1.5;
    color: #d6cdbb;
    margin: 0 auto 20px; max-width: 420px;
}
.lcc-mg-lock__dials {
    display: flex; justify-content: center; gap: 12px;
    margin-bottom: 24px;
}
.lcc-mg-lock-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lcc-mg-lock-arrow {
    width: 52px; height: 30px;
    border: 1px solid rgba(212, 177, 106, 0.5);
    background: rgba(212, 177, 106, 0.1);
    color: var(--dore, #D4B16A);
    border-radius: 7px; cursor: pointer;
    font-size: 13px; line-height: 1;
    transition: background 0.15s ease, transform 0.1s ease;
}
.lcc-mg-lock-arrow:hover  { background: rgba(212, 177, 106, 0.28); }
.lcc-mg-lock-arrow:active { transform: scale(0.92); }
.lcc-mg-lock-digit {
    width: 52px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 40px; font-weight: 700;
    color: #1a1410;
    background: linear-gradient(180deg, #f3e7c8, #cdb787);
    border-radius: 8px;
    box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.25), inset 0 4px 8px rgba(255, 255, 255, 0.5);
}
.lcc-mg-lock__actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lcc-mg-lock__card.is-shake { animation: lccLockShake 0.45s ease; }
@keyframes lccLockShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}
.lcc-mg-lock-digit.is-letter { font-size: 34px; }
@media (max-width: 768px) {
    .lcc-mg-lock-digit { width: 44px; height: 54px; font-size: 32px; }
    .lcc-mg-lock-digit.is-letter { font-size: 28px; }
    .lcc-mg-lock-arrow { width: 44px; }
    .lcc-mg-lock__card { padding: 36px 18px 24px; }
}

/* ============================================
   MINI-JEU « ORDRE » — remettre des éléments dans le bon ordre — v0.31
   ============================================ */
.lcc-mg-ordre__card {
    background: linear-gradient(180deg, #2a2622, #18150f);
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 16px;
    padding: 28px 30px;
    max-width: 660px;
    width: 92%;
    text-align: center;
    color: #f5efe6;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7);
}
.lcc-mg-ordre__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 700;
    color: var(--dore, #D4B16A);
    margin-bottom: 8px;
}
.lcc-mg-ordre__hint {
    font-size: 14px; line-height: 1.5;
    color: #d6cdbb;
    margin: 0 auto 18px; max-width: 480px;
}
.lcc-mg-ordre__items {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-bottom: 22px;
}
.lcc-mg-ordre-item {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px;
    border: 1px solid rgba(212, 177, 106, 0.4);
    background: rgba(212, 177, 106, 0.08);
    color: #f5efe6;
    border-radius: 9px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.lcc-mg-ordre-item:hover { background: rgba(212, 177, 106, 0.18); }
.lcc-mg-ordre-item.is-selected {
    background: rgba(212, 177, 106, 0.32);
    box-shadow: 0 0 0 2px var(--dore, #D4B16A);
    transform: translateY(-3px);
}
.lcc-mg-ordre-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.38);
    color: var(--dore, #D4B16A);
    font-size: 12px; flex-shrink: 0;
}
.lcc-mg-ordre__actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ============================================
   MINI-JEUX « COURS FOXL2 » — drag-drop pédagogique
   ============================================ */

/* ---- Scrabble FOXL2 (drag-drop) ---- */
.lcc-mg-foxl2 {
    background: rgba(15, 25, 40, 0.95);
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 720px;
    width: 92%;
    color: #f5efe6;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.lcc-mg-foxl2__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--dore, #D4B16A);
}
.lcc-mg-foxl2__hint {
    font-size: 13px;
    color: rgba(245,239,230,0.7);
    margin-bottom: 22px;
}
.lcc-mg-foxl2__progress-row {
    margin-bottom: 12px;
}
.lcc-mg-foxl2__progress {
    display: inline-block;
    background: rgba(212, 177, 106, 0.18);
    color: var(--dore, #D4B16A);
    border: 1px solid rgba(212, 177, 106, 0.5);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.lcc-mg-foxl2__slots {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 28px;
}
.lcc-mg-foxl2-slot {
    width: 80px;
    height: 80px;
    border: 2px dashed rgba(212, 177, 106, 0.6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.lcc-mg-foxl2-slot.is-over {
    background: rgba(212, 177, 106, 0.2);
    border-color: var(--dore, #D4B16A);
    border-style: solid;
}
.lcc-mg-foxl2-slot__placeholder {
    color: rgba(212, 177, 106, 0.4);
    font-size: 32px;
    font-weight: 700;
}
.lcc-mg-foxl2-tile {
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, #f5efe6, #e0d5b8);
    border: 2px solid var(--dore, #D4B16A);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    color: #2a1f0c;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.lcc-mg-foxl2-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.lcc-mg-foxl2-tile:active { cursor: grabbing; }
.lcc-mg-foxl2-tile.is-dragging { opacity: 0.4; }
.lcc-mg-foxl2-tile.is-selected {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px var(--dore, #D4B16A), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.lcc-mg-foxl2__pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    min-height: 90px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(212, 177, 106, 0.2);
    border-radius: 12px;
    margin-bottom: 22px;
    transition: background 0.2s ease;
}
.lcc-mg-foxl2__pool.is-over { background: rgba(212, 177, 106, 0.15); }

@media (max-width: 768px) {
    .lcc-mg-foxl2 { padding: 16px 14px; }
    .lcc-mg-foxl2__title { font-size: 18px; }
    .lcc-mg-foxl2__slots { gap: 8px; }
    .lcc-mg-foxl2-slot { width: 56px; height: 56px; }
    .lcc-mg-foxl2-tile { width: 50px; height: 50px; font-size: 26px; }
}

/* ---- ADN match v2 (drag-drop pour reconstruire la séquence) ---- */
.lcc-mg-adn__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--dore, #D4B16A);
}
.lcc-mg-adn__target-label {
    font-size: 13px;
    color: rgba(245,239,230,0.7);
    margin-bottom: 6px;
}
.lcc-mg-adn__target {
    font-family: 'Courier New', monospace;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 6px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 177, 106, 0.4);
    border-radius: 10px;
    margin-bottom: 18px;
}
.lcc-mg-adn__hint {
    font-size: 13px;
    color: rgba(245,239,230,0.75);
    margin-bottom: 14px;
}
.lcc-mg-adn__slots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.lcc-mg-adn-slot {
    width: 56px;
    height: 56px;
    border: 2px dashed rgba(212, 177, 106, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.lcc-mg-adn-slot.is-over {
    background: rgba(212, 177, 106, 0.18);
    border-color: var(--dore, #D4B16A);
    border-style: solid;
}
.lcc-mg-adn-slot.is-correct {
    border-color: rgba(0, 200, 100, 0.8);
    background: rgba(0, 200, 100, 0.18);
    border-style: solid;
}
.lcc-mg-adn-slot.is-wrong {
    border-color: rgba(231, 76, 60, 0.8);
    background: rgba(231, 76, 60, 0.2);
    border-style: solid;
    animation: shake 0.4s;
}
.lcc-mg-adn-slot__placeholder {
    color: rgba(212, 177, 106, 0.4);
    font-size: 26px;
    font-weight: 700;
}
.lcc-mg-adn-tile {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    cursor: grab;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lcc-mg-adn-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}
.lcc-mg-adn-tile:active { cursor: grabbing; }
.lcc-mg-adn-tile.is-dragging { opacity: 0.4; }
.lcc-mg-adn-tile.is-selected {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px var(--dore, #D4B16A), 0 6px 16px rgba(0, 0, 0, 0.5);
}
.lcc-mg-adn__pool {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 76px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(212, 177, 106, 0.2);
    border-radius: 12px;
    margin-bottom: 18px;
    transition: background 0.2s ease;
}
.lcc-mg-adn__pool.is-over { background: rgba(212, 177, 106, 0.15); }
.lcc-mg-adn-base { transition: color 0.2s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
@media (max-width: 768px) {
    .lcc-mg-adn__target { font-size: 22px; letter-spacing: 3px; padding: 10px; }
    .lcc-mg-adn__slots { gap: 6px; }
    .lcc-mg-adn-slot { width: 42px; height: 42px; }
    .lcc-mg-adn-tile { width: 38px; height: 38px; font-size: 20px; }
}

/* ============================================
   v0.15 — MINI-JEUX COURS TODESCHINI (B / C / D)
   ============================================ */

/* --- Cycle folliculaire (B) — drag tiles into 5 ordered slots --- */
.lcc-mg-cf__title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--dore, #D4B16A); margin-bottom: 8px; }
.lcc-mg-cf__hint { font-size: 13px; color: rgba(245, 239, 230, 0.75); margin-bottom: 18px; }
.lcc-mg-cf__slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}
.lcc-mg-cf-slot {
    border: 2px dashed rgba(212, 177, 106, 0.5);
    border-radius: 10px;
    min-height: 110px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.lcc-mg-cf-slot.is-over {
    background: rgba(212, 177, 106, 0.18);
    border-color: var(--dore, #D4B16A);
    border-style: solid;
}
.lcc-mg-cf-slot__num {
    font-weight: 700;
    color: var(--dore, #D4B16A);
    font-size: 18px;
    background: rgba(212, 177, 106, 0.18);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.lcc-mg-cf-slot__placeholder {
    color: rgba(245, 239, 230, 0.3);
    font-size: 22px;
    font-weight: 700;
}
.lcc-mg-cf-tile {
    background: rgba(212, 177, 106, 0.14);
    border: 1px solid rgba(212, 177, 106, 0.5);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: grab;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}
.lcc-mg-cf-tile:active { cursor: grabbing; }
.lcc-mg-cf-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.lcc-mg-cf-tile.is-dragging { opacity: 0.4; }
.lcc-mg-cf-tile.is-selected {
    box-shadow: 0 0 0 2px var(--dore, #D4B16A), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.lcc-mg-cf-tile__name {
    font-weight: 700;
    color: var(--dore, #D4B16A);
    font-size: 14px;
    margin-bottom: 4px;
}
.lcc-mg-cf-tile__desc {
    font-size: 11px;
    color: rgba(245, 239, 230, 0.85);
    line-height: 1.3;
}
.lcc-mg-cf__pool {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(212, 177, 106, 0.3);
    border-radius: 10px;
    margin-bottom: 18px;
    min-height: 90px;
    transition: background 0.18s ease;
}
.lcc-mg-cf__pool .lcc-mg-cf-tile { width: calc(20% - 8px); min-width: 130px; }
.lcc-mg-cf__pool.is-over { background: rgba(212, 177, 106, 0.12); }
@media (max-width: 768px) {
    .lcc-mg-cf__slots { grid-template-columns: repeat(2, 1fr); }
    .lcc-mg-cf__pool .lcc-mg-cf-tile { width: calc(50% - 8px); }
}

/* --- Mutation finder (C) --- */
.lcc-mg-mf__title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--dore, #D4B16A); margin-bottom: 8px; }
.lcc-mg-mf__hint { font-size: 13px; color: rgba(245, 239, 230, 0.75); margin-bottom: 18px; }
.lcc-mg-mf__seqlabel {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(212, 177, 106, 0.7);
    margin-top: 14px;
    margin-bottom: 4px;
    text-align: left;
}
.lcc-mg-mf__seq {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    letter-spacing: 4px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 177, 106, 0.3);
    border-radius: 8px;
    text-align: left;
    user-select: none;
}
.lcc-mg-mf-base {
    display: inline-block;
    padding: 2px 0;
    font-weight: 700;
}
.lcc-mg-mf-base--clickable {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 24px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    padding: 4px 4px;
    margin: 0;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.lcc-mg-mf-base--clickable:hover { background: rgba(212, 177, 106, 0.18); }
.lcc-mg-mf-base.is-correct {
    background: rgba(46, 204, 113, 0.4);
    color: #c8f7d0 !important;
    box-shadow: 0 0 0 2px #2ecc71;
}
.lcc-mg-mf-base.is-wrong {
    background: rgba(231, 76, 60, 0.3);
    animation: shake 0.4s;
}
.lcc-mg-mf__attempts {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(245, 239, 230, 0.75);
}

/* --- piRNA silencer (D) --- */
.lcc-mg-ps__title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--dore, #D4B16A); margin-bottom: 8px; }
.lcc-mg-ps__hint { font-size: 13px; color: rgba(245, 239, 230, 0.75); margin-bottom: 18px; }
.lcc-mg-ps__targets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}
.lcc-mg-ps-target {
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.18s ease;
}
.lcc-mg-ps-target.is-over {
    background: rgba(212, 177, 106, 0.18);
    border-color: var(--dore, #D4B16A);
    transform: scale(1.03);
}
.lcc-mg-ps-target.is-silenced {
    background: rgba(46, 204, 113, 0.18);
    border-color: #2ecc71;
}
.lcc-mg-ps-target.is-wrong {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    animation: shake 0.5s;
}
.lcc-mg-ps-target__label {
    font-weight: 700;
    color: var(--dore, #D4B16A);
    margin-bottom: 4px;
}
.lcc-mg-ps-target__seq {
    font-family: 'Courier New', monospace;
    font-size: 16px;
    letter-spacing: 2px;
    color: #f5efe6;
    margin-bottom: 6px;
}
.lcc-mg-ps-target__lock {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(245, 239, 230, 0.6);
}
.lcc-mg-ps-target.is-silenced .lcc-mg-ps-target__lock {
    color: #c8f7d0;
}
.lcc-mg-ps__poollabel {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(212, 177, 106, 0.7);
    margin-bottom: 6px;
    text-align: left;
}
.lcc-mg-ps__pool {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(212, 177, 106, 0.3);
    border-radius: 10px;
    margin-bottom: 18px;
    min-height: 80px;
}
.lcc-mg-ps-pirna {
    background: rgba(58, 143, 204, 0.18);
    border: 1px solid rgba(58, 143, 204, 0.6);
    border-radius: 8px;
    padding: 8px 12px;
    cursor: grab;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s ease;
}
.lcc-mg-ps-pirna:active { cursor: grabbing; }
.lcc-mg-ps-pirna:hover { transform: translateY(-2px); }
.lcc-mg-ps-pirna.is-dragging { opacity: 0.4; }
.lcc-mg-ps-pirna.is-selected {
    box-shadow: 0 0 0 2px var(--dore, #D4B16A);
}
.lcc-mg-ps-pirna__icon { font-size: 20px; }
.lcc-mg-ps-pirna__seq {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #c8e0f5;
}
.lcc-mg-ps__progress {
    font-size: 13px;
    color: rgba(245, 239, 230, 0.75);
}
@media (max-width: 768px) {
    .lcc-mg-ps__targets { grid-template-columns: 1fr; }
}

/* ============================================
   v0.16 — MINI-JEUX TODESCHINI #5–9 (MT / POI / BQ)
   ============================================ */

/* --- Pattern Multi-Target Match (AKT1 réseau, FOXL2 complexe, HP1 machinerie) --- */
.lcc-mg-mt__card {
    background: rgba(15, 12, 10, 0.92);
    border: 1px solid rgba(212, 177, 106, 0.35);
    border-radius: 14px;
    padding: 24px;
    max-width: 920px;
    width: 100%;
    color: #f5efe6;
    text-align: center;
}
.lcc-mg-mt__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--dore, #D4B16A);
    margin-bottom: 8px;
}
.lcc-mg-mt__hint {
    font-size: 13px;
    color: rgba(245, 239, 230, 0.75);
    margin-bottom: 12px;
}
.lcc-mg-mt__progress {
    font-size: 13px;
    color: rgba(245, 239, 230, 0.85);
    margin-bottom: 16px;
}
.lcc-mg-mt__layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
    align-items: stretch;
}
.lcc-mg-mt__center {
    border: 2px dashed rgba(212, 177, 106, 0.55);
    border-radius: 18px;
    padding: 22px 16px;
    background: radial-gradient(circle at center, rgba(212, 177, 106, 0.10), rgba(0, 0, 0, 0.35));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 320px;
    transition: all 0.18s ease;
}
.lcc-mg-mt__center.is-over {
    background: radial-gradient(circle at center, rgba(212, 177, 106, 0.28), rgba(0, 0, 0, 0.4));
    border-color: var(--dore, #D4B16A);
    transform: scale(1.02);
    box-shadow: 0 0 0 4px rgba(212, 177, 106, 0.18);
}
.lcc-mg-mt__center-icon {
    font-size: 42px;
    line-height: 1;
}
.lcc-mg-mt__center-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--dore, #D4B16A);
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
}
.lcc-mg-mt__orbits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}
.lcc-mg-mt-orbit {
    background: rgba(46, 204, 113, 0.18);
    border: 1px solid rgba(46, 204, 113, 0.55);
    border-radius: 999px;
    padding: 4px 10px;
}
.lcc-mg-mt-orbit__label {
    font-size: 11px;
    color: #c8f7d0;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lcc-mg-mt__pool {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-content: start;
    padding: 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px dashed rgba(212, 177, 106, 0.3);
    border-radius: 12px;
    min-height: 320px;
}
.lcc-mg-mt-piece {
    background: rgba(58, 143, 204, 0.16);
    border: 1px solid rgba(58, 143, 204, 0.55);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: grab;
    text-align: left;
    color: #f5efe6;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lcc-mg-mt-piece:active { cursor: grabbing; }
.lcc-mg-mt-piece:hover { transform: translateY(-2px); }
.lcc-mg-mt-piece.is-dragging { opacity: 0.4; }
.lcc-mg-mt-piece.is-selected {
    box-shadow: 0 0 0 2px var(--dore, #D4B16A);
    background: rgba(212, 177, 106, 0.18);
}
.lcc-mg-mt-piece__label {
    font-weight: 700;
    color: var(--dore, #D4B16A);
    margin-bottom: 4px;
    font-size: 14px;
}
.lcc-mg-mt-piece__desc {
    font-size: 12px;
    color: rgba(245, 239, 230, 0.75);
    line-height: 1.35;
}
.lcc-mg-mt__done {
    grid-column: 1 / -1;
    text-align: center;
    color: #c8f7d0;
    padding: 30px 0;
    font-style: italic;
}
@media (max-width: 768px) {
    .lcc-mg-mt__layout { grid-template-columns: 1fr; }
    .lcc-mg-mt__pool { grid-template-columns: 1fr; min-height: auto; }
    .lcc-mg-mt__center { min-height: 220px; }
}

/* --- POI panel (cours #7, checklist de variants) --- */
.lcc-mg-poi__card {
    background: rgba(15, 12, 10, 0.92);
    border: 1px solid rgba(212, 177, 106, 0.35);
    border-radius: 14px;
    padding: 24px;
    max-width: 760px;
    width: 100%;
    color: #f5efe6;
}
.lcc-mg-poi__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--dore, #D4B16A);
    margin-bottom: 8px;
    text-align: center;
}
.lcc-mg-poi__hint {
    font-size: 13px;
    color: rgba(245, 239, 230, 0.75);
    margin-bottom: 18px;
    text-align: center;
}
.lcc-mg-poi__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.lcc-mg-poi-item {
    appearance: none;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 177, 106, 0.35);
    border-radius: 10px;
    padding: 10px 12px;
    color: #f5efe6;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.lcc-mg-poi-item:hover {
    border-color: rgba(212, 177, 106, 0.7);
    background: rgba(212, 177, 106, 0.08);
}
.lcc-mg-poi-item.is-checked {
    background: rgba(212, 177, 106, 0.18);
    border-color: var(--dore, #D4B16A);
}
.lcc-mg-poi-item.valid-good {
    background: rgba(46, 204, 113, 0.20);
    border-color: #2ecc71;
    cursor: default;
}
.lcc-mg-poi-item.valid-bad-marker {
    background: rgba(231, 76, 60, 0.20);
    border-color: #e74c3c;
    cursor: default;
    animation: shake 0.5s;
}
.lcc-mg-poi-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.lcc-mg-poi-item__check {
    font-size: 16px;
    color: var(--dore, #D4B16A);
    width: 20px;
    text-align: center;
}
.lcc-mg-poi-item__variant {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: rgba(245, 239, 230, 0.85);
}
.lcc-mg-poi-item__desc {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(245, 239, 230, 0.75);
    font-style: italic;
    padding-left: 28px;
}
@media (max-width: 768px) {
    .lcc-mg-poi__list { grid-template-columns: 1fr; }
}

/* --- Bonus quiz vrai/faux (cours #9) --- */
.lcc-mg-bq__card {
    background: rgba(15, 12, 10, 0.92);
    border: 1px solid rgba(212, 177, 106, 0.35);
    border-radius: 14px;
    padding: 32px 28px;
    max-width: 600px;
    width: 100%;
    color: #f5efe6;
    text-align: center;
}
.lcc-mg-bq__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    color: var(--dore, #D4B16A);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
.lcc-mg-bq__question {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    line-height: 1.4;
    color: #f5efe6;
    margin-bottom: 28px;
    padding: 0 8px;
}
.lcc-mg-bq__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.lcc-mg-bq__actions .lcc-vn-btn {
    min-width: 140px;
    font-size: 16px;
    padding: 12px 20px;
}
.lcc-mg-bq-false {
    background: rgba(231, 76, 60, 0.18) !important;
    border-color: #e74c3c !important;
    color: #f5d3cc !important;
}
.lcc-mg-bq-false:hover {
    background: rgba(231, 76, 60, 0.32) !important;
}
.lcc-mg-bq__score {
    font-size: 18px;
    color: #f5efe6;
    margin: 18px 0 24px;
}
.lcc-mg-bq__score strong {
    color: var(--dore, #D4B16A);
    font-size: 22px;
}
@media (max-width: 768px) {
    .lcc-mg-bq__question { font-size: 18px; }
    .lcc-mg-bq__actions .lcc-vn-btn { min-width: 110px; font-size: 14px; }
}

/* =============================================================
   v0.32 — DOSAGE (recette du rhum) + FORGE (drapeau pirate)
   ============================================================= */

/* --- Dosage (Recette du Rhum) --- */
.lcc-mg-dose-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #f5efe6;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 4px;
}
.lcc-mg-dose-icon { font-size: 18px; }
.lcc-mg-dose-target {
    margin-left: auto;
    color: var(--dore, #D4B16A);
    font-weight: 700;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
}
.lcc-mg-dose-counters {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px 0 8px;
}
.lcc-mg-dose-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(212, 177, 106, 0.35);
    color: #f5efe6;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 13px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    transition: all 0.2s ease;
}
.lcc-mg-dose-counter.ok {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.22);
}
.lcc-mg-dose-counter.over {
    border-color: #f39c12;
    background: rgba(243, 156, 18, 0.18);
}
.lcc-mg-dose-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--dore, #D4B16A);
    color: #1a1408;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.lcc-mg-ingredient { position: relative; }
.lcc-mg-ingredient.is-wrong {
    border-color: #e74c3c;
    background: rgba(231, 76, 60, 0.18);
}
.lcc-mg-cauldron-fill {
    font-size: 11px;
    color: var(--dore, #D4B16A);
    margin-top: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.lcc-mg-distill-btn,
.lcc-mg-reset-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 2px solid var(--dore, #D4B16A);
    background: linear-gradient(180deg, #D4B16A 0%, #8b6914 100%);
    color: #1a1408;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.lcc-mg-distill-btn:hover:not([disabled]),
.lcc-mg-reset-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.lcc-mg-distill-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%);
    border-color: rgba(212, 177, 106, 0.2);
    color: rgba(255, 255, 255, 0.4);
}
.lcc-mg-reset-btn {
    background: rgba(0, 0, 0, 0.5);
    color: #f5efe6;
    border-color: rgba(245, 239, 230, 0.3);
}

/* --- Forge du drapeau pirate --- */
.lcc-mg-flag-forge {
    position: absolute;
    inset: 70px 4% 16px 4%;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 1fr auto;
    gap: 18px;
    pointer-events: auto;
}
.lcc-mg-flag-preview {
    position: relative;
    grid-row: 1 / span 2;
    border-radius: 8px;
    border: 4px solid rgba(212, 177, 106, 0.55);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: #2a2a2a;
    transition: background 0.4s ease, transform 0.4s ease;
}
.lcc-mg-flag-preview::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 6px; height: 100%;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.18) 0 12px, rgba(0,0,0,0.25) 12px 18px);
}
.lcc-mg-flag-slot {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-mg-flag-slot-symbol { position: absolute; inset: 0; }
.lcc-mg-flag-slot-accent {
    position: absolute;
    right: 12px;
    bottom: 10px;
}
.lcc-mg-flag-emoji-big {
    font-size: 140px;
    line-height: 1;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}
.lcc-mg-flag-emoji-accent {
    font-size: 56px;
    line-height: 1;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
}
.lcc-mg-flag-slot-hint {
    font-size: 110px;
    color: rgba(255, 255, 255, 0.18);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}
.lcc-mg-flag-preview.flash-bad { animation: lccShake 0.4s; box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.6), 0 12px 28px rgba(0, 0, 0, 0.5); }
.lcc-mg-flag-preview.lcc-mg-flag-hoisted { animation: lccFlagHoist 0.9s ease-out; }
@keyframes lccFlagHoist {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(-22px) scale(1.05); }
    100% { transform: translateY(-6px) scale(1.02); }
}

.lcc-mg-flag-palette {
    background: rgba(15, 15, 22, 0.86);
    border: 2px solid rgba(212, 177, 106, 0.45);
    border-radius: 10px;
    padding: 12px 14px;
    overflow-y: auto;
    max-height: 100%;
}
.lcc-mg-flag-palette-row { margin-bottom: 12px; }
.lcc-mg-flag-palette-row:last-child { margin-bottom: 0; }
.lcc-mg-flag-palette-label {
    color: var(--dore, #D4B16A);
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}
.lcc-mg-flag-palette-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.lcc-mg-flag-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    min-width: 76px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(245, 239, 230, 0.2);
    border-radius: 8px;
    color: #f5efe6;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.lcc-mg-flag-piece:hover:not([disabled]) {
    background: rgba(212, 177, 106, 0.18);
    border-color: var(--dore, #D4B16A);
    transform: translateY(-2px);
}
.lcc-mg-flag-piece.is-placed {
    background: rgba(46, 204, 113, 0.25);
    border-color: #2ecc71;
}
.lcc-mg-flag-piece[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
}
.lcc-mg-flag-piece-emoji { font-size: 28px; line-height: 1; }
.lcc-mg-flag-piece-name {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.lcc-mg-flag-actions {
    grid-column: 2;
    display: flex;
    gap: 10px;
}
.lcc-mg-flag-actions .lcc-mg-distill-btn,
.lcc-mg-flag-actions .lcc-mg-reset-btn { width: auto; margin-top: 0; flex: 1; }

/* Responsive mobile : empile preview / palette / boutons */
@media (max-width: 768px) {
    .lcc-mg-flag-forge {
        position: absolute;
        inset: 58px 8px 8px 8px;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 1fr auto;
        gap: 10px;
    }
    .lcc-mg-flag-preview { grid-row: auto; min-height: 200px; }
    .lcc-mg-flag-emoji-big { font-size: 96px; }
    .lcc-mg-flag-emoji-accent { font-size: 38px; }
    .lcc-mg-flag-actions { grid-column: 1; }
    .lcc-mg-flag-piece { min-width: 60px; padding: 6px 8px; }
    .lcc-mg-flag-piece-emoji { font-size: 22px; }
    .lcc-mg-flag-piece-name { font-size: 10px; }
    .lcc-mg-dose-counters { gap: 6px; }
    .lcc-mg-dose-counter { font-size: 12px; padding: 3px 8px; }
}

/* =============================================================
   v0.33 — CADENAS DIRECTIONNEL + BIBLIOTHÈQUE CLIQUABLE
   ============================================================= */

/* Cadenas directionnel — flèches ambrées sur la molette */
.lcc-mg-lock-arrow-dial {
    font-family: 'Cormorant Garamond', serif;
    font-size: 44px;
    line-height: 1;
    color: #6a3a12;
    background: linear-gradient(180deg, #f3e7c8, #d6b886);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
    .lcc-mg-lock-arrow-dial { font-size: 36px; }
}

/* Bibliothèque cliquable */
.lcc-mg-biblio {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lcc-mg-biblio__card {
    background: rgba(15, 15, 22, 0.92);
    border: 2px solid rgba(212, 177, 106, 0.5);
    border-radius: 12px;
    padding: 26px 28px;
    max-width: 760px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
}
.lcc-mg-biblio__title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--dore, #D4B16A);
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.lcc-mg-biblio__hint {
    font-size: 14px;
    color: #f5efe6;
    text-align: center;
    line-height: 1.5;
    margin: 0 0 18px;
    opacity: 0.92;
}
.lcc-mg-biblio__shelf {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding: 18px 14px 12px;
    background: linear-gradient(180deg, rgba(60, 35, 18, 0.55) 0%, rgba(30, 18, 8, 0.85) 100%);
    border-radius: 8px;
    border-bottom: 6px solid #2a1a0a;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
    min-height: 220px;
    flex-wrap: wrap;
}
.lcc-mg-book {
    --book-color: #7a3b1c;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-height: 200px;
    padding: 14px 6px;
    background: linear-gradient(180deg, var(--book-color) 0%, color-mix(in srgb, var(--book-color) 75%, #000) 100%);
    border: 2px solid rgba(0, 0, 0, 0.45);
    border-radius: 4px 4px 6px 6px;
    color: #f5efe6;
    font-family: 'Cormorant Garamond', serif;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset -3px 0 6px rgba(0, 0, 0, 0.35), inset 3px 0 6px rgba(255, 255, 255, 0.08);
}
.lcc-mg-book:hover:not([disabled]) {
    transform: translateY(-12px) rotate(-1deg);
    box-shadow: 0 14px 22px rgba(0, 0, 0, 0.6), inset -3px 0 6px rgba(0, 0, 0, 0.35), inset 3px 0 6px rgba(255, 255, 255, 0.12);
}
.lcc-mg-book::before {
    content: '';
    position: absolute;
    top: 12px; bottom: 12px;
    left: 6px; right: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    pointer-events: none;
}
.lcc-mg-book-spine {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    max-height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lcc-mg-book.is-wrong {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.lcc-mg-book.is-shake { animation: lccLockShake 0.45s ease; }
.lcc-mg-biblio__actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
@media (max-width: 768px) {
    .lcc-mg-biblio__card { padding: 18px 14px; }
    .lcc-mg-biblio__title { font-size: 18px; }
    .lcc-mg-biblio__hint { font-size: 13px; }
    .lcc-mg-biblio__shelf { gap: 8px; padding: 14px 10px 10px; min-height: 170px; }
    .lcc-mg-book { width: 44px; min-height: 160px; padding: 10px 4px; }
    .lcc-mg-book-spine { font-size: 12px; letter-spacing: 1px; }
}

/* =============================================================
   v0.34 — COURSES DE LÉO : actions polishing
   ============================================================= */
.lcc-mg-courses__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.lcc-mg-courses-reset {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #f5efe6 !important;
    border: 2px solid rgba(245, 239, 230, 0.35) !important;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.lcc-mg-courses-reset:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px);
}
@media (max-width: 768px) {
    .lcc-mg-courses__actions { gap: 8px; margin-top: 8px; }
    .lcc-mg-courses-reset { padding: 8px 12px; font-size: 13px; }
}

/* =============================================================
   v0.35 — Cours Todeschini : leurres dans MultiTargetMatch
   ============================================================= */
.lcc-mg-mt__decoys {
    color: #e8a93a;
    font-weight: 700;
    font-size: 13px;
}
.lcc-mg-mt-piece.is-rejected {
    border-color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.18) !important;
    animation: lccLockShake 0.5s ease;
    opacity: 0.85;
}
.lcc-mg-mt-piece.is-shake { animation: lccLockShake 0.45s ease; }

/* ==================================================================
   v1.05 — Phase 3a : UNIFORMISATION DES NOMS DE PERSONNAGE
   Retour Benjamin : "tailles incohérentes des NOMS de personnage dans
   la bulle → uniformiser". Avant : le même perso pouvait avoir des
   tailles très différentes selon le contexte (bulle de dialogue =
   22px Cormorant ; question à choix = 12px uppercase letter-spacing).
   → On aligne tout sur le style Cormorant Garamond, sans uppercase.
   ================================================================== */
.lcc-vn-bubble-name {
    /* Garde-fou : pas de wrap, ellipsis si débordement extrême */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.lcc-vn-choices-question-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Mode staged (in-game immersif) : on aligne la question-name sur le
   bubble-name staged (13px), pour qu'un même perso garde EXACTEMENT
   la même taille visuelle entre sa ligne de dialogue et sa question. */
.lcc-vn-staged .lcc-vn-choices-question-name {
    /* v1.08 — Aligné sur la nouvelle taille du bubble-name staged (16px). */
    font-size: 16px !important;
    margin-bottom: 5px !important;
    font-weight: 700;
}
/* Paysage mobile très court : aligner sur 11.5px comme bubble-name */
@media (orientation: landscape) and (max-height: 520px) {
    .lcc-vn-staged .lcc-vn-choices-question-name {
        font-size: 11.5px !important;
        margin-bottom: 3px !important;
    }
}
/* Cours_quentin / Léo : même règle de marge réduite */
.lcc-vn-game-cours_quentin.lcc-vn-staged .lcc-vn-choices-question-name,
.lcc-vn-game-cours_roussette.lcc-vn-staged .lcc-vn-choices-question-name,
.lcc-vn-game-cl.lcc-vn-staged .lcc-vn-choices-question-name {
    margin-bottom: 3px !important;
}

/* ==================================================================
   v1.05 — Phase 3b : REFONTE ICÔNE PARAMÈTRES + BOUTON SKIP
   Les emojis ⚙ et ⏭ Skip remplacés par des SVG inline (rendu net
   partout, pas d'aléa Twemoji/police système). Hover : rotation de
   l'engrenage, scale sur le skip. Cible tactile garantie 44×44.
   ================================================================== */
.lcc-vn-hud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lcc-vn-hud-btn-settings .lcc-vn-svg-gear {
    transition: transform 0.45s cubic-bezier(.5,0,.3,1);
}
.lcc-vn-hud-btn-settings:hover .lcc-vn-svg-gear,
.lcc-vn-hud-btn-settings:focus-visible .lcc-vn-svg-gear {
    transform: rotate(60deg);
}
.lcc-vn-hud-btn-settings:active .lcc-vn-svg-gear {
    transform: rotate(120deg);
}
.lcc-vn-hud-btn-skip {
    gap: 6px;
}
.lcc-vn-hud-btn-skip .lcc-vn-svg-skip {
    opacity: 0.9;
    transition: transform 0.2s ease;
}
.lcc-vn-hud-btn-skip:hover .lcc-vn-svg-skip {
    transform: translateX(2px);
    opacity: 1;
}
.lcc-vn-skip-label {
    font-family: inherit;
}
/* Bouton « Paramètres » du title-screen (titulaire pré-game) :
   aligne le SVG engrenage avec le label texte.
   v1.07 FIX (retour Benjamin) : ajout de `justify-content: center` car
   le bouton se retrouvait décalé à gauche par rapport aux autres boutons
   du launcher (« Reprendre la partie », « Nouvelle partie »…) qui sont
   tous centrés. */
.lcc-vn-btn-with-svg {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.lcc-vn-btn-with-svg .lcc-vn-svg-gear {
    transition: transform 0.45s cubic-bezier(.5,0,.3,1);
}
.lcc-vn-btn-with-svg:hover .lcc-vn-svg-gear,
.lcc-vn-btn-with-svg:focus-visible .lcc-vn-svg-gear {
    transform: rotate(60deg);
}
/* Focus ring accessible (manquait sur les anciens boutons hud) */
.lcc-vn-hud-btn:focus-visible {
    outline: 2px solid var(--dore, #D4B16A);
    outline-offset: 2px;
}
/* Mobile très court (paysage) : mini-skip text masqué pour gagner de la place */
@media (orientation: landscape) and (max-height: 520px) {
    .lcc-vn-hud-btn-skip .lcc-vn-skip-label { display: none; }
    .lcc-vn-hud-btn-skip { padding: 0 10px; }
}

/* ==================================================================
   v1.06 / v1.07 / v1.08 — THEME CLAIR pour le moteur VN
   Retour Benjamin v1.08 : sync entre toggle site (header lune/soleil) et
   toggle en jeu — choisir clair quelque part = clair partout. On utilise
   le même mécanisme `:root[data-theme="light"]` que le site.
   Le launcher VN garde sa lisibilité en mode clair grâce à des règles
   `:root[data-theme="light"] .lcc-vn-title-screen ...` ci-dessous qui
   forcent titre doré + overlay sombre (les fonds d'écran-titre étant des
   images sombres, le contraste reste à dominance dark même en clair).
   ================================================================== */

/* ───── LAUNCHER VN : forcer la lisibilité même en mode clair ───── */
:root[data-theme="light"] .lcc-vn-title-screen,
:root[data-theme="light"] .lcc-vn-title-screen * {
    color-scheme: dark;
}
:root[data-theme="light"] .lcc-vn-title-screen .lcc-vn-title,
:root[data-theme="light"] .lcc-vn-title-screen h1.lcc-vn-title {
    color: #E5C68A !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 24px rgba(212, 177, 106, 0.25);
}
:root[data-theme="light"] .lcc-vn-title-screen .lcc-vn-subtitle {
    color: rgba(232, 224, 210, 0.85) !important;
}
:root[data-theme="light"] .lcc-vn-title-screen .lcc-vn-btn {
    background: rgba(15, 15, 22, 0.82);
    border-color: rgba(212, 177, 106, 0.55);
    color: #E5C68A;
}
:root[data-theme="light"] .lcc-vn-title-screen .lcc-vn-btn:hover {
    background: rgba(212, 177, 106, 0.18);
    border-color: #D4B16A;
    color: #FFF1CF;
}
:root[data-theme="light"] .lcc-vn-title-screen .lcc-vn-btn-primary {
    background: linear-gradient(135deg, #E6C77E, #C49A45) !important;
    color: #15120a !important;
    border-color: transparent !important;
}
/* Overlay du launcher en mode clair : garder le voile sombre derrière la card */
:root[data-theme="light"] .lcc-vn-title-overlay {
    background: rgba(10, 10, 18, 0.88);
}

/* ───── Bulles de dialogue ───── */
:root[data-theme="light"] .lcc-vn-bubble {
    background: rgba(250, 246, 235, 0.96);
    border-color: rgba(184, 146, 61, 0.65);
    box-shadow: 0 12px 36px rgba(43, 31, 18, 0.28), 0 0 0 1px rgba(184, 146, 61, 0.18);
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-bubble-text { color: #2B1F12; }
:root[data-theme="light"] .lcc-vn-bubble-left::before  { border-bottom-color: rgba(184, 146, 61, 0.65); }
:root[data-theme="light"] .lcc-vn-bubble-left::after   { border-bottom-color: rgba(250, 246, 235, 0.96); }
:root[data-theme="light"] .lcc-vn-bubble-right::before { border-bottom-color: rgba(184, 146, 61, 0.65); }
:root[data-theme="light"] .lcc-vn-bubble-right::after  { border-bottom-color: rgba(250, 246, 235, 0.96); }
:root[data-theme="light"] .lcc-vn-bubble-narrator {
    /* v1.09 — !important pour battre les surcharges per-game (.lcc-vn-game-cl,
       .lcc-vn-game-cours_quentin, etc.) qui pourraient hériter du fond sombre */
    background: rgba(255, 251, 240, 0.95) !important;
    border-color: rgba(138, 95, 22, 0.4) !important;
    color: rgba(43, 31, 18, 0.92) !important;
}
:root[data-theme="light"] .lcc-vn-bubble {
    /* Idem : on force pour battre toutes les règles per-game */
    background: rgba(250, 246, 235, 0.96) !important;
    color: #2B1F12 !important;
}
:root[data-theme="light"] .lcc-vn-bubble-text {
    color: #2B1F12 !important;
}
:root[data-theme="light"] .lcc-vn-bubble-name {
    text-shadow: 0 1px 2px rgba(43, 31, 18, 0.2);
}
:root[data-theme="light"] .lcc-vn-continue { color: #6F4F18; }
:root[data-theme="light"] .lcc-vn-continue:hover { color: #8A5F16; }

/* ───── Panneau TÂCHES (HUD haut-droit) — v1.07 ajouté ───── */
:root[data-theme="light"] .lcc-vn-tasks-panel {
    background: rgba(250, 246, 235, 0.95);
    border-color: rgba(184, 146, 61, 0.6);
    box-shadow: 0 8px 24px rgba(43, 31, 18, 0.25);
}
:root[data-theme="light"] .lcc-vn-tasks-header {
    border-bottom-color: rgba(184, 146, 61, 0.35);
}
:root[data-theme="light"] .lcc-vn-tasks-title { color: #6F4F18; }
:root[data-theme="light"] .lcc-vn-task { color: #2B1F12; }
:root[data-theme="light"] .lcc-vn-task-done { color: rgba(46, 134, 73, 0.95); }
:root[data-theme="light"] .lcc-vn-task-active .lcc-vn-task-icon { color: #B8870B; }
:root[data-theme="light"] .lcc-vn-tasks-overflow-btn {
    color: #6F4F18;
    border-color: rgba(138, 95, 22, 0.45);
}
:root[data-theme="light"] .lcc-vn-tasks-overflow-btn:hover {
    background: rgba(184, 146, 61, 0.18);
    border-color: #8A5F16;
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-ecus-counter {
    background: rgba(184, 146, 61, 0.18);
    border-color: rgba(184, 146, 61, 0.5);
}
:root[data-theme="light"] .lcc-vn-ecus-value { color: #B8870B; }
:root[data-theme="light"] .lcc-vn-ecus-label { color: rgba(43, 31, 18, 0.85); }

/* ───── Panneau Indices (clues) — v1.07 / v1.09 audit complet ───── */
:root[data-theme="light"] .lcc-vn-clues-panel {
    background: rgba(250, 246, 235, 0.9);
    border-color: rgba(184, 146, 61, 0.45);
    border-top-color: rgba(184, 146, 61, 0.35);
}
:root[data-theme="light"] .lcc-vn-clues-title { color: rgba(43, 31, 18, 0.75); }
:root[data-theme="light"] .lcc-vn-clue {
    background: rgba(184, 146, 61, 0.12);
    border-color: rgba(138, 95, 22, 0.25);
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-clue.has {
    background: rgba(46, 134, 73, 0.18);
    border-color: rgba(46, 134, 73, 0.45);
}
:root[data-theme="light"] .lcc-vn-clue.missing { color: rgba(43, 31, 18, 0.6); }
:root[data-theme="light"] .lcc-vn-clue-mark { color: rgba(43, 31, 18, 0.55); }
:root[data-theme="light"] .lcc-vn-clue.has .lcc-vn-clue-mark { color: #2E6C3A; }

/* ───── Stats / Timer / Écus HUD ───── */
:root[data-theme="light"] .lcc-vn-stat {
    background: rgba(250, 246, 235, 0.85);
    border-color: rgba(184, 146, 61, 0.5);
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-stat-value { color: #6F4F18; }
:root[data-theme="light"] .lcc-vn-stat-label { color: rgba(43, 31, 18, 0.7); }

/* ───── Panel Paramètres ───── */
:root[data-theme="light"] .lcc-vn-settings-modal {
    background: rgba(43, 31, 18, 0.55);
}
:root[data-theme="light"] .lcc-vn-settings-card {
    background: linear-gradient(180deg, #FFFDF7, #F5EFE0);
    border-color: rgba(184, 146, 61, 0.7);
    box-shadow: 0 30px 80px rgba(43, 31, 18, 0.4);
}
:root[data-theme="light"] .lcc-vn-settings-card h2 { color: #6F4F18; }
:root[data-theme="light"] .lcc-vn-setting {
    background: rgba(184, 146, 61, 0.08);
    border-color: rgba(184, 146, 61, 0.25);
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-segmented {
    background: rgba(255, 251, 240, 0.7);
    border-color: rgba(184, 146, 61, 0.55);
}
:root[data-theme="light"] .lcc-vn-seg-btn { color: #5A4218; }
:root[data-theme="light"] .lcc-vn-seg-btn:hover {
    color: #2B1F12;
    background: rgba(184, 146, 61, 0.18);
}
:root[data-theme="light"] .lcc-vn-seg-btn.is-active {
    background: linear-gradient(135deg, #C49A45, #A77E2A);
    color: #FFFDF7;
}
:root[data-theme="light"] .lcc-vn-setting select {
    color-scheme: light;
    background-color: #FFFDF7;
    color: #2B1F12 !important;
    border-color: rgba(184, 146, 61, 0.65);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A5F16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
:root[data-theme="light"] .lcc-vn-setting select:hover,
:root[data-theme="light"] .lcc-vn-setting select:focus-visible {
    border-color: #8A5F16;
}
:root[data-theme="light"] .lcc-vn-setting select option {
    background: #FFFDF7;
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-setting input[type="checkbox"] {
    accent-color: #8A5F16;
}
:root[data-theme="light"] .lcc-vn-settings-actions .lcc-vn-btn {
    color: #2B1F12;
    border-color: rgba(184, 146, 61, 0.65);
}
:root[data-theme="light"] .lcc-vn-settings-actions .lcc-vn-btn-primary {
    background: linear-gradient(135deg, #C49A45, #A77E2A);
    color: #FFFDF7;
    border-color: transparent;
}
:root[data-theme="light"] .lcc-vn-lang-trigger,
:root[data-theme="light"] .lcc-vn-lang-menu {
    background-color: #FFFDF7;
    color: #2B1F12;
    border-color: rgba(184, 146, 61, 0.65);
}
:root[data-theme="light"] .lcc-vn-lang-option:hover { background: rgba(184, 146, 61, 0.18); }
:root[data-theme="light"] .lcc-vn-lang-option.is-current {
    background: rgba(184, 146, 61, 0.28);
    color: #2B1F12;
}

/* ───── Choix multiples ───── */
:root[data-theme="light"] .lcc-vn-choices,
:root[data-theme="light"] .lcc-vn-choices-question {
    background: rgba(250, 246, 235, 0.96);
    border-color: rgba(184, 146, 61, 0.65);
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-choices-question-text { color: #2B1F12; }
:root[data-theme="light"] .lcc-vn-choice {
    background: rgba(255, 251, 240, 0.85);
    border-color: rgba(184, 146, 61, 0.5);
    color: #2B1F12;
}
:root[data-theme="light"] .lcc-vn-choice:hover {
    background: rgba(184, 146, 61, 0.15);
    border-color: #8A5F16;
}

/* ───── HUD boutons (engrenage / skip / help) ───── */
/* v1.09 — Audit Benjamin : le bouton skip était peu lisible sur certains
   fonds image (supermarché clair de Léo). On utilise maintenant un fond
   « surface » très opaque + bordure et text-shadow → garanti lisible sur
   N'IMPORTE QUEL fond (sombre, clair, ou bigarré). */
.lcc-vn-hud-btn-skip {
    /* Override de la règle base (au-dessus) pour un fond plus opaque */
    backdrop-filter: blur(6px);
}
:root[data-theme="light"] .lcc-vn-hud-btn {
    background: rgba(250, 246, 235, 0.92);
    border-color: rgba(184, 146, 61, 0.7);
    color: #6F4F18;
    box-shadow: 0 4px 12px rgba(43, 31, 18, 0.2);
}
:root[data-theme="light"] .lcc-vn-hud-btn:hover {
    background: rgba(184, 146, 61, 0.25);
    border-color: #8A5F16;
}
:root[data-theme="light"] .lcc-vn-hud-btn-skip {
    /* Même contraste élevé en mode clair : on garde un fond brique foncé
       opaque (avec text-shadow) plutôt qu'un pâle rgba qui disparaît sur
       supermarché illuminé. */
    background: rgba(140, 70, 45, 0.92);
    border-color: rgba(120, 55, 30, 0.95);
    color: #FFEDD7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    box-shadow: 0 4px 12px rgba(43, 31, 18, 0.3);
}
:root[data-theme="light"] .lcc-vn-hud-btn-skip:hover {
    background: rgba(165, 90, 60, 0.96);
    border-color: #C75330;
    color: #FFFFFF;
}

/* ==================================================================
   v1.19 — Bulles BD : FORMES DISTINCTES + queue cohérente
   Retour Benjamin v1.18 :
   - "il n'y a plus d'effet alors que j'ai l'option d'activer" → mes
     animations v1.18 étaient quasi-imperceptibles (drift 0.6px, shake
     1.5px). On les renforce.
   - "il faut adapter la FORME en fonction du ton du personnage" :
       * cri / colère → bord épineux (PICS visibles façon BD)
       * chuchote / mystique → bord tireté ESPACÉ (dashed)
       * peur → bord tremblant
   - "bien lier l'effet de la bulle avec le tr*ait qui lui est lier
     pointant vers la bouche du personnage" → la QUEUE doit reprendre
     le motif (pics, dashed, arrondi…) en plus de la couleur.
   ================================================================== */
.lcc-vn-bubble {
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* Variable par défaut (ancien chrome doré) — overridée par chaque mood */
    --bubble-edge: rgba(212, 177, 106, 0.7);
    --bubble-edge-strong: rgba(212, 177, 106, 0.9);
}

/* La queue (::before doré externe / ::after intérieur sombre) suit la
   variable --bubble-edge. La couleur intérieure suit le `background` de
   la bulle via currentColor n'étant pas possible, on fixe à --bubble-fill. */
.lcc-vn-bubble-left::before,
.lcc-vn-bubble-right::before {
    border-bottom-color: var(--bubble-edge-strong) !important;
}
.lcc-vn-bubble-left::after,
.lcc-vn-bubble-right::after {
    border-bottom-color: var(--bubble-fill, rgba(15, 15, 22, 0.95)) !important;
}

/* ---- PEUR — bleu glacé, bord dashed, tremblement subtil ---- */
.lcc-vn-bubble-mood-peur {
    --bubble-edge: rgba(140, 195, 245, 0.95);
    --bubble-edge-strong: rgba(140, 195, 245, 1.0);
    --bubble-fill: rgba(20, 30, 70, 0.95);
    background: var(--bubble-fill) !important;
    border: 2.5px dashed var(--bubble-edge) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 30px rgba(140, 195, 245, 0.3), 0 12px 40px rgba(0,0,0,0.7) !important;
    animation: lccBubbleDrift 1.4s ease-in-out infinite;
}
@keyframes lccBubbleDrift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-1px, 0.5px); }
    50%      { transform: translate(0.8px, -0.5px); }
    75%      { transform: translate(-0.5px, -0.5px); }
}

/* ---- COLÈRE / CRI — rouge vif, halo intense, légère pulsation ---- */
.lcc-vn-bubble-mood-colere {
    --bubble-edge: rgba(232, 74, 58, 1.0);
    --bubble-edge-strong: rgba(232, 74, 58, 1.0);
    --bubble-fill: rgba(60, 15, 18, 0.96);
    background: var(--bubble-fill) !important;
    border: 3.5px solid var(--bubble-edge) !important;
    border-radius: 10px !important;
    box-shadow:
        0 0 0 2px rgba(232, 74, 58, 0.3),
        0 0 36px rgba(232, 74, 58, 0.5),
        0 12px 40px rgba(0,0,0,0.7) !important;
    animation: lccBubblePulse 1.2s ease-in-out infinite;
}
@keyframes lccBubblePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(232,74,58,0.3), 0 0 36px rgba(232,74,58,0.5), 0 12px 40px rgba(0,0,0,0.7); }
    50%      { box-shadow: 0 0 0 3px rgba(232,74,58,0.45), 0 0 48px rgba(232,74,58,0.75), 0 12px 40px rgba(0,0,0,0.7); }
}

/* ---- SURPRISE — éclat doré, shake bref visible ---- */
.lcc-vn-bubble-mood-surprise {
    --bubble-edge: rgba(240, 200, 112, 1.0);
    --bubble-edge-strong: #f0c870;
    --bubble-fill: rgba(60, 30, 20, 0.96);
    background: var(--bubble-fill) !important;
    border: 3px solid var(--bubble-edge) !important;
    border-radius: 16px 24px 16px 24px / 24px 16px 24px 16px !important;
    color: #ffeac0 !important;
    box-shadow:
        0 0 0 2px rgba(240, 200, 112, 0.35),
        0 0 40px rgba(240, 200, 112, 0.5),
        0 12px 40px rgba(0,0,0,0.7) !important;
    animation: lccBubbleShake 0.35s cubic-bezier(.36,.07,.19,.97) 3;
}
@keyframes lccBubbleShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20%      { transform: translate(-3px, 1px) rotate(-1.5deg); }
    40%      { transform: translate(3px, -1.5px) rotate(1.2deg); }
    60%      { transform: translate(-2px, 1.5px) rotate(-1deg); }
    80%      { transform: translate(2px, -1px) rotate(0.8deg); }
}

/* ---- MENAÇANT — rouge sang, halo profond fixe ---- */
.lcc-vn-bubble-mood-menacant {
    --bubble-edge: rgba(220, 90, 55, 1.0);
    --bubble-edge-strong: rgba(220, 90, 55, 1.0);
    --bubble-fill: rgba(15, 8, 8, 0.97);
    background: var(--bubble-fill) !important;
    border: 3px solid var(--bubble-edge) !important;
    border-radius: 10px !important;
    box-shadow:
        0 0 0 1px rgba(220, 90, 55, 0.3) inset,
        0 0 36px rgba(220, 90, 55, 0.5),
        0 12px 40px rgba(0,0,0,0.8) !important;
}

/* ---- MYSTIQUE — violet, dotted (≃ chuchotement), forme pensée ---- */
.lcc-vn-bubble-mood-mystique {
    --bubble-edge: rgba(195, 145, 235, 0.95);
    --bubble-edge-strong: rgba(195, 145, 235, 1.0);
    --bubble-fill: rgba(40, 20, 65, 0.96);
    background: var(--bubble-fill) !important;
    border: 3px dotted var(--bubble-edge) !important;
    border-radius: 28px 22px 24px 26px / 22px 26px 24px 28px !important;
    box-shadow: 0 0 32px rgba(195, 145, 235, 0.32), 0 12px 40px rgba(0,0,0,0.7) !important;
}

/* ---- TRISTE — bleu-gris, bord onduleux qui s'affaisse ---- */
.lcc-vn-bubble-mood-triste {
    --bubble-edge: rgba(165, 185, 210, 0.85);
    --bubble-edge-strong: rgba(165, 185, 210, 0.95);
    --bubble-fill: rgba(35, 45, 60, 0.95);
    background: var(--bubble-fill) !important;
    border: 2px solid var(--bubble-edge) !important;
    border-radius: 14px 14px 32px 28px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
    opacity: 0.96;
}

/* ---- CALME — vert sourd apaisant, simple ---- */
.lcc-vn-bubble-mood-calme {
    --bubble-edge: rgba(150, 195, 175, 0.85);
    --bubble-edge-strong: rgba(150, 195, 175, 0.95);
    --bubble-fill: rgba(20, 40, 35, 0.95);
    background: var(--bubble-fill) !important;
    border: 2px solid var(--bubble-edge) !important;
    border-radius: 24px !important;
}

/* ==================================================================
   QUEUES (::before doré externe / ::after intérieur) PAR MOOD
   On adapte la FORME de la queue au mood pour qu'elle "matche" la bulle.
   ================================================================== */

/* Colère / Menaçant : queue plus pointue et plus large (cri qui sort) */
.lcc-vn-bubble-mood-colere.lcc-vn-bubble-left::before,
.lcc-vn-bubble-mood-colere.lcc-vn-bubble-right::before,
.lcc-vn-bubble-mood-menacant.lcc-vn-bubble-left::before,
.lcc-vn-bubble-mood-menacant.lcc-vn-bubble-right::before {
    border-width: 18px !important;
    border-bottom-width: 22px !important;
    top: -20px !important;
}
.lcc-vn-bubble-mood-colere.lcc-vn-bubble-left::after,
.lcc-vn-bubble-mood-colere.lcc-vn-bubble-right::after,
.lcc-vn-bubble-mood-menacant.lcc-vn-bubble-left::after,
.lcc-vn-bubble-mood-menacant.lcc-vn-bubble-right::after {
    border-width: 14px !important;
    border-bottom-width: 18px !important;
    top: -14px !important;
}

/* Peur / Mystique : queue plus fine (chuchote) */
.lcc-vn-bubble-mood-peur.lcc-vn-bubble-left::before,
.lcc-vn-bubble-mood-peur.lcc-vn-bubble-right::before,
.lcc-vn-bubble-mood-mystique.lcc-vn-bubble-left::before,
.lcc-vn-bubble-mood-mystique.lcc-vn-bubble-right::before {
    border-width: 10px !important;
    border-bottom-width: 14px !important;
    top: -12px !important;
    opacity: 0.8;
}
.lcc-vn-bubble-mood-peur.lcc-vn-bubble-left::after,
.lcc-vn-bubble-mood-peur.lcc-vn-bubble-right::after,
.lcc-vn-bubble-mood-mystique.lcc-vn-bubble-left::after,
.lcc-vn-bubble-mood-mystique.lcc-vn-bubble-right::after {
    border-width: 8px !important;
    border-bottom-width: 11px !important;
    top: -8px !important;
}

/* Surprise : queue doré épais éclatant (forme d'éclair) */
.lcc-vn-bubble-mood-surprise.lcc-vn-bubble-left::before,
.lcc-vn-bubble-mood-surprise.lcc-vn-bubble-right::before {
    border-width: 16px !important;
    border-bottom-width: 24px !important;
    top: -22px !important;
    filter: drop-shadow(0 0 6px rgba(240, 200, 112, 0.6));
}
.lcc-vn-bubble-mood-surprise.lcc-vn-bubble-left::after,
.lcc-vn-bubble-mood-surprise.lcc-vn-bubble-right::after {
    border-width: 12px !important;
    border-bottom-width: 18px !important;
    top: -14px !important;
}

/* ---- Thème clair — overrides par mood ---- */
:root[data-theme="light"] .lcc-vn-bubble-mood-peur {
    --bubble-fill: rgba(225, 235, 250, 0.95);
    --bubble-edge: rgba(80, 110, 175, 0.7);
    --bubble-edge-strong: rgba(60, 90, 160, 0.95);
}
:root[data-theme="light"] .lcc-vn-bubble-mood-colere {
    --bubble-fill: rgba(255, 235, 230, 0.95);
    --bubble-edge: rgba(180, 55, 50, 0.75);
    --bubble-edge-strong: rgba(180, 55, 50, 0.95);
}
:root[data-theme="light"] .lcc-vn-bubble-mood-surprise {
    --bubble-fill: rgba(255, 248, 225, 0.96);
    --bubble-edge: rgba(195, 145, 35, 0.8);
    --bubble-edge-strong: rgba(195, 145, 35, 1.0);
    color: #4a2f00 !important;
}
:root[data-theme="light"] .lcc-vn-bubble-mood-menacant {
    --bubble-fill: rgba(250, 232, 225, 0.95);
    --bubble-edge: rgba(170, 70, 35, 0.75);
    --bubble-edge-strong: rgba(170, 70, 35, 1.0);
}
:root[data-theme="light"] .lcc-vn-bubble-mood-mystique {
    --bubble-fill: rgba(240, 230, 250, 0.95);
    --bubble-edge: rgba(125, 80, 175, 0.7);
    --bubble-edge-strong: rgba(125, 80, 175, 0.95);
}
:root[data-theme="light"] .lcc-vn-bubble-mood-triste {
    --bubble-fill: rgba(235, 240, 248, 0.95);
    --bubble-edge: rgba(100, 120, 145, 0.65);
    --bubble-edge-strong: rgba(100, 120, 145, 0.9);
}
:root[data-theme="light"] .lcc-vn-bubble-mood-calme {
    --bubble-fill: rgba(230, 245, 238, 0.95);
    --bubble-edge: rgba(85, 130, 110, 0.65);
    --bubble-edge-strong: rgba(85, 130, 110, 0.9);
}

/* ---- Accessibilité : `.lcc-vn-no-fx` coupe TOUTES les animations ---- */
#lcc-vn-root.lcc-vn-no-fx .lcc-vn-bubble,
#lcc-vn-root.lcc-vn-no-fx .lcc-vn-bubble * {
    animation: none !important;
    transition: none !important;
}

/* v1.14 — bloc legacy supprimé en v1.18 (remplacé plus haut par la
   refonte unifiée bulle+queue avec variables CSS --bubble-edge). */

/* ==================================================================
   v1.21 — CARTE GÉNÉRIQUE À HOTSPOTS (La Brume)
   v1.26 — Refonte (retour Benjamin) :
     - Carte en PLEIN écran (override max-width: 1100px + margin parent).
     - Halos dorés scintillants PERMANENTS pour signaler les zones
       interactives (sinon on ne sait pas où cliquer).
     - Au hover : amplification du halo + label + icône.
   ================================================================== */

/* Plein écran : override .lcc-vn-map-frame parent qui limite à 1100px. */
.lcc-vn-map-hotspot-screen .lcc-vn-map-frame--hotspot {
    position: absolute;
    inset: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    display: block;
}
.lcc-vn-map-hotspot-screen .lcc-vn-map-frame--hotspot .lcc-vn-map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
}
.lcc-vn-map-hotspots-layer {
    position: absolute;
    inset: 0;
    pointer-events: none; /* les enfants ré-activent au besoin */
}

/* HALO permanent — pulsation douce pour signaler les zones cliquables.
   Chaque hotspot a un ::before qui dessine un disque doré flou animé. */
.lcc-vn-map-hotspot {
    position: absolute;
    background: transparent;
    border: 0;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
    isolation: isolate;
}
/* v1.28 — Halo équilibré (entre v1.26 trop fort et v1.27 trop discret) :
   - Visible en permanence (sans hover) pour signaler les zones cliquables.
   - Pas tape-à-l'œil : on garde mix-blend-mode soft-light + opacité modérée.
   - Halo + cercle doré subtil constant + intensification au hover. */
.lcc-vn-map-hotspot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 218, 135, 0.5) 0%,
        rgba(255, 200, 100, 0.28) 35%,
        rgba(255, 180, 70, 0.12) 60%,
        transparent 82%
    );
    box-shadow: 0 0 24px rgba(255, 200, 110, 0.4);
    animation: lccHotspotPulse 2.8s ease-in-out infinite;
    z-index: -1;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
@keyframes lccHotspotPulse {
    0%, 100% { transform: scale(0.94); opacity: 0.5; }
    50%      { transform: scale(1.05); opacity: 0.85; }
}

/* Hover : intensification visible + cercle doré net + screen blend pour pop */
.lcc-vn-map-hotspot:hover,
.lcc-vn-map-hotspot:focus-visible {
    transform: scale(1.05);
    outline: none;
}
.lcc-vn-map-hotspot:hover::before,
.lcc-vn-map-hotspot:focus-visible::before {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 235, 170, 0.85) 0%,
        rgba(255, 215, 125, 0.55) 35%,
        rgba(255, 195, 85, 0.28) 60%,
        transparent 82%
    );
    box-shadow:
        0 0 42px rgba(255, 220, 140, 0.75),
        0 0 0 3px rgba(255, 220, 140, 0.7) inset;
    animation-duration: 1.5s;
    mix-blend-mode: screen;
}

.lcc-vn-map-hotspot-icon {
    font-size: clamp(22px, 2.8vw, 34px);
    opacity: 0.88;
    transform: scale(0.92);
    transition: opacity 0.18s ease, transform 0.18s ease;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,0.88)) drop-shadow(0 0 5px rgba(255, 200, 110, 0.7));
}
.lcc-vn-map-hotspot:hover .lcc-vn-map-hotspot-icon,
.lcc-vn-map-hotspot:focus-visible .lcc-vn-map-hotspot-icon {
    opacity: 1;
    transform: scale(1.05) translateY(-2px);
}
.lcc-vn-map-hotspot-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 600;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    padding: 4px 12px;
    background: rgba(20, 14, 10, 0.92);
    border: 1px solid rgba(255, 220, 140, 0.7);
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.lcc-vn-map-hotspot:hover .lcc-vn-map-hotspot-label,
.lcc-vn-map-hotspot:focus-visible .lcc-vn-map-hotspot-label {
    opacity: 1;
    transform: translateY(0);
}
.lcc-vn-map-hotspot-screen .lcc-vn-map-narration {
    /* narration discrète tout en bas */
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    max-width: 70%;
    background: rgba(20, 14, 10, 0.88);
    color: #f0e0c0;
    border: 1px solid rgba(212, 177, 106, 0.55);
    padding: 10px 18px;
    border-radius: 10px;
    font-style: italic;
    text-align: center;
    pointer-events: none;
    z-index: 5;
}

/* v1.26 — Force le screen plein écran (override .lcc-vn-map-screen parent
   qui avait flex-direction: column avec marges 80px). */
.lcc-vn-map-hotspot-screen {
    position: fixed;
    inset: 0;
    display: block;
    background: #0a0608;
}

/* ==================================================================
   v1.19 — Bouton inventaire + panel modal
   Demande Benjamin : "on peut faire un panel pour montré l'inventaire
   proprement en cliquant sur un bouton". Bouton 🎒 dans le header du
   panneau Tâches (côté droit), panel modal centré au clic.
   ================================================================== */
.lcc-vn-inventory-btn {
    background: transparent;
    border: 1.5px solid rgba(212, 177, 106, 0.4);
    color: #e8d9b3;
    font-size: 18px;
    border-radius: 8px;
    padding: 4px 8px;
    margin-left: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lcc-vn-inventory-btn:hover {
    background: rgba(212, 177, 106, 0.15);
    border-color: rgba(212, 177, 106, 0.75);
    transform: translateY(-1px);
}
.lcc-vn-inventory-wrap { position: fixed; inset: 0; z-index: 9000; }
.lcc-vn-inventory-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lcc-vn-inventory-panel {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    max-height: 80vh;
    background: rgba(20, 18, 14, 0.97);
    border: 2px solid rgba(212, 177, 106, 0.75);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    color: #e8d9b3;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.lcc-vn-inventory-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(212, 177, 106, 0.3);
}
.lcc-vn-inventory-header h2 { margin: 0; font-size: 20px; }
.lcc-vn-inventory-close {
    background: transparent; border: 0; color: #e8d9b3;
    font-size: 22px; cursor: pointer; padding: 4px 8px;
}
.lcc-vn-inventory-close:hover { color: #fff; }
.lcc-vn-inventory-body { padding: 16px 20px; overflow-y: auto; }
.lcc-vn-inventory-empty { text-align: center; opacity: 0.7; font-style: italic; }
.lcc-vn-inventory-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.lcc-vn-inventory-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 177, 106, 0.25);
    border-radius: 10px;
}
.lcc-vn-inv-icon { font-size: 22px; }
.lcc-vn-inv-name { font-size: 14px; }
/* Thème clair */
:root[data-theme="light"] .lcc-vn-inventory-panel {
    background: rgba(250, 246, 235, 0.97);
    color: #2B1F12;
    border-color: rgba(184, 146, 61, 0.7);
}
:root[data-theme="light"] .lcc-vn-inventory-item {
    background: rgba(184, 146, 61, 0.08);
    border-color: rgba(184, 146, 61, 0.3);
}
:root[data-theme="light"] .lcc-vn-inventory-close { color: #2B1F12; }
:root[data-theme="light"] .lcc-vn-inventory-btn { color: #2B1F12; border-color: rgba(184, 146, 61, 0.5); }

/* ───── Bandeau vote multi (vote-hint) ───── */
:root[data-theme="light"] .lcc-vn-vote-hint {
    background: rgba(250, 246, 235, 0.9);
    border-color: rgba(184, 146, 61, 0.45);
    color: #2B1F12;
}

/* ==================================================================
   v1.11 — AUDIT THÈME CLAIR COMPLÉMENTAIRE (11 surfaces ajoutées)
   Sources oubliées en v1.06→v1.10 qui restaient sombres en mode clair :
   narration, vote-overlay, map-narration, help-modal, minigame,
   warning-modal, pause-banner, ending-overlay, ending-stats.
   ================================================================== */

/* ───── Narration centrée (entre les bulles) ───── */
:root[data-theme="light"] .lcc-vn-narration {
    background: rgba(250, 246, 235, 0.96) !important;
    border-color: rgba(184, 146, 61, 0.55);
    color: #2B1F12;
    box-shadow: 0 16px 50px rgba(43, 31, 18, 0.22);
}

/* ───── Modale vote multi ───── */
:root[data-theme="light"] .lcc-vn-vote-overlay {
    background: radial-gradient(ellipse at center, rgba(43, 31, 18, 0.55) 0%, rgba(20, 14, 8, 0.7) 100%);
}
:root[data-theme="light"] .lcc-vn-vote-overlay-card {
    background: linear-gradient(180deg, #FFFDF7, #F5EFE0);
    border-color: rgba(184, 146, 61, 0.7);
    color: #2B1F12;
    box-shadow: 0 30px 80px rgba(43, 31, 18, 0.4);
}

/* ───── Narration sur la carte (TC village) ───── */
:root[data-theme="light"] .lcc-vn-map-narration {
    background: rgba(250, 246, 235, 0.92);
    color: #2B1F12;
    border: 1px solid rgba(184, 146, 61, 0.4);
    box-shadow: 0 4px 14px rgba(43, 31, 18, 0.15);
}

/* ───── Modale « Comment jouer » TC ───── */
:root[data-theme="light"] .lcc-vn-help-modal {
    background: rgba(43, 31, 18, 0.45);
}
:root[data-theme="light"] .lcc-vn-help-close {
    background: rgba(255, 251, 240, 0.9);
    border-color: rgba(138, 95, 22, 0.5);
    color: #6F4F18;
}
:root[data-theme="light"] .lcc-vn-help-close:hover {
    background: rgba(184, 146, 61, 0.2);
    color: #2B1F12;
}

/* ───── Conteneur mini-jeu ───── */
:root[data-theme="light"] .lcc-vn-minigame {
    background: rgba(250, 246, 235, 0.96);
    border-color: rgba(184, 146, 61, 0.65);
    color: #2B1F12;
    box-shadow: 0 24px 60px rgba(43, 31, 18, 0.35);
}

/* ───── Modale warning (« êtes-vous sûr ? ») ───── */
:root[data-theme="light"] .lcc-vn-warning-modal {
    background: rgba(43, 31, 18, 0.55);
}

/* ───── Bouton fermer du banner pause ───── */
:root[data-theme="light"] .lcc-vn-pause-banner-close {
    background: rgba(255, 251, 240, 0.85);
    border-color: rgba(138, 95, 22, 0.45);
    color: #6F4F18;
}
:root[data-theme="light"] .lcc-vn-pause-banner-close:hover {
    background: rgba(184, 146, 61, 0.25);
    color: #2B1F12;
}

/* ───── Écran de fin (overlay + stats) ───── */
:root[data-theme="light"] .lcc-vn-ending-overlay {
    background: linear-gradient(180deg, #FFFDF7, #F5EFE0);
    border-color: rgba(184, 146, 61, 0.7);
    color: #2B1F12;
    box-shadow: 0 30px 80px rgba(43, 31, 18, 0.4);
}
:root[data-theme="light"] .lcc-vn-ending-stats {
    background: rgba(184, 146, 61, 0.12);
    border-color: rgba(138, 95, 22, 0.4);
    color: #2B1F12;
}

/* v1.08 — Le CSS du widget [lcc_countdown] a été DÉPLACÉ dans style.css
   car vn-game.css n'est pas chargé sur les pages publiques (accueil,
   Communauté, /actualites/). Sans CSS, les éléments J/H/M/S s'empilaient
   verticalement (display:block par défaut). */

/* =====================================================================
 * v1.68.20 — RESPONSIVE MOBILE IN-GAME (portrait + landscape)
 * ---------------------------------------------------------------------
 * Fix : screens IMG_6738-6747 « Problème visibilité mobile » —
 * Launcher rogné, bulles dialogue mal centrées, choix trop étroits en
 * landscape, HUD boutons chevauchant le contenu, chute d'espace au bord.
 * Append-only (fin du fichier) pour ne rien casser d'existant.
 * S'applique à TOUS les escapes/cours (VN engine) sans exception.
 * ===================================================================== */

/* --- LANDSCAPE (téléphone couché, iPhone/Android) ---------------------- */
@media (orientation: landscape) and (max-height: 500px) {
    /* Launcher : titre non rogné en haut, boutons compacts */
    .lcc-vn-title-overlay {
        max-width: 88% !important;
        padding: 14px 20px !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }
    .lcc-vn-title {
        font-size: clamp(20px, 4.5vw, 34px) !important;
        line-height: 1.05 !important;
        margin: 0 0 4px !important;
    }
    .lcc-vn-subtitle {
        font-size: clamp(11px, 2.6vw, 15px) !important;
        margin: 0 0 8px !important;
    }
    .lcc-vn-title-actions { gap: 6px !important; }
    .lcc-vn-title-actions .btn,
    .lcc-vn-title-actions .lcc-vn-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 34px !important;
    }

    /* Bulle de dialogue : utilise la largeur landscape, plus lisible */
    .lcc-vn-bubble {
        max-width: min(720px, 78vw) !important;
        margin: 0 auto !important;
        padding: 12px 16px !important;
        font-size: 14.5px !important;
        line-height: 1.35 !important;
    }
    .lcc-vn-staged .lcc-vn-bubble {
        max-width: min(640px, 74vw) !important;
    }
    .lcc-vn-speaker-name {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    /* Narration : centrée mais pas trop large */
    .lcc-vn-narration {
        max-width: min(680px, 82vw) !important;
        padding: 10px 18px !important;
        font-size: 14.5px !important;
        line-height: 1.4 !important;
    }

    /* Choix : côte à côte quand possible, plus larges qu'en portrait */
    .lcc-vn-choices {
        width: min(720px, 82vw) !important;
        gap: 8px !important;
        padding: 6px 0 !important;
    }
    .lcc-vn-choices.is-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .lcc-vn-choice {
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        min-height: 42px !important;
    }
    .lcc-vn-choices-question {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    /* HUD : boutons plus petits, moins d'espace consommé */
    .lcc-vn-hud-btn {
        width: 36px !important;
        height: 36px !important;
    }
    .lcc-vn-hud-left, .lcc-vn-hud-right {
        gap: 6px !important;
        padding: 8px !important;
    }

    /* Timer top-left : compact */
    .lcc-vn-timer {
        padding: 4px 12px !important;
        font-size: 15px !important;
    }
    .lcc-vn-timer-icon { width: 22px !important; height: 22px !important; }

    /* Bouton continuer : pas trop gros */
    .lcc-vn-continue-btn {
        width: 40px !important;
        height: 40px !important;
    }
    .lcc-vn-continue-btn svg { width: 20px !important; height: 20px !important; }

    /* Modales settings/help/pause : compactes en landscape */
    .lcc-vn-settings-card,
    .lcc-vn-help-card {
        max-width: 84vw !important;
        max-height: 88vh !important;
        padding: 16px 20px !important;
        overflow-y: auto;
    }
    .lcc-vn-settings-card h2,
    .lcc-vn-help-card h2 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    /* Panel tâches en overlay top-right : plus petit */
    .lcc-vn-tasks-panel {
        max-width: 240px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .lcc-vn-tasks-header { padding-bottom: 4px !important; margin-bottom: 4px !important; }
    .lcc-vn-tasks-list li { padding: 4px 0 !important; font-size: 12px !important; }
}

/* --- PORTRAIT très étroit (iPhone SE, phones compact) ---------------- */
@media (orientation: portrait) and (max-width: 400px) {
    .lcc-vn-title-overlay { padding: 20px 16px !important; max-width: 92% !important; }
    .lcc-vn-title { font-size: clamp(26px, 8vw, 38px) !important; }
    .lcc-vn-subtitle { font-size: clamp(13px, 4vw, 17px) !important; }
    .lcc-vn-bubble {
        max-width: 90vw !important;
        padding: 12px 14px !important;
        font-size: 14.5px !important;
    }
    .lcc-vn-narration {
        max-width: 92vw !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
    .lcc-vn-choices {
        width: 92vw !important;
        gap: 6px !important;
    }
    .lcc-vn-choice {
        padding: 10px 12px !important;
        font-size: 13.5px !important;
    }
    .lcc-vn-hud-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .lcc-vn-timer { padding: 3px 10px !important; font-size: 14px !important; }
    /* Bouton continue moins gros pour laisser respirer */
    .lcc-vn-continue-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* --- Général mobile : safe-area iPhone notch + bord ------------------ */
@media (max-width: 900px) {
    .lcc-vn-container,
    .lcc-vn-stage {
        padding-top: env(safe-area-inset-top, 0) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
    }
    /* Prévient le zoom iOS Safari sur inputs (font-size < 16px = zoom auto) */
    .lcc-vn-container input,
    .lcc-vn-container textarea,
    .lcc-vn-container select { font-size: 16px !important; }
}

/* --- v1.68.21 — TC map error retry overlay ------- */
.lcc-tc-map-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(20, 16, 10, 0.85);
    color: var(--blanc-casse, #F5EFE6);
    font-size: 16px;
    line-height: 1.4;
    z-index: 10;
    gap: 16px;
}
.lcc-tc-map-retry {
    display: inline-block;
    padding: 12px 24px;
    background: var(--dore, #D4B16A);
    color: #1a1408;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s;
}
.lcc-tc-map-retry:hover { transform: scale(1.05); }

/* --- Mini-jeux : dégât d'espace côté droit/gauche en landscape ------- */
@media (orientation: landscape) and (max-height: 500px) {
    .lcc-mg-panel, .lcc-mg-content {
        max-width: 90vw !important;
        max-height: 92vh !important;
        padding: 12px 16px !important;
    }
    .lcc-mg-question, .lcc-mg-prompt {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .lcc-mg-answers {
        gap: 6px !important;
    }
    .lcc-mg-answer {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-height: 38px !important;
    }
}

/* =====================================================================
 * v1.68.25 — LANDSCAPE MOBILE : refonte majeure suite retour user 04/07
 * ---------------------------------------------------------------------
 * Screens IMG_6738-6747 iPhone Plus landscape (~844x390 CSS pixels) :
 *  - Bulle centree verticalement couvrait le perso (invisible)
 *  - Texte tronque "cet et" au lieu de "cet ete" (clip cote droit bulle)
 *  - HUD timer chevauchait le nom du perso ("ma" cache derriere timer)
 *  - Map village : pins overlap (frame > image, positions % du frame)
 *  - Choix scene : top narrateur coupe (overflow hidden)
 *  - Launcher titre coupe haut (top:50%+transform sur flex enfant KO)
 *
 * Refonte : pattern VN classique — bulle en BAS d'ecran pleine largeur,
 * perso au-dessus non couvert, HUD compact non-collidant.
 * !important pour override les regles precedentes de v1.68.20.
 * ===================================================================== */
@media (orientation: landscape) and (max-height: 500px) {

    /* --- BULLE staged : position fixed BAS d'ecran, largeur quasi totale --- */
    .lcc-vn-staged .lcc-vn-bubble {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 8px !important;
        top: auto !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        max-height: 42dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px 14px !important;
        z-index: 40 !important;
    }
    /* Reset des margins staged (bubble-left avait margin-right:26%, etc.) */
    .lcc-vn-staged .lcc-vn-bubble-left,
    .lcc-vn-staged .lcc-vn-bubble-right,
    .lcc-vn-staged .lcc-vn-bubble-narrator {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Les queues (::before/::after) pointaient vers la bouche du perso.
       Avec la bulle en bas d'ecran, elles n'ont plus de sens visuel. */
    .lcc-vn-staged .lcc-vn-bubble-left::before,
    .lcc-vn-staged .lcc-vn-bubble-left::after,
    .lcc-vn-staged .lcc-vn-bubble-right::before,
    .lcc-vn-staged .lcc-vn-bubble-right::after {
        display: none !important;
    }
    /* Texte bulle : wrap dur pour eviter que des mots longs coupent */
    .lcc-vn-staged .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-small  .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-medium .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-large  .lcc-vn-bubble-text {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        min-height: 0 !important;
        margin: 0 0 6px !important;
    }
    /* Nom perso : marge top pour ne pas etre colle au bord du bubble */
    .lcc-vn-staged .lcc-vn-bubble-name {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }

    /* --- PERSO : reduit et remonte AU-DESSUS de la bulle bottom-fixed --- */
    .lcc-vn-staged .lcc-vn-character {
        height: 56dvh !important;
        width: 40% !important;
        max-width: 380px !important;
        bottom: 44dvh !important;  /* Sit above the bubble strip */
    }
    .lcc-vn-staged .lcc-vn-character-left  { left: 2% !important; }
    .lcc-vn-staged .lcc-vn-character-right { right: 2% !important; }

    /* --- HUD : compact, coin haut-gauche, sans overlap avec bulle bottom --- */
    .lcc-vn-hud-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .lcc-vn-hud-left, .lcc-vn-hud-right {
        gap: 5px !important;
        padding: 6px !important;
    }
    .lcc-vn-timer {
        padding: 3px 10px !important;
        font-size: 13px !important;
    }
    .lcc-vn-timer-icon { width: 18px !important; height: 18px !important; }
    /* Bouton continue au coin droit du bubble, plus petit */
    .lcc-vn-continue-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .lcc-vn-continue-btn svg { width: 18px !important; height: 18px !important; }

    /* --- CHOICES scene : top narrator bubble scrollable, PAS coupee --- */
    .lcc-vn-choices {
        max-height: 90dvh !important;
        overflow-y: auto !important;
        width: min(720px, 92vw) !important;
    }
    .lcc-vn-choices-question {
        overflow-y: visible !important;
        max-height: none !important;
    }

    /* --- MAP village : frame hug l'image, pins alignes dessus --- */
    .lcc-vn-map-screen {
        justify-content: flex-start !important;
        padding-top: 44px !important;  /* ne se colle pas au HUD */
    }
    .lcc-vn-map-frame {
        flex: 0 0 auto !important;
        width: fit-content !important;
        max-width: 96vw !important;
        margin: 0 auto 4dvh !important;
    }
    .lcc-vn-map-image {
        display: block !important;
        max-height: 60dvh !important;
        max-width: 96vw !important;
        width: auto !important;
        height: auto !important;
    }
    .lcc-vn-map-pin {
        padding: 4px 8px !important;
        font-size: 10.5px !important;
        border-width: 2px !important;
    }
    .lcc-vn-pin-icon { font-size: 12px !important; }
    .lcc-vn-map-narration {
        font-size: 13px !important;
        padding: 8px 14px !important;
        max-width: 92vw !important;
    }

    /* --- LAUNCHER : titre pas coupe, container flex-friendly --- */
    .lcc-vn-title-screen {
        /* Reset flex centering pour permettre scroll si besoin */
        align-items: center !important;
        overflow-y: auto !important;
    }
    .lcc-vn-title-overlay {
        position: static !important;  /* override le top/transform de v1.68.20 */
        transform: none !important;
        max-width: 90vw !important;
        max-height: 92dvh !important;
        padding: 12px 20px !important;
        overflow-y: auto !important;
        margin: auto !important;
    }
    .lcc-vn-title {
        font-size: clamp(22px, 5vw, 36px) !important;
        line-height: 1.05 !important;
        margin: 0 0 4px !important;
    }
    .lcc-vn-subtitle {
        font-size: clamp(12px, 2.8vw, 16px) !important;
        margin: 0 0 8px !important;
    }
    .lcc-vn-title-actions .btn,
    .lcc-vn-title-actions .lcc-vn-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-height: 34px !important;
    }

    /* --- Bird zone (TC): compact + grille adaptée --- */
    .lcc-bird-zone-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 6px !important;
        max-height: 82dvh !important;
    }
}

/* --- iPad/tablette landscape (~1024x768) : version intermediaire, ne
       reprend PAS la refonte "bulle en bas" mais evite les pires overlaps --- */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 900px) and (max-width: 1200px) {
    /* Bulle limitee en largeur pour ne pas ecraser le perso */
    .lcc-vn-staged .lcc-vn-bubble {
        max-width: 55vw !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
    .lcc-vn-staged .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-small  .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-medium .lcc-vn-bubble-text,
    .lcc-vn-staged .lcc-vn-text-large  .lcc-vn-bubble-text {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
    /* Map village : frame hug image aussi sur iPad landscape */
    .lcc-vn-map-frame {
        width: fit-content !important;
        max-width: 96vw !important;
    }
    .lcc-vn-map-image {
        display: block !important;
        max-height: 70vh !important;
    }
}

/* =====================================================================
 * v1.68.37 — MINI-JEUX DU COURS « LA ROUSSETTE D'ÉGYPTE »
 * Le mini-jeu « buffet » réutilise les classes .lcc-mg-courses existantes.
 * Ci-dessous : l'écholocation et la balance.
 * ===================================================================== */

/* ---------- 1. ÉCHOLOCATION ---------- */
.lcc-mg-echo {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    max-width: min(620px, 92vw);
}
.lcc-mg-echo__title {
    font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #d4b16a;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.lcc-mg-echo__hint {
    font-size: 14px; line-height: 1.45; color: rgba(245,239,230,.88);
    text-align: center; max-width: 500px;
}
.lcc-mg-echo__grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
    padding: 14px; border-radius: 14px;
    background: rgba(4, 8, 18, .82);
    border: 1px solid rgba(140, 190, 255, .22);
    box-shadow: inset 0 0 60px rgba(0,0,0,.7);
}
.lcc-mg-echo-cell {
    width: 62px; height: 62px; border-radius: 10px; cursor: pointer;
    background: rgba(16, 22, 40, .95);
    border: 1px solid rgba(120, 150, 210, .18);
    color: #cbe7ff; font-size: 20px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.lcc-mg-echo-cell:hover:not(.is-found):not(.is-hot):not(.is-warm):not(.is-cold) {
    background: rgba(30, 44, 78, .95); border-color: rgba(150, 190, 255, .5);
    transform: scale(1.06);
}
.lcc-mg-echo-cell.is-cold  { background: rgba(18, 24, 44, .95); color: rgba(150,170,210,.5); cursor: default; }
.lcc-mg-echo-cell.is-warm  { background: rgba(58, 62, 40, .95); border-color: rgba(212,177,106,.45); color: #e8c87a; cursor: default; }
.lcc-mg-echo-cell.is-hot   { background: rgba(86, 64, 26, .95); border-color: rgba(255,190,90,.75); color: #ffd48a; cursor: default; }
.lcc-mg-echo-cell.is-found {
    background: rgba(30, 96, 60, .95); border-color: #2ecc71; cursor: default;
    animation: lccEchoFound .5s ease;
}
@keyframes lccEchoFound { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.lcc-mg-echo-wave { animation: lccEchoPing 1.6s ease-in-out infinite; display: inline-block; }
@keyframes lccEchoPing { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.15); } }
.lcc-mg-echo__legend {
    display: flex; gap: 18px; font-size: 12.5px; color: rgba(245,239,230,.7);
}
.lcc-mg-echo__legend b { color: #ffd48a; }
.lcc-mg-echo__counter { font-size: 13px; color: rgba(245,239,230,.6); }

/* ---------- 2. LA BALANCE ---------- */
.lcc-mg-balance {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    max-width: min(720px, 94vw);
}
.lcc-mg-balance__title {
    font-family: 'Cormorant Garamond', serif; font-size: 26px; color: #d4b16a;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.lcc-mg-balance__hint {
    font-size: 14px; line-height: 1.45; color: rgba(245,239,230,.88);
    text-align: center; max-width: 560px;
}
.lcc-mg-balance__hint b { color: #8fd0ff; white-space: nowrap; }
.lcc-mg-balance__gauge {
    position: relative; width: min(520px, 88vw); height: 22px;
    border-radius: 999px; overflow: hidden;
    background: rgba(10, 16, 30, .92);
    border: 1px solid rgba(140, 190, 255, .25);
}
.lcc-mg-balance__zone {
    position: absolute; top: 0; bottom: 0;
    background: rgba(46, 204, 113, .18);
    border-left: 2px solid rgba(46, 204, 113, .55);
    border-right: 2px solid rgba(46, 204, 113, .55);
}
.lcc-mg-balance__fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, #4a6fa5, #6f9fd8);
    transition: width .25s cubic-bezier(.4,0,.2,1);
}
.lcc-mg-balance__fill.is-ok   { background: linear-gradient(90deg, #219a54, #2ecc71); }
.lcc-mg-balance__fill.is-over { background: linear-gradient(90deg, #a33226, #e74c3c); }
.lcc-mg-balance__readout {
    font-size: 22px; font-weight: 700; color: #cbe7ff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.lcc-mg-balance__readout small { font-size: 13px; font-weight: 400; opacity: .8; }
.lcc-mg-balance__readout.is-ok   { color: #2ecc71; }
.lcc-mg-balance__readout.is-over { color: #e74c3c; }
.lcc-mg-balance__basket {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
    min-height: 42px; width: min(560px, 92vw); padding: 8px;
    border-radius: 10px; background: rgba(8, 12, 24, .7);
    border: 1px dashed rgba(140, 190, 255, .28);
}
.lcc-mg-bal-empty { color: rgba(245,239,230,.4); font-size: 13px; font-style: italic; align-self: center; }
.lcc-mg-bal-chip {
    background: rgba(30, 44, 78, .95); border: 1px solid rgba(140,190,255,.35);
    color: #dceaff; border-radius: 999px; padding: 5px 11px; font-size: 14px;
    cursor: pointer; font-family: inherit; transition: all .15s ease;
}
.lcc-mg-bal-chip small { opacity: .75; font-size: 11.5px; }
.lcc-mg-bal-chip:hover { background: rgba(140, 60, 60, .8); border-color: #e74c3c; }
.lcc-mg-balance__shelf {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px; width: min(560px, 92vw);
}
.lcc-mg-bal-fruit {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px; border-radius: 10px; cursor: pointer;
    background: rgba(20, 28, 50, .92); border: 1px solid rgba(140,190,255,.22);
    color: #dceaff; font-family: inherit; transition: all .15s ease;
}
.lcc-mg-bal-fruit:hover {
    background: rgba(40, 62, 108, .95); border-color: #8fd0ff; transform: translateY(-2px);
}
.lcc-mg-bal-fruit__icon  { font-size: 26px; line-height: 1; }
.lcc-mg-bal-fruit__label { font-size: 12px; }
.lcc-mg-bal-fruit__g     { font-size: 11px; color: #8fd0ff; font-weight: 700; }

/* ---------- Responsive : mobile / landscape court ---------- */
@media (max-width: 768px), (orientation: landscape) and (max-height: 520px) {
    .lcc-mg-echo-cell { width: 46px; height: 46px; font-size: 16px; }
    .lcc-mg-echo__title, .lcc-mg-balance__title { font-size: 20px; }
    .lcc-mg-echo__hint, .lcc-mg-balance__hint { font-size: 12.5px; }
    .lcc-mg-echo__legend { gap: 10px; font-size: 11px; }
    .lcc-mg-balance__readout { font-size: 18px; }
    .lcc-mg-bal-fruit__icon { font-size: 21px; }
    .lcc-mg-balance__shelf { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }
}