/* wondarchive — feuille unique, ecrite a la main.
   Direction « Instrument » (7 septembre 2026) : un chrome sombre (bandeau,
   sommaire, volet) autour d'un contenu clair ; l'or ne marque que ce qui est
   courant ou choisi, le bleu ardoise porte les actions et les titres de cote.
   Systeme : cinq tailles de texte, une echelle d'espacement, deux ombres.
   Ordre : jetons, polices, base, composants, bandeau, volet, ecrans, etroit. */

/* ================================================================== jetons */
:root {
  /* contenu, theme clair */
  --fond:      #f7f6f2;
  --surface:   #ffffff;
  --champ:     #eeece6;
  --bord:      #e1ded6;
  --bord-fort: #c6c1b5;
  --encre:     #1b1a18;
  --encre-2:   #4f4c45;
  --encre-3:   #6f6a60;
  --accent:    #234a72;
  --accent-2:  #e6edf5;
  --ok:        #266a4e;
  --ok-f:      #e3efe8;
  --attente:   #8a6414;
  --attente-f: #f4ecd6;
  --alerte:    #a03a28;
  --alerte-f:  #f6e4df;
  --surligne:  #f5e9b8;
  --or:        #d9a441;
  --p-orient:  #e2b256;   /* l'or sur le chrome sombre : plus clair, sinon il s'y noie */

  /* chrome sombre, identique dans les deux themes */
  --c-fond:    #16181c;
  --c-surface: #1e2126;
  --c-champ:   #262a31;
  --c-bord:    #2e323a;
  --c-bord-2:  #3d424c;
  --c-encre:   #f1eee7;
  --c-encre-2: #c0bcb2;
  --c-encre-3: #8f939b;
  --bandeau:   #0f1013;

  --ui:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --lect:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --t-1: 12px; --t0: 14px; --t1: 16px; --t2: 20px; --t3: 28px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --r1: 4px; --r2: 8px;
  --o1: 0 1px 2px rgba(20,18,12,.06), 0 1px 0 rgba(20,18,12,.03);
  --o2: 0 12px 32px rgba(20,18,12,.18);
  --bandeau-h: 48px;
  --volet-l: 400px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #15171b; --surface: #1c1f24; --champ: #242830; --bord: #2c3038; --bord-fort: #3f444e;
    --encre: #ebe8e1; --encre-2: #c0bcb2; --encre-3: #9a9da5;
    --accent: #d9a441; --accent-2: #2f2a1c; --ok: #5aa583; --ok-f: #1f2f27; --attente: #d9a441; --attente-f: #3a3322;
    --alerte: #c96b52; --alerte-f: #3a2420; --surligne: #4a3f1c;
    --o1: 0 1px 2px rgba(0,0,0,.4); --o2: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --fond: #15171b; --surface: #1c1f24; --champ: #242830; --bord: #2c3038; --bord-fort: #3f444e;
  --encre: #ebe8e1; --encre-2: #c0bcb2; --encre-3: #9a9da5;
  --accent: #d9a441; --accent-2: #2f2a1c; --ok: #5aa583; --ok-f: #1f2f27; --attente: #d9a441; --attente-f: #3a3322;
  --alerte: #c96b52; --alerte-f: #3a2420; --surligne: #4a3f1c;
  --o1: 0 1px 2px rgba(0,0,0,.4); --o2: 0 12px 32px rgba(0,0,0,.5);
}

/* ================================================================= polices */
@font-face { font-family: 'Instrument Sans'; src: url('/static/polices/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/polices/fraunces.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('/static/polices/source-serif.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/static/polices/plex-mono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

/* ==================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--fond); color: var(--encre); font: var(--t0)/1.5 var(--ui); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--t3); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t1); font-family: var(--ui); }
p { margin: 0 0 var(--e3); }
b, strong { font-weight: 600; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.petit { font-size: var(--t-1); color: var(--encre-3); }
.lab { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); }
.chapo { color: var(--encre-2); max-width: 72ch; margin: 0 0 var(--e5); }
.page { max-width: 1080px; margin: 0 auto; padding: var(--e5) var(--e5) 80px; }
.page.large { max-width: 1600px; }
.enligne { display: inline; }
.vide { padding: var(--e7) 0; color: var(--encre-2); }
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e5); margin: 0 0 var(--e5); flex-wrap: wrap; }
.entete-page .lab { display: block; margin-bottom: var(--e1); }
.entete-droite { display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
.sous-titre { margin: 0 0 var(--e3); }
.ok { color: var(--ok); }

/* ============================================================== composants */
/* boutons : primaire (plein), creux (contour), lien (discret) */
.bouton {
  display: inline-flex; align-items: center; gap: var(--e2); border: 1px solid var(--accent); border-radius: var(--r1);
  padding: var(--e2) var(--e4); font: 600 var(--t0) var(--ui); background: var(--accent); color: #fff; cursor: pointer; line-height: 1.3;
}
:root[data-theme="dark"] .bouton { color: #121316; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bouton { color: #121316; } }
.bouton:hover { filter: brightness(1.08); }
.bouton:disabled { opacity: .5; cursor: default; filter: none; }
.bouton.creux { background: transparent; color: var(--accent); border-color: var(--bord-fort); }
.bouton.creux:hover { background: var(--accent-2); filter: none; }
.bouton small { font-weight: 400; font-size: var(--t-1); opacity: .85; }
.lien { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: var(--t-1); color: var(--accent); }
.lien:hover { text-decoration: underline; }
.lien:disabled { opacity: .5; cursor: default; }
.ico { background: none; border: 1px solid transparent; border-radius: var(--r1); padding: 2px var(--e2); font-size: 16px; line-height: 1.2; color: var(--encre-3); cursor: pointer; }
.ico:hover, .ico[aria-expanded="true"] { border-color: var(--bord-fort); background: var(--champ); color: var(--encre); }

/* champs */
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], select, textarea {
  font: var(--t0) var(--ui); color: var(--encre); background: var(--surface);
  border: 1px solid var(--bord-fort); border-radius: var(--r1); padding: var(--e2) var(--e3); width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
select { cursor: pointer; width: auto; }
input.court { width: 84px; }
input[type=range] { accent-color: var(--accent); }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); }
label { font-size: var(--t0); color: var(--encre-2); }

/* menus flottants (details) */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-size: var(--t0); color: var(--encre-2); padding: var(--e1) var(--e2); border-radius: var(--r1); display: inline-flex; align-items: center; gap: var(--e2); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: var(--champ); color: var(--encre); }
.menu ul {
  position: absolute; right: 0; top: 100%; z-index: 40; margin: var(--e1) 0 0; padding: var(--e2) 0; list-style: none;
  min-width: 240px; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); box-shadow: var(--o2);
  color: var(--encre); font-size: var(--t0);
}
.menu li a, .menu li .lien { display: block; width: 100%; text-align: left; padding: var(--e2) var(--e4); color: var(--encre-2); font-size: var(--t0); }
.menu li a:hover, .menu li .lien:hover { background: var(--champ); color: var(--encre); text-decoration: none; }
.menu li a.on { color: var(--encre); font-weight: 600; }
.menu li.lab { padding: var(--e2) var(--e4) var(--e1); }
.menu li.separateur { border-top: 1px solid var(--bord); margin: var(--e1) 0; }
.menu li > .petit { display: block; padding: var(--e2) var(--e4); }
.menu.points summary { font-size: 18px; line-height: 1; padding: 0 var(--e2); color: var(--encre-3); }

/* etats */
.pastille { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: none; background: var(--encre-3); }
.pastille.traduite   { background: var(--ok); }
.pastille.transcrite { background: var(--accent); }
.pastille.manuscrite { background: var(--attente); }
.pastille.echec      { background: var(--alerte); }
.pastille.deposee    { background: var(--bord-fort); }
.etat-chip { display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-1); font-weight: 600; color: var(--encre-2); }
.etat-chip.attente { color: var(--attente); }
.etat-chip.envoi   { color: var(--accent); }
.etat-chip.recu    { color: var(--ok); }
.etat-chip.doublon { color: var(--encre-3); }
.etat-chip.echec   { color: var(--alerte); }
.chip-iso { font: 500 var(--t-1) var(--mono); background: var(--champ); border-radius: var(--r1); padding: 2px var(--e2); color: var(--encre-2); }
.alerte { background: var(--alerte-f); color: var(--alerte); border-radius: var(--r1); padding: var(--e2) var(--e3); margin: 0 0 var(--e4); font-size: var(--t0); }
.alerte-inline { color: var(--attente); }
.reprise { font-size: var(--t0); color: var(--ok); background: var(--ok-f); border-radius: var(--r1); padding: var(--e2) var(--e3); margin-bottom: var(--e4); font-weight: 500; }
mark { background: var(--surligne); color: var(--encre); padding: 0 2px; border-radius: 2px; }
.crochets { font-family: var(--ui); font-size: .8em; letter-spacing: .02em; color: var(--attente); background: var(--attente-f); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
.nom-propre { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-1); background: var(--champ); border-radius: var(--r1); padding: 1px var(--e2); margin: 0 var(--e1) var(--e1) 0; color: var(--encre); border-left: 3px solid var(--bord-fort); }
.nom-propre.personne { border-left-color: var(--accent); }
.nom-propre.societe  { border-left-color: var(--ok); }
.nom-propre.lieu     { border-left-color: var(--attente); }
.nom-propre.manuel   { outline: 1px solid var(--accent); }
.nom-propre .oter { background: none; border: none; cursor: pointer; color: var(--encre-3); font-size: var(--t-1); padding: 0 0 0 2px; }
.nom-propre .oter:hover { color: var(--alerte); }

/* dates avec leur certitude */
.date { font: 500 var(--t-1) var(--mono); font-variant-numeric: tabular-nums; }
.date.relevee  { color: var(--encre-2); }
.date.estimee  { color: var(--attente); border-bottom: 1px dotted var(--attente); }
.date.reportee { color: var(--encre-3); font-style: italic; }
.date.absente  { color: var(--encre-3); }

/* tables */
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t0); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); overflow: hidden; }
.tableau th { text-align: left; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); padding: var(--e2) var(--e4); border-bottom: 1px solid var(--bord); }
.tableau td { padding: var(--e2) var(--e4); border-bottom: 1px solid var(--bord); color: var(--encre-2); vertical-align: top; }
.tableau tr:last-child td { border-bottom: none; }
.tableau .fichier { font: 500 var(--t-1) var(--mono); color: var(--encre); word-break: break-all; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
.colonne-etat { width: 240px; }

/* boites de dialogue */
.boite { border: 1px solid var(--bord-fort); border-radius: var(--r2); padding: var(--e5) var(--e5) var(--e4); background: var(--surface); color: var(--encre); width: min(440px, 92vw); box-shadow: var(--o2); }
.boite::backdrop { background: rgba(10,10,12,.45); }
.boite h2 { margin-bottom: var(--e3); }
.boite label { display: block; margin-bottom: var(--e3); }
.boite input { margin-top: var(--e1); }
.boite-actions { display: flex; gap: var(--e4); align-items: center; justify-content: flex-end; margin-top: var(--e4); }
.boite-actions .petit { margin-right: auto; }
.zone-depot { border: 2px dashed var(--bord-fort); border-radius: var(--r2); padding: var(--e6) var(--e5); text-align: center; color: var(--encre-2); background: var(--surface); margin-bottom: var(--e4); }
.zone-depot b { display: block; font-size: var(--t1); color: var(--encre); margin-bottom: var(--e1); }
.zone-depot.survol { border-color: var(--accent); background: var(--accent-2); }
.zone-image { display: block; cursor: pointer; margin: var(--e3) 0; padding: var(--e5) var(--e4); }
.lien-fichier { color: var(--accent); cursor: pointer; text-decoration: underline; }
#image-apercu { display: block; max-width: 100%; max-height: 220px; margin: 0 auto var(--e3); border-radius: var(--r1); border: 1px solid var(--bord); }

/* jetons de recherche et formulaire cumulatif */
.requete.cumulative { display: block; margin: 0 0 var(--e4); }
.jetons { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; border: 1px solid var(--bord-fort); border-radius: var(--r1); background: var(--surface); padding: var(--e1) var(--e2); cursor: text; }
.jetons:focus-within { border-color: var(--accent); }
.jeton { display: inline-flex; align-items: center; gap: var(--e1); font: 500 var(--t0) var(--ui); color: var(--encre); background: var(--champ); border-radius: 999px; padding: 2px var(--e2) 2px var(--e3); }
.jeton .oter { background: none; border: none; cursor: pointer; color: var(--encre-3); font-size: 15px; padding: 0 2px; }
.jeton .oter:hover { color: var(--alerte); }
.jetons .saisie { flex: 1; min-width: 140px; border: none; background: none; padding: var(--e1) 0; font: var(--t1) var(--ui); color: var(--encre); }
.jetons .saisie:focus { outline: none; }
.requete .options { display: flex; gap: var(--e3) var(--e4); align-items: center; flex-wrap: wrap; margin-top: var(--e3); font-size: var(--t-1); color: var(--encre-2); }
.requete .portee, .requete .tri { display: inline-flex; gap: var(--e2); }
.requete .portee label, .requete .tri label { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-1); cursor: pointer; }
.requete .prox { display: inline-flex; align-items: center; gap: var(--e1); }
.requete .prox select { padding: var(--e1) var(--e2); font-size: var(--t-1); }
.requete .prox input.court { width: 64px; padding: var(--e1) var(--e2); }
.requete .options .bouton { margin-left: auto; padding: var(--e1) var(--e3); }

/* resultats de recherche */
.n-res { font-size: var(--t-1); color: var(--encre-3); margin: 0 0 var(--e4); }
.n-res b { color: var(--encre); }
.suggestions a { margin-right: var(--e2); }
.gr-dossier { margin-bottom: var(--e5); }
.gr-tete { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e2); flex-wrap: wrap; }
.gr-tete .cote { font-size: var(--t-1); color: var(--accent); }
.gr-tete .nom { font-weight: 600; font-size: var(--t0); }
.passage { border-left: 2px solid var(--bord-fort); padding: var(--e1) 0 var(--e1) var(--e3); margin: 0 0 var(--e3); max-width: 76ch; }
.passage .extrait { font-family: var(--lect); font-size: var(--t0); line-height: 1.6; color: var(--encre-2); }
.passage .extrait .lab { margin-right: var(--e1); }
.passage .ou { font-size: var(--t-1); color: var(--encre-3); margin-top: var(--e1); display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; }
.passage.vide { min-height: 64px; }
.passage.vide .extraits { height: 40px; border-radius: var(--r1); background: linear-gradient(90deg, var(--champ), var(--surface), var(--champ)); background-size: 200% 100%; }
@keyframes attente { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.groupement { margin: calc(-1 * var(--e2)) 0 var(--e4); }
.groupement a.on { color: var(--encre); font-weight: 600; }

/* ================================================================= bandeau */
.barre {
  position: sticky; top: 0; z-index: 30; height: var(--bandeau-h);
  display: flex; align-items: center; gap: var(--e4); padding: 0 var(--e5);
  background: var(--bandeau); color: var(--c-encre); border-bottom: 1px solid #23262b;
}
.marque { display: inline-flex; align-items: center; gap: var(--e2); color: var(--c-encre); font-family: var(--titre); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: -.01em; }
.marque img { height: 17px; width: auto; display: block; }
.marque:hover { color: #fff; text-decoration: none; }
.marque.grande { display: flex; justify-content: center; margin-bottom: var(--e4); color: var(--encre); }
.marque.grande img { height: 120px; }
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.barre .menu summary { color: var(--c-encre-2); font-size: var(--t0); }
.barre .menu summary:hover, .barre .menu[open] summary { background: var(--c-champ); color: #fff; }
.barre .menu.compte summary { padding: 2px; }
.avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--or); color: #121316; display: grid; place-items: center; font: 600 12px var(--mono); }
.loupe {
  display: inline-flex; align-items: center; gap: var(--e2); height: 30px; padding: 0 var(--e3);
  border: 1px solid var(--c-bord-2); border-radius: 999px; background: var(--c-champ); color: var(--c-encre-2); font: var(--t0) var(--ui); cursor: pointer;
}
.loupe:hover, .loupe[aria-expanded="true"] { border-color: var(--or); color: var(--c-encre); }
.loupe-icone { font-size: 16px; line-height: 1; }
.loupe-texte { font-weight: 600; }

/* fil d'Ariane a menus */
.fil { font-size: var(--t0); color: var(--encre-3); }
.fil .sep { margin: 0 var(--e2); }
.fil-menus { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; margin: 0; }
.fil-menus .niveau { position: relative; display: inline-block; }
.fil-menus summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--e1); border-radius: var(--r1); padding: 2px var(--e1); }
.fil-menus summary::-webkit-details-marker { display: none; }
.fil-menus summary::after { content: '▾'; font-size: 10px; color: var(--encre-3); }
.fil-menus summary a { color: var(--encre-2); }
.fil-menus .courant { color: var(--encre); font-weight: 600; }
.fil-menus ul {
  position: absolute; left: 0; top: 100%; z-index: 35; margin: var(--e1) 0 0; padding: var(--e2) 0; list-style: none;
  min-width: 260px; max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); box-shadow: var(--o2); color: var(--encre);
}
.fil-menus li a { display: flex; gap: var(--e2); justify-content: space-between; padding: var(--e2) var(--e4); color: var(--encre-2); white-space: nowrap; font-size: var(--t0); }
.fil-menus li a:hover { background: var(--champ); color: var(--encre); text-decoration: none; }
.barre .fil-menus summary a, .barre .fil-menus .sep { color: var(--c-encre-2); }
.barre .fil-menus summary::after { color: var(--c-encre-3); }
.barre .fil-menus summary:hover { background: var(--c-champ); }
.barre .fil-menus .courant { color: var(--or); }

/* =================================================================== volet */
.volet {
  position: fixed; top: var(--bandeau-h); right: 0; bottom: 0; width: min(var(--volet-l), 100%); z-index: 25;
  background: var(--c-fond); color: var(--c-encre-2); border-left: 1px solid var(--c-bord); overflow: auto; padding: var(--e3) var(--e4) var(--e7);
}
body.avec-volet .lecteur-continu, body.avec-volet .planche-page, body.avec-volet .accueil, body.avec-volet .page:not(.large) { padding-right: min(var(--volet-l), 100%); }
.volet .onglets { display: flex; align-items: center; margin: 0 0 var(--e3); border-bottom: 1px solid var(--c-bord); }
.volet .onglets button[role=tab] { background: none; border: none; padding: var(--e2) var(--e3); cursor: pointer; font: 600 var(--t-1) var(--ui); color: var(--c-encre-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.volet .onglets button[role=tab].on { color: var(--c-encre); border-bottom-color: var(--or); }
.volet .onglets .fermer { margin-left: auto; font-size: 18px; color: var(--c-encre-3); }
.volet .jetons { background: var(--c-surface); border-color: var(--c-bord-2); }
.volet .jetons:focus-within { border-color: var(--or); }
.volet .jeton { background: var(--c-champ); color: var(--c-encre); }
.volet .jetons .saisie { color: var(--c-encre); font-size: var(--t0); min-width: 100px; }
.volet .jetons .saisie::placeholder { color: var(--c-encre-3); }
.volet .requete .options { color: var(--c-encre-2); }
.volet .requete .prox select, .volet .requete .prox input { background: var(--c-surface); color: var(--c-encre); border-color: var(--c-bord-2); }
.volet .requete .options .bouton { background: var(--or); border-color: var(--or); color: #121316; }
.volet .n-res { color: var(--c-encre-3); }
.volet .n-res b { color: var(--c-encre); }
.volet .gr-tete .nom { color: var(--c-encre); }
.volet .gr-tete .cote { color: var(--or); }
.volet .gr-tete .petit, .volet .petit { color: var(--c-encre-3); }
.volet .passage { border-left-color: var(--c-bord-2); padding-left: var(--e2); }
.volet .passage .extrait { color: var(--c-encre-2); font-size: var(--t0); }
.volet .passage.vide .extraits { background: linear-gradient(90deg, var(--c-champ), var(--c-surface), var(--c-champ)); background-size: 200% 100%; }
.volet mark { background: #4a3f1c; color: #fff; }
.volet .lab { color: var(--c-encre-3); }
.volet a { color: var(--or); }
.volet .date.relevee { color: var(--c-encre-2); }
.volet .suggestions a { color: var(--or); }
.volet .figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--e2); }
.volet .figure { display: block; background: var(--c-surface); border-radius: var(--r1); overflow: hidden; text-align: center; }
.volet .figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.volet .index-noms { list-style: none; margin: 0; padding: 0; }
.volet .index-noms li { border-bottom: 1px solid var(--c-bord); padding: var(--e1) 0; }
.volet .index-noms summary { cursor: pointer; font-size: var(--t0); color: var(--c-encre); }
.volet .index-noms .nom-propre { background: var(--c-champ); color: var(--c-encre); }
.volet .pages-nom { padding: var(--e2) 0 var(--e1) var(--e4); font-size: var(--t-1); display: flex; gap: var(--e2); flex-wrap: wrap; }

/* ================================================================ connexion */
.connexion { display: grid; place-items: center; min-height: 100dvh; padding: var(--e5); }
.carte-connexion { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e6); width: min(420px, 100%); box-shadow: var(--o2); }
.carte-connexion h2 { margin-bottom: var(--e2); }
.carte-connexion .sous { color: var(--encre-3); font-size: var(--t0); margin: 0 0 var(--e5); }
.carte-connexion label { display: block; margin-bottom: var(--e4); }
.carte-connexion input { margin-top: var(--e1); }
.carte-connexion .bouton { width: 100%; justify-content: center; margin-top: var(--e2); }
.sous-carte { margin: var(--e4) 0 0; font-size: var(--t0); text-align: center; }

/* ================================================================ mes fonds */
.reprendre { display: flex; gap: var(--e4); align-items: baseline; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--or); border-radius: var(--r2); padding: var(--e3) var(--e5); margin: 0 0 var(--e5); color: var(--encre); box-shadow: var(--o1); }
.reprendre:hover { text-decoration: none; background: var(--champ); }
.reprendre b { font-family: var(--titre); font-size: var(--t2); }
.reprendre .continuer { margin-left: auto; color: var(--accent); font-weight: 600; }
.mosaique { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e5); }
.tuile { position: relative; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); box-shadow: var(--o1); display: flex; flex-direction: column; }
.tuile:hover { border-color: var(--bord-fort); box-shadow: var(--o2); }
.tuile-photo { display: block; aspect-ratio: 16 / 9; background: var(--champ); overflow: hidden; border-radius: var(--r2) var(--r2) 0 0; }
.tuile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuile-vide { display: grid; place-items: center; height: 100%; color: var(--encre-3); font-size: var(--t0); }
.tuile-corps { padding: var(--e4) var(--e4) var(--e4); display: flex; flex-direction: column; gap: var(--e1); }
.tuile-titre { display: flex; align-items: center; gap: var(--e2); }
.tuile-titre a { color: var(--encre); flex: 1; min-width: 0; }
.tuile-titre a:hover { text-decoration: none; color: var(--accent); }
.tuile-corps b { font-family: var(--titre); font-size: var(--t2); font-weight: 600; }
.tuile-lieu { font-size: var(--t0); color: var(--encre-2); }
.tuile-chiffres { font-size: var(--t-1); color: var(--encre-3); }
.tuile-menu summary { opacity: .4; }
.tuile:hover .tuile-menu summary, .tuile-menu[open] summary { opacity: 1; }
.tuile-menu ul { right: 0; }

/* =============================================================== inventaire */
.planche-page { max-width: none; margin: 0; padding: 0 var(--e5) 80px 0; }
.planche-cadre { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0 var(--e5); align-items: start; }
.sommaire {
  position: sticky; top: var(--bandeau-h); height: calc(100dvh - var(--bandeau-h)); overflow: auto;
  background: var(--c-fond); color: var(--c-encre-2); padding: var(--e2) 0 var(--e5); font-size: var(--t0);
}
.sommaire .onglets { display: flex; margin: 0 var(--e3) var(--e2); border-bottom: 1px solid var(--c-bord); }
.sommaire .onglets a { flex: 1; text-align: center; padding: var(--e2) 0; font-weight: 600; font-size: var(--t-1); color: var(--c-encre-3); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sommaire .onglets a.on { color: var(--c-encre); border-bottom-color: var(--or); }
.sommaire .onglets a:hover { text-decoration: none; color: var(--c-encre); }
.sommaire .entree { display: flex; gap: var(--e2); align-items: center; padding: var(--e1) var(--e4); color: var(--c-encre-2); white-space: nowrap; overflow: hidden; }
.sommaire .entree .n { margin-left: auto; font-size: 11px; color: var(--c-encre-3); }
.sommaire .entree:hover { background: var(--c-champ); text-decoration: none; color: var(--c-encre); }
.sommaire .entree.actif { color: #fff; font-weight: 600; background: var(--c-champ); box-shadow: inset 3px 0 0 var(--or); }
.sommaire .petit { color: var(--c-encre-3); }
.planche-corps { min-width: 0; }
.planche-tete { position: sticky; top: var(--bandeau-h); z-index: 12; display: flex; align-items: center; gap: var(--e4); padding: var(--e4) 0 var(--e3); margin: 0 0 var(--e3); background: var(--fond); border-bottom: 1px solid var(--bord); }
.planche-tete .lab { margin-right: var(--e1); }
.planche-tete .taille { margin-left: auto; display: inline-flex; align-items: center; gap: var(--e2); font-size: var(--t-1); color: var(--encre-3); }
.planche-tete .taille input { width: 130px; }
.barre-selection {
  position: sticky; top: calc(var(--bandeau-h) + 48px); z-index: 13; display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap;
  background: var(--c-fond); color: var(--c-encre-2); border-radius: var(--r2); padding: var(--e2) var(--e4); margin: 0 0 var(--e4); font-size: var(--t0); box-shadow: var(--o2);
}
.barre-selection b { color: #fff; }
.barre-selection .lien { color: var(--or); font-size: var(--t0); }
.bande { border-top: 3px solid var(--accent); padding: var(--e3) 0 var(--e5); scroll-margin-top: calc(var(--bandeau-h) + 56px); }
.bande-tete { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e3); }
.bande-nom { font-family: var(--titre); font-weight: 600; font-size: var(--t2); color: var(--accent); }
.bande-tete .compte { font-size: var(--t-1); color: var(--encre-3); }
.bande-tete a { margin-left: auto; }
:root { --vig: 112px; }
.planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--vig), 1fr)); gap: var(--e2); }
.vig { position: relative; display: block; border-radius: 3px; overflow: hidden; background: var(--champ); box-shadow: 0 1px 3px rgba(0,0,0,.22); aspect-ratio: 3 / 4; }
.vig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vig .pastille { position: absolute; top: 6px; right: 6px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.vig .folio { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 7px 4px; font: 500 10px var(--mono); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); }
.vig.choisie { outline: 3px solid var(--or); outline-offset: 2px; }
.vig.repond::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--attente); pointer-events: none; }
.seance { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e2); font: 500 11px var(--mono); color: var(--encre-3); letter-spacing: .06em; margin: var(--e1) 0 calc(-1 * var(--e1)); }
.seance::after { content: ''; flex: 1; border-top: 1px dashed var(--bord-fort); }

/* ================================================================== lecture */
.lecteur { display: flex; flex-direction: column; height: calc(100dvh - var(--bandeau-h)); }
.lecteur-barre { display: flex; align-items: center; gap: var(--e4); padding: var(--e2) var(--e5); border-bottom: 1px solid var(--bord); background: var(--surface); flex-wrap: wrap; min-height: 42px; }
.lecteur-barre .folio { font-size: var(--t-1); color: var(--encre-2); font-weight: 600; }
.lecteur-droite { margin-left: auto; display: flex; gap: var(--e3); align-items: center; }
.bascule-globale { display: inline-flex; border: 1px solid var(--bord-fort); border-radius: var(--r1); overflow: hidden; }
.bascule-globale button { background: none; border: none; padding: var(--e1) var(--e3); cursor: pointer; font: 600 var(--t-1) var(--ui); color: var(--encre-3); }
.bascule-globale button.on { background: var(--accent); color: #fff; }
.lecteur-continu { display: grid; grid-template-columns: 1fr; flex: 1; min-height: 0; }
.feuillets { overflow: auto; min-height: 0; scroll-padding-top: var(--e2); background: var(--fond); }
.sentinelle { height: 1px; }
.feuillet { background: var(--surface); border-bottom: 1px solid var(--bord); margin-bottom: var(--e3); }
.repere { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e2) var(--e5); background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 5; font-size: var(--t-1); color: var(--encre-3); }
.repere .folio { font-weight: 600; color: var(--accent); font-size: var(--t0); }
.repere .page-menu { margin-left: auto; }
.feuillet-corps { display: grid; grid-template-columns: minmax(280px, 2fr) 3fr; min-height: 60vh; }
.volet-image { background: var(--champ); border-right: 1px solid var(--bord); position: relative; display: grid; place-items: center; min-height: 60vh; max-height: 88vh; overflow: hidden; }
.volet-image img { max-width: 100%; max-height: 88vh; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center center; }
.volet-image:fullscreen { cursor: grab; background: #000; }
.volet-image:fullscreen img { max-height: 100vh; }
.volet-texte { padding: var(--e5) var(--e6) var(--e6); overflow: auto; min-width: 0; }
.lire { font-family: var(--lect); font-size: var(--t1); line-height: 1.7; max-width: 64ch; color: var(--encre); }
@media (min-width: 1600px) { .lire { font-size: 17px; } }
.lire p { margin: 0 0 1em; }
.lire h3 { font-family: var(--lect); font-size: 18px; font-weight: 600; margin: 1.4em 0 .5em; }
.lecteur .lire.francais { display: none; }
.lecteur.langue-francais .lire.original { display: none; }
.lecteur.langue-francais .lire.francais { display: block; }
.lire.sans-traduction::before { content: 'pas de traduction — original'; display: block; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); margin-bottom: var(--e2); }
.figure-en-ligne { display: block; max-width: 100%; max-height: 360px; margin: var(--e3) 0; border: 1px solid var(--bord); border-radius: var(--r1); }
.panneau-manuscrit { background: var(--champ); border: 1px solid var(--bord); border-radius: var(--r2); padding: var(--e5); max-width: 56ch; }
.panneau-manuscrit h2 { font-family: var(--lect); font-style: italic; margin-bottom: var(--e2); }
.panneau-manuscrit p { color: var(--encre-2); font-size: var(--t0); line-height: 1.6; }
.alerte-panneau { border-color: var(--alerte); }
.noms-page { display: flex; gap: var(--e2); align-items: baseline; flex-wrap: wrap; margin: var(--e5) 0 0; max-width: 68ch; }
.ajout-nom { display: inline-flex; gap: var(--e1); align-items: center; }
.ajout-nom input { width: 160px; padding: var(--e1) var(--e2); font-size: var(--t-1); }
.ajout-nom select { padding: var(--e1) var(--e2); font-size: var(--t-1); }
.fiche { margin: var(--e5) 0 0; padding: var(--e3) var(--e4); background: var(--champ); border-radius: var(--r2); max-width: 68ch; }
.fiche summary { cursor: pointer; font-size: var(--t0); font-weight: 600; color: var(--encre-2); }
.fiche dl { display: grid; grid-template-columns: 110px 1fr; gap: var(--e2) var(--e3); margin: var(--e3) 0 0; }
.fiche dd { margin: 0; font-size: var(--t0); color: var(--encre-2); }
.separateur-cote { display: flex; align-items: baseline; gap: var(--e3); padding: var(--e4) var(--e5) var(--e3); background: var(--fond); border-top: 3px solid var(--accent); }
.feuillet + .separateur-cote { margin-top: var(--e6); padding-top: var(--e6); }
.separateur-cote b { font-family: var(--titre); font-size: var(--t2); color: var(--accent); }
.fin-cote { padding: var(--e7) var(--e5) 100px; text-align: center; }
.fin-cote .voisines { display: flex; gap: var(--e5); justify-content: center; flex-wrap: wrap; margin-top: var(--e3); font-size: var(--t0); }

/* ============================================= dossiers et metadonnees (Gerer) */
.deux-volets { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100dvh - var(--bandeau-h)); }
.volet-arbre { border-right: 1px solid var(--bord); background: var(--surface); padding: var(--e4) var(--e3) var(--e7); overflow: auto; }
.titre-volet { display: flex; align-items: center; justify-content: space-between; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); padding: 0 var(--e2) var(--e3); }
.volet-dossier { padding: var(--e5) var(--e6) var(--e7); min-width: 0; }
.vide-arbre { padding: 0 var(--e2); }
.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }
.arbre ul { padding-left: var(--e4); border-left: 1px solid var(--bord); margin-left: var(--e2); }
.noeud { display: flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e2); border-radius: var(--r1); font-size: var(--t0); }
.noeud a { color: var(--encre-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noeud:hover, .noeud.on { background: var(--champ); }
.noeud.on a { color: var(--encre); font-weight: 600; }
.noeud .compte { font: 500 11px var(--mono); color: var(--encre-3); }
.noeud .outils { display: none; gap: var(--e1); }
.noeud:hover .outils { display: flex; }
.noeud .outils .lien { color: var(--encre-3); }
.noeud .outils .lien:hover { color: var(--accent); }
.metadonnees { display: grid; grid-template-columns: 120px minmax(0, 640px); gap: var(--e2) var(--e4); align-items: center; margin: var(--e4) 0 var(--e5); }
.metadonnees .valeur { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.metadonnees input.herite, .metadonnees input::placeholder { color: var(--encre-3); font-style: italic; }
.origine { font-size: 11px; color: var(--encre-3); border: 1px dashed var(--bord-fort); border-radius: 999px; padding: 2px var(--e2); white-space: nowrap; }
.actions { display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap; margin: var(--e5) 0; padding: var(--e3) var(--e4); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r2); }
.etats { display: flex; gap: var(--e4); margin-left: auto; font-size: var(--t-1); color: var(--encre-2); flex-wrap: wrap; }
.etats span { display: flex; gap: var(--e1); align-items: center; }
.etats .cout { color: var(--encre-3); }

/* =================================================================== import */
.ligne-destination { display: flex; gap: var(--e3); align-items: center; margin: 0 0 var(--e4); flex-wrap: wrap; }
.ligne-destination label { display: flex; gap: var(--e2); align-items: center; }
.ligne-destination select { min-width: 260px; }
.ligne-destination input { width: auto; }
.ligne-destination .ou { color: var(--encre-3); font-size: var(--t-1); }
.total { display: flex; gap: var(--e5); align-items: center; margin: var(--e4) 0; font-size: var(--t0); color: var(--encre-2); flex-wrap: wrap; }
.total b { font: 600 var(--t2) var(--ui); color: var(--encre); }
.barre-prog { width: 110px; height: 5px; background: var(--champ); border-radius: 999px; overflow: hidden; display: inline-block; }
.barre-prog i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .15s ease; }

/* ================================================================= deplacer */
.choix-cote input[type=search] { margin-bottom: var(--e3); }
.liste-cotes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bord); border-radius: var(--r2); background: var(--surface); max-height: 60vh; overflow: auto; }
.liste-cotes li { border-bottom: 1px solid var(--bord); }
.liste-cotes li:last-child { border-bottom: none; }
.liste-cotes button { width: 100%; text-align: left; background: none; border: none; padding: var(--e2) var(--e4); font: var(--t0) var(--ui); color: var(--encre); cursor: pointer; display: flex; gap: var(--e3); align-items: baseline; }
.liste-cotes button:hover { background: var(--champ); }
.liste-cotes button .petit:first-child { min-width: 150px; }
.actions-releve { display: flex; gap: var(--e5); align-items: center; margin-top: var(--e4); flex-wrap: wrap; }

/* ============================================================ mouvement, etroit */
@media (prefers-reduced-motion: no-preference) {
  .vig { transition: transform .15s ease, box-shadow .15s ease; }
  .vig:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
  .passage.vide .extraits { animation: attente 1.6s linear infinite; }
  .tuile { transition: box-shadow .15s ease, border-color .15s ease; }
}
@media (max-width: 900px) {
  .page { padding: var(--e4) var(--e4) 60px; }
  .barre { padding: 0 var(--e4); gap: var(--e2); }
  .loupe-texte { display: none; }
  .planche-page { padding: 0 var(--e4) 60px; }
  .planche-cadre { grid-template-columns: 1fr; }
  .sommaire { position: static; height: auto; max-height: 40vh; margin-bottom: var(--e3); }
  .feuillet-corps { grid-template-columns: 1fr; }
  .volet-image { min-height: 40vh; max-height: 60vh; }
  .lecteur { height: auto; }
  .deux-volets { grid-template-columns: 1fr; }
  .volet-arbre { border-right: none; border-bottom: 1px solid var(--bord); }
  .metadonnees { grid-template-columns: 1fr; gap: var(--e1) 0; }
  .mosaique { grid-template-columns: 1fr; }
  body.avec-volet .lecteur-continu, body.avec-volet .planche-page, body.avec-volet .accueil, body.avec-volet .page:not(.large) { padding-right: 0; }
}

/* corbeille : une tuile parmi les fonds, un ecran comme un inventaire */
.tuile-corbeille { border-style: dashed; }
.tuile-corbeille .tuile-photo { display: grid; place-items: center; background: var(--champ); font-size: 34px; }
.tuile-corbeille b { color: var(--encre-2); }
.corbeille .bande { border-top-color: var(--bord-fort); }
.corbeille .bande-nom { color: var(--encre-2); }
.corbeille .vig { opacity: .78; }
.corbeille .vig:hover, .corbeille .vig.choisie { opacity: 1; }
.corbeille .planche-tete .bouton { margin-left: var(--e3); }
.planche-tete .bouton { padding: var(--e1) var(--e3); }

/* sens de lecture verifie au poste */
.sens-avis { font: 500 11px var(--mono); color: var(--encre-3); }
.sens-avis.en-cours { color: var(--accent); }
.sens-avis.ok { color: var(--ok); }
.sens-avis.alerte { color: var(--alerte); }
.sens-bouton { margin-left: auto; color: var(--encre-3); }
.sens-bouton:hover { color: var(--accent); }
.repere .sens-avis { margin-left: var(--e2); }
.repere .page-menu { margin-left: var(--e2); }

/* boite de debogage du sens de lecture */
.boite-sens { width: min(560px, 94vw); max-height: 84vh; overflow: auto; }
.boite-sens-tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e3); }
.boite-sens-tete .lien { font-size: 20px; color: var(--encre-3); }
.sens-etapes { display: flex; flex-direction: column; gap: var(--e2); }
.sens-etape { border-left: 3px solid var(--bord-fort); padding: var(--e2) 0 var(--e2) var(--e3); }
.sens-etape.ok { border-left-color: var(--ok); }
.sens-etape.attention { border-left-color: var(--attente); }
.sens-etape b { display: block; font-size: var(--t0); }
.sens-etape span { display: block; font: 500 var(--t-1) var(--mono); color: var(--encre-3); margin-top: 2px; }
.sens-vignette { display: block; width: 224px; max-width: 100%; margin-top: var(--e2); border: 1px solid var(--bord); border-radius: var(--r1); image-rendering: crisp-edges; }
.sens-verdict { font: 600 17px var(--ui); padding: var(--e3) var(--e4); border-radius: var(--r1); margin-bottom: var(--e3); background: var(--ok-f); color: var(--ok); }
.sens-verdict[data-etat="attention"] { background: var(--attente-f); color: var(--attente); }
.sens-poses { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); margin-top: var(--e2); }
.sens-pose { margin: 0; text-align: center; }
.sens-pose img, .sens-pose-vide { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--bord); border-radius: var(--r1); background: var(--champ); display: block; }
.sens-pose.retenue img { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.sens-pose figcaption { font: 500 11px var(--mono); color: var(--encre-3); margin-top: 2px; }
.sens-pose.retenue figcaption { color: var(--ok); }
.etat-chip.sens { color: var(--accent); }

/* =========================================================== import : l'ecran
   Trois tons : le bandeau presque noir, le panneau de gauche un cran au-dessus
   sur toute la hauteur, la creme pour le contenu. Aucun apercu d'image avant
   l'envoi : lire mille photos couterait plus cher que de les envoyer. */
:root { --panneau: #16181c; --panneau-2: #20242b; --panneau-bord: #2e323a; --bleu-clair: #7aa6d8; }
/* En sombre, le contenu tombe a #15171b : le panneau descend d'un cran pour
   qu'il reste trois tons distincts et non deux. */
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --panneau: #0f1013; --panneau-2: #1b1f25; } }
:root[data-theme=dark] { --panneau: #0f1013; --panneau-2: #1b1f25; }

.import-page {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  min-height: calc(100dvh - var(--bandeau-h)); align-items: stretch;
}
.import-page.lance { grid-template-columns: minmax(0, 1fr); }
.import-page.lance .import-flanc { display: none; }

.import-flanc {
  background: var(--panneau); color: var(--c-encre); padding: var(--e5) var(--e4);
  display: flex; flex-direction: column; gap: var(--e4); border-right: 1px solid var(--panneau-bord);
}
.import-flanc h2 {
  font: 600 var(--t-1)/1 var(--ui); text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-encre-3); margin: 0;
}
.import-flanc .champ { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-1); color: var(--c-encre-2); }
.import-flanc select {
  width: 100%; font: 400 var(--t0)/1.3 var(--ui); color: var(--c-encre); background: var(--panneau-2);
  border: 1px solid var(--panneau-bord); border-radius: var(--r1); padding: 9px 10px;
}
.import-flanc select option { background: var(--panneau-2); color: var(--c-encre); }
/* Le choix courant en toutes lettres : un <select> etroit tronque, pas ceci. */
.choix-dit {
  font: 500 var(--t-1)/1.45 var(--mono); color: var(--bleu-clair); background: rgba(122, 166, 216, .1);
  border: 1px solid var(--panneau-bord); border-radius: var(--r1); padding: 8px 10px;
  word-break: break-word; margin: 0;
}
.import-flanc .aide { margin: 0; font-size: 11px; color: var(--c-encre-3); line-height: 1.5; }
.creer-cote { display: flex; gap: 6px; }
.creer-cote input {
  flex: 1; min-width: 0; font: 400 var(--t-1) var(--ui); color: var(--c-encre);
  background: var(--panneau-2); border: 1px solid var(--panneau-bord); border-radius: var(--r1); padding: 8px 9px;
}
.import-flanc .bouton.creux { color: var(--c-encre); border-color: var(--panneau-bord); background: none; }
.import-flanc .bouton.creux:hover { border-color: var(--c-encre-3); }
.import-flanc .bas { margin-top: auto; }
.import-flanc .coche { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--c-encre-3); }
.import-flanc .coche input { accent-color: var(--or); margin-top: 2px; }

.import-corps { min-width: 0; padding: var(--e5); background: var(--fond); }
.import-corps h1 { font: 600 var(--t2)/1.2 var(--titre); margin: 0 0 var(--e2); }
.import-corps .reprise { margin-top: var(--e5); }
.import-corps .intro { color: var(--encre-2); font-size: var(--t-1); margin: 0 0 var(--e4); max-width: 64ch; }
.import-page.lance #avant, .import-page.lance #planche-lot { display: none; }

.zone-depot { padding: var(--e7) var(--e5); }
.zone-depot .icone { font-size: 30px; line-height: 1; color: var(--encre-3); display: block; margin-bottom: var(--e3); }
.zone-depot .ou { color: var(--encre-3); font-size: var(--t-1); }
.formats { margin: var(--e4) 0 0; font-size: 11px; color: var(--encre-3); display: flex; gap: var(--e3); justify-content: center; flex-wrap: wrap; }
.formats span { border: 1px solid var(--bord); border-radius: 999px; padding: 3px 9px; font-family: var(--mono); }
.rassure { margin: var(--e4) 0 0; font-size: var(--t-1); color: var(--encre-3); text-align: center; }

/* ------------------------------------------- le lot lu, sans aucune image */
.somme { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; padding: 0 0 var(--e4);
  border-bottom: 1px solid var(--bord); margin-bottom: var(--e4); }
.somme .gros { font: 600 var(--t3)/1 var(--mono); font-variant-numeric: tabular-nums; }
.somme .gros small { font: 400 var(--t-1) var(--ui); color: var(--encre-3); margin-left: 7px; }
.compte { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-1); color: var(--encre-2); }
.pastille { width: 10px; height: 10px; border-radius: 2px; display: block; flex: none; background: var(--accent); }
.pastille.deja { background: var(--bord-fort); }
.compte b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--encre); }
.somme .poids { margin-left: auto; font: 500 var(--t-1) var(--mono); color: var(--encre-3); }

.feuilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 7px; align-content: start; }
.feuilles.serree { grid-template-columns: repeat(auto-fill, minmax(11px, 1fr)); gap: 3px; }
.feuille { display: block; width: 100%; aspect-ratio: 3/4; --papier: var(--surface); --trait: var(--accent); --opa: .55; }
.feuille.deja { --papier: var(--champ); --trait: var(--bord-fort); --opa: .3; }
.feuille .coche { fill: var(--ok); }
.feuilles.serree .feuille { aspect-ratio: 1; border-radius: 2px; background: var(--accent); }
.feuilles.serree .feuille.deja { background: var(--bord-fort); }
.legende { display: flex; gap: var(--e5); flex-wrap: wrap; margin-top: var(--e4); padding-top: var(--e3); font-size: var(--t-1); color: var(--encre-3); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende svg { width: 16px; height: 21px; }
.legende i { width: 11px; height: 11px; border-radius: 2px; display: block; }
/* Deux boutons de meme largeur, au centre : rien d'autre a decider ici. */
.pied-planche { display: flex; justify-content: center; gap: var(--e3); margin-top: var(--e5);
  padding-top: var(--e5); border-top: 1px solid var(--bord); flex-wrap: wrap; }
.pied-planche .bouton { flex: 0 1 260px; justify-content: center; text-align: center; padding: 11px 16px; }
.bouton.second { background: none; border-color: var(--bord-fort); color: var(--encre-3); font-weight: 400; }
.bouton.second:hover { border-color: var(--encre-3); color: var(--encre-2); }
.detail { border: 1px solid var(--bord); border-radius: var(--r2); margin-top: var(--e5); max-height: 320px; overflow: auto; background: var(--surface); }
.detail .tableau { border: none; border-radius: 0; }
.etat-chip.envoi { color: var(--accent); }

/* ------------------------------------------------- le tableau de bord, en bleu */
.bord-depot {
  background: var(--panneau); color: var(--c-encre);
  border: 0; border-bottom: 1px solid var(--panneau-bord); border-radius: 0; box-shadow: none;
  /* plein cadre : il touche le bandeau et les deux bords */
  margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e5);
  padding: var(--e5) var(--e5) var(--e6);
}
.bord-tete { display: flex; align-items: baseline; gap: var(--e3); margin-bottom: var(--e4); flex-wrap: wrap; }
.bord-tete h2 { font: 600 var(--t2)/1.1 var(--titre); margin: 0; }
.bord-tete .sous { font-size: var(--t-1); color: var(--c-encre-3); }
.bord-tete .ou-va { font: 500 var(--t-1) var(--mono); color: var(--p-orient); }
.bord-tete .etat-lot {
  margin-left: auto; font: 500 var(--t-1)/1 var(--mono); color: var(--c-encre-2);
  border: 1px solid var(--panneau-bord); border-radius: 999px; padding: 5px 11px;
  background: rgba(0, 0, 0, .2);
}
.jauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e3); --carre: 12px; --ecart: 2px; }
.j {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--panneau-bord);
  border-radius: var(--r2); padding: var(--e4);
  display: flex; flex-direction: column; gap: var(--e3); min-width: 0;
}
.j.dort { opacity: .45; }
.j-tete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; min-height: 18px; }
.j-nom {
  display: flex; align-items: center; gap: 7px; font: 600 var(--t-1)/1 var(--ui);
  letter-spacing: .04em; color: var(--c-encre-2); text-transform: uppercase;
}
.j-nom::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--teinte); flex: none; }
.j-quoi { font-size: 11px; color: var(--c-encre-3); }
.j .part { font: 500 11px var(--mono); color: #221a06; background: var(--p-orient); border-radius: 999px; padding: 3px 7px; }
.j-chiffre { font: 600 30px var(--mono); color: var(--c-encre); font-variant-numeric: tabular-nums; }
.j-chiffre small { font-size: var(--t1); color: var(--c-encre-3); font-weight: 400; }
.carres {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--carre), 1fr));
  gap: var(--ecart); align-content: start;
}
.carres span { aspect-ratio: 1; border-radius: 1px; background: rgba(255, 255, 255, .085); }
.carres span.on { background: var(--teinte); }
.carres span.doute { background: transparent; box-shadow: inset 0 0 0 2px var(--or); }
.j-pied { font: 400 11px/1.4 var(--mono); color: var(--c-encre-3); display: flex; justify-content: space-between; gap: var(--e2); }
.j[data-teinte=envoi]  { --teinte: #79aae2; }
.j[data-teinte=ocr]    { --teinte: #63b691; }
.j[data-teinte=trad]   { --teinte: #d68b64; }
.j[data-teinte=orient] { --teinte: var(--p-orient); }

/* --------------------------------------------------------------- a trancher */
.flux-bloc {
  margin-top: var(--e4); background: var(--surface); border: 1px solid var(--bord);
  border-left: 3px solid var(--or); border-radius: var(--r2); box-shadow: var(--o1); overflow: hidden;
}
.flux-tete {
  display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--bord); flex-wrap: wrap;
}
.flux-tete h2 { font: 600 var(--t1)/1.1 var(--titre); margin: 0; }
.flux-tete .n { font: 600 var(--t-1)/1 var(--mono); background: var(--or); color: #221a06; border-radius: 999px; padding: 5px 10px; }
.flux-tete p { margin: 0; font-size: var(--t-1); color: var(--encre-3); }
.flux-tete .fin { margin-left: auto; display: flex; gap: var(--e3); align-items: center; }
.loupe-reglage { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-1); color: var(--encre-3); }
.loupe-reglage input { width: 110px; accent-color: var(--or); }
.loupe-reglage output { font: 500 var(--t-1) var(--mono); color: var(--encre); min-width: 3ch; }
.en-cours { padding: var(--e3) var(--e4) var(--e4); }
.ligne-page { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); }
.ligne-page b { font: 500 var(--t0) var(--mono); word-break: break-all; }
.ligne-page .motif { font-size: var(--t-1); color: var(--encre-3); }
.ligne-page .rang { font: 500 var(--t-1) var(--mono); color: var(--encre-3); border: 1px solid var(--bord); border-radius: 999px; padding: 4px 9px; }
.ligne-page .fin { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
.ligne-page .touche { font: 500 11px var(--mono); color: var(--encre-3); border: 1px solid var(--bord-fort); border-radius: var(--r1); padding: 4px 8px; }

/* Les quatre poses ne doivent jamais passer sous le bord de l'ecran : on borne
   la largeur de la planche par la hauteur qui reste, donc chaque carre tient.
   Le carre ne descend pas sous 150 px, en dessous on ne lit plus rien. */
.poses {
  --cote-max: max(150px, calc(100dvh - 560px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4);
  max-width: calc((var(--cote-max) + 20px) * 4 + var(--e4) * 3);
}
.pose {
  border: 1px solid var(--bord); border-radius: var(--r2); background: var(--surface); padding: 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 10px; font: inherit; color: inherit;
  transition: border-color .18s, box-shadow .18s;
}
.pose:hover { border-color: var(--or); box-shadow: 0 0 0 2px rgba(217, 164, 65, .22); }
.pose .cadre { position: relative; aspect-ratio: 1; background: var(--champ); border-radius: var(--r1); overflow: hidden; }
.pose .cadre.zoome { cursor: crosshair; }
.plaque { position: absolute; inset: 0; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; }
.pose .num, .pose .etiq {
  position: absolute; top: 8px; font: 600 11px var(--mono); background: var(--surface);
  border: 1px solid var(--bord); border-radius: 999px; padding: 5px 8px; color: var(--encre-3); z-index: 2;
}
.pose .num { left: 8px; }
.pose .etiq { right: 8px; }
.pose.tete .etiq { background: var(--or); border-color: var(--or); color: #221a06; }
.pose .mesure { height: 5px; border-radius: 999px; background: var(--champ); overflow: hidden; }
.pose .mesure i { display: block; height: 100%; background: var(--bord-fort); }
.pose.tete .mesure i { background: var(--or); }
.pose .bas { display: flex; align-items: baseline; gap: 8px; }
.pose .bas .pc { font: 600 var(--t2) var(--mono); font-variant-numeric: tabular-nums; }
.pose.tete .bas .pc { color: var(--or); }
.pose .bas .lab { font-size: var(--t-1); color: var(--encre-3); text-transform: none; letter-spacing: 0; }
.bouton.discret { background: none; border-color: transparent; color: var(--encre-3); }
.bouton.discret:hover { border-color: var(--bord-fort); color: var(--encre-2); }

.file-suite {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e3) var(--e4); border-top: 1px solid var(--bord); background: var(--champ);
}
.file-suite .lab { font-size: var(--t-1); color: var(--encre-3); }
.file-suite .vign {
  width: 56px; height: 56px; border-radius: var(--r1); border: 1px solid var(--bord);
  background: var(--surface); overflow: hidden; position: relative; cursor: pointer; padding: 0;
}
.file-suite .vign:hover { border-color: var(--or); }
.actions-import { display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0 0; }
.actions-import .repli { margin-left: auto; font-size: var(--t-1); }
.actions-import .repli a { cursor: pointer; }
.detail { border: 1px solid var(--bord); border-radius: var(--r2); margin-top: var(--e3); max-height: 320px; overflow: auto; }
.detail .tableau { border: none; border-radius: 0; }
.etat-chip.envoi { color: var(--accent); }
@media (max-width: 1200px) { .jauges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .import-page { grid-template-columns: 1fr; }
  .import-flanc { border-right: 0; border-bottom: 1px solid var(--panneau-bord); } }
@media (max-width: 760px) { .jauges { grid-template-columns: 1fr; } .poses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.essai-doublons { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-1); color: var(--attente); }

/* ============================================================== la cote lue
   Une ligne de la fiche que le chercheur peut corriger ; la provenance dit
   d'ou vient ce qui est ecrit, et une saisie ne se fait plus jamais ecraser. */
.cote-ligne { display: inline-flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cote-champ {
  font: 500 var(--t-1) var(--mono); color: var(--encre); background: var(--surface);
  border: 1px solid var(--bord); border-radius: var(--r1); padding: 5px 8px; min-width: 22ch;
}
.cote-origine { font-size: 11px; color: var(--encre-3); }
.cote-origine.saisie { color: var(--ok); }
.cote-origine.heritee { font-style: italic; }
.cote-poser { font-size: var(--t-1); }

/* Les deux relances Mistral, dans l'en-tete du feuillet : discretes, parce
   qu'elles coutent de l'argent et ne servent qu'a reparer. */
.repere .relance { font-size: var(--t-1); color: var(--encre-3); white-space: nowrap; }
.repere .relance:hover { color: var(--accent); }
.repere .relance:disabled { opacity: .5; cursor: default; }