[x-cloak] { display: none !important; }

/* L'attribut `hidden` ne masque que par la feuille de style du navigateur : la
   moindre classe d'auteur qui pose un `display` — `.flex`, `.block`, `.grid` —
   l'emporte, et l'élément reste visible. C'est ainsi qu'un encadré d'alerte
   masqué réapparaissait vide et coloré après une erreur. */
[hidden] { display: none !important; }
@media (max-height: 520px) { .teacher-area { display: none !important; } }
.aisle-bg { background-color: #f1f5f9; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 10px 10px; }
.blocked-bg { background-color: #e2e8f0; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #cbd5e1 10px, #cbd5e1 20px); }
/* Le fond des pages d'authentification était ici, sous `.cm-auth-bg` : un
   lavis propre à ces pages. Elles portent maintenant celui du site vitrine —
   voir `/css/fond-site.css` — et la seule qui s'en servait, l'inscription,
   cumulait les deux. */

/* ─── Champ de formulaire unifié ──────────────────────────────────────────
   Regroupe ce qui était recopié sur chaque `<input>` : une seule définition à
   corriger au lieu d'une dizaine.

   La bordure est en slate-500 et non slate-200 comme auparavant. Ce n'est pas
   un choix esthétique : #e2e8f0 sur blanc donne 1,23:1, très loin des 3:1
   qu'exige le critère 1.4.11 pour la limite d'un composant. C'est aussi ce qui
   donnait aux champs cet aspect flottant et délavé. */
.cm-field {
    width: 100%;
    min-height: 44px;               /* cible tactile confortable */
    border: 1px solid #64748b;      /* slate-500 — 4,76:1 sur blanc */
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #0f172a;
    background-color: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cm-field::placeholder { color: #64748b; }
.cm-field:hover { border-color: #475569; }
.cm-field:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
}
.cm-field[aria-invalid='true'] { border-color: #be123c; }

/* Flèche dessinée à la main : `appearance:none` supprime celle du système. */
.cm-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.15rem;
}
html.dark .cm-field:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25); }

/* Sur écran tactile, un champ sous 16px déclenche un zoom automatique d'iOS
   dont on ne revient pas : la mise en page fixe déborde et ne se recentre pas. */
@media (pointer: coarse) {
    input, textarea, select { font-size: 16px !important; }
}

/* ─── Aide contextuelle ───────────────────────────────────────────────────
   Pendant le mode « désignez la zone », le curseur change partout et les
   zones documentées se révèlent au survol. C'est ce qui distingue ce mode du
   fonctionnement normal, où le même clic déplacerait un élève. */
body.cm-aide,
body.cm-aide * { cursor: help !important; }

body.cm-aide [data-aide] {
    outline: 2px dashed transparent;
    outline-offset: -3px;
    transition: outline-color .12s ease, background-color .12s ease;
}

body.cm-aide [data-aide]:hover {
    outline-color: #6366f1;
    background-color: rgba(99, 102, 241, .07);
}

/* Le bandeau du mode et le bouton « ? » gardent un curseur ordinaire : ce
   sont les deux seuls endroits où le clic fait encore ce qu'il annonce. */
body.cm-aide [data-aide-ignore],
body.cm-aide [data-aide-ignore] * { cursor: pointer !important; }

/* ─── Couleurs de genre ───────────────────────────────────────────────────
   Une seule paire de teintes, définie ici et employée partout où le genre
   d'un élève s'affiche : pastille de la liste, lettre sur une place, pastille
   de voisinage, filtres, légende, statistiques.

   Elles cohabitaient jusqu'ici avec du gris, de l'indigo et deux nuances de
   rose selon l'écran ; le même « F » changeait de couleur trois fois entre la
   barre latérale et la fiche élève. */
:root {
    --cm-f: #db2777;        /* rose 600 */
    --cm-f-doux: #fdf2f8;
    --cm-f-filet: #fbcfe8;
    --cm-m: #2563eb;        /* bleu 600 */
    --cm-m-doux: #eff6ff;
    --cm-m-filet: #bfdbfe;
}

html.dark {
    --cm-f: #f9a8d4;
    --cm-f-doux: #3b0a24;
    --cm-f-filet: #6d1741;
    --cm-m: #93c5fd;
    --cm-m-doux: #0b1e3d;
    --cm-m-filet: #1d3f73;
}

.cm-f { color: var(--cm-f); }
.cm-m { color: var(--cm-m); }

/* Pastille ronde : liste d'élèves, légende, statistiques. */
.cm-badge-f { background: var(--cm-f-doux); border-color: var(--cm-f-filet); color: var(--cm-f); }
.cm-badge-m { background: var(--cm-m-doux); border-color: var(--cm-m-filet); color: var(--cm-m); }
.cm-badge-n { background: #f1f5f9; border-color: #cbd5e1; color: #64748b; }
html.dark .cm-badge-n { background: #1d2033; border-color: #33405e; color: #94a3b8; }

/* Segment de barre : répartition par genre des statistiques. */
.cm-bar-f { background: var(--cm-f); }
.cm-bar-m { background: var(--cm-m); }

/* Bouton actif d'un filtre par genre. */
.cm-actif-f { background: var(--cm-f) !important; border-color: var(--cm-f) !important; color: #fff !important; }
.cm-actif-m { background: var(--cm-m) !important; border-color: var(--cm-m) !important; color: #fff !important; }

/* ─── Lettre de genre ─────────────────────────────────────────────────────
   Sur les pastilles de camarade, remplace l'émoji : deux fois plus compacte,
   d'un dessin identique partout, et elle rend au nom la place qui lui manquait
   pour ne pas être tronqué. */
.cm-g {
    flex: 0 0 auto;
    width: 0.9em;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    opacity: .65;
}

/* ─── Interrupteur ────────────────────────────────────────────────────────
   Employé dans la fiche élève, où quatre contraintes s'activent ou non. Le
   bouton qui le porte change aussi de fond : l'état reste donc lisible même
   si cette règle venait à manquer. */
.cm-switch {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background-color .15s ease;
}

.cm-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .35);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}

[aria-pressed='true'] .cm-switch { background: #4f46e5; }
[aria-pressed='true'] .cm-switch::after { transform: translateX(14px); }

html.dark .cm-switch { background: #3a3f6d; }
html.dark [aria-pressed='true'] .cm-switch { background: #6366f1; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.text-transparent-caret { color: transparent !important; caret-color: #0f172a; }
.text-transparent-caret::selection { background-color: rgba(139, 92, 246, 0.3); color: transparent !important; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #4f46e5; border-radius: 50%; width: 40px; height: 40px; animation: spin 0.8s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* === ANIMATIONS ===
 * pulse-glow        → config-pulse  (ambre, scale + halo, 1.2 s)
 * pulse-glow-ring   → import-pulse  (ambre, halo seul,   1.8 s)
 * pulse-glow-emerald → halo vert                           1.4 s)
 * Une seule keyframe paramétrée par variable CSS quand possible,
 * sinon deux keyframes distinctes pour conserver les transformations.
 */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.9), 0 2px 12px rgba(251,191,36,.5); transform: scale(1); }
    50%       { box-shadow: 0 0 0 10px rgba(251,191,36,0), 0 4px 20px rgba(251,191,36,.7); transform: scale(1.06); }
}
.config-pulse { animation: pulse-glow 1.2s ease-in-out infinite; }

/* Même couleur qu'ambre mais sans scale et rythme plus lent (import) */
@keyframes pulse-glow-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.75), 0 2px 8px rgba(251,191,36,.45); }
    50%       { box-shadow: 0 0 0 8px rgba(251,191,36,0), 0 2px 12px rgba(251,191,36,.65); }
}
.import-pulse { animation: pulse-glow-ring 1.8s ease-in-out infinite; }

/* Variante verte (utilisable via Alpine si besoin) */
@keyframes pulse-glow-emerald {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.7), 0 2px 8px rgba(16,185,129,.4); }
    50%       { box-shadow: 0 0 0 6px rgba(16,185,129,0), 0 2px 8px rgba(16,185,129,.6); }
}

@keyframes arrow-slide { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(5px); opacity: 1; } }
.arrow-bounce { display: inline-block; animation: arrow-slide 0.9s ease-in-out infinite; }
.sidebar-enter { transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.sidebar-leave { transition: opacity 550ms cubic-bezier(0.4, 0, 0.2, 1), transform 550ms cubic-bezier(0.4, 0, 0.2, 1); }
.drag-over { border-color: #6366f1 !important; background-color: #eef2ff !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.3) !important; }
.dragging { opacity: 0.4; transform: scale(0.97); }
.drag-source-list { cursor: grab; }
.drag-source-list:active { cursor: grabbing; }

/* === TOOLTIPS SUR LES ICÔNES === */
.tooltip-icon { position: relative; pointer-events: auto !important; cursor: default; }
.tooltip-icon::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #f8fafc;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 9999;
    font-family: ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.tooltip-icon:hover::after { opacity: 1; }

.tooltip-icon-wide::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: #1e293b;
    color: #f8fafc;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 8px;
    width: 240px;
    white-space: normal;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.tooltip-icon-wide:hover::after { opacity: 1; }

/* =============================================================================
   MODE SOMBRE — ajustements écrits à la main
   =============================================================================

   La conversion des classes utilitaires (fonds, textes, bordures, dégradés)
   est générée dans `dark.css`, chargé avant ce fichier. On ne trouve donc ici
   que ce qu'une règle mécanique ne peut pas deviner : les surfaces peintes en
   CSS, les ombres, les champs de saisie et les ascenseurs.

   Ce qui reste volontairement inchangé en sombre : les aplats vifs (boutons
   pleins en `bg-indigo-600`, dégradés d'accent) et le texte blanc qu'ils
   portent — ils sont déjà lisibles sur fond sombre, et les éteindre ferait
   perdre les repères de couleur de l'interface.
   ============================================================================= */

html.dark body { background-color: #0f172a; color: #e2e8f0; }

/* Bandeau et barre latérale : peints en dégradé, donc hors d'atteinte des
   classes utilitaires. Le clair est celui d'origine, remonté de l'attribut
   `style` pour devenir thématisable. */
.cm-chrome { background: linear-gradient(160deg, #f5f3ff 0%, #ede9fe 40%, #eef2ff 100%); }
html.dark .cm-chrome { background: linear-gradient(160deg, #131c2e 0%, #191b38 40%, #131a2e 100%); }
html.dark .cm-chrome.border-violet-200 { border-color: #2c2a52 !important; }
html.dark .cm-chrome.border-violet-100 { border-color: #262445 !important; }

/* Les ombres portées noires disparaissent sur fond sombre : on les creuse. */
html.dark .shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7) !important; }
html.dark .shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important; }
html.dark .shadow-lg { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.55) !important; }
html.dark .shadow-md,
html.dark .shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important; }

/* Champs de saisie : plus sombres que la carte qui les porte, pour rester
   identifiables comme zones éditables. */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #0d1524 !important;
    color: #e6edf7 !important;
    border-color: #33415580 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus { border-color: #6366f1 !important; }

/* Cases à cocher et interrupteurs natifs. */
html.dark input[type='checkbox'],
html.dark input[type='radio'] { accent-color: #6366f1; }

/* Grille de classe : allées, places bloquées, place survolée. */
html.dark .aisle-bg {
    background-color: #0f172a !important;
    background-image: radial-gradient(#334155 1px, transparent 1px) !important;
}
html.dark .blocked-bg {
    background-color: #1a2334 !important;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #334155 10px, #334155 20px) !important;
}
html.dark .drag-over {
    background-color: rgba(99, 102, 241, 0.28) !important;
    border-color: #818cf8 !important;
}
html.dark .border-dashed { border-color: #3a4a60 !important; }

/* Le curseur du champ « saisie masquée » doit rester visible. */
html.dark .text-transparent-caret { caret-color: #e2e8f0; }

/* Ascenseurs personnalisés. */
html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569 !important; }
html.dark .custom-scrollbar::-webkit-scrollbar-track { background: #1a2334 !important; }

/* Indicateur de chargement : le gris clair de son anneau disparaîtrait. */
html.dark .loader { border-color: #1e293b; border-top-color: #818cf8; }

/* Étiquette de glisser-déposer et infobulles restent lisibles telles quelles,
   mais gagnent un liseré pour se détacher du fond. */
html.dark .cm-drag-ghost { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); }
html.dark .tooltip-icon::after,
html.dark .tooltip-icon-wide::after { background: #020617; border: 1px solid #334155; }

/* =============================================================================
   Version en ligne — ajouts
   ============================================================================= */

/* --- Glisser-déposer au doigt --------------------------------------------- */

/* Pendant un déplacement, on neutralise la sélection de texte et le
   rebond élastique du défilement, qui parasitent le geste sur mobile. */
body.cm-dragging {
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
    touch-action: none;
    cursor: grabbing;
}

/* Étiquette suivant le pointeur : c'est elle qui remplace l'aperçu de
   glissement natif, inexistant avec les Pointer Events. */
.cm-drag-ghost {
    position: fixed;
    z-index: 900;
    pointer-events: none;
    transform: translate(-50%, -140%);
    padding: 8px 14px;
    border-radius: 12px;
    background: #4f46e5;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

/* Place survolée pendant le déplacement. */
.drag-over {
    background-color: rgba(79, 70, 229, 0.18) !important;
    border-color: #4f46e5 !important;
    transform: scale(1.04);
}

/* L'élément en cours de déplacement s'efface légèrement. */
.dragging {
    opacity: 0.4;
}

/* --- Champ de saisie du code PIN ------------------------------------------ */

/* Le champ reste focusable (donc utilisable au clavier physique et déclencheur
   du pavé numérique sur mobile) tout en étant visuellement absent : ce sont les
   six points qui matérialisent la saisie. */
.sr-only-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* --- Aperçu avant impression intégré -------------------------------------- */

.cm-print-overlay {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    flex-direction: column;
    background: #0f172a;
}

.cm-print-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #1e293b;
    color: #fff;
    /* Décale la barre sous l'encoche et la barre d'état des téléphones. */
    padding-top: calc(10px + env(safe-area-inset-top));
}

.cm-print-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.cm-print-actions {
    display: flex;
    gap: 8px;
}

.cm-print-btn {
    border: 0;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    /* Cible tactile confortable, conforme aux recommandations d'accessibilité. */
    min-height: 44px;
}

.cm-print-btn-primary {
    background: #6366f1;
}

.cm-print-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

/* N'imprimer que l'aperçu, jamais l'application derrière lui. */
@media print {
    body > *:not(.cm-print-overlay) {
        display: none !important;
    }
    .cm-print-overlay {
        position: static;
    }
    .cm-print-toolbar {
        display: none !important;
    }
}

/* --- Adaptation aux petits écrans ----------------------------------------- */

@media (max-width: 767px) {
    /* La barre latérale devient un tiroir superposé : sur 375 px de large,
       une colonne fixe ne laisserait rien à la grille. */
    .cm-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 45;
        width: min(88vw, 340px);
        box-shadow: 0 0 40px rgba(15, 23, 42, 0.35);
    }

    /* Les modales occupent tout l'écran plutôt que de flotter au centre :
       plus de contenu visible, et le pouce atteint les boutons. */
    .cm-modal-panel {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 92vh !important;
        border-radius: 20px 20px 0 0 !important;
        margin-top: auto;
    }

    /* La grille défile horizontalement au lieu de comprimer les places
       jusqu'à les rendre illisibles. */
    .cm-grid-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Écrans tactiles ------------------------------------------------------ */

/* Le critère est le pointeur, pas la largeur de la fenêtre. Une tablette de
   768 à 1024 px échappait à l'ancien `max-width: 767px` : sur l'appareil
   d'usage principal en classe, aucune de ces règles ne s'appliquait. */
@media (pointer: coarse) {
    /* Sans survol, un contrôle révélé au pointeur reste invisible — tout en
       demeurant cliquable. C'est ainsi qu'on bloque une place ou qu'on
       supprime une classe sans avoir jamais vu le bouton. */
    [class*='group-hover:opacity-100'] {
        opacity: 1 !important;
    }

    /* Cible tactile minimale. L'ancienne règle ne posait que `min-height`, et
       seulement sous 768 px. */
    button,
    select,
    [role='button'] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Deux exceptions justifiées : les pastilles posées en absolu dans une
       case de la grille — les agrandir les ferait déborder et couvrir tout le
       bord de la case, donc déclencher « bloquer la place » au moindre appui
       de travers — et les contrôles explicitement compacts. */
    .cm-seat-badge,
    .cm-tap-exempt {
        min-height: 0;
        min-width: 0;
    }
}

/* --- Mouvement réduit ----------------------------------------------------- */

/* Trois animations tournent en boucle sans fin tant que l'enseignant n'a pas
   importé sa liste ou ouvert la configuration. Pour qui souffre de troubles
   vestibulaires, c'est intenable. */
@media (prefers-reduced-motion: reduce) {
    .config-pulse,
    .import-pulse,
    .arrow-bounce,
    .loader {
        animation: none !important;
    }
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Zone sûre en bas d'écran (barre gestuelle iOS). */
.cm-safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- Mode présentation (vidéoprojecteur) ---------------------------------- */

/* Masque tout sauf la grille et l'agrandit : utile pour projeter le plan au
   tableau à la rentrée. */
body.cm-presentation .cm-hide-in-presentation {
    display: none !important;
}

body.cm-presentation .cm-grid-area {
    font-size: 1.15em;
}

/* =============================================================================
   Pages légales — typographie longue
   Ces pages ne chargent pas Alpine et doivent rester lisibles telles quelles.
   ============================================================================= */

.prose-cm { color: #334155; line-height: 1.75; }

/* Titres numérotés par le compteur plutôt qu'à la main : la pastille reste
   alignée sur le texte quel que soit le nombre de sections, et l'on ne risque
   plus qu'un numéro écrit en dur contredise l'ordre réel. */
.prose-cm { counter-reset: section; }

.prose-cm h2 {
    counter-increment: section;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
    margin-top: 2.25rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #e2e8f0;
}

.prose-cm h2::before {
    content: counter(section);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.5rem;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

/* Premier paragraphe : plus grand, il sert de chapeau. */
.prose-cm > p:first-of-type {
    font-size: 1rem;
    color: #475569;
}

.prose-cm h3 {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}

.prose-cm p { margin-bottom: 0.9rem; font-size: 0.9rem; }

.prose-cm ul {
    list-style: disc;
    padding-left: 1.35rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.prose-cm li { margin-bottom: 0.4rem; }

.prose-cm a { color: #4f46e5; font-weight: 700; text-decoration: underline; }
.prose-cm a:hover { color: #4338ca; }

.prose-cm strong { color: #0f172a; font-weight: 800; }

.prose-cm code {
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 0.35rem;
    font-size: 0.82em;
    font-weight: 700;
    color: #4f46e5;
}

.prose-cm table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.25rem;
    font-size: 0.85rem;
    /* Sur téléphone, un tableau large doit défiler plutôt que déborder. */
    display: block;
    overflow-x: auto;
}

.prose-cm thead th {
    text-align: left;
    font-weight: 900;
    color: #475569;
    background: #f8fafc;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.prose-cm tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

/* Ces pages n'utilisent presque aucune classe utilitaire : leur mode sombre ne
   peut pas venir de la couche générée, il s'écrit ici. */
html.dark .prose-cm { color: #b6c2d4; }
html.dark .prose-cm h2 { color: #f1f5f9; border-bottom-color: #2f3d52; }
html.dark .prose-cm h3 { color: #e2e8f0; }
html.dark .prose-cm strong { color: #f5f8fc; }
html.dark .prose-cm a { color: #a5b4fc; }
html.dark .prose-cm a:hover { color: #c7d2fe; }
html.dark .prose-cm code { background: #0d1524; color: #a5b4fc; }
html.dark .prose-cm thead th { color: #cbd5e1; background: #141d2e; border-bottom-color: #2f3d52; }
html.dark .prose-cm tbody td { border-bottom-color: #232f42; }