/* =============================================================================
   style.css — Feuille de style principale de l'application Médiathèque
   =============================================================================

   Organisation du fichier :
     1.  Reset & box-sizing
     2.  Variables CSS (palette, rayons, couleurs sémantiques)
     3.  Mode sombre automatique (prefers-color-scheme: dark)
     4.  Styles de base (body, liens, code inline)
     5.  Barre de navigation supérieure (topbar)
     6.  Conteneur principal de page (wrap)
     7.  Messages flash (succès / erreur)
     8.  Boutons
     9.  Champs de formulaire (inputs, select, textarea)
    10.  Barre de statistiques
    11.  Barre d'outils (recherche, vue grille/liste, import/export)
    12.  État vide (aucune référence trouvée)
    13.  Vue grille (cartes)
    14.  Vue liste (tableau)
    15.  Badges et pastilles de statut
    16.  Page Détail d'une référence
    17.  Formulaires d'ajout / modification
    18.  Page Paramétrage (config)
    19.  Page Import CSV
    20.  Responsive (≤ 900px, ≤ 640px)
    21.  Sections config : champs fixes
    22.  Ligne en cours d'édition (config)
    23.  Valeur vide dans la fiche détail
    24.  Panneau principal config

   ============================================================================= */


/* =============================================================================
   1. RESET & BOX-SIZING
   =============================================================================
   On réinitialise margin, padding et box-sizing sur tous les éléments.
   "border-box" inclut padding et border dans la largeur/hauteur déclarée,
   ce qui simplifie tous les calculs de mise en page. */

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


/* =============================================================================
   2. VARIABLES CSS — THÈME CLAIR (défaut)
   =============================================================================
   Toutes les valeurs de couleur et de géométrie sont centralisées ici.
   Modifier ces variables suffit à changer l'apparence globale de l'app.

   ── Couleurs de fond (bg) ─────────────────────────────────────────────────
   --bg    : fond général de la page (gris chaud très clair)
   --bg1   : fond des cartes, panneaux, tableaux (blanc pur)
   --bg2   : fond alternatif légèrement grisé (survols, en-têtes de sections)
   --bg3   : fond encore plus sombre, utilisé pour le focus des inputs

   ── Couleurs de texte (tx) ────────────────────────────────────────────────
   --tx    : texte principal (quasi-noir chaud)
   --tx2   : texte secondaire (gris moyen — libellés, métadonnées)
   --tx3   : texte tertiaire (gris clair — valeurs vides, hints)

   ── Bordures (b) ──────────────────────────────────────────────────────────
   --b1    : bordure très subtile (séparations internes de tableaux)
   --b2    : bordure standard (contours de cartes, inputs)
   --b3    : bordure marquée (survols actifs, focus)
   Utiliser rgba permet aux bordures de s'adapter au fond sans s'écraser.

   ── Rayons d'arrondi (r) ──────────────────────────────────────────────────
   --r1 : 6px  — petits éléments (boutons delete, chips)
   --r2 : 8px  — éléments standards (boutons, inputs, onglets)
   --r3 : 12px — grands conteneurs (cartes, panneaux, tables)

   ── Couleurs sémantiques des badges de type ───────────────────────────────
   --ib / --it : fond / texte badge Livre      (bleu clair / bleu foncé)
   --ob / --ot : fond / texte badge Document   (vert clair / vert foncé)
   --wb / --wt : fond / texte badge Film       (jaune clair / brun)
   --pb / --pt : fond / texte badge Série TV   (violet clair / violet foncé)
   --rb / --rt : fond / texte badge Musique    (rose clair / rose foncé)
   --cb / --ct : fond / texte badge Concert    (teal clair / teal foncé)

   ── Couleurs fonctionnelles ───────────────────────────────────────────────
   --danger : rouge pour les boutons et messages d'erreur
   --stars  : ocre doré pour les étoiles de notation

   ── Couleurs de statut (points colorés) ──────────────────────────────────
   --dlu    : vert  — statut "Lu/Vu"
   --demp   : ambre — statut "Emprunté"
   --ddis   : gris  — statut "Disponible"

   ── Hauteur de la topbar ──────────────────────────────────────────────────
   --th : 68px — hauteur fixe de la barre de navigation (utilisée aussi
          pour le calcul du sticky positionnement de certains éléments)
   ============================================================================= */

:root{
  --bg:#f5f4f0;--bg1:#ffffff;--bg2:#f1efe8;--bg3:#e8e6df;
  --tx:#1a1a18;--tx2:#5f5e5a;--tx3:#888780;
  /* ── Thème Immersif (det--I) : adapté palette claire ── */
  --det-I-tx: var(--tx);
  --det-I-tx2: var(--tx2);
  --det-I-tx3: var(--tx3);
  --det-I-glass-bg: rgba(0,0,0,.07);
  --det-I-border: var(--b2);
  --det-I-cell-bg: var(--bg2);
  --det-I-btn-bg: var(--bg1);
  --det-I-btn-tx: var(--tx);
  --b1:rgba(0,0,0,.09);--b2:rgba(0,0,0,.18);--b3:rgba(0,0,0,.30);
  --r1:6px;--r2:8px;--r3:12px;
  --ib:#E6F1FB;--it:#0C447C;
  --bbd-b:#FAECE7;--bbd-t:#993C1D;
  --ob:#E1F5EE;--ot:#085041;
  --wb:#FAEEDA;--wt:#633806;
  --pb:#EEEDFE;--pt:#3C3489;
  --rb:#FBEAF0;--rt:#72243E;
  --cb:#E0F5F5;--ct:#0F6E6E;
  --danger:#E24B4A;--stars:#BA7517;
  --dlu:#1D9E75;--demp:#BA7517;--ddis:#888780;
  --outer-bg:#c8c4bc;
  --th:68px;
  /* ── Typographie — contrôlée par palette ── */
  --fs-base:14px;
  --fs-ui:13px;
  --fs-sm:12px;
  --fs-xs:11px;
  --fs-xxs:10px;
  --fs-title:26px;
  --fs-card:13px;
  --fs-h1:22px;
  --lh-base:1.55;
  --lh-text:1.70;
}


/* =============================================================================
   3. MODE SOMBRE AUTOMATIQUE
   =============================================================================
   Détecté via la préférence système de l'utilisateur (prefers-color-scheme).
   On ne redéfinit que les variables de couleur — toutes les règles CSS qui
   utilisent ces variables s'adaptent automatiquement, sans aucun code JS.

   Les couleurs de fond sont inversées (foncé), les textes éclaircis.
   Les couleurs sémantiques (badges, statuts) utilisent leurs variantes
   sombres : fond foncé de la couleur, texte clair de la même teinte.
   ============================================================================= */

@media(prefers-color-scheme:dark){:root{
  --bg:#1a1a18;--bg1:#242422;--bg2:#2c2c2a;--bg3:#363633;
  --tx:#e8e6df;--tx2:#888780;--tx3:#5f5e5a;
  --b1:rgba(255,255,255,.07);--b2:rgba(255,255,255,.14);--b3:rgba(255,255,255,.26);
  --ib:#0C447C;--it:#B5D4F4;--ob:#085041;--ot:#9FE1CB;
  --bbd-b:#712B13;--bbd-t:#F5C4B3;
  --wb:#633806;--wt:#FAC775;--pb:#3C3489;--pt:#CECBF6;
  --rb:#4B1528;--rt:#F4C0D1;--cb:#04342C;--ct:#9FE1CB;
  /* Thème Immersif : fond sombre → glass blanc */
  --det-I-tx: #fff;
  --det-I-tx2: rgba(255,255,255,.65);
  --det-I-tx3: rgba(255,255,255,.4);
  --det-I-glass-bg: rgba(255,255,255,.1);
  --det-I-border: rgba(255,255,255,.13);
  --det-I-cell-bg: rgba(255,255,255,.08);
  --det-I-btn-bg: #fff;
  --det-I-btn-tx: #1a1a18;
}}


/* =============================================================================
   4. STYLES DE BASE
   =============================================================================
   body       : police système native (plus rapide à charger, look natif),
                fond et couleur de texte depuis les variables, interligne 1.55
                pour une bonne lisibilité, hauteur minimum pleine fenêtre.
   a          : les liens héritent de la couleur du parent (pas de bleu par défaut)
                et n'ont pas de soulignement (stylés individuellement là où nécessaire).
   code       : chaîne monospace dans un rectangle gris arrondi — utilisé pour
                afficher les clés internes des champs dans la page config.
   ============================================================================= */

body{font-family:var(--font-main,system-ui,-apple-system,"Segoe UI",sans-serif);background:var(--bg);color:var(--tx);font-size:var(--fs-base);line-height:var(--lh-base);min-height:100vh}
a{color:inherit;text-decoration:none}
code{font-family:monospace;font-size:.85em;background:var(--bg2);padding:1px 5px;border-radius:4px}
/* Dans les zones de config (DnD, grilles de champs, hints), la police hérite
   du contexte pour rester cohérente avec la typographie globale de l'app */
.dnd-label code,.cfl-key code,.fhint code,.cfgsecdesc code,.addform code{font-family:inherit}


/* =============================================================================
   5. BARRE DE NAVIGATION SUPÉRIEURE (topbar)
   =============================================================================
   La topbar est "sticky" : elle reste collée en haut de l'écran même lors
   du défilement (z-index:100 pour passer au-dessus du contenu).
   Sa hauteur fixe est définie par --th (56px).

   .topbar         : la barre elle-même (fond blanc, bordure basse discrète)
   .topbar-inner   : alignement horizontal par flexbox avec espacement latéral
   .app-logo-img   : image du logo personnalisé dans la barre de nav —
                     hauteur fixe 28px, object-fit:contain pour ne pas déformer
   .logo           : lien vers l'accueil, contient le logo + titre de l'app.
                     flex-shrink:0 empêche le titre de se réduire quand les
                     onglets sont nombreux.
   .tabs           : zone des onglets de filtre par type de média.
                     flex:1 lui permet d'occuper tout l'espace restant.
                     overflow-x:auto + scrollbar masquée = défilement horizontal
                     discret sur mobile si les onglets débordent.
   .tab            : un onglet individuel. Fond transparent par défaut,
                     arrondi, texte secondaire, transition douce au survol.
   .tab.active     : onglet sélectionné — fond légèrement grisé, texte plein,
                     bordure visible, graisse 500.
   .tab .count     : compteur du nombre de références dans l'onglet,
                     affiché en plus petit et semi-transparent.
   .btn-icon       : bouton icône carré (ex: ⚙ Paramétrage) — taille 34×34px,
                     arrondi, sans bordure au repos, s'encadre au survol/actif.
   ============================================================================= */

.topbar{position:sticky;top:0;z-index:100;height:var(--th);background:var(--bg1);border-bottom:.5px solid var(--b2)}
.topbar-inner{padding:0 1.5rem;height:100%;display:flex;align-items:center;gap:1rem;min-width:0;max-width:100%}
.app-logo-img{height:28px;width:auto;object-fit:contain;border-radius:4px;vertical-align:middle;margin-right:2px}
.logo{font-size:16px;font-weight:500;white-space:nowrap;flex-shrink:0}
.tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r2);border:.5px solid transparent;font-size:var(--fs-ui);color:var(--tx2);white-space:nowrap;transition:background .12s}
.tab:hover{background:var(--bg2);color:var(--tx)}
.tab.active{background:var(--bg2);color:var(--tx);border-color:var(--b2);font-weight:500}
.tab .count{opacity:.5;font-size:var(--fs-xs)}
.btn-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;font-size:18px;border-radius:var(--r2);border:.5px solid transparent;flex-shrink:0;transition:background .12s}
.btn-icon:hover,.btn-icon.active{background:var(--bg2);border-color:var(--b2)}


/* =============================================================================
   6. CONTENEUR PRINCIPAL DE PAGE (wrap)
   =============================================================================
   Enveloppe tout le contenu sous la topbar.
   width:100% + padding latéral 1.5rem : le contenu occupe toute la largeur
   disponible avec des marges respirantes sur les côtés.
   ============================================================================= */

.wrap{width:100%;padding:1.25rem 1.5rem}


/* =============================================================================
   7. MESSAGES FLASH
   =============================================================================
   Bandeaux de notification affichés une seule fois après une action POST
   (ajout, modification, suppression, import…).

   .flash          : style commun — padding, arrondi, petite police, marge basse
   .flash-success  : bordure gauche verte (--dlu), fond bg2, texte tx
   .flash-error    : bordure gauche rouge (--danger), fond bg2, texte danger
   .flash-warning  : bordure gauche ambre (--demp), fond bg2, texte tx

   Utilise --bg2/--tx (toujours definis dans toutes les palettes) au lieu de
   --ob/--ot (variables de badge BD, absentes des palettes sombres custom).
   ============================================================================= */

.flash{padding:.65rem 1rem;border-radius:var(--r2);font-size:var(--fs-ui);margin-bottom:2.5rem;border:.5px solid var(--b2);background:var(--bg2);color:var(--tx);border-left-width:3px}
.flash-success{border-left-color:var(--dlu)}
.flash-error{border-left-color:var(--danger);color:var(--danger)}
.flash-warning{border-left-color:var(--demp)}


/* =============================================================================
   8. BOUTONS
   =============================================================================
   .btn       : bouton standard — fond blanc, bordure légère, texte 13px,
                flex pour centrer contenu + icône éventuelle, transition douce.
   .btn:hover : fond grisé, bordure plus marquée au survol.

   Variantes de .btn :
   .btn.pri   : bouton "primaire" (action principale, ex: Enregistrer)
                même visuel que le survol, mais permanent + graisse 500
   .btn.act   : identique à .pri, alias sémantique pour "action active"
   .btn.dan   : bouton destructeur (ex: Supprimer) — texte et bordure rouges
   .btn.fw    : full-width, le bouton occupe 100% de la largeur de son conteneur
   .btn.lg    : grande taille (padding et font-size augmentés)
   .btn.sm    : petite taille (moins de padding, font-size 11px — boutons inline)

   .btn-del   : bouton de suppression inline dans les tableaux (✕) —
                style distinct du .btn : fond transparent, bordure et texte rouges,
                très compact. Fond rouge clair au survol.
   ============================================================================= */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 13px;border-radius:var(--r2);border:.5px solid var(--b2);background:var(--bg1);color:var(--tx);font-size:var(--fs-ui);font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .12s;text-decoration:none}
.btn:hover{background:var(--bg2);border-color:var(--b3)}
.btn.pri{background:var(--bg2);border-color:var(--b3);font-weight:500}
.btn.act{background:var(--bg2);border-color:var(--b3);font-weight:500}
.btn.dan{color:var(--danger);border-color:var(--danger)}
.btn.fw{width:100%}
.btn.lg{padding:9px 20px;font-size:var(--fs-base)}
.btn.sm{padding:3px 8px;font-size:var(--fs-xs)}
.btn-del{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:var(--r1);border:.5px solid var(--danger);background:transparent;color:var(--danger);font-size:var(--fs-xs);font-family:inherit;cursor:pointer;transition:background .12s}
.btn-del:hover{background:#FCEBEB}


/* =============================================================================
   9. CHAMPS DE FORMULAIRE
   =============================================================================
   Tous les inputs, selects et textareas partagent le même style de base :
   pleine largeur, police héritée, 13px, padding confortable, bordure fine,
   fond blanc, transition sur la bordure.

   Au focus : bordure plus sombre + halo coloré (box-shadow) pour
   l'accessibilité et le retour visuel.

   textarea         : redimensionnable verticalement uniquement (pas horizontalement,
                      ce qui casserait la mise en page), hauteur minimale 80px.
   input[type=file] : padding ajusté, curseur pointeur.
   input[type=checkbox] : largeur auto (pas 100%), curseur pointeur,
                           petite marge droite pour l'espacement avec le label.
   .bool-row        : ligne contenant un checkbox + son label — alignement
                      vertical centré avec un peu de padding.
   ============================================================================= */

input[type=text],input[type=number],input[type=date],input[type=file],select,textarea{width:100%;font-family:inherit;font-size:var(--fs-ui);padding:7px 10px;border:.5px solid var(--b2);border-radius:var(--r2);background:var(--bg1);color:var(--tx);outline:none;transition:border-color .12s}
input:focus,select:focus,textarea:focus{border-color:var(--b3);box-shadow:0 0 0 3px var(--bg3)}
textarea{resize:vertical;min-height:80px}
input[type=file]{padding:5px 8px;cursor:pointer}
input[type=checkbox]{width:auto;cursor:pointer;margin-right:5px}
.bool-row{display:flex;align-items:center;padding:4px 0}


/* =============================================================================
   10. BARRE DE STATISTIQUES
   =============================================================================
   Affichée en haut de la liste, elle présente les compteurs globaux
   (total, lus/vus, empruntés) et le compte par type de média.

   .statsbar  : conteneur flex avec retour à la ligne automatique et espacement.
   .stat      : une case de statistique — fond blanc, bordure fine, arrondie,
                flex colonne (valeur au-dessus, libellé en-dessous).
                flex:1 + min-width:80px : répartition équitable en ligne,
                passage en colonnes multiples si l'espace manque.
   .sv        : la valeur numérique — grand (22px), gras, interligne serré.
   .sl        : le libellé sous la valeur — très petit (11px), gris, majuscules
                espacées (style "caption").
   ============================================================================= */

.statsbar{display:flex;gap:4px;flex-wrap:nowrap;margin-bottom:1rem;overflow-x:auto;scrollbar-width:none}
.statsbar::-webkit-scrollbar{display:none}
.stat{background:var(--bg1);border:.5px solid var(--b1);border-radius:var(--r2);padding:.3rem .65rem;display:flex;flex-direction:row;align-items:baseline;gap:.35rem;white-space:nowrap;flex-shrink:0}
.sv{font-size:var(--fs-ui);font-weight:600;line-height:1;color:var(--tx)}
.sl{font-size:var(--fs-xs);color:var(--tx3);text-transform:uppercase;letter-spacing:.04em}


/* =============================================================================
   11. BARRE D'OUTILS (toolbar)
   =============================================================================
   Barre horizontale au-dessus de la liste, contenant la recherche,
   les boutons de bascule grille/liste, et les actions (import/export).

   .toolbar       : flex avec retour à la ligne, espacement 10px.
   .sform         : formulaire de recherche — flex:1 pour occuper l'espace restant,
                    min-width:200px pour ne pas trop se rétrécir sur mobile.
   .sform input   : l'input occupe tout l'espace disponible dans .sform.
   .tright        : groupe de boutons à droite (vue + actions).
   .vtoggle       : groupe de boutons vue (grille / liste) collés bord à bord.
                    Les coins internes sont aplatis, seuls les coins extérieurs
                    sont arrondis (premier et dernier enfant).
   .rinfo         : texte "N références affichées" — petit, gris, sous la toolbar.
   ============================================================================= */

.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:1rem;flex-wrap:wrap}
.sform{display:flex;gap:8px;flex:1;min-width:200px}
.sform input{flex:1}
.tright{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vtoggle{display:flex}
.vtoggle .btn{border-radius:0}
.vtoggle .btn:first-child{border-radius:var(--r2) 0 0 var(--r2)}
.vtoggle .btn:last-child{border-radius:0 var(--r2) var(--r2) 0;margin-left:-.5px}
.rinfo{font-size:var(--fs-sm);color:var(--tx2);margin-bottom:.75rem}


/* =============================================================================
   12. ÉTAT VIDE
   =============================================================================
   Affiché quand aucune référence ne correspond aux filtres actifs,
   ou quand la médiathèque est vide.

   .empty  : centré, beaucoup de padding vertical, texte gris.
   .eico   : l'emoji/icône illustratif — très grand (48px), marge basse.
   ============================================================================= */

.empty{text-align:center;padding:5rem 1rem;color:var(--tx2)}
.eico{font-size:48px;margin-bottom:1rem}


/* =============================================================================
   13. VUE GRILLE (cartes)
   =============================================================================
   Disposition en grille responsive : les colonnes s'ajustent automatiquement
   entre 155px et 1fr selon l'espace disponible (auto-fill + minmax).

   .grid      : grille CSS avec colonnes auto-adaptées, gap 12px.
   .card      : une carte de référence — flex colonne, fond blanc, bordure fine,
                arrondi large (r3), overflow:hidden pour masquer les coins de l'image.
                Légère montée + assombrissement de la bordure au survol.
   .ccover    : zone de couverture (image ou placeholder) — hauteur fixe 120px,
                centrage flex, overflow:hidden pour cadrer l'image.
   .ccover img: l'image remplit tout le cadre en mode "cover" (recadrée si nécessaire).
   .noimg     : placeholder emoji quand il n'y a pas d'image — remplit le cadre,
                emoji centré en grand (32px).
   .cbody     : corps de la carte (sous l'image) — padding, flex colonne, gap 4px.
   .ctitle    : titre de la référence — 13px, gras, tronqué avec "…" si trop long.
   .cmeta     : métadonnée sous le titre (auteur, année) — 11px, gris, tronqué.
   .cfoot     : pied de carte — flex avec retour, contient badge et étoiles.
   .cstatus   : ligne statut (pastille colorée + libellé) — 11px, gris.
   ============================================================================= */

:root{--card-min-width:155px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min-width),1fr));gap:12px}

/* ── Mode Masonry ──────────────────────────────────────────────────────── */
.grid--masonry{display:block;position:relative}
.grid--masonry .card-wrap{position:absolute;box-sizing:border-box}
.grid--masonry .card-wrap .card{display:block;height:auto}
.grid--masonry .ccover--masonry{aspect-ratio:unset;height:auto}
.grid--masonry .ccover--masonry img{width:100%;height:auto;object-fit:unset;display:block}
.grid--masonry .ccover--masonry .noimg{aspect-ratio:2/3;width:100%}
.grid--shadow .card{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.grid--shadow .card:hover{box-shadow:0 4px 14px rgba(0,0,0,.18)}
.card{display:flex;flex-direction:column;background:var(--bg1);border:.5px solid var(--b1);border-radius:0;overflow:hidden;color:var(--tx);transition:border-color .15s,transform .1s}
.card:hover{border-color:var(--b3);transform:translateY(-1px)}
.ccover{width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:var(--bg2)}
.ccover img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px}
.cbody{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:4px}
.ctitle{font-size:var(--fs-card);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta{font-size:var(--fs-xs);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfoot{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cstatus{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--tx2);margin-top:2px}


/* =============================================================================
   14. VUE LISTE (tableau)
   =============================================================================
   Le tableau est enveloppé dans .listwrap pour permettre un défilement
   horizontal si l'écran est trop étroit (sans casser la mise en page globale).

   .listwrap          : conteneur pleine largeur avec overflow-x:auto.
   .ltable            : tableau pleine largeur, bordures fusionnées (collapse),
                        fond blanc, coins arrondis, min-width 700px pour
                        conserver la lisibilité avant le défilement horizontal.
   .ltable thead tr   : fond légèrement grisé pour l'en-tête.
   .ltable th         : cellule d'en-tête — petite, majuscules, gris, bordure basse.
   .ltable td         : cellule de données — padding confortable, bordure basse fine,
                        alignement vertical centré.
   tbody tr:last-child: supprime la bordure basse de la dernière ligne.
   tbody tr           : curseur pointeur (toute la ligne est cliquable),
                        transition douce sur la couleur de fond.
   tbody tr:hover td  : fond grisé sur toute la ligne au survol.
   .ttitre            : colonne titre — gras, largeur max 260px, tronqué.
   .thumb             : miniature image dans le tableau — 32×42px, recadrée.
   .tph               : placeholder image dans le tableau — même taille que .thumb,
                        centrage flex pour l'emoji.
   ============================================================================= */

.listwrap{width:100%;overflow-x:auto}
.ltable{width:100%;border-collapse:collapse;background:var(--bg1);border-radius:var(--r3);overflow:hidden;border:.5px solid var(--b1);font-size:var(--fs-ui);min-width:700px}
.ltable thead tr{background:var(--bg2)}
.ltable th{padding:10px 12px;text-align:left;font-size:var(--fs-xs);font-weight:500;color:var(--tx2);border-bottom:.5px solid var(--b2);white-space:nowrap}
.ltable td{padding:8px 12px;border-bottom:.5px solid var(--b1);vertical-align:middle}
.ltable tbody tr:last-child td{border-bottom:none}
.ltable tbody tr{cursor:pointer;transition:background .1s}
.ltable tbody tr:hover td{background:var(--bg2)}
.ttitre{font-weight:500;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thumb{width:32px;height:42px;border-radius:0;object-fit:cover;display:block}
.tph{width:32px;height:42px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:16px}


/* =============================================================================
   15. BADGES ET PASTILLES DE STATUT
   =============================================================================
   .badge    : badge de type de média — arrondi pill (border-radius:20px),
               petit texte gras en majuscules, padding horizontal généreux.

   Couleurs des badges par type (fond clair / texte foncé de même teinte) :
   .bl → Livre      (bleu)
   .bd → Document   (vert)
   .bf → Film       (ambré/jaune)
   .bs → Série TV   (violet)

   .sdot     : pastille circulaire de statut (7×7px, ronde).
               Utilisée dans les cartes et le tableau.
   .dlu      : vert  (Lu/Vu)
   .demp     : ambré (Emprunté)
   .ddis     : gris  (Disponible)

   .stars    : couleur or/ocre pour les étoiles de notation (★).
   .chip     : étiquette (tag) — fond grisé, bordure fine, arrondie pill,
               11px — utilisée pour afficher les tags d'une référence.
   ============================================================================= */

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:var(--fs-xxs);font-weight:500;white-space:nowrap}
.bl{background:var(--ib);color:var(--it)}
.bbd{background:var(--bbd-b);color:var(--bbd-t)}
.bd{background:var(--ob);color:var(--ot)}
.bf{background:var(--wb);color:var(--wt)}
.bs{background:var(--pb);color:var(--pt)}
.bm{background:var(--rb);color:var(--rt)}
.bco{background:var(--cb);color:var(--ct)}
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px;flex-shrink:0}
.dlu{background:var(--dlu)}.demp{background:var(--demp)}.ddis{background:var(--ddis)}
.stars{color:var(--stars);font-size:var(--fs-sm)}
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:var(--fs-xs);background:var(--bg2);border:.5px solid var(--b1);color:var(--tx2)}


/* =============================================================================
   16. PAGE DÉTAIL D'UNE RÉFÉRENCE
   =============================================================================
   Mise en page en deux colonnes : colonne gauche (image + boutons) et
   colonne principale (toutes les informations).

   .det        : grille 2 colonnes : 220px fixe à gauche + 1fr à droite,
                 gap 2rem, alignement en haut (align-items:start).
   .dcc        : colonne gauche (Cover + Controls) — flex colonne avec gap.
   .dci        : image de couverture — pleine largeur, ratio 2:3 (portrait),
                 object-fit:cover pour remplir sans déformer, arrondie, bordurée.
   .dcph       : placeholder couverture (quand pas d'image) — même dimensions
                 que .dci, fond coloré, emoji centré en grand (64px).
   .dca        : zone des boutons d'action (Éditer, Retour…) — flex colonne.
   .dmain      : colonne principale — min-width:0 pour éviter les débordements
                 dans une grille CSS (comportement de flex/grid).
   .dhead      : en-tête de la fiche — marge basse 1.5rem.
   .dtit       : titre de la référence — grand (26px), gras léger (500).
   .dsub       : sous-titre (auteur) — 15px, gris.
   .dfgrid     : grille des champs fixes et personnalisés — colonnes auto
                 de min 175px, séparées par des lignes d'1px (technique :
                 gap:1px + background:var(--b1) sur le conteneur, chaque
                 cellule .df ayant son propre fond blanc — l'interstice est la grille).
   .df         : une cellule de champ — padding, flex colonne label+valeur.
   .dfl        : libellé du champ — 11px, gris, majuscules espacées.
   .dfv        : valeur du champ — 14px, gras (500).
   .dsec       : section de la fiche (description, tags…) — marge basse.
   .dstit      : titre de section — style "caption" (11px, majuscules, bordure basse).
   .ddesc      : bloc de description — 14px, interligne large 1.7, gris.
   .dtags      : zone des tags — flex avec retour, gap 6px.
   .ddel       : zone de suppression — séparée en haut par une bordure, marge haute.
   ============================================================================= */

.det{display:grid;grid-template-columns:220px 1fr;gap:2rem;align-items:start}
.dcc{display:flex;flex-direction:column;gap:12px}
.dci{width:100%;height:auto;object-fit:contain;border-radius:0;border:.5px solid var(--b1);display:block}
.dcph{width:100%;aspect-ratio:2/3;border-radius:0;display:flex;align-items:center;justify-content:center;font-size:64px}
.dca{display:flex;flex-direction:column;gap:8px}
.dmain{min-width:0}
.dhead{margin-bottom:1.5rem}
.dtit{font-size:var(--fs-title);font-weight:500;line-height:1.25;margin:.4rem 0 .25rem}
.dsub{font-size:var(--fs-sm);color:var(--tx2);margin-bottom:.75rem}
.dfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:1px;border:.5px solid var(--b1);border-radius:var(--r3);overflow:hidden;margin-bottom:1.5rem;background:var(--b1)}
.df{background:var(--bg1);padding:.75rem 1rem;display:flex;flex-direction:column;gap:3px}
.dfl{font-size:var(--fs-xs);color:var(--tx2);text-transform:uppercase;letter-spacing:.05em}
.dfv{font-size:var(--fs-base);font-weight:400;display:flex;align-items:center;gap:4px}
.dsec{margin-bottom:1.5rem}
.dstit{font-size:var(--fs-xs);font-weight:500;color:var(--tx2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:.5px solid var(--b1)}
.ddesc{font-size:var(--fs-base);line-height:var(--lh-text);color:var(--tx2);text-align:justify;hyphens:auto}
.dtags{display:flex;gap:6px;flex-wrap:wrap}
.ddel{padding-top:1.5rem;border-top:.5px solid var(--b1)}


/* =============================================================================
   17. FORMULAIRES D'AJOUT / MODIFICATION
   =============================================================================
   Mise en page identique pour les pages "Ajouter" et "Modifier".
   Deux colonnes : image de prévisualisation à gauche, champs à droite.

   .fpage      : conteneur pleine largeur.
   .fhdr       : en-tête du formulaire — titre à gauche, boutons à droite
                 (space-between), marge basse.
   .fhdr h1    : titre (20px, 500).
   .flayout    : grille 2 colonnes : 200px fixe + 1fr.
   .fcc        : colonne gauche (Cover + Controls) — sticky sous la topbar
                 (top = hauteur topbar + 1rem) pour rester visible au scroll.
   .fcprev     : zone de prévisualisation de l'image — ratio 2:3, arrondie,
                 fond gris, overflow:hidden pour cadrer l'image.
   .fcprev img : l'image de préview remplit tout le cadre.
   .fcph       : placeholder dans la zone de preview (pas d'image choisie) —
                 emoji en grand (52px), centré.
   .fcol       : colonne de droite (les champs) — min-width:0 pour la grille.
   .fsec       : section de champs (ex: "Informations générales", "Champs custom") —
                 fond blanc, bordure, arrondi large, padding, marge basse.
   .fstit      : titre de section des champs — même style que .dstit (caption).
   .frow       : une ligne de champ (label + input) — marge basse 12px.
   .frow label : libellé du champ — 12px, gris, affiché en bloc (au-dessus de l'input).
   .fc2        : disposition 2 colonnes dans un .fsec (ex: Année / Genre côte à côte).
   .fc3        : disposition 3 colonnes (ex: Langue / Statut / Note).
   .factions   : zone de boutons d'action en bas — alignés à droite.
   ============================================================================= */

.fpage{width:100%}
.fhdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.fhdr h1{font-size:20px;font-weight:500}
.flayout{display:grid;grid-template-columns:200px 1fr;gap:2rem;align-items:start}
.fcc{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--th) + 1rem)}
.fcprev{width:100%;aspect-ratio:2/3;border-radius:0;overflow:hidden;border:.5px solid var(--b1);background:var(--bg2);display:flex;align-items:center;justify-content:center}
.fcprev--square{aspect-ratio:1/1}
.fcprev--has-img{aspect-ratio:unset}
.fcprev img{width:100%;height:100%;object-fit:cover;display:block}
.fcprev--has-img img{height:auto;object-fit:unset}
.fcph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px}
.fcol{min-width:0}
.fsec{background:var(--bg1);border:.5px solid var(--b1);border-radius:var(--r3);padding:1.25rem;margin-bottom:1.25rem}
.fstit{font-size:var(--fs-xs);font-weight:500;color:var(--tx2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:.5px solid var(--b1)}
.frow{margin-bottom:12px}
.frow:last-child{margin-bottom:0}
.frow>label:first-child{display:block;font-size:var(--fs-sm);color:var(--tx2);margin-bottom:4px}
.fc2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fc3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.factions{display:flex;justify-content:flex-end;gap:10px;margin-top:.5rem}


/* =============================================================================
   18. PAGE PARAMÉTRAGE (config)
   =============================================================================
   Page en deux zones : panneau principal (champs) + colonne d'aide à droite.

   .cfghdr         : en-tête de la page (titre + description).
   .cfghdr h1      : titre (20px, 500).
   .cfgsub         : description sous le titre (13px, gris).
   .cfgtabs        : rangée d'onglets de navigation par type de média —
                     flex avec retour, bordure basse séparatrice, marge basse.
   .cfgtab         : un onglet — fond blanc, bordure, arrondi, gris par défaut.
   .cfgtab:hover   : fond grisé, texte plein.
   .cfgtab.active  : fond grisé permanent, texte plein, bordure marquée, gras.
   .cfgpanel       : grille 2 colonnes : 1fr (contenu) + 260px (aide latérale).
   .cfgfields      : conteneur des champs dans le panneau — fond blanc, bordure,
                     arrondi, overflow:hidden (pour les coins du tableau interne).
   .cfgtable       : tableau listant les champs personnalisés — pleine largeur,
                     bordures fusionnées.
   .cfgtable th    : en-tête du tableau de champs — fond grisé, petit, gris.
   .cfgtable td    : cellule — padding confortable, bordure basse.
   .cfgempty       : message "aucun champ" centré et gris.
   .addform        : zone d'ajout d'un nouveau champ — fond légèrement grisé,
                     bordure supérieure, padding.
   .addform h3     : titre de la zone d'ajout (13px, 500).
   .addrow         : rangée d'inputs inline pour l'ajout/édition de champ —
                     flex avec retour, alignement centré.
   .addrow input   : l'input texte s'étend (flex:1), avec min-width.
   .addrow select  : largeur fixe 135px pour le sélecteur de type.
   .fhint          : texte d'aide sous un formulaire — 11px, gris clair.
   .cfginfo        : panneau d'aide latéral droit — fond blanc, bordure, arrondi,
                     padding, texte 13px gris, interligne 1.65.
   .cfginfo h3     : titre dans le panneau d'aide (texte plein, gras).
   .ftlist         : liste des types de champs dans le panneau d'aide —
                     flex colonne, gap 6px, sans puces.

   Badges de type de champ personnalisé (dans le tableau config) :
   .ftb   : base du badge — arrondi pill, 11px, gras.
   .ftt   : Texte court  → fond bleu clair   / texte bleu foncé
   .ftta  : Texte long   → fond violet clair  / texte violet foncé
   .ftn   : Nombre       → fond ambré clair   / texte brun
   .ftd   : Date         → fond vert clair    / texte vert foncé
   .ftb_  : Oui/Non      → fond beige clair   / texte anthracite
   ============================================================================= */

.cfghdr{margin-bottom:1.25rem}
.cfghdr h1{font-size:20px;font-weight:500;margin-bottom:.25rem}
.cfgsub{font-size:var(--fs-ui);color:var(--tx2)}
.cfgtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:.5px solid var(--b2)}
.cfgtab{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--r2);border:.5px solid var(--b2);background:var(--bg1);color:var(--tx2);font-size:var(--fs-ui);transition:background .12s}
.cfgtab:hover{background:var(--bg2);color:var(--tx)}
.cfgtab.active{background:var(--tx);color:var(--bg1);border-color:var(--tx);font-weight:500}
.cfgpanel{display:grid;grid-template-columns:1fr 260px;gap:1.5rem;align-items:start}
.cfgpanel--nosidebar{grid-template-columns:1fr}
.cfgfields{background:var(--bg1);border:.5px solid var(--b1);border-radius:var(--r3);overflow:hidden}
.cfgtable{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
.cfgtable th{padding:10px 14px;text-align:left;font-size:var(--fs-xs);font-weight:500;color:var(--tx2);background:var(--bg2);border-bottom:.5px solid var(--b2)}
.cfgtable td{padding:10px 14px;border-bottom:.5px solid var(--b1);vertical-align:middle}
.cfgtable tbody tr:last-child td{border-bottom:none}
.cfgempty{padding:2rem;text-align:center;color:var(--tx2);font-size:var(--fs-ui)}
.addform{padding:1.25rem;border-top:.5px solid var(--b2);background:var(--bg2)}
.addform h3{font-size:var(--fs-ui);font-weight:500;margin-bottom:.75rem}
.addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.addrow input[type=text]{flex:1;min-width:150px}
.addrow select{width:135px;flex-shrink:0}
.fhint{font-size:var(--fs-xs);color:var(--tx3);margin-top:6px}
.cfginfo{display:none}
.ftlist{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:.5rem}
.ftb{display:inline-block;padding:2px 9px;border-radius:20px;font-size:var(--fs-xs);font-weight:500}
.ftb--meta { background:var(--ib); color:var(--it); border:.5px solid var(--it); }
.ftb--main { background:var(--pb); color:var(--pt); border:.5px solid var(--pt); }
.ftt{background:var(--ib);color:var(--it)}
.ftta{background:var(--pb);color:var(--pt)}
.ftn{background:var(--wb);color:var(--wt)}
.ftd{background:var(--ob);color:var(--ot)}
.ftb_{background:#F1EFE8;color:#444441}


/* =============================================================================
   19. PAGE IMPORT CSV
   =============================================================================
   .ipanel  : panneau d'import centré — largeur max 680px, fond blanc,
              bordure fine, arrondi large, padding généreux.
   .ipdesc  : texte d'instructions pour l'import — 13px, gris, interligne 1.7.
   ============================================================================= */

.ipanel{max-width:680px;background:var(--bg1);border:.5px solid var(--b1);border-radius:var(--r3);padding:1.5rem}
.ipdesc{font-size:var(--fs-ui);color:var(--tx2);margin-bottom:1rem;line-height:1.7}


/* =============================================================================
   20. RESPONSIVE
   =============================================================================

   ── Écrans ≤ 900px (tablettes, petits laptops) ────────────────────────────
   - Page détail : colonne gauche réduite à 160px.
   - Formulaire d'édition : colonne image réduite à 160px.
   - Page config : passage en colonne unique, panneau d'aide masqué
     (les informations d'aide sont moins utiles sur tablette où l'espace manque).

   ── Écrans ≤ 640px (mobiles) ─────────────────────────────────────────────
   - Padding réduit sur le conteneur principal.
   - Page détail : passage en 1 colonne.
     La colonne gauche devient une rangée horizontale (image + boutons côte à côte),
     l'image est réduite à 110px de large.
   - Formulaire d'édition : même adaptation (1 colonne, image en ligne).
   - Grilles fc2 / fc3 : passage en 1 colonne (les champs s'empilent).
   - Barre d'outils : empilée verticalement, recherche pleine largeur.
   - Statistiques : gap réduit, taille minimale des cases réduite à 70px.
   - Vue liste : certaines colonnes moins importantes masquées
     (.caut = auteur, .cann = année, .cgen = genre, .clan = langue).
   ============================================================================= */

@media(max-width:900px){
  .det{grid-template-columns:160px 1fr;gap:1.25rem}
  .flayout{grid-template-columns:160px 1fr;gap:1.25rem}
  .cfgpanel{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wrap{padding:1rem}
  .det{grid-template-columns:1fr}
  .dcc{flex-direction:row;align-items:flex-start;gap:1rem}
  .dci,.dcph{width:110px}
  .dca{flex-direction:row;flex-wrap:wrap}
  .flayout{grid-template-columns:1fr}
  .fcc{position:static;flex-direction:row;gap:1rem;align-items:flex-start}
  .fcprev{width:110px;flex-shrink:0}
  .fc2,.fc3{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .sform{width:100%}.tright{flex-wrap:wrap}
  .statsbar{gap:4px}
  .caut,.cann,.cgen,.clan{display:none}
}


/* =============================================================================
   21. CONFIG — SECTION CHAMPS FIXES
   =============================================================================
   Styles de la section "Renommer les libellés des champs fixes" dans la
   page Paramétrage, pour chaque type de média.

   .cfgsec           : une section dans le panneau config — marge basse 2rem
                       pour aérer entre "Champs fixes" et "Champs personnalisés".
   .cfgsectit        : titre de section en style caption (11px, majuscules, gras
                       lettres espacées, bordure basse fine).
   .cfgsecdesc       : description de la section — 13px, gris, interligne 1.6.
   .core-fields-grid : liste des lignes de champs fixes — flex colonne, gap 10px.
   .core-field-row   : une ligne de champ fixe — grille 3 colonnes :
                         - 140px : clé technique (code + badge "requis")
                         - 1fr   : input de renommage
                         - 160px : libellé par défaut (info)
                       Fond légèrement grisé, padding, arrondi, bordure fine.
   .cfl-key          : cellule de gauche — flex pour aligner code + badge requis.
   .cfl-default      : cellule de droite — texte d'information (11px, gris clair).
   .req-badge        : pastille "requis" — pill verte (couleur Document),
                       10px, très compact.
   input.customized  : input dont la valeur diffère du libellé par défaut
                       (le champ a été personnalisé) — bordure et fond bleutés
                       pour signaler visuellement la personnalisation.
   ============================================================================= */

.cfgsec { margin-bottom: 2rem; }
.cfgsectit {
  font-size: var(--fs-sm); font-weight: bold; color: var(--tx2);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: .5rem; padding-bottom: .4rem;
  border-bottom: .5px solid var(--b2);
}
.cfgsecdesc { font-size: var(--fs-ui); color: var(--tx2); margin-bottom: 1rem; line-height: 1.6; }
.core-fields-grid { display: flex; flex-direction: column; gap: 10px; }
.core-field-row {
  display: grid; grid-template-columns: 28px minmax(120px, 160px) 1fr minmax(130px, 180px);
  align-items: start; gap: 10px;
  padding: 10px 12px; background: var(--bg2);
  border-radius: var(--r2); border: .5px solid var(--b1);
  transition: opacity .15s, background .15s;
}
/* Aligner verticalement la checkbox et le libellé avec l'input */
.core-field-row .cfl-vis,
.core-field-row .cfl-key { padding-top: 6px; }
/* Variante sans checkbox ni rectangle — utilisée dans Identité et Utilisateurs */
.core-field-row--simple {
  display: grid; grid-template-columns: 160px 1fr 200px;
  align-items: start; gap: 8px 14px;
  padding: 0; background: none; border: none; border-radius: 0;
}
.core-field-row--simple .cfl-key {
  font-family: inherit; font-size: var(--fs-ui); font-weight: 600;
  color: var(--tx); padding-top: 7px;
}
.core-field-row--simple .cfl-default {
  font-size: var(--fs-xs); color: var(--tx3); padding-top: 7px;
}
.core-field-row.cfl-row-hidden {
  opacity: .55; background: var(--bg3);
  border-style: dashed;
}
.cfl-vis { display: flex; align-items: center; justify-content: center; }
.cfl-vis-cb { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ib); }
.cfl-vis-cb:disabled { cursor: not-allowed; opacity: .5; }
.cfl-key { display: flex; align-items: center; gap: 6px; }
.cfl-default { font-size: var(--fs-xs); color: var(--tx3); }
.req-badge {
  display: inline-block; padding: 1px 6px; border-radius: 20px;
  font-size: var(--fs-xxs); background: var(--ob); color: var(--ot);
}
input.customized { border-color: var(--ib); background: var(--bg1); box-shadow: inset 0 0 0 1px var(--ib); }


/* =============================================================================
   22. CONFIG — LIGNE EN COURS D'ÉDITION
   =============================================================================
   Quand l'utilisateur clique sur ✏ pour éditer un champ personnalisé,
   la ligne correspondante dans le tableau est mise en évidence, et un
   formulaire d'édition inline apparaît juste en-dessous.

   .editing-row td   : fond bleuté très léger sur toute la ligne en édition.
                       !important pour passer au-dessus du survol :hover.
   .edit-field-form  : panneau du formulaire d'édition inline — fond bleuté
                       très léger, bordure colorée (bleue), arrondi, padding.
   ============================================================================= */

.editing-row td { background: var(--bg2) !important; }
.edit-field-form {
  margin: 1rem 0; padding: 1rem;
  background: var(--bg2);
  border: .5px solid var(--ib); border-radius: var(--r2);
}


/* =============================================================================
   23. VALEUR VIDE DANS LA FICHE DÉTAIL
   =============================================================================
   Quand un champ n'a pas de valeur saisie, on affiche "—" avec ce style :
   gris clair, non gras, italique — pour le distinguer clairement d'une
   vraie valeur et indiquer visuellement l'absence de donnée.
   ============================================================================= */

.empty-val { color: var(--tx3); font-weight: 400; font-style: italic; }


/* =============================================================================
   24. CONFIG — PANNEAU PRINCIPAL
   =============================================================================
   .cfgmain : zone principale du panneau config (colonne de gauche dans .cfgpanel).
              min-width:0 est nécessaire pour que les contenus longs (tableaux,
              inputs) ne fassent pas déborder la grille CSS parent.
   ============================================================================= */

.cfgmain { min-width: 0; }


/* =============================================================================
   25. PARAMÈTRE LARGEUR MAXIMALE (onglet Apparence)
   =============================================================================
   Bloc de saisie + barre d'aperçu pour le réglage de la largeur max.

   .mw-row             : ligne flex alignant l'input, les radios unité et le
                         bouton "Aucune limite".
   .mw-input           : champ numérique — largeur fixe, cohérent avec le reste
                         du formulaire.
   .mw-units           : groupe de deux radios stylisés en boutons "toggle".
   .mw-unit-label      : label radio apparaissant comme un bouton secondaire.
                         La classe .sel est ajoutée par JS sur le label actif.
   .mw-preview-wrap    : zone d'aperçu — fond légèrement grisé, padding, arrondi.
   .mw-preview-label   : légende "Aperçu" en style caption (11px, caps, gris).
   .mw-preview-track   : piste grise pleine largeur — représente 100 % de l'écran.
   .mw-preview-bar     : barre colorée dont la largeur reflète le réglage choisi.
                         Sans valeur : 100 % gris clair. Avec valeur (.mw-bar-set) :
                         accent + animation de transition.
   .mw-preview-val     : libellé centré dans la barre (ex: "1200px").
   .mw-preview-full-label : "100 %" affiché sous la piste, aligné à droite.
   ============================================================================= */

.mw-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:1rem}
.mw-input{width:120px;padding:6px 10px;border:.5px solid var(--b2);border-radius:var(--r1);background:var(--bg1);color:var(--tx);font-size:var(--fs-ui);font-family:inherit}
.mw-input:focus{outline:none;border-color:var(--acc)}
.mw-input::placeholder{color:var(--tx3)}

/* Groupe radio "px / %" stylisé en toggle */
.mw-units{display:flex;border:.5px solid var(--b2);border-radius:var(--r1);overflow:hidden}
.mw-unit-label{display:flex;align-items:center;justify-content:center;padding:6px 13px;font-size:var(--fs-ui);color:var(--tx2);cursor:pointer;transition:background .12s,color .12s;user-select:none;line-height:1}
.mw-unit-label:first-child{border-right:.5px solid var(--b2)}
.mw-unit-label input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.mw-unit-label:hover{background:var(--bg2);color:var(--tx)}
.mw-unit-label.sel{background:var(--acc);color:#fff;font-weight:500}

/* Barre d'aperçu */
.mw-preview-wrap{padding:14px 16px;background:var(--bg2);border:.5px solid var(--b2);border-radius:var(--r2);margin-bottom:.5rem}
.mw-preview-label{font-size:var(--fs-xs);font-weight:500;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.mw-preview-track{position:relative;width:100%;height:28px;background:var(--bg1);border:.5px solid var(--b2);border-radius:var(--r1);overflow:hidden}
.mw-preview-bar{height:100%;background:var(--b2);border-radius:var(--r1);display:flex;align-items:center;justify-content:center;transition:width .25s ease,background .2s;min-width:2rem}
.mw-preview-bar.mw-bar-set{background:var(--bg3)}
.mw-preview-val{font-size:var(--fs-xs);font-weight:500;color:var(--tx2);white-space:nowrap;pointer-events:none}
.mw-preview-bar.mw-bar-set .mw-preview-val{color:var(--acc)}
.mw-preview-full-label{text-align:right;font-size:var(--fs-xs);color:var(--tx3);margin-top:4px}

@media(max-width:640px){
  .mw-row{flex-direction:column;align-items:flex-start}
  .mw-input{width:100%}
}


/* ═══════════════════════════════════════════════════════════════════════════
   §26 — PAGE DE CONNEXION
   ═══════════════════════════════════════════════════════════════════════════ */

.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:1.5rem}

.login-shell{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:1.5rem}

.login-brand{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.login-logo-emoji{font-size:2.8rem;line-height:1}
.login-logo-img{height:56px;object-fit:contain}
.login-title{font-size:1.35rem;font-weight:700;color:var(--tx);margin:0;letter-spacing:-.02em}

.login-card{width:100%;background:var(--bg1);border:.5px solid var(--b2);border-radius:var(--r2);box-shadow:0 4px 24px rgba(0,0,0,.08);overflow:hidden}
.login-card-head{padding:1rem 1.5rem;font-size:var(--fs-xs);font-weight:600;color:var(--tx3);border-bottom:.5px solid var(--b2);background:var(--bg2);letter-spacing:.06em;text-transform:uppercase}

.login-error{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#FCEBEB;color:#A32D2D;font-size:var(--fs-ui);border-bottom:.5px solid var(--danger)}
.login-error-icon{font-size:15px;flex-shrink:0}

.login-form{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.login-field{display:flex;flex-direction:column;gap:.4rem}
.login-field label{font-size:var(--fs-sm);font-weight:600;color:var(--tx2);letter-spacing:.03em}
.login-field input{width:100%;padding:.55rem .8rem;border:.5px solid var(--b2);border-radius:var(--r1);background:var(--bg2);color:var(--tx);font-size:var(--fs-base);transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.login-field input:focus{outline:none;border-color:var(--b3);box-shadow:0 0 0 3px var(--bg3)}

.login-pw-wrap{display:flex;align-items:center;border:.5px solid var(--b2);border-radius:var(--r1);background:var(--bg2);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.login-pw-wrap:focus-within{border-color:var(--b3);box-shadow:0 0 0 3px var(--bg3)}
.login-pw-wrap input{flex:1;border:none;background:transparent;border-radius:0;box-shadow:none!important;padding:.55rem .8rem}
.login-pw-wrap input:focus{outline:none}
.login-pw-toggle{background:transparent;border:none;padding:0 .65rem;cursor:pointer;font-size:15px;color:var(--tx3);flex-shrink:0;line-height:1}
.login-pw-toggle:hover{color:var(--tx)}

.login-submit{width:100%;justify-content:center;margin-top:.25rem;padding:.65rem;font-size:var(--fs-base)}

/* ═══════════════════════════════════════════════════════════════════════════
   §27 — TOPBAR : UTILISATEUR CONNECTÉ
   ═══════════════════════════════════════════════════════════════════════════ */

.topbar-user{display:flex;align-items:center;gap:.35rem;margin-left:.5rem;flex-shrink:0}
.topbar-username{font-size:var(--fs-sm);font-weight:600;color:var(--tx2);white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.topbar-logout{font-size:16px;opacity:.7;background:none;border:none}
.topbar-logout:hover{opacity:1;background:var(--bg2);border-color:var(--b2)}

/* ═══════════════════════════════════════════════════════════════════════════
   §28 — GESTION DES UTILISATEURS (onglet Paramétrage)
   ═══════════════════════════════════════════════════════════════════════════ */

.usr-table{width:100%;border-collapse:collapse;font-size:var(--fs-ui);margin-bottom:1rem}
.usr-table th{text-align:left;padding:.5rem .75rem;font-size:var(--fs-xs);font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;border-bottom:.5px solid var(--b2);background:var(--bg2)}
.usr-table td{padding:.6rem .75rem;border-bottom:.5px solid var(--b2);color:var(--tx);vertical-align:middle}
.usr-table tr:last-child td{border-bottom:none}
.usr-table tr:hover td{background:var(--bg2)}
.usr-row-me td{background:var(--bg3)}

.usr-name{font-weight:600}
.usr-badge-me{display:inline-block;margin-left:.4rem;padding:1px 7px;font-size:var(--fs-xxs);font-weight:600;border-radius:99px;background:var(--bg3);color:var(--tx2);letter-spacing:.03em;vertical-align:middle}
.usr-date{color:var(--tx3);font-size:var(--fs-sm)}

.usr-role-badge{display:inline-flex;align-items:center;gap:.3rem;padding:2px 9px;border-radius:99px;font-size:var(--fs-xs);font-weight:600}
.usr-role-admin{background:#FEF3C7;color:#92400E}
.usr-role-contributeur{background:#E6F1FB;color:#0C447C}
.usr-role-lecteur{background:#F1EFE8;color:var(--tx2)}
.usr-role-user{background:var(--bg2);color:var(--tx2)}

@media(prefers-color-scheme:dark){
  .usr-role-admin{background:#3b2d00;color:#f0c060}
  .login-error{background:#3b0f0f;color:#f9a8a8}
}

.usr-actions-col{width:1%;white-space:nowrap}
.usr-actions{display:flex;gap:.4rem;align-items:center}
.btn-sm{padding:3px 10px!important;font-size:var(--fs-xs)!important}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-danger:hover{background:#FCEBEB}

.usr-pw-field{display:flex;align-items:center;gap:.4rem}
.usr-pw-field input{flex:1}
.usr-pw-field .login-pw-toggle{border:.5px solid var(--b2);border-radius:var(--r1);padding:6px 10px;background:var(--bg1)}

@media(max-width:640px){
  .usr-table th:nth-child(3),.usr-table td:nth-child(3){display:none}
  .topbar-username{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §29 — VUE LISTE : TRI ET FILTRES COLONNE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Barre info résultats + bouton effacer filtres ── */
.rinfo-bar{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;min-height:1.4rem;flex-wrap:wrap}
.lf-clear{font-size:var(--fs-xs)!important;padding:2px 9px!important;color:var(--danger);border-color:var(--danger);background:transparent}
.lf-clear:hover{background:#FCEBEB}
.rinfo-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:2px 8px 2px 10px;border-radius:12px;background:var(--bg2);border:.5px solid var(--b2);color:var(--tx2)}
.rinfo-badge-close{color:var(--tx3);text-decoration:none;font-size:11px;line-height:1;margin-left:2px}
.rinfo-badge-close:hover{color:var(--danger)}

/* ── En-têtes triables ── */
.th-sortable a{display:flex;align-items:center;gap:4px;color:inherit;text-decoration:none;white-space:nowrap;width:100%}
.th-sortable a:hover{color:var(--tx)}
.th-active{color:var(--tx)!important;background:var(--bg3)!important}
.th-sort-icon{font-size:9px;opacity:.45;flex-shrink:0;line-height:1}
.th-sort-idle{}
.th-sort-on{opacity:1;color:var(--tx)}

/* ── Ligne de filtres ── */
.lth-filters td{padding:5px 6px;background:var(--bg2);border-bottom:.5px solid var(--b2)}
.lth-filters td:first-child{padding:0}/* colonne miniature */

.lf-input,.lf-select{
  width:100%;
  padding:3px 6px;
  font-size:var(--fs-xs);
  border:.5px solid var(--b2);
  border-radius:var(--r1);
  background:var(--bg1);
  color:var(--tx);
  font-family:inherit;
  outline:none;
  transition:border-color .12s;
  box-sizing:border-box;
}
.lf-input:focus,.lf-select:focus{border-color:var(--b3);box-shadow:0 0 0 2px var(--bg3)}
.lf-input::placeholder{color:var(--tx3)}

/* Surligner le filtre quand une valeur est présente */
.lf-input:not(:placeholder-shown),.lf-select.lf-active{
  border-color:var(--b3);
  background:var(--bg3);
}

.lf-apply{padding:3px 8px!important;font-size:var(--fs-xs)!important;white-space:nowrap}

/* Responsive : masquer la ligne filtres sous 640px */
@media(max-width:640px){
  .lth-filters{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   §30 — DUPLICATION DE RÉFÉRENCES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bouton Dupliquer — sobre, distinct du primaire et du danger */
.btn-dup{
  color:var(--tx2);
  border-color:var(--b2);
}
.btn-dup:hover{
  background:var(--bg3);
  color:var(--tx);
  border-color:var(--b3);
}

/* Version full-width dans la fiche détail */
.btn.fw.btn-dup{ justify-content:center; }

/* ── Vue grille : wrapper relatif pour superposer le bouton ── */
.grid{ /* déjà défini — on ajuste juste les enfants */ }

.card-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
}
/* La carte prend toute la place du wrapper */
.card-wrap .card{
  flex:1;
}
/* Bouton ⧉ flottant en haut à droite de la carte, visible au survol */
.btn-dup-card{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border-radius:var(--r1);
  border:.5px solid var(--b2);
  background:var(--bg1);
  color:var(--tx2);
  font-size:var(--fs-base);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .15s, background .12s, color .12s;
  z-index:2;
  line-height:1;
}
.card-wrap:hover .btn-dup-card{
  opacity:1;
}
.btn-dup-card:hover{
  background:var(--bg3);
  color:var(--tx);
  border-color:var(--b3);
}
/* Empêche le form d'affecter le layout */
.card-dup-form{
  position:absolute;
  top:0;right:0;
  margin:0;padding:0;
}

/* ── Vue tableau : colonne actions ── */
.td-actions{
  text-align:right;
  white-space:nowrap;
}
.td-actions .btn,.td-actions button{
  vertical-align:middle;
}

/* Accessibilité : toujours visible sur mobile (pas de hover) */
@media(max-width:640px){
  .btn-dup-card{ opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §31 — CHAMPS PERSONNALISÉS DE TYPE FICHIER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Badge de type "Fichier" dans le tableau de config */
.ftf{background:var(--pb);color:var(--pt)}
@media(prefers-color-scheme:dark){.ftf{background:var(--pb);color:var(--pt)}}

/* Fiche détail — lien fichier */
.cf-file-link{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:4px 10px;
  border-radius:var(--r2);
  border:.5px solid var(--b2);
  background:var(--bg2);
  color:var(--tx);
  text-decoration:none;
  font-size:var(--fs-ui);
  transition:background .12s,border-color .12s;
}
.cf-file-link:hover{background:var(--bg3);border-color:var(--b3)}

/* Aperçu image inline dans la fiche */
.cf-file-preview{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.cf-file-img{
  max-width:260px;
  max-height:200px;
  border-radius:var(--r2);
  border:.5px solid var(--b2);
  object-fit:contain;
  background:var(--bg2);
}

/* Formulaire — champ fichier personnalisé */
.frow-full{
  grid-column:1 / -1; /* occupe toute la largeur dans fc2 */
}
.cf-file-input{
  width:100%;
  padding:6px 8px;
  border:.5px solid var(--b2);
  border-radius:var(--r2);
  background:var(--bg2);
  color:var(--tx);
  font-size:var(--fs-ui);
  cursor:pointer;
}
.cf-file-input:hover{border-color:var(--b3)}

/* Aperçu du fichier existant dans le formulaire d'édition */
.cf-file-current{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:.75rem;
  background:var(--bg2);
  border-radius:var(--r2);
  border:.5px solid var(--b2);
  margin-bottom:.5rem;
}
.cf-file-current .cf-file-img{max-width:180px;max-height:140px}
.cf-file-info{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:var(--fs-ui);
  color:var(--tx);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §32 — FICHE DÉTAIL : BLOC FICHIERS JOINTS
   ═══════════════════════════════════════════════════════════════════════════ */

.det-files { display:flex; flex-direction:column; gap:.6rem; }

.det-file-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.det-file-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  padding-top: 5px;
  min-width: 120px;
  flex-shrink: 0;
}

.det-file-val { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   §33 — SÉLECTION EN MASSE ET BOUTON SUPPRIMER FICHE DÉTAIL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bouton Supprimer dans la colonne gauche de la fiche détail ── */
.btn-del-ref {
  color: var(--danger);
  border-color: var(--danger);
  background: transparent;
}
.btn-del-ref:hover {
  background: #FCEBEB;
}

/* ── Barre d'actions en masse ── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  margin-bottom: .75rem;
  background: var(--bg2);
  border: .5px solid var(--b3);
  border-radius: var(--r2);
  flex-wrap: wrap;
  animation: bulkSlideIn .15s ease;
}
@keyframes bulkSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bulk-count {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--tx);
  flex-shrink: 0;
}
.bulk-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Lignes / cartes sélectionnées ── */
.bulk-selected td { background: var(--bg3) !important; }
.card-wrap.bulk-selected .card {
  outline: 2px solid var(--b3);
  outline-offset: -1px;
}

/* ── Case à cocher custom — tableau ── */
.row-check-label,
.th-check-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.row-check-label input[type=checkbox],
.th-check-label input[type=checkbox],
.card-check-label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.row-check-box,
.th-check-box {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--b3);
  border-radius: 4px;
  background: var(--bg1);
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-check-label input:checked  ~ .row-check-box,
.th-check-label  input:checked  ~ .th-check-box,
.th-check-label  input:indeterminate ~ .th-check-box {
  background: var(--tx);
  border-color: var(--tx);
}
.row-check-label input:checked ~ .row-check-box::after,
.th-check-label  input:checked ~ .th-check-box::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--bg1);
  border-bottom: 2px solid var(--bg1);
  transform: rotate(-45deg) translateY(-1px);
}
.th-check-label input:indeterminate ~ .th-check-box::after {
  content: '';
  width: 8px; height: 2px;
  background: var(--bg1);
  border-radius: 1px;
}
.row-check-label:hover .row-check-box,
.th-check-label:hover  .th-check-box {
  border-color: var(--tx);
}

/* ── Case à cocher custom — cartes grille ── */
.card-check-label {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.card-wrap:hover .card-check-label,
.card-wrap.bulk-selected .card-check-label {
  opacity: 1;
}
.card-check-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255,255,255,.9);
  border-radius: 5px;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, border-color .12s;
}
.card-check-label input:checked ~ .card-check-box {
  background: var(--tx);
  border-color: var(--tx);
}
.card-check-label input:checked ~ .card-check-box::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid var(--bg1);
  border-bottom: 2px solid var(--bg1);
  transform: rotate(-45deg) translateY(-1px);
}

/* Toujours visible sur mobile */
@media(max-width:640px) {
  .card-check-label { opacity: 1; }
}

/* ── td-thumb : case à cocher + miniature côte à côte ── */
.td-thumb {
  white-space: nowrap;
}
.td-thumb .row-check-label {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 6px;
}
.td-thumb .thumb,
.td-thumb .tph {
  display: inline-block;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §34 — PAGE STATISTIQUES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Conteneur général ── */
.sc-page { padding-bottom: 3rem; }

/* ── En-tête ── */
.sc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.sc-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tx);
  margin: 0 0 .15rem;
  letter-spacing: -.02em;
}
.sc-sub {
  font-size: var(--fs-xs);
  color: var(--tx3);
  margin: 0;
}

/* ── Bandeau KPIs ── */
.sc-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.25rem;
}
.sc-kpi {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: 10px;
  padding: .65rem .9rem;
  min-width: 80px;
  flex: 1 1 80px;
  text-align: center;
}
.sc-kpi--wide { flex: 2 1 140px; }
.sc-kpi-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.sc-kpi-val--sm { font-size: 1rem; }
.sc-kpi-unit {
  font-size: .85rem;
  font-weight: 400;
  color: var(--tx3);
  margin-left: .1em;
}
.sc-kpi-lbl {
  font-size: var(--fs-xxs);
  color: var(--tx3);
  margin-top: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Grille 3 colonnes ── */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.sc-card {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: 10px;
  padding: .9rem 1rem 1rem;
  overflow: hidden;
  min-width: 0;
}
.sc-card--span2 { grid-column: span 2; }
.sc-card--full  { grid-column: 1 / -1; }

.sc-card-hdr {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx2);
  margin-bottom: .75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sc-card-hint {
  font-size: var(--fs-xxs);
  font-weight: 400;
  color: var(--tx3);
  text-transform: none;
  margin-left: .4rem;
  letter-spacing: 0;
}

/* ── Message vide ── */
.sc-empty {
  font-size: var(--fs-xs);
  color: var(--tx3);
  font-style: italic;
  margin: .4rem 0;
}

/* ── Graphiques SVG — taille contrôlée par CSS ── */
.sc-donut-svg  { width: 100%; max-width: 100%; height: auto; display: block; }
.sc-hbar-svg   { width: 100%; height: auto; display: block; }
.sc-vbar-svg   { width: 100%; height: auto; display: block; }
.sc-spark-svg  { width: 100%; height: auto; display: block; }
.sc-heatmap-svg{ width: 100%; max-width: 420px; height: auto; display: block; }

/* ── Barres de progression (taux de lecture) ── */
.sc-progress-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.sc-progress-row {
  display: grid;
  grid-template-columns: 80px 1fr 64px;
  align-items: center;
  gap: .5rem;
}
.sc-progress-lbl {
  font-size: var(--fs-xs);
  color: var(--tx2);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-progress-track {
  height: 8px;
  background: var(--b2);
  border-radius: 4px;
  overflow: hidden;
}
.sc-progress-bar {
  height: 100%;
  background: #5B8FD4;
  border-radius: 4px;
  transition: width .3s ease;
  min-width: 2px;
}
.sc-progress-val {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
}
.sc-progress-val span {
  font-weight: 400;
  color: var(--tx3);
  font-size: var(--fs-xxs);
  margin-left: .3em;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .sc-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-card--span2 { grid-column: span 2; }
  .sc-card--full  { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-card--span2,
  .sc-card--full  { grid-column: 1; }
  .sc-hdr { flex-direction: column; align-items: flex-start; }
  .sc-progress-row { grid-template-columns: 70px 1fr 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §35b — IMPORT ePUB
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Zone de dépôt ── */
.epub-dropzone {
  border: 1.5px dashed var(--b3);
  border-radius: var(--r3);
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--bg2);
  transition: border-color .15s, background .15s;
  cursor: default;
}
.epub-dropzone--over {
  border-color: var(--tx);
  background: var(--bg3);
}
.epub-drop-icon   { font-size: 32px; margin-bottom: .4rem; }
.epub-drop-main   { font-size: var(--fs-base); font-weight: 500; color: var(--tx); margin-bottom: .25rem; }
.epub-drop-or     { font-size: var(--fs-sm); color: var(--tx3); margin: .4rem 0; }
.epub-drop-btns   { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.epub-drop-hint   { font-size: var(--fs-xs); color: var(--tx3); }
.epub-pick-btn    { cursor: pointer; }

/* ── Barre de progression ── */
.epub-prog-label  { font-size: var(--fs-sm); color: var(--tx2); }
.epub-prog-count  { font-size: var(--fs-xs); color: var(--tx3); }
.epub-prog-bar-track {
  height: 6px;
  background: var(--b2);
  border-radius: 3px;
  overflow: hidden;
}
.epub-prog-bar-fill {
  height: 100%;
  background: var(--tx);
  border-radius: 3px;
  transition: width .2s ease;
  width: 0%;
}

/* ── En-tête prévisualisation ── */
.epub-preview-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}
.epub-preview-title { font-size: var(--fs-ui); font-weight: 500; color: var(--tx); }
.epub-chk-all-label { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); color: var(--tx2); cursor: pointer; }

/* ── Légende ── */
.epub-legend { font-size: var(--fs-xs); color: var(--tx3); margin-bottom: .75rem; }

/* ── Badges statut ── */
.epub-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: var(--fs-xxs);
  font-weight: 500;
  white-space: nowrap;
}
.epub-badge--new    { background: var(--ob); color: var(--ot); }
.epub-badge--update { background: var(--wb); color: var(--wt); }
.epub-badge--skip   { background: var(--bg3); color: var(--tx3); }

/* ── Grille de livres ── */
.epub-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .6rem;
  max-height: 480px;
  overflow-y: auto;
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  padding: .5rem;
  background: var(--bg);
  margin-bottom: .75rem;
}

/* ── Carte livre ── */
.epub-book-card {
  display: grid;
  grid-template-columns: 24px 60px 1fr;
  grid-template-rows: auto auto;
  gap: 0 .6rem;
  padding: .6rem;
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  position: relative;
  transition: opacity .15s;
}
.epub-book-card--unsel { opacity: .45; }
.epub-book-check {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.epub-book-cover {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 60px;
  height: 82px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.epub-book-cover img { width: 100%; height: 100%; object-fit: cover; }
.epub-book-nocover   { font-size: 24px; }
.epub-book-info      { grid-column: 3; grid-row: 1; min-width: 0; }
.epub-badge          { position: absolute; top: .4rem; right: .4rem; }

.epub-book-title  { font-size: var(--fs-sm); font-weight: 500; color: var(--tx); line-height: 1.3; margin-bottom: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.epub-book-author { font-size: var(--fs-xs); color: var(--tx2); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epub-book-details { display: flex; gap: .3rem; flex-wrap: wrap; }
.epub-book-details span { font-size: var(--fs-xxs); color: var(--tx3); background: var(--bg2); padding: 1px 5px; border-radius: 8px; }
.epub-book-isbn   { font-size: var(--fs-xxs); color: var(--tx3); margin-top: 2px; }
.epub-book-desc   { font-size: var(--fs-xxs); color: var(--tx3); margin-top: 3px; line-height: 1.4; grid-column: 3; }

/* ── Pied de page import ── */
.epub-import-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .75rem;
  border-top: .5px solid var(--b2);
}
.epub-import-summary { font-size: var(--fs-sm); color: var(--tx2); }

/* ── Bloc d'erreurs ── */
.epub-errors-box {
  background: var(--rb, #FBEAF0);
  color: var(--rt, #72243E);
  border: .5px solid var(--rt, #72243E);
  border-radius: var(--r2);
  padding: .65rem .9rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.epub-errors-box ul { margin: .35rem 0 0 1rem; }
.epub-errors-box li { margin: .15rem 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .epub-book-grid { grid-template-columns: 1fr; }
  .epub-drop-btns { flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §35 — CONSOLE DE LOGS (onglet Debug)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Badge rouge sur l'onglet dans la nav */
.dbg-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: var(--fs-xxs);
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}

/* En-tête avec compteurs et bouton purge */
.dbg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.dbg-counts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; }
.dbg-cnt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.dbg-cnt-all     { background: var(--bg3); color: var(--tx2); }
.dbg-cnt-error   { background: #FCEBEB; color: #A32D2D; }
.dbg-cnt-warning { background: #FEF3C7; color: #92400E; }
.dbg-cnt-info    { background: #DCFCE7; color: #166534; }
@media(prefers-color-scheme:dark) {
  .dbg-cnt-error   { background:#3b0f0f; color:#f9a8a8; }
  .dbg-cnt-warning { background:#3b2d00; color:#f0c060; }
  .dbg-cnt-info    { background:#0f2b1a; color:#86efac; }
}

/* Filtres */
.dbg-filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.dbg-search-input { flex: 1; min-width: 150px; max-width: 280px; }

/* État vide */
.dbg-empty {
  padding: 1.5rem;
  background: var(--bg2);
  border-radius: var(--r2);
  font-size: var(--fs-ui);
  color: var(--tx2);
  text-align: center;
}

/* Table */
.dbg-table-wrap { overflow-x: auto; }
.dbg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 660px; }
.dbg-table thead tr { background: var(--bg2); }
.dbg-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: var(--fs-xxs);
  font-weight: 600;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: .5px solid var(--b2);
  white-space: nowrap;
}
.dbg-table td { padding: 6px 10px; border-bottom: .5px solid var(--b1); vertical-align: top; }
.dbg-row { cursor: pointer; transition: background .1s; }
.dbg-row:hover td { background: var(--bg2); }

/* Indicateur coloré sur la première cellule */
.dbg-row.dbg-error   td:first-child { border-left: 3px solid var(--danger); }
.dbg-row.dbg-warning td:first-child { border-left: 3px solid #D6A84E; }
.dbg-row.dbg-info    td:first-child { border-left: 3px solid #82B366; }

.dbg-date         { color: var(--tx3); white-space: nowrap; font-size: var(--fs-xs); }
.dbg-msg          { color: var(--tx); word-break: break-word; }
.dbg-toggle-icon  { text-align: center; color: var(--tx3); font-size: var(--fs-xxs); padding: 0 4px; }

/* Badges niveau */
.dbg-badge { display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: var(--fs-xxs); font-weight: 600; white-space: nowrap; }
.dbg-badge.dbg-error   { background:#FCEBEB; color:#A32D2D; }
.dbg-badge.dbg-warning { background:#FEF3C7; color:#92400E; }
.dbg-badge.dbg-info    { background:#DCFCE7; color:#166534; }
@media(prefers-color-scheme:dark) {
  .dbg-badge.dbg-error   { background:#3b0f0f; color:#f9a8a8; }
  .dbg-badge.dbg-warning { background:#3b2d00; color:#f0c060; }
  .dbg-badge.dbg-info    { background:#0f2b1a; color:#86efac; }
}

/* Ligne de détail dépliable */
.dbg-detail-row td { padding: 0; background: var(--bg2); border-bottom: .5px solid var(--b2); }
.dbg-detail-pre {
  margin: 0;
  padding: .75rem 1rem;
  font-size: var(--fs-xs);
  color: var(--tx2);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  max-height: 220px;
  overflow-y: auto;
}

@media(max-width:640px) {
  .dbg-header { flex-direction: column; }
  .dbg-filters { flex-direction: column; align-items: stretch; }
  .dbg-search-input { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §36 — WIDGET RECHERCHE ISBN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bloc principal du widget */
.isbn-widget {
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  transition: opacity .3s;
}
.isbn-widget.isbn-widget-done {
  opacity: .6;
}
.isbn-widget-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--tx);
  margin-bottom: .3rem;
}
.isbn-widget-desc {
  font-size: var(--fs-sm);
  color: var(--tx3);
  margin: 0 0 .85rem;
  line-height: 1.5;
}

/* Ligne de saisie ISBN */
.isbn-row {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.isbn-row input {
  flex: 1;
  min-width: 180px;
  max-width: 300px;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  letter-spacing: .05em;
}

/* Messages de statut */
.isbn-status {
  margin-top: .75rem;
  padding: .55rem .85rem;
  border-radius: var(--r2);
  font-size: var(--fs-ui);
  line-height: 1.4;
}
.isbn-status-loading {
  background: var(--bg3);
  color: var(--tx2);
}
.isbn-status-error {
  background: var(--rb);
  color: var(--rt);
}
.isbn-status-success {
  background: var(--ob);
  color: var(--ot);
}
@media(prefers-color-scheme:dark) {
  /* Déjà géré par --rb/--rt et --ob/--ot qui ont leurs variantes sombres */
}

/* Bloc résultat trouvé */
.isbn-result {
  margin-top: .85rem;
}
.isbn-found {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
}
.isbn-cover {
  width: 60px;
  min-width: 60px;
  max-height: 90px;
  object-fit: cover;
  border-radius: 4px;
  border: .5px solid var(--b2);
}
.isbn-found-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.isbn-found-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--tx);
}
.isbn-found-meta {
  font-size: var(--fs-sm);
  color: var(--tx2);
}
.isbn-apply-btn {
  align-self: flex-start;
  margin-top: .5rem;
  font-size: var(--fs-sm) !important;
  padding: 5px 12px !important;
}

@media(max-width:640px) {
  .isbn-row { flex-direction: column; align-items: stretch; }
  .isbn-row input { max-width: 100%; }
  .isbn-found { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §37 — ÉDITEUR MARKDOWN
   ═══════════════════════════════════════════════════════════════════════════ */

.md-wrap { display: flex; flex-direction: column; gap: 0; }

/* Barre d'outils */
.md-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  padding: 4px 6px;
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-bottom: none;
  border-radius: var(--r2) var(--r2) 0 0;
}
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  font-size: var(--fs-base);
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: var(--tx2);
  background: transparent;
  border: .5px solid transparent;
  border-radius: var(--r1);
  cursor: pointer;
  line-height: 1;
  transition: background .1s, color .1s;
}
.md-btn:hover { background: var(--bg3); color: var(--tx); border-color: var(--b2); }
.md-btn-active { background: var(--bg3) !important; color: var(--tx) !important; border-color: var(--b2) !important; }

/* Toolbar sticky : activée au focus du textarea.
   top lit --md-sticky-top écrite par JS (= hauteur du header app). */
.md-toolbar--sticky {
  position: sticky;
  top: var(--md-sticky-top, var(--th, 56px));
  z-index: 50;
}
.md-bold   { font-style: normal; }
.md-italic { font-style: italic; }
.md-strike { text-decoration: line-through; }
.md-mark   { background: rgba(250,210,0,.25); border-radius: 2px; padding: 0 2px; }
.md-sep { width: .5px; height: 18px; background: var(--b2); margin: 0 3px; flex-shrink: 0; }

/* Onglets */
.md-tabs { display: flex; gap: 2px; margin-left: auto; }
.md-tab {
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--tx3);
  background: transparent;
  border: .5px solid transparent;
  border-radius: var(--r1);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.md-tab:hover { background: var(--bg3); color: var(--tx2); }
.md-tab.active { background: var(--bg1); color: var(--tx); border-color: var(--b2); }

/* Textarea dans le wrapper */
.md-wrap textarea {
  border-radius: 0 !important;
  border-top: none !important;
  resize: none;
}

/* Corps (grille split : textarea gauche + preview droite) */
.md-body { display: flex; flex-direction: column; }

/* Zone de prévisualisation */
.md-preview {
  min-height: 100px;
  padding: .75rem 1rem;
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-top: none;
  overflow-y: auto;
}
.md-hidden { display: none !important; }

/* Barre de statut */
.md-statusbar {
  font-size: var(--fs-xxs);
  color: var(--tx3);
  padding: 3px 10px;
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-top: .5px solid var(--b1);
  border-radius: 0 0 var(--r2) var(--r2);
  text-align: right;
}

/* Vue partagée (split) */
.md-wrap.md-split .md-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.md-wrap.md-split textarea {
  border-right: .5px solid var(--b2) !important;
}
.md-wrap.md-split .md-preview {
  border-left: none;
  background: var(--bg2);
}

/* Plein écran */
.md-wrap.md-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.md-wrap.md-fullscreen .md-toolbar { border-radius: 0; flex-shrink: 0; }
.md-wrap.md-fullscreen .md-body    { flex: 1; overflow: hidden; }
.md-wrap.md-fullscreen textarea    { flex: 1; border-radius: 0 !important; height: 100% !important; resize: none !important; overflow-y: auto; }
.md-wrap.md-fullscreen .md-preview { flex: 1; border-radius: 0; overflow-y: auto; }
.md-wrap.md-fullscreen .md-statusbar { flex-shrink: 0; border-radius: 0; }
.md-wrap.md-fullscreen.md-split .md-body { display: grid; grid-template-columns: 1fr 1fr; }

/* Rendu Markdown */
.md-rendered { font-size: var(--fs-ui); line-height: 1.65; color: var(--tx); text-align: justify; hyphens: auto; }
.md-rendered h1,.md-rendered h2,.md-rendered h3,
.md-rendered h4,.md-rendered h5,.md-rendered h6 {
  font-weight: 500; margin: 1em 0 .4em; color: var(--tx);
}
.md-rendered h1 { font-size: 1.3em; }
.md-rendered h2 { font-size: 1.15em; }
.md-rendered h3 { font-size: 1.05em; }
.md-rendered p  { margin: .5em 0; }
.md-rendered ul,.md-rendered ol { margin: .4em 0; padding-left: 1.5em; }
.md-rendered li { margin: .2em 0; }
.md-rendered blockquote {
  border-left: 3px solid var(--b3);
  margin: .5em 0;
  padding: .3em .75em;
  color: var(--tx2);
  background: var(--bg2);
  border-radius: 0 var(--r1) var(--r1) 0;
}
.md-rendered code {
  font-family: ui-monospace, monospace;
  font-size: .88em;
  background: var(--bg2);
  padding: 1px 5px;
  border-radius: 3px;
}
.md-rendered pre {
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  padding: .75rem;
  overflow-x: auto;
}
.md-rendered pre code { background: none; padding: 0; }
.md-rendered a { color: #3B6D11; text-decoration: underline; }
.md-rendered strong { font-weight: 500; }
.md-rendered del { opacity: .6; }
.md-rendered hr { border: none; border-top: .5px solid var(--b2); margin: 1em 0; }
.md-rendered img.md-img { max-width: 100%; border-radius: var(--r2); margin: .5em 0; }
.md-rendered mark { background: rgba(250,210,0,.3); border-radius: 2px; padding: 0 2px; color: inherit; }
.md-rendered-table { width: 100%; border-collapse: collapse; margin: .75em 0; font-size: var(--fs-ui); }
.md-rendered-table td { padding: 6px 10px; border: .5px solid var(--b2); }
.md-rendered-table .md-th td { background: var(--bg2); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════════
   §38 — VISIONNEUSE DE FICHIERS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overlay */
.fv-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.fv-overlay.fv-visible { opacity: 1; pointer-events: auto; }

/* Boîte de dialogue */
.fv-dialog {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform .2s;
}
.fv-overlay.fv-visible .fv-dialog { transform: translateY(0); }

/* En-tête */
.fv-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--bg2);
  border-bottom: .5px solid var(--b2);
  flex-shrink: 0;
}
.fv-title {
  flex: 1;
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fv-header-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.fv-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  background: transparent;
  border: .5px solid transparent;
  border-radius: var(--r2);
  cursor: pointer;
  color: var(--tx2);
  transition: background .1s;
}
.fv-close:hover { background: var(--bg3); color: var(--tx); }

/* Corps */
.fv-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 200px;
  background: var(--bg);
}

/* Image */
.fv-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* PDF iframe */
.fv-iframe {
  width: 100%;
  height: 75vh;
  border: none;
  display: block;
}

/* Texte préformaté */
.fv-pre {
  width: 100%;
  padding: 1rem;
  margin: 0;
  font-size: var(--fs-sm);
  font-family: ui-monospace, 'Cascadia Code', monospace;
  color: var(--tx);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg1);
  tab-size: 4;
}

/* Markdown rendu dans la visionneuse */
.fv-md-rendered {
  width: 100%;
  max-width: 720px;
  padding: 1.5rem;
  margin: auto;
  background: var(--bg1);
}

/* Vidéo / Audio */
.fv-video { max-width: 100%; max-height: 75vh; display: block; margin: auto; background: #000; }
.fv-audio { width: 100%; max-width: 500px; margin: 2rem auto; display: block; }

/* Loading */
.fv-loading {
  padding: 2rem;
  color: var(--tx3);
  font-size: var(--fs-ui);
  margin: auto;
}

/* Fallback */
.fv-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2.5rem 2rem;
  text-align: center;
  margin: auto;
  width: 100%;
}
.fv-fallback-icon { font-size: 48px; line-height: 1; }
.fv-fallback-name { font-size: 15px; font-weight: 500; color: var(--tx); }
.fv-fallback-msg  { font-size: var(--fs-ui); color: var(--tx2); max-width: 380px; }
.fv-fallback-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }

/* Bouton visionneuse sur la fiche détail */
.fv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--tx2);
  background: transparent;
  border: .5px solid var(--b2);
  border-radius: var(--r1);
  cursor: pointer;
  text-decoration: none;
  transition: background .1s, color .1s;
}
.fv-btn:hover { background: var(--bg2); color: var(--tx); border-color: var(--b3); }

@media(max-width:640px) {
  .fv-dialog { max-height: 95vh; }
  .fv-iframe { height: 60vh; }
}

/* Bouton image cliquable pour visionneuse */
.cf-file-img-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
}
.cf-file-img-btn:hover { opacity: .88; }

/* ═══════════════════════════════════════════════════════════════════════════
   §39 — PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  margin: .75rem 0 1rem;
}
.pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--r2);
  border: .5px solid var(--b2);
  background: var(--bg1);
  color: var(--tx2);
  font-size: var(--fs-ui);
  text-decoration: none;
  transition: background .1s, border-color .1s;
  white-space: nowrap;
}
.pag-btn:hover { background: var(--bg2); border-color: var(--b3); color: var(--tx); }
.pag-btn.pag-active {
  background: var(--tx);
  color: var(--bg1);
  border-color: var(--tx);
  font-weight: 500;
  pointer-events: none;
}
.pag-prev, .pag-next { font-size: 16px; font-weight: 400; }
.pag-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 32px;
  color: var(--tx3);
  font-size: var(--fs-ui);
}
/* Séparateur visuel entre numéros et bouton Afficher tout */
.pag-sep {
  display: inline-block;
  width: .5px;
  height: 20px;
  background: var(--b2);
  margin: 0 .2rem;
  align-self: center;
}
/* Bouton Afficher tout / Paginer */
.pag-all {
  font-size: var(--fs-sm);
  color: var(--tx2);
  border-style: dashed;
}
.pag-all:hover { color: var(--tx); background: var(--bg2); border-style: solid; }

/* ═══════════════════════════════════════════════════════════════════════════
   §40 — CONFIGURATION ARRIÈRE-PLAN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sélecteur de type */
.bg-type-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bg-type-opt {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 6px 14px;
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  font-size: var(--fs-ui);
  color: var(--tx2);
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.bg-type-opt input { display: none; }
.bg-type-opt:hover { background: var(--bg2); color: var(--tx); }
.bg-type-opt.sel { background: var(--bg2); border-color: var(--b3); color: var(--tx); font-weight: 500; }
.bg-type-icon { font-size: 16px; }

/* Galerie d'images */
.bg-gallery {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.bg-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}
.bg-gallery-item input { display: none; }
.bg-gallery-thumb {
  width: 120px;
  height: 70px;
  border-radius: var(--r2);
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  background-color: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
  overflow: hidden;
}
.bg-gallery-thumb:hover { border-color: var(--b3); }
.bg-gallery-item.sel .bg-gallery-thumb { border-color: var(--tx); }
.bg-gallery-custom { background-image: none !important; }
.bg-gallery-emoji { font-size: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.bg-gallery-label { font-size: var(--fs-xs); color: var(--tx2); text-align: center; max-width: 120px; }
.bg-gallery-item.sel .bg-gallery-label { color: var(--tx); font-weight: 500; }

/* Options opacité/couverture */
.bg-options { margin-top: 1rem; }
.bg-option-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Presets de couleur */
.bg-color-presets { display: flex; gap: .35rem; flex-wrap: wrap; }
.bg-color-preset {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--b2);
  cursor: pointer;
  transition: border-color .1s, transform .1s;
}
.bg-color-preset:hover { border-color: var(--b3); transform: scale(1.15); }

/* ═══════════════════════════════════════════════════════════════════════════
   §41 — DRAG & DROP (config_type)
   ═══════════════════════════════════════════════════════════════════════════ */

.dnd-section-title {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .4rem;
}
.dnd-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dnd-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 7px 10px;
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  font-size: var(--fs-ui);
  color: var(--tx);
  cursor: default;
  user-select: none;
  transition: background .1s, border-color .1s, opacity .15s;
}
/* Variante extensible : colonne pour accueillir le formulaire inline */
.dnd-item--expandable {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}
.dnd-item-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 7px 10px;
}
.dnd-item--open {
  border-color: var(--ib);
  background: var(--bg1);
}
.dnd-inline-edit {
  padding: .75rem 1rem;
  border-top: .5px solid var(--ib);
  background: var(--bg2);
  border-radius: 0 0 var(--r2) var(--r2);
}
.dnd-item:hover { border-color: var(--b3); }
.dnd-item.dnd-dragging { opacity: .45; border-style: dashed; }
.dnd-item.dnd-over { background: var(--bg3); border-color: var(--tx); }
.dnd-handle {
  font-size: 16px;
  color: var(--tx3);
  cursor: grab;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
}
.dnd-handle:active { cursor: grabbing; }
.dnd-handle-inline { font-size: var(--fs-ui); color: var(--tx3); }
.dnd-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.dnd-label em { font-style: normal; color: var(--tx2); font-size: var(--fs-sm); }
.dnd-actions {
  display: flex;
  gap: .3rem;
  align-items: center;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §42 — LIENS CLIQUABLES FICHE DÉTAIL
   ═══════════════════════════════════════════════════════════════════════════ */

/* Liens de recherche dans la fiche */
.det-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--b3);
  transition: color .1s, border-color .1s;
}
.det-link:hover { color: var(--tx); border-bottom-style: solid; }

/* Badge type cliquable */
.det-link-badge {
  text-decoration: none;
  cursor: pointer;
  transition: opacity .1s;
}
.det-link-badge:hover { opacity: .8; }

/* Tags cliquables */
.det-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin: 1px 2px;
  font-size: var(--fs-sm);
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: 99px;
  color: var(--tx2);
  text-decoration: none;
  transition: background .1s, color .1s, border-color .1s;
}
.det-tag:hover {
  background: var(--bg3);
  color: var(--tx);
  border-color: var(--b3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §43 — BOUTON WIKIPEDIA + MODALE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Conteneur champ + bouton Wikipedia côte à côte */
.wiki-field-wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
}
.wiki-field-wrap input {
  flex: 1;
  min-width: 0;
}

/* Bouton Wikipedia inline (icône W) */
.wiki-fetch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: #f8f8f8;
  border: .5px solid var(--b2);
  border-radius: var(--r1);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  padding: 0;
}
.wiki-fetch-btn:hover { background: #e8e4e0; border-color: var(--b3); }
.wiki-icon {
  font-family: 'Linux Libertine','Georgia',serif;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}
@media(prefers-color-scheme:dark) {
  .wiki-fetch-btn { background: var(--bg3); }
  .wiki-fetch-btn:hover { background: var(--bg2); }
  .wiki-icon { color: var(--tx2); }
}

/* Badge lien Wikipedia après validation */
.wiki-link-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
  padding: .5rem .85rem;
  background: #EAF3DE;
  border: .5px solid #82B366;
  border-radius: var(--r2);
  font-size: var(--fs-sm);
  color: #27500A;
}
@media(prefers-color-scheme:dark) {
  .wiki-link-badge { background: #173404; border-color: #3B6D11; color: #C0DD97; }
}
.wiki-badge-link { color: inherit; font-weight: 500; }
.wiki-badge-remove {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .6; font-size: var(--fs-sm); padding: 0 2px;
}
.wiki-badge-remove:hover { opacity: 1; }

/* Overlay + dialog — commun formulaire et visionneuse */
.wiki-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wiki-dialog {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  width: 100%;
  max-width: 680px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wiki-dialog-view { max-width: 760px; }

.wiki-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--bg2);
  border-bottom: .5px solid var(--b2);
  flex-shrink: 0;
}
.wiki-header-title {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wiki-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; background: transparent;
  border: .5px solid transparent; border-radius: var(--r2);
  cursor: pointer; color: var(--tx2); flex-shrink: 0;
  transition: background .1s;
}
.wiki-close:hover { background: var(--bg3); color: var(--tx); }

/* Étape de la modale */
.wiki-step { padding: 1rem; overflow-y: auto; }

/* Recherche */
.wiki-search-row {
  display: flex; gap: .5rem; margin-bottom: .75rem;
}
.wiki-search-field {
  flex: 1; min-width: 0;
}
.wiki-status {
  font-size: var(--fs-ui); color: var(--tx2); margin-bottom: .5rem; min-height: 1.4em;
}
.wiki-status-loading { color: var(--tx2); }
.wiki-status-warn    { color: #92400E; }
.wiki-status-error   { color: var(--danger); }

/* Liste de résultats */
.wiki-results { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.wiki-result-item { margin: 0; }
.wiki-result-btn {
  width: 100%;
  text-align: left;
  padding: .55rem .75rem;
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  transition: background .1s, border-color .1s;
  font-family: inherit;
}
.wiki-result-btn:hover { background: var(--bg2); border-color: var(--b3); }
.wiki-result-title  { font-size: var(--fs-ui); font-weight: 500; color: var(--tx); }
.wiki-result-snippet{ font-size: var(--fs-xs); color: var(--tx3); line-height: 1.4; }

/* Métadonnées article */
.wiki-article-meta {
  margin-bottom: .6rem;
  padding: .45rem .75rem;
  background: var(--bg2);
  border-radius: var(--r2);
  font-size: var(--fs-sm);
}
.wiki-article-link { color: var(--tx2); text-decoration: none; }
.wiki-article-link:hover { color: var(--tx); text-decoration: underline; }

.wiki-edit-label { font-size: var(--fs-sm); color: var(--tx3); margin-bottom: .4rem; }
.wiki-edit-textarea {
  width: 100%; min-height: 220px; max-height: 380px;
  font-size: var(--fs-ui); font-family: inherit;
  resize: vertical;
  border: .5px solid var(--b2); border-radius: var(--r2);
  background: var(--bg1); color: var(--tx);
  padding: .6rem .75rem;
}
.wiki-edit-actions {
  display: flex; gap: .5rem; justify-content: flex-end; margin-top: .75rem;
}

/* Visionneuse Wikipedia dans la fiche */
.wiki-view-btn { font-size: var(--fs-sm) !important; }
.wiki-view-body {
  flex: 1; overflow-y: auto; padding: 1rem;
  background: var(--bg);
}
.wiki-view-text {
  font-family: inherit;
  font-size: var(--fs-ui);
  line-height: 1.65;
  color: var(--tx);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.wiki-view-loading { color: var(--tx3); font-size: var(--fs-ui); padding: 1rem 0; }
.wiki-view-error   { color: var(--danger); font-size: var(--fs-ui); padding: 1rem 0; line-height: 1.6; }

@media(max-width:640px) {
  .wiki-dialog { max-height: 95vh; }
  .wiki-search-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §44 — THÈMES FICHE DÉTAIL
   Structure commune : .det.det--A / .det.det--B / .det.det--C / .det.det--D
   Les classes communes (.dcc, .dci, .dcph, .dca, .dmain, .dtit, .dsub, etc.)
   restent inchangées. On ajoute les nouvelles classes par thème.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base commune à tous les thèmes ─────────────────────────────────────── */
.det { display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:start }
.dcc { display:flex; flex-direction:column; gap:12px }
.dci { width:100%; height:auto; object-fit:contain; border-radius:0; border:.5px solid var(--b1); display:block }
.dcph { width:100%; aspect-ratio:2/3; border-radius:0; display:flex; align-items:center; justify-content:center; font-size:64px }
.dca { display:flex; flex-direction:column; gap:8px }
.dmain { min-width:0 }
.dhead { margin-bottom:1.25rem }
.dtit { font-size:var(--fs-title); font-weight:500; line-height:1.25; margin:.4rem 0 .25rem }
.dsub { font-size:var(--fs-sm); color:var(--tx2); margin-bottom:.5rem }
.dfl { font-size:var(--fs-xs); color:var(--tx2); text-transform:uppercase; letter-spacing:.05em }
.dfv { font-size:var(--fs-base); font-weight:400; display:flex; align-items:center; gap:4px; flex-wrap:wrap }
.ddesc { font-size:var(--fs-base); line-height:1.7; color:var(--tx2); text-align:justify; hyphens:auto }

/* ── THÈME A — Cartes flottantes ────────────────────────────────────────── */
.det--A .dcard {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.det--A .dcard:last-child { margin-bottom: 0; }
.det--A .dcard-title {
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .85rem;
  padding-bottom: .5rem;
  border-bottom: .5px solid var(--b1);
}
.det--A .dfgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.det--A .df {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: none;
  padding: 0;
}
.det--A .dfv { display: block; width: 100%; }
/* ── THÈME B — Lignes horizontales ──────────────────────────────────────── */
.det--B .dhead { padding-bottom: 1rem; border-bottom: .5px solid var(--b2); margin-bottom: 0; }
.det--B .det-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
}
.det--B .det-tr { border-bottom: .5px solid var(--b1); }
.det--B .det-tr:last-child { border-bottom: none; }
.det--B .det-td-lbl {
  padding: .6rem 1rem .6rem 0;
  font-size: var(--fs-sm);
  color: var(--tx3);
  width: 38%;
  vertical-align: top;
}
.det--B .det-td-val {
  padding: .6rem 0;
  font-size: var(--fs-ui);
  font-weight: 400;
  color: var(--tx);
  vertical-align: top;
}
.det--B .det-b-section {
  border-top: .5px solid var(--b2);
  padding-top: .85rem;
  margin-bottom: 1.1rem;
}
.det--B .det-b-slbl {
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .6rem;
}

/* ── THÈME C — Bandeau héros + deux colonnes ────────────────────────────── */
.det--C {
  display: block; /* Override grid — layout géré par les sous-éléments */
}
.det-c-hero {
  border-radius: var(--r3);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.det-c-emoji { font-size: 56px; flex-shrink: 0; line-height: 1; }
.det-c-hero-text { flex: 1; min-width: 200px; }
.det-c-title { font-size: 24px; font-weight: 500; line-height: 1.25; margin: .3rem 0 .2rem; }
.det-c-sub { font-size: var(--fs-base); margin-top: .15rem; }
.det-c-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; }

/* ── Boutons sur fond héro coloré (thèmes C/D/E/F/G) ──────────────────────
   Utilisent la teinte du type de média comme fond — besoin d'un style
   translucide adaptatif plutôt que rgba blanc fixe.                        */
.btn-hero {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: var(--r2);
  font-size: var(--fs-ui); font-family: inherit; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: opacity .12s;
  background: transparent; opacity: .85;
  border: .5px solid currentColor; opacity: .5;
  color: inherit;
}
.btn-hero--sec {
  background: transparent;
  border-color: currentColor; opacity: .35;
}
.btn-hero:hover, .btn-hero--sec:hover { opacity: .8; }

/* Tag sur fond héro coloré */
.det-hero-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  background: transparent;
  color: inherit;
  border: .5px solid currentColor;
}
.det-c-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1rem;
  align-items: start;
}
.det-c-main { display: flex; flex-direction: column; gap: 1rem; }
.det-c-side { display: flex; flex-direction: column; gap: .75rem; }
.det-c-panel {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  padding: 1rem;
}
.det-c-ptitle {
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .65rem;
}
.det-c-pair {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .3rem 0;
  border-bottom: .5px solid var(--b1);
  font-size: var(--fs-ui);
  gap: .5rem;
}
.det-c-pair:last-child { border: none; padding-bottom: 0; }
.det-c-plbl { color: var(--tx3); flex-shrink: 0; }
.det-c-pval { color: var(--tx); font-weight: 400; text-align: right; flex-wrap: wrap; }

/* ── THÈME D — Timeline verticale ───────────────────────────────────────── */
.det-d-meta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .5rem;
}
.det-d-mi { display: flex; flex-direction: column; gap: 2px; }
.det-d-mk { font-size: var(--fs-xxs); color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; }
.det-d-mv { font-size: var(--fs-sm); font-weight: 500; color: var(--tx); }

.det-d-timeline { display: flex; flex-direction: column; }
.det-d-step {
  border-left: 2px solid var(--b2);
  padding: 0 0 1.5rem 1.25rem;
  margin-left: .45rem;
  position: relative;
}
.det-d-last { border-left-color: transparent; padding-bottom: 0; }
.det-d-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg3);
  border: 2px solid var(--b3);
  position: absolute;
  left: -6px;
  top: 3px;
}
.det-d-stit {
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .65rem;
}
.det-d-fields { display: flex; flex-direction: column; gap: .35rem; }
.det-d-kv { display: flex; gap: .5rem; align-items: baseline; font-size: var(--fs-ui); flex-wrap: wrap; }
.det-d-kk { color: var(--tx3); min-width: 100px; flex-shrink: 0; font-size: var(--fs-sm); }
.det-d-kv2 { color: var(--tx); font-weight: 400; }

/* ── Responsive tous thèmes ─────────────────────────────────────────────── */
@media(max-width:680px) {
  .det--A, .det--B, .det--D { grid-template-columns: 1fr; }
  .det-c-body { grid-template-columns: 1fr; }
  .det-c-side { order: -1; }
  .det--A .dfgrid { grid-template-columns: repeat(2, 1fr); }
  .det--C .det-c-hero { padding: 1.1rem; }
  .det--D .dcc { flex-direction: row; flex-wrap: wrap; }
  .det--D .dcph, .det--D .dci { width: 120px; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §44b — BLOCS PRINCIPAUX CUSTOM (champs textarea is_main)
   Rendu pleine largeur comme Description/Critique, avec troncature optionnelle.
   .det-main-preview : aperçu tronqué visible par défaut
   .det-main-full    : texte complet, masqué par défaut
   .det-main-more    : barre avec bouton "Voir la suite…" / "Réduire"
   ═══════════════════════════════════════════════════════════════════════════ */
.det-main-preview,
.det-main-full {
  position: relative;
}
.det-main-preview::after {
  content: '';
  display: block;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--bg1));
  margin-top: -2.5rem;
  position: relative;
  pointer-events: none;
}
/* Quand le contenu est court (moins d'un paragraphe), ne pas afficher le dégradé */
.det-main-preview:not(:has(p + *))::after { display: none; }
.det-main-more {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding-top: .4rem;
  border-top: .5px solid var(--b1);
}
.det-main-more-btn {
  font-size: 12px;
  padding: 3px 10px;
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  color: var(--ib);
  cursor: pointer;
  transition: background .15s;
}
.det-main-more-btn:hover {
  background: var(--bg2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §44c — CURSEUR TAILLE DES CARTES (vue grille)
   ═══════════════════════════════════════════════════════════════════════════ */
.grid-size-control {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.grid-size-icon {
  font-size: 14px;
  color: var(--tx2);
  line-height: 1;
  user-select: none;
}
.grid-size-slider {
  width: 80px;
  height: 4px;
  cursor: pointer;
  accent-color: var(--ib);
  opacity: .75;
  transition: opacity .15s;
}
.grid-size-slider:hover { opacity: 1; }

.md-paste-indicator {
  font-size: 11px;
  color: var(--ib);
  background: var(--bg2);
  border: .5px solid var(--ib);
  border-radius: var(--r2);
  padding: 2px 8px;
  margin-top: 4px;
  display: inline-block;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §44d — THÈMES E, F, G — Variantes héros + couverture
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Commun E/F/G : icônes de section ─────────────────────────────────── */
.det-e-ptitle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .65rem;
  padding-bottom: .45rem;
  border-bottom: .5px solid var(--b1);
}
.det-e-icon { font-size: 13px; opacity: .75; }
.det-e-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.det-e-tag  { font-size: 11px; border-radius: 20px; padding: 2px 8px; }

/* ── THÈME E : héros avec couverture intégrée ─────────────────────────── */
.det--E { display: block; }
.det-e-hero {
  border-radius: var(--r3);
  display: flex;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.det-e-cover {
  width: 130px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  background: rgba(0,0,0,.08);
}
.det-e-cover .dci,
.det-e-cover .dcph {
  width: 130px;
  aspect-ratio: unset;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
}
.det-e-cover .dcph { font-size: 48px; }
.det-e-hero-body {
  flex: 1;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .6rem;
}
.det-e-hero-top { display: flex; flex-direction: column; gap: .15rem; }
.det-e-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin: .3rem 0 .15rem;
}
.det-e-sub { font-size: var(--fs-base); margin-top: .1rem; }

/* ── THÈME F : sidebar couverture large ───────────────────────────────── */
.det--F { display: block; }
.det-f-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.det-f-left  { display: flex; flex-direction: column; gap: .75rem; }
.det-f-right { display: flex; flex-direction: column; gap: .875rem; }
.det-f-cover {
  width: 100%;
  border-radius: var(--r3);
  overflow: hidden;
  border: .5px solid var(--b1);
}
.det-f-cover .dci  { width: 100%; height: auto; border-radius: 0; border: none; }
.det-f-cover .dcph { width: 100%; aspect-ratio: 2/3; border-radius: 0; font-size: 56px; }
.det-f-hero {
  border-radius: var(--r3);
  padding: 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.det-f-title {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  margin: .25rem 0 .15rem;
}
.det-f-sub { font-size: var(--fs-base); }

/* ── THÈME G : héros pleine largeur image à droite ───────────────────── */
.det--G { display: block; }
.det-g-hero {
  border-radius: var(--r3);
  display: grid;
  grid-template-columns: 1fr 130px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  min-height: 170px;
}
.det-g-hero-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .4rem;
}
.det-g-cover {
  background: rgba(0,0,0,.1);
  display: flex;
  align-items: stretch;
}
.det-g-cover .dci,
.det-g-cover .dcph {
  width: 130px;
  aspect-ratio: unset;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
}
.det-g-cover .dcph { font-size: 48px; }
.det-g-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin: .3rem 0 .15rem;
}
.det-g-sub { font-size: var(--fs-base); }
.det-g-panel {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  padding: 1rem 1.125rem;
  margin-bottom: 0;
}
.det-g-ptitle {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .6rem;
  padding-bottom: .45rem;
  border-bottom: .5px solid var(--b2);
}

/* ── Responsive E/F/G ──────────────────────────────────────────────────── */
@media(max-width:680px) {
  .det-e-hero { flex-direction: column; }
  .det-e-cover, .det-e-cover .dcph { width: 100%; min-height: 180px; }
  .det-e-cover .dci { width: 100%; height: auto; min-height: unset; }
  .det-f-wrap  { grid-template-columns: 1fr; }
  .det-f-left  { display: grid; grid-template-columns: 140px 1fr; gap: .75rem; }
  .det-g-hero  { grid-template-columns: 1fr; }
  .det-g-cover { display: none; }
}

/* ── Miniatures preview config_apparence ───────────────────────────────── */
.tp-e-hero {
  display: flex;
  gap: 4px;
  background: #E6F1FB;
  border-radius: 3px;
  padding: 4px;
  margin-bottom: 4px;
  height: 36px;
  align-items: center;
}
.tp-e-img  { width: 20px; background: #B5D4F4; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.tp-e-text { flex: 1; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.tp-f-cover { width: 22px; background: #FAEEDA; border-radius: 2px; flex-shrink: 0; }
.tp-g-hero {
  display: flex;
  gap: 4px;
  background: #EEEDFE;
  border-radius: 3px;
  padding: 4px;
  margin-bottom: 4px;
  height: 36px;
  align-items: center;
}
.tp-g-img  { width: 20px; background: #AFA9EC; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
.tp-h-cover { width: 38px; background: #FAEEDA; border-radius: 2px; flex-shrink: 0; align-self: stretch; }

.det--H { display: block; }
.det-h-wrap {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.det-h-actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.det-h-actions .btn,
.det-h-actions button,
.det-h-actions form {
  width: 100%;
}
@media(max-width:860px) {
  .det-h-wrap { grid-template-columns: 1fr; }
  .det--H .det-f-left { display: grid; grid-template-columns: 200px 1fr; gap: .75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §44c — EN-TÊTE DE TYPE (vue liste/grille)
   Bloc affiché au-dessus de la barre de statistiques quand un type est filtré.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Proposition C — en-tête type (th-c) */
.th-c { border-radius: var(--r3); overflow: hidden; margin-bottom: 1.25rem; }
.th-c-top {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg1); border: .5px solid var(--b2); border-radius: var(--r3);
  overflow: hidden; min-height: 110px;
}
.th-c-media {
  width: 90px; flex-shrink: 0; line-height: 0;
  background: var(--bg2); border-right: .5px solid var(--b2);
}
.th-c-media--placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.th-c-body {
  flex: 1; min-width: 0; padding: 1rem 1.25rem;
  display: flex; flex-direction: column; justify-content: center; gap: .35rem;
}
.th-c-title { font-size: var(--fs-title); font-weight: 500; color: var(--tx); line-height: 1.2; }
.th-c-desc  { font-size: var(--fs-ui); color: var(--tx2); line-height: 1.5; }
.th-c-count { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; }
.th-c-count-num { font-size: 22px; font-weight: 500; color: var(--tx); line-height: 1; }
.th-c-count-lbl { font-size: var(--fs-xs); color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; }
.th-c-action { flex-shrink: 0; padding: 0 1.25rem; display: flex; align-items: center; }
@media (max-width: 600px) {
  .th-c-top { flex-wrap: wrap; }
  .th-c-media { width: 100%; height: 80px; }
  .th-c-action { padding: 0 1rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §45 — SÉLECTEUR DE THÈME (config_apparence)
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.theme-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1.5px solid var(--b2);
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--bg1);
  transition: border-color .15s;
}
.theme-card input { display: none; }
.theme-card:hover { border-color: var(--b3); }
.theme-card--sel { border-color: var(--tx); }

/* Zone de prévisualisation miniature */
.theme-card-preview {
  height: 120px;
  background: var(--bg);
  display: flex;
  gap: 5px;
  padding: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Infos sous la prévisualisation */
.theme-card-info {
  padding: .6rem .75rem .65rem;
  border-top: .5px solid var(--b1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-card-letter {
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.theme-card--sel .theme-card-letter { color: var(--tx); }
.theme-card-name { font-size: var(--fs-sm); font-weight: 500; color: var(--tx); }
.theme-card-desc { font-size: var(--fs-xs); color: var(--tx3); line-height: 1.4; }

/* ── Mini-prévisualisations par thème ── */

/* Thème A : couverture + cartes */
.tp-a-cover { width: 28px; background: var(--ib); border-radius: 3px; flex-shrink: 0; }
.tp-a-cards { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tp-card { background: var(--bg1); border: .5px solid var(--b2); border-radius: 3px; padding: 5px; flex: 1; }
.tp-card-title { flex: 0 0 22px; }
.tp-card-tall { flex: 0 0 36px; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.tp-grid span { background: var(--bg3); border-radius: 2px; height: 8px; display: block; }

/* Thème B : couverture + lignes */
.tp-b-cover { width: 26px; background: var(--wb); border-radius: 3px; flex-shrink: 0; }
.tp-b-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.tp-b-title { height: 10px; background: var(--bg3); border-radius: 2px; width: 70%; }
.tp-row { height: 7px; background: var(--b1); border-radius: 1px; border-bottom: .5px solid var(--b1); }
.tp-row-tall { height: 18px; background: var(--bg2); border-radius: 2px; }
.tp-hr { border: none; border-top: .5px solid var(--b2); margin: 1px 0; }

/* Thème C : héros + colonnes */
.tp-c-hero { position: absolute; inset: 0 0 72px 0; background: var(--ib); border-radius: 3px 3px 0 0; }
.theme-card-preview { position: relative; }
.tp-c-cols { position: absolute; bottom: 0; left: 0; right: 0; height: 72px; display: flex; gap: 4px; padding: 0 0 4px; }
.tp-c-main { flex: 1; }
.tp-c-side { width: 36%; display: flex; flex-direction: column; gap: 3px; }

/* Thème D : couverture + timeline */
.tp-d-cover { width: 26px; background: var(--pb, #EEEDFE); border-radius: 3px; flex-shrink: 0; }
.tp-d-tl { flex: 1; display: flex; flex-direction: column; gap: 0; padding-left: 8px; }
.tp-d-step { position: relative; border-left: 1.5px solid var(--b2); padding: 4px 0 6px 8px; }
.tp-d-last { border-left-color: transparent; }
.tp-d-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg3); border: 1.5px solid var(--b3); position: absolute; left: -4px; top: 6px; }
.tp-d-step > span { display: block; height: 6px; background: var(--bg3); border-radius: 2px; width: 50%; }
.tp-d-block { height: 14px; background: var(--bg2); border-radius: 2px; }
.tp-d-block-tall { height: 22px; }

/* ═══════════════════════════════════════════════════════════════════════════
   §46 — THÈMES D'EN-TÊTE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Éléments partagés entre thèmes ─────────────────────────────────────── */
.hdr-inner { padding: 0 1.5rem; max-width: 100%; }
.hdr-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: var(--r2);
  border: .5px solid transparent;
  font-size: var(--fs-ui); color: var(--tx2); white-space: nowrap;
  text-decoration: none; transition: background .12s;
}
.hdr-tab:hover  { background: var(--bg2); color: var(--tx); }
.hdr-tab--on    { background: var(--tx); color: var(--bg1); border-color: var(--tx); font-weight: 500; }
.hdr-count      { opacity: .5; font-size: var(--fs-xs); }
.hdr-count-r    { margin-left: auto; }

/* ── Onglets SVG avec label et badge compteur ─────────────────────────────── */
.hdr-tab-svg {
  position: relative;
  padding: 6px 12px 6px 8px;
  gap: 7px;
  border-radius: 10px;
  white-space: nowrap;
}
/* Taille icône = 55% de --th, clampée entre 22px et 52px */
.hdr-tab-svg svg,
.hdr-tab-svg img {
  display: block;
  width:  clamp(22px, calc(var(--th) * .55), 52px);
  height: clamp(22px, calc(var(--th) * .55), 52px);
  flex-shrink: 0;
}
.hdr-tab-svg-label {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--tx2);
}
.hdr-tab-svg:hover .hdr-tab-svg-label { color: var(--tx); }
/* Badge compteur — se repositionne selon la taille de l'icône */
.hdr-tab-badge {
  position: absolute;
  top: 2px;
  left: clamp(18px, calc(var(--th) * .45), 42px);
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--bg2);
  color: var(--tx2);
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 1.5px solid var(--bg1);
}
.hdr-tab-svg.hdr-tab--on {
  background: var(--tx);
  border-color: var(--tx);
}
.hdr-tab-svg.hdr-tab--on .hdr-tab-svg-label {
  color: var(--bg1);
  font-weight: 600;
}
.hdr-tab-svg.hdr-tab--on .hdr-tab-badge {
  background: var(--bg1);
  color: var(--tx);
  border-color: var(--tx);
}
/* Plus d'espace entre les onglets dans la zone de navigation */
.tabs { gap: 3px; }
.hdr-tabs-desktop { gap: 3px; }
.hdr-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-size: 18px; flex-shrink: 0;
  border-radius: var(--r2); border: .5px solid transparent;
  text-decoration: none; color: var(--tx2); transition: background .12s;
}
.hdr-icon:hover,.hdr-icon--on { background: var(--bg2); border-color: var(--b2); }
.hdr-icon-svg { font-size: 0; }
.hdr-icon-svg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex-shrink: 0; }
/* Icônes UI chargées depuis un pack — <img> préservant les couleurs du SVG */
.hdr-icon-pack,
.hdr-p1-right .hdr-icon-pack,
.hdr-p2-right .hdr-icon-pack,
.hdr-d-right .hdr-icon-pack,
.hdr-a-right .hdr-icon-pack,
.hdr-e-right .hdr-icon-pack {
  font-size: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hdr-icon-pack:hover,
.hdr-p1-right .hdr-icon-pack:hover,
.hdr-p2-right .hdr-icon-pack:hover,
.hdr-d-right .hdr-icon-pack:hover,
.hdr-a-right .hdr-icon-pack:hover,
.hdr-e-right .hdr-icon-pack:hover { background: none !important; border: none !important; }
.hdr-icon-pack.hdr-icon--on { background: none !important; border: none !important; }
/* SVG inline des icônes UI — neutralise fill:none/stroke:currentColor du CSS global */
.hdr-ui-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(22px, calc(var(--th) * .55), 52px);
  height: clamp(22px, calc(var(--th) * .55), 52px);
  flex-shrink: 0;
  overflow: hidden;
}
.hdr-ui-icon svg, .hdr-ui-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Dans la topbar droite, les icônes UI sont plus petites */
.hdr-icon .hdr-ui-icon {
  width: 22px;
  height: 22px;
}
.hdr-uname {
  font-size: var(--fs-sm); font-weight: 500; color: var(--tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.hdr-vsep { display: none; }

/* ── THÈME ORIG — barre compacte originale ───────────────────────────────── */
.hdr-orig { position: sticky; top: 0; z-index: 100; height: var(--th); background: var(--bg1); border-bottom: .5px solid var(--b2); }
.hdr-orig .hdr-inner { height: 100%; display: flex; align-items: center; gap: 1rem; }
.hdr-brand-orig { font-size: 16px; font-weight: 500; white-space: nowrap; flex-shrink: 0; text-decoration: none; color: var(--tx); display: flex; align-items: center; gap: 6px; }
.hdr-orig .tabs  { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.hdr-orig .tabs::-webkit-scrollbar { display: none; }
.hdr-orig .tab   { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: var(--r2); border: .5px solid transparent; font-size: var(--fs-ui); color: var(--tx2); white-space: nowrap; text-decoration: none; transition: background .12s; }
.hdr-orig .tab:hover  { background: var(--bg2); color: var(--tx); }
.hdr-orig .tab.active { background: var(--tx); color: var(--bg1); border-color: var(--tx); font-weight: 500; }
.hdr-orig .count { opacity: .5; font-size: var(--fs-xs); }
.htheme--orig .wrap { padding-top: 1.5rem; }

/* ── THÈME A — double rangée ─────────────────────────────────────────────── */
.hdr-a { position: sticky; top: 0; z-index: 100; background: var(--bg1); border-bottom: .5px solid var(--b2); }
.hdr-a .hdr-inner { display: flex; flex-direction: column; }
.hdr-a-brand {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0; border-bottom: .5px solid var(--b1);
}
.hdr-a-identity {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: var(--tx); flex-shrink: 0;
}
.hdr-a-name    { font-size: 18px; font-weight: 500; }
.hdr-a-tagline { font-size: var(--fs-xs); color: var(--tx3); display: block; margin-top: 1px; }
.hdr-a-right   { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.hdr-a-nav     { display: flex; gap: 3px; padding: .3rem 0; overflow-x: auto; scrollbar-width: none; }
.hdr-a-nav::-webkit-scrollbar { display: none; }
.htheme--A .wrap { padding-top: 1.5rem; }

/* ── THÈME B — sidebar verticale ────────────────────────────────────────── */
.hdr-b-layout  { display: flex; min-height: 100vh; }
.hdr-b-side {
  width: 200px; min-width: 200px; flex-shrink: 0;
  background: var(--bg1); border-right: .5px solid var(--b2);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: .85rem .6rem;
}
.hdr-b-toprow { display: contents; } /* transparent sur desktop — visible en flex sur mobile */
.hdr-b-brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--tx);
  padding: .3rem .4rem .75rem; border-bottom: .5px solid var(--b1);
  margin-bottom: .5rem;
}
.hdr-b-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hdr-b-title   { font-size: var(--fs-base); font-weight: 500; color: var(--tx); line-height: 1.2; }
.hdr-b-tagline { font-size: var(--fs-xxs); color: var(--tx3); }
.hdr-b-nav     { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hdr-b-tab {
  display: flex; align-items: center; gap: .45rem;
  padding: .38rem .55rem; border-radius: var(--r2);
  font-size: var(--fs-ui); color: var(--tx2); text-decoration: none;
  transition: background .1s;
}
.hdr-b-tab:hover   { background: var(--bg2); color: var(--tx); }
.hdr-b-tab--on     { background: var(--tx); color: var(--bg1); border-color: var(--tx); font-weight: 500; }
.hdr-b-icon        { font-size: var(--fs-base); width: 18px; text-align: center; flex-shrink: 0; }
.hdr-b-bottom      { border-top: .5px solid var(--b1); padding-top: .5rem; margin-top: .5rem; display: flex; flex-direction: column; gap: 2px; }
.hdr-b-user        { cursor: default; }
.hdr-b-content     { flex: 1; min-width: 0; }
.hdr-b-content .wrap { padding: 1.5rem; }

/* ── THÈME C — barre compacte pills ─────────────────────────────────────── */
.hdr-c { position: sticky; top: 0; z-index: 100; background: var(--bg1); border-bottom: .5px solid var(--b2); }
.hdr-c-inner { display: flex; align-items: center; gap: .75rem; padding-top: .55rem; padding-bottom: .55rem; }
.hdr-c-brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--tx); flex-shrink: 0;
}
.hdr-c-logo    { display: flex; align-items: center; }
.hdr-c-name    { font-size: 16px; font-weight: 500; }
.hdr-c-tagline { font-size: var(--fs-xxs); color: var(--tx3); display: block; margin-top: 1px; }
.hdr-c-nav     { display: flex; gap: .35rem; flex: 1; flex-wrap: wrap; justify-content: center; overflow: hidden; }
.hdr-c-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 99px;
  border: .5px solid var(--b2); background: transparent;
  font-size: var(--fs-sm); color: var(--tx2); white-space: nowrap; text-decoration: none;
  transition: background .1s, color .1s;
}
.hdr-c-tab:hover  { background: var(--bg2); color: var(--tx); }
.hdr-c-tab--on    { background: var(--tx); color: var(--bg1); border-color: var(--tx); }
.hdr-c-right { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.htheme--C .wrap { padding-top: 1.5rem; }

/* ── THÈME D — hero sombre + nav soulignée ───────────────────────────────── */
.hdr-d { position: sticky; top: 0; z-index: 100; }
.hdr-d-brand { background: var(--tx); padding: .75rem 0; }
.hdr-d-inner { display: flex; align-items: center; gap: 1rem; }
.hdr-d-identity {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; flex-shrink: 0;
}
.hdr-d-logo    { display: flex; align-items: center; }
.hdr-d-logo img,.hdr-d-logo span { filter: brightness(10); }
.hdr-d-name    { font-size: 20px; font-weight: 500; color: var(--bg1); }
.hdr-d-tagline { font-size: var(--fs-xs); color: rgba(255,255,255,.5); display: block; margin-top: 2px; }
.hdr-d-right   { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.hdr-d-icon    { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 16px; border-radius: var(--r2); background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); text-decoration: none; border: none; }
.hdr-d-icon:hover,.hdr-d-icon--on { background: rgba(255,255,255,.22); }
.hdr-d-right .hdr-icon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); border-color: transparent; }
.hdr-d-right .hdr-icon:hover, .hdr-d-right .hdr-icon.hdr-icon--on { background: rgba(255,255,255,.22); }
.hdr-d-uname   { font-size: var(--fs-sm); color: rgba(255,255,255,.6); }
.hdr-d-nav-wrap { background: var(--bg1); border-bottom: .5px solid var(--b2); }
.hdr-d-nav     { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.hdr-d-nav::-webkit-scrollbar { display: none; }
.hdr-d-nav .hdr-tab { border-radius: 0; border: none; border-bottom: 2px solid transparent; padding: .55rem .9rem; }
.hdr-d-nav .hdr-tab:hover  { background: var(--bg2); border-bottom-color: var(--b2); }
.hdr-d-nav .hdr-tab--on    { background: transparent; border-bottom-color: var(--tx); color: var(--tx); }
.htheme--D .wrap { padding-top: 1.5rem; }

/* ── THÈME E — double rangée renforcée ───────────────────────────────────── */
.hdr-e { position: sticky; top: 0; z-index: 100; background: var(--bg1); border-bottom: .5px solid var(--b2); }
.hdr-e .hdr-inner { display: flex; flex-direction: column; }
.hdr-e-brand {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 0 1rem; border-bottom: .5px solid var(--b2);
}
.hdr-e-identity {
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: var(--tx); flex-shrink: 0;
}
.hdr-e-logo    { display: flex; align-items: center; }
.hdr-e-name    { font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.hdr-e-tagline { font-size: var(--fs-sm); color: var(--tx3); display: block; margin-top: 3px; }
.hdr-e-counter { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hdr-e-cval    { font-size: 20px; font-weight: 500; color: var(--tx); line-height: 1; }
.hdr-e-clbl    { font-size: var(--fs-xxs); color: var(--tx3); }
.hdr-e-right   { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.hdr-e-user {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem; border-radius: var(--r2);
  border: .5px solid var(--b2); background: var(--bg2);
  font-size: var(--fs-sm); color: var(--tx2);
}
.hdr-e-nav {
  display: flex; gap: 3px; padding: .3rem 0;
  overflow-x: auto; scrollbar-width: none;
  background: var(--bg2); margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem;
}
.hdr-e-nav::-webkit-scrollbar { display: none; }
.hdr-e-nav .hdr-tab--on { background: var(--tx); color: var(--bg1); border-color: var(--tx); }
.htheme--E .wrap { padding-top: 1.5rem; }

/* ── Ajustement sticky pour les thèmes à hauteur variable ───────────────── */
.htheme--B .fcc { position: static; }

@media(max-width:768px) {
  .hdr-b-layout { flex-direction: column; }
  .hdr-b-side { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; padding: .5rem; border-right: none; border-bottom: .5px solid var(--b2); }
  .hdr-b-brand { border-bottom: none; margin-bottom: 0; padding-bottom: .3rem; }
  .hdr-b-nav { flex-direction: row; flex: none; overflow-x: auto; }
  .hdr-b-bottom { flex-direction: row; border-top: none; border-left: .5px solid var(--b1); margin: 0 0 0 .5rem; padding: 0 0 0 .5rem; }
  .hdr-e-brand { flex-wrap: wrap; }
  .hdr-c-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

/* ── Mini-prévisualisations thèmes d'en-tête (config) ──────────────────── */
.htp-bar  { display:flex;align-items:center;gap:4px;padding:4px 6px;background:var(--bg1);border-radius:3px;width:100%;border:.5px solid var(--b2) }
.htp-bar-c { flex-wrap:wrap;gap:3px }
.htp-logo-sq { flex-shrink:0;background:var(--ib);border-radius:2px }
.htp-logo-sm { width:14px;height:14px }
.htp-logo-lg { width:26px;height:26px }
.htp-logo-sq:not(.htp-logo-sm):not(.htp-logo-lg) { width:20px;height:20px }
.htp-logo-rnd { width:16px;height:16px;border-radius:50%;background:var(--ib);flex-shrink:0 }
.htp-name    { flex-shrink:0;background:var(--bg3);border-radius:2px;height:7px;width:50px }
.htp-name-sm { width:36px;height:6px }
.htp-name-lg { width:60px;height:10px }
.htp-tabs { display:flex;gap:2px;flex:1;margin-left:2px }
.htp-tabs span { background:var(--bg2);border-radius:2px;height:10px;flex:1 }
.htp-pills { display:flex;gap:2px;flex:1;justify-content:center }
.htp-pills span { background:var(--bg2);border:.5px solid var(--b2);border-radius:99px;height:10px;width:22px }
.htp-pills span.on { background:var(--tx);border-color:var(--tx) }
/* Double rangée A */
.htp-row1 { display:flex;align-items:center;gap:5px;padding:5px 6px;background:var(--bg1);border-bottom:.5px solid var(--b1);border-radius:3px 3px 0 0 }
.htp-row1-tall { padding:8px 6px }
.htp-row2 { display:flex;gap:3px;padding:3px 6px;background:var(--bg1);border-radius:0 0 3px 3px;border:.5px solid var(--b2);border-top:none }
.htp-row2 span { background:var(--bg2);border-radius:2px;height:8px;flex:1 }
.htp-row2-tinted { background:var(--bg2) }
/* Sidebar B */
.htp-<?= 'B' ?> .theme-card-preview,.htp-B .theme-card-preview { flex-direction:row!important;gap:0 }
.htp-side { width:45px;background:var(--bg1);border-right:.5px solid var(--b2);padding:4px;display:flex;flex-direction:row;gap:3px;align-items:flex-start }
.htp-sitem { display:block;height:7px;background:var(--bg2);border-radius:2px;width:100% }
.htp-sitem-on { background:var(--bg3) }
.htp-content { flex:1;background:var(--bg) }
/* Hero D */
.htp-hero { height:32px;background:var(--bg3);border-radius:3px 3px 0 0 }
.htp-und { display:flex;gap:0;padding:0 4px;background:var(--bg1);border-radius:0 0 3px 3px;border:.5px solid var(--b2);border-top:none }
.htp-und span { flex:1;height:12px;border-bottom:2px solid transparent;margin:0 1px }
.htp-und span.on { border-bottom-color:var(--tx) }

/* ═══════════════════════════════════════════════════════════════════════════
   §47 — GESTIONNAIRE DE PALETTES DE COULEURS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grille de sélection ─────────────────────────────────────────────────── */
.pal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: .5rem;
  margin-top: .65rem;
}
.pal-sel-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1.5px solid var(--b2);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--bg1);
  transition: border-color .15s;
}
.pal-sel-card input { display: none; }
.pal-sel-card:hover   { border-color: var(--b3); }
.pal-sel-card--on     { border-color: var(--tx); }
.pal-sel-new          { border-style: dashed; }
.pal-sel-new:hover    { border-style: solid; }

/* Mini-aperçu */
.pal-mini {
  height: 94px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pal-mini-bar {
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.pal-mini-dot   { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.pal-mini-title { height: 6px; border-radius: 2px; width: 40%; }
.pal-mini-tabs  { display: flex; gap: 3px; flex: 1; }
.pal-mini-body  {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px 5px 4px;
}
.pal-mini-card { border-radius: 3px; padding: 4px 5px; display: flex; flex-direction: column; gap: 2px; }
.pal-mini-new  { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg2); }

/* Info sous la mini */
.pal-sel-info {
  padding: .35rem .5rem .4rem;
  border-top: .5px solid var(--b1);
  display: flex;
  align-items: center;
  gap: .3rem;
  min-height: 32px;
}
.pal-sel-name    { font-size: var(--fs-xs); font-weight: 500; color: var(--tx); flex: 1; line-height: 1.3; }
.pal-sel-builtin { font-size: 9px; color: var(--tx3); flex-shrink: 0; }
.pal-sel-actions { display: flex; gap: 3px; flex-shrink: 0; }
.pal-sel-act {
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-xs); color: var(--tx3); padding: 1px 3px; border-radius: 3px;
  text-decoration: none;
}
.pal-sel-act:hover { color: var(--tx); background: var(--bg2); }

/* ── Éditeur de palette ──────────────────────────────────────────────────── */
.pal-editor {
  margin-top: 1.25rem;
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  background: var(--bg1);
  overflow: clip;
}
.pal-editor-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--bg2);
  border-bottom: .5px solid var(--b2);
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--tx);
}
.pal-editor-name-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem .5rem;
  flex-wrap: wrap;
}
.pal-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  padding: .5rem 1rem 1rem;
}
.pal-var-row {
  padding: .65rem .5rem;
  border-bottom: .5px solid var(--b1);
}
.pal-var-row:last-child { border-bottom: none; }
.pal-var-header {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: 2px;
}
.pal-var-label { font-size: var(--fs-sm); font-weight: 500; color: var(--tx); }
.pal-var-key   { font-size: var(--fs-xxs); color: var(--tx3); }
.pal-var-hint  { font-size: var(--fs-xs); color: var(--tx3); margin-bottom: .4rem; }
.pal-var-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.pal-var-swatch {
  width: 28px;
  height: 28px;
  border-radius: var(--r1);
  border: .5px solid var(--b2);
  flex-shrink: 0;
}
.pal-color-picker {
  width: 32px;
  height: 28px;
  padding: 1px;
  border: .5px solid var(--b2);
  border-radius: var(--r1);
  cursor: pointer;
  flex-shrink: 0;
  background: none;
}
.pal-color-text {
  font-size: var(--fs-xs);
  font-family: ui-monospace, monospace;
  width: 150px;
  padding: 4px 7px;
  border: .5px solid var(--b2);
  border-radius: var(--r1);
  background: var(--bg1);
  color: var(--tx);
}
.pal-alpha-wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
}
.pal-alpha-label { font-size: var(--fs-xxs); color: var(--tx3); white-space: nowrap; }
.pal-alpha-range { width: 80px; }
.pal-alpha-pct   { font-size: var(--fs-xs); color: var(--tx2); min-width: 30px; }

/* ── Aperçu live ─────────────────────────────────────────────────────────── */
.pal-preview-wrap  { padding: .75rem 1rem 0; }
.pal-preview-label { font-size: var(--fs-xs); color: var(--tx3); margin-bottom: .4rem; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }

/* ── Cadre aperçu — toutes les couleurs passent par --pv-* ── */
.pal-preview-frame {
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--pv-bg, var(--bg));
  font-family: inherit;
}

/* Header */
.pal-pv-bar {
  padding: .35rem .6rem;
  background: var(--pv-bg1, var(--bg1));
  display: flex;
  align-items: center;
  gap: .4rem;
  border-bottom: .5px solid var(--pv-b2, var(--b2));
}
.pal-pv-logo  { font-size: 13px; }
.pal-pv-title { font-weight: 500; color: var(--pv-tx, var(--tx)); font-size: var(--pv-fs-ui, var(--fs-ui)); }
.pal-pv-tabs  { display: flex; gap: 2px; margin-left: auto; }
.pal-pv-tabs span {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--pv-fs-xxs, var(--fs-xxs));
  color: var(--pv-tx2, var(--tx2));
  background: transparent;
}
.pal-pv-tabs span.on {
  background: var(--pv-bg2, var(--bg2));
  color: var(--pv-tx, var(--tx));
  border: .5px solid var(--pv-b2, var(--b2));
}

/* Barre recherche */
.pal-pv-search {
  padding: .3rem .6rem;
  background: var(--pv-bg, var(--bg));
  border-bottom: .5px solid var(--pv-b2, var(--b2));
  display: flex;
  gap: .3rem;
  align-items: center;
}
.pal-pv-search-input {
  flex: 1;
  background: var(--pv-bg1, var(--bg1));
  border: .5px solid var(--pv-b2, var(--b2));
  border-radius: 4px;
  padding: 2px 6px;
  font-size: var(--pv-fs-sm, var(--fs-sm));
  color: var(--pv-tx3, var(--tx3));
}
.pal-pv-filter {
  background: var(--pv-bg2, var(--bg2));
  border: .5px solid var(--pv-b2, var(--b2));
  border-radius: 4px;
  padding: 2px 6px;
  font-size: var(--pv-fs-xxs, var(--fs-xxs));
  color: var(--pv-tx2, var(--tx2));
}

/* Grille cartes */
.pal-pv-body {
  background: var(--pv-bg, var(--bg));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  padding: .4rem .6rem;
}
.pal-pv-card {
  background: var(--pv-bg1, var(--bg1));
  border: .5px solid var(--pv-b2, var(--b2));
  border-radius: 4px;
  padding: .35rem .45rem;
}
.pal-pv-card-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.pal-pv-badge  { font-size: var(--pv-fs-xxs, var(--fs-xxs)); color: var(--pv-tx2, var(--tx2)); }
.pal-pv-status { font-size: var(--pv-fs-xxs, var(--fs-xxs)); color: var(--pv-tx3, var(--tx3)); }
.pal-pv-name   { font-size: var(--pv-fs-card, var(--fs-card)); font-weight: 500; color: var(--pv-tx, var(--tx)); line-height: var(--pv-lh-base, var(--lh-base)); }
.pal-pv-sub    { font-size: var(--pv-fs-xs, var(--fs-xs)); color: var(--pv-tx2, var(--tx2)); }
.pal-pv-stars  { font-size: var(--pv-fs-xxs, var(--fs-xxs)); color: var(--pv-tx2, var(--tx2)); margin-top: 2px; letter-spacing: -.5px; }

/* Vue tableau */
.pal-pv-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pv-bg1, var(--bg1));
  border-top: .5px solid var(--pv-b2, var(--b2));
}
.pal-pv-table th {
  padding: 3px 6px;
  text-align: left;
  font-size: var(--pv-fs-xxs, var(--fs-xxs));
  font-weight: 500;
  color: var(--pv-tx2, var(--tx2));
  background: var(--pv-bg2, var(--bg2));
  border-bottom: .5px solid var(--pv-b2, var(--b2));
}
.pal-pv-table td {
  padding: 3px 6px;
  font-size: var(--pv-fs-xs, var(--fs-xs));
  color: var(--pv-tx, var(--tx));
  border-bottom: .5px solid var(--pv-b2, var(--b2));
}
.pal-pv-table td.muted { color: var(--pv-tx2, var(--tx2)); }
.pal-pv-table td.hint  { color: var(--pv-tx3, var(--tx3)); }
.pal-pv-table tr:last-child td { border-bottom: none; }

/* Fiche détail */
.pal-pv-detail {
  background: var(--pv-bg, var(--bg));
  padding: .4rem .6rem;
  border-top: .5px solid var(--pv-b2, var(--b2));
}
.pal-pv-detail-title {
  font-size: var(--pv-fs-title, var(--fs-title));
  font-weight: 500;
  color: var(--pv-tx, var(--tx));
  margin-bottom: 3px;
  line-height: var(--pv-lh-text, var(--lh-text));
}
.pal-pv-detail-desc {
  font-size: var(--pv-fs-sm, var(--fs-sm));
  color: var(--pv-tx2, var(--tx2));
  line-height: var(--pv-lh-text, var(--lh-text));
  margin-bottom: 4px;
}
.pal-pv-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--pv-fs-xs, var(--fs-xs));
  color: var(--pv-tx2, var(--tx2));
  padding: 2px 0;
  border-bottom: .5px solid var(--pv-b2, var(--b2));
}
.pal-pv-detail-row span:first-child { color: var(--pv-tx3, var(--tx3)); }

/* Fond extérieur (outer-bg) visible sur les bords */
.pal-pv-outer {
  background: var(--pv-outer-bg, var(--outer-bg, var(--pv-bg, var(--bg))));
  padding: 4px;
  border-bottom: .5px solid var(--pv-b2, var(--b2));
  display: flex;
  gap: 3px;
  align-items: center;
}
.pal-pv-outer-label {
  font-size: var(--pv-fs-xxs, var(--fs-xxs));
  color: var(--pv-tx3, var(--tx3));
  opacity: .7;
  flex: 1;
  text-align: center;
}
.pal-pv-outer-box {
  background: var(--pv-bg, var(--bg));
  border: .5px solid var(--pv-b2, var(--b2));
  border-radius: 3px;
  flex: 3;
  padding: 2px 5px;
  font-size: var(--pv-fs-xxs, var(--fs-xxs));
  color: var(--pv-tx2, var(--tx2));
}

/* Section label */
.pal-pv-section-label {
  font-size: var(--pv-fs-xxs, var(--fs-xxs));
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pv-tx3, var(--tx3));
  padding: 3px 6px;
  background: var(--pv-bg, var(--bg));
  border-bottom: .5px solid var(--pv-b2, var(--b2));
}

/* ── Notice palette intégrée ─────────────────────────────────────────────── */
.pal-builtin-notice {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .6rem 1rem;
  background: var(--wb);
  border-bottom: .5px solid var(--b2);
  font-size: var(--fs-xs);
  color: var(--wt);
}
.pal-builtin-notice span { flex: 1; min-width: 180px; }

/* ── Section typographie dans l'éditeur ──────────────────────────────────── */
.pal-typo-section {
  padding: .85rem 1rem 1rem;
  border-top: .5px solid var(--b2);
}
.pal-typo-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx);
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pal-typo-desc {
  font-size: var(--fs-xs);
  color: var(--tx3);
  margin-bottom: .85rem;
  line-height: 1.5;
}
.pal-typo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0;
}
.pal-typo-row {
  padding: .55rem .5rem;
  border-bottom: .5px solid var(--b1);
}
.pal-typo-row:last-child { border-bottom: none; }
.pal-typo-row-hdr {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: 2px;
}
.pal-typo-lbl {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx);
}
.pal-typo-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pal-typo-range {
  flex: 1;
  min-width: 80px;
  accent-color: var(--tx);
}
.pal-typo-val {
  font-size: var(--fs-xs);
  font-family: ui-monospace, monospace;
  color: var(--tx2);
  min-width: 38px;
  text-align: right;
}
.pal-typo-reset {
  margin-top: .75rem;
  text-align: right;
}

/* ── cfgpanel pleine largeur (éditeur palette ouvert) ────────────────────── */
.cfgpanel--fullwidth {
  grid-template-columns: 1fr;
}
.cfgpanel--fullwidth .cfginfo {
  display: none;
}

/* ── Éditeur palette 2 colonnes ──────────────────────────────────────────── */
.pal-editor-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.pal-editor-left {
  border-right: .5px solid var(--b2);
  min-width: 0;
}
.pal-editor-right {
  padding: .85rem 1rem;
  position: sticky;
  top: calc(var(--real-hdr-h, var(--th)) + 1rem);
  align-self: start;
  max-height: calc(100vh - var(--real-hdr-h, var(--th)) - 2rem);
  overflow-y: auto;
}

/* Grille couleurs : 2 sous-colonnes dans la colonne gauche */
.pal-vars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  padding: .5rem 1rem 1rem;
}

/* Séparateur aperçu intercalé */
.pal-preview-inline-sep {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  border-top: .5px solid var(--b2);
  border-bottom: .5px solid var(--b2);
  font-size: var(--fs-xxs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx3);
}
.pal-preview-inline-sep::after {
  content: '';
  flex: 1;
  height: .5px;
  background: var(--b2);
}

/* Aperçu intercalé (entre couleurs et typo) */
.pal-preview-inline {
  padding: .6rem 1rem;
  border-bottom: .5px solid var(--b2);
}

/* Barre d'actions en bas de l'éditeur */
.pal-editor-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-top: .5px solid var(--b2);
  background: var(--bg2);
}

/* ── Gestion des polices disponibles ─────────────────────────────────────── */
.pal-fonts-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-top: .6rem;
  max-width: 680px;
}
.pal-font-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .7rem;
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  background: var(--bg1);
}
.pal-font-builtin { opacity: .7; }
.pal-font-preview {
  font-size: var(--fs-base);
  color: var(--tx);
  min-width: 140px;
  flex-shrink: 0;
}
.pal-font-stack {
  font-size: var(--fs-xs);
  color: var(--tx3);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pal-font-badge {
  font-size: 9px;
  color: var(--tx3);
  border: .5px solid var(--b2);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.pal-font-badge-default {
  color: var(--tx2);
  border-color: var(--tx3);
  font-weight: 600;
}

/* Responsive : sous 900px → 1 colonne, aperçu intercalé seulement */
@media (max-width: 900px) {
  .pal-editor-body {
    grid-template-columns: 1fr;
  }
  .pal-editor-left {
    border-right: none;
  }
  .pal-editor-right {
    display: none; /* l'aperçu sticky disparaît, l'intercalé suffit */
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §47b — GESTION DES PACKS D'ICÔNES
   ═══════════════════════════════════════════════════════════════════════════ */
.icon-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 2rem;
}
.icon-pack-card {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.icon-pack-card--active {
  border: 2px solid var(--tx);
}
.icon-pack-card--new {
  border-style: dashed;
  background: var(--bg2);
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  min-height: 200px;
}
.icon-pack-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .75rem 1rem .6rem;
  border-bottom: .5px solid var(--b2);
}
.icon-pack-name { font-size: var(--fs-ui); font-weight: 500; color: var(--tx); }
.icon-pack-meta { font-size: var(--fs-xs); color: var(--tx3); margin-top: 2px; }
.icon-pack-badge {
  font-size: var(--fs-xxs); font-weight: 500;
  padding: 2px 8px; border-radius: 20px;
  background: var(--bg2); color: var(--tx2);
  border: .5px solid var(--b2); white-space: nowrap; flex-shrink: 0;
}
.icon-pack-badge--on {
  background: var(--tx); color: var(--bg1); border-color: transparent;
}
.icon-pack-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--bg2);
  padding: .6rem;
  gap: 0;
  flex: 1;
}
.icon-pack-preview-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 4px;
}
.icon-pack-preview-cell svg { width: 28px; height: 28px; display: block; }
.icon-pack-preview-name { font-size: var(--fs-xxs); color: var(--tx3); }
.icon-pack-missing {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--tx3);
  background: var(--bg3); border-radius: 6px; border: .5px dashed var(--b2);
}
.icon-pack-actions {
  display: flex; gap: 6px; align-items: center;
  padding: .6rem 1rem;
  border-top: .5px solid var(--b2);
}
.icon-pack-new-icon {
  width: 40px; height: 40px; border-radius: 10px;
  border: .5px solid var(--b2); background: var(--bg1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--tx2); margin-bottom: .5rem;
}
.icon-pack-new-label { font-size: var(--fs-ui); font-weight: 500; color: var(--tx2); margin-bottom: .25rem; }
.icon-pack-new-desc  { font-size: var(--fs-xs); color: var(--tx3); line-height: 1.5; }
/* Panneau édition */
.icon-pack-edit-panel {
  background: var(--bg1); border: .5px solid var(--b2);
  border-radius: var(--r3); overflow: hidden; margin-top: 1.5rem;
}
.icon-pack-edit-header {
  display: flex; align-items: center; gap: 8px;
  padding: .65rem 1rem;
  background: var(--bg2); border-bottom: .5px solid var(--b2);
  font-size: var(--fs-ui); font-weight: 500; color: var(--tx);
}
.icon-pack-edit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0;
}
.icon-pack-edit-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 14px 8px;
  border-right: .5px solid var(--b2); border-bottom: .5px solid var(--b2);
}
.icon-pack-edit-cell svg { width: 32px; height: 32px; display: block; }
.icon-pack-edit-name     { font-size: var(--fs-sm); font-weight: 500; color: var(--tx2); }
.icon-pack-edit-filename { font-size: var(--fs-xxs); color: var(--tx3); font-family: monospace; }
.icon-pack-upload-btn {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); padding: 3px 8px;
  border-radius: 4px; border: .5px solid var(--b2);
  background: var(--bg2); color: var(--tx2);
  cursor: pointer; margin-top: 2px;
}
.icon-pack-upload-btn:hover { background: var(--bg3); color: var(--tx); }

/* ═══════════════════════════════════════════════════════════════════════════
   §48 — SOUS-ONGLETS APPARENCE
   ═══════════════════════════════════════════════════════════════════════════ */
.app-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: .4rem 0 .4rem;
  border-bottom: .5px solid var(--b2);
  margin-top: 1.75rem;
  margin-bottom: 1.25rem;
}
.app-subtab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .9rem;
  border-radius: var(--r2);
  border: .5px solid transparent;
  font-size: var(--fs-ui);
  color: var(--tx2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
  position: relative;
  z-index: 1;
}
.app-subtab:hover { background: var(--bg3); color: var(--tx); }
.app-subtab--on   {
  background: var(--tx);
  color: var(--bg1);
  border-color: var(--tx);
  border-radius: var(--r2);
  font-weight: 500;
}
.app-subtab-icon  { font-size: var(--fs-base); }

/* Plus de raccord nécessaire : .app-subtabs n'a plus de fond englobant */
.app-subtabs + .cfgsec {
  margin-top: 0;
}

/* =============================================================================
   §49 — SIDEBAR DE NAVIGATION (PAGE PARAMÉTRAGE)
   =============================================================================
   Remplace la barre d'onglets plate par une sidebar fixe à gauche.

   .cfglayout        : grille page — sidebar 200px + zone principale 1fr.
   .cfgside          : sidebar — fond légèrement grisé, bordure droite, sticky.
   .cfgside-hdr      : en-tête sidebar (titre "Paramétrage").
   .cfgside-title    : texte du titre (14px, 500).
   .cfgside-group    : groupe de liens (Médias / Présentation / Admin).
   .cfgside-group-label : label de groupe (11px, majuscules, gris clair).
   .cfgnav           : lien de navigation sidebar — padding, arrondi, flex.
   .cfgnav--on       : état actif — fond texte, texte fond, gras.
   .cfgnav-ico       : icône emoji du lien (16px, fixé).
   .cfgnav-badge     : pastille rouge erreur (debug).
   .cfgbody          : zone principale à droite de la sidebar.
   ============================================================================= */

.cfglayout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  align-items: start;
  min-height: 60vh;
}

.cfgside {
  position: sticky;
  top: calc(var(--real-hdr-h, var(--th)) + 1rem);
  max-height: calc(100vh - var(--real-hdr-h, var(--th)) - 2rem);
  overflow-y: auto;
  background: var(--bg2);
  border-radius: var(--r3);
  padding: 0 0 1rem;
  scrollbar-width: thin;
}

.cfgside-hdr {
  padding: .9rem 1rem .6rem;
  border-bottom: .5px solid var(--b2);
  margin-bottom: .4rem;
}

.cfgside-title {
  font-size: var(--fs-ui);
  font-weight: 500;
  color: var(--tx);
}

.cfgside-group {
  padding: .5rem .5rem .2rem;
}

.cfgside-group + .cfgside-group {
  border-top: .5px solid var(--b2);
  margin-top: .3rem;
  padding-top: .5rem;
}

.cfgside-group-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .2rem .6rem .4rem;
}

.cfgnav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: var(--r2);
  font-size: var(--fs-ui);
  color: var(--tx2);
  text-decoration: none;
  transition: background .1s, color .1s;
  white-space: nowrap;
  min-width: 0;
}

.cfgnav:hover {
  background: var(--bg3);
  color: var(--tx);
}

.cfgnav--on {
  background: var(--tx);
  color: var(--bg1);
  font-weight: 500;
}

.cfgnav-ico {
  font-size: 14px;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.cfgnav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cfgbody {
  min-width: 0;
  padding: 0 0 0 1.5rem;
}

/* Responsive : sidebar repliée en bandeau horizontal sous 900px */
@media (max-width: 900px) {
  .cfglayout {
    grid-template-columns: 1fr;
  }

  .cfgside {
    position: static;
    max-height: none;
    border-right: none;
    border-radius: var(--r3) var(--r3) 0 0;
    border-bottom: .5px solid var(--b2);
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: .4rem .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .cfgside::-webkit-scrollbar { display: none; }

  .cfgside-hdr,
  .cfgside-group-label { display: none; }

  .cfgside-group {
    display: contents;
  }

  .cfgnav {
    padding: 5px 10px;
    font-size: var(--fs-xs);
    border-radius: var(--r2);
    flex-shrink: 0;
  }

  .cfgbody {
    padding: 1rem 0 0;
  }
}

@media (max-width: 640px) {
  .cfgside {
    gap: 2px;
  }

  .cfgnav-ico { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §49 — MODE BOXED
   Quand .app-boxed est présent sur <body>, le contenu est enfermé dans
   une boîte centrée avec bordure. La zone extérieure utilise --outer-bg.
   ═══════════════════════════════════════════════════════════════════════════ */
body.app-boxed {
  background: var(--outer-bg, #c8c4bc) !important;
  /* Pas de couleur de fond gérée ici — c'est --outer-bg qui fait le travail */
}

/* En mode boxed, l'image de fond body::before est désactivée
   (gérée par .app-box::before à la place) */
body.app-boxed::before { display: none !important; }

/* ── La box ── */
body.app-boxed .app-box {
  max-width: var(--box-width, 1200px);
  margin: 0 auto;
  background: var(--bg);
  border-left: 1px solid var(--b2);
  border-right: 1px solid var(--b2);
  box-shadow: 0 0 40px rgba(0,0,0,.18);
  min-height: 100vh;
  position: relative;
  isolation: isolate; /* crée un contexte d'empilement sans casser sticky */
}

/* Image de fond sur la box */
body.app-boxed .app-box::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--app-bg-url, none);
  background-size: var(--app-bg-size, cover);
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--app-bg-opacity, 0);
  pointer-events: none;
}

/* position:sticky fonctionne dans isolation:isolate — aucun fix nécessaire */
/* Les headers restent sticky dans leur contexte normal */

/* Thème B (sidebar) : la box enveloppe le layout entier */
body.app-boxed.htheme--B .hdr-b-layout {
  max-width: var(--box-width, 1200px);
  margin: 0 auto;
  border-left: 1px solid var(--b2);
  border-right: 1px solid var(--b2);
  box-shadow: 0 0 40px rgba(0,0,0,.18);
  min-height: 100vh;
}
/* En mode B+boxed, la sidebar est déjà dans la box — pas besoin de .app-box */
body.app-boxed.htheme--B .app-box {
  max-width: none;
  margin: 0;
  border: none;
  box-shadow: none;
  min-height: auto;
}

/* ── Mobile : désactiver le mode boxed sous 640px ── */
@media(max-width:640px) {
  body.app-boxed                        { background: var(--bg) !important; }
  body.app-boxed .app-box               { max-width: 100%; margin: 0; border: none; box-shadow: none; }
  body.app-boxed.htheme--B .hdr-b-layout{ max-width: 100%; margin: 0; border: none; box-shadow: none; }
}

/* ── Toggles Mode Boxed (onglet Affichage) ──────────────────────────────── */
.boxed-toggle-row {
  display: flex;
  gap: .85rem;
  margin-top: .65rem;
  flex-wrap: wrap;
}
.boxed-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  padding: .65rem .85rem;
  border: 1.5px solid var(--b2);
  border-radius: var(--r2);
  background: var(--bg1);
  font-size: var(--fs-sm);
  color: var(--tx2);
  transition: border-color .15s;
  min-width: 120px;
}
.boxed-opt input { display: none; }
.boxed-opt:hover   { border-color: var(--b3); color: var(--tx); }
.boxed-opt--on     { border-color: var(--tx); color: var(--tx); font-weight: 500; }

/* Mini-préview plein écran */
.boxed-preview-frame {
  width: 100px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
  border: .5px solid var(--b2);
}
.boxed-prev-off { background: var(--bg); display:flex; align-items:stretch; }
.boxed-prev-off .boxed-prev-inner {
  flex: 1;
  background: var(--bg1);
  margin: 6px;
  border-radius: 3px;
  border: .5px solid var(--b2);
}
/* Mini-préview boxed */
.boxed-prev-on { background: var(--bg3); display:flex; align-items:center; justify-content:center; }
.boxed-prev-outer {
  width: 70px;
  height: 48px;
  background: var(--bg);
  border: .5px solid var(--b2);
  border-radius: 3px;
  display: flex;
  align-items: stretch;
}
.boxed-prev-on .boxed-prev-inner {
  flex: 1;
  background: var(--bg1);
  margin: 5px;
  border-radius: 2px;
  border: .5px solid var(--b2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECHERCHE AVANCÉE — styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper principal de la barre de recherche */
.search-toolbar{display:flex;align-items:flex-start;gap:10px;margin-bottom:1rem;flex-wrap:wrap}
.search-block{flex:1;min-width:200px}

/* Ligne principale */
.search-main-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search-input-wrap{position:relative;flex:1;min-width:180px}
.search-main-input{width:100%;height:32px;padding:0 10px;border:.5px solid var(--b2);border-radius:5px;
  background:var(--bg1);color:var(--tx);font-size:var(--fs-base);outline:none;box-sizing:border-box}
.search-main-input:focus{border-color:var(--tx3);background:var(--bg)}
.btn-adv-toggle{white-space:nowrap;font-size:var(--fs-ui)}
.btn-adv-toggle.adv-open{background:var(--bg2)}

/* Pill buttons — Type & Champ */
.srch-pill-wrap{position:relative}
.srch-pill{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 9px 0 10px;
  background:var(--bg2);white-space:nowrap;font-size:var(--fs-ui)}
.srch-pill--active{border-color:var(--tx3);background:var(--bg2)}
.srch-pill-lbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em}
.srch-pill-sep{width:.5px;height:14px;background:var(--b2);margin:0 2px}
.srch-pill-val{font-size:var(--fs-ui);color:var(--tx);font-weight:500}
.srch-pill-val--muted{color:var(--tx3);font-weight:400}
.srch-pill-chev{font-size:9px;color:var(--tx3);margin-left:1px}
.srch-pill-drop{position:absolute;top:calc(100% + 4px);left:0;min-width:190px;
  background:var(--bg1);border:.5px solid var(--b2);border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:300;padding:4px 0}
.srch-pill-drop-head{font-size:10px;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.04em;padding:6px 12px 4px}
.srch-drop-item{display:block;width:100%;text-align:left;padding:7px 12px;
  font-size:var(--fs-ui);color:var(--tx);background:none;border:none;cursor:pointer}
.srch-drop-item:hover{background:var(--bg2)}
.srch-drop-item--sel{font-weight:500}
.srch-drop-item--sel::after{content:'✓';float:right;font-size:11px;color:var(--tx3)}
.srch-drop-sep{height:.5px;background:var(--b2);margin:4px 0}
.adv-chevron{font-size:10px;margin-left:3px}

/* Dropdown suggestions */
.search-suggest-drop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;
  background:var(--bg1);border:.5px solid var(--b2);border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);overflow:hidden
}
.suggest-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;
  border-bottom:.5px solid var(--b2);transition:background .1s}
.suggest-item:last-of-type{border-bottom:none}
.suggest-item:hover,.suggest-item.suggest-active{background:var(--bg2)}
.suggest-emoji{font-size:14px;flex-shrink:0;width:20px;text-align:center}
.suggest-body{display:flex;flex-direction:column;flex:1;min-width:0}
.suggest-title{font-size:var(--fs-base);font-weight:500;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest-title mark{background:transparent;color:var(--tx);font-weight:700;padding:0}
.suggest-meta{font-size:var(--fs-sm);color:var(--tx3)}
.suggest-right{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.suggest-stars{color:#c8922a;font-size:11px}
.suggest-type{font-size:var(--fs-xs);color:var(--tx3);white-space:nowrap}
.suggest-match-field{font-size:var(--fs-xs);color:var(--tx3);font-style:italic;white-space:nowrap}
.suggest-footer{padding:6px 10px;font-size:var(--fs-sm);color:var(--tx3);
  background:var(--bg2);cursor:pointer;text-align:center}
.suggest-footer:hover{color:var(--tx)}

/* Panneau avancé */
.adv-panel{margin-top:8px;padding:12px 14px;background:var(--bg2);
  border:.5px solid var(--b2);border-radius:6px}
.adv-row-wrap{display:flex;gap:10px 14px;flex-wrap:wrap;margin-bottom:10px}
.adv-row-wrap:last-of-type{margin-bottom:0}
.adv-field{display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1}
.adv-field-sm{flex:0 0 auto;min-width:130px}
.adv-field-grow{flex:2;min-width:220px}
.adv-label{font-size:var(--fs-xs);color:var(--tx3);font-weight:500;letter-spacing:.02em}
.adv-input-row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.adv-op-select{height:28px;padding:0 5px;border:.5px solid var(--b2);border-radius:4px;
  background:var(--bg1);color:var(--tx);font-size:var(--fs-xs);flex-shrink:0;max-width:120px}
.adv-input{flex:1;height:28px;padding:0 8px;border:.5px solid var(--b2);border-radius:4px;
  background:var(--bg1);color:var(--tx);font-size:var(--fs-sm);min-width:80px;outline:none;box-sizing:border-box}
.adv-input:focus{border-color:var(--tx3)}
.adv-input-year{max-width:90px;flex:0 0 auto}
.adv-select{height:28px;padding:0 6px;border:.5px solid var(--b2);border-radius:4px;
  background:var(--bg1);color:var(--tx);font-size:var(--fs-sm)}
.adv-separator{height:.5px;background:var(--b2);margin:8px 0}
.adv-custom-wrap{padding-top:4px}
.adv-actions-row{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:10px;
  border-top:.5px solid var(--b2)}

/* Responsive — harmonisé à 640px */
@media(max-width:640px){
  .search-toolbar{flex-direction:column;align-items:stretch}
  .search-main-row{flex-wrap:wrap}
  .adv-field{min-width:100%}
  .adv-field-sm{min-width:100%}
}

/* =============================================================================
   §99 — RESPONSIVE GLOBAL : BURGER MENU + DRAWER MOBILE
   ============================================================================= */

/* ── Burger button — masqué > 640px ─────────────────────────────────────── */
.hdr-burger { display: none; }

/* ── Nav SVG : réduction sur fenêtre moyenne (641px–1100px) ─────────────── */
@media(max-width:1100px) and (min-width:641px) {
  .hdr-tab-svg svg,
  .hdr-tab-svg img { width: 26px; height: 26px; }
  .hdr-tab-svg-label { display: none; }
  .hdr-tab-svg { padding: 5px 8px; gap: 0; }
  .hdr-tab-badge { left: 16px; }
}

/* ── Masquer nav tabs et user desktop sous 640px ────────────────────────── */
@media(max-width:640px) {
  .hdr-tabs-desktop   { display: none !important; }
  .hdr-user-desktop   { display: none !important; }
  .hdr-icons-desktop  { display: none !important; }
  .hdr-burger         { display: inline-flex; }
}

/* ── Drawer latéral ─────────────────────────────────────────────────────── */
.mob-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; max-width: 85vw;
  z-index: 1100;
  background: var(--bg1);
  border-right: .5px solid var(--b2);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.mob-drawer--open { transform: translateX(0); }

.mob-overlay {
  position: fixed; inset: 0; z-index: 1099;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.mob-overlay--visible { opacity: 1; pointer-events: auto; }

.mob-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .75rem .65rem 1rem;
  border-bottom: .5px solid var(--b2);
  flex-shrink: 0;
}
.mob-drawer-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: var(--tx);
  text-decoration: none; overflow: hidden;
}
.mob-drawer-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-drawer-close { flex-shrink: 0; }

.mob-drawer-nav {
  flex: 1; overflow-y: auto; padding: .5rem;
  display: flex; flex-direction: column; gap: 2px;
}
.mob-drawer-footer {
  border-top: .5px solid var(--b2);
  padding: .5rem; display: flex; flex-direction: column; gap: 2px;
}
.mob-drawer-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--r2);
  font-size: var(--fs-ui); color: var(--tx2);
  text-decoration: none; transition: background .12s;
  cursor: pointer;
  font-family: inherit; line-height: inherit;
  width: 100%; text-align: left;
  background: none; border: none;
}
.mob-drawer-tab:hover { background: var(--bg2); color: var(--tx); }
.mob-drawer-tab--on   { background: var(--tx); color: var(--bg1); font-weight: 500; }
.mob-drawer-emoji { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.mob-drawer-count { margin-left: auto; font-size: var(--fs-xs); opacity: .5; }

/* Thème B — le drawer remplace la sidebar sur mobile */
@media(max-width:640px) {
  .hdr-b-side { display: none; }
  .hdr-b-toprow { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; }
  .hdr-b-layout { flex-direction: column; }
}
/* Au-dessus de 640px, hdr-b-toprow ne doit pas changer l'existant */
@media(min-width:641px) {
  .hdr-b-toprow { display: contents; }
  .hdr-b-side { display: flex !important; }
}

/* =============================================================================
   §99b — RESPONSIVE CONFIG : formulaires Paramétrage
   ============================================================================= */

/* ── core-field-row : passage en colonne sous 640px ─────────────────────── */
@media(max-width:640px) {
  .core-field-row {
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
  }
  /* la colonne "clé" et la checkbox restent sur la 1re ligne */
  .cfl-vis  { grid-row: 1; grid-column: 1; }
  .cfl-key  { grid-row: 1; grid-column: 2; }
  /* l'input prend toute la largeur sur la 2e ligne */
  .cfl-input   { grid-row: 2; grid-column: 1 / -1; }
  /* le libellé par défaut passe sous l'input */
  .cfl-default { grid-row: 3; grid-column: 1 / -1; font-size: var(--fs-xs); }

  /* variante sans checkbox */
  .core-field-row--simple {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .core-field-row--simple .cfl-key     { padding-top: 0; }
  .core-field-row--simple .cfl-default { padding-top: 0; }

  /* cfgtabs : scroll horizontal + taille réduite */
  .cfgtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .5rem;
    gap: 4px;
  }
  .cfgtabs::-webkit-scrollbar { display: none; }
  .cfgtab { padding: 5px 10px; font-size: var(--fs-xs); white-space: nowrap; flex-shrink: 0; }

  /* cfgtable : scroll horizontal */
  .cfgmain { overflow-x: auto; }
  .cfgtable { min-width: 520px; }

  /* Formulaire ajout champ perso */
  .addrow { flex-wrap: wrap; }
  .addrow input[type=text] { width: 100%; min-width: 0; }
}

/* =============================================================================
   §99c — RESPONSIVE DÉTAIL : thèmes manquants
   ============================================================================= */

@media(max-width:640px) {
  /* Thème H — passage en 1 colonne */
  .det-h-wrap { grid-template-columns: 1fr !important; }
  .det--H .det-f-left { grid-template-columns: 120px 1fr; }

  /* Titre de fiche — éviter débordement */
  .dtit { font-size: 20px; word-break: break-word; }
  .det-c-title, .det-e-title, .det-f-title, .det-g-title { word-break: break-word; }

  /* Thème B — table des champs en flex colonne */
  .det--B .det-table { width: 100%; }
  .det--B .det-tr { display: flex; flex-direction: column; padding: .5rem 0; gap: 2px; }
  .det--B .det-td-lbl { width: auto; font-size: var(--fs-xs); padding: 0; }
  .det--B .det-td-val { padding: 0; }

  /* dfgrid sur très petit écran */
  .dfgrid { grid-template-columns: 1fr 1fr; }
}

@media(max-width:400px) {
  .dfgrid { grid-template-columns: 1fr; }
  .det--H .det-f-left { grid-template-columns: 1fr; }
}

/* =============================================================================
   §100 — THÈMES BANDEAU P1–P5
   ============================================================================= */

/* ── Commun aux thèmes bandeau ─────────────────────────────────────────── */
.hdr-p1,.hdr-p2,.hdr-p4,.hdr-p5 { position:sticky;top:0;z-index:100; }
.htheme--p1 .wrap,.htheme--p2 .wrap,.htheme--p4 .wrap,.htheme--p5 .wrap { padding-top:1.5rem; }

/* ── P1 — Bandeau sombre + soulignement ──────────────────────────────── */
.hdr-p1 { }
.hdr-p1-bar {
  background: linear-gradient(135deg, #0f2942 0%, #185FA5 100%);
  height: var(--bandeau-h, 52px);
  display: flex; align-items: center;
}
.hdr-p1-inner { display:flex;align-items:center;gap:.75rem;height:100%;width:100%; }
.hdr-p1-brand {
  display:flex;align-items:center;gap:.65rem;
  text-decoration:none;color:#fff;flex-shrink:0;
}
.hdr-p1-brand img,.hdr-p1-brand span { filter:brightness(10); }
.hdr-p1-title   { font-size:17px;font-weight:500;line-height:1.2; }
.hdr-p1-tagline { font-size:var(--fs-xs);color:rgba(255,255,255,.5);margin-top:1px; }
.hdr-p1-right   { margin-left:auto;display:flex;align-items:center;gap:.75rem; }
.hdr-p1-right .hdr-icon { background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-color:transparent; }
.hdr-p1-right .hdr-icon:hover,.hdr-p1-right .hdr-icon.hdr-icon--on { background:rgba(255,255,255,.22); }
.hdr-p1-right .hdr-burger { background:rgba(255,255,255,.12);color:rgba(255,255,255,.8); }
.hdr-p1-nav-wrap { background:var(--bg1);border-bottom:.5px solid var(--b2); }
.hdr-p1-nav { display:flex;gap:0;overflow-x:auto;scrollbar-width:none; }
.hdr-p1-nav::-webkit-scrollbar { display:none; }
.hdr-p1-nav .hdr-tab { border-radius:0;border:none;border-bottom:2px solid transparent;padding:.55rem .9rem; }
.hdr-p1-nav .hdr-tab:hover { background:var(--bg2);border-bottom-color:var(--b2); }
.hdr-p1-nav .hdr-tab--on { background:var(--tx);color:var(--bg1);border-color:var(--tx);font-weight:500; }

/* ── P2 — Minimal épuré ──────────────────────────────────────────────── */
.hdr-p2 { background:var(--bg1);border-bottom:.5px solid var(--b2); }
.hdr-p2 .hdr-inner { display:flex;flex-direction:column; }
.hdr-p2-top {
  display:flex;align-items:center;gap:1rem;
  min-height:calc(var(--bandeau-h, 52px) - 28px);
  padding:.4rem 0;border-bottom:.5px solid var(--b1);
}
.hdr-p2-brand {
  display:flex;align-items:center;gap:.75rem;
  text-decoration:none;color:var(--tx);flex-shrink:0;
}
.hdr-p2-circle {
  width:36px;height:36px;border-radius:50%;
  background:#E6F1FB;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
}
.hdr-p2-title   { font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1; }
.hdr-p2-sub     { font-size:var(--fs-xxs);color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;margin-top:2px; }
.hdr-p2-right   { margin-left:auto;display:flex;align-items:center;gap:.75rem; }
.hdr-p2-nav { display:flex;gap:0;overflow-x:auto;scrollbar-width:none; }
.hdr-p2-nav::-webkit-scrollbar { display:none; }
.hdr-p2-nav .hdr-tab { border-radius:0;border:none;border-bottom:2px solid transparent;padding:.55rem .9rem; }
.hdr-p2-nav .hdr-tab:hover  { background:transparent;color:var(--tx);border-bottom-color:var(--b2); }
.hdr-p2-nav .hdr-tab--on    { background:transparent;border-bottom-color:var(--tx);color:var(--tx);font-weight:500; }

/* ── P3 — Sidebar raffinée ───────────────────────────────────────────── */
.hdr-p3-layout  { display:flex;min-height:100vh; }
.hdr-p3-side {
  width:var(--bandeau-w, 210px);min-width:var(--bandeau-w, 210px);flex-shrink:0;
  background:var(--bg1);border-right:.5px solid var(--b2);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  padding:.85rem .65rem;
}
.hdr-p3-toprow { display:contents; }
.hdr-p3-brand {
  display:flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--tx);
  padding:.3rem .5rem .8rem;border-bottom:.5px solid var(--b1);margin-bottom:.5rem;
}
.hdr-p3-logo { display:flex;align-items:center;flex-shrink:0; }
.hdr-p3-title  { font-size:var(--fs-base);font-weight:500;line-height:1.2; }
.hdr-p3-tag    { font-size:var(--fs-xxs);color:var(--tx3);margin-top:1px; }
.hdr-p3-nav    { display:flex;flex-direction:column;gap:2px;flex:1; }
.hdr-p3-item {
  display:flex;align-items:center;gap:8px;
  padding:.4rem .55rem;border-radius:var(--r2);
  font-size:var(--fs-ui);color:var(--tx2);text-decoration:none;
  transition:background .1s;
}
.hdr-p3-item:hover       { background:var(--bg2);color:var(--tx); }
.hdr-p3-item--on         { background:#E6F1FB;color:#0C447C;font-weight:500; }
.hdr-p3-emo  { font-size:var(--fs-base);width:18px;text-align:center;flex-shrink:0; }
.hdr-p3-cnt  { margin-left:auto;font-size:var(--fs-xs);opacity:.45; }
.hdr-p3-bottom { border-top:.5px solid var(--b1);padding-top:.5rem;margin-top:.5rem;display:flex;flex-direction:column;gap:2px; }
.hdr-p3-content { flex:1;min-width:0; }
.hdr-p3-content .wrap { padding:1.5rem; }
@media(max-width:640px) {
  .hdr-p3-side { display:none; }
  .hdr-p3-layout { flex-direction:column; }
  .hdr-p3-toprow { display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--bg1);border-bottom:.5px solid var(--b2); }
}
@media(min-width:641px) {
  .hdr-p3-toprow { display:contents; }
  .hdr-p3-side { display:flex !important; }
}

/* ── P4 — Barre unique premium ───────────────────────────────────────── */
.hdr-p4 {
  background:var(--bg);border-bottom:.5px solid var(--b2);
}
.hdr-p4-inner {
  height:var(--bandeau-h, 52px);display:flex;align-items:center;gap:10px;
}
.hdr-p4-brand {
  display:flex;align-items:center;gap:.55rem;
  text-decoration:none;flex-shrink:0;
}
.hdr-p4-sq {
  width:30px;height:30px;border-radius:8px;
  background:var(--tx);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
}
.hdr-p4-sq img,.hdr-p4-sq span { filter:brightness(10); }
.hdr-p4-title   { font-size:15px;font-weight:500;color:var(--tx);letter-spacing:-.01em; }
.hdr-p4-sep     { width:.5px;height:20px;background:var(--b2);flex-shrink:0;margin:0 4px; }
.hdr-p4-nav     { display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none; }
.hdr-p4-nav::-webkit-scrollbar { display:none; }
.hdr-p4-nav .hdr-tab { padding:.4rem .7rem;font-size:var(--fs-sm); }
.hdr-p4-nav .hdr-tab--on { background:var(--tx);color:var(--bg1);border-color:var(--tx);font-weight:500; }
.hdr-p4-right   { display:flex;align-items:center;gap:.35rem;margin-left:.5rem; }

/* ── P5 — Double bande accent violet ─────────────────────────────────── */
.hdr-p5 { background:var(--bg1);border-bottom:.5px solid var(--b2); }
.hdr-p5 .hdr-inner { display:flex;flex-direction:column; }
.hdr-p5-identity {
  display:flex;align-items:center;gap:1rem;
  min-height:var(--bandeau-h, 52px);
  padding:.4rem 0 .4rem;border-bottom:.5px solid var(--b2);
}
.hdr-p5-brand {
  display:flex;align-items:center;gap:.75rem;
  text-decoration:none;color:var(--tx);flex-shrink:0;
}
.hdr-p5-logo { display:flex;align-items:center;flex-shrink:0; }
.hdr-p5-name   { font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1; }
.hdr-p5-tag    { font-size:var(--fs-sm);color:var(--tx3);margin-top:3px; }
.hdr-p5-counter { display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto; }
.hdr-p5-cval   { font-size:20px;font-weight:500;color:var(--tx);line-height:1; }
.hdr-p5-clbl   { font-size:var(--fs-xxs);color:var(--tx3);text-transform:uppercase;letter-spacing:.05em; }
.hdr-p5-right  { display:flex;align-items:center;gap:.4rem; }
.hdr-p5-nav {
  display:flex;gap:3px;padding:.35rem 0;
  overflow-x:auto;scrollbar-width:none;
  background:#EEEDFE;margin:0 calc(-1 * var(--inner-px,1.5rem));
  padding-left:var(--inner-px,1.5rem);padding-right:var(--inner-px,1.5rem);
}
.hdr-p5-nav::-webkit-scrollbar { display:none; }
.hdr-p5-nav .hdr-tab { color:#534AB7;border-color:transparent; }
.hdr-p5-nav .hdr-tab:hover { background:rgba(83,74,183,.12);color:#3C3489; }
.hdr-p5-nav .hdr-tab--on { background:#534AB7;color:#fff;border-color:#534AB7;font-weight:500; }

/* ── Responsive P1 P2 P4 P5 : burger ─────────────────────────────────── */
@media(max-width:640px) {
  .hdr-p1-nav-wrap,.hdr-p2-nav,.hdr-p4-nav,.hdr-p5-nav.hdr-tabs-desktop { display:none !important; }
  .hdr-p4-sep { display:none; }
}

/* =============================================================================
   §101 — MINIATURES CONFIG BANDEAU (section bandeau de config_apparence)
   ============================================================================= */

.bandeau-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.75rem;
  margin-top:1rem;
}
.bandeau-card {
  border:.5px solid var(--b2);border-radius:var(--r3);
  overflow:hidden;cursor:pointer;transition:border-color .12s,box-shadow .12s;
  display:flex;flex-direction:column;background:var(--bg1);
}
.bandeau-card:hover { border-color:var(--b3); }
.bandeau-card--sel { border:2px solid #185FA5 !important; }
.bandeau-card input[type=radio] { display:none; }
.bandeau-preview {
  height:80px;display:flex;flex-direction:column;
  overflow:hidden;flex-shrink:0;position:relative;
}
.bandeau-info {
  padding:.6rem .75rem;display:flex;flex-direction:column;gap:2px;
  border-top:.5px solid var(--b1);
}
.bandeau-num  { font-size:var(--fs-xxs);font-weight:500;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em; }
.bandeau-name { font-size:var(--fs-sm);font-weight:500;color:var(--tx); }
.bandeau-desc { font-size:var(--fs-xs);color:var(--tx3);line-height:1.4; }
.bandeau-card--sel .bandeau-name { color:#0C447C; }

/* ── Miniature "Aucun" ── */
.bandeau-prev-none { background:var(--bg2);align-items:center;justify-content:center; }

/* ── Miniature P1 ── */
.bandeau-prev-p1 { background:#fff; }
.bp1-bar { background:linear-gradient(135deg,#0f2942,#185FA5);padding:6px 10px;display:flex;align-items:center;gap:6px; }
.bp1-logo { width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,.25);flex-shrink:0; }
.bp1-title { height:6px;border-radius:2px;background:rgba(255,255,255,.7);flex:1;max-width:60px; }
.bp1-dots { display:flex;gap:3px;margin-left:auto; }
.bp1-dots span { width:10px;height:10px;border-radius:2px;background:rgba(255,255,255,.2); }
.bp1-nav { display:flex;gap:6px;padding:5px 10px;border-bottom:1px solid #e8e6df;background:#fff; }
.bp1-nav span { height:12px;border-radius:2px;background:#e8e6df;flex:1; }
.bp1-nav span.on { background:#185FA5;border-bottom:2px solid #185FA5;border-radius:0; }

/* ── Miniature P2 ── */
.bandeau-prev-p2 { background:#fff;padding:8px 10px 0; }
.bp2-top { display:flex;align-items:center;gap:6px;padding-bottom:6px;border-bottom:.5px solid #e8e6df; }
.bp2-circle { width:16px;height:16px;border-radius:50%;background:#E6F1FB;flex-shrink:0; }
.bp2-title { height:7px;border-radius:2px;background:#1a1a18;flex:1;max-width:55px; }
.bp2-dots { display:flex;gap:3px;margin-left:auto; }
.bp2-dots span { width:10px;height:10px;border-radius:2px;background:#e8e6df; }
.bp2-nav { display:flex;gap:6px;padding:5px 0; }
.bp2-nav span { height:12px;border-radius:2px;background:#e8e6df;flex:1; }
.bp2-nav span.on { border-bottom:2px solid #1a1a18;background:transparent;border-radius:0; }

/* ── Miniature P3 ── */
.bandeau-prev-p3 { background:#f8f7f3;flex-direction:row !important; }
.bp3-side { width:48px;background:#fff;border-right:.5px solid #e8e6df;padding:6px 5px;display:flex;flex-direction:column;gap:3px;flex-shrink:0; }
.bp3-brand { display:flex;align-items:center;gap:3px;padding-bottom:5px;border-bottom:.5px solid #e8e6df;margin-bottom:2px; }
.bp3-logo { width:10px;height:10px;border-radius:2px;background:#E6F1FB;flex-shrink:0; }
.bp3-name { height:5px;border-radius:1px;background:#d3d1c7;flex:1; }
.bp3-item { height:8px;border-radius:2px;background:#e8e6df; }
.bp3-item.on { background:#E6F1FB; }
.bp3-main { flex:1; }

/* ── Miniature P4 ── */
.bandeau-prev-p4 { background:#fafaf8;justify-content:center; }
.bp4-bar { background:#fafaf8;border-bottom:.5px solid #e8e6df;padding:0 10px;height:100%;display:flex;align-items:center;gap:6px;width:100%; }
.bp4-sq { width:14px;height:14px;border-radius:3px;background:#1a1a18;flex-shrink:0; }
.bp4-name { height:6px;border-radius:2px;background:#1a1a18;width:40px; }
.bp4-sep { width:.5px;height:14px;background:#d3d1c7;flex-shrink:0;margin:0 3px; }
.bp4-tabs { display:flex;gap:3px;flex:1; }
.bp4-tabs span { height:16px;border-radius:3px;background:#e8e6df;flex:1; }
.bp4-tabs span.on { background:#1a1a18; }
.bp4-dots { display:flex;gap:3px; }
.bp4-dots span { width:10px;height:10px;border-radius:2px;background:#d3d1c7; }

/* ── Miniature P5 ── */
.bandeau-prev-p5 { background:#fff; }
.bp5-top { display:flex;align-items:center;gap:5px;padding:6px 10px;border-bottom:.5px solid #e8e6df; }
.bp5-logo { width:14px;height:14px;border-radius:3px;background:#EEEDFE;flex-shrink:0; }
.bp5-name { height:7px;border-radius:2px;background:#1a1a18;width:45px; }
.bp5-count { height:10px;border-radius:2px;background:#e8e6df;width:20px;margin-left:auto; }
.bp5-dots { display:flex;gap:3px; }
.bp5-dots span { width:10px;height:10px;border-radius:2px;background:#d3d1c7; }
.bp5-nav { display:flex;gap:4px;padding:5px 10px;background:#EEEDFE; }
.bp5-nav span { height:12px;border-radius:3px;background:rgba(83,74,183,.2);flex:1; }
.bp5-nav span.on { background:#534AB7; }

@media(max-width:640px) {
  .bandeau-grid { grid-template-columns:1fr 1fr; }
}

/* =============================================================================
   §102 — PANNEAU RECHERCHE AVANCÉE ADV2 (grille de cartes)
   ============================================================================= */

/* Token hauteur uniforme pour tous les contrôles */
:root { --adv2-ctrl-h: 32px; }

/* ── Panneau conteneur ── */
.adv2-panel {
  margin-top: 8px;
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: 10px;
  overflow: hidden;
}

/* ── En-tête ── */
.adv2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px 10px;
  background: var(--bg2);
  border-bottom: .5px solid var(--b2);
}
.adv2-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.adv2-header-icon {
  width: 15px; height: 15px;
  stroke: var(--pt); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.adv2-header-title {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--tx);
}
.adv2-active-badge {
  font-size: var(--fs-xxs);
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--pb);
  color: var(--pt);
  border: .5px solid var(--pt);
  font-weight: 500;
}
.adv2-close-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--tx3);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  padding: 0;
}
.adv2-close-btn:hover { background: var(--bg3, var(--b1)); }

/* ── Grille de cartes — asymétrique selon le type de champ ── */
/*
   Colonnes : 2 fixes (180px) pour les selects compacts (Type, Statut, Année, Note)
              2 flexibles (1fr) pour les inputs texte (Titre, Auteur, Genre, Langue)
   Ligne 3  : Texte libre sur toute la largeur
*/
.adv2-cards {
  display: grid;
  grid-template-columns: 270px 270px 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "type    statut  titre   auteur"
    "annee   note    genre   langue"
    "texte   texte   texte   texte";
  gap: 10px;
  padding: 14px 16px;
}
.adv2-cards-custom {
  padding-top: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
  padding: 4px 16px 14px;
}
.adv2-card--type   { grid-area: type; }
.adv2-card--statut { grid-area: statut; }
.adv2-card--titre  { grid-area: titre; }
.adv2-card--auteur { grid-area: auteur; }
.adv2-card--annee  { grid-area: annee; }
.adv2-card--note   { grid-area: note; }
.adv2-card--genre  { grid-area: genre; }
.adv2-card--langue { grid-area: langue; }
.adv2-card--texte  { grid-area: texte; }

/* ── Carte individuelle ── */
.adv2-card {
  border: .5px solid var(--b2);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--bg1);
  transition: border-color .12s, background .12s;
}
.adv2-card:hover { border-color: var(--b3, var(--tx3)); }

/* États actifs : fond bg2 + bordure colorée par type — adaptatif toutes palettes */
.adv2-card--active                  { border-color: var(--b3);    background: var(--bg2); }
.adv2-card--type.adv2-card--active  { border-color: var(--it);    background: var(--bg2); }
.adv2-card--statut.adv2-card--active{ border-color: var(--ot);    background: var(--bg2); }
.adv2-card--titre.adv2-card--active { border-color: var(--rt);    background: var(--bg2); }
.adv2-card--auteur.adv2-card--active{ border-color: var(--pt);    background: var(--bg2); }
.adv2-card--genre.adv2-card--active { border-color: var(--ot);    background: var(--bg2); }
.adv2-card--langue.adv2-card--active{ border-color: var(--wt);    background: var(--bg2); }
.adv2-card--annee.adv2-card--active { border-color: var(--bbd-t); background: var(--bg2); }
.adv2-card--note.adv2-card--active  { border-color: var(--wt);    background: var(--bg2); }
.adv2-card--texte.adv2-card--active { border-color: var(--b3);    background: var(--bg2); }

.adv2-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  margin-left: -2px; margin-right: -2px; margin-top: -2px;
}
/* Fonds des têtes de cartes : var(--bg2) pour s'adapter à toutes les palettes.
   La distinction visuelle entre types est portée par l'icône colorée, pas le fond. */
.adv2-card--type   .adv2-card-head,
.adv2-card--statut .adv2-card-head,
.adv2-card--titre  .adv2-card-head,
.adv2-card--auteur .adv2-card-head,
.adv2-card--genre  .adv2-card-head,
.adv2-card--langue .adv2-card-head,
.adv2-card--annee  .adv2-card-head,
.adv2-card--note   .adv2-card-head,
.adv2-card--texte  .adv2-card-head { background: var(--bg2); }

.adv2-card-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Couleurs de l'icône par type de champ */
.adv2-card--type   .adv2-card-icon { background: var(--ib); color: var(--it); }
.adv2-card--statut .adv2-card-icon { background: var(--ob); color: var(--ot); }
.adv2-card--titre  .adv2-card-icon { background: var(--rb); color: var(--rt); }
.adv2-card--auteur .adv2-card-icon { background: var(--pb); color: var(--pt); }
.adv2-card--genre  .adv2-card-icon { background: var(--ob); color: var(--ot); }
.adv2-card--langue .adv2-card-icon { background: var(--wb); color: var(--wt); }
.adv2-card--annee  .adv2-card-icon { background: var(--bbd-b); color: var(--bbd-t); }
.adv2-card--note   .adv2-card-icon { background: var(--wb); color: var(--wt); }
.adv2-card--texte  .adv2-card-icon { background: var(--bg2); color: var(--tx2); }

.adv2-card-icon svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.adv2-card-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
/* Titres et hints : couleur neutre de la palette — adaptatif clair/sombre */
.adv2-card--type   .adv2-card-title,
.adv2-card--statut .adv2-card-title,
.adv2-card--titre  .adv2-card-title,
.adv2-card--auteur .adv2-card-title,
.adv2-card--genre  .adv2-card-title,
.adv2-card--langue .adv2-card-title,
.adv2-card--annee  .adv2-card-title,
.adv2-card--note   .adv2-card-title,
.adv2-card--texte  .adv2-card-title { color: var(--tx); }

.adv2-card-hint {
  font-size: var(--fs-xxs);
  color: var(--tx3);
  margin-top: 1px;
  line-height: 1.3;
}
/* Hints : couleur tertiaire neutre de la palette */
.adv2-card--type   .adv2-card-hint,
.adv2-card--statut .adv2-card-hint,
.adv2-card--titre  .adv2-card-hint,
.adv2-card--auteur .adv2-card-hint,
.adv2-card--genre  .adv2-card-hint,
.adv2-card--langue .adv2-card-hint,
.adv2-card--annee  .adv2-card-hint,
.adv2-card--note   .adv2-card-hint,
.adv2-card--texte  .adv2-card-hint { color: var(--tx3); }

.adv2-type-badge {
  font-size: var(--fs-xxs);
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ib);
  color: var(--it);
  border: .5px solid var(--it);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Contrôles — hauteur uniforme ── */
.adv2-ctrl {
  height: var(--adv2-ctrl-h);
  border: .5px solid var(--b2);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--tx);
  font-size: var(--fs-sm);
  font-family: inherit;
  padding: 0 8px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
.adv2-ctrl:focus {
  border-color: #7F77DD;
  background: var(--bg1);
}
input.adv2-ctrl::placeholder { color: var(--tx3); }

/* Ligne opérateur + input */
.adv2-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
.adv2-row .adv-op-select {
  /* réutilise .adv-op-select existant mais avec hauteur harmonisée */
  height: var(--adv2-ctrl-h);
  width: 88px;
  flex-shrink: 0;
  padding: 0 5px;
  font-size: var(--fs-xs);
}
.adv2-row .adv-input,
.adv2-row .adv2-ctrl {
  height: var(--adv2-ctrl-h);
  flex: 1;
  min-width: 0;
}
/* Cas spécifique : input année dans adv2-row */
.adv2-row .adv-input-year {
  max-width: 90px;
  flex: 0 0 auto;
}

/* Entre (annee2) */
.adv2-between-label {
  font-size: var(--fs-xs);
  color: var(--tx3);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Étoiles ── */
.adv2-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--adv2-ctrl-h);
}
.adv2-star {
  width: 28px; height: 28px;
  border: .5px solid var(--b2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 13px;
  background: var(--bg1);
  color: var(--tx2);
  transition: background .1s, border-color .1s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.adv2-star:hover { background: var(--wb); border-color: var(--wt); color: var(--wt); }
.adv2-star--on    { background: var(--wb); border-color: var(--wt); color: var(--wt); }
.adv2-star-label  { font-size: var(--fs-xxs); color: var(--tx3); margin-left: 3px; white-space: nowrap; }
.adv2-star-clear  {
  width: 20px; height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--tx3);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin-left: 1px;
}
.adv2-star-clear:hover { background: var(--bg2); color: var(--tx2); }

/* ── Séparateur section champs perso ── */
.adv2-section-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 0;
}
.adv2-sep-line {
  flex: 1;
  height: .5px;
  background: var(--b2);
}
.adv2-sep-label {
  font-size: var(--fs-xxs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx3);
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.adv2-sep-label svg { flex-shrink: 0; stroke: var(--pt); }
.adv2-sep-label-text {
  font-size: var(--fs-xxs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx3);
}
.adv2-sep-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  background: #EEEDFE;
  color: #3C3489;
  border: .5px solid #AFA9EC;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Couleurs cartes custom par type de champ ── */
/* text → purple */
.adv2-card--cf-text .adv2-card-head   { background: var(--bg2); }
.adv2-card--cf-text .adv2-card-icon   { background: var(--pb); color: var(--pt); }
.adv2-card--cf-text .adv2-card-title  { color: var(--tx); }
.adv2-card--cf-text .adv2-card-hint   { color: var(--tx3); }
.adv2-card--cf-text.adv2-card--active { border-color: var(--pt); background: var(--bg2); }
/* textarea → pink */
.adv2-card--cf-textarea .adv2-card-head   { background: var(--bg2); }
.adv2-card--cf-textarea .adv2-card-icon   { background: var(--rb); color: var(--rt); }
.adv2-card--cf-textarea .adv2-card-title  { color: var(--tx); }
.adv2-card--cf-textarea .adv2-card-hint   { color: var(--tx3); }
.adv2-card--cf-textarea.adv2-card--active { border-color: var(--rt); background: var(--bg2); }
/* number → amber */
.adv2-card--cf-number .adv2-card-head   { background: var(--bg2); }
.adv2-card--cf-number .adv2-card-icon   { background: var(--wb); color: var(--wt); }
.adv2-card--cf-number .adv2-card-title  { color: var(--tx); }
.adv2-card--cf-number .adv2-card-hint   { color: var(--tx3); }
.adv2-card--cf-number.adv2-card--active { border-color: var(--wt); background: var(--bg2); }
/* date → teal */
.adv2-card--cf-date .adv2-card-head   { background: var(--bg2); }
.adv2-card--cf-date .adv2-card-icon   { background: var(--ob); color: var(--ot); }
.adv2-card--cf-date .adv2-card-title  { color: var(--tx); }
.adv2-card--cf-date .adv2-card-hint   { color: var(--tx3); }
.adv2-card--cf-date.adv2-card--active { border-color: var(--ot); background: var(--bg2); }
/* boolean → blue */
.adv2-card--cf-boolean .adv2-card-head   { background: var(--bg2); }
.adv2-card--cf-boolean .adv2-card-icon   { background: var(--ib); color: var(--it); }
.adv2-card--cf-boolean .adv2-card-title  { color: var(--tx); }
.adv2-card--cf-boolean .adv2-card-hint   { color: var(--tx3); }
.adv2-card--cf-boolean.adv2-card--active { border-color: var(--it); background: var(--bg2); }

/* ── Badge type de champ dans le titre ── */
.adv2-cf-type-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}
.adv2-cf-type-pill--text     { background: var(--pb); color: var(--pt); border: .5px solid var(--pt); }
.adv2-cf-type-pill--textarea { background: var(--rb); color: var(--rt); border: .5px solid var(--rt); }
.adv2-cf-type-pill--number   { background: var(--wb); color: var(--wt); border: .5px solid var(--wt); }
.adv2-cf-type-pill--date     { background: var(--ob); color: var(--ot); border: .5px solid var(--ot); }
.adv2-cf-type-pill--boolean  { background: var(--ib); color: var(--it); border: .5px solid var(--it); }

/* ── Pied ── */
.adv2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  border-top: .5px solid var(--b2);
  background: var(--bg2);
  flex-wrap: wrap;
  gap: 8px;
}
.adv2-foot-left {
  font-size: var(--fs-xs);
  color: var(--tx2);
}
.adv2-foot-left strong { color: var(--pt); }
.adv2-foot-right {
  display: flex;
  gap: 6px;
}
.adv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--adv2-ctrl-h);
  padding: 0 14px;
  border-radius: 7px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  border: .5px solid var(--b2);
  background: var(--bg1);
  color: var(--tx2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s;
}
.adv2-btn:hover { background: var(--bg2); }
.adv2-btn svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.adv2-btn--pri {
  background: var(--btn-pri-bg, var(--pb));
  color: var(--btn-pri-tx, var(--pt));
  border-color: var(--btn-pri-border, var(--pt));
}
.adv2-btn--pri:hover { filter: brightness(1.12); }

/* ── Responsive ── */
@media(max-width: 900px) {
  .adv2-cards {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "type    statut"
      "titre   auteur"
      "genre   langue"
      "annee   note"
      "texte   texte";
  }
}
@media(max-width: 640px) {
  .adv2-cards {
    grid-template-columns: 1fr;
    grid-template-areas:
      "type" "statut" "titre" "auteur"
      "genre" "langue" "annee" "note" "texte";
  }
  .adv2-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .adv2-foot-right { flex-direction: column; }
  .adv2-btn { justify-content: center; }
}

/* ── Pleine largeur quand le panneau adv2 est ouvert ─────────────────────── */
.search-toolbar.adv2-toolbar-open {
  flex-wrap: wrap;
}
/* Le bloc de recherche prend toute la largeur */
.search-toolbar.adv2-toolbar-open .search-block {
  width: 100%;
  flex: 1 1 100%;
}
/* Le tright passe sur sa propre ligne au-dessus via order */
.search-toolbar .tright {
  order: -1; /* affiché avant search-block */
  margin-left: auto;
}

/* ── Thème I — écrase le grid 2 colonnes de .det pour pleine largeur ──────── */
.det.det--I {
  display: block;
  grid-template-columns: unset;
  gap: unset;
}

/* ── Miniature thème I dans la page config Fiche détail ─────────────────── */
.tp-i-preview{position:relative;width:100%;height:100%;overflow:hidden;border-radius:4px}
.tp-i-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a1a3a 0%,#2a1a2a 100%);opacity:.8}
.tp-i-poster{position:absolute;left:8px;top:10px;bottom:10px;width:28px;border-radius:3px;background:rgba(255,255,255,.25)}
.tp-i-lines{position:absolute;left:44px;right:6px;top:14px;display:flex;flex-direction:column;gap:5px}
.tp-i-title{height:7px;border-radius:2px;background:rgba(255,255,255,.8);width:75%}
.tp-i-sub{height:5px;border-radius:2px;background:rgba(255,255,255,.4);width:55%}
.tp-i-pills{display:flex;gap:3px;margin-top:2px}
.tp-i-pills span{height:8px;border-radius:99px;background:rgba(255,255,255,.2);width:22px}

/* ── Format carré pour le type Musique ───────────────────────────────────── */
/* Vue grille : la zone de couverture passe de 2/3 à 1/1 */
.ccover--square { aspect-ratio: 1/1; }
/* Vue grille : l'image en mode carré est recadrée en cover pour éviter les bandes */
.ccover--square img { object-fit: cover; }

/* Vue tableau : la miniature passe de 32×42px à 32×32px */
.thumb--square { width: 32px; height: 32px; object-fit: cover; }

/* Vue détail : la couverture passe de 2/3 à 1/1 */
.dci--square  { aspect-ratio: 1/1 !important; object-fit: cover; }
.dcph--square { aspect-ratio: 1/1 !important; }

/* Surcharges spécifiques aux thèmes de la fiche détail */
.det-f-cover .dci--square  { aspect-ratio: 1/1 !important; }
.det-f-cover .dcph--square { aspect-ratio: 1/1 !important; }

/* =============================================================================
   VUES SAUVEGARDÉES
   ============================================================================= */

/* ── Bouton et dropdown dans la toolbar ── */
.sv-selector { position: relative; display: inline-flex; align-items: center; }
.sv-btn { white-space: nowrap; font-size: var(--fs-ui); gap: 5px; }
.sv-count {
  font-size: 10px; font-weight: 500;
  padding: 1px 5px; border-radius: 8px;
  background: #EEEDFE; color: #3C3489; border: .5px solid #AFA9EC;
}
.sv-dropdown {
  position: fixed;
  min-width: 260px; max-width: min(320px, calc(100vw - 16px));
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  z-index: 300;
  overflow: hidden;
}
.sv-drop-head {
  padding: 7px 12px;
  background: var(--bg2);
  border-bottom: .5px solid var(--b2);
  font-size: var(--fs-xxs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tx3);
}
.sv-drop-list { max-height: 260px; overflow-y: auto; }
.sv-item {
  display: flex; align-items: stretch;
  border-bottom: .5px solid var(--b2);
  transition: background .1s;
}
.sv-item:last-child { border-bottom: none; }
.sv-item-load {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
}
.sv-item-load:hover { background: var(--bg2); }
.sv-item-icon {
  width: 26px; height: 26px; border-radius: 5px;
  background: #EEEDFE;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sv-item-icon svg {
  width: 12px; height: 12px;
  stroke: #534AB7; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sv-item-name { font-size: 13px; font-weight: 500; color: var(--tx); }
.sv-item-meta { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.sv-item-del {
  width: 34px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-left: .5px solid var(--b2);
  color: var(--tx3); cursor: pointer; font-size: 12px;
}
.sv-item-del:hover { background: #FCEBEB; color: #A32D2D; }
.sv-empty {
  padding: 14px 12px; text-align: center;
  color: var(--tx3); font-size: 12px; font-style: italic;
}

/* ── Bouton Sauvegarder dans le pied avancé ── */
.adv2-btn--save {
  background: var(--ob); border-color: var(--ot); color: var(--ot);
}
.adv2-btn--save:hover { filter: brightness(1.08); }
.adv2-btn--save svg { stroke: var(--ot); }

/* ── Modal de nommage ── */
.sv-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.sv-modal {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r3);
  width: 100%; max-width: 400px;
  overflow: hidden;
}
.sv-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  border-bottom: .5px solid var(--b2);
}
.sv-modal-title {
  font-size: 14px; font-weight: 500; color: var(--tx);
  display: flex; align-items: center; gap: 7px;
}
.sv-modal-title svg {
  width: 14px; height: 14px;
  stroke: #0F6E56; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sv-modal-close {
  width: 26px; height: 26px; border-radius: 5px;
  border: none; background: transparent; cursor: pointer;
  color: var(--tx3); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.sv-modal-close:hover { background: var(--bg2); }
.sv-modal-body { padding: 14px 16px; }
.sv-modal-label {
  font-size: 12px; font-weight: 500;
  color: var(--tx2); margin-bottom: 5px; display: block;
}
.sv-modal-input {
  width: 100%; height: 34px; padding: 0 10px;
  border: .5px solid var(--b2); border-radius: 6px;
  background: var(--bg1); color: var(--tx);
  font-size: 13px; outline: none;
}
.sv-modal-input:focus { border-color: #534AB7; }
.sv-modal-chips {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.sv-modal-chip {
  font-size: 11px; padding: 3px 9px;
  border: .5px solid var(--b2); border-radius: 10px;
  background: var(--bg2); color: var(--tx2);
  cursor: pointer; transition: background .1s, color .1s;
}
.sv-modal-chip:hover { background: #EEEDFE; color: #3C3489; border-color: #AFA9EC; }
.sv-modal-criteria {
  margin-top: 10px; padding: 9px 11px;
  background: var(--bg2); border-radius: var(--r1);
  border: .5px solid var(--b1);
}
.sv-modal-crit-label {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tx3); margin-bottom: 5px;
}
.sv-modal-crit-list { display: flex; flex-wrap: wrap; gap: 4px; }
.sv-crit-pill {
  font-size: 11px; padding: 2px 7px; border-radius: 8px;
}
.pill-blue    { background: #E6F1FB; color: #0C447C; border: .5px solid #85B7EB; }
.pill-purple  { background: #EEEDFE; color: #3C3489; border: .5px solid #AFA9EC; }
.pill-pink    { background: #FBEAF0; color: #72243E; border: .5px solid #ED93B1; }
.pill-teal    { background: #E1F5EE; color: #085041; border: .5px solid #5DCAA5; }
.pill-amber   { background: #FAEEDA; color: #633806; border: .5px solid #EF9F27; }
.pill-green   { background: #EAF3DE; color: #27500A; border: .5px solid #97C459; }
.sv-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 16px;
  border-top: .5px solid var(--b2);
  background: var(--bg2);
}
.sv-modal-status { font-size: 12px; color: var(--tx3); margin-right: auto; }
.sv-modal-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 13px;
  border: .5px solid var(--b2); border-radius: 6px;
  background: var(--bg1); color: var(--tx);
  font-size: 13px; cursor: pointer;
}
.sv-modal-btn:hover { background: var(--bg2); }
.sv-modal-btn-pri { background: #534AB7; border-color: #534AB7; color: #fff; }
.sv-modal-btn-pri:hover { background: #3C3489; }
.sv-modal-btn-pri svg {
  width: 12px; height: 12px;
  stroke: #fff; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .sv-modal { max-width: 100%; }
}

/* =============================================================================
   NAVIGATION PREV / NEXT — FICHE DÉTAIL
   ============================================================================= */

/* ── Barre compteur (desktop + mobile) ── */
.det-nav-bar {
  margin-bottom: .75rem;
}
.det-nav-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.det-nav-mobile { display: none; }

.det-nav-counter {
  font-size: 12px;
  color: var(--tx3);
  display: flex;
  align-items: center;
  gap: 5px;
}
.det-nav-pos { font-weight: 500; color: var(--tx); }
.det-nav-sep { color: var(--b2); }

/* ── Boutons ronds dans la barre compteur ── */
.det-nav-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: .5px solid var(--b2);
  background: var(--bg1);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tx);
  font-size: 16px; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
}
.det-nav-btn:hover { background: var(--bg2); border-color: var(--b3, var(--tx3)); }
.det-nav-btn--off {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Coquille avec flèches latérales ── */
.det-nav-shell {
  width: 100%;
}
.det-nav-content { min-width: 0; width: 100%; }

/* ── Barre mobile ── */
.det-nav-mobile-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1;
  height: 36px; padding: 0 12px;
  border: .5px solid var(--b2); border-radius: 7px;
  background: var(--bg1); color: var(--tx);
  font-size: 13px; text-decoration: none;
  white-space: nowrap;
}
.det-nav-mobile-btn:hover { background: var(--bg2); }
.det-nav-mobile-btn.det-nav-btn--off { opacity: .3; pointer-events: none; }

/* ── Responsive ── */
@media (max-width: 700px) {
  .det-nav-desktop { display: none; }
  .det-nav-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .5rem 0 .75rem;
  }
}

/* =============================================================================
   ISBN — GRILLE MULTI-SOURCES
   ============================================================================= */

.isbn-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: .85rem;
}

.isbn-source-card {
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--bg1);
  display: flex;
  flex-direction: column;
  transition: border-color .12s;
}
.isbn-source-card:hover { border-color: var(--b3, var(--tx3)); }

.isbn-source-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
}
.isbn-source-icon { font-size: 14px; flex-shrink: 0; }
.isbn-source-name { font-size: 12px; font-weight: 500; }

.isbn-source-body {
  padding: 10px 11px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.isbn-source-cover {
  width: 52px; height: 72px;
  object-fit: cover;
  border-radius: 3px;
  border: .5px solid var(--b2);
  float: right;
  margin: 0 0 6px 8px;
}
.isbn-source-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  line-height: 1.3;
}
.isbn-source-meta {
  font-size: 11px;
  color: var(--tx2);
  line-height: 1.3;
}
.isbn-source-desc {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.isbn-source-foot {
  padding: 8px 11px;
  border-top: .5px solid var(--b2);
  background: var(--bg2);
}
.isbn-source-apply {
  width: 100%;
  justify-content: center;
  font-size: 12px !important;
  padding: 5px 10px !important;
}

@media (max-width: 640px) {
  .isbn-sources-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
   WIDGET TMDB — FORMULAIRE D'AJOUT
   ============================================================================= */

/* Grille de résultats : auto-fill responsive, min 200px par carte */
.tmdb-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: .5rem;
}

/* Carte individuelle */
.tmdb-form-card {
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--bg1);
  display: flex;
  flex-direction: column;
  transition: border-color .12s;
}
.tmdb-form-card:hover { border-color: var(--b3, var(--tx3)); }

/* Zone affiche */
.tmdb-form-cover {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tmdb-form-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tmdb-form-nocover {
  font-size: 40px;
  color: var(--tx3);
}

/* Zone informations */
.tmdb-form-info {
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.tmdb-form-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  line-height: 1.3;
}
.tmdb-form-original {
  font-size: 11px;
  color: var(--tx3);
  font-style: italic;
}
.tmdb-form-director {
  font-size: 12px;
  color: var(--tx2);
}
.tmdb-form-meta {
  font-size: 11px;
  color: var(--tx3);
}
.tmdb-form-genre {
  font-size: 11px;
  color: var(--tx2);
}
.tmdb-form-desc {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.4;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bouton Utiliser */
.tmdb-form-apply-btn {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
  font-size: 12px !important;
  padding: 5px 10px !important;
}

@media (max-width: 640px) {
  .tmdb-form-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* =============================================================================
   WIDGET MUSICBRAINZ — FORMULAIRE D'AJOUT
   ============================================================================= */

/* Barre de recherche à deux champs (artiste + album) */
.mb-search-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.mb-search-row input {
  flex: 1;
  min-width: 160px;
}
.mb-search-row .btn {
  flex-shrink: 0;
}

/* Les cartes musique héritent du style tmdb-form-card
   avec la couverture carrée (aspect-ratio 1/1 au lieu de 2/3) */
.mb-form-card .tmdb-form-cover {
  aspect-ratio: 1 / 1;
}

@media (max-width: 640px) {
  .mb-search-row { flex-direction: column; align-items: stretch; }
}

/* ── Séparateurs de groupe MusicBrainz ── */
.mb-group-sep {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .5rem 0 .1rem;
}
.mb-group-sep::before,
.mb-group-sep::after {
  content: '';
  flex: 1;
  height: .5px;
  background: var(--b2);
}
.mb-group-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tx3);
  white-space: nowrap;
  padding: 2px 8px;
  border: .5px solid var(--b2);
  border-radius: 10px;
  background: var(--bg2);
}

/* ── Métadonnées étendues — cartes MusicBrainz ── */
.mb-card-disambiguation {
  font-size: 11px;
  color: var(--tx3);
  font-style: italic;
  line-height: 1.3;
}
.mb-card-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--tx3);
}
.mb-card-meta-icon {
  font-size: 10px;
  opacity: .7;
  flex-shrink: 0;
}
.mb-card-mbid {
  margin-top: 3px;
  font-family: monospace;
}
.mb-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.mb-tag-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--bg2);
  border: .5px solid var(--b2);
  color: var(--tx2);
  white-space: nowrap;
}

/* =============================================================================
   MUSICBRAINZ — SÉLECTION MULTIPLE, DOUBLON, BARRE, MODAL
   ============================================================================= */

/* Carte cliquable */
.tmdb-form-card.mb-form-card {
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.tmdb-form-card.mb-form-card:hover {
  border-color: var(--b3, #aaa);
}

/* Carte sélectionnée — fond vert */
.mb-card-selected {
  background: #F0FDF4 !important;
  border-color: #4ADE80 !important;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, .25);
}
.mb-card-selected .tmdb-form-info { background: #F0FDF4; }
.mb-card-selected .tmdb-form-cover::after {
  content: '✓';
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  background: #22C55E;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tmdb-form-card.mb-form-card .tmdb-form-cover { position: relative; }

@media (prefers-color-scheme: dark) {
  .mb-card-selected { background: #052E16 !important; border-color: #16A34A !important; }
  .mb-card-selected .tmdb-form-info { background: #052E16; }
}

/* Carte doublon — fond rouge intense pour signalement fort */
.mb-card-doublon {
  background: #FECACA !important;
  border-color: #EF4444 !important;
}
.mb-card-doublon .tmdb-form-info { background: #FECACA; }

@media (prefers-color-scheme: dark) {
  .mb-card-doublon { background: #7F1D1D !important; border-color: #DC2626 !important; }
  .mb-card-doublon .tmdb-form-info { background: #7F1D1D; }
}

.mb-badge-doublon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: #991B1B;
  background: #FEE2E2;
  border: .5px solid #F87171;
  border-radius: 8px;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Boutons en bas de carte */
.mb-card-btns { margin-top: auto; padding-top: 6px; }

/* Barre de sélection flottante */
.mb-selbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
  padding: .65rem .9rem;
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
}
.mb-selbar-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
}
.mb-selbar-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Modal */
#mb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-modal {
  background: var(--bg1);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  padding: 1.5rem;
  width: min(420px, calc(100vw - 2rem));
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.mb-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: .75rem;
}
.mb-modal-body {
  font-size: 14px;
  color: var(--tx2);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.mb-modal-foot { display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
  .mb-selbar-inner { flex-direction: column; align-items: stretch; }
  .mb-selbar-actions { flex-direction: column; }
}

/* ── Barre de progression import MusicBrainz ── */
.mb-prog-track {
  height: 6px;
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: 3px;
  overflow: hidden;
}
.mb-prog-fill {
  height: 100%;
  background: #22C55E;
  border-radius: 3px;
  transition: width .25s ease;
}

/* =============================================================================
   OPEN LIBRARY — WIDGET RECHERCHE PAR AUTEUR
   ============================================================================= */

/* Grille de désambiguïsation des auteurs */
.ol-authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: .4rem;
}
.ol-author-card {
  padding: .65rem .85rem;
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  background: var(--bg1);
  transition: border-color .12s, background .12s;
}
.ol-author-card:hover { border-color: var(--b3, #aaa); background: var(--bg2); }
.ol-author-name  { font-size: 13px; font-weight: 500; color: var(--tx); }
.ol-author-meta  { font-size: 11px; color: var(--tx2); margin-top: 2px; }
.ol-author-count { font-size: 11px; color: var(--tx3); margin-top: 2px; }

/* Bannière auteur sélectionné */
.ol-author-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .5rem .75rem;
  background: var(--bg2);
  border: .5px solid var(--b2);
  border-radius: var(--r2);
  margin-bottom: .75rem;
  font-size: 13px;
}
.ol-banner-name  { font-weight: 600; color: var(--tx); flex: 1; }
.ol-banner-count { font-size: 11px; color: var(--tx3); }
.ol-banner-back  { flex-shrink: 0; }

/* Description tronquée dans les cartes livres */
.tmdb-form-desc {
  font-size: 11px;
  color: var(--tx3);
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Badge source OL / BnF sur les cartes Open Library ── */
.ol-source-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .03em;
}
.ol-source-ol  { background: #DBEAFE; color: #1D4ED8; border: .5px solid #93C5FD; }
.ol-source-bnf { background: #FEF3C7; color: #92400E; border: .5px solid #FCD34D; }