/* ═══════════════════════════════════════════════════════════════════════════
   database — l'habillage d'Airtable, repris pour de vrai.

   Airtable est une application CLAIRE : fond blanc, filets très fins, bleu
   #2d7ff9. C'est le réglage par défaut ici. Le sombre existe, mais il se
   CHOISIT (bouton en bas de la barre latérale) — il ne s'impose plus parce
   que le système est en sombre.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --fond:#ffffff; --chrome:#f7f7f7; --cote:#f7f7f7; --panneau:#ffffff;
  --trait:#e5e5e5; --trait-fin:#ededed; --trait-fort:#d4d4d4;
  --encre:#1d1f25; --doux:#6f7481; --tres-doux:#9aa0ab;
  --bleu:#2d7ff9; --bleu-pale:#e8f0fe; --bleu-sombre:#2563d4;
  --survol:#f8f9fa; --active:#eef3ff;
  --garder:#20a26a; --reparer:#ff6f2c; --trancher:#fcb400; --jeter:#f82b60;
  --ombre-s:0 0 0 1px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.06);
  --ombre:0 2px 10px rgba(0,0,0,.1), 0 12px 40px rgba(0,0,0,.12);
  --h-ligne:36px; --l-cote:232px; --l-num:62px; --l-primaire:230px;
  --c-vide:#f4f4f5;
}
:root[data-theme="sombre"]{
  /* ⚠️ Le commentaire d'avant disait « ces valeurs sont CELLES de hub.css ».
     C'était vrai, puis ça ne l'était plus : hub.css est passé au métal chaud du
     médaillon (#bbb2aa, R > B) et ces valeurs-ci restaient bleutées (#d6dae0,
     B > R). La grille et la coquille avaient deux gris de température opposée.
     On ne recopie donc plus : on PUISE dans la matière commune de `:root`, et
     le reste est aligné sur elle. */
  --fond:#000; --panneau:#0a0a0a; --cote:#0e0e0d;
  --trait:rgba(224,219,213,.075); --trait-fin:rgba(224,219,213,.045);
  --trait-fort:rgba(224,219,213,.16);
  --encre:var(--m-arete); --doux:#9d9992; --tres-doux:#6d6a65;
  --bleu:#6e9fd4; --bleu-pale:#15191f; --bleu-sombre:#9dc2e6;
  --survol:rgba(224,219,213,.028); --active:rgba(224,219,213,.06);
  --garder:var(--l-bon); --reparer:#d97a4a; --trancher:var(--l-attente); --jeter:var(--l-mal);
  --ombre-s:0 0 0 1px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.55);
  --ombre:0 2px 10px rgba(0,0,0,.7), 0 24px 60px -22px rgba(0,0,0,.95);
  --c-vide:rgba(224,219,213,.035);
}
/* ⚠️ Ce fichier n'habille QUE l'outil « registre ». Le `body`, la mise en page
   générale et le rail appartiennent à hub.css — les redéclarer ici écrasait la
   coquille et tassait toute l'application dans 220 px (vu le 20/09). */
button,input,select{font:inherit;color:inherit}
::selection{background:var(--bleu-pale)}

/* ── barre latérale ─────────────────────────────────────────────────────── */
#mod-registre{display:flex;min-width:0;height:100%}
.cote{width:var(--l-cote);flex:0 0 var(--l-cote);background:var(--cote);
  border-right:1px solid var(--trait);display:flex;flex-direction:column;min-height:0;height:100%}
.marque{display:flex;gap:10px;align-items:center;padding:15px 14px 13px}
.logo{width:30px;height:30px;border-radius:7px;background:var(--bleu);color:#fff;
  display:grid;place-items:center;font-size:15px;flex:0 0 30px;font-weight:700}
.marque b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.012em}
.marque small{display:block;font-size:11px;color:var(--doux);margin-top:1px}
.entete-cote{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tres-doux);padding:6px 16px 5px}
.tables{flex:1;overflow-y:auto;padding:0 8px 14px;min-height:0}
.tables button{display:flex;width:100%;align-items:center;gap:9px;text-align:left;
  background:none;border:0;border-radius:6px;padding:7px 9px;cursor:pointer;color:var(--encre);
  line-height:1.35}
.tables button:hover{background:var(--survol)}
.tables button[aria-current="true"]{background:var(--active);color:var(--bleu-sombre);font-weight:600}
.tables .pt{width:7px;height:7px;border-radius:2px;flex:0 0 7px;background:var(--tres-doux);opacity:.55}
.tables button[aria-current="true"] .pt{background:var(--bleu);opacity:1}
.tables .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tables .n{font-size:11px;color:var(--tres-doux);font-variant-numeric:tabular-nums}
.tables button[aria-current="true"] .n{color:var(--bleu-sombre);opacity:.75}
.pied{border-top:1px solid var(--trait);padding:8px;display:flex;flex-direction:column;gap:2px}
.lien-pied{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
  border-radius:6px;padding:7px 9px;cursor:pointer;color:var(--doux);font-size:12px;text-align:left}
.lien-pied:hover{background:var(--survol);color:var(--encre)}
.lien-pied[aria-pressed="true"]{background:var(--active);color:var(--bleu-sombre)}
.pastille{width:8px;height:8px;border-radius:50%;flex:0 0 8px;
  background:linear-gradient(135deg,var(--garder) 0 50%,var(--reparer) 50% 100%)}

/* ── zone principale ────────────────────────────────────────────────────── */
.principal{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panneau)}
.barre{background:var(--panneau);border-bottom:1px solid var(--trait);
  display:flex;align-items:center;gap:14px;padding:11px 16px 10px}
.titre-zone{display:flex;align-items:baseline;gap:10px;min-width:0}
h1{font-size:16.5px;font-weight:650;letter-spacing:-.018em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.compte{font-size:11.5px;color:var(--doux);font-variant-numeric:tabular-nums;white-space:nowrap}
.outils{display:flex;gap:8px;align-items:center;margin-left:auto}
#recherche{width:200px;background:var(--chrome);border:1px solid transparent;
  border-radius:6px;padding:6px 11px}
#recherche:hover{border-color:var(--trait)}
#recherche:focus{outline:0;background:var(--panneau);border-color:var(--bleu);
  box-shadow:0 0 0 3px var(--bleu-pale)}
.btn{border:1px solid var(--trait);background:var(--panneau);border-radius:6px;
  padding:6px 12px;cursor:pointer;font-size:12.5px;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--survol);border-color:var(--trait-fort)}
.btn.primaire{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn.primaire:hover{background:var(--bleu-sombre);border-color:var(--bleu-sombre)}
.btn-icone{background:none;border:0;cursor:pointer;color:var(--doux);font-size:15px;
  width:28px;height:28px;border-radius:6px;display:grid;place-items:center}
.btn-icone:hover{background:var(--survol);color:var(--encre)}

/* ── barre des vues ─────────────────────────────────────────────────────── */
.barre-vues{display:flex;align-items:center;gap:3px;padding:0 16px;background:var(--panneau);
  border-bottom:1px solid var(--trait);overflow-x:auto;scrollbar-width:thin;min-height:38px}
.barre-vues button{background:none;border:0;padding:9px 12px 8px;cursor:pointer;
  color:var(--doux);white-space:nowrap;font-size:12.5px;border-radius:5px 5px 0 0;
  display:flex;align-items:center;gap:6px}
.barre-vues button:hover{background:var(--survol);color:var(--encre)}
.barre-vues button[aria-current="true"]{color:var(--encre);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--bleu)}
.barre-vues .fil{font-size:9.5px;color:var(--bleu);opacity:.85}

/* ── la grille ──────────────────────────────────────────────────────────── */
.zone{flex:1;overflow:auto;background:var(--panneau);position:relative}
.grille{border-collapse:separate;border-spacing:0;table-layout:fixed}
.grille th,.grille td{border-right:1px solid var(--trait-fin);border-bottom:1px solid var(--trait-fin);
  height:var(--h-ligne);padding:0 10px;text-align:left;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;vertical-align:middle;background:var(--panneau)}
.grille thead th{position:sticky;top:0;z-index:3;background:var(--panneau);font-weight:600;
  font-size:12px;color:var(--doux);border-bottom:1px solid var(--trait-fort);
  cursor:pointer;user-select:none;height:34px}
.grille thead th:hover{background:var(--survol);color:var(--encre)}
.grille th .tete{display:flex;align-items:center;gap:7px;min-width:0}
.grille th .ic{color:var(--tres-doux);font-size:11px;flex:0 0 auto;width:12px;text-align:center}
.grille th .nom{overflow:hidden;text-overflow:ellipsis}
.grille th .fleche{margin-left:auto;color:var(--bleu);font-size:9px;flex:0 0 auto}
.grille th .marque-v{width:6px;height:6px;border-radius:50%;flex:0 0 6px;margin-left:auto}
.mv-garder{background:var(--garder)} .mv-reparer{background:var(--reparer)}
.mv-trancher{background:var(--trancher)} .mv-jeter{background:var(--jeter)}

/* colonne de numéro : figée, et elle révèle le bouton d'ouverture au survol */
.col-n{width:var(--l-num);min-width:var(--l-num);max-width:var(--l-num);position:sticky;left:0;z-index:2;
  color:var(--tres-doux);font-variant-numeric:tabular-nums;font-size:11.5px;
  border-right:1px solid var(--trait-fin);padding:0 8px}
thead .col-n{z-index:4}
.col-n .paire{display:flex;align-items:center;justify-content:space-between;gap:4px}
.col-n .ouvrir{opacity:0;background:none;border:0;cursor:pointer;color:var(--doux);
  font-size:11px;padding:2px 3px;border-radius:4px;line-height:1}
tbody tr:hover .col-n .ouvrir{opacity:1}
.col-n .ouvrir:hover{background:var(--bleu-pale);color:var(--bleu-sombre)}
.col-1{width:var(--l-primaire);min-width:var(--l-primaire);max-width:var(--l-primaire);
  position:sticky;left:var(--l-num);z-index:2;font-weight:550;
  border-right:1px solid var(--trait-fort)}
thead .col-1{z-index:4}
tbody tr:hover td{background:var(--survol)}
td.calc{background:var(--c-vide);color:var(--doux)}
tbody tr:hover td.calc{background:var(--survol)}
td[contenteditable="true"]{cursor:text}
td[contenteditable="true"]:focus{outline:2px solid var(--bleu);outline-offset:-2px;
  background:var(--panneau);white-space:normal;overflow:visible;position:relative;z-index:6;
  box-shadow:var(--ombre-s);border-radius:2px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.cellule-vue{outline:2px solid var(--bleu);outline-offset:-2px;border-radius:2px}

/* jetons — les vraies couleurs d'Airtable (voir couleurs.js) */
.jeton{display:inline-block;padding:2.5px 9px;border-radius:11px;font-size:12px;
  line-height:1.45;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
  font-weight:500}
.case{font-size:15px;color:var(--bleu);line-height:1}
.case.off{color:var(--trait-fort)}
.lien-n{display:inline-block;background:var(--bleu-pale);color:var(--bleu-sombre);
  border-radius:4px;padding:1.5px 7px;font-size:11.5px;font-weight:600}
.erreur-f{color:var(--jeter);font-size:11.5px}
.rien{padding:52px 20px;color:var(--doux);text-align:center;font-size:13.5px}
.rien b{display:block;color:var(--encre);font-size:15px;margin-bottom:5px;font-weight:600}

/* ── tiroir de fiche ────────────────────────────────────────────────────── */
.tiroir{position:fixed;inset:0;z-index:20;display:flex;justify-content:flex-end}
.tiroir[hidden]{display:none}
.tiroir-fond{position:absolute;inset:0;background:rgba(15,18,24,.3)}
.tiroir-panneau{position:relative;width:min(620px,96vw);background:var(--panneau);
  height:100%;display:flex;flex-direction:column;box-shadow:var(--ombre)}
.tiroir-panneau header{display:flex;align-items:center;gap:10px;padding:15px 18px;
  border-bottom:1px solid var(--trait)}
.tiroir-panneau h2{font-size:16px;font-weight:650;flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.015em}
.tiroir-corps{overflow-y:auto;padding:4px 18px 30px}
.f-groupe{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tres-doux);padding:18px 0 6px;border-bottom:1px solid var(--trait)}
.f-ligne{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--trait-fin)}
.f-nom{font-size:12px;color:var(--doux);display:flex;align-items:center;gap:7px;padding-top:5px}
.f-nom .ic{color:var(--tres-doux);width:12px;text-align:center;flex:0 0 12px}
.f-nom .nm{overflow:hidden;text-overflow:ellipsis}
.f-val{min-height:28px;padding:5px 8px;border:1px solid transparent;border-radius:5px;
  white-space:pre-wrap;word-break:break-word}
.f-val[contenteditable="true"]:hover{border-color:var(--trait)}
.f-val[contenteditable="true"]:focus{outline:0;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-pale)}
.f-val.calc{background:var(--c-vide);color:var(--doux)}
.f-ligne select{width:100%;padding:6px 8px;border:1px solid var(--trait);border-radius:5px;
  background:var(--panneau);cursor:pointer}
.f-ligne select:focus{outline:0;border-color:var(--bleu);box-shadow:0 0 0 3px var(--bleu-pale)}

/* ── message flottant ───────────────────────────────────────────────────── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:40;
  background:#1d1f25;color:#fff;padding:10px 17px;border-radius:8px;
  font-size:12.5px;box-shadow:var(--ombre);max-width:min(600px,92vw)}
.toast.mauvais{background:var(--jeter)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── historique et corbeille ────────────────────────────────────────────── */
.cpt-corb{margin-left:auto;font-size:10.5px;background:var(--jeter);color:#fff;
  border-radius:9px;padding:1px 6px;font-weight:600;font-variant-numeric:tabular-nums}
.cpt-corb:empty{display:none}
body.en-corbeille .zone{background:repeating-linear-gradient(45deg,
  transparent 0 14px,rgba(248,43,96,.035) 14px 28px)}
body.en-corbeille .grille td{background:transparent}
.histo{padding:4px 0 2px}
.histo-l{display:flex;gap:9px;align-items:baseline;padding:5px 0;
  border-bottom:1px solid var(--trait-fin);font-size:12px;flex-wrap:wrap}
.histo-q{color:var(--tres-doux);font-variant-numeric:tabular-nums;flex:0 0 92px;font-size:11px}
.histo-l b{font-weight:600;font-size:11.5px}
.histo-a{color:var(--doux);text-decoration:line-through;opacity:.75;
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.histo-fl{color:var(--tres-doux)}
.histo-p{color:var(--encre);font-weight:500;max-width:180px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.histo-act{color:var(--bleu-sombre);font-weight:600;font-size:11.5px}
.histo-vide{color:var(--doux);font-size:12.5px;padding:8px 0}
.f-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:22px 0 8px}
.f-note{font-size:11.5px;color:var(--doux)}
.btn.danger{color:var(--jeter);border-color:var(--trait)}
.btn.danger:hover{background:var(--jeter);border-color:var(--jeter);color:#fff}

/* ── vues maison : les nôtres, distinctes de celles d'Airtable ──────────── */
.barre-vues button.maison{color:var(--doux)}
.barre-vues button.maison::before{content:'';width:5px;height:5px;border-radius:1px;
  background:var(--bleu);opacity:.55;flex:0 0 5px}
.barre-vues button.maison[aria-current="true"]::before{opacity:1}
.barre-vues .fil.col{font:600 9.5px Archivo,sans-serif;background:var(--bleu-pale);
  color:var(--bleu-sombre);border-radius:8px;padding:1px 5px;opacity:1}


/* ═══════════════════════════════════════════════════════════════════════════
   LA MATIÈRE — le registre taillé dans la carte noire (thème sombre seulement)

   Ce qui suit n'ajoute aucune règle de mise en page : ça change la MATIÈRE des
   surfaces déjà en place. Quatre gestes, les mêmes que sur le dashboard :
     · le fond est du noir mat SATINÉ, pas un gris ;
     · toute plaque porte une ARÊTE FRAISÉE en haut — un trait qui s'allume au
       milieu et s'éteint aux bords, comme la tranche d'une carte en titane ;
     · les CHIFFRES sont peints d'un dégradé clippé : frappés, pas écrits ;
     · les libellés de structure passent en petites capitales très espacées.

   ⛔ En thème CLAIR, rien de tout ça ne s'applique : on ne feint pas du métal
      sur du papier, et les jetons de couleur d'Airtable ont besoin du blanc.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="sombre"] #mod-registre{ background:var(--brosse), var(--fond) }
:root[data-theme="sombre"] .principal,
:root[data-theme="sombre"] .zone{ background:transparent }

/* ── la barre d'outils : une plaque, et sa tranche ──────────────────────── */
:root[data-theme="sombre"] .barre{
  position:relative; background:var(--plaque); box-shadow:var(--grave);
}
:root[data-theme="sombre"] .barre::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--arete-h); opacity:.55;
}
:root[data-theme="sombre"] .titre-zone h1{
  font-family:var(--f-aff); letter-spacing:-.018em;
  background:var(--poli); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
:root[data-theme="sombre"] .compte{ font-family:var(--f-num); font-size:11px }

/* le champ de recherche : un puits creusé dans la plaque, pas une boîte posée */
:root[data-theme="sombre"] #recherche{
  background:rgba(0,0,0,.45); border-color:var(--trait);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
:root[data-theme="sombre"] #recherche:focus{
  background:rgba(0,0,0,.6); border-color:var(--trait-fort); box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}
/* le bouton d'action devient du métal : sur une carte noire, un aplat bleu
   est la seule chose qui a l'air collée dessus. */
:root[data-theme="sombre"] .btn{ background:var(--plaque-h); box-shadow:var(--grave) }
:root[data-theme="sombre"] .btn:hover{ border-color:var(--trait-fort) }
:root[data-theme="sombre"] .btn.primaire{
  background:linear-gradient(180deg,#e8e3dd,#b4aca3); border-color:#8c8982;
  color:#0c0c0b; font-weight:600; text-shadow:0 1px 0 rgba(255,255,255,.35);
}
:root[data-theme="sombre"] .btn.primaire:hover{
  background:linear-gradient(180deg,#fffbf8,#c6bdb4); border-color:#a8a29a;
}

/* ── les onglets de vues : le soulignement actif est une arête de métal ─── */
:root[data-theme="sombre"] .barre-vues{ background:transparent }
:root[data-theme="sombre"] .barre-vues button{
  font-size:11.5px; letter-spacing:.02em;
}
:root[data-theme="sombre"] .barre-vues button[aria-current="true"]{
  box-shadow:inset 0 -2px 0 var(--m-clair);
}

/* ── la grille ──────────────────────────────────────────────────────────── */
/* L'en-tête est une plaque collante : elle doit rester OPAQUE au défilement,
   sinon les lignes défilent derrière et on lit deux textes superposés.
   ⛔ PAS DE `text-transform:uppercase` ICI, et c'est une règle du projet, pas un
   goût : « les colonnes portent leur VRAI nom — ce qu'on lit à l'écran est ce
   qu'il y a dans la base » (LISEZ-MOI). Afficher « SNAPCHAT USERNAME » quand la
   colonne s'appelle `snapchat username`, c'est rendre le nom faux pour qui veut
   le recopier dans une formule. Les capitales espacées sont réservées à NOS
   libellés (titres de section, en-têtes de la compta) — jamais aux siens. */
:root[data-theme="sombre"] .grille thead th{
  background:#101010; font:500 11.5px var(--f-txt);
  letter-spacing:.02em; color:var(--doux); border-bottom-color:var(--trait);
}
:root[data-theme="sombre"] .grille thead th:hover{ background:#161514; color:var(--m-arete) }
:root[data-theme="sombre"] .grille td{ border-right-color:var(--trait-fin); border-bottom-color:var(--trait-fin) }
:root[data-theme="sombre"] tbody tr:hover td{ background:var(--survol) }
/* la colonne des numéros : du chiffre monospacé, discret, comme une réglure */
:root[data-theme="sombre"] .col-n{ background:#080808; font-family:var(--f-num); font-size:11px }
:root[data-theme="sombre"] thead .col-n{ background:#101010 }
:root[data-theme="sombre"] tbody tr:hover .col-n{ background:#0e0e0d }

/* ── le tiroir et les boîtes de dialogue : des plaques, avec leur tranche ── */
:root[data-theme="sombre"] .tiroir-panneau,
:root[data-theme="sombre"] .form{
  position:relative; background:var(--plaque); border-color:var(--trait-fort);
}
:root[data-theme="sombre"] .tiroir-panneau::before,
:root[data-theme="sombre"] .form::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--arete-h); z-index:1;
}
:root[data-theme="sombre"] .tiroir-fond,
:root[data-theme="sombre"] .voile{ background:rgba(0,0,0,.72) }