/* ============================================================================
   Composants visuels réutilisables
   ----
   Ces composants sont utilisables dans n'importe quelle page via leurs classes.
   Ils s'appuient sur les variables de base-visuel.css.
   ============================================================================ */

/* ============================================================================
   1. CHIP DE CHAPITRE
   ----
   Petite étiquette avec une pastille colorée (la couleur du chapitre) + libellé.
   Utilisation :
       <span class="chip-chap" style="--couleur: var(--ch-1);">
           <span class="chip-chap-pastille"></span>
           Second degré
       </span>

   La variable --couleur peut être définie sur le chip lui-même, ou via une
   classe modificatrice (chap-second-degre, etc. – on génère ça côté serveur).
   ============================================================================ */

.chip-chap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 6px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-2);
    white-space: nowrap;
    /* Pour éviter qu'un long libellé casse la mise en page */
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-chap-pastille {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--couleur, var(--muted));
    /* Anneau sombre subtil pour faire ressortir la couleur sur fond blanc */
    box-shadow: inset 0 0 0 1px rgba(20, 18, 14, 0.2);
}

/* Classes utilitaires pour appliquer la couleur du chapitre.
   Pour utilisation : <span class="chip-chap chap-second-degre">...</span> */
.chap-second-degre              { --couleur: var(--ch-1); }
.chap-complements-2nd-degre     { --couleur: var(--ch-2); }
.chap-probabilites-conditionnelles { --couleur: var(--ch-3); }
.chap-nombre-derive-et-tangentes { --couleur: var(--ch-4); }
.chap-fonctions-derivees        { --couleur: var(--ch-5); }
.chap-suites-numeriques         { --couleur: var(--ch-6); }
.chap-suites-de-references      { --couleur: var(--ch-7); }
.chap-variables-aleatoires      { --couleur: var(--ch-8); }
.chap-exponentielle             { --couleur: var(--ch-9); }
.chap-trigonometrie             { --couleur: var(--ch-10); }
.chap-produit-scalaire          { --couleur: var(--ch-11); }
.chap-droites-et-cercles        { --couleur: var(--ch-12); }
/* Transversaux : couleurs neutres */
.chap-algorithmique             { --couleur: var(--muted); }
.chap-logique-ensembles         { --couleur: var(--muted); }

/* ============================================================================
   2. PIPS DE COMPÉTENCES
   ----
   6 petits carrés représentant les 6 compétences mathématiques BO :
   chercher, modéliser, représenter, calculer, raisonner, communiquer.
   Toujours dans le même ordre, opacité forte si présente, faible si absente.

   Utilisation :
       <div class="pips" title="modéliser, calculer">
           <span class="pip" data-comp="chercher" data-active="0"></span>
           <span class="pip" data-comp="modeliser" data-active="1"></span>
           <span class="pip" data-comp="representer" data-active="0"></span>
           <span class="pip" data-comp="calculer" data-active="1"></span>
           <span class="pip" data-comp="raisonner" data-active="0"></span>
           <span class="pip" data-comp="communiquer" data-active="0"></span>
       </div>
   ============================================================================ */

.pips {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.pip {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ink);
    opacity: 0.15;
    transition: opacity 0.15s ease;
}

.pip[data-active="1"] {
    opacity: 0.85;
}

/* En survol des pips, on peut révéler le nom de la compétence active */
.pips:hover .pip[data-active="1"] {
    opacity: 1;
}

/* Variante grande pour la page détail */
.pips-lg .pip {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* ============================================================================
   3. CARTE D'EXERCICE
   ----
   Composant principal utilisable partout : grille de la liste, panier,
   suggestions, etc.

   Structure :
       <article class="carte-exo">
           <header class="carte-exo-entete">
               <span class="carte-exo-id">EX_0042</span>
               <div class="carte-exo-actions">...</div>
           </header>
           <h3 class="carte-exo-titre">Titre de l'exercice</h3>
           <div class="carte-exo-tags">
               (chips de chapitres ici)
           </div>
           <footer class="carte-exo-pied">
               <div class="pips">...</div>
               <span class="carte-exo-bareme">5 pts</span>
               <span class="carte-exo-corr">✓ corrigé</span>
           </footer>
       </article>
   ============================================================================ */

.carte-exo {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin: 0;  /* annule la marge par défaut de article qu'on avait définie */
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Pas de hauteur fixe : la carte s'adapte à son contenu */
}

.carte-exo:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-mid);
}

/* Variante "à compléter" : fond ambre subtil */
.carte-exo.a-completer {
    background: var(--warn-soft);
    border-color: oklch(85% 0.08 65);
}

.carte-exo-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.carte-exo-id {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.carte-exo-id a {
    color: inherit;
    text-decoration: none;
}

.carte-exo-id a:hover {
    color: var(--accent);
}

.carte-exo-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.carte-exo-titre {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
    margin: 0;
    /* Limite à 2 lignes max, ellipsis au-delà */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carte-exo-titre a {
    color: inherit;
    text-decoration: none;
}

.carte-exo-titre a:hover {
    color: var(--accent);
}

.carte-exo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.carte-exo-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    /* Le pied "colle" en bas : si la carte est étirée par une voisine
       plus haute, le pied reste contre le bord inférieur. */
    margin-top: auto;
}

.carte-exo-bareme {
    font-family: var(--mono);
    font-weight: 500;
    color: var(--ink-2);
}

/* Bouton "+" pour ajouter au panier depuis une carte */
.carte-exo-bouton-ajouter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink-2);
    border: 1px solid var(--line);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.carte-exo-bouton-ajouter:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Marqueur "déjà au panier" : le bouton est désactivé visuellement */
.carte-exo-bouton-ajouter.deja-au-panier {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
    cursor: default;
}

/* Grille de cartes (pour la liste d'exercices) */
.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

/* ============================================================================
   4. FILTRE FACETTÉ
   ----
   Ligne de filtre dans le panneau de gauche, avec checkbox, libellé et
   compteur. États visuels :
   - normal : disponible
   - hover : survol
   - actif : la case est cochée
   - vide : compteur à 0, désactivé visuellement

   Utilisation :
       <label class="facette" data-vide="0">
           <input type="checkbox" name="chapitre" value="second-degre">
           <span class="facette-libelle">Second degré</span>
           <span class="facette-compteur">42</span>
       </label>
   ============================================================================ */

.facette {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.1s ease;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.3;
}

.facette:hover {
    background: var(--paper);
}

.facette input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

/* Quand la case est cochée, on met en évidence */
.facette:has(input:checked) {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 500;
}

.facette-libelle {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facette-compteur {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    padding: 0 6px;
    background: var(--paper);
    border-radius: 999px;
    line-height: 1.6;
}

.facette:has(input:checked) .facette-compteur {
    background: var(--accent);
    color: white;
}

/* Facette désactivée (compteur à 0) */
.facette[data-vide="1"] {
    opacity: 0.4;
    pointer-events: none;
}

.facette[data-vide="1"] .facette-compteur {
    color: var(--muted);
}

/* ============================================================================
   5. PUCES D'ÉTAT (correction, statut)
   ----
   Petits indicateurs visuels compacts pour les statuts.
   ============================================================================ */

.puce {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-family: var(--mono);
    line-height: 1.5;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
}

.puce-ok {
    background: var(--ok-soft);
    color: oklch(40% 0.11 150);
    border-color: oklch(85% 0.08 150);
}

.puce-neutre {
    background: var(--paper);
    color: var(--muted);
    border-color: var(--line);
}

.puce-attention {
    background: var(--warn-soft);
    color: oklch(50% 0.13 65);
    border-color: oklch(85% 0.08 65);
}

.puce-danger {
    background: var(--danger-soft);
    color: oklch(45% 0.16 25);
    border-color: oklch(85% 0.08 25);
}

/* ============================================================================
   6. COMPOSITEUR (page liste + panier intégré)
   ----
   Disposition 3 colonnes optimisée pour grand écran :
   - Filtres : 280px (gauche, sticky)
   - Grille de cartes : flexible (centre)
   - Panier : 360px (droite, sticky)
   ============================================================================ */

.compositeur {
    /* Variables CSS pour la largeur des colonnes : modifiées par le JS via
       inline style sur l'élément lui-même. */
    --col-filtres: 280px;
    --col-panier: 360px;

    display: grid;
    grid-template-columns: var(--col-filtres) 6px 1fr 6px var(--col-panier);
    gap: 0;
    align-items: start;
    margin: var(--space-4) 0;
}

.compo-filtres,
.compo-grille-section,
.compo-panier {
    /* Espacement interne au lieu du gap : permet aux poignées d'être plus fines */
    margin: 0 var(--space-3);
}

.compo-filtres { margin-left: 0; }
.compo-panier { margin-right: 0; }

/* === Poignées de redimensionnement === */
.compo-poignee {
    position: relative;
    width: 6px;
    cursor: col-resize;
    background: transparent;
    align-self: stretch;
    min-height: 100px;
    z-index: 5;
    transition: background-color 0.15s ease;
}

.compo-poignee::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 30px;
    background: var(--line-strong);
    border-radius: 1px;
    transition: background-color 0.15s ease;
}

.compo-poignee:hover::before,
.compo-poignee.en-cours::before {
    background: var(--accent);
}

.compo-poignee:hover {
    background: var(--accent-soft);
}

/* Pendant le drag, on désactive la sélection de texte sur toute la page */
body.compositeur-redim {
    user-select: none;
    cursor: col-resize !important;
}

/* Sur écran moyen, le panier passe sous la grille */
@media (max-width: 1400px) {
    .compositeur {
        grid-template-columns: var(--col-filtres) 6px 1fr;
    }
    .compo-panier {
        grid-column: 1 / -1;
        position: static !important;
        margin: var(--space-4) 0 0 0;
    }
    .compo-poignee-droite {
        display: none;
    }
}

/* Sur petit écran, tout empile */
@media (max-width: 900px) {
    .compositeur {
        grid-template-columns: 1fr;
    }
    .compo-filtres,
    .compo-panier {
        position: static !important;
        margin: 0 0 var(--space-4) 0;
    }
    .compo-poignee {
        display: none;
    }
}

/* === Colonne filtres === */
.compo-filtres {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-size: 13px;
}

.compo-filtres-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.compo-filtres-entete h3 {
    margin: 0;
    font-size: 1rem;
}

.lien-reset {
    font-size: 12px;
    color: var(--muted);
    font-family: var(--mono);
}

.bouton-appliquer {
    width: 100%;
    margin-bottom: var(--space-4);
    background: var(--ink);
    color: white;
    border-color: var(--ink);
}

.bouton-appliquer:hover {
    background: #2a2520;
}

.compo-filtres details {
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--space-2);
}

.compo-filtres details:last-of-type {
    border-bottom: none;
}

.compo-filtres summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--ink-2);
    padding: 4px 0;
    font-size: 13px;
    user-select: none;
}

.compo-filtres input[type="search"] {
    width: 100%;
    margin-top: 6px;
}

.notions-groupe {
    margin: var(--space-2) 0;
    padding-left: var(--space-2);
    border-left: 2px solid var(--line);
}

.notions-titre {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

/* === Colonne grille (centre) === */
.compo-grille-section {
    min-width: 0;
}

.compo-grille-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.compo-grille-entete h2 {
    margin: 0;
    font-size: 1.5rem;
}

.compo-grille-entete h2 small {
    font-family: var(--mono);
    font-weight: 400;
    font-size: 0.7em;
    color: var(--muted);
    margin-left: var(--space-2);
}

.pips-legende {
    display: flex;
    gap: 12px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted);
    flex-wrap: wrap;
}

.pips-legende strong {
    color: var(--ink-2);
    font-weight: 500;
}

.form-tri {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.form-tri select {
    padding: 4px 8px;
    font-size: 13px;
    margin: 0;
    width: auto;
}

.form-tri label {
    margin: 0;
    font-size: 11px;
}

/* Grille de cartes optimisée pour grand écran */
.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.grille-vide {
    padding: var(--space-8);
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    color: var(--muted);
}

/* === Colonne panier (droite) === */
.compo-panier {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    font-size: 13px;
}

.compo-panier-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.compo-panier-entete h3 {
    margin: 0;
    font-size: 1rem;
}

.compo-panier-entete small {
    font-family: var(--mono);
    color: var(--muted);
    font-size: 12px;
    margin-left: 6px;
}

.bouton-icone {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
}

.bouton-icone:hover {
    background: var(--paper);
    color: var(--ink);
}

.bouton-retirer:hover {
    background: var(--danger-soft);
    color: oklch(45% 0.16 25);
    border-color: oklch(85% 0.08 25);
}

.compo-panier-total {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 13px;
}

.compo-panier-total strong {
    font-size: 1.3em;
    font-family: var(--mono);
}

.compo-panier-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.compo-panier-item {
    display: grid;
    grid-template-columns: 14px 18px 1fr 50px 24px;
    gap: 6px;
    align-items: center;
    padding: 6px 4px;
    margin: 0 0 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: default;
    font-size: 12px;
}

.compo-panier-item.en-deplacement {
    opacity: 0.4;
}

.compo-panier-item.cible-survol {
    border-color: var(--accent);
    border-style: dashed;
}

.compo-panier-item-poignee {
    cursor: grab;
    color: var(--muted);
    user-select: none;
    text-align: center;
}

.compo-panier-item-num {
    font-family: var(--mono);
    color: var(--muted);
    text-align: center;
    font-size: 11px;
}

.compo-panier-item-corps {
    min-width: 0;
    overflow: hidden;
}

.compo-panier-item-corps a {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    text-decoration: none;
}

.compo-panier-item-titre {
    color: var(--ink);
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compo-panier-bareme {
    margin: 0;
}

.compo-panier-bareme input[type="number"] {
    width: 100%;
    padding: 2px 4px;
    font-size: 12px;
    margin: 0;
    text-align: center;
    font-family: var(--mono);
}

/* === Formulaire de génération du devoir === */
.compo-panier-generation {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}

.compo-panier-generation summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1rem;
    padding: 4px 0;
    margin-bottom: var(--space-3);
}

.compo-panier-generation label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 12px;
}

.compo-panier-generation input[type="text"] {
    width: 100%;
    margin-top: 2px;
}

.mode-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin: var(--space-2) 0;
}

.mode-fieldset label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    margin-right: var(--space-3);
}

.boutons-generation {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.boutons-generation button {
    margin: 0;
    font-size: 12px;
    padding: 8px 10px;
}

/* === Pagination === */
.pagination {
    margin-top: var(--space-6);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--muted);
    font-family: var(--mono);
}

.pagination a {
    color: var(--accent);
    margin: 0 6px;
}

.pagination .disabled {
    opacity: 0.4;
}

/* ============================================================================
   7. GRILLE META (compteur + chips de filtres actifs)
   ============================================================================ */

.grille-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    min-height: 28px;
}

.grille-compte {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    flex-shrink: 0;
}

.filtres-chips-actifs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filtre-chip-actif {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 12px;
    font-family: var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, opacity 0.12s ease;
    white-space: nowrap;
}

.filtre-chip-actif:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* ============================================================================
   8. PAGE DÉTAIL — entête, résumé visuel
   ============================================================================ */

.detail-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.detail-entete-titres {
    flex: 1;
    min-width: 0;
}

.detail-entete-titres .eyebrow {
    display: block;
    margin-bottom: 4px;
}

.detail-entete-titres h1 {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 1.8rem;
    color: var(--ink);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.01em;
}

.detail-sous-titre {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

.lien-retour {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    padding-top: 8px;
}

.lien-retour:hover {
    color: var(--accent);
}

/* Bandeau résumé : chips + pips + état */
.detail-resume {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.detail-resume-chapitres {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.detail-resume-pips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.detail-resume-pips .eyebrow {
    font-size: 10px;
}

.detail-resume-etat {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* ============================================================================
   8. TABLEAU DE BORD
   ============================================================================ */

.dashboard-entete {
    margin-bottom: var(--space-6);
}

.dashboard-entete .eyebrow {
    display: block;
    margin-bottom: 4px;
}

.dashboard-entete h1 {
    margin: 0;
}

/* === Bande de chiffres clés === */
.cles-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.cle-carte {
    position: relative;
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.cle-nombre {
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 4px;
}

.cle-libelle {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

.cle-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.cle-lien {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
}

.cle-lien:hover {
    text-decoration: underline;
}

/* Variantes colorées des cartes clés */
.cle-total .cle-nombre {
    color: var(--ink);
}

.cle-ok {
    border-color: oklch(85% 0.08 150);
    background: var(--ok-soft);
}
.cle-ok .cle-nombre,
.cle-ok .cle-meta {
    color: oklch(40% 0.11 150);
}

.cle-attention {
    border-color: oklch(85% 0.08 65);
    background: var(--warn-soft);
}
.cle-attention .cle-nombre {
    color: oklch(50% 0.13 65);
}

.cle-neutre {
    background: var(--paper);
}

/* === Disposition en deux colonnes === */
.dashboard-grille {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 1100px) {
    .dashboard-grille {
        grid-template-columns: 1fr;
    }
}

.dashboard-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.dashboard-section h2,
.dashboard-section h3 {
    margin: 0 0 var(--space-3);
    font-family: var(--serif);
    font-weight: 500;
}

.dashboard-section h3 {
    font-size: 1rem;
}

.dashboard-section-entete {
    margin-bottom: var(--space-4);
}

.dashboard-section-entete h2 {
    margin: 0 0 4px;
}

.dashboard-section-entete .eyebrow {
    color: var(--muted);
}

.dashboard-secondaire {
    display: flex;
    flex-direction: column;
}

/* === Barres horizontales de chapitres === */
.barres-chapitres {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.barre-ligne {
    display: grid;
    grid-template-columns: 220px 1fr 48px;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    transition: background-color 0.1s ease;
}

.barre-ligne:hover {
    background: var(--paper);
    text-decoration: none;
}

.barre-libelle {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barre-piste {
    background: var(--paper);
    border-radius: var(--radius-sm);
    height: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.barre-remplissage {
    display: block;
    height: 100%;
    background: var(--couleur, var(--accent));
    transition: width 0.4s ease;
    opacity: 0.7;
}

.barre-ligne:hover .barre-remplissage {
    opacity: 1;
}

.barre-valeur {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    text-align: right;
    font-weight: 500;
}

/* === Tables de stats secondaires === */
.stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.stat-table td {
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
}

.stat-table tr:last-child td {
    border-bottom: none;
}

.stat-table .stat-nb {
    text-align: right;
    font-family: var(--mono);
    font-weight: 500;
    color: var(--ink);
}

.stat-table .stat-nb a {
    color: var(--accent);
    text-decoration: none;
}

.stat-table .stat-nb a:hover {
    text-decoration: underline;
}

/* ============================================================================
   9b. STUDIO D'ÉDITION (C4)
   ============================================================================ */

/* Page large sans padding excessif */
.body-studio { }
.page-studio { max-width: 100%; padding: 0 var(--space-4); }

/* ── Header sticky ── */
.studio-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px var(--space-4);
    margin: 0 calc(-1 * var(--space-4));
    margin-bottom: var(--space-4);
}

.studio-header-gauche {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.studio-retour {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--muted);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
}
.studio-retour:hover { color: var(--accent); }

.studio-id {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.studio-header-centre {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.studio-titre {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 3px;
    padding: 1px 4px;
    cursor: text;
    outline: none;
    transition: background 0.1s;
}
.studio-titre:hover { background: var(--paper); }
.studio-titre:focus { background: var(--paper); outline: 2px solid var(--accent); white-space: normal; overflow: visible; }

.studio-resume {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.studio-header-droite {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.studio-indicateur-statut {
    font-size: 11px;
    color: var(--success, oklch(55% 0.18 145));
    white-space: nowrap;
}

.studio-indicateur-modif {
    font-size: 14px;
    color: oklch(60% 0.18 60);
    width: 14px;
}

.studio-action-btn {
    font-size: 11px;
    padding: 5px 10px;
    white-space: nowrap;
    line-height: 1.4;
}

.studio-action-btn.danger {
    color: var(--danger, oklch(55% 0.2 20));
    border-color: var(--danger, oklch(55% 0.2 20));
}

.studio-action-btn.btn-envoyer-overleaf {
    width: auto;
    display: inline-block;
    margin-top: 0;
    padding: 5px 10px;
    font-size: 11px;
}

/* ── Blocs LaTeX côte à côte ── */
.studio-blocs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 900px) {
    .studio-blocs { grid-template-columns: 1fr; }
}

/* ── Tiroir métadonnées ── */
.studio-tiroir {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--space-6);
    overflow: hidden;
}

.studio-tiroir-toggle {
    width: 100%;
    text-align: left;
    background: var(--paper);
    border: none;
    padding: var(--space-3) var(--space-4);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: 0;
    transition: background 0.1s;
}
.studio-tiroir-toggle:hover { background: var(--line); }

.studio-tiroir-contenu {
    padding: var(--space-4);
    border-top: 1px solid var(--line);
}

.studio-form-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-4);
}

@media (max-width: 800px) {
    .studio-form-grille { grid-template-columns: 1fr; }
}

.studio-form-col h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0 0 var(--space-3);
}

.studio-sources {
    margin-top: var(--space-3);
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
}

/* Pips compacts pour le studio header */
.pips-sm { gap: 2px; }
.pips-sm .pip { width: 7px; height: 7px; }

/* ============================================================================
   10. APERÇU INLINE (C3)
   ============================================================================ */

.apercu-panel {
    margin-top: var(--space-4);
    border-radius: var(--radius);
    overflow: hidden;
}

.apercu-panel:empty {
    display: none;
}

.apercu-contenu {
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: apercu-slide-in 0.15s ease-out;
}

@keyframes apercu-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.apercu-entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.apercu-id-titre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.apercu-titre {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    line-height: 1.3;
}

.apercu-enonce {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
    max-height: 420px;
    overflow-y: auto;
    padding-right: var(--space-2);
}

.apercu-enonce p { margin: 0 0 0.6em; }
.apercu-enonce p:last-child { margin-bottom: 0; }

.apercu-tags {
    margin: 0;
}

.apercu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
}

.apercu-actions button,
.apercu-actions a[role=button] {
    font-size: 13px;
    padding: 5px 14px;
}

/* ============================================================================
   11. PANIER ÉQUILIBRE PÉDAGOGIQUE
   ============================================================================ */

.panier-equilibre {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Ligne de stats résumées */
.panier-eq-stats {
    display: flex;
    gap: var(--space-3);
    font-size: 12px;
    color: var(--ink-2);
}

.panier-eq-stat strong {
    color: var(--ink);
}

/* 6 barres de compétences */
.panier-eq-comps {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.panier-eq-comp {
    display: grid;
    grid-template-columns: 20px 1fr 18px;
    align-items: center;
    gap: 5px;
}

.panier-eq-comp-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
    text-align: right;
}

.panier-eq-comp-piste {
    background: var(--line);
    border-radius: 2px;
    height: 6px;
    overflow: hidden;
}

.panier-eq-comp-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    min-width: 0;
}

.panier-eq-comp-val {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-align: right;
}

/* Badges de chapitres présents */
.panier-eq-chaps {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.chip-chap-mini {
    padding: 1px 6px 1px 4px;
    font-size: 10px;
    max-width: 100px;
}

.chip-chap-libelle-mini {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    display: inline-block;
    vertical-align: middle;
}

/* Barème : feedback animé après auto-sauvegarde HTMX */
.compo-panier-bareme-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.compo-panier-bareme {
    /* override ancienne rule si présente */
}

.bareme-feedback {
    font-size: 10px;
    min-height: 12px;
    display: block;
}

.saved-feedback {
    color: var(--success, oklch(55% 0.18 145));
    animation: saved-fade 1s ease-out forwards;
}

.saved-error {
    color: var(--danger, oklch(55% 0.2 20));
    animation: none;
}

@keyframes saved-fade {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Avertissement durée Alpine */
.duree-avertissement {
    font-size: 11px;
    color: oklch(60% 0.15 70);
    margin: 2px 0 0;
    display: block;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   §12 — Mode tagger plein écran
   ───────────────────────────────────────────────────────────────────────────── */

/* Badge "à tagger" dans la nav — orange pour se distinguer du panier */
.tagger-badge {
    background: oklch(65% 0.18 55);
}

/* Override Pico layout pour le mode tagger */
body.body-tagger {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.body-tagger > main.container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.body-tagger > header,
body.body-tagger > footer {
    display: none;
}

.tagger-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── En-tête tagger ── */
.tagger-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--line, #e5e7eb);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tagger-header-gauche {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tagger-header-centre {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tagger-header-droite {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.tagger-retour {
    font-size: 18px;
    text-decoration: none;
    color: var(--muted);
    flex-shrink: 0;
    padding: 2px 4px;
    border-radius: 4px;
}
.tagger-retour:hover { background: var(--line); }

.tagger-id {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.tagger-titre-exo {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagger-progress-label {
    font-size: 11px;
    color: var(--muted);
}

/* Étapes */
.tagger-steps-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tagger-step {
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
}
.tagger-step:hover { background: var(--line); }
.tagger-step.active {
    background: var(--accent, oklch(55% 0.2 260));
    color: #fff;
}

.tagger-step-sep {
    color: var(--line);
    font-size: 14px;
}

.tagger-save-indicator {
    font-size: 11px;
    color: oklch(55% 0.18 145);
    font-family: var(--mono);
}

.tagger-keyboard-hint {
    font-size: 10px;
    color: var(--muted);
    opacity: 0.7;
}

/* ── Barre de progression ── */
.tagger-progress-bar {
    height: 3px;
    background: var(--line);
}

.tagger-progress-fill {
    height: 100%;
    background: var(--accent, oklch(55% 0.2 260));
    transition: width 0.3s ease;
}

/* ── Corps du formulaire ── */
.tagger-form {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.tagger-etape-titre {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
}

/* Suggestions (step 1) */
.tagger-suggestions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: oklch(97% 0.01 260);
    border-radius: 8px;
    border: 1px solid oklch(88% 0.04 260);
}

.tagger-suggestions-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* Mise en valeur des facettes suggérées */
.facette.facette-suggeree {
    border-color: oklch(70% 0.12 260);
    background: oklch(96% 0.03 260);
}

/* Chip suggestion dans la barre */
.chip-suggestion {
    font-size: 11px;
    font-weight: 600;
}

/* Grille de facettes pour le tagger */
.facettes-tagger {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Filtrage notions : masquer les labels hors chapitres cochés */
.notion-item[data-chapitre] {
    /* JS/Alpine gère display via la barre de filtrage dynamique */
}

/* ── Navigation bas de page ── */
.tagger-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    border-top: 1px solid var(--line);
    background: var(--bg, #fff);
}

.tagger-nav-etape {
    font-size: 12px;
    color: var(--muted);
}

.tagger-nav-fin {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* hint texte step 2 */
.tagger-etape p.hint {
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §13 — Atlas du corpus (C6)
   ───────────────────────────────────────────────────────────────────────────── */

/* Carte supprimés dans le dashboard */
.cle-carte.cle-supprime {
    border-left-color: oklch(55% 0.06 0);
}
.cle-carte.cle-supprime .cle-nombre { color: oklch(55% 0.06 0); }

/* Barres de compétences globales */
.atlas-comp-barres {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.atlas-comp-ligne {
    display: grid;
    grid-template-columns: 80px 1fr 28px;
    align-items: center;
    gap: 6px;
}

.atlas-comp-label {
    font-size: 11px;
    color: var(--muted);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--mono);
}

.atlas-comp-piste {
    background: var(--line);
    border-radius: 3px;
    height: 8px;
    overflow: hidden;
}

.atlas-comp-fill {
    height: 100%;
    background: var(--accent, oklch(55% 0.2 260));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.atlas-comp-val {
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    font-family: var(--mono);
}

/* Heatmap chapitre × année */
.atlas-heatmap-section {
    margin-top: 2rem;
}

.atlas-heatmap-scroll {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.atlas-heatmap {
    border-collapse: collapse;
    font-size: 11px;
    min-width: 100%;
}

.atlas-heatmap th,
.atlas-heatmap td {
    padding: 3px 6px;
    border: 1px solid var(--line);
    text-align: center;
    white-space: nowrap;
}

.atlas-heatmap-chapitre-col { width: 220px; }

.atlas-heatmap-libelle {
    text-align: left;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.atlas-heatmap-libelle a {
    color: inherit;
    text-decoration: none;
}
.atlas-heatmap-libelle a:hover { text-decoration: underline; }

.atlas-heatmap-annee {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}

.atlas-heatmap-cell {
    color: var(--muted);
    min-width: 28px;
}

.atlas-heatmap-cell.cell-active {
    background: oklch(94% 0.04 260);
    color: oklch(40% 0.18 260);
    font-weight: 600;
}

.atlas-heatmap-total-cell,
.atlas-heatmap-total {
    font-weight: 700;
    background: oklch(97% 0.01 0);
    color: var(--fg);
}

/* Notions orphelines */
.atlas-orphelines-section {
    margin-top: 1rem;
}

.atlas-orphelines-section details > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.5rem 0;
}
.atlas-orphelines-section details > summary::-webkit-details-marker { display: none; }

.atlas-orphelines-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: oklch(98% 0.005 0);
    border-radius: 6px;
}

.chip-orpheline {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--line);
    color: var(--muted);
    border: 1px solid oklch(85% 0.04 0);
}

/* ─────────────────────────────────────────────────────────────────────────────
   §14 — Palette ⌘K
   ───────────────────────────────────────────────────────────────────────────── */

.palette-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: oklch(10% 0 0 / 45%);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
}

.palette-overlay.palette-ouverte {
    display: flex;
}

.palette-boite {
    background: var(--bg, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 40px oklch(10% 0 0 / 22%);
    width: min(580px, 92vw);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.palette-barre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
}

.palette-icone {
    font-size: 13px;
    color: var(--muted);
    font-family: var(--mono);
    flex-shrink: 0;
}

.palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--fg);
    padding: 0;
    margin: 0;
}

.palette-esc-hint {
    font-size: 10px;
    padding: 2px 5px;
    background: var(--line);
    border-radius: 4px;
    color: var(--muted);
    flex-shrink: 0;
}

.palette-liste {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}

.palette-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.1s;
}

.palette-item.palette-actif,
.palette-item:hover {
    background: oklch(95% 0.03 260);
}

.palette-id {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 80px;
}

.palette-titre {
    font-size: 13px;
    color: var(--fg);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-chaps {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.palette-incomplet {
    color: oklch(65% 0.15 70);
    font-size: 12px;
    margin-left: 4px;
}

.palette-vide {
    padding: 12px 16px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* Bouton palette dans la nav */
.palette-nav-btn {
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.palette-nav-btn:hover { background: var(--line); }
.palette-nav-btn kbd {
    font-family: var(--mono);
    font-size: 10px;
    background: oklch(93% 0 0);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1px 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §15 — C3 : Aperçu inline (carte étendue dans la grille)
   ───────────────────────────────────────────────────────────────────────────── */

.grille-cartes .carte-ouverte {
    grid-column: 1 / -1;
    cursor: default;
}

.apercu-id-titre {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.apercu-titre-h {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    -webkit-line-clamp: unset;
}

.apercu-kbs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

.apercu-kbs kbd {
    font-size: 10px;
    padding: 1px 5px;
    background: var(--line);
    border-radius: 3px;
    border: 1px solid oklch(78% 0 0);
    color: var(--muted);
    font-family: var(--mono);
}

.apercu-enonce {
    font-size: 14px;
    line-height: 1.65;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.apercu-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    margin-top: auto;
}

.apercu-actions kbd {
    font-size: 10px;
    padding: 1px 4px;
    background: oklch(93% 0 0);
    border-radius: 3px;
    border: 1px solid oklch(80% 0 0);
    font-family: var(--mono);
    color: var(--muted);
    margin-left: 2px;
    vertical-align: middle;
}

.apercu-btn-panier {
    background: var(--accent, oklch(55% 0.2 260));
    color: #fff;
    border-color: var(--accent, oklch(55% 0.2 260));
}

/* ─────────────────────────────────────────────────────────────────────────────
   §16 — C4 : Studio layout — blocs gauche + drawer méta droit
   ───────────────────────────────────────────────────────────────────────────── */

/* Grille 2 colonnes : gauche=blocs, droite=drawer */
.studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    min-height: calc(100vh - 54px);
    align-items: start;
    overflow: hidden; /* clip le drawer qui slide hors de l'écran */
}

/* Quand le drawer est fermé : la grille passe en 1 colonne */
.studio-layout--sans-meta {
    grid-template-columns: 1fr;
}

.studio-blocs-col .studio-blocs {
    display: flex;
    flex-direction: column;
}

/* Drawer : sticky dans le viewport, slide depuis la droite */
.studio-meta-col {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: hidden;             /* masque le contenu pendant le slide */
    display: flex;
    flex-direction: column;
}

/* Le contenu intérieur porte l'animation transform */
.studio-meta-col-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    background: var(--bg, #fff);
    height: 100%;
    transform: translateX(0);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    max-height: 100vh;
}

/* Drawer fermé : slide vers la droite */
.studio-meta-col.studio-meta-ferme .studio-meta-col-inner {
    transform: translateX(105%);
}

/* En-tête du drawer */
.studio-meta-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--bg, #fff);
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}

.studio-meta-entete h3 {
    font-size: 11px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.studio-meta-entete-droite {
    display: flex;
    align-items: center;
    gap: 8px;
}

.studio-meta-statut {
    font-size: 11px;
    color: var(--success, oklch(55% 0.18 145));
}

/* Bouton ✕ dans l'en-tête du drawer */
.studio-meta-fermer-btn {
    background: none;
    border: 1px solid transparent;
    padding: 2px 7px;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    border-radius: 4px;
    line-height: 1.4;
}
.studio-meta-fermer-btn:hover { background: var(--line); border-color: var(--line); }

.studio-meta-corps {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
}

.studio-meta-section {
    margin-bottom: 16px;
}

.studio-meta-titre-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--muted);
    text-transform: uppercase;
    display: block;
    margin: 0 0 8px;
}

.studio-action-btn kbd {
    font-size: 9px;
    padding: 1px 4px;
    background: oklch(93% 0 0);
    border-radius: 3px;
    border: 1px solid oklch(80% 0 0);
    font-family: var(--mono);
    color: var(--muted);
    margin-left: 3px;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   §17 — C6 : Atlas (/atlas)
   ───────────────────────────────────────────────────────────────────────────── */

.nav-item-badge-sous {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-badge-sous {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    padding: 0 4px;
    border-radius: 8px;
    line-height: 1.4;
    pointer-events: none;
}

.atlas-stat-bande {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

@media (max-width: 800px) {
    .atlas-stat-bande { grid-template-columns: repeat(2, 1fr); }
}

.atlas-stat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.atlas-stat-corriges { background: oklch(96% 0.04 145); border-color: oklch(82% 0.08 145); }
.atlas-stat-incomplets { background: oklch(97% 0.04 70); border-color: oklch(85% 0.08 70); }

.atlas-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--muted);
    text-transform: uppercase;
}

.atlas-stat-nombre {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fg);
    font-family: var(--serif);
}

.atlas-stat-meta {
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
}

.atlas-stat-meta[href] { color: var(--accent); }
.atlas-stat-meta[href]:hover { text-decoration: underline; }

.atlas-corps {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .atlas-corps { grid-template-columns: 1fr; }
}

.atlas-section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--surface);
    margin-bottom: 14px;
}

.atlas-droite { display: flex; flex-direction: column; }

.atlas-section-entete { margin-bottom: 10px; }
.atlas-section-entete h2 { font-size: 14px; font-weight: 700; margin: 0 0 2px; }
.atlas-section-entete .hint { font-size: 11px; color: var(--muted); margin: 0; }

.atlas-heatmap-scroll { overflow-x: auto; }

.atlas-heatmap {
    border-collapse: collapse;
    font-size: 11px;
    width: 100%;
}

.atlas-heatmap th,
.atlas-heatmap td {
    padding: 3px 6px;
    border: 1px solid oklch(92% 0 0);
    text-align: center;
    white-space: nowrap;
}

.atlas-heatmap-libelle {
    text-align: left !important;
    max-width: 190px;
    padding-left: 6px !important;
}

.atlas-heatmap-pastille {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.atlas-heatmap-libelle a {
    color: var(--fg);
    text-decoration: none;
    font-size: 11px;
    vertical-align: middle;
}
.atlas-heatmap-libelle a:hover { color: var(--accent); }

.atlas-heatmap-annee {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    background: oklch(98% 0 0);
}

.atlas-heatmap-cell { color: oklch(75% 0 0); font-size: 11px; }

.atlas-heatmap-cell.cell-active {
    background: oklch(90% 0.05 240);
    color: oklch(38% 0.18 240);
    font-weight: 600;
}

.atlas-heatmap-cell.cell-active a {
    color: inherit;
    text-decoration: none;
}

.atlas-heatmap-total,
.atlas-heatmap-total-cell {
    background: oklch(86% 0.06 240) !important;
    color: oklch(35% 0.18 240) !important;
    font-weight: 700;
}

.atlas-heatmap-total-cell.cell-sigma { background: oklch(82% 0.08 240) !important; }

.atlas-recycler-liste { display: flex; flex-direction: column; gap: 3px; }

.atlas-recycler-ligne {
    display: grid;
    grid-template-columns: 72px 1fr 44px;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}
.atlas-recycler-ligne:last-child { border-bottom: none; }

.atlas-recycler-id {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.atlas-recycler-id:hover { text-decoration: underline; }

.atlas-recycler-titre {
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atlas-recycler-annee {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-align: right;
}