/* ============================================================
   escape.css — Styles élève Escape Game eSVT
   M. POURCHER - 2026
   ============================================================ */

/* ---- Mode jeu : fond sombre immersif ---- */
body.escape-mode-jeu {
    background:#0f172a; /* défaut, écrasé dynamiquement par JS */
    transition:background 0.3s;
}
body.escape-mode-jeu #escape-container {
    padding-top:28px;
}
body.escape-mode-jeu #escape-etape {
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.08);
    box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
body.escape-mode-jeu .etape-titre {
    color:#f1f5f9;
    border-bottom-color:rgba(255,255,255,0.1);
}
body.escape-mode-jeu .etape-contenu {
    color:#cbd5e1;
}
body.escape-mode-jeu .etape-contenu a { color:#60a5fa; }
body.escape-mode-jeu .etape-contenu th { background:rgba(255,255,255,0.06); color:#e2e8f0; }
body.escape-mode-jeu .etape-contenu td { color:#cbd5e1; border-color:rgba(255,255,255,0.1); }
body.escape-mode-jeu .etape-contenu th,
body.escape-mode-jeu .etape-contenu td { border-color:rgba(255,255,255,0.1); }

body.escape-mode-jeu #escape-reponse {
    background:rgba(255,255,255,0.04);
    border-color:rgba(255,255,255,0.08);
    box-shadow:0 4px 24px rgba(0,0,0,0.3);
}
body.escape-mode-jeu .reponse-form input[type="text"],
body.escape-mode-jeu #input-reponse {
    background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.25);
    color:#f1f5f9;
}
body.escape-mode-jeu .reponse-form input[type="text"]::placeholder,
body.escape-mode-jeu #input-reponse::placeholder { color:#94a3b8; }
body.escape-mode-jeu .reponse-form input[type="text"]:focus,
body.escape-mode-jeu #input-reponse:focus {
    border-color:#db9b38; background:rgba(255,255,255,0.12);
    color:#fff;
}

body.escape-mode-jeu .qcm-option {
    background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12);
    color:#e2e8f0;
}
body.escape-mode-jeu .qcm-option:hover {
    background:rgba(219,155,56,0.12); border-color:#db9b38;
}
body.escape-mode-jeu .qcm-option.selected {
    background:rgba(219,155,56,0.15); border-color:#db9b38;
}
body.escape-mode-jeu .qcm-label,
body.escape-mode-jeu .anagramme-label,
body.escape-mode-jeu .dragdrop-label,
body.escape-mode-jeu .codecouleur-label,
body.escape-mode-jeu .grattage-label,
body.escape-mode-jeu .puzzle-label,
body.escape-mode-jeu .cadenas-label,
body.escape-mode-jeu .clavier-label,
body.escape-mode-jeu .t9-label {
    color:#94a3b8;
}

body.escape-mode-jeu .anagramme-source {
    background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1);
}
body.escape-mode-jeu .anagramme-cible {
    background:rgba(219,155,56,0.06); border-color:rgba(219,155,56,0.2);
}
body.escape-mode-jeu .anagramme-slot {
    border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.08);
    border-style:dashed; border-width:2px;
}

body.escape-mode-jeu .dragdrop-etiquettes {
    background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1);
}
body.escape-mode-jeu .dd-zone-label {
    background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.1);
    color:#e2e8f0;
}
body.escape-mode-jeu .dd-zone-drop {
    border-color:rgba(16,185,129,0.3); background:rgba(16,185,129,0.04);
}

body.escape-mode-jeu .codecouleur-saisie {
    background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1);
}
body.escape-mode-jeu .cc-slot {
    border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.04);
}

body.escape-mode-jeu .grattage-info {
    background:rgba(245,158,11,0.1); border-color:rgba(245,158,11,0.3);
}
body.escape-mode-jeu .grattage-contenu {
    background:rgba(255,255,255,0.08); color:#e2e8f0;
}

body.escape-mode-jeu .puzzle-code-form input,
body.escape-mode-jeu .grattage-code-form input {
    background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15);
    color:#f1f5f9;
}
body.escape-mode-jeu .puzzle-code-form input:focus,
body.escape-mode-jeu .grattage-code-form input:focus {
    border-color:#db9b38;
}

body.escape-mode-jeu #escape-indice {
    background:rgba(251,191,36,0.08); border-color:rgba(251,191,36,0.25);
}
body.escape-mode-jeu #indice-contenu { color:#fde68a; }

body.escape-mode-jeu .btn-escape-reset {
    background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15);
    color:#94a3b8;
}
body.escape-mode-jeu .btn-escape-reset:hover {
    border-color:#db9b38; color:#db9b38;
}

/* ---- Bandeau chronomètre ---- */
#escape-chrono-bar {
    position:sticky; top:0; z-index:90;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 20px;
    background:linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,0.3);
    gap:16px;
}
#chrono-left {
    flex:1; min-width:0;
}
#chrono-etape {
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:1px; color:#94a3b8;
}
#chrono-titre {
    font-size:14px; font-weight:700; color:#fff;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#chrono-center {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    min-width:180px;
}
#chrono-display {
    display:flex; align-items:center; gap:8px;
    font-size:28px; font-weight:800; font-variant-numeric:tabular-nums;
    letter-spacing:2px;
}
#chrono-display.chrono-urgence {
    animation:pulse-urgence 0.5s ease-in-out infinite alternate;
    color:#f87171;
}
@keyframes pulse-urgence {
    from { opacity:1; transform:scale(1); }
    to   { opacity:0.7; transform:scale(1.05); }
}
#chrono-ico { font-size:22px; }
#chrono-bar-wrap {
    width:100%; height:6px; background:rgba(255,255,255,0.15);
    border-radius:3px; overflow:hidden;
}
#chrono-bar-fill {
    height:100%; border-radius:3px;
    background:linear-gradient(90deg, #10b981, #34d399);
    transition:width 1s linear;
}
#chrono-right {
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
#chrono-joueur {
    font-size:12px; color:#94a3b8; font-weight:600;
}
#btn-indice {
    padding:6px 14px; border-radius:8px; border:1px solid rgba(251,191,36,0.5);
    background:rgba(251,191,36,0.15); color:#fbbf24;
    font-size:12px; font-weight:700; cursor:pointer;
    transition:background 0.15s, transform 0.15s;
}
#btn-indice:hover { background:rgba(251,191,36,0.3); transform:scale(1.05); }
#btn-indice:disabled { opacity:0.5; cursor:default; transform:none; }

/* ---- Conteneur principal ---- */
#escape-container {
    max-width:860px; margin:0 auto; padding:24px 20px 40px;
}

/* ---- Étape ---- */
#escape-etape {
    background:#fff; border-radius:16px;
    padding:32px; margin-bottom:20px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
    border:1px solid #e2e8f0;
}
.etape-titre {
    font-size:20px; font-weight:800; color:#1e293b;
    margin:0 0 20px; padding-bottom:16px;
    border-bottom:2px solid #f1f5f9;
}
.etape-contenu {
    font-size:15px; line-height:1.7; color:#334155;
}
.etape-contenu img { max-width:100%; height:auto; border-radius:8px; margin:12px 0; }
.etape-contenu iframe { max-width:100%; border-radius:8px; margin:12px 0; }
.etape-contenu a { color:#2563eb; text-decoration:underline; }
.etape-contenu table { border-collapse:collapse; width:100%; margin:12px 0; }
.etape-contenu th, .etape-contenu td { border:1px solid #e2e8f0; padding:8px 12px; }
.etape-contenu th { background:#f8fafc; font-weight:700; }

/* ---- Zone indice ---- */
#escape-indice {
    background:#fffbeb; border:1px solid #fde68a; border-radius:12px;
    padding:16px 20px; margin-bottom:20px;
    animation:fadeIn 0.3s ease-out;
}
#escape-indice::before {
    content:'💡 Indice'; display:block;
    font-size:12px; font-weight:800; color:#92400e;
    text-transform:uppercase; letter-spacing:0.5px;
    margin-bottom:8px;
}
#indice-contenu {
    font-size:14px; color:#78350f; line-height:1.6;
}

/* ---- Zone réponse ---- */
#escape-reponse {
    background:#fff; border-radius:16px;
    padding:24px; box-shadow:0 2px 12px rgba(0,0,0,0.06);
    border:1px solid #e2e8f0;
}
.reponse-form {
    display:flex; gap:12px; align-items:stretch;
}
.reponse-form input[type="text"] {
    flex:1; padding:14px 18px; border:2px solid #e2e8f0;
    border-radius:12px; font-size:16px; font-family:inherit;
    background:#f8fafc; color:#1e293b;
    transition:border-color 0.2s, box-shadow 0.2s;
}
.reponse-form input[type="text"]:focus {
    outline:none; border-color:#db9b38;
    box-shadow:0 0 0 4px rgba(219,155,56,0.15);
    background:#fff;
}
.reponse-form input[type="text"]::placeholder { color:#94a3b8; }
#btn-valider, .btn-suivant {
    padding:14px 28px; border:none; border-radius:12px;
    background:linear-gradient(135deg, #db9b38, #c8891f);
    color:#fff; font-size:16px; font-weight:800;
    cursor:pointer; white-space:nowrap;
    transition:transform 0.15s, box-shadow 0.15s;
    box-shadow:0 4px 12px rgba(219,155,56,0.3);
}
#btn-valider:hover, .btn-suivant:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(219,155,56,0.4);
}
#btn-valider:disabled { opacity:0.6; cursor:default; transform:none; }

/* ---- QCM amélioré ---- */
.qcm-wrap { text-align:center; }
.qcm-label {
    font-size:13px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
    margin-bottom:14px;
}
.reponse-qcm {
    display:flex; flex-direction:column; gap:10px;
}
.qcm-option {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; border:2px solid #e2e8f0;
    border-radius:12px; background:#f8fafc;
    font-size:15px; font-weight:500; color:#1e293b;
    cursor:pointer; transition:all 0.15s;
    text-align:left; font-family:inherit;
}
.qcm-option:hover {
    border-color:#db9b38; background:#fffbeb;
    transform:translateX(4px);
}
.qcm-option.selected {
    border-color:#db9b38; background:#fef3c7;
    box-shadow:0 0 0 3px rgba(219,155,56,0.2);
}
.qcm-lettre {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg, #db9b38, #c8891f);
    color:#fff; font-size:15px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    box-shadow:0 2px 6px rgba(219,155,56,0.3);
}
.qcm-texte { flex:1; line-height:1.4; }

/* ---- Widget Cadenas à rouleaux ---- */
.cadenas-wrap {
    display:flex; flex-direction:column; align-items:center; gap:16px;
}
.cadenas-label {
    font-size:14px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
}
.cadenas-body {
    display:flex; flex-direction:column; align-items:center;
    background:linear-gradient(180deg, #334155, #1e293b);
    border-radius:16px; padding:16px 24px 20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.06);
    position:relative;
}
.cadenas-anse {
    width:60%; height:28px;
    border:4px solid #94a3b8;
    border-bottom:none;
    border-radius:20px 20px 0 0;
    margin-bottom:-2px;
    position:relative;
}
.cadenas-anse-inner {
    position:absolute; top:4px; left:50%; transform:translateX(-50%);
    width:calc(100% - 16px); height:20px;
    border:4px solid #64748b;
    border-bottom:none;
    border-radius:14px 14px 0 0;
}
.cadenas-rouleaux {
    display:flex; gap:6px; align-items:center;
}
.rouleau-col {
    display:flex; flex-direction:column; align-items:center; gap:4px;
}
.rouleau-btn {
    width:44px; height:24px; border:none; border-radius:6px;
    background:rgba(255,255,255,0.08); color:#94a3b8;
    font-size:12px; cursor:pointer;
    transition:background 0.15s, color 0.15s, transform 0.1s;
    display:flex; align-items:center; justify-content:center;
}
.rouleau-btn:hover { background:rgba(255,255,255,0.18); color:#fff; }
.rouleau-btn:active { transform:scale(0.92); }
.rouleau-fenetre {
    width:44px; height:52px;
    background:linear-gradient(180deg, #0f172a, #1a1a2e, #0f172a);
    border:2px solid #475569;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
    box-shadow:inset 0 2px 8px rgba(0,0,0,0.5);
    position:relative;
}
.rouleau-fenetre::before,
.rouleau-fenetre::after {
    content:''; position:absolute; left:0; right:0; height:12px;
    pointer-events:none; z-index:1;
}
.rouleau-fenetre::before { top:0; background:linear-gradient(180deg, rgba(15,23,42,0.8), transparent); }
.rouleau-fenetre::after  { bottom:0; background:linear-gradient(0deg, rgba(15,23,42,0.8), transparent); }
.rouleau-valeur {
    font-size:28px; font-weight:900; color:#fbbf24;
    font-family:'Courier New', monospace;
    text-shadow:0 0 12px rgba(251,191,36,0.4);
    line-height:1;
}
.rouleau-valeur.rouleau-spin {
    animation:spinRouleau 0.15s ease-out;
}
@keyframes spinRouleau {
    0%   { transform:translateY(-8px); opacity:0.3; }
    100% { transform:translateY(0); opacity:1; }
}

/* ---- Widget Anagramme ---- */
.anagramme-wrap {
    display:flex; flex-direction:column; align-items:center; gap:16px;
}
.anagramme-label {
    font-size:14px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
}
.anagramme-source, .anagramme-cible {
    display:flex; flex-wrap:wrap; gap:8px;
    justify-content:center; min-height:56px;
    padding:12px; border-radius:12px; width:100%;
}
.anagramme-source {
    background:#f8fafc; border:2px dashed #e2e8f0;
}
.anagramme-cible {
    background:#fffbeb; border:2px dashed #db9b38;
}
.anagramme-slot {
    width:48px; height:48px; border-radius:10px;
    border:2px dashed #c8891f; background:rgba(219,155,56,0.08);
    display:flex; align-items:center; justify-content:center;
    transition:border-color 0.15s, background 0.15s;
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.06);
}
.anagramme-slot:empty { }
.anagramme-slot .anagramme-lettre { margin:0; }
.anagramme-lettre {
    width:48px; height:48px; border-radius:10px;
    background:linear-gradient(135deg, #db9b38, #c8891f);
    color:#fff; font-size:22px; font-weight:900;
    display:flex; align-items:center; justify-content:center;
    cursor:grab; user-select:none; -webkit-user-select:none;
    box-shadow:0 3px 8px rgba(219,155,56,0.3);
    transition:transform 0.15s, box-shadow 0.15s;
    font-family:'Courier New', monospace;
}
.anagramme-lettre:hover { transform:scale(1.08); box-shadow:0 4px 12px rgba(219,155,56,0.4); }
.anagramme-lettre.dragging { opacity:0.4; transform:scale(0.9); }
.anagramme-ghost {
    position:fixed; z-index:99999; pointer-events:none;
    opacity:0.85; transform:scale(1.1);
}
.anagramme-sep {
    color:#db9b38; font-size:18px; font-weight:700;
}
.anagramme-actions {
    display:flex; gap:12px; align-items:center;
}

/* ---- Widget Drag & Drop ---- */
.dragdrop-wrap {
    display:flex; flex-direction:column; align-items:center; gap:20px;
}
.dragdrop-label {
    font-size:14px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
}
.dragdrop-etiquettes {
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
    padding:16px; border-radius:12px; width:100%;
    background:#f8fafc; border:2px dashed #e2e8f0;
    min-height:52px;
}
.dd-etiquette {
    padding:10px 18px; border-radius:10px;
    background:linear-gradient(135deg, #2563eb, #1d4ed8);
    color:#fff; font-size:14px; font-weight:700;
    cursor:grab; user-select:none; -webkit-user-select:none;
    box-shadow:0 3px 8px rgba(37,99,235,0.3);
    transition:transform 0.15s, box-shadow 0.15s;
    white-space:nowrap;
}
.dd-etiquette:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(37,99,235,0.4); }
.dd-etiquette.dragging { opacity:0.4; transform:scale(0.9); }
.dd-ghost {
    position:fixed; z-index:99999; pointer-events:none;
    opacity:0.85; transform:scale(1.05);
}
.dragdrop-zones {
    display:flex; flex-wrap:wrap; gap:14px; justify-content:center; width:100%;
}
.dd-zone {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    min-width:130px; flex:1; max-width:200px;
}
.dd-zone-label {
    font-size:13px; font-weight:700; color:#1e293b;
    text-align:center; padding:8px 12px;
    background:#f1f5f9; border-radius:8px; width:100%;
    border:1px solid #e2e8f0;
}
.dd-zone-drop {
    width:100%; min-height:48px; border-radius:10px;
    border:2px dashed #10b981; background:rgba(16,185,129,0.04);
    display:flex; align-items:center; justify-content:center;
    padding:6px; transition:background 0.15s, border-color 0.15s;
}
.dd-zone-drop:empty::after {
    content:'?'; color:#94a3b8; font-size:18px; font-weight:700;
}
.dd-zone-drop .dd-etiquette { margin:0; cursor:grab; }
.dragdrop-actions {
    display:flex; gap:12px; align-items:center;
}

/* ---- Widget Puzzle Image ---- */
.puzzle-wrap {
    display:flex; flex-direction:column; align-items:center; gap:16px;
}
.puzzle-label {
    font-size:14px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
}
.puzzle-grid {
    display:grid; gap:3px; width:100%; max-width:360px;
    background:#1e293b; padding:3px; border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.puzzle-cell {
    aspect-ratio:1; border-radius:4px; cursor:grab;
    background-color:#334155;
    transition:transform 0.15s, box-shadow 0.15s;
}
.puzzle-cell:hover { transform:scale(1.03); box-shadow:0 2px 8px rgba(0,0,0,0.3); }
.puzzle-cell.dragging { opacity:0.4; }
.puzzle-code-form {
    display:flex; gap:12px; width:100%; max-width:400px;
}
.puzzle-code-form input { flex:1; padding:12px 16px; border:2px solid #e2e8f0; border-radius:10px; font-size:15px; font-family:inherit; }
.puzzle-code-form input:focus { outline:none; border-color:#db9b38; }

/* ---- Widget Code Couleur ---- */
.codecouleur-wrap {
    display:flex; flex-direction:column; align-items:center; gap:16px;
}
.codecouleur-label {
    font-size:14px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
}
.codecouleur-saisie {
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    padding:16px; background:#f8fafc; border-radius:12px;
    border:2px dashed #e2e8f0; min-height:60px; width:100%;
}
.cc-slot {
    width:48px; height:48px; border-radius:12px;
    border:2px dashed #cbd5e1; background:#fff;
    transition:all 0.2s;
}
.cc-slot.cc-filled {
    border-style:solid; border-color:transparent;
    box-shadow:0 3px 8px rgba(0,0,0,0.2);
    transform:scale(1.05);
}
.codecouleur-boutons {
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
}
.cc-btn {
    padding:10px 20px; border:none; border-radius:10px;
    color:#fff; font-size:14px; font-weight:700;
    cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,0.2);
    transition:transform 0.15s, box-shadow 0.15s;
}
.cc-btn:hover { transform:scale(1.08); box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.cc-btn:active { transform:scale(0.95); }
.codecouleur-actions { display:flex; gap:12px; align-items:center; }

/* ---- Widget Carte à gratter ---- */
.grattage-wrap {
    display:flex; flex-direction:column; align-items:center; gap:16px;
}
.grattage-label {
    font-size:14px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px; text-align:center;
}
.grattage-info {
    font-size:13px; color:#f59e0b; font-weight:600;
    background:#fffbeb; padding:8px 16px; border-radius:8px;
    border:1px solid #fde68a;
}
.grattage-cartes {
    display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.grattage-carte {
    width:100px; height:100px; border-radius:12px;
    cursor:pointer; position:relative; overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,0.15);
    transition:transform 0.15s;
}
.grattage-carte:hover { transform:scale(1.05); }
.grattage-cache {
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:linear-gradient(135deg, #94a3b8, #64748b);
    display:flex; align-items:center; justify-content:center;
    font-size:28px; font-weight:800; color:rgba(255,255,255,0.5);
    transition:opacity 0.4s;
    z-index:2;
}
.grattage-cache::after {
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background:repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(255,255,255,0.05) 4px, rgba(255,255,255,0.05) 8px);
}
.grattage-contenu {
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:#fff; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#1e293b; padding:8px;
    text-align:center; line-height:1.3; z-index:1;
}
.grattage-carte.grattee .grattage-cache { opacity:0; pointer-events:none; }
.grattage-carte.grattee { cursor:default; box-shadow:0 1px 4px rgba(0,0,0,0.1); }
.grattage-code-form {
    display:flex; gap:12px; width:100%; max-width:400px;
}
.grattage-code-form input { flex:1; padding:12px 16px; border:2px solid #e2e8f0; border-radius:10px; font-size:15px; font-family:inherit; }
.grattage-code-form input:focus { outline:none; border-color:#db9b38; }

/* ---- Widget Clavier virtuel ---- */
.clavier-wrap {
    display:flex; flex-direction:column; align-items:center; gap:16px;
    max-width:500px; margin:0 auto;
}
.clavier-label {
    font-size:13px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px; text-align:center;
}
.clavier-ecran {
    width:100%; background:#0f172a; border-radius:12px; overflow:hidden;
    border:1px solid #334155; box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.clavier-ecran-header {
    display:flex; align-items:center; gap:6px;
    padding:8px 14px; background:#1e293b;
}
.clavier-dot { width:10px; height:10px; border-radius:50%; }
.clavier-ecran-body {
    padding:16px 20px; font-family:'Courier New',monospace;
    font-size:15px; color:#10b981; min-height:60px;
}
.clavier-prompt { color:#475569; margin-bottom:6px; }
.clavier-saisie { font-size:20px; font-weight:700; word-break:break-all; }
.clavier-curseur {
    color:#fbbf24; animation:clignoter 0.8s step-end infinite;
}
@keyframes clignoter { 0%,100%{opacity:1;} 50%{opacity:0;} }

.clavier-touches { width:100%; }
.clavier-row {
    display:flex; gap:4px; margin-bottom:4px; justify-content:center;
}
.clavier-touche {
    padding:12px 8px; min-width:32px; border:none; border-radius:8px;
    background:#334155; color:#e2e8f0; font-size:14px; font-weight:700;
    cursor:pointer; font-family:inherit;
    transition:background 0.1s, transform 0.1s;
    box-shadow:0 2px 0 #1e293b;
}
.clavier-touche:hover { background:#475569; }
.clavier-touche:active { transform:translateY(2px); box-shadow:none; }
.clavier-num { background:#1e293b; color:#fbbf24; }
.clavier-num:hover { background:#334155; }
.clavier-special { background:#7c3aed; color:#fff; min-width:48px; }
.clavier-special:hover { background:#6d28d9; }
.clavier-entrer {
    background:linear-gradient(135deg,#10b981,#059669);
    color:#fff; font-weight:800;
}
.clavier-entrer:hover { background:#059669; }

/* ---- Widget Clavier T9 (multi-tap, 07/11/2026) ---- */
.t9-wrap {
    display:flex; flex-direction:column; align-items:center; gap:14px;
    max-width:340px; margin:0 auto;
}
.t9-label {
    font-size:13px; font-weight:700; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px; text-align:center;
}
.t9-telephone {
    width:100%; box-sizing:border-box; padding:14px; border-radius:22px;
    background:linear-gradient(180deg, #334155, #1e293b);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 8px 28px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.t9-ecran {
    background:#b8c9a3; color:#1f2a1a; border-radius:10px;
    padding:10px 12px; min-height:84px; box-sizing:border-box;
    font-family:'Courier New', monospace;
    box-shadow:inset 0 2px 8px rgba(0,0,0,0.35);
    display:flex; flex-direction:column; justify-content:space-between; gap:6px;
}
.t9-saisie {
    font-size:20px; font-weight:700; line-height:1.3;
    white-space:pre-wrap; word-break:break-all;
}
.t9-en-cours { text-decoration:underline; background:rgba(31,42,26,0.15); }
.t9-curseur { animation:clignoter 0.8s step-end infinite; }
.t9-cycle { font-size:12px; letter-spacing:2px; min-height:16px; opacity:0.75; }
.t9-cycle-actif { font-weight:900; text-decoration:underline; opacity:1; }
.t9-touches {
    display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px;
}
.t9-touche {
    min-height:56px; border:none; border-radius:12px;
    background:#475569; color:#f1f5f9; font-family:inherit; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 3px 0 #1e293b;
    transition:background 0.1s, transform 0.1s;
    touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.t9-touche:hover { background:#64748b; }
.t9-touche:active { transform:translateY(3px); box-shadow:none; }
.t9-chiffre { font-size:20px; font-weight:800; line-height:1; }
.t9-lettres {
    font-size:10px; font-weight:700; letter-spacing:1.5px;
    color:#fbbf24; margin-top:3px; min-height:12px;
}
.t9-special { background:#7c3aed; }
.t9-special:hover { background:#6d28d9; }
.t9-suivant { background:#0ea5e9; }
.t9-suivant:hover { background:#0284c7; }
.t9-actions { display:flex; gap:10px; width:100%; align-items:stretch; }
.t9-actions #btn-valider { flex:1; }

/* ---- Feedback ---- */
#reponse-feedback {
    margin-top:16px; padding:12px 18px; border-radius:10px;
    font-size:14px; font-weight:600;
    animation:fadeIn 0.3s ease-out;
}
.feedback-ok {
    background:#f0fdf4; border:1px solid #bbf7d0; color:#166534;
}
.feedback-ko {
    background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
}
body.escape-mode-jeu .feedback-ok {
    background:rgba(16,185,129,0.12); border-color:rgba(16,185,129,0.3); color:#6ee7b7;
}
body.escape-mode-jeu .feedback-ko {
    background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.3); color:#fca5a5;
}

/* Shake animation (mauvaise réponse) */
.shake {
    animation:shakeAnim 0.5s ease-in-out;
}
@keyframes shakeAnim {
    0%, 100% { transform:translateX(0); }
    15% { transform:translateX(-12px); }
    30% { transform:translateX(10px); }
    45% { transform:translateX(-8px); }
    60% { transform:translateX(6px); }
    75% { transform:translateX(-4px); }
    90% { transform:translateX(2px); }
}

/* Écran de transition entre étapes */
#transition-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    z-index:99999;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    opacity:0;
    transition:opacity 0.4s ease-out;
}
#transition-overlay.visible { opacity:1; }
.transition-content {
    text-align:center;
    animation:transitionPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.transition-ico {
    font-size:72px; margin-bottom:16px;
    animation:transitionBounce 0.6s ease-out 0.3s both;
}
.transition-text {
    font-size:28px; font-weight:800; color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,0.3);
    margin-bottom:8px;
}
.transition-sub {
    font-size:16px; color:rgba(255,255,255,0.7); font-weight:500;
}
.transition-stats {
    display:flex; justify-content:center; gap:32px;
    margin:20px 0;
    animation:fadeIn 0.5s ease-out 0.6s both;
}
.transition-stat { text-align:center; }
.transition-stat-val {
    display:block; font-size:24px; font-weight:800; color:#fbbf24;
    text-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.transition-stat-lbl {
    display:block; font-size:12px; color:rgba(255,255,255,0.5);
    text-transform:uppercase; letter-spacing:1px; margin-top:4px;
}
.transition-termine .transition-sub {
    animation:fadeIn 0.5s ease-out 0.8s both;
}
.transition-termine .transition-ico {
    animation:transitionSpin 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes transitionPop {
    0% { transform:scale(0.3); opacity:0; }
    100% { transform:scale(1); opacity:1; }
}
@keyframes transitionBounce {
    0% { transform:scale(0); }
    50% { transform:scale(1.3); }
    100% { transform:scale(1); }
}
@keyframes transitionSpin {
    0% { transform:scale(0) rotate(-180deg); }
    100% { transform:scale(1) rotate(0deg); }
}

@keyframes fadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ---- Écrans de fin (terminé, échoué, erreur) ---- */
.escape-fin-wrap {
    display:flex; align-items:center; justify-content:center;
    min-height:calc(100vh - 80px); padding:20px;
}
.escape-fin {
    text-align:center; max-width:480px; width:100%;
    padding:48px 32px; border-radius:20px;
    box-shadow:0 8px 32px rgba(0,0,0,0.1);
}
.escape-fin.termine {
    background:linear-gradient(135deg, #f0fdf4, #dcfce7);
    border:1px solid #bbf7d0;
}
.escape-fin.echoue {
    background:linear-gradient(135deg, #fef2f2, #fee2e2);
    border:1px solid #fecaca;
}
.escape-fin.erreur {
    background:linear-gradient(135deg, #fffbeb, #fef3c7);
    border:1px solid #fde68a;
}
.fin-emoji { font-size:64px; margin-bottom:16px; }
.escape-fin h2 { font-size:28px; font-weight:800; color:#1e293b; margin:0 0 8px; }
.escape-fin p { font-size:15px; color:#475569; margin:0 0 24px; line-height:1.6; }
.fin-stats {
    display:flex; justify-content:center; gap:24px;
    margin-bottom:28px; flex-wrap:wrap;
}
.fin-stat { text-align:center; }
.fin-stat-val {
    font-size:24px; font-weight:800; color:#1e293b;
}
.fin-stat-lbl {
    font-size:12px; color:#64748b; font-weight:600;
    text-transform:uppercase; letter-spacing:0.5px;
}
.btn-escape-retour {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:10px;
    background:linear-gradient(135deg, #db9b38, #c8891f);
    color:#fff; font-size:14px; font-weight:700;
    text-decoration:none !important;
    transition:transform 0.15s, box-shadow 0.15s;
    box-shadow:0 4px 12px rgba(219,155,56,0.3);
}
.btn-escape-retour:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(219,155,56,0.4);
    text-decoration:none !important;
}
.fin-btns {
    display:flex; align-items:center; justify-content:center;
    gap:12px; flex-wrap:wrap;
}
.btn-escape-reset {
    display:inline-flex; align-items:center; gap:8px;
    padding:12px 24px; border-radius:10px;
    background:#fff; color:#475569; font-size:14px; font-weight:700;
    border:2px solid #e2e8f0; cursor:pointer; font-family:inherit;
    transition:transform 0.15s, border-color 0.15s, color 0.15s;
}
.btn-escape-reset:hover {
    transform:translateY(-2px);
    border-color:#db9b38; color:#db9b38;
}

/* ---- Accueil ---- */
.escape-accueil {
    max-width:700px; margin:0 auto; padding:32px 20px;
}
.escape-accueil-header {
    text-align:center; margin-bottom:32px;
}
.escape-accueil-header h2 {
    font-size:28px; font-weight:800; color:#1e293b; margin:0 0 8px;
}
.escape-accueil-header p {
    font-size:15px; color:#64748b; margin:0;
}

/* Code form */
.escape-code-form-wrap {
    background:#fff; border-radius:16px;
    padding:32px; margin-bottom:32px;
    box-shadow:0 4px 16px rgba(0,0,0,0.06);
    border:1px solid #e2e8f0;
    text-align:center;
}
.escape-code-astuce {
    margin:0 0 18px; font-size:15px; color:#64748b;
}
.escape-code-form {
    display:flex; gap:12px; justify-content:center;
    max-width:440px; margin:0 auto;
}
.escape-code-form input[type="text"] {
    flex:1; padding:16px 20px; border:2px solid #e2e8f0;
    border-radius:12px; font-size:20px; font-weight:800;
    font-family:monospace; letter-spacing:4px;
    text-align:center; background:#f8fafc; color:#1e293b;
    transition:border-color 0.2s;
}
.escape-code-form input[type="text"]:focus {
    outline:none; border-color:#db9b38;
    box-shadow:0 0 0 4px rgba(219,155,56,0.15);
}
.escape-code-form button {
    padding:16px 28px; border:none; border-radius:12px;
    background:linear-gradient(135deg, #db9b38, #c8891f);
    color:#fff; font-size:16px; font-weight:800;
    cursor:pointer; white-space:nowrap;
    transition:transform 0.15s;
    box-shadow:0 4px 12px rgba(219,155,56,0.3);
}
.escape-code-form button:hover { transform:translateY(-2px); }
.code-erreur {
    margin-top:16px; padding:10px 16px; border-radius:8px;
    background:#fef2f2; border:1px solid #fecaca;
    color:#991b1b; font-size:13px; font-weight:600;
}
.code-erreur a { color:#dc2626; text-decoration:underline; }

/* Mes parties */
.escape-mes-parties h3 {
    font-size:18px; font-weight:700; color:#1e293b; margin:0 0 16px;
}
.parties-grid {
    display:flex; flex-direction:column; gap:10px;
}
.partie-card {
    display:flex; align-items:center; gap:16px;
    padding:12px 16px; background:#fff; border-radius:12px;
    border:1px solid #e2e8f0; text-decoration:none !important;
    transition:box-shadow 0.15s, transform 0.15s;
}
.partie-card:hover {
    box-shadow:0 4px 16px rgba(0,0,0,0.08);
    transform:translateY(-1px);
    text-decoration:none !important;
}
.partie-img {
    width:56px; height:56px; border-radius:10px; flex-shrink:0;
    background-size:cover; background-position:center;
    background-color:#f8fafc;
}
.partie-img-placeholder {
    display:flex; align-items:center; justify-content:center;
    font-size:24px; background:linear-gradient(135deg,#fef3c7,#fde68a);
}
.partie-info { flex:1; min-width:0; }
.partie-titre {
    font-size:15px; font-weight:700; color:#1e293b;
    margin-bottom:4px;
}
.partie-meta {
    font-size:12px; color:#64748b;
    display:flex; align-items:center; gap:8px;
}
.partie-statut { font-weight:700; }
.partie-en-cours .partie-statut { color:#db9b38; }
.partie-termine .partie-statut { color:#10b981; }
.partie-echoue .partie-statut { color:#ef4444; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    #escape-chrono-bar {
        flex-wrap:wrap; gap:10px; padding:10px 14px;
    }
    #chrono-left { order:1; flex:1; }
    #chrono-right { order:2; flex:0 0 auto; }
    #chrono-center { order:3; width:100%; min-width:0; }
    #chrono-display { font-size:22px; }
    #escape-etape { padding:20px; }
    .etape-titre { font-size:17px; }
    .reponse-form { flex-direction:column; }
    .reponse-form input[type="text"] { font-size:16px; }
    .escape-code-form { flex-direction:column; }
    .escape-code-form input[type="text"] { font-size:18px; letter-spacing:3px; }
    .fin-stats { gap:16px; }
    .fin-stat-val { font-size:20px; }
    .rouleau-fenetre { width:38px; height:44px; }
    .rouleau-btn { width:38px; height:22px; }
    .rouleau-valeur { font-size:24px; }
    .cadenas-rouleaux { gap:4px; }
    .cadenas-body { padding:12px 16px 16px; }
    .anagramme-lettre, .anagramme-slot { width:40px; height:40px; font-size:18px; }
    .dd-zone { min-width:100px; max-width:160px; }
    .dd-etiquette { padding:8px 14px; font-size:13px; }
    .puzzle-grid { max-width:280px; }
    .puzzle-code-form { flex-direction:column; }
    .cc-slot { width:40px; height:40px; }
    .cc-btn { padding:8px 14px; font-size:12px; }
    .grattage-carte { width:80px; height:80px; }
    .grattage-code-form { flex-direction:column; }
    .clavier-touche { padding:10px 6px; min-width:26px; font-size:12px; }
    .clavier-ecran-body { font-size:13px; }
    .clavier-saisie { font-size:16px; }
    .t9-saisie { font-size:18px; }
}

/* ---- Zoom image (clic pour agrandir le contenu d'une étape) ---- */
.etape-contenu img {
    cursor: zoom-in;
}
#escape-image-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 999997;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    cursor: zoom-out;
    overflow: hidden;
    /* Pas de touch-action: manipulation ici : ça désactiverait le
       pinch-to-zoom / double-tap qu'on gère nous-mêmes en JS sur
       l'image (voir escape.php) pour rester indépendant du zoom
       navigateur, désactivé site-wide dans header.php. */
}
#escape-image-zoom-overlay img {
    max-width: 92vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    cursor: zoom-out;
    touch-action: none;
}
#escape-image-zoom-fermer {
    position: fixed;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    font-size: 26px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    z-index: 999998;
}

/* ---- Boîte à outils ---- */
#btn-outils {
    padding:6px 14px; border-radius:8px; border:1px solid rgba(148,163,184,0.5);
    background:rgba(148,163,184,0.15); color:#cbd5e1;
    font-size:12px; font-weight:700; cursor:pointer;
    transition:background 0.15s, transform 0.15s;
}
#btn-outils:hover { background:rgba(148,163,184,0.3); transform:scale(1.05); }

/* Tiroir latéral : fixe, hors flux, qui glisse depuis la droite plutôt
   que de s'insérer dans le contenu de l'étape. */
#escape-outils {
    position:fixed; top:0; right:0; bottom:0;
    width:300px; max-width:86vw;
    background:#fff;
    padding:20px 22px 24px;
    margin:0; border-radius:0;
    box-shadow:-6px 0 28px rgba(0,0,0,0.18);
    border:none; border-left:1px solid #e2e8f0;
    overflow-y:auto;
    z-index:999985;
    transform:translateX(100%);
    transition:transform 0.25s ease;
}
#escape-outils.ouvert { transform:translateX(0); }
body.escape-mode-jeu #escape-outils {
    background:#1e293b;
    border-left-color:rgba(255,255,255,0.08);
    box-shadow:-6px 0 28px rgba(0,0,0,0.4);
}
.outils-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:14px;
}
.outils-titre {
    font-size:13px; font-weight:800; color:#64748b;
    text-transform:uppercase; letter-spacing:0.5px;
}
body.escape-mode-jeu .outils-titre { color:#94a3b8; }
.outils-fermer {
    width:28px; height:28px; border-radius:50%;
    border:1px solid #e2e8f0; background:#f8fafc; color:#64748b;
    font-size:13px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s, transform 0.15s;
}
.outils-fermer:hover { background:#e2e8f0; transform:scale(1.08); }
body.escape-mode-jeu .outils-fermer { border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.06); color:#cbd5e1; }
body.escape-mode-jeu .outils-fermer:hover { background:rgba(255,255,255,0.14); }
.outils-section { margin-bottom:14px; }
.outils-section:last-child { margin-bottom:0; }
.outils-label {
    font-size:12px; font-weight:700; color:#64748b; margin-bottom:8px;
}
body.escape-mode-jeu .outils-label { color:#94a3b8; }
.outils-hint {
    font-size:12px; color:#94a3b8; margin:-6px 0 14px; line-height:1.4;
}
.outils-couleurs { display:flex; gap:8px; flex-wrap:wrap; }
.outil-couleur-btn {
    width:34px; height:34px; border-radius:50%;
    border:2px solid #e2e8f0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; color:#64748b; font-weight:800;
    background:#f8fafc;
    transition:transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.outil-couleur-btn:hover { transform:scale(1.1); }
.outil-couleur-btn.actif { border-color:#1e293b; box-shadow:0 0 0 2px rgba(0,0,0,0.12); }
body.escape-mode-jeu .outil-couleur-btn { border-color:rgba(255,255,255,0.15); background:rgba(255,255,255,0.06); }
body.escape-mode-jeu .outil-couleur-btn.actif { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,0.2); }
.outil-toggle-btn {
    padding:8px 16px; border-radius:8px; border:2px solid #e2e8f0;
    background:#f8fafc; color:#475569; font-size:13px; font-weight:700;
    cursor:pointer; transition:all 0.15s;
}
.outil-toggle-btn:hover { border-color:#db9b38; color:#db9b38; }
.outil-toggle-btn.actif { background:#db9b38; border-color:#db9b38; color:#fff; }
body.escape-mode-jeu .outil-toggle-btn { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); color:#94a3b8; }
body.escape-mode-jeu .outil-toggle-btn.actif { background:#db9b38; border-color:#db9b38; color:#fff; }

/* ---- Lentille d'outil (filtre de couleur / miroir) sur les images ----
   L'image d'origine (et son clic-zoom) reste inchangée. Un duplicata
   entièrement transformé est superposé pile dessus, et seule la
   fenêtre de la lentille (#escape-lentille, qui suit le pointeur ou
   le doigt) en révèle une partie via clip-path. ---- */
.etape-contenu .escape-img-lentille-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 12px 0;
    vertical-align: top;
}
.etape-contenu .escape-img-lentille-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 8px;
}
.escape-img-lentille-reveal {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    overflow: hidden;
    pointer-events: none;
    clip-path: inset(100% 100% 100% 100%);
}
.escape-img-lentille-reveal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    border-radius: 8px;
    transition: transform 0.15s;
}
.escape-img-lentille-tint {
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    background: transparent;
    opacity: 0;
    transition: background 0.15s, opacity 0.15s;
}

/* ---- La lentille elle-même : élément unique qui suit le pointeur ---- */
#escape-lentille {
    position: fixed;
    width: 300px;
    height: 200px;
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,0.85);
    box-shadow: 0 4px 18px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.15);
    pointer-events: none;
    overflow: hidden;
    z-index: 999990;
    display: none;
}
#escape-lentille .escape-lentille-tint {
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: 0;
}
/* Même sans rien à révéler sous la lentille, son effet "global" reste
   visible — une teinte de couleur, ou un aspect vitre pour le miroir. */
#escape-lentille.lentille-couleur .escape-lentille-tint {
    opacity: 0.4;
}
#escape-lentille.lentille-miroir {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(1px);
}
#escape-lentille.lentille-miroir::after {
    content: '\1FA9E';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    opacity: 0.6;
}

/* ---- Mode invité (01/11/2026) : note sous le code + écran « compte requis » ---- */
.escape-mode-invite {
    margin:14px 0 0; font-size:12px; color:#64748b;
}
.escape-mode-invite.actif strong   { color:#16a34a; }
.escape-mode-invite.inactif strong { color:#b45309; }
.escape-connexion-card {
    max-width:440px; margin:0 auto; text-align:center;
    background:#fff; border:1px solid #e2e8f0; border-radius:16px;
    padding:28px 24px; box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.escape-connexion-titre { font-size:16px; font-weight:800; color:#1e293b; margin:0 0 8px; }
.escape-connexion-texte { font-size:13px; color:#64748b; margin:0 0 16px; line-height:1.5; }
.escape-connexion-texte a { color:#2563eb; }
.escape-connexion-btn {
    display:inline-block; padding:12px 28px; border-radius:12px; margin-bottom:14px;
    background:linear-gradient(135deg, #db9b38, #c8891f); color:#fff;
    font-size:15px; font-weight:800; text-decoration:none !important;
    box-shadow:0 4px 12px rgba(219,155,56,0.3);
}
.escape-connexion-btn:hover { filter:brightness(1.05); }

/* ===== Calculatrice (27/09) — déplacé depuis escape.php ===== */
.calc-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:420px; margin:0 auto; }
.calc-label { font-size:14px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; text-align:center; }
body.escape-mode-jeu .calc-label { color:#94a3b8; }
.calc-corps { width:100%; background:linear-gradient(180deg,#334155,#1e293b); border-radius:18px; padding:14px; box-shadow:0 8px 32px rgba(0,0,0,0.25); box-sizing:border-box; }
.calc-ecran { background:#0f172a; border-radius:10px; padding:10px 12px; margin-bottom:12px; border:1px solid #475569; }
.calc-ecran input { width:100%; box-sizing:border-box; background:transparent; border:none; outline:none; color:#e2e8f0; font-family:'Courier New',monospace; font-size:18px; text-align:right; padding:2px 0; }
.calc-resultat { color:#fbbf24; font-family:'Courier New',monospace; font-size:24px; font-weight:900; text-align:right; min-height:30px; word-break:break-all; }
.calc-resultat.calc-erreur { color:#f87171; font-size:14px; font-weight:700; }
.calc-touches { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.calc-touche { padding:12px 0; border:none; border-radius:8px; background:#475569; color:#f1f5f9; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; box-shadow:0 2px 0 #1e293b; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
.calc-touche:active { transform:translateY(2px); box-shadow:none; }
.calc-fn { background:#1e3a5f; color:#93c5fd; font-size:14px; }
.calc-op { background:#334155; color:#fbbf24; }
.calc-eff { background:#7c3aed; color:#fff; }
.calc-egal { background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
@media (max-width:640px) { .calc-touche { padding:11px 0; font-size:15px; } .calc-fn { font-size:13px; } }

/* ===== Mode jeu : tactile / sélection (25/09) — déplacé depuis escape.php ===== */
/* iPhone (25/09) : Safari ignore "user-scalable=no" depuis iOS 10, et deux
   taps rapides sur un bouton déclenchaient le zoom au lieu de deux clics
   (très gênant sur les rouleaux du cadenas). "touch-action: manipulation"
   désactive le zoom au double-tap SUR CES ÉLÉMENTS uniquement, sans bloquer
   le pinch ni le défilement ailleurs. Les éléments qu'on fait glisser
   (anagramme, glisser-déposer, puzzle) gardent leur propre gestion. */
#escape-container button,
#escape-container .rouleau-btn,
#escape-container .grattage-carte,
#escape-chrono-bar button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#escape-container .rouleau-btn,
#escape-container .rouleau-fenetre,
#escape-container .clavier-touche,
#escape-container .cc-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* pas de menu "Copier" sur appui long */
}
#escape-container .rouleau-fenetre { touch-action: none; cursor: ns-resize; }
/* Contenu de l'étape non sélectionnable pendant le jeu (freine le
   copier-coller vers une IA) ; pas de menu "Rechercher l'image" sur iOS. */
#escape-etape .etape-contenu { -webkit-user-select:none; user-select:none; }
#escape-etape .etape-contenu img { -webkit-touch-callout:none; }

/* ===== Mode lecture / impression PDF (26/09) — déplacé depuis escape.php =====
   Les couleurs (clair/sombre) arrivent via des variables CSS posées sur
   #escape-lecture par escape.php : --lec-texte, --lec-bord, --lec-carte,
   --lec-discret, --lec-accent. */
#escape-lecture { max-width:820px; margin:0 auto; padding:24px 16px 60px; color:var(--lec-texte); }
#escape-lecture .lec-top { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin-bottom:18px; }
#escape-lecture .lec-btn { display:inline-block; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:700; text-decoration:none; border:1px solid var(--lec-bord); background:var(--lec-carte); color:var(--lec-texte); cursor:pointer; font-family:inherit; }
#escape-lecture .lec-btn-or { background:linear-gradient(135deg,#db9b38,#c8891f); color:#fff; border-color:#c8891f; }
#escape-lecture h1 { font-size:26px; font-weight:900; margin:0 0 4px; }
#escape-lecture .lec-sous { font-size:14px; color:var(--lec-discret); margin-bottom:18px; }
#escape-lecture .lec-sommaire { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:24px; }
#escape-lecture .lec-sommaire a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; border-radius:18px; font-weight:800; font-size:14px; text-decoration:none; background:var(--lec-carte); border:1px solid var(--lec-bord); color:var(--lec-accent); }
#escape-lecture .lec-etape { background:var(--lec-carte); border:1px solid var(--lec-bord); border-radius:16px; padding:20px; margin-bottom:18px; scroll-margin-top:80px; }
#escape-lecture .lec-num { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--lec-accent); margin-bottom:4px; }
#escape-lecture .lec-etape .etape-titre { font-size:20px; font-weight:800; margin:0 0 12px; }
#escape-lecture .etape-contenu img { max-width:100%; height:auto; cursor:zoom-in; }
#escape-lecture details.lec-indice { margin-top:14px; padding:10px 14px; border-radius:10px; background:rgba(251,191,36,0.12); border:1px solid rgba(251,191,36,0.3); }
#escape-lecture details.lec-indice summary { cursor:pointer; font-weight:700; font-size:14px; }
#escape-lecture .lec-badge-na { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:6px; font-size:10px; letter-spacing:0.5px; background:rgba(148,163,184,0.2); color:var(--lec-discret); vertical-align:middle; }
#escape-lecture .lec-note { font-size:13px; color:var(--lec-discret); text-align:center; margin-top:10px; }
#escape-lecture .lec-print-entete { display:none; }
/* Pendant la mesure (juste avant l'impression), on reproduit la mise en
   page imprimée pour que le calcul de hauteur soit juste. */
#escape-lecture .lec-etape.lec-mesure { padding:0; border:none; }
#escape-lecture .lec-etape.lec-mesure .lec-print-entete { display:flex; font-size:11px; padding-bottom:6px; margin-bottom:14px; }
#escape-lecture .lec-etape.lec-mesure .lec-noprint { display:none; }
/* Images plafonnées à ~40 % de la page en impression : une grande image
   ne force plus à réduire tout le texte de l'étape. */
#escape-lecture .lec-etape.lec-mesure .etape-contenu img { max-height:420px; width:auto; }

/* ---- Impression / PDF (26/09) : une étape = une page A4 portrait ----
   Le masquage du reste du site et l'ajustement de la taille de chaque
   étape à la page sont faits en JS (lecPreparerImpression, plus bas) :
   une étape trop longue est réduite pour tenir ENTIÈREMENT sur sa page. */
@page { size: A4 portrait; margin: 12mm; }
@media print {
    html, body { background:#fff !important; margin:0 !important; padding:0 !important; }
    [data-lec-masque] { display:none !important; }
    #escape-lecture { max-width:none; margin:0; padding:0; color:#1e293b; }
    #escape-lecture > h1, #escape-lecture > .lec-sous, #escape-lecture .lec-noprint { display:none !important; }
    #escape-lecture .lec-etape {
        break-before:page; page-break-before:always;
        break-inside:avoid; page-break-inside:avoid;
        background:#fff; border:none; border-radius:0; box-shadow:none;
        padding:0; margin:0 auto;
    }
    #escape-lecture .lec-etape:first-of-type { break-before:auto; page-break-before:auto; }
    #escape-lecture .lec-print-entete {
        display:flex; justify-content:space-between; gap:12px;
        font-size:11px; color:#64748b; border-bottom:1px solid #cbd5e1;
        padding-bottom:6px; margin-bottom:14px;
    }
    #escape-lecture .lec-num { color:#b7791f; }
    #escape-lecture .etape-titre { color:#0f172a !important; border-bottom-color:#e2e8f0 !important; }
    #escape-lecture .etape-contenu { color:#1e293b !important; }
    #escape-lecture .etape-contenu th { background:#f1f5f9 !important; color:#0f172a !important; }
    #escape-lecture .etape-contenu td { color:#1e293b !important; }
    #escape-lecture .etape-contenu th,
    #escape-lecture .etape-contenu td { border-color:#cbd5e1 !important; }
    #escape-lecture .etape-contenu img { box-shadow:none; max-height:420px; width:auto; }
    #escape-lecture details.lec-indice { background:#fffbeb; border-color:#fde68a; color:#78350f; }
    * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}