/* ==== 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;
    --muted-strong:#4c5563;          /* gris lisible : notes de bas de panneau */
    --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);
    --mode-autopilote:#7d5a72;       /* prune sourde : chaude, à l'écart des autres modes */
    --mode-autopilote-deep:#64485b;

    /* 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 */
}

/* Liens dans le texte : le bleu du site, visités compris, jamais celui du
   navigateur. Spécificité d'un simple sélecteur d'élément : toute règle de
   composant (boutons, menus, onglets) garde la main. */
a { color: var(--primary); }

:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
/* Cartes pilotables au clavier (réponses, modes, types de QCM) : même
   contour que le focus global, un peu plus écarté pour ne pas se confondre
   avec la bordure de sélection. */
.answer-card:focus-visible,
.training-card:focus-visible,
.type-box:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }

/* ==== 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; }
/* Étiquette de cours accolée au logo (utils.js, renderScopeBadge) : MED,
   PHARMA, BIO ou CUSTOM. Même famille que les surtitres (Plex Mono en
   capitales espacées), fine et noire ; bleue et soulignée au survol, elle
   mène au réglage du cours. */
.brand-group{ display:inline-flex; align-items:baseline; gap:.5rem; }
.scope-badge{
    padding:0;
    font-family:var(--font-mono);
    font-size:.72rem;
    font-weight:400;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--text);
    text-decoration:none;
    border-bottom:1px solid transparent;
    white-space:nowrap;
    transition:color .15s var(--ease), border-color .15s var(--ease);
}
.scope-badge:hover, .scope-badge:focus-visible{ color:var(--primary); border-bottom-color:var(--primary); }

.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); }
}
/* Cartes de mode : sans image d'arrivée pour l'opacité, l'animation finit
   sur l'opacité propre de la carte (grisée si épuisée ou indisponible). Avec
   fadeUp, l'opacité restait forcée à 1 jusqu'à la fin de l'animation, puis
   la carte se grisait d'un coup. */
@keyframes fadeUpCard{
    from{ opacity:0; transform:translateY(18px); }
}

/* 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);}

/* Astérisque du bouton de lancement (renvoie à l'anecdote sous le panneau) */
.btn-star { font-size: 0.7em; margin-left: 0.15em; opacity: 0.85; }
.btn-star[hidden], .mode-footnote[hidden] { display: none; }
.mode-footnote {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.84rem;
    color: var(--muted-strong);
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton compact (Révisions « Lire le cours », Effacer les filtres…) */
.btn-small {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

.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);
}
/* Listes déroulantes : même allure dans tous les navigateurs. Sans cela,
   Safari (macOS et iPhone) garde son contrôle natif, plus bas que les autres
   champs et sans bordure arrondie. Flèche en SVG inline (img-src data:). */
select:not([multiple]){
    -webkit-appearance:none;
    appearance:none;
    padding-right:2.2rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2367707e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .8rem center;
    background-size:12px 8px;
}
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;
}

/* Compte bloqué faute d'acceptation des CGU (utils.js) : le profil se réduit
   à l'onglet Profil, quel que soit le hash de l'adresse. */
html.cgu-blocked .tab-btn:not([data-tab="profile"]) { display: none; }
html.cgu-blocked .tab-content:not(#profileTab) { display: none !important; }
html.cgu-blocked #profileTab { display: block !important; }

/* Page de validation des CGU (cgu-validation.php) */
.cgu-validation-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 1.25rem 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;
}
/* Abonné, au premier rendu : cartes à leur aspect final, clic bloqué le temps
   que le client confirme l'abonnement (utils.js) */
.training-options.pending { pointer-events: none; }

/* Profil : abonné échu (phrase d'état + bouton) */
.subscription-expired {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--warning-tint);
    border: 1px solid var(--warning);
    border-radius: var(--radius);
    text-align: center;
}
.subscription-expired p {
    margin: 0 0 0.75rem;
    color: var(--text);
}
.subscription-expired .btn {
    display: inline-block;
}

.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);
}

/* Compte gratuit : mode ouvert en aperçu, seul le lancement est bloqué.
   La carte garde l'aspect d'une carte cliquable ; seule la mention en bas la distingue. */
.training-card.mode-locked {
    cursor: pointer;
}

.locked-launch-wrap {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.locked-launch-wrap #startTraining {
    pointer-events: none;
}

.locked-mode-note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 400;
    text-decoration: underline;
}

/* Lancement impossible : grisé quelle que soit la couleur du mode */
#startTraining.btn-start:disabled {
    background: #d9dce1 !important;
    color: var(--muted) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

.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); }
.mode-autopilote h2 { color: var(--mode-autopilote); }

.btn-autopilote {
    background: var(--mode-autopilote) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(125, 90, 114, 0.30);
    color: white !important;
}

.btn-autopilote:hover {
    background: var(--mode-autopilote-deep) !important;
    box-shadow: 0 6px 20px rgba(125, 90, 114, 0.40);
    transform: translateY(-2px);
}

/* « Que réviser ? » et séries de l'Autopilote (trainer.js) : profil et
   page d'entraînement */
.trainer-intro {
    margin: 0 0 .75rem;
    color: var(--muted);
}
.trainer-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.trainer-row {
    display: grid;
    /* Colonne du sujet : au moins le mot le plus long (« Electromagnétisme »
       débordait sur le texte voisin avec un minimum fixe de 8rem) */
    grid-template-columns: minmax(min-content, 1fr) 2fr auto;
    align-items: center;
    gap: .5rem 1.5rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.trainer-row:last-child { border-bottom: none; }
.trainer-row[hidden] { display: none; }
/* Libellé centré dans le bouton (un lien .btn gardait le texte en haut) */
.trainer-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    min-width: 8.5rem;
    white-space: nowrap;
}
.trainer-actions .trainer-course { white-space: nowrap; }
/* Boutons des lignes : bleu du site (profil) ; couleur du mode dans le
   panneau de l'Autopilote, comme Lancer */
#autopilotePanel .trainer-go {
    background: var(--mode-autopilote) !important;
    border-color: var(--mode-autopilote) !important;
    color: white !important;
}
#autopilotePanel .trainer-go:hover { background: var(--mode-autopilote-deep) !important; }
.trainer-subject { font-weight: 600; }
.trainer-what { color: var(--muted); cursor: help; }
.trainer-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    justify-content: flex-end;
}
.trainer-course {
    color: var(--primary, #2a5c9e);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: .9rem;
    text-decoration: underline;
    cursor: pointer;
}
.trainer-more { margin: 1.25rem 0 1.75rem; text-align: center; }
.trainer-more .btn { display: inline-block; width: auto; padding: .65rem 1.8rem; font-size: 1rem; text-decoration: none; }
/* Par niveau de maîtrise : une petite colonne par groupe */
.trainer-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: .9rem;
    align-items: start;
}
.trainer-group {
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--muted);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: .7rem .85rem .55rem;
}
.trainer-group-poor { border-top-color: var(--danger); }
.trainer-group-good { border-top-color: var(--warning); }
.trainer-group-excellent { border-top-color: var(--success); }
.trainer-group h4 {
    margin: 0 0 .4rem;
    font-size: .9rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}
.trainer-group-hint { margin: -.2rem 0 .5rem; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.trainer-limited-note { margin: 0 0 .6rem; font-size: .85rem; color: var(--muted-strong); }
.trainer-group-count { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); font-weight: 500; }
.trainer-group ul { list-style: none; margin: 0; padding: 0; }
.trainer-group li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .22rem 0;
    font-size: .9rem;
    border-top: 1px solid var(--border-soft);
}
.trainer-group li:first-child { border-top: none; }
.tg-subject { flex: 1; color: var(--text); text-decoration: none; font-weight: 500; }
.tg-subject:hover { color: var(--primary); text-decoration: underline; }
span.tg-subject:hover { color: var(--text); text-decoration: none; }
/* Accès découverte, quota du jour épuisé : boutons de l'Autopilote grisés */
.trainer-go:disabled, .trainer-launch:disabled, .trainer-more .is-limited {
    opacity: 0.45;
    filter: grayscale(0.8);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.tg-pct { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.trainer-group-poor .tg-pct { color: var(--danger); }
.trainer-group-good .tg-pct { color: var(--warning-deep); }
.trainer-group-excellent .tg-pct { color: var(--success); }
.tg-course { font-size: .78rem; color: var(--primary); white-space: nowrap; }
.revisions-subtitle { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--muted-strong); }
/* Deux cartes par ligne ; une carte seule sur sa ligne (troisième
   proposition) est centrée, à la même largeur que les autres */
.trainer-series-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}
.trainer-series-list > .trainer-series { flex: 0 1 calc((100% - 1.25rem) / 2); min-width: 0; }
@media (max-width: 640px) {
    .trainer-series-list > .trainer-series { flex-basis: 100%; }
}
.trainer-series {
    border: 1px solid var(--border);
    border-top: 3px solid var(--mode-autopilote);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.35rem;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.trainer-series-head {
    margin-top: 2.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.trainer-reroll {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: var(--pill);
    padding: .3rem .9rem;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.trainer-reroll:hover { background: var(--primary-tint); }
/* Dans le panneau de l'Autopilote : couleur du mode */
#autopilotePanel .trainer-reroll { border-color: var(--mode-autopilote); color: var(--mode-autopilote); }
#autopilotePanel .trainer-reroll:hover { background: color-mix(in srgb, var(--mode-autopilote) 10%, white); }
.trainer-reroll:disabled { opacity: .5; cursor: wait; }
.trainer-rows-head { margin-top: 0; }
.trainer-rows-head h2, .trainer-rows-head h3 { margin-bottom: .5rem; }
.trainer-series-exam { border-top-color: var(--mode-gravity); }
.trainer-series h4 { margin: 0; font-size: 1.05rem; }
.trainer-series-meta { margin: 0; font-family: var(--font-mono); font-size: .75rem; line-height: 1.6; color: var(--muted); }
.trainer-series-detail { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; flex: 1; }
.trainer-series-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .5rem;
}
.trainer-series-actions .trainer-launch { padding: .5rem 1.4rem; }
.trainer-series-actions .trainer-course { white-space: nowrap; }
@media (max-width: 600px) {
    .trainer-row { grid-template-columns: 1fr; gap: .25rem; }
    .trainer-actions { justify-content: flex-start; }
}

/* (2026-08-24) L'ancien .totp-offscreen (opacity:0) est supprimé : un champ
   OTP à opacity nulle reste VISIBLE pour les gestionnaires de mots de passe,
   qui classaient le formulaire comme une étape 2FA et ne remplissaient plus
   identifiant/mot de passe. Le champ 2FA est désormais hidden + disabled
   jusqu'à la validation du mot de passe (voir login.php / admin.php). */

/* ==== 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: fadeUpCard .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[data-mode="autopilote"] { --card-accent: var(--mode-autopilote); }

.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);
}

/* Lancement en cours : grisé, curseur d'attente, pas d'effet de survol */
.btn.is-loading, .btn.is-loading:hover {
    opacity: 0.55;
    cursor: progress;
    transform: none;
    box-shadow: none;
}

.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);
}

/* Compte gratuit : étiquette d'accès sur chaque carte (« Essai gratuit »,
   « Disponible avec un abonnement »), même registre que .mode-usage. */
.mode-access {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    text-align: left;
}
.training-card.disabled .mode-access { color: var(--muted); }

/* Carte Mes Erreurs : erreurs en attente (même registre que .mode-usage) */
.mode-count {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    text-align: left;
}

/* ==== 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;
}

/* Fenêtre d'acceptation des CGU avant paiement (subscribe.js) : contenu à
   gauche, le bloc de l'inscription réutilisé tel quel. */
.ui-dialog.ui-dialog-cgu { text-align: left; max-width: 540px; }
.ui-dialog-cgu p { margin-bottom: 1rem; }
.ui-dialog-cgu .cgu-acceptance { margin: 0 0 1.25rem; }
.ui-dialog-cgu .ui-dialog-actions { justify-content: flex-end; }
/* Récapitulatif de commande (« Ta commande ») : libellés à gauche, valeurs à droite */
.order-recap { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.order-recap dt { color: var(--muted); }
.order-recap dd { margin: 0; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.order-recap-instead { color: var(--muted); font-weight: 400; }
.ui-dialog-cgu a { color: var(--primary); font-weight: 600; }
.ui-dialog-cgu .btn:disabled, .cgu-validation-actions .btn:disabled { opacity: .55; cursor: not-allowed; }
/* Cours à la première connexion (promptMatiere, utils.js) */
.ui-dialog.ui-dialog-matiere { text-align: left; max-width: 440px; }
.ui-dialog-matiere p { margin-bottom: 1rem; }
.matiere-choices { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1.25rem; }
.matiere-choice { display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
    padding: .75rem 1rem; font-weight: 500; text-align: left;
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm); cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease); }
.matiere-choice:hover { border-color: var(--primary); }
/* La règle globale des champs (width 100 %, marges) ne vaut pas pour un bouton radio */
.matiere-choice input[type="radio"] { width: auto; flex: none; margin: 0; padding: 0;
    accent-color: var(--primary); box-shadow: none; }
.matiere-choice:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.ui-dialog-matiere .ui-dialog-actions { justify-content: flex-end; }
.ui-dialog-matiere .btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-dialog.ui-dialog-custom { max-width: 540px; }
.ui-dialog .ui-dialog-actions.ui-dialog-actions-split { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: stretch; justify-content: stretch; flex-direction: initial; }
.ui-dialog .ui-dialog-actions-split .btn { width: 100%; margin: 0; }
@media (max-width: 480px) { .ui-dialog .ui-dialog-actions.ui-dialog-actions-split { grid-template-columns: 1fr; } }
.ui-dialog .ui-dialog-note { margin: .75rem 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
/* Petit « ? » d'aide à côté d'un libellé ou d'un titre (utils.js) */
.label-with-help { display: flex; align-items: center; gap: .45rem; }
.label-with-help label { margin: 0; }
.help-dot { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; min-width: 0; padding: 0; margin: 0;
    border: 1px solid var(--border); border-radius: 50%; background: var(--bg-card);
    color: var(--muted); font: 600 .72rem/1 var(--font-body); cursor: pointer; box-shadow: none;
    transition: color .15s var(--ease), border-color .15s var(--ease); }
.help-dot:hover, .help-dot[aria-expanded="true"], .help-dot:focus-visible { color: var(--primary); border-color: var(--primary); }
.help-pop { margin: .35rem 0 .75rem; padding: .6rem .8rem; font-size: .88rem; line-height: 1.45;
    color: var(--text); background: var(--primary-tint); border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm); }
.help-pop[hidden] { display: none; }

.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; }
/* Origine, sous la ligne de liens : petite croix suisse alignée sur le texte */
.footer-origin{ margin-top:.45rem; font-size:.78rem; }
.footer-origin .swiss-flag{ display:inline-block; vertical-align:-2px; margin-right:.4em; border-radius:2px; }
/* 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 */
/* Toute la largeur du rail (celle du menu du haut) : la zone des questions
   était plus étroite que l'en-tête, avec 1000 px moins deux marges de 2 rem. */
.question-container {
    max-width: none;
    margin: 0 auto;
    padding: 2rem 0;
    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;
    /* minmax(0, 1fr) et non 1fr : « 1fr » laisse une colonne s'élargir pour
       loger un contenu incassable (une longue formule dans la correction), et
       les quatre tuiles n'avaient plus la même largeur. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: none; /* alignée sur l'énoncé, qui occupe tout le rail */
    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;
}

/* Survol : appareils à VRAI survol seulement. Sur tactile, :hover colle au
   dernier élément touché — le pourtour de sélection restait sur l'ancienne
   carte après avoir choisi une autre réponse. */
@media (hover: hover) and (pointer: fine) {
    .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.11);
    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 */








/* 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;
    /* Au-dessus des filigranes (z-index 1) : un nom en travers des boutons
       les rendait illisibles */
    position: relative;
    z-index: 2;
}

/* 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: 500;
    vertical-align: middle;
    /* Action secondaire, discrète : même vocabulaire que .btn-secondary
       (fond carte, contour, texte en retrait), pas un bloc gris plein */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    cursor: pointer;
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease), border-color .2s var(--ease, ease);
    box-shadow: none;
    margin-top: 1rem;
}

.btn-report:hover {
    background: var(--surface-2);
    border-color: var(--muted);
    color: var(--text);
}

/* « Lire le cours sur ce chapitre » (corrections et historique) : même
   gabarit que btn-report, en accent outremer. */
.btn-course-jump {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.btn-course-jump:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}

/* Actions sous le détail d'une question (résultats, historique) : une
   rangée centrée, boutons de même hauteur et sans marge parasite — le
   « Signaler » portait une marge haute que le lien vers le cours n'avait
   pas, d'où le décalage. */
.detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 2rem;
}

.detail-actions .btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.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, au-dessus du bandeau de navigation (60 px + zone sûre) */
    .timer-display {
        position: fixed;
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        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 */
/* Trou Noir : bandeau de reprise d'une série mise en pause */
.blackhole-resume {
    margin-bottom: 1.2rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--mode-trou-noir, #1a1a1a);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.blackhole-resume p {
    margin: 0 0 0.8rem;
}

.blackhole-resume-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* Bouton principal et renvoi au cours sur la même ligne */
.question-controls-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.8rem;
}

/* Rangée secondaire sous le bouton principal. « Signaler un problème » et
   « J'abandonne » étaient des inline-block de tailles différentes, dont un
   seul portait une marge haute : ils ne tombaient pas sur la même ligne.
   Flex + hauteurs égalisées les alignent quel que soit leur libellé. */
.question-controls-secondary {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.6rem;
}

/* Information nLPD sous la case CGU de l'inscription */
.cgu-privacy-note {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Note sous la table des matières du cours */
.course-toc-note {
    margin: 1.2rem 0 0;
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
}

/* Bouton principal désactivé PENDANT UN APPEL SERVEUR (classe is-busy posée par
   qcm-engine.js) : l'état doit se voir. La règle visait « :disabled » tout
   court : le curseur d'attente s'affichait aussi quand aucune réponse n'était
   encore choisie, comme si la page travaillait. */
.btn-next.is-busy:disabled {
    opacity: 0.65;
    cursor: wait;
}

/* Sous-titre dans le bouton principal (« et voir la correction ») */
.btn-next .btn-sub {
    display: block;
    font-size: 0.72em;
    font-weight: 400;
    opacity: 0.85;
    letter-spacing: normal;
    margin-top: 0.1em;
}

/* Écran étroit : la rangée principale vit dans le bandeau condensé collé au
   bas de la fenêtre (voir .bottom-bar, plus bas). */

.question-controls-secondary .btn {
    margin-top: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

/* Pause : la série reste ouverte, ton neutre face au noir de l'abandon */
.btn-blackhole-pause {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-blackhole-pause:hover {
    background: var(--surface-2);
}

.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: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.9rem 1.25rem;
    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.8rem;
}

.filter-group select,
.filter-group input {
    margin: 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.95rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    min-width: 0;
    width: auto;
}
.filter-group select { min-width: 150px; }
.filter-group select:not([multiple]) { padding-right: 2rem; background-position: right .6rem center; }

/* ---- Historique : barre de pastilles de filtre (results-viewer.js) ----
   Une pastille par critère ; menu déroulant au clic ; pastille teintée avec
   sa valeur et une croix quand le critère est actif ; tri à droite. */
.hfilters {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1.25rem;
}
.hfilters-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hfilters-right { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; }
.filter-count { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.filter-unit { font-size: 0.85rem; color: var(--muted); }

.hf-pill {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-card); color: var(--text);
    font-size: 0.88rem; line-height: 1.2;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.hf-pill:hover { border-color: var(--muted); }
.hf-pill.is-active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.hf-pill.is-open { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.hf-pill-main, .hf-pill-x {
    appearance: none; background: none; border: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    display: inline-flex; align-items: center;
}
.hf-pill-main { gap: 0.4rem; padding: 0.42rem 0.7rem 0.42rem 0.85rem; border-radius: 999px; }
.hf-pill-main .chev { width: 0.75em; height: 0.75em; opacity: 0.7; flex: none; }
.hf-pill.is-active .hf-pill-main { padding-right: 0.45rem; font-weight: 600; }
.hf-pill-x {
    padding: 0 0.6rem 0 0.35rem; font-size: 1.05em; opacity: 0.7;
    border-left: 1px solid rgba(42, 92, 158, 0.25); border-radius: 0 999px 999px 0;
}
.hf-pill-x:hover { opacity: 1; background: rgba(42, 92, 158, 0.08); }
.hf-pill-x[hidden] { display: none; }
.hf-pill-main:focus-visible, .hf-pill-x:focus-visible, .hf-opt:focus-visible, .hf-seg button:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px;
}
.hf-pill-sort { color: var(--muted); }
.hf-pill-sort .hf-pill-text { color: var(--text); }
.hf-link {
    appearance: none; background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: 0.85rem; color: var(--primary); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.hf-link[hidden] { display: none; }

.hf-pop {
    position: absolute; z-index: 500;
    min-width: 230px; max-width: min(340px, 100%);
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
    padding: 0.35rem;
}
.hf-opt {
    appearance: none; background: none; border: 0; margin: 0;
    display: flex; width: 100%; box-sizing: border-box; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.6rem; border-radius: 7px; cursor: pointer;
    font: inherit; font-size: 0.9rem; color: var(--text); text-align: left;
}
.hf-opt:hover, .hf-opt:focus-visible { background: var(--surface-2); outline: none; }
.hf-opt[aria-checked="true"] { color: var(--primary); font-weight: 600; }
.hf-opt .tick { width: 1em; flex: none; text-align: center; }
.hf-pop-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.5rem; }
.hf-pop-dates { border-top: 1px solid var(--border-soft); margin-top: 0.25rem; }
.hf-pop input { margin: 0; padding: 0.35rem 0.5rem; font-size: 0.9rem; width: auto; min-width: 0; }
.hf-pop input[type="number"] { width: 4.2rem; }
.hf-pop-foot { display: flex; justify-content: flex-end; padding: 0.2rem 0.5rem 0.3rem; }
.hf-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.hf-seg button {
    appearance: none; background: none; border: 0; margin: 0;
    padding: 0.32rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.85rem; color: var(--text);
}
.hf-seg button + button { border-left: 1px solid var(--border); }
.hf-seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }

@media (max-width: 600px) {
    .hfilters-right { margin-left: 0; width: 100%; justify-content: space-between; }
    .hf-pop { left: 0 !important; right: 0; max-width: none; }
}

/* 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-mode.mode-autopilote { background: var(--mode-autopilote); }

.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;
}
/* « Questions : » ne se coupe pas : la valeur passe à la ligne, pas le libellé */
.stat-item > span:first-child { white-space: nowrap; margin-right: .4rem; }
.stat-item > span:last-child { text-align: right; }
.session-types { color: var(--muted); font-weight: 400; white-space: nowrap; } /* « (2 A · 1 K') » d'un bloc */

/* Sujets couverts par la série : pastilles fines, couleur du sujet */
.session-subjects { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; }
.session-subject {
    font-size: 0.75rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--subject-color, var(--border));
    color: var(--text);
    background: var(--surface-2);
}
.session-subject-more { border-color: var(--border); color: var(--muted); }

/* 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;
}
/* Le .detail-actions des corrections porte une marge haute de 2rem : dans
   l'en-tête du détail d'une série, elle décalait « Supprimer cette série »
   sous « Retour à la liste ». */
.detail-header .detail-actions { margin-top: 0; }

.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 170px 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). La pastille est un
   span dans sa cellule : sur téléphone, la cellule prend toute la largeur
   (libellé « Sujet » à gauche), la pastille garde sa taille. Le nom ne se
   coupe jamais au milieu (« Electrosta / tique ») : points de suspension,
   nom complet en infobulle. */
.question-row .question-subject-cell { text-align: center; min-width: 0; }
.question-row .question-subject {
    display: inline-block;
    max-width: 100%;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    color: white;
    text-align: center;
    background: var(--success);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.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: none; /* relecture d'une question : même largeur que la série, celle du rail */
    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;
        align-items: stretch;
        gap: 0.8rem;
    }
    .filter-group select { width: 100%; }
    .filter-actions { margin-left: 0; justify-content: space-between; }

    .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);
        /* Même libellé pour toutes les cellules : la cellule Heure est en
           police mono, le n° en gras, le libellé ne doit hériter d'aucun */
        font-family: var(--font-body);
        font-weight: 600;
        color: var(--muted);
        font-size: 0.8rem;
        flex-shrink: 0;
        margin-right: 0.75rem;
    }
    .question-row .question-subject { max-width: 70%; }

    /* Boutons pleine largeur du détail : texte centré */
    .detail-header .btn { justify-content: center; text-align: center; }
}

/* 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;
}

/* ==== Cours (polycopié en ligne) ========================================= */
.course-back-bar{
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    background:var(--accent-tint, #eaf0f8); border:1px solid var(--border-soft, #d9dce1);
    border-radius:8px; padding:.6rem 1rem; margin-bottom:1.4rem;
    font-size:.92rem; color:var(--muted);
}
.course-back-bar .btn{ margin-left:auto; }

.course-partie{ margin-bottom:2rem; }
.course-partie-title{
    font-size:1.05rem; color:var(--muted); text-transform:uppercase;
    letter-spacing:.06em; margin-bottom:.7rem;
}
.course-partie-chapters{ display:grid; gap:.5rem; }
.course-chapter-card{
    display:flex; align-items:center; gap:.9rem; width:100%;
    text-align:left; background:var(--card, #fff);
    border:1px solid var(--border-soft, #d9dce1); border-radius:8px;
    padding:.75rem 1rem; cursor:pointer; font:inherit;
    transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.course-chapter-card:hover{ border-color:var(--primary); }
.course-chapter-card.locked{ cursor:default; opacity:.62; }
.course-chapter-num{
    font-family:"IBM Plex Mono", monospace; font-size:.85rem;
    color:var(--accent); min-width:3.2rem;
}
.course-chapter-title{ font-weight:600; flex:1; }
.course-chapter-arrow{ color:var(--muted); }
/* Badge « Lu » (cliquable : remet le chapitre en non lu) */
.course-chapter-read{
    background:var(--success-tint); color:var(--success-deep);
    border:1px solid var(--success); border-radius:999px;
    font-size:.72rem; font-weight:600; padding:.1em .6em;
    cursor:pointer; flex-shrink:0;
}
.course-chapter-read:hover{ background:var(--success); color:#fff; }

/* ---- Courbe de progression (onglet Révisions du profil) ---- */
.progression-head{ display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:1rem; }
.progression-score{ display:flex; align-items:baseline; gap:.25rem; flex-shrink:0; flex-wrap:wrap; }
.progression-score .progression-today{ flex-basis:100%; }
.progression-score-value{ font-size:2.6rem; font-weight:700; color:var(--primary); line-height:1; }
.progression-score-goal{ font-size:1.8rem; font-weight:600; color:var(--primary); opacity:.75; line-height:1; margin-left:.1rem; }
.progression-desc{ flex:1 1 280px; margin:0; font-size:.92rem; color:var(--muted); }
.progression-chart{ height:260px; }
.progression-kpis{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:.9rem 0 0; padding:0; font-size:.9rem; }
.progression-kpis strong{ color:var(--primary); }
.progression-today{ display:block; font-size:.8rem; color:var(--muted); margin-top:.15rem; white-space:nowrap; }

/* Maîtrise par sujet : nom, barre, pourcentage (sujets faibles en premier) */
.progression-subjects-title{ font-size:.95rem; margin:1.2rem 0 .5rem; }
.progression-subjects{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.35rem 1.5rem;
    font-size:.88rem;
}
.progression-subjects li{ display:grid; grid-template-columns:minmax(0,1fr) 120px 3.2em; align-items:center; gap:.6rem; }
.ps-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-bar{ height:8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border-soft); overflow:hidden; }
.ps-fill{ display:block; height:100%; background:var(--primary); border-radius:999px; }
.ps-pct{ text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.ps-locked{ opacity:.55; }
.ps-locked .ps-pct{ font-size:.78rem; }
.progression-cap-note{ margin:.8rem 0 0; font-size:.88rem; color:var(--muted); }
.progression-cap-note strong{ color:var(--text); }
.course-chapter-lock{
    font-size:.78rem; color:var(--muted); border:1px solid var(--border-soft, #d9dce1);
    border-radius:99px; padding:.15rem .6rem; white-space:nowrap;
}
/* Téléphone : la pastille « Disponible avec l'abonnement » passe sous le titre au lieu de l'écraser
   et de faire déborder la page (défilement horizontal vu sur un compte gratuit à 390 px) */
@media (max-width: 520px){
    .course-chapter-card{ flex-wrap:wrap; }
    .course-chapter-title{ min-width:0; overflow-wrap:anywhere; flex-basis:calc(100% - 4.5rem); }
    .course-chapter-lock{ flex-basis:100%; margin-left:4.1rem; white-space:normal; text-align:left; border-radius:10px; }
}

.chapter-layout{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:1.6rem; }
.chapter-sidenav{ position:sticky; top:76px; align-self:start; max-height:calc(100vh - 96px); overflow-y:auto; }
.chapter-sidenav-title{
    font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
    color:var(--muted); margin-bottom:.5rem;
}
.chapter-sidenav nav{ display:flex; flex-direction:column; gap:.15rem; }
.chapter-sidenav a{
    font-size:.88rem; color:var(--muted); text-decoration:none;
    padding:.28rem .55rem; border-left:2px solid var(--border-soft, #d9dce1);
}
.chapter-sidenav a:hover{ color:var(--accent); border-left-color:var(--primary); }

.chapter-topbar{ margin-bottom:1rem; }
.chapter-svg-wrap{
    position:relative; background:#fff;
    border:1px solid var(--border-soft, #d9dce1); border-radius:10px;
    padding:clamp(.4rem, 2vw, 1.4rem);
    /* clip (PAS hidden) : un saut d'ancre interne (@fig/@eq) ferait défiler
       le conteneur overflow:hidden et « casserait » visuellement la page */
    overflow:clip;
    -webkit-user-select:none; user-select:none;
}
.course-watermark{ font-size:1.5rem; }

.chapter-bottom-nav{
    display:flex; align-items:stretch; justify-content:center; gap:.8rem;
    flex-wrap:nowrap;
}
/* Titres de chapitres sur une ligne, coupés par des points de suspension ;
   les boutons prennent la largeur de leur titre (au plus 40 %), pas plus. */
.course-nav-btn{ flex:0 1 auto; max-width:40%; min-width:0; }
.course-nav-btn .btn-label{
    display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.course-nav-toc{ flex:0 0 auto; }

.course-state{ text-align:center; color:var(--muted); padding:3rem 0; }
.course-state .btn{ margin-top:1rem; }

@media (max-width: 900px){
    /* minmax(0,1fr) et non 1fr : une colonne « 1fr » ne descend pas sous la
       largeur naturelle de son contenu, et WebKit prend celle des figures
       (340 pt) : le chapitre Optique faisait 472 px sur un écran de 390. */
    .chapter-layout{ grid-template-columns:minmax(0,1fr); }
    .chapter-sidenav{ display:none !important; }
}

/* Lien vers le cours depuis la correction d'une question */
/* Renvoi au cours : bouton posé à côté de « Question suivante », affiché
   seulement quand la correction est visible (injecté par showCorrection). */
.btn-course-link{
    display:inline-flex; align-items:center;
    padding:1rem 1.5rem; font-size:1rem; font-weight:600;
    background:transparent; color:var(--text);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    text-decoration:none; transition:background .2s var(--ease, ease);
}

.btn-course-link:hover{ background:var(--surface-2); }

/* Souscriptions suspendues : remplace le bouton de paiement dans la carte
   d'offre. Même encombrement qu'un bouton pour que la grille ne saute pas. */
.subs-blocked{
    margin:0; padding:.9rem 1rem; text-align:center;
    font-weight:600; color:var(--warning-deep);
    background:var(--warning-tint); border:1px solid var(--border);
    border-radius:var(--radius-sm);
}

/* ==== Lecteur de cours : HTML natif ====================================== */
.chapter-svg-wrap{ padding:clamp(1rem, 3vw, 2.2rem); }
#chapterSvg{ margin:0 auto; line-height:1.65; }
#chapterSvg p{ margin:0 0 1em; text-align:justify; }
/* Listes du cours : même respiration que les paragraphes. Sans marge basse,
   le paragraphe qui suit une liste se collait à son dernier point. */
#chapterSvg ul, #chapterSvg ol{ margin:0 0 1em; padding-left:1.5em; }
#chapterSvg li{ margin:.15em 0; }
#chapterSvg .course-chap-head{ margin-bottom:1.6rem; border-bottom:1px solid var(--border-soft,#d9dce1); padding-bottom:.9rem; }
#chapterSvg .course-chap-partie{ font-size:.8rem; letter-spacing:.06em; color:var(--muted); margin:0 0 .2rem; }
#chapterSvg .course-chap-title{ font-size:1.6rem; margin:0; }
#chapterSvg h3{ color:var(--accent); font-size:1.18rem; margin:1.8em 0 .7em; scroll-margin-top:76px; }
#chapterSvg h4{ font-size:1.02rem; margin:1.4em 0 .5em; }
#chapterSvg figure{ margin:1.4em auto; text-align:center; }
#chapterSvg figcaption{ font-size:.85rem; color:var(--muted); margin-top:.45em; }
#chapterSvg table{ margin:1em auto; border-collapse:collapse; }
#chapterSvg table td, #chapterSvg table th{ border:1px solid var(--border-soft,#d9dce1); padding:.35em .7em; }
#chapterSvg svg{ max-width:100%; height:auto; vertical-align:middle; }
#chapterSvg .course-grid{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:flex-start; margin:1.2em 0; }
#chapterSvg .course-cell{ flex:1 1 260px; min-width:0; text-align:center; }
/* Grille mixte texte+figure (mise en page « côte à côte » du polycopié) :
   sur le site on empile — texte pleine largeur, figure centrée dessous. */
#chapterSvg .course-grid:has(> .course-cell figure):has(> .course-cell:not(:has(figure))){ display:block; }
#chapterSvg .course-grid:has(> .course-cell figure) > .course-cell:not(:has(figure)){ text-align:left; }
/* Énoncés centrés du cours (lois, citations) : centered[] du prélude. */
#chapterSvg .course-center{ text-align:center; margin:1em 0; }
#chapterSvg .course-center p{ text-align:center; }
#chapterSvg .course-exercice{ border:1.5px solid var(--border-soft,#d9dce1); border-radius:8px; margin:1.4em 0; overflow:hidden; }
#chapterSvg .course-exercice-title{ background:var(--card,#f4f5f7); font-weight:600; font-size:.95rem; padding:.5em .9em; border-bottom:1px solid var(--border-soft,#d9dce1); }
#chapterSvg .course-exercice-body{ padding:.8em .9em .9em; }
#chapterSvg .course-chapref{ color:var(--accent); cursor:pointer; }
#chapterSvg .course-chapref:hover{ text-decoration:underline; }
#chapterSvg a{ color:var(--accent); }

/* ==== Menu déroulant Mon Profil (header) ================================= */
.profile-menu{ position:relative; display:flex; align-items:stretch; }
.profile-menu-drop{
    position:absolute; top:100%; right:0; min-width:190px;
    background:var(--bg-card,#fff); border:1px solid var(--border-soft,#d9dce1);
    border-radius:0 0 10px 10px; box-shadow:0 8px 22px rgba(20,28,40,.10);
    padding:.3rem 0; z-index:500;
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .18s var(--ease), transform .18s var(--ease),
        visibility 0s linear .18s;
}
.profile-menu:hover .profile-menu-drop,
.profile-menu.is-open .profile-menu-drop,
.profile-menu:focus-within .profile-menu-drop{
    visibility:visible; opacity:1; transform:translateY(0);
    transition:opacity .18s var(--ease), transform .18s var(--ease);
}
/* L'onglet s'assombrit pendant que le menu est déployé : on voit d'où il vient */
.profile-menu:hover > .page-tab,
.profile-menu.is-open > .page-tab,
.profile-menu:focus-within > .page-tab{
    color:var(--accent);
    background:var(--surface-2,#f0f1f4);
}
.profile-menu-drop a{
    display:block; padding:.52rem .95rem; font-size:.92rem; font-weight:600;
    color:var(--muted); text-decoration:none; white-space:nowrap;
}
.profile-menu-drop a:hover{ color:var(--accent); background:var(--surface-2,#f4f5f7); }
.profile-menu-drop a:last-child{
    border-top:1px solid var(--border-soft,#d9dce1); margin-top:.25rem; padding-top:.6rem;
}

@media (hover: none) {
    .profile-menu:hover:not(.is-open):not(:focus-within) .profile-menu-drop{
        visibility:hidden; opacity:0; transform:translateY(-8px);
    }
}

/* Équations du cours : en ligne dans le flux, en bloc centrées */
#chapterSvg .imath{ display:inline; }
#chapterSvg .imath svg{ vertical-align:-0.18em; }
#chapterSvg .bmath{ text-align:center; margin:1.05em 0; overflow-x:auto; }

/* Chapitre sans sous-sections : pas de piste latérale réservée */
.chapter-layout.course-no-nav{ grid-template-columns:minmax(0,1fr); }
.chapter-main{ min-width:0; }

/* Cibles des renvois internes (@eq/@fig) : dégagées du header sticky */
#chapterSvg [id]{ scroll-margin-top:84px; }

/* Formule inline + ponctuation adjacente : insécables (voir math-render.js) */
.math-nowrap { white-space: nowrap; }

/* Une formule inline ne se coupe JAMAIS en son milieu : KaTeX segmente aux
   opérateurs (=, +, −) pour autoriser des coupures de ligne, on les supprime.
   Les équations en bloc trop larges défilent au lieu de se couper. */
.katex { white-space: nowrap; }
.katex-display { overflow-x: auto; overflow-y: hidden; }

/* Exception : les tuiles de réponse ont une largeur FIXE (grille 2 x 2 de
   tuiles égales). Une formule plus large que sa tuile s'y coupe donc aux
   opérateurs (=, +, −), là où KaTeX le prévoit, plutôt que d'élargir la tuile.
   Le reste du texte peut aussi se couper dans un mot très long ; en dernier
   recours (un seul terme plus large que la tuile), la correction défile. */
.answer-card { min-width: 0; }
.answer-card .katex,
.answer-card .math-nowrap { white-space: normal; }
.answer-card .answer-content,
.answer-card .answer-correction { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.answer-card .answer-correction { overflow-x: auto; overflow-y: hidden; }

/* ==== Navigation v3 : parcours libre d'une session (hors Trou Noir) ==== */
/* Boutons latéraux (Précédent, Passer) : même gabarit que le lien vers le
   cours, en retrait du bouton principal. */
.btn-nav-side {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 1.5rem; font-size: 1rem; font-weight: 600;
    background: white; color: var(--primary);
    border: 2px solid var(--primary); border-radius: var(--radius-sm);
    transition: background .2s var(--ease, ease), color .2s var(--ease, ease);
}

.btn-nav-side:hover:not(:disabled) { background: var(--primary); color: white; }

.btn-nav-side:disabled { opacity: 0.45; cursor: not-allowed; }

/* Dernière question en correction immédiate : le bouton de droite devient
   « Terminer / sans répondre à cette question », même poids que Valider */
.btn-nav-side.btn-finish-side {
    flex-direction: column;
    background: var(--primary); color: white;
    padding: 1rem 1.5rem; font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(42, 92, 158, 0.25);
}
.btn-nav-side.btn-finish-side:hover:not(:disabled) { filter: brightness(1.08); }
.btn-nav-side .btn-sub {
    display: block; font-size: 0.72em; font-weight: 400; opacity: 0.85; margin-top: 0.1em;
}

/* Arrêter l'entraînement : rangée secondaire, ton neutre (l'enregistrement
   n'est pas un abandon, contrairement au Trou Noir). */
.btn-stop-training {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);      /* un cran plus lisible que Signaler (muted) */
    font-weight: 500;
}

.btn-stop-training:hover {
    background: var(--surface-2);
    border-color: var(--muted);
    color: var(--text);
}

/* Pastilles : une par question, sous la barre de progression. Cliquables.
   vierge = contour, ouverte sans réponse = contour renforcé, répondue =
   remplie claire, corrigée = remplie, courante = anneau. */
.qnav-dots {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    margin-top: 0.6rem; max-width: 100%;
}
/* Paquet de dix pastilles, insécable : la ligne accueille 1, 2 ou 3 paquets
   selon la largeur (téléphone, écran courant, grand écran). */
.qnav-group { display: flex; flex: 0 0 auto; gap: 5px; }

.qnav-dot {
    width: 14px; height: 14px; padding: 0;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .15s var(--ease, ease);
}

.qnav-dot:hover { transform: scale(1.25); }

.qnav-dot.is-visited { border-color: var(--muted); }

.qnav-dot.is-answered { border-color: var(--primary); background: rgba(42, 92, 158, 0.35); }

.qnav-dot.is-locked { border-color: var(--primary); background: var(--primary); }

.qnav-dot.is-current { box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--primary); }

/* Chrono à l'arrêt : la réponse affichée ne peut plus changer (question
   corrigée), le temps ne s'écoule pas tant qu'on la relit. */
.timer-display.timer-paused { opacity: 0.55; }

@media (max-width: 600px) {
    .btn-nav-side { flex: 1 1 40%; padding: 0.8rem 1rem; }
}

/* ==== Bandeau de navigation collé au bas de la fenêtre (QCM et cours) ====
   Modèle Duolingo / Quizlet / Anki : les commandes principales restent sous
   le pouce. position: sticky; bottom: 0 sur le DERNIER enfant d'un conteneur
   haut (#questionContainer pour le QCM, .chapter-main pour le cours) : le
   bandeau colle au bord bas de la fenêtre tant que le contenu défile, puis
   reprend sa place naturelle en fin de page. Jamais masqué, jamais par-dessus
   le pied de page, aucun padding de page à calculer : quand la page est
   courte, le bandeau suit simplement le contenu. Aucun ancêtre ne porte
   overflow: hidden/auto ; body n'a que overflow-x: clip (écran étroit), qui
   ne crée pas de conteneur de défilement. Les actions secondaires (Signaler,
   Arrêter, Pause, J'abandonne) restent dans la page, au-dessus du bandeau. */
.bottom-bar {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    /* au-dessus du contenu (question 2, filigranes 1), sous le header
       collant (400) et les dialogues uiDialog (10000) */
    z-index: 300;
    margin: 1.5rem 0 0;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    /* Transparent quand le bandeau est posé dans la page ; fond de carte,
       bordure et ombre seulement quand il est collé au bas de la fenêtre
       et recouvre du contenu (classe is-stuck posée par utils.js). */
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    /* Pas de transition : le bandeau est recréé à chaque question et un
       fondu de 150 ms sur chaque nouveau bandeau se voyait comme un
       clignotement. Le changement d'état est instantané. */
}
.bottom-bar.is-stuck {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 -6px 18px rgba(26, 35, 48, .07);
}
/* Posé dans la page, le bandeau précède la rangée Signaler / Arrêter :
   les deux rangées se suivent de près (les marges d'origine de
   .question-controls valaient pour une rangée seule). */
.bottom-bar + .question-controls {
    margin-top: 0;
    padding-top: 0;
}
.bottom-bar + .question-controls .question-controls-secondary {
    margin-top: 0.25rem;
}

/* Note de cadence de lecture, posée dans le bandeau au-dessus des boutons */
.bottom-bar .pace-note { margin: 0 0 0.6rem; }

.bottom-bar .question-controls-main .btn { margin: 0; }

/* Écran large : boutons de navigation à la hauteur de la rangée secondaire
   (Signaler / Arrêter), sous-titre de Valider sur la même ligne. */
@media (min-width: 700px) {
    .bottom-bar .question-controls-main .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        min-height: 2.5rem;
        padding: 0 1.25rem;
        font-size: 1rem;
        line-height: 1.2;
    }
    .bottom-bar .btn-next { min-width: 0; }
    /* Cours : même gabarit pour Chapitre précédent / Sommaire / suivant */
    .bottom-bar.chapter-bottom-nav .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding: 0 1.25rem;
        font-size: 1rem;
        line-height: 1.2;
        margin: 0;
    }
    .bottom-bar .btn-next .btn-sub,
    .bottom-bar .btn-nav-side .btn-sub {
        display: inline;
        font-size: 0.85em;
        font-weight: 400;
        margin: 0 0 0 0.35em;
    }
}
.question-controls-secondary .btn {
    min-height: 2.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* Téléphone : bandeau condensé de 60 px (8 + 44 + 8), bord à bord ; chevrons
   latéraux carrés de 44 px autour d'un seul bouton principal large. Les
   libellés (.btn-label) et sous-titres (.btn-sub) des boutons latéraux sont
   masqués : le nom reste dans l'aria-label posé par le script. */
@media (max-width: 699.98px) {
    .bottom-bar {
        margin: 1rem -20px 0;   /* annule le padding latéral de .page */
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }
    .bottom-bar .question-controls-main,
    .bottom-bar.chapter-bottom-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: center;
        gap: 8px;
    }
    .bottom-bar .btn-nav-side {
        flex: 0 0 44px;
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
    }
    .bottom-bar .btn-nav-side .btn-label,
    .bottom-bar .btn-sub { display: none; }
    /* Chevron dessiné en CSS (deux bords d'un carré tourné), couleur héritée
       du bouton : visible aussi à l'état désactivé (opacité .45) */
    .bottom-bar .btn-nav-side::before {
        content: "";
        display: block;
        width: 11px;
        height: 11px;
        border-left: 2.5px solid currentColor;
        border-bottom: 2.5px solid currentColor;
        transform: translateX(3px) rotate(45deg);
    }
    .bottom-bar .btn-nav-side.nav-next::before {
        transform: translateX(-3px) rotate(-135deg);
    }
    .bottom-bar .btn-next,
    .bottom-bar .course-nav-toc {
        flex: 1 1 auto;
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 0 1rem;
        font-size: 1.05rem;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        overflow: hidden;
    }
    /* Dernière question non corrigée : le bouton de droite dit « Terminer »
       (la phrase complète reste dans l'aria-label) */
    .bottom-bar .btn-nav-side.btn-finish-side {
        flex: 0 0 auto;
        flex-direction: row;
        width: auto;
        padding: 0 0.9rem;
        font-size: 1rem;
    }
    .bottom-bar .btn-nav-side.btn-finish-side::before { content: none; }
    .bottom-bar .btn-nav-side.btn-finish-side .btn-label { display: inline; }
    /* Cours : sans titre de chapitre, le bouton latéral redevient carré */
    .bottom-bar .course-nav-btn { flex: 0 0 44px; }
}

@media (max-width: 480px) {
    .bottom-bar { margin-left: -12px; margin-right: -12px; }
}

/* ==== Répartition A / K-Prim (Personnalisé) ==== */
/* Remplace les cases de type : deux pôles bien lisibles (pastille, grand
   pourcentage, nom), le curseur entre les deux. */
.type-share {
    padding: 1.5rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: white;
}

.type-share-ends {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.type-share-end {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transition: opacity .2s var(--ease, ease);
}

.type-share-end:last-child { flex-direction: row-reverse; text-align: right; }

.type-share-end.is-off { opacity: 0.4; }

.type-share-pct {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    min-width: 4ch;
}

.type-share-name {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 1.05rem;
}

.type-share-name span {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--muted);
}

.type-share input[type="range"] {
    width: 100%;
    height: 8px;
    accent-color: var(--primary);
    cursor: pointer;
}

.type-share-hint {
    margin: 0.75rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 600px) {
    .type-share-ends { flex-direction: column; gap: 0.75rem; }
    .type-share-end:last-child { flex-direction: row; text-align: left; }
}

/* Réglages d'une session dans l'historique (Personnalisé) */
.session-settings {
    margin: -0.25rem 0 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Précédent / Suivant en relecture d'une correction (résultats, historique) */
/* Relecture (résultats, historique) : bandeau .bottom-bar comme en série,
   le compteur « 3 / 4 » entre les deux boutons */
.detail-nav .question-controls-main { align-items: center; }
.detail-nav-pos { font-family: var(--font-mono); color: var(--muted); font-size: 0.9rem; min-width: 5ch; text-align: center; }
@media (max-width: 699.98px) {
    .bottom-bar.detail-nav .detail-nav-pos { flex: 1 1 auto; }
}

/* ==== 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; }

/* ==== Actions secondaires sous une carte d'authentification =============
   Remplace deux blocs à styles en ligne, l'un centré l'autre non. Le filet
   sépare le formulaire de ce qui n'en fait pas partie, et la hiérarchie est
   explicite : créer un compte est une action, l'oubli de mot de passe un
   recours. */
.auth-alt {
    margin-top: 1.1rem;
    text-align: center;
    font-size: .92rem;
    color: var(--muted);
}
.auth-alt a {
    color: var(--primary);
    text-decoration: none;
}
.auth-alt a:hover,
.auth-alt a:focus-visible { text-decoration: underline; }
.auth-alt p {
    margin: .9rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--border-soft);
}
.auth-alt-action { font-weight: 600; }

/* ==== États des pages d'authentification ===============================
   Ces pages composaient leurs titres, icônes et boutons avec des styles en
   ligne, hors de la charte. Tout passe désormais par des classes. */
.auth-state { text-align: center; }
.auth-state-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: .75rem;
    color: var(--success);
}
.auth-state h2 { margin: 0 0 .75rem; color: var(--accent); }
.auth-state.is-success h2 { color: var(--success); }
.auth-state p { margin: 0 0 1.5rem; color: var(--muted); }
.auth-actions { text-align: center; margin-top: 1rem; }
.auth-note { margin: 0; color: var(--muted); font-size: .9rem; }
.auth-note + .btn { margin-top: .5rem; }
.auth-code-input {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: .2rem;
}

/* ==== Succès cachés =====================================================
   Même carte que les autres, mais sans indice : pastille « ? », description
   remplacée côté serveur, ni progression ni état d'échec affichés. */
.badges-heading { margin-top: 2rem; color: var(--muted); }
.badge-card.secret .badge-image {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 700;
}
.badge-card.secret .badge-desc { font-style: italic; }

/* ==== Toast de succès (bas de page, une minute) ========================= */
#badgeToasts {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    z-index: 1200;
    pointer-events: none;
}
/* Repère de fin de chapitre (course.js watchChapterEnd) : invisible, mais
   doit avoir une hauteur pour être observé */
.chapter-end { height: 1px; }

/* Vérification de session qui réessaie (utils.js, authRetryNotice) */
.auth-retry-notice {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    z-index: 3000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(26, 35, 48, .14);
    padding: 0.7rem 1rem;
    width: max-content;          /* sans quoi left:50% la réduit à une demi-largeur d'écran */
    max-width: min(460px, 92vw);
    font-size: 0.9rem;
    color: var(--text);
}

.badge-toast {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(26, 35, 48, .14);
    padding: 0.7rem 0.9rem;
    min-width: 260px;
    max-width: min(420px, 90vw);
    pointer-events: auto;
    animation: badge-toast-in .3s ease-out;
}
@keyframes badge-toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.badge-toast-leaving { opacity: 0; transition: opacity .3s ease; }
.badge-toast img { width: 34px; height: 34px; flex: none; }
.badge-toast-text { display: flex; flex-direction: column; line-height: 1.3; }
.badge-toast-text span { font-size: 0.75rem; color: var(--muted); }
.badge-toast-text strong { color: var(--accent); }
.badge-toast-text small { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.badge-toast button {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.3rem;
}
.badge-toast button:hover { color: var(--accent); }


/* ==== Bandeau d'astuces (page QCM, sous l'en-tête) ====================== */
.tips-banner {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    transition: opacity .25s ease;
}
/* L'attribut hidden doit gagner sur display:flex, sinon un bandeau vide
   reste dessiné (astuces coupées, annonce masquée pendant une session). */
.tips-banner[hidden], .announce-banner[hidden] { display: none; }
.tips-banner strong { color: var(--primary); flex: none; }
.tips-banner .tips-link {
    margin-left: auto;
    flex: none;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
}
.tips-fade { opacity: 0; }
.tips-banner.tips-muted { opacity: .55; }
.tips-banner.tips-muted .tips-link { pointer-events: none; }

/* Graphique de progression sans donnée : le message prend la place du
   canvas (masqué), centré dans la carte. */
.chart-empty {
    text-align: center;
    color: var(--muted);
    padding: 3rem 1rem;
    margin: 0;
}


/* Pastille de notification (succès non consultés) */
.has-dot { position: relative; }
.has-dot::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}


/* ==== Accueil : navigation rapide vers les sections, à gauche ============
   Fixe, discrète, même dessin que la nav latérale du cours. Seulement quand
   il reste de la place à côté du rail (1020 px) ; sinon elle disparaît. */
.land-quicknav {
    position: fixed; left: 1.25rem; top: 50%; transform: translateY(-50%);
    display: none; flex-direction: column; gap: .15rem; z-index: 5;
}
.land-quicknav a {
    font-size: .92rem; color: var(--muted); text-decoration: none;
    padding: .34rem .7rem; border-left: 2px solid var(--border-soft, #d9dce1);
}
.land-quicknav a:hover, .land-quicknav a:focus-visible { color: var(--accent); border-left-color: var(--primary); }
/* Section courante (quicknav.js) : texte foncé et gras, filet bleu. */
.land-quicknav a.is-current { color: var(--text); font-weight: 600; border-left-color: var(--primary); }
@media (min-width: 1280px) { .land-quicknav { display: flex; } }
/* Sous 1280 px : bouton flottant en bas à droite, liste au-dessus. Même
   fond et même bleu que le reste ; le voile n'est qu'une ombre portée, la
   page reste lisible derrière. */
.land-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.land-fab[hidden] { display: none; }
.land-fab-btn {
    width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--primary); color: #fff; font-size: 1.35rem; line-height: 1;
    box-shadow: 0 6px 18px rgba(26, 35, 48, .28);
}
.land-fab-btn:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 2px; }
.land-fab-btn[aria-expanded="true"] { background: var(--accent); }
.land-fab-sheet {
    display: flex; flex-direction: column; min-width: 11rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
    padding: .35rem 0; box-shadow: 0 10px 26px rgba(26, 35, 48, .2);
}
.land-fab-sheet[hidden] { display: none; }
.land-fab-sheet a { padding: .55rem 1rem; color: var(--text); text-decoration: none; font-size: .95rem; }
.land-fab-sheet a:hover, .land-fab-sheet a:focus-visible { background: var(--primary-tint); }
.land-fab-sheet a.is-current { color: var(--primary); font-weight: 600; }
@media (min-width: 1280px) { .land-fab { display: none !important; } }

/* FAQ : même dessin, un cran plus grand (neuf sections, page longue). */
/* Largeur bornée : un intitulé long (« Abonnement et tarification ») passe
   à la ligne au lieu de mordre sur le texte à 1280 px. */
.faq-quicknav { max-width: 13.5rem; }
.faq-quicknav a { font-size: 1.02rem; padding: .4rem .8rem; }
/* Le bandeau du haut est collant : une section visée par l'ancre s'arrête dessous. */
.land-section, .faq-section, .cga-section, .faq-item[id] { scroll-margin-top: 84px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==== Bandeau d'annonce (SysAdmin), en haut de chaque page ============== */
.announce-banner {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    background: var(--warning-tint);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.9rem;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--text);
}
.announce-banner strong { color: var(--warning-deep); flex: none; }
/* Téléphone : « Annonce » sur sa ligne, le texte en pleine largeur, le lien
   dessous à droite ; en trois colonnes, le texte tenait sur six lignes */
@media (max-width: 640px) {
    .announce-banner { flex-wrap: wrap; row-gap: .25rem; }
    .announce-banner > strong { flex-basis: 100%; }
    .announce-banner > span { flex: 1 1 100%; }
}
/* Lien de l'annonce : même place et même allure que celui des astuces */
.announce-banner .announce-link {
    margin-left: auto;
    flex: none;
    color: var(--warning-deep);
    font-weight: 600;
    white-space: nowrap;
}


/* ==== Filigranes par zone (watermarkSet) ================================ */
.user-watermark.wm { font-size: 1.2rem; letter-spacing: 2px; }
.user-watermark.wm-course { font-size: 1.6rem; letter-spacing: 3px; }
.question-enonce, .answers-grid, .correction-zone, #questionDetailContent { position: relative; }
/* Schémas du cours : cadre opaque signé « cophy.ch ». Un schéma capturé
   seul porte l'adresse du site ; les marques nominatives (z-index 1)
   passent derrière le cadre, jamais sur le dessin. */
.course-figure-wrap {
    position: relative;
    z-index: 2;
    display: inline-block;
    max-width: 100%;
    padding: 4px 6px 16px;
    background: #fff;
    border: 1px solid rgba(42, 92, 158, .16);
    border-radius: 4px;
}
/* Variantes QCM : îlot compact (proposition, schéma plat) sans signature ;
   image raster (<img>) centrée en bloc comme l'était l'image nue. */
.figure-wrap-compact { padding-bottom: 4px; }
/* Dessin étroit : cadre au moins aussi large que la signature, dessin centré */
.figure-wrap-narrow { min-width: 6.5rem; text-align: center; }
.figure-wrap-block { display: block; width: fit-content; max-width: 100%; margin: 15px auto; }
.figure-wrap-block img { margin: 0; box-shadow: none; }
.question-diagram .course-figure-wrap, .correction-diagram .course-figure-wrap, .answer-diagram .course-figure-wrap {
    vertical-align: top;
}
.figure-brand {
    position: absolute;
    right: 8px;
    bottom: 2px;
    font-family: var(--font-mono, "IBM Plex Mono", monospace);
    font-size: 0.72rem;
    letter-spacing: .5px;
    color: rgba(42, 92, 158, .55);
    white-space: nowrap;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}
/* Ligne de traçabilité : présente dès qu'une zone porte un filigrane
   (donc jamais sur l'essai gratuit, qui n'en porte pas). */
.question-container:has(.user-watermark)::after,
.chapter-svg-wrap:has(.user-watermark)::after,
#questionDetailContent:has(.user-watermark)::after {
    content: "Contenu personnalisé pour ce compte et réservé à son usage (CGU, art. 5).";
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1.25rem;
}

/* ==== Rangées secondaires sur téléphone (Arrêter / Signaler, Retour /
   Signaler / Lire le cours) : boutons empilés, centrés, de la largeur du
   bouton Valider du bandeau (largeur du bandeau moins ses deux chevrons de
   44 px, leurs deux écarts de 8 px et son padding de 12 px de chaque côté). */
@media (max-width: 699.98px) {
    .question-controls-secondary,
    .question-controls.detail-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .question-controls-secondary .btn,
    .question-controls.detail-actions .btn {
        width: calc(100% - 88px);
        max-width: none;
        margin: 0;
        justify-content: center;
        text-align: center;
    }
}
@media (max-width: 480px) {
    .bottom-bar { margin-left: -12px; margin-right: -12px; }   /* padding de .page à 12 px */
    .question-controls-secondary .btn,
    .question-controls.detail-actions .btn {
        width: calc(100% - 104px);
    }
}

/* Courbe de progression : bascule Hiver / Été, dates d'examen et d'objectif */
.progression-switch{ display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:3px; margin-bottom:1rem; background:var(--surface-2); }
.progression-switch button{
    border:0; background:transparent; color:var(--muted-strong); font:inherit; font-weight:600; font-size:.9rem;
    padding:.35rem 1.1rem; border-radius:999px; cursor:pointer; width:auto; margin:0; box-shadow:none;
}
.progression-switch button.active{ background:var(--bg-card); color:var(--primary); box-shadow:0 1px 3px rgba(26,35,48,.12); }
.progression-empty-note{ margin:0 0 .5rem; font-size:.88rem; color:var(--muted); }
.progression-dates{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem; margin:.8rem 0 .2rem; font-size:.9rem; }
.progression-dates label{ display:flex; align-items:center; gap:.5rem; margin:0; font-weight:600; color:var(--muted-strong); }
.progression-dates input[type="date"]{ width:auto; margin:0; padding:.3rem .5rem; font-size:.9rem; }
.progression-dates-note{ margin:.2rem 0 0; font-size:.85rem; color:var(--muted); }
.progression-scope-note{ margin:.35rem 0 0; font-size:.85rem; color:var(--muted); }
.progression-scope-note[hidden]{ display:none; }
/* Avertissement sur une date saisie : signalé, jamais bloquant */
.progression-date-warning{ margin:.4rem 0 0; padding:.45rem .7rem; font-size:.85rem; color:var(--text);
    background:var(--warning-tint); border-left:3px solid var(--warning); border-radius:var(--radius-sm); }
.btn-link{
    border:0; background:none; padding:0; margin:0; width:auto; box-shadow:none;
    color:var(--primary); font:inherit; font-size:.85rem; text-decoration:underline; cursor:pointer;
}
.btn-link:hover{ color:var(--primary-dark); }

/* Cours en Accès découverte : la suite du chapitre est coupée sur le serveur ;
   le mur montre de fausses lignes floutées (aucun vrai texte) et l'invitation. */
.course-trial-wall{ position:relative; margin:2rem 0 1rem; padding-top:.5rem; }
.course-trial-blur{ filter:blur(2.5px); pointer-events:none; user-select:none;
    -webkit-mask-image:linear-gradient(to bottom, #000 35%, transparent 100%); mask-image:linear-gradient(to bottom, #000 35%, transparent 100%); }
/* Même rythme que le texte du chapitre (#chapterSvg : interligne 1,65,
   paragraphes espacés de 1 em) : une ligne = 1,65 em, le trait à hauteur d'œil */
#chapterSvg .ctw-p{ margin:0 0 1em; }
.ctw-line{ display:block; position:relative; height:1.65em; }
.ctw-line::before{ content:""; position:absolute; left:0; right:0; top:.55em; height:.6em; border-radius:3px; background:rgba(26, 35, 48, .2); }
.ctw-line.ctw-last::before{ right:38%; }
.course-trial-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; }
/* Encadré blanc au-dessus du flou : le message se lit sans effort */
.ctw-card{ display:flex; flex-direction:column; align-items:center; gap:.8rem; text-align:center;
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
    box-shadow:0 6px 24px rgba(26, 35, 48, .12); padding:1.2rem 1.6rem; max-width:28rem; }
#chapterSvg .ctw-card p, .ctw-card p{ margin:0; font-size:1.1rem; color:var(--text); text-align:center; }
#chapterSvg .course-trial-msg .btn, #chapterSvg .course-trial-msg .btn:hover{ color:#fff; text-decoration:none; }

/* Champs de date au format suisse (js/swiss-date.js) : champ texte jj.mm.aaaa,
   bouton calendrier, champ natif invisible mais présent (showPicker) */
.swiss-date { position: relative; display: inline-flex; align-items: center; gap: .3rem; vertical-align: middle; }
.swiss-date .swiss-date-text { width: 8.5em; margin: 0; font-variant-numeric: tabular-nums; }
.swiss-date .swiss-date-text[aria-invalid="true"] { border-color: var(--danger, #b23a2e); }
.swiss-date-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; background: none; color: var(--muted, #67707e); cursor: pointer; border-radius: 6px; }
.swiss-date-btn:hover { color: var(--primary, #2a5c9e); background: rgba(42, 92, 158, .08); }
.swiss-date-btn:disabled { opacity: .4; cursor: default; }
.swiss-date input.swiss-date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none; }

/* Lancement direct depuis le profil (#autopilote=CODE&lancer) : rien du
   choix des modes ne s'affiche avant la série (qcm-modes.js) */
.direct-launch-msg { display: none; text-align: center; color: var(--muted); margin: 3rem 1rem; }
.direct-launch .direct-launch-msg { display: block; }
.direct-launch #modeSelection { display: none; }

/* Historique : bascule Cartes / Lignes et vue en tableau (results-viewer.js) */
.hview { display: inline-flex; border: 1px solid var(--border); border-radius: var(--pill); overflow: hidden; }
.hview button { background: none; border: none; padding: .35rem .8rem; font: inherit; font-size: .85rem; color: var(--muted); cursor: pointer; }
.hview button + button { border-left: 1px solid var(--border); }
.hview button[aria-pressed="true"] { background: var(--primary-tint); color: var(--primary); font-weight: 600; }
.sessions-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-card); }
.sessions-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sessions-table th { text-align: left; font-weight: 600; font-size: .78rem; color: var(--muted); padding: .6rem .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sessions-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.sessions-table tr:last-child td { border-bottom: none; }
.session-row { cursor: pointer; }
.session-row:hover, .session-row:focus-visible { background: var(--primary-tint); outline: none; }
.sessions-table .session-mode { font-size: .78rem; padding: .2rem .6rem; }
.sessions-table .sr-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.sessions-table .sr-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.sessions-table .sr-score.score-excellent { color: var(--success); }
.sessions-table .sr-score.score-good { color: var(--warning); }
.sessions-table .sr-score.score-poor { color: var(--danger); }
.sessions-table .sr-num { font-variant-numeric: tabular-nums; }
/* Sujets : les pastilles passent à la ligne dans leur cellule plutôt que de
   faire déborder le tableau (pastilles coupées au bord droit en bureau) */
.sessions-table td.sr-subjects { white-space: normal; min-width: 9rem; }
.sessions-table .session-subjects { margin-top: 0; flex-wrap: wrap; }
.sessions-table .session-subject { white-space: nowrap; }

/* En-têtes triables : le libellé est un bouton, flèche du sens courant */
.sessions-table th { padding: 0; }
.sessions-table .sort-th {
    appearance: none; background: none; border: 0; margin: 0; width: 100%;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .6rem .75rem; font: inherit; color: inherit; text-align: left;
    cursor: pointer; white-space: nowrap;
}
.sessions-table .sort-th:hover { color: var(--text); }
.sessions-table .sort-th.is-sorted { color: var(--primary); }
.sessions-table .sort-th:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sessions-table .sort-arrow { display: inline-block; min-width: .7em; }

/* Téléphone : le tableau défile de côté, les pastilles restent sur une
   ligne (passées à la ligne, elles triplaient la hauteur des lignes) */
@media (max-width: 700px) {
    .sessions-table td.sr-subjects { white-space: nowrap; min-width: 0; }
    .sessions-table .session-subjects { flex-wrap: nowrap; }
}
/* Téléphone : indication de défilement sous le tableau quand il déborde */
.sessions-scroll-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); text-align: center; }

/* En-tête de l'historique : titre à gauche, nombre, affichage et tri à droite */
.history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .9rem; }
.history-head h2 { margin: 0; }
.history-head .hfilters-right { margin-left: auto; }
/* Bascule Lignes / Cartes, et le tri juste dessous, alignés à droite */
.hview-stack { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
#sortPillBox[hidden] { display: none; }
@media (max-width: 700px) {
    .history-head .hfilters-right { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* Classement : titre au-dessus du tableau de comparaison */
.rank-compare-title { margin: 0 0 .6rem; font-size: 1.15rem; }

/* Profil, mode Custom : préréglages du contenu du cours */
.scope-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.scope-presets-label {
    font-size: 0.95rem;
    color: var(--muted-strong);
    margin-right: 0.25rem;
}