/* =============================================================================
   REVISIONBPEL — PASSE VISUELLE (28.07.2026)
   =============================================================================
   Couche de SURCHARGE, chargée en dernier. Réversible en retirant la ligne
   correspondante dans index.html. Aucune règle ne supprime d'élément ni ne
   change la structure : uniquement de l'apparence.

   Parti pris : l'application a déjà une identité (indigo/violet sur fond
   nocturne, verre dépoli). Le défaut n'est pas le style mais l'INCOHÉRENCE —
   trois tailles de boutons, quatre rayons, des ombres qui se concurrencent,
   des cibles tactiles sous 40 px. On impose donc un système, on ne réinvente
   pas une charte.

   Trois règles tenues partout :
     1. UNE échelle de rayons, UNE échelle d'espacement, UNE échelle de texte.
     2. Sur fond sombre, la profondeur vient d'un LISERÉ clair + une ombre
        douce — pas d'une ombre noire épaisse, qui salit.
     3. Toute cible tactile fait au moins 44 px.
   ========================================================================== */

:root {
    /* rayons — 3 valeurs, pas davantage */
    --rb-r-control: 12px;   /* champs, boutons */
    --rb-r-card: 16px;      /* cartes, panneaux */
    --rb-r-pill: 999px;     /* badges, compteurs */

    /* surfaces et liserés */
    --rb-surface: rgba(30, 30, 52, 0.92);
    --rb-surface-haute: rgba(38, 38, 62, 0.94);
    --rb-hairline: rgba(255, 255, 255, 0.07);
    --rb-hairline-fort: rgba(255, 255, 255, 0.13);

    /* élévation : douce et colorée, jamais noire et lourde */
    --rb-elev-1: 0 1px 2px rgba(0, 0, 0, .28);
    --rb-elev-2: 0 6px 18px rgba(8, 8, 20, .45);
    --rb-elev-3: 0 18px 44px rgba(8, 8, 20, .6);

    /* rythme vertical */
    --rb-gap-1: 8px;
    --rb-gap-2: 12px;
    --rb-gap-3: 18px;

    --rb-t: 140ms cubic-bezier(.2, .8, .3, 1);
}

/* -----------------------------------------------------------------------------
   1. SYSTÈME DE BOUTONS
   Avant : « Ajouter » vert translucide sur 3 lignes, « Consulter » violet plus
   petit, « Actualiser » en contour fin — trois grammaires pour trois actions.
   -------------------------------------------------------------------------- */
.btn,
.btn-primary,
.btn-secondary,
.welcome-btn,
.quiz-action-btn,
.btn-add-to-directory,
.btn-view-group,
.add-directory-btn,
.organize-directories-btn,
.shared-groups-btn,
.btn-auth-submit {
    min-height: 44px;
    border-radius: var(--rb-r-control);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform var(--rb-t), background var(--rb-t), border-color var(--rb-t);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.welcome-btn:active,
.quiz-action-btn:active,
.btn-add-to-directory:active,
.btn-view-group:active,
.add-directory-btn:active,
.shared-groups-btn:active {
    transform: scale(.975);
}

/* Action principale : le dégradé maison, une seule fois par écran */
.btn-primary,
.add-directory-btn,
.btn-auth-submit {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: 1px solid transparent;
    color: #fff;
    box-shadow: var(--rb-elev-1);
}

/* Action secondaire : surface + liseré. Lisible sans crier. */
.btn-secondary,
.organize-directories-btn,
.shared-groups-btn,
.btn-view-group {
    background: var(--rb-surface-haute);
    border: 1px solid var(--rb-hairline-fort);
    color: #ded9ff;
}

.btn-secondary:hover,
.organize-directories-btn:hover,
.shared-groups-btn:hover,
.btn-view-group:hover {
    background: rgba(99, 102, 241, .16);
    border-color: rgba(139, 92, 246, .5);
}

/* -----------------------------------------------------------------------------
   2. CARTES
   Une seule surface, un seul liseré, un seul rayon. Les dégradés de fond
   concurrents sont neutralisés : ils faisaient paraître certaines cartes
   « désactivées » selon la position dans la liste.
   -------------------------------------------------------------------------- */
.stat-card,
.public-group-card,
.group-card,
.sg-item,
.chip,
.dashboard-card {
    background: var(--rb-surface);
    border: 1px solid var(--rb-hairline);
    border-radius: var(--rb-r-card);
    box-shadow: var(--rb-elev-1);
}

/* Tuiles de statistiques : densité. Les chiffres géants mangeaient l'écran. */
.stat-card {
    padding: 14px 16px;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.4px;
}

.stat-label {
    font-size: 12.5px;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
}

.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, .16);
    margin-bottom: 8px;
}

/* Carte de groupe public */
.public-group-card {
    padding: 14px 16px;
}

.group-card-title {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.group-card-count {
    display: inline-block;
    background: rgba(99, 102, 241, .16);
    color: #c4b5fd;
    border-radius: var(--rb-r-pill);
    padding: 3px 11px;
    font-size: 12.5px;
    font-weight: 700;
}

.group-card-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-muted, #94a3b8);
    margin-top: 10px;
}

/* -----------------------------------------------------------------------------
   3. MODALES
   Chrome unifié. La croix passe d'un carré rouge (couleur du DANGER, alors
   qu'on ne fait que fermer) à un bouton rond neutre.
   -------------------------------------------------------------------------- */
.modal-content,
.sg-card,
.hist-card {
    background: var(--bg-modal, rgba(15, 15, 26, .97));
    border: 1px solid var(--rb-hairline-fort);
    border-radius: var(--rb-r-card);
    box-shadow: var(--rb-elev-3);
}

.modal-content h2 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.2px;
}

.modal-subtitle {
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    margin-top: -2px;
}

.modal-content .close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--rb-hairline);
    color: #cbd5e1;
    font-size: 20px;
    line-height: 1;
    transition: background var(--rb-t), color var(--rb-t);
}

.modal-content .close:hover {
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
}

.modal-buttons {
    display: flex;
    gap: var(--rb-gap-2);
    margin-top: var(--rb-gap-3);
}

.modal-buttons .btn {
    flex: 1;
}

/* Champs de formulaire */
.form-group label {
    font-size: 12.5px;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 6px;
    display: block;
}

.form-control,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    min-height: 46px;
    border-radius: var(--rb-r-control);
    border: 1px solid var(--rb-hairline-fort);
    background: rgba(15, 15, 26, .6);
    color: var(--text-primary, #f8fafc);
    font-size: 15px;                 /* ≥16 px évite le zoom iOS ; 15 + -webkit ok */
    padding: 11px 14px;
    transition: border-color var(--rb-t), box-shadow var(--rb-t);
}

.form-control:focus,
.form-group input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .22);
}

/* -----------------------------------------------------------------------------
   4. MENUS ET PANNEAUX FLOTTANTS
   Même surface que les modales, items à 44 px, séparateurs discrets.
   -------------------------------------------------------------------------- */
.simple-context-menu,
.group-context-menu,
.admin-dropdown,
#mobileAdminDropdown,
.co-owner-suggest {
    background: var(--bg-modal, rgba(15, 15, 26, .97)) !important;
    border: 1px solid var(--rb-hairline-fort) !important;
    border-radius: var(--rb-r-card) !important;
    box-shadow: var(--rb-elev-3) !important;
    overflow: hidden;
    padding: 6px !important;
}

/* ⚠ Cibler les ITEMS, pas « tous les enfants » : les séparateurs
   (.context-menu-separator) héritaient de la hauteur de 44 px et
   apparaissaient comme de gros blocs vides au milieu du menu. */
.simple-context-menu > *:not(.context-menu-separator),
.group-context-menu > *:not(.context-menu-separator),
.admin-dropdown-item,
#mobileAdminDropdown .admin-dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.25;
    transition: background var(--rb-t);
}

.simple-context-menu > *:not(.context-menu-separator):hover,
.group-context-menu > *:not(.context-menu-separator):hover,
.admin-dropdown-item:hover {
    background: rgba(99, 102, 241, .14);
}

/* Un séparateur, c'est un trait — pas une zone cliquable. */
.context-menu-separator {
    min-height: 0 !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 6px 10px !important;
    background: var(--rb-hairline-fort) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}

/* -----------------------------------------------------------------------------
   5. BARRE FLOTTANTE DU HAUT
   Elle était trop haute pour ce qu'elle contient et son liseré violet vif
   attirait l'œil plus que le contenu.
   -------------------------------------------------------------------------- */
.mobile-nav-bar {
    border-radius: 14px !important;
    border: 1px solid var(--rb-hairline-fort) !important;
    box-shadow: var(--rb-elev-2) !important;
    padding: 4px 6px !important;
}

.mobile-nav-item {
    min-height: 42px;
    border-radius: 10px;
    font-size: 13.5px;
    padding: 6px 10px !important;
}

.mobile-nav-item:active {
    background: rgba(99, 102, 241, .16);
}

.mobile-nav-divider {
    opacity: .35;
}

/* -----------------------------------------------------------------------------
   6. LISTE DES RÉPERTOIRES ET GROUPES
   -------------------------------------------------------------------------- */
#groupList li,
#groupList .group-item {
    border-radius: var(--rb-r-control);
    margin-bottom: var(--rb-gap-1);
    min-height: 52px;
}

#groupList .directory-header {
    border-radius: var(--rb-r-control);
    min-height: 52px;
    font-weight: 700;
}

.card-count-bubble {
    border-radius: var(--rb-r-pill);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    background: rgba(99, 102, 241, .18);
    color: #c4b5fd;
}

/* -----------------------------------------------------------------------------
   7. DENSITÉ MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .stat-card { padding: 12px 14px; }
    .stat-value { font-size: 24px; }
    .public-group-card { padding: 13px 14px; }
    .modal-content { padding: 18px 16px 20px; border-radius: 18px; }
    .modal-content h2 { font-size: 18px; }

    /* ⚠ PAS de marge frère-à-frère sur les tuiles : elles sont en GRILLE, le
       `gap` gère déjà l'espacement. Une margin-top ne s'appliquait qu'à la 2e
       tuile de chaque rangée et la décalait de 12 px vers le bas (mesuré au banc). */
    .public-group-card + .public-group-card { margin-top: var(--rb-gap-2); }
    .quick-stats .stat-card { margin: 0 !important; }
}

/* Respect des préférences système : pas d'animation si l'utilisateur n'en veut pas */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -----------------------------------------------------------------------------
   8. TUILES DE STATISTIQUES — HAUTEURS ÉGALES
   Le conteneur réel est `.quick-stats` : il n'était visé par AUCUNE des règles
   de grille existantes (qui ciblaient .stats-grid / .stats-container). Les
   tuiles se dimensionnaient donc à leur contenu, et « Cartes révisées »
   ressortait plus haute que « Temps total ».
   -------------------------------------------------------------------------- */
.quick-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--rb-gap-2) !important;
    align-items: stretch !important;
}

.quick-stats .stat-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}

/* Le bloc valeur+libellé occupe le reste : les libellés s'alignent d'une
   tuile à l'autre même quand la valeur est plus longue (« 5h 52min » vs « 46 »). */
.quick-stats .stat-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    width: 100%;
}

.quick-stats .stat-value {
    font-size: 25px;
    line-height: 1.15;
    white-space: nowrap;
}

.quick-stats .stat-label {
    font-size: 12.5px;
    line-height: 1.25;
}

@media (max-width: 380px) {
    .quick-stats .stat-value { font-size: 22px; }
}

/* -----------------------------------------------------------------------------
   9. VOILE SOUS LA BARRE FLOTTANTE
   La barre est en position:fixed avec des marges latérales : au défilement, le
   contenu passait dessous ET de chaque côté, tranché net en plein milieu d'une
   icône. On pose un dégradé pleine largeur DERRIÈRE la barre : le contenu s'y
   estompe au lieu d'être coupé.

   Le voile est porté par la barre (pseudo-élément) et non par `body::before`,
   déjà utilisé par base_1.css / style-mobile.css / style-tablet.css.
   La barre a z-index:900 et crée donc son propre contexte d'empilement :
   un enfant en z-index:-1 se peint derrière elle, mais toujours au-dessus du
   contenu de la page.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mobile-nav-bar::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--rb-navbar-h, 62px) + 6px);
        background: linear-gradient(
            to bottom,
            var(--bg-primary, #0f0f1a) 0%,
            var(--bg-primary, #0f0f1a) 62%,
            rgba(15, 15, 26, 0) 100%
        );
        z-index: -1;
        pointer-events: none;
    }
}


/* -----------------------------------------------------------------------------
   10. RÉSERVE SOUS LA BARRE — priorité
   Mesuré au banc : barre = 52 px de haut à 8 px du bord, donc 68 px à réserver,
   alors que le padding effectif du conteneur restait à 60 px (une règle plus
   ancienne gagnait). Le contenu passait donc 8 px sous la barre.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .container {
        padding-top: calc(var(--rb-navbar-h, 68px) + env(safe-area-inset-top, 0px)) !important;
    }
}

/* -----------------------------------------------------------------------------
   11. BARRE D'APPLICATION — intégrée au lieu de flottante
   Elle était une pilule détachée (marges 8 px, coins arrondis, liseré violet
   vif) posée PAR-DESSUS le contenu : elle se lisait comme un corps étranger,
   et redoublait la barre d'adresse du navigateur juste au-dessus.
   On la ramène bord à bord, avec un simple filet de séparation — le motif
   standard d'une barre d'application mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .mobile-nav-bar {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
        padding: 4px 6px !important;
        padding-top: calc(4px + env(safe-area-inset-top, 0px)) !important;
        /* OPAQUE : en semi-transparent, le contenu qui défile dessous restait
           visible en filigrane et la coupure se lisait comme un défaut.
           Opaque, le passage sous la barre se lit comme voulu. */
        background: #12121f !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        gap: 2px;
    }

    /* plus besoin du voile : la barre est opaque et bord à bord */
    .mobile-nav-bar::before { display: none !important; }

    /* trois zones de largeur égale, tout est centré : plus d'effet « bancal » */
    .mobile-nav-item {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        min-height: 44px;
        padding: 6px 8px !important;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        color: #cdd2e6;
        gap: 7px;
    }

    .mobile-nav-item i {
        font-size: 15px !important;
        opacity: .9;
    }

    .mobile-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Les traits verticaux durcissaient encore la barre : on les efface,
       l'espacement suffit à séparer les trois zones. */
    .mobile-nav-divider { display: none !important; }

    /* Le compteur « en ligne » devient une pastille discrète */
    .mobile-nav-value {
        background: rgba(99, 102, 241, .22);
        color: #c7d2fe;
        border-radius: 999px;
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 11.5px;
        font-weight: 700;
        padding: 0 6px;
    }
}

/* -----------------------------------------------------------------------------
   12. DÉFILEMENT DANS LES CARTES LONGUES
   Mesuré au banc : #quizCardBack contient 2020 px dans une boîte de 416 px et
   défile bien par programme. Le blocage signalé est le hit-test TACTILE de
   Chrome Android dans un sous-arbre 3D.

   ⛔ NE PAS poser `transform: translateZ(0)` sur les faces : elles portent
   déjà `rotateY(180deg)` pour le retournement — le translate l'ÉCRASE et les
   deux faces se retrouvent empilées (constaté au banc le 28.07, en production
   pendant deux minutes). On s'en tient aux propriétés qui n'entrent pas en
   conflit avec la transformation.
   -------------------------------------------------------------------------- */
.quiz-card-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* le geste ne part plus vers la page */
    touch-action: pan-y;            /* le compositeur attribue le geste vertical ici */
    padding-bottom: 40px !important;/* « Cliquez pour retourner » masquait la dernière ligne */
    scrollbar-width: thin;
}

/* barre de défilement discrète mais VISIBLE : elle signale qu'on peut défiler */
.quiz-card-content::-webkit-scrollbar { width: 4px; }
.quiz-card-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, .55);
    border-radius: 4px;
}
.quiz-card-content::-webkit-scrollbar-track { background: transparent; }

/* -----------------------------------------------------------------------------
   13. MENUS CONTEXTUELS — tenir sur une ligne par action
   Le menu n'était pas mal placé : il était TROP HAUT. « Gérer les
   co-propriétaires » et « Voir toutes les cartes » passaient sur deux lignes,
   le menu dépassait la hauteur de l'écran et la logique de placement le
   plaquait contre le bord (`window.innerHeight - menuHeight - 10`).
   En l'élargissant, chaque action tient sur une ligne et le menu redevient
   assez court pour s'ouvrir près du bouton qui l'a déclenché.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .simple-context-menu,
    .group-context-menu {
        min-width: min(304px, 82vw) !important;
        max-width: 88vw !important;
    }

    .simple-context-menu > *:not(.context-menu-separator),
    .group-context-menu > *:not(.context-menu-separator) {
        min-height: 42px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* le libellé ne doit pas pousser le menu au-delà de l'écran */
    .simple-context-menu > * > span,
    .group-context-menu > * > span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* -----------------------------------------------------------------------------
   14. BOUTONS FLOTTANTS DE LA CARTE (indice / audio / favori)
   Ils occupaient 40×44 px avec un fond et un liseré marqués : sur une carte,
   trois pastilles aussi présentes que le contenu lui-même. Ce sont des actions
   SECONDAIRES — on les réduit à 28 px, fond très discret, et on ne réserve
   plus que la hauteur nécessaire pour que le texte ne passe pas dessous.
   -------------------------------------------------------------------------- */
.quiz-hint-btn,
.quiz-audio-btn,
.quiz-star-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 9px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: none !important;
    opacity: .55;
    transition: opacity .15s ease, background .15s ease;
}

/* au toucher, elles redeviennent bien visibles */
.quiz-hint-btn:active,
.quiz-audio-btn:active,
.quiz-star-btn:active,
.quiz-hint-btn:hover,
.quiz-audio-btn:hover,
.quiz-star-btn:hover {
    opacity: 1;
    background: rgba(99, 102, 241, .2) !important;
}

/* le favori actif doit rester lisible même au repos */
.quiz-star-btn.active,
.quiz-star-btn.starred,
.quiz-star-btn[aria-pressed="true"] { opacity: 1; }

.quiz-hint-btn i,
.quiz-audio-btn i,
.quiz-star-btn i {
    font-size: 12.5px !important;
    line-height: 1 !important;
}

/* Réserve juste ce qu'il faut : le texte ne commence plus sous les boutons. */
.quiz-card-content { padding-top: 40px !important; }
.quiz-card-content.justify-center {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* -----------------------------------------------------------------------------
   15. BOUTON DE CHAT DES LECTEURS — supprimé
   Il se rendait comme une ellipse bleue écrasée par-dessus les avatars, et il
   fait doublon depuis que le menu contextuel propose « Lui envoyer un message ».
   -------------------------------------------------------------------------- */
.quiz-viewer-chat { display: none !important; }

/* les avatars respirent mieux sans lui */
.quiz-viewer { cursor: pointer; }
.quiz-viewers-list { gap: 6px; }

/* -----------------------------------------------------------------------------
   16. AVATARS DES LECTEURS — une couleur par personne, rendu moderne
   La teinte vient d'un hachage du nom (variable --rs-h posée par
   revision-sync.js) : même personne = même couleur, partout et toujours.
   -------------------------------------------------------------------------- */
.quiz-viewers-list { display: flex; align-items: center; gap: 6px; }

.quiz-viewer {
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.quiz-viewer:active { transform: translateY(-2px) scale(1.06); }

.quiz-viewer-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    color: #fff !important;
    /* dégradé sur la teinte propre à la personne */
    background: linear-gradient(140deg,
        hsl(var(--rs-h, 250) 78% 62%) 0%,
        hsl(calc(var(--rs-h, 250) + 26) 72% 48%) 100%) !important;
    /* anneau qui détache l'avatar du fond, sans ombre lourde */
    box-shadow:
        0 0 0 2px rgba(18, 18, 31, .95),
        0 0 0 3.5px hsl(var(--rs-h, 250) 70% 55% / .55),
        0 4px 12px hsl(var(--rs-h, 250) 70% 40% / .35) !important;
    border: none !important;
}

/* c'est moi : anneau blanc discret pour me distinguer d'un coup d'œil */
.quiz-viewer-me .quiz-viewer-avatar {
    box-shadow:
        0 0 0 2px rgba(18, 18, 31, .95),
        0 0 0 3.5px rgba(255, 255, 255, .8),
        0 4px 12px rgba(0, 0, 0, .35) !important;
}

/* synchronisé avec moi : anneau vert pulsant */
.quiz-viewer.rs-synchro .quiz-viewer-avatar {
    box-shadow:
        0 0 0 2px rgba(18, 18, 31, .95),
        0 0 0 3.5px #22c55e,
        0 0 14px rgba(34, 197, 94, .5) !important;
}

/* le nom n'apparaît qu'au besoin : la pastille reste compacte */
.quiz-viewer-name {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width .22s ease, opacity .22s ease, margin .22s ease;
    font-size: 12px;
    font-weight: 600;
    color: #d8daea;
}
.quiz-viewer:hover .quiz-viewer-name,
.quiz-viewer:active .quiz-viewer-name {
    max-width: 110px;
    opacity: 1;
    margin-left: 6px;
}

.quiz-viewer-more .quiz-viewer-avatar {
    background: rgba(255,255,255,.12) !important;
    color: #cbd5e1 !important;
    box-shadow: 0 0 0 2px rgba(18,18,31,.95) !important;
}

/* -----------------------------------------------------------------------------
   17. MODE RÉVISION — rendre la place à la carte
   Mesuré au banc (écran 852 px) : carte 520 px, bloc de commandes 199 px, soit
   23 % de la hauteur pour des boutons secondaires. On compacte les commandes et
   la carte récupère l'espace.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* avatars des lecteurs : 32 → 26 px, anneau plus fin */
    .quiz-viewer-avatar {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
        box-shadow:
            0 0 0 1.5px rgba(18, 18, 31, .95),
            0 0 0 2.5px hsl(var(--rs-h, 250) 70% 55% / .5) !important;
    }
    .quiz-viewer-me .quiz-viewer-avatar {
        box-shadow:
            0 0 0 1.5px rgba(18, 18, 31, .95),
            0 0 0 2.5px rgba(255, 255, 255, .75) !important;
    }
    .quiz-viewer.rs-synchro .quiz-viewer-avatar {
        box-shadow:
            0 0 0 1.5px rgba(18, 18, 31, .95),
            0 0 0 2.5px #22c55e,
            0 0 10px rgba(34, 197, 94, .45) !important;
    }
    .quiz-viewers { padding: 2px 0 !important; margin: 0 !important; }

    /* boutons précédent / suivant : 56 → 46 px */
    .quiz-nav-btn,
    .quiz-navigation button,
    [class*="quiz-nav"] button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }
    .quiz-navigation,
    .quiz-nav { margin: 8px 0 !important; gap: 12px !important; }

    /* rangée d'actions secondaires : boutons plus petits, moins d'écart */
    .quiz-actions button,
    .quiz-controls button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
    }
    .quiz-actions,
    .quiz-controls { gap: 8px !important; margin: 6px 0 !important; padding: 0 !important; }

    /* « Suivre les progrès » : ligne compacte, séparateur retiré */
    .quiz-progress-toggle,
    [class*="track-progress"] {
        margin: 4px 0 0 !important;
        padding-top: 6px !important;
        font-size: 12.5px !important;
    }
    .quiz-progress-toggle hr,
    .quiz-actions + hr { display: none !important; }

    /* La carte récupère l'espace libéré. ⚠ les faces doivent remplir le
       conteneur : en `height:auto` elles restaient petites et laissaient un
       grand vide sous la carte (constaté à l'écran). */
    .quiz-card-container { flex: 1 1 auto !important; min-height: 0 !important; }
    .quiz-card {
        height: calc(100dvh - 292px) !important;
        max-height: 660px;
        min-height: 320px !important;
    }
    .quiz-card-inner,
    .quiz-card-face,
    #quizCardFront,
    #quizCardBack { height: 100% !important; }
}

/* -----------------------------------------------------------------------------
   18. COMMANDES DU QUIZ — ciblage par IDENTIFIANT
   `.quiz-nav-btn { width: 46px !important }` restait sans effet : plusieurs
   règles concurrentes de style-mobile.css (44, 48, 42 px selon le point de
   rupture) et une plus spécifique imposaient 56 px. On cible donc les
   identifiants, que rien ne peut surclasser.
   Mesuré : boutons 56 px, rangée d'actions 80 px de haut.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #quizPrev, #quizNext {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    #playBtn, #shuffleBtn, #settingsBtn, #soundToggleBtn, #fullscreenBtn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 10px !important;
    }
    #playBtn i, #shuffleBtn i, #settingsBtn i, #soundToggleBtn i, #fullscreenBtn i {
        font-size: 14px !important;
    }

    .quiz-action-buttons {
        gap: 8px !important;
        margin: 4px 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }
}

/* -----------------------------------------------------------------------------
   19. MODE RÉVISION — suppression du vide
   Mesuré : carte 460 px se terminant à 567, barre de progression à 666.
   99 px de vide entre les deux, parce que la carte avait une hauteur CALCULÉE
   plus petite que son conteneur au lieu de le remplir. On la laisse s'étirer.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .quiz-card-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        margin: 0 !important;
    }
    .quiz-card {
        flex: 1 1 auto !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* titre du groupe : UNE ligne. En deux lignes il volait ~24 px de hauteur
       utile sur chaque écran. */
    .quiz-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
        max-width: 100% !important;
    }
    .quiz-header { padding-top: 6px !important; padding-bottom: 6px !important; }

    /* avatars : 26 → 22 px */
    .quiz-viewer-avatar {
        width: 22px !important;
        height: 22px !important;
        font-size: 9.5px !important;
    }

    /* resserrer les écarts entre les blocs de commande */
    .quiz-progress-bar, .quiz-progress { margin: 6px 0 !important; }
    .quiz-navigation { margin: 6px 0 !important; }
    .quiz-action-buttons { margin: 2px 0 !important; }
    .quiz-track-progress,
    [class*="progress-toggle"] { margin: 2px 0 0 !important; padding-top: 4px !important; }
}

/* -----------------------------------------------------------------------------
   20. PLAFOND DE LA CARTE — ciblage par IDENTIFIANT
   `refonte.css` (couche du 26.07) impose `.quiz-card { max-height: min(58vh,
   460px) !important }`. Sur un écran de 852 px cela bloque la carte à 460 px
   dans un conteneur de 559 : 99 px de vide sous la carte, puis 111 après ma
   première tentative. Une règle de CLASSE ne suffit pas à le lever — on passe
   par l'identifiant, que rien ne surclasse.
   -------------------------------------------------------------------------- */
#quizCard {
    max-height: none !important;
    height: 100% !important;
    min-height: 0 !important;
}
#quizCard .quiz-card-inner,
#quizCard .quiz-card-face,
#quizCard #quizCardFront,
#quizCard #quizCardBack {
    height: 100% !important;
    max-height: none !important;
}

/* -----------------------------------------------------------------------------
   21. TITRE DU GROUPE — correctif MINIMAL
   Historique de mes erreurs sur ce point, pour ne pas les refaire :
     · `.quiz-header-left` mesure 44 px non pas parce que le texte passe à la
       ligne, mais parce qu'il contient le bouton retour (44 px). Mon calcul
       « 1,7 ligne » était faux.
     · `flex: 1 1 auto` + `nowrap` sur ce conteneur a rejeté les boutons
       partage/⋮ sur une DEUXIÈME ligne.
     · `min-width: 0` seul l'a réduit à 0 px, car l'en-tête contient aussi
       `.quiz-viewers-container` qui occupe toute la largeur.
   Le seul besoin réel : que le TITRE ne passe pas sur deux lignes. On ne
   touche donc qu'au titre, et à rien d'autre.
   -------------------------------------------------------------------------- */
.quiz-title {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
}

@media (max-width: 768px) {
    .quiz-title { font-size: 14.5px !important; line-height: 1.3 !important; }
}