/* ==== Reset ==== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

/* ==== Mobile Debug Panel ==== */
#mobileDebugPanel .debug-info { color: #0ff; }
#mobileDebugPanel .debug-success { color: #0f0; }
#mobileDebugPanel .debug-error { color: #f00; }
#mobileDebugPanel .debug-warning { color: #ff0; }

/* ==== Polices auto-hébergées (OFL) ====
   Archivo : titres + texte courant. IBM Plex Mono : chiffres, chronos,
   badges, étiquettes de section. Barlow Condensed : wordmark uniquement. */
@font-face { font-family:'Archivo'; font-weight:400; font-display:swap;
    src:url('fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:600; font-display:swap;
    src:url('fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap;
    src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap;
    src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-display:swap;
    src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

/* ==== Couleurs & typographie ====
   Direction : sobre académique, surfaces claires (les équations KaTeX et les
   schémas restent sur fond blanc). Accent sarcelle profond, ambre en
   secondaire, cartes blanches sur fond blanc cassé chaud, filets hairline,
   deux rayons (cartes 16px, contrôles 10px) + pilule. */
:root{
    /* accent principal : bleu outremer (choisi 2026-08 en remplacement de la
       sarcelle ; les couleurs PAR MODE ne bougent pas, voir --mode-*) */
    --primary:#2a5c9e;
    --primary-dark:#1f4a85;
    --primary-tint:#e9eff7;          /* fond très pâle pour états sélectionnés */
    --primary-glow:rgba(42,92,158,.16);

    /* fonds et surfaces */
    --bg:#f6f5f2;                    /* blanc cassé chaud, faible fatigue oculaire */
    --bg-card:#fff;
    --surface-2:#f4f2ec;             /* surface secondaire (panneaux, zones) */

    /* encres */
    --text:#23272e;
    --muted:#67707e;
    --accent:#1a2330;                /* titres : quasi-noir bleuté */

    /* filets */
    --border:rgba(26,35,48,.12);
    --border-soft:rgba(26,35,48,.07);

    /* sémantiques + variantes pâles et profondes (texte sur teinte) */
    --success:#2e7d52;  --success-tint:#e6f1ea;  --success-deep:#245e40;
    --danger:#b23a2e;   --danger-tint:#f9ebe9;   --danger-deep:#8e2e24;
    --warning:#b26a00;  --warning-tint:#faf3e4;  --warning-deep:#8a5300;
    --info:#26687f;     --info-tint:#e8f0f4;     --info-deep:#1e5265;

    /* accents par mode d'entraînement */
    --mode-apesanteur:var(--success);
    --mode-gravity:var(--danger);
    --mode-trou-noir:#1c1f26;
    --mode-personnalise:#2e5da8;     /* bleu franc (l'ardoise #1f3a5f lisait « noir ») */
    --mode-erreurs:var(--warning);

    /* géométrie & matière */
    --radius:16px;
    --radius-sm:10px;
    --pill:999px;
    --rail:1020px;
    --shadow-sm:0 1px 3px rgba(26,35,48,.06);
    --shadow-md:0 10px 30px rgba(26,35,48,.10);
    --shadow-lg:0 20px 50px rgba(26,35,48,.18);
    --ease:cubic-bezier(.25,.46,.45,.94);

    /* familles */
    --font-body:'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-wordmark:'Barlow Condensed', 'Arial Narrow', sans-serif;

    /* compat : anciens noms encore référencés plus bas */
    --bg-grad:var(--bg);
}

html { scroll-behavior:smooth; }
/* Défilement doux réservé aux ancres : au focus d'un champ, le recadrage du
   navigateur doit être instantané, sinon la carte de connexion « saute »
   à chaque clic dans le formulaire. */
html:focus-within { scroll-behavior:auto; }

body{
    font-family:var(--font-body);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    /* Mobile touch optimization */
    -webkit-tap-highlight-color: var(--primary-glow);
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    font-size: 16px; /* Prevents iOS zoom on input focus */
}

:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* ==== Coquille de page ====
   En-tête pleine largeur collant + contenu qui respire sur le fond.
   L'ancienne grosse carte .wrapper est conservée en secours minimal. */
.site-header{
    position:sticky; top:0; z-index:400;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border-soft);
    transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{ box-shadow:0 4px 24px rgba(26,35,48,.08); }
.site-header-inner{
    max-width:var(--rail);
    margin:0 auto;
    padding:0 20px;
    height:60px;
    display:flex;
    align-items:center;
    gap:1.5rem;
}
.wordmark{
    font-family:var(--font-wordmark);
    font-weight:700;
    font-size:1.45rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--accent);
    white-space:nowrap;
}
.wordmark b{ color:var(--primary); font-weight:700; }

.header-nav{
    display:flex;
    align-items:center;
    gap:1.25rem;
    margin-left:auto;
}

/* Onglets de page : soulignement accent, sans boîte */
.page-tabs{ display:inline-flex; gap:1.1rem; align-self:stretch; }
.page-tab{
    display:flex; align-items:center;
    padding:0 2px;
    font-weight:600;
    font-size:.95rem;
    text-decoration:none;
    color:var(--muted);
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    white-space:nowrap;
    transition:color .2s var(--ease);
    min-height:58px;
}
.page-tab:hover{ color:var(--accent); }
.page-tab.active{ color:var(--accent); border-bottom-color:var(--primary); }

.logout-link{
    font-size:.85rem;
    color:var(--muted);
    text-decoration:none;
    white-space:nowrap;
}
.logout-link:hover{ color:var(--danger); text-decoration:underline; }

/* Contenu principal */
.page{
    flex:1;
    width:100%;
    max-width:var(--rail);
    margin:0 auto;
    padding:2.25rem 20px 4rem;
}
.page-narrow{ max-width:520px; }

/* Secours : pages encore construites autour de .wrapper */
.wrapper{
    flex:1;
    width:100%;
    max-width:var(--rail);
    margin:0 auto;
    padding:2.25rem 20px 4rem;
}

/* Tête de page : étiquette mono + grand titre */
.page-head{ margin-bottom:2rem; }
.eyebrow{
    font-family:var(--font-mono);
    font-weight:500;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.22em;
    color:var(--primary);
    margin:0 0 .5rem;
}
.subtitle{ color:var(--muted); margin-top:.4rem; max-width:62ch; }
.page-divider{
    width:48px; height:3px; border-radius:2px;
    background:var(--primary); margin-top:1rem;
}

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

/* Carte générique */
.card{
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:2rem;
}

/* Ancien en-tête interne de page (titre + nav) : version allégée,
   utilisé tant que des pages le gardent */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    margin-bottom:2rem;
    flex-wrap:wrap;
}

/* ==== Titres ==== */
h1{font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:.5rem;color:var(--accent);}
h2{font-size:1.45rem;font-weight:600;letter-spacing:-.015em;margin:1rem 0 .5rem;color:var(--accent);}
h3{font-size:1.2rem;font-weight:600;margin:.5rem 0;color:var(--accent);}

/* ==== Boutons ==== */
.btn{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    padding:.75rem 1.5rem;
    border-radius:var(--radius-sm);
    font-family:var(--font-body);
    font-weight:600;
    cursor:pointer;
    border:1px solid var(--primary);
    font-size:1rem;
    /* Mobile touch target minimum 44x44px */
    min-height:44px;
    min-width:44px;
    touch-action:manipulation; /* Prevents double-tap zoom */
    user-select:none;
    -webkit-user-select:none;
    transition:background-color .2s var(--ease), border-color .2s var(--ease),
               box-shadow .25s var(--ease), transform .2s var(--ease);
}
.btn:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-1px);
    box-shadow:0 6px 18px var(--primary-glow);
}
.btn:active{transform:scale(0.98);}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--muted);
    box-shadow: var(--shadow-sm);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--danger-deep);
    border-color: var(--danger-deep);
    box-shadow: 0 6px 18px rgba(178,58,46,.25);
}

/* ==== Formulaires ==== */
input, select, textarea{
    width:100%;
    padding:.65rem .8rem;
    margin:.4rem 0 1rem;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--bg-card);
    color:var(--text);
    font-family:var(--font-body);
    font-size:1rem;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-glow);
}
label{font-weight:500;}

/* Formulaires d'authentification : carte étroite */
.auth-form{
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:2rem;
}

/* ==== Card de quiz ==== */
.quiz-card{
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:1.2rem;
    margin-bottom:1rem;
}
.quiz-card h3{margin-top:0;}

/* ==== Password Requirements ==== */
.password-requirements {
    margin: 0.5rem 0 1rem 0;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

.password-requirements p {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.password-requirements ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.password-requirements li {
    padding: 0.2rem 0;
    font-size: 0.9rem;
    position: relative;
    padding-left: 1.5rem;
}

.password-requirements li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: var(--danger);
    font-weight: bold;
}

.password-requirements li.valid::before {
    content: "✓";
    color: var(--success);
}

.password-requirements li.valid {
    color: var(--success-deep);
}

.password-requirements li.invalid {
    color: var(--danger-deep);
}

/* ==== Profile Page Styles ==== */
.profile-section {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.profile-section h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--accent);
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 0.75rem;
}

.status-card {
    background: var(--surface-2);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}

.status-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.status-label {
    font-weight: 600;
    color: var(--text);
}

.status-value {
    font-weight: 500;
}

.status-paid {
    color: var(--success);
    font-weight: 600;
}

.status-unpaid {
    color: var(--danger);
    font-weight: 600;
}

.profile-form {
    background: var(--surface-2);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text);
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.cgu-acceptance {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
}

.cgu-acceptance input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
    margin-bottom: 0;
}

.cgu-acceptance label {
    margin-bottom: 0;
    display: inline;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Case + libellé sur une ligne, le texte enveloppe normalement */
.cgu-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.cgu-check-row input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.cgu-acceptance a {
    color: var(--primary);
    text-decoration: none;
}

.cgu-acceptance a:hover {
    text-decoration: underline;
}

/* Clauses inhabituelles mises en évidence au moment de l'acceptation */
.cgu-key-points-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
    margin: 0 0 0.4rem;
}

.cgu-key-points {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

.cgu-key-points li {
    margin-bottom: 0.25rem;
}

.legal-info {
    background: var(--surface-2);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}

.legal-info p {
    margin-bottom: 1rem;
}

.legal-info p:last-child {
    margin-bottom: 0;
}

.info-text {
    font-size: 0.9rem;
    color: var(--muted);
    font-style: italic;
    margin-top: 1rem;
}

.form-group input:disabled {
    background-color: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
}

.subscription-notice {
    text-align: center;
    background: var(--warning-tint);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    padding: 2rem;
    margin: 2rem 0;
}

.subscription-notice h2 {
    color: var(--warning-deep);
    margin-bottom: 1rem;
}

.subscription-notice p {
    color: var(--text);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.btn-subscribe {
    background: var(--success);
    border-color: var(--success);
    color: white;
    font-size: 1.1rem;
    padding: 1rem 2rem;
}

.btn-subscribe:hover {
    background: var(--success-deep);
    border-color: var(--success-deep);
    box-shadow: 0 6px 18px rgba(46, 125, 82, .25);
}

.subscription-notice .btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0.6rem auto 0;
    font-size: 1.05rem;
    padding: 0.9rem 1.5rem;
}

.training-options.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.training-card.disabled {
    background: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none; /* pas seulement cosmétique : le clic est bloqué */
}

.training-card.disabled:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.selected-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.btn-reset {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Boutons de démarrage teintés par mode */
.btn-apesanteur {
    background: var(--mode-apesanteur) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(46, 125, 82, 0.35);
    color: white !important;
}

.btn-apesanteur:hover {
    background: var(--success-deep) !important;
    box-shadow: 0 6px 20px rgba(46, 125, 82, 0.45);
    transform: translateY(-2px);
}

.btn-gravity {
    background: var(--mode-gravity) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(178, 58, 46, 0.35);
    color: white !important;
}

.btn-gravity:hover {
    background: var(--danger-deep) !important;
    box-shadow: 0 6px 20px rgba(178, 58, 46, 0.45);
    transform: translateY(-2px);
}

.btn-personnalise {
    background: var(--mode-personnalise) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(31, 58, 95, 0.35);
    color: white !important;
}

.btn-personnalise:hover {
    background: #16293f !important;
    box-shadow: 0 6px 20px rgba(31, 58, 95, 0.45);
    transform: translateY(-2px);
}

.btn-erreurs {
    background: var(--mode-erreurs) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(178, 106, 0, 0.35);
    color: white !important;
}

.btn-erreurs:hover {
    background: var(--warning-deep) !important;
    box-shadow: 0 6px 20px rgba(178, 106, 0, 0.45);
    transform: translateY(-2px);
}

/* Titres de panneau teintés par mode (sans ombre portée) */
.mode-apesanteur h2 { color: var(--mode-apesanteur); }
.mode-gravity h2 { color: var(--mode-gravity); }
.mode-trou-noir h2 { color: var(--mode-trou-noir); }
.mode-personnalise h2 { color: var(--mode-personnalise); }
.mode-erreurs h2 { color: var(--mode-erreurs); }

/* Champ 2FA replié : PRÉSENT dans le DOM au chargement (les gestionnaires de
   mots de passe ne remplissent que les champs vus au scan initial — un
   display:none les rend invisibles pour l'autofill du code) et son ESPACE
   EST RÉSERVÉ dès le premier rendu : la révélation du champ, l'autofill ou
   un focus ne décalent plus jamais la carte de connexion (« jump at first
   load and then fixed »). */
.totp-offscreen {
    opacity: 0;
    pointer-events: none;
}

/* ==== Danger zone (Mes données) ==== */
.profile-section.danger-zone {
    border: 1px solid var(--danger);
    background: var(--danger-tint);
}

.profile-section.danger-zone h2 {
    border-bottom-color: var(--danger);
}

.danger-zone-tag {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--pill);
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


/* ==== Menu des modes d'entraînement ====
   Cartes blanches, barre d'accent en tête, lueur teintée au survol :
   la couleur code toujours le mode, sans aplats saturés. */
.training-menu {
    text-align: center;
    margin-bottom: 2rem;
}

.training-menu h2 {
    margin-bottom: 2rem;
    color: var(--accent);
    font-size: 1.6rem;
    letter-spacing: -.015em;
}

.training-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.training-card {
    --card-accent: var(--primary);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem 1.75rem 1.75rem;
    cursor: pointer;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease),
                border-color .3s var(--ease);
    text-align: left;
    position: relative;
    overflow: hidden;
    animation: fadeUp .55s var(--ease) both;
}

.training-card:nth-child(2) { animation-delay: .05s; }
.training-card:nth-child(3) { animation-delay: .1s; }
.training-card:nth-child(4) { animation-delay: .15s; }
.training-card:nth-child(5) { animation-delay: .2s; }
.training-card:nth-child(6) { animation-delay: .25s; }

/* L'animation d'entrée ne joue qu'au chargement de la page : une fois jouée,
   utils.js pose .entry-anim-done sur <html> pour qu'un display:none -> block
   (retour depuis le panneau de config ou une session) ne la redémarre pas. */
html.entry-anim-done .training-card { animation: none; }

/* Barre d'accent : discrète au repos, pleine au survol */
.training-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent);
    opacity: .55;
    transition: opacity .3s var(--ease);
}

.training-card:hover {
    transform: translateY(-4px);
    border-color: var(--border);
    box-shadow: 0 14px 34px rgba(26,35,48,.12);
}

.training-card:hover::before { opacity: 1; }

.training-card[data-mode="apesanteur"] { --card-accent: var(--mode-apesanteur); }
.training-card[data-mode="gravity"] { --card-accent: var(--mode-gravity); }
.training-card[data-mode="trou-noir"] { --card-accent: var(--mode-trou-noir); }
.training-card[data-mode="personnalise"] { --card-accent: var(--mode-personnalise); }
.training-card[data-mode="erreurs"] { --card-accent: var(--mode-erreurs); }

.training-card h3 {
    margin: 0 0 .6rem 0;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 600;
}

/* Pastille de mode : étiquette mono teintée au-dessus du titre */
.training-card .mode-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: .25rem .7rem;
    border-radius: var(--pill);
    background: color-mix(in srgb, var(--card-accent) 11%, white);
    color: var(--card-accent);
    margin-bottom: .9rem;
}

.training-card p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
    font-size: .95rem;
}

/* Mode Examen : verrouillé, grisé, sans interaction */
.training-card.training-card-locked {
    background: var(--surface-2);
    box-shadow: none;
    cursor: default;
    opacity: 0.75;
}

.training-card.training-card-locked::before { display: none; }

.training-card.training-card-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border-soft);
}

.training-card.training-card-locked h3 {
    color: var(--muted);
}

.training-card.training-card-locked p {
    color: var(--muted);
}

.coming-soon-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--pill);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==== Configuration Panel ==== */
#configPanel {
    animation: slideInUp 0.4s var(--ease);
}

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

.config-container {
    max-width: 600px;
    margin: 0 auto;
}

.btn-back {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    margin-bottom: 2rem;
    padding: 0.8rem 1.5rem;
}

.btn-back:hover {
    background: var(--primary);
    color: white;
}

.selected-mode-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
}

.mode-icon-large {
    font-size: 3rem;
}

.selected-mode-header h2 {
    margin: 0;
    color: var(--accent);
    font-size: 1.6rem;
}

.selected-mode-header p {
    margin: 0.5rem 0 0 0;
    color: var(--muted);
    line-height: 1.4;
}

.config-section {
    margin-bottom: 2rem;
}

.config-section h3 {
    margin: 0 0 1rem 0;
    color: var(--accent);
    font-size: 1.3rem;
}

/* ==== Type Boxes (Selectable QCM Types) ==== */
.type-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.type-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.type-box:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(42, 92, 158, 0.15);
}

/* Sélection sans ambiguïté : double contour épais + coche dans le coin
   (le simple changement de fond était trop proche de l'état non sélectionné) */
.type-box.selected {
    border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: inset 0 0 0 2px var(--primary), 0 4px 12px rgba(42, 92, 158, 0.2);
}

.type-box.selected::after {
    content: '✓';
    position: absolute;
    top: -11px;
    right: -11px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 1rem;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.type-box:not(.selected) .type-icon {
    background: var(--muted); /* pastille grisée tant que le type n'est pas retenu */
}

.type-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.type-info {
    display: flex;
    flex-direction: column;
}

.type-title {
    font-weight: 600;
    color: var(--accent);
    font-size: 1.1rem;
}

.type-desc {
    color: var(--muted);
    font-size: 0.9rem;
}

/* ==== Subject Dropdown ==== */
.subject-dropdown {
    position: relative;
}

.dropdown-btn {
    width: 100%;
    padding: 1rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.dropdown-btn:hover {
    border-color: var(--primary);
}

.dropdown-btn.active {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(42, 92, 158, 0.15);
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.dropdown-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--primary);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.dropdown-content.show {
    display: block;
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-item:hover {
    background: var(--surface-2);
}

/* Sujets cochés : mêmes codes visuels que les type-box sélectionnées */
.dropdown-item:has(input:checked) {
    background: var(--primary-tint);
    box-shadow: inset 3px 0 0 var(--primary);
}

.dropdown-item:has(input:checked) label {
    font-weight: 600;
    color: var(--accent);
}

.dropdown-item input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.dropdown-item label {
    margin: 0;
    cursor: pointer;
    flex: 1;
}

.dropdown-separator {
    height: 1px;
    background: var(--border);
    margin: 0.5rem 0;
}

/* Sujets verrouillés (Accès découverte) */
.dropdown-item-locked {
    opacity: 0.55;
    cursor: not-allowed;
}

.dropdown-item-locked label {
    cursor: not-allowed;
}

.locked-tag {
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.05rem 0.5rem;
    margin-left: 0.4rem;
    white-space: nowrap;
}

/* ==== Start Button ==== */
.btn-start {
    width: 100%;
    padding: 1.2rem 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.btn-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 92, 158, 0.25);
}

.btn-danger.btn-start {
    background: #1a1a1a !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    color: white !important;
}

.btn-danger.btn-start:hover {
    background: #2d1212 !important;
    box-shadow: 0 6px 20px rgba(74, 28, 28, 0.7);
    transform: translateY(-2px);
}

/* ==== Custom Settings (Mode Personnalisé) ==== */
.custom-options {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.option-group {
    margin-bottom: 2rem;
}

.option-group:last-child {
    margin-bottom: 0;
}

.option-group label {
    display: block;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.question-input {
    width: 100%;
    max-width: 150px;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.question-input:focus {
    outline: none;
    border-color: var(--primary);
}

.input-with-help {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.input-inline-help {
    font-size: 0.8rem;
    color: var(--muted);
    font-style: italic;
    white-space: nowrap;
}

.timer-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 400;
    background: var(--surface-2);
}

.radio-label:hover {
    border-color: var(--primary);
    background: var(--primary-tint);
}

/* Option verrouillée (Accès découverte) : visible mais inaccessible */
.radio-label.locked {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-2);
}

.radio-label.locked:hover {
    border-color: var(--border);
    background: var(--surface-2);
}

/* Option retenue : contour marqué, cohérent avec les type-box */
.radio-label:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: inset 0 0 0 1px var(--primary);
    font-weight: 600;
}

.radio-label input[type="radio"] {
    width: auto;
    margin: 0;
    transform: scale(1.2);
}

.radio-label.active {
    border-color: var(--primary);
    background: var(--primary-tint);
}

.time-input {
    width: 80px;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    margin: 0 0.5rem;
}

.time-input:disabled {
    background: var(--surface-2);
    color: var(--muted);
}

.time-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .header div {
        justify-content: center;
    }
}

/* ==== Password Reset Styles ==== */
.forgot-password-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

.form-description {
    background: var(--surface-2);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--primary);
    margin-bottom: 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.4;
}

.user-info {
    margin-bottom: 1rem;
}

.password-requirements {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.message {
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
}

.message.success {
    background: var(--success-tint);
    color: var(--success-deep);
    border: 1px solid rgba(46,125,82,.3);
}

.message.error {
    background: var(--danger-tint);
    color: var(--danger-deep);
    border: 1px solid rgba(178,58,46,.3);
}

.message.info {
    background: var(--info-tint);
    color: var(--info-deep);
    border: 1px solid rgba(38,104,127,.3);
}

.message h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.message p {
    margin: 0.5rem 0;
    line-height: 1.4;
}

/* ==== Cadence de lecture (anti-réponses au hasard / anti-export) ==== */
.pace-note {
    text-align: center;
    color: var(--warning);
    font-weight: 600;
    font-size: 0.95rem;
    margin: 1rem 0 0;
}

/* La barre de progression remplit le bouton lui-même pendant le délai minimum */
.btn-next.btn-pacing {
    --pace-progress: 0%;
    background: linear-gradient(to right,
        var(--primary) var(--pace-progress),
        #9aa4b0 var(--pace-progress)) !important;
    cursor: wait;
    transition: none;
}

/* Mode avancé épuisé pour la journée (Accès découverte) : grisé jusqu'à minuit */
.training-card.mode-exhausted {
    opacity: 0.45;
    filter: grayscale(0.8);
    cursor: not-allowed;
    position: relative;
}

/* Compteur d'usage des modes limités (Accès découverte) : affiché dès 0/2 */
.mode-usage {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
}

.training-card.mode-exhausted .mode-usage {
    color: var(--accent);
}

/* ==== Boîtes de dialogue stylées (remplacent les popups natifs) ==== */
.ui-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 35, 48, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.ui-dialog {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 2rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: fadeUp .3s var(--ease);
}

.ui-dialog h3 {
    color: var(--accent);
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.ui-dialog p {
    color: var(--text);
    margin: 0 0 1.5rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: break-word;
}

.ui-dialog-input {
    display: block;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 1rem;
}

.ui-dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ui-dialog-actions .btn {
    width: auto;
    min-width: 110px;
    padding: 0.6rem 1.4rem;
}

/* ==== Bandeau Accès découverte ==== */
.trial-notice {
    background: var(--primary-tint);
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--accent);
}

.trial-notice a {
    color: var(--primary);
    font-weight: 600;
}

/* ==== Footer ==== */
.footer{
    margin-top:3rem;
    padding:1.75rem 20px;
    border-top:1px solid var(--border-soft);
    font-size:.85rem;
    color:var(--muted);
    text-align:center;
}
.footer a{ color:var(--primary); text-decoration:none; }
.footer a:hover{ text-decoration:underline; }
/* Pied de page hors du flux principal (nouvelles pages) */
body > .footer{ margin-top:auto; background:var(--bg); }

/* ==== QCM Interface Styles ==== */

/* Container principal de la question */
.question-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
}

/* Contrôles en haut de la question */
.question-top-controls {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: flex-start;
}

.btn-back-question {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-back-question:hover {
    background: var(--primary);
    color: white;
}

/* Header de la question */
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    border-left: 4px solid var(--primary);
}

.question-progress {
    flex: 1;
}

.question-number {
    font-weight: 600;
    color: var(--accent);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: block;
}

.progress-bar {
    width: 200px;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    transition: width 0.3s ease;
}

.question-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;      /* les badges passent à la ligne au lieu de déborder */
    max-width: 100%;
    min-width: 0;
}

/* Pastilles pleines (texte blanc) : la version teintée pastel était trop
   pâle pour être lue en pleine question — retour aux aplats d'origine */
.question-subject {
    padding: 0.35rem 0.8rem;
    background: var(--success); /* vert plein, comme Performance par sujet */
    color: #fff;
    border-radius: var(--pill);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: break-word; /* noms de sujets longs : couper plutôt que sortir de la carte */
    text-align: center;
}

.question-type {
    padding: 0.35rem 0.8rem;
    border-radius: var(--pill);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    max-width: 100%;
    text-align: center;
}

.type-a {
    background: var(--primary); /* Type A */
}

.type-k,
.type-kprim {
    background: var(--warning); /* K-Prim */
}

/* Timer */
.timer-display {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent);
    padding: 0.5rem 1rem;
    background: white;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    min-width: 80px;
    text-align: center;
}

.timer-warning {
    color: var(--warning) !important;
    border-color: var(--warning) !important;
}

.timer-danger {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    animation: pulse 1s infinite;
}

.timer-overtime {
    color: white !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    animation: none;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Titre de la question */
.question-title {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    text-align: center;
    line-height: 1.4;
}

/* Énoncé */
.question-enonce {
    background: white;
    padding: 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.question-enonce p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.question-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Instructions */
.question-instructions {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--info-tint);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--info);
}

.question-instructions p {
    margin: 0;
    font-size: 1rem;
    color: var(--accent);
}

/* Grille des réponses 2x2 */
.answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Carte de réponse */
.answer-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    /* Mobile touch optimization */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.answer-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(42, 92, 158, 0.15);
    transform: translateY(-2px);
}

.answer-card:active {
    transform: scale(0.98);
}

.answer-card.selected {
    border-color: var(--primary);
    background: var(--primary-tint);
    box-shadow: 0 4px 15px rgba(42, 92, 158, 0.25);
}

/* États de correction */
.answer-card.correct {
    border-color: var(--success) !important;
    background: var(--success-tint) !important;
}

.answer-card.incorrect {
    border-color: var(--danger) !important;
    background: var(--danger-tint) !important;
}

/* Bonne réponse manquée : elle doit ATTIRER l'œil (fond blanc + halo vert),
   ce sont les mauvaises réponses non cochées qui s'estompent, pas elle */
.answer-card.correct-unselected {
    border-color: var(--success) !important;
    background: #fff !important;
    border-style: dashed !important;
    box-shadow: 0 0 0 3px var(--success-tint) !important;
}

/* Pendant la correction, les mauvaises réponses non cochées (aucune classe
   d'état) reculent : plus transparentes, sans relief. Navigateurs sans :has()
   → comportement neutre d'avant, rien ne casse. */
.answers-grid:has(.correct, .incorrect, .correct-unselected)
    .answer-card:not(.correct):not(.incorrect):not(.correct-unselected) {
    opacity: 0.45;
    border-color: var(--border-soft);
    box-shadow: none;
    transform: none;
}

/* Lettre de la réponse */
.answer-letter {
    position: absolute;
    top: -10px;
    left: 15px;
    background: var(--primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
}

.answer-card.correct .answer-letter {
    background: var(--success);
}

.answer-card.incorrect .answer-letter {
    background: var(--danger);
}

.answer-card.correct-unselected .answer-letter {
    background: var(--success);
}

/* Contenu de la réponse.
   padding-right : réserve la place de l'indicateur de sélection (absolu,
   en haut à droite) — sans ça le texte passe dessous, surtout sur mobile. */
.answer-content {
    flex: 1;
    padding-top: 0.5rem;
    padding-right: 2.4rem;
}

.answer-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
}

.answer-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5rem 0;
}

/* Indicateur de sélection */
.answer-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: bold;
}

.answer-card.selected .answer-indicator {
    color: var(--primary);
}

/* Answer indicator colors for correction display */
.answer-card.correct .answer-indicator {
    color: var(--success); /* Green for correct selected answers */
}

.answer-card.correct-unselected .answer-indicator {
    color: var(--success); /* Green for correct unselected answers */
}

.answer-card.incorrect .answer-indicator {
    color: var(--danger); /* Red for incorrect selected answers */
}

/* Answer correction styling */
.answer-correction {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--accent);
    line-height: 1.4;
}

/* Make answer text grey when correction is shown — sauf la bonne réponse
   manquée, qui doit rester bien lisible */
.answer-card.correct .answer-content p,
.answer-card.incorrect .answer-content p {
    color: #525a66;
}

/* Zone de correction */
.correction-zone {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    margin: 2rem 0;
    border-left: 4px solid var(--success);
}

.correction-zone h3 {
    color: var(--success);
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
}

.correction-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.explanation {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--info);
    font-style: italic;
}

.correction-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* User watermark system */
.user-watermark {
    position: absolute;
    font-size: 2rem;
    font-weight: bold;
    color: rgba(42, 92, 158, 0.09);
    text-transform: uppercase;
    letter-spacing: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    /* Prevent selection and copying */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Watermark positioning - anti-tampering layout */
.user-watermark.pos-0 { transform: rotate(-45deg); }
.user-watermark.pos-0.w1 { top: 8%; left: 15%; }
.user-watermark.pos-0.w2 { top: 45%; right: 20%; }
.user-watermark.pos-0.w3 { top: 75%; left: 60%; }
.user-watermark.pos-0.w4 { top: 25%; left: 75%; }
.user-watermark.pos-0.w5 { top: 60%; right: 10%; }
.user-watermark.pos-0.w6 { bottom: 15%; left: 35%; }

.user-watermark.pos-1 { transform: rotate(45deg); }
.user-watermark.pos-1.w1 { top: 20%; right: 25%; }
.user-watermark.pos-1.w2 { top: 55%; left: 10%; }
.user-watermark.pos-1.w3 { bottom: 30%; right: 15%; }
.user-watermark.pos-1.w4 { top: 35%; left: 70%; }
.user-watermark.pos-1.w5 { bottom: 10%; left: 50%; }
.user-watermark.pos-1.w6 { top: 80%; right: 45%; }

.user-watermark.pos-2 { transform: rotate(-30deg); }
.user-watermark.pos-2.w1 { top: 15%; left: 40%; }
.user-watermark.pos-2.w2 { top: 65%; right: 30%; }
.user-watermark.pos-2.w3 { top: 40%; left: 5%; }
.user-watermark.pos-2.w4 { bottom: 25%; left: 80%; }
.user-watermark.pos-2.w5 { top: 85%; left: 25%; }
.user-watermark.pos-2.w6 { top: 30%; right: 5%; }

.user-watermark.pos-3 { transform: rotate(30deg); }
.user-watermark.pos-3.w1 { top: 12%; left: 65%; }
.user-watermark.pos-3.w2 { top: 50%; right: 35%; }
.user-watermark.pos-3.w3 { bottom: 20%; left: 20%; }
.user-watermark.pos-3.w4 { top: 70%; left: 85%; }
.user-watermark.pos-3.w5 { top: 35%; right: 10%; }
.user-watermark.pos-3.w6 { bottom: 45%; right: 60%; }

.user-watermark.pos-4 { transform: rotate(-60deg); }
.user-watermark.pos-4.w1 { top: 25%; left: 30%; }
.user-watermark.pos-4.w2 { bottom: 35%; right: 20%; }
.user-watermark.pos-4.w3 { top: 60%; left: 80%; }
.user-watermark.pos-4.w4 { top: 10%; right: 40%; }
.user-watermark.pos-4.w5 { bottom: 15%; left: 65%; }
.user-watermark.pos-4.w6 { top: 85%; right: 15%; }

.user-watermark.pos-5 { transform: rotate(0deg); }
.user-watermark.pos-5.w1 { top: 18%; left: 55%; }
.user-watermark.pos-5.w2 { top: 65%; right: 25%; }
.user-watermark.pos-5.w3 { bottom: 30%; left: 15%; }
.user-watermark.pos-5.w4 { top: 45%; left: 85%; }
.user-watermark.pos-5.w5 { top: 80%; right: 50%; }
.user-watermark.pos-5.w6 { top: 30%; left: 8%; }

.user-watermark.pos-6 { transform: rotate(-45deg); }
.user-watermark.pos-6.w1 { top: 22%; right: 30%; }
.user-watermark.pos-6.w2 { bottom: 40%; left: 45%; }
.user-watermark.pos-6.w3 { top: 70%; left: 15%; }
.user-watermark.pos-6.w4 { top: 50%; right: 8%; }
.user-watermark.pos-6.w5 { bottom: 10%; right: 70%; }
.user-watermark.pos-6.w6 { top: 15%; left: 75%; }

.user-watermark.pos-7 { transform: rotate(45deg); }
.user-watermark.pos-7.w1 { top: 28%; left: 20%; }
.user-watermark.pos-7.w2 { bottom: 25%; right: 35%; }
.user-watermark.pos-7.w3 { top: 75%; right: 10%; }
.user-watermark.pos-7.w4 { top: 10%; left: 85%; }
.user-watermark.pos-7.w5 { bottom: 50%; left: 60%; }
.user-watermark.pos-7.w6 { top: 55%; right: 55%; }

/* Ensure content stays above watermarks */
.question-container {
    position: relative;
    z-index: 2;
}

/* Images dans les questions */
.question-image,
.answer-image,
.correction-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 10px 0;
    box-shadow: var(--shadow-sm);
    display: block;
}

.answer-image {
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
    margin: 5px auto;
}

.question-image {
    max-height: 300px;
    margin: 15px auto;
}

.correction-image {
    max-height: 250px;
    margin: 15px auto;
}

/* Preview d'images dans l'admin */
.image-preview {
    margin: 10px 0;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 4px;
    min-height: 40px;
    background: var(--surface-2);
}

.image-preview img {
    display: block;
    margin: 0 auto 10px auto;
    border-radius: 4px;
}

.image-preview .btn {
    padding: 2px 8px;
    font-size: 12px;
}

.uploading {
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

/* Résultats de session */
.session-results {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.results-header {
    text-align: center;
    margin-bottom: 3rem;
}

.results-header h2 {
    color: var(--accent);
    margin-bottom: 1rem;
}

.results-score {
    font-family: var(--font-mono);
    font-size: 3.4rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 1rem auto;
}

.results-score.good {
    background: var(--success); /* Green for >80% */
}

.results-score.average {
    background: var(--warning); /* Orange for 50-80% */
}

.results-score.poor {
    background: var(--danger); /* Red for <50% */
}

/* Statistiques */
.results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.stat-number {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Résumé des questions */
.questions-summary {
    background: white;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.question-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.question-summary-item:hover {
    background: var(--surface-2);
}

.question-summary-item:last-child {
    border-bottom: none;
}

.question-summary-item.correct {
    border-left: 4px solid var(--success);
}

.question-summary-item.incorrect {
    border-left: 4px solid var(--danger);
}

.question-summary-title {
    flex: 1;
    font-weight: 500;
    color: var(--text);
}

.question-summary-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.result-icon {
    font-size: 1.2rem;
    font-weight: bold;
}

.question-summary-item.correct .result-icon {
    color: var(--success);
}

.question-summary-item.incorrect .result-icon {
    color: var(--danger);
}

.time-spent {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--muted);
    background: var(--surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Actions de résultats */
.results-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.results-actions .btn {
    padding: 0.8rem 1.5rem;
    font-weight: 600;
}

/* Messages d'erreur */
.error-message {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--danger-tint);
    border: 2px solid rgba(178,58,46,.3);
    border-radius: var(--radius);
    color: var(--danger-deep);
}

.error-message h3 {
    color: var(--danger-deep);
    margin-bottom: 1rem;
}

/* Contrôles de question centrés */
.question-controls {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem 0;
}

/* Bouton suivant centré */
.btn-next {
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(42, 92, 158, 0.25);
    min-width: 200px;
}

.btn-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 92, 158, 0.35);
}

.btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-sm);
    background: var(--muted);
}

/* Report problem button */
.btn-report {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 400;
    background: var(--muted);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    margin-top: 1rem;
}

.btn-report:hover {
    background: #525a66;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Modal overlay */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .modal-content {
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Compatibilité avec l'ancien bouton fixe pour les résultats */
#nextBtn:not(.btn-next) {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--primary);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(42, 92, 158, 0.25);
    z-index: 100;
}

#nextBtn:not(.btn-next):hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 92, 158, 0.35);
}

#nextBtn:not(.btn-next):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Modal de détail des questions */
.question-detail-modal {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.modal-header {
    background: var(--primary);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.modal-header .btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.modal-header .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.question-detail-content {
    padding: 2rem;
}

/* Badges de résultat */
.question-result-badge {
    padding: 0.4rem 0.8rem;
    border-radius: var(--pill);
    font-size: 0.9rem;
    font-weight: 600;
}

.question-result-badge.correct {
    background: var(--success-tint);
    color: var(--success-deep);
    border: 1px solid rgba(46,125,82,.3);
}

.question-result-badge.incorrect {
    background: var(--danger-tint);
    color: var(--danger-deep);
    border: 1px solid rgba(178,58,46,.3);
}

.question-time-spent {
    padding: 0.4rem 0.8rem;
    background: var(--surface-2);
    border-radius: var(--pill);
    font-size: 0.9rem;
    font-family: var(--font-mono);
    color: var(--muted);
}

/* Responsivité */
@media (max-width: 768px) {
    .question-container {
        padding: 1rem 0.5rem 3.5rem; /* bas : la pastille chrono fixe ne recouvre rien */
    }

    .question-header {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding: 0.85rem;
        margin-bottom: 1.25rem;
    }

    .question-header > * {
        max-width: 100%;   /* rien ne dépasse de la carte d'en-tête */
        min-width: 0;
    }

    .question-number {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }

    .question-meta {
        justify-content: center;
        gap: 0.5rem;
    }

    .question-subject,
    .question-type {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .progress-bar {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Chrono toujours visible pendant le défilement : pastille fixe en bas à droite */
    .timer-display {
        position: fixed;
        bottom: 12px;
        right: 12px;
        z-index: 500;
        margin: 0;
        font-size: 1.2rem;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        background: #fff;
    }

    .question-enonce {
        padding: 1.25rem;
    }

    .question-enonce p {
        font-size: 1rem;
    }

    .question-instructions {
        padding: 0.6rem 0.8rem;
        margin-bottom: 1.25rem;
    }

    .question-instructions p {
        font-size: 0.9rem;
    }

    .correction-zone {
        padding: 1.25rem;
        margin: 1.25rem 0;
    }

    .correction-zone h3 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .answers-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }

    .answer-card {
        min-height: 100px;
        padding: 1rem;
    }

    .results-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .results-actions {
        flex-direction: column;
    }

    .results-actions .btn {
        width: 100%;
    }

    .btn-next {
        width: 100%;
        margin: 2rem 0;
        min-width: auto;
    }

    .question-controls {
        margin: 1.5rem 0;
        padding: 0.5rem 0;
    }

    .question-top-controls {
        margin-bottom: 1rem;
    }

    .btn-back-question {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

    #nextBtn:not(.btn-next) {
        position: static;
        width: 100%;
        margin: 2rem 0;
        border-radius: var(--radius-sm);
    }

    /* Modal responsive */
    .modal-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem;
    }

    .question-detail-content {
        padding: 1rem;
    }

    .question-result-badge,
    .question-time-spent {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 16px;
    }

    .wrapper, .page {
        padding: 1.25rem 12px 3rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    .question-title {
        font-size: 1.3rem;
    }

    .question-enonce {
        padding: 1rem;
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Ensure KaTeX renders at readable size */
    .question-enonce .katex,
    .answer-content .katex,
    .correction-zone .katex {
        font-size: 1.1em;
    }

    .answer-card {
        padding: 1rem;
        min-height: 0; /* les réponses courtes ne réservent pas de vide sur mobile */
    }

    .answer-content {
        font-size: 1rem;
        line-height: 1.5;
    }

    .answer-letter {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    .answer-indicator {
        font-size: 1.3rem;
        top: 10px;
        right: 10px;
    }

    .answer-content {
        padding-right: 2rem;  /* la place de l'indicateur, version compacte */
    }

    /* Le filigrane (nowrap, tourné) ne doit pas créer de défilement horizontal */
    .user-watermark {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .results-score {
        font-size: 2.5rem;
        width: 120px;
        height: 120px;
    }

    .results-stats {
        grid-template-columns: 1fr;
    }

    .btn {
        padding: 0.9rem 1.2rem;
        font-size: 1rem;
        width: 100%;
    }

    /* Ensure all inputs are 16px to prevent iOS zoom */
    input, select, textarea {
        font-size: 16px;
    }
}
/* ==== QCM v2 : KaTeX & schémas SVG (mobile) ==== */
/* Les équations display défilent horizontalement au lieu de déborder */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.25rem 0;
    -webkit-overflow-scrolling: touch;
}
/* Les schémas SVG s'adaptent à la largeur de l'écran */
.question-diagram svg,
.question-diagram img,
.question-statement svg,
.question-statement img,
.correction-diagram svg {
    max-width: 100%;
    height: auto;
}

/* Schéma d'énoncé centré, comme celui de la correction juste en dessous.
   Les schémas compilent en page auto : le SVG fait la largeur du dessin,
   jamais celle de la colonne. Sans cette règle il se collait à gauche, et
   l'écart paraissait d'autant plus grand que le dessin était étroit. */
.question-diagram {
    text-align: center;
}

.correction-diagram {
    text-align: center;
    margin-top: 0.75rem;
}

/* Schéma DANS une proposition ou son explication : compact, sous le texte
   (jamais en ligne), centré. */
.answer-diagram {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
}

.answer-diagram svg {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
}

/* Bouton d'abandon du Trou Noir */
.btn-blackhole-exit {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.btn-blackhole-exit:hover {
    background: #000;
    border-color: #000;
}

/* iPad/tactile : un input désactivé AVALE le toucher (aucun événement), donc
   taper sur le petit champ de temps ne sélectionnait pas l'option. Avec
   pointer-events: none, le toucher traverse jusqu'au label qui active la
   radio (1er appui) ; le champ, alors activé, se focalise au 2e appui. */
.time-input:disabled {
    pointer-events: none;
}

/* Verdict de reddition en Trou Noir */
.blackhole-verdict {
    color: #1a1a1a;
    font-style: italic;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
}

/* Trou Noir vaincu (série terminée sans abandon) */
.blackhole-verdict.blackhole-won {
    color: var(--success);
}

/* ==== Panneau de configuration aux couleurs du mode choisi ====
   qcm-modes.js pose --panel-accent (= --mode-<mode>) sur #configPanel.
   La couleur du mode marque UNIQUEMENT les surlignages (bordures, anneaux,
   coche, focus) — jamais le fond des cases, qui reste neutre. */
#configPanel {
    --panel-accent: var(--primary);
}

#configPanel .selected-mode-header {
    border-left-color: var(--panel-accent);
}

#configPanel .type-box:hover {
    border-color: var(--panel-accent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--panel-accent) 18%, transparent);
}

/* Sélection : un cran au-dessus du survol (anneau intérieur de 1px), sans
   retomber dans le double anneau de 2px jugé trop épais */
#configPanel .type-box.selected {
    border-color: var(--panel-accent);
    background: var(--bg-card);
    box-shadow: inset 0 0 0 1px var(--panel-accent),
                0 2px 8px color-mix(in srgb, var(--panel-accent) 18%, transparent);
}

#configPanel .type-box.selected::after {
    background: var(--panel-accent);
}

#configPanel .type-box.selected .type-icon {
    background: var(--panel-accent);
}

#configPanel .dropdown-btn:hover,
#configPanel .dropdown-btn.active {
    border-color: var(--panel-accent);
}

#configPanel .dropdown-content {
    border-color: var(--panel-accent);
}

#configPanel .dropdown-item:has(input:checked) {
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--panel-accent);
}

#configPanel .radio-label:not(.locked):hover {
    border-color: var(--panel-accent);
}

#configPanel .radio-label:has(input:checked) {
    border-color: var(--panel-accent);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--panel-accent);
}

#configPanel input[type="radio"],
#configPanel input[type="checkbox"] {
    accent-color: var(--panel-accent);
}

#configPanel .question-input:focus,
#configPanel .time-input:focus {
    border-color: var(--panel-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--panel-accent) 16%, transparent);
}

/* Le bouton retour reste dans l'accent du site (seul élément du panneau
   à ne PAS prendre la couleur du mode, à la demande de l'auteur) */

/* ==== Coquille : responsive & mouvement ==== */
@media (max-width: 640px) {
    body { overflow-x: clip; }
    .site-header-inner {
        padding: 0 12px;
        gap: .6rem;
        height: 54px;
    }
    .wordmark { font-size: 1.15rem; letter-spacing: .03em; }
    .header-nav { gap: .6rem; min-width: 0; }
    .page-tabs { gap: .7rem; }
    .page-tab { font-size: .85rem; min-height: 52px; }
    .logout-link { font-size: .75rem; }
    .page-head { margin-bottom: 1.5rem; }
    h1 { font-size: 1.6rem; }
    .training-menu h2 { font-size: 1.3rem; }
    .selected-mode-header { flex-wrap: wrap; gap: .75rem; }
}

/* Respect du réglage système : aucune animation d'entrée */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ==== Historique des sessions (results.php + onglet Historique du profil) ==== */
/* Styles spécifiques à la page de résultats */
.results-section {
    margin-bottom: 2rem;
    min-height: 400px;
}

.filters-bar {
    background: var(--surface-2);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    gap: 2rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.9rem;
}

.filter-group select {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 150px;
}

/* Sessions Grid */
.sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.session-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.session-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px var(--primary-glow);
    transform: translateY(-2px);
}

.session-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.session-mode {
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

/* Pastilles de mode de l'historique UNIQUEMENT (le panneau de config pose
   aussi des classes mode-* sur son en-tête : ne pas le peindre) */
.session-mode.mode-apesanteur { background: var(--success); }
.session-mode.mode-gravity { background: var(--danger); }
.session-mode.mode-trou-noir { background: var(--mode-trou-noir); }
.session-mode.mode-personnalise { background: var(--mode-personnalise); }
.session-mode.mode-erreurs { background: var(--warning); }

.session-date {
    font-size: 0.9rem;
    color: var(--muted);
}

.session-score {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin: 1rem 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    /* Anneau, pas d'aplat : le score se lit dans la couleur du contour */
    background: transparent;
    border: 3px solid var(--border);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Cercles de score de l'historique UNIQUEMENT (les cellules « Performance
   par sujet » du profil utilisent les mêmes noms pour une COULEUR DE TEXTE) */
.session-score.score-excellent { border-color: var(--success); color: var(--success); }
.session-score.score-good { border-color: var(--warning); color: var(--warning); }
.session-score.score-poor { border-color: var(--danger); color: var(--danger); }

.session-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
}

/* Detail Header */
.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.detail-actions {
    display: flex;
    gap: 1rem;
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    background: var(--danger-deep);
}

/* Session Detail */
.session-overview {
    background: var(--surface-2);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.overview-item {
    text-align: center;
}

.overview-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    display: block;
}

.overview-label {
    font-size: 0.9rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Questions Table */
.questions-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-header {
    background: var(--primary);
    color: white;
    padding: 1rem 1.5rem;
    font-weight: 600;
}

.question-row {
    display: grid;
    grid-template-columns: 50px 1fr 100px 80px 100px;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.question-row:hover {
    background: var(--surface-2);
}

.question-row:last-child {
    border-bottom: none;
}

.question-number {
    font-weight: 600;
    color: var(--accent);
}

.question-title {
    color: var(--text);
}

/* Pastille sujet des lignes d'historique (ne pas toucher la pastille des
   questions en direct, qui partage le nom de classe) */
.question-row .question-subject {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    color: white;
    text-align: center;
    background: var(--success);
}

.question-result {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.result-correct { color: var(--success); }
.result-partial { color: var(--warning); }
.result-incorrect { color: var(--danger); }

/* Énoncé tronqué dans la liste (2 lignes max) */
.question-title .stmt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* En-tête de la vue relecture */
.replay-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.replay-badges {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.replay-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
}

.replay-badges .question-subject {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    border-radius: var(--pill);
}

.question-db-tag {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--pill);
    padding: 0.25rem 0.7rem;
}

.replay-meta {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.question-result-badge.partial {
    background: var(--warning-tint);
    color: var(--warning-deep);
    border: 1px solid rgba(178,106,0,.3);
}

.question-row .question-time {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--muted);
}

/* Question Detail View */
.question-detail-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Empty States */
.results-section .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted);
}

.results-section .empty-state h3 {
    margin-bottom: 1rem;
    color: var(--accent);
}

.results-section .empty-state p {
    margin-bottom: 2rem;
}

/* Loading States */
.results-section .loading {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
    .filters-bar {
        flex-direction: column;
        gap: 1rem;
    }

    .sessions-grid {
        grid-template-columns: 1fr;
    }

    .detail-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .detail-actions {
        justify-content: center;
    }

    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .question-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: left;
    }

    .question-row > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .question-row > div::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--muted);
        font-size: 0.8rem;
    }
}

/* L'énoncé dans une ligne d'historique n'est PAS un titre de question :
   il reprend la taille de texte du site (le .question-title global de
   l'interface QCM fait 1.6rem, beaucoup trop grand ici) */
.question-row .question-title {
    font-size: 0.95rem;
    color: var(--text);
    text-align: left;
    margin: 0;
    line-height: 1.45;
}

.question-row .katex { font-size: 1em; }

.question-row .katex-display {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ==== Essai gratuit : sélection manuelle des questions offertes ==== */
/* Compteur sous les filtres de la liste. Toujours affiché, y compris quand
   aucune ligne ne passe les filtres : il porte sur la banque entière. */
.qv2-sample-bar {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--primary, #2a5c9e);
    background: var(--surface-2, #f4f2ec);
    border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
    font-size: 0.9rem;
}

#qv2SampleCount {
    font-weight: 600;
}

.qv2-sample-hint {
    color: var(--muted, #67707e);
    font-size: 0.85rem;
}

.qv2-sample-hint.warn {
    color: var(--warning-deep, #8a5300);
}

.qv2-sample-cell {
    text-align: center;
}

/* ==== Champ de mot de passe avec bascule d'affichage ====================
   Un oeil discret dans le champ : taper vite un mot de passe sans pouvoir
   relire ce qu'on a tapé est la première cause d'échec de connexion. */
/* La marge passe sur l'enveloppe et l'input la perd : sans cela le bouton,
   centré sur la hauteur de l'enveloppe, tomberait sous le champ. */
.pwd-field { display: block; position: relative; margin: .4rem 0 1rem; }
.pwd-field input { width: 100%; margin: 0; padding-right: 2.75rem; }
.pwd-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.pwd-toggle:hover, .pwd-toggle:focus-visible { color: var(--accent); }
.pwd-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }

/* Icône de succès dans la table de suivi (SVG inline renvoyé par l'API) */
.badge-cell { display: flex; align-items: center; gap: 10px; }
.badge-cell svg { width: 26px; height: 26px; flex: none; }