/* wondarchive — feuille unique, ecrite a la main.
   Jetons et composants conformes a design.md : direction « Magasin » pour le
   chrome, « Regeste » pour la lecture, « Veilleuse » en theme sombre. */

/* ------------------------------------------------------------------ jetons */
:root {
  --fond:      #fbfaf8;
  --surface:   #ffffff;
  --champ:     #f0eee9;
  --bord:      #e7e4dd;
  --bord-fort: #cfcabf;
  --encre:     #1b1a18;
  --encre-2:   #55524b;
  --encre-3:   #99948a;
  --accent:    #234a72;
  --ok:        #266a4e;
  --attente-t: #8a6414;
  --attente-f: #f2ead4;
  --alerte:    #a03a28;
  --surligne:  #f5e9b8;

  --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;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond:      #16181c;
    --surface:   #1d2026;
    --champ:     #252932;
    --bord:      #2b2f38;
    --bord-fort: #3d434f;
    --encre:     #e9e6df;
    --encre-2:   #b3afa4;
    --encre-3:   #767a83;
    --accent:    #d9a441;
    --ok:        #5aa583;
    --attente-t: #d9a441;
    --attente-f: #3a3322;
    --alerte:    #c96b52;
    --surligne:  #4a3f1c;
  }
}

/* ------------------------------------------------------------------ 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; }

/* --------------------------------------------------------------- structure */
* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.6 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; }

.mono { font-family: var(--mono); }
.petit { font-size: 12.5px; color: var(--encre-3); }

.lab {
  font: 600 10.5px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--encre-3);
}

h1 { font-family: var(--titre); font-weight: 600; font-size: 27px; letter-spacing: -.01em; margin: 4px 0 10px; }
h2 { font-family: var(--titre); font-weight: 600; font-size: 20px; margin: 0 0 8px; }

.page { max-width: 1080px; margin: 0 auto; padding: 26px 24px 70px; }
.page.large { max-width: 1560px; }
.chapo { color: var(--encre-2); max-width: 72ch; margin: 0 0 22px; }

/* -------------------------------------------------------------- barre haute */
.barre {
  display: flex; align-items: center; gap: 22px;
  padding: 11px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 20;
}
.marque { font-family: var(--titre); font-weight: 600; font-size: 18px; color: var(--encre); letter-spacing: -.01em; }
.marque:hover { text-decoration: none; }
.marque.grande { font-size: 30px; display: block; margin-bottom: 4px; }
.nav { display: flex; gap: 18px; font-size: 13.5px; }
.nav a { color: var(--encre-3); }
.nav a.on { color: var(--accent); font-weight: 600; }
.barre-droite { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--encre-3); }
.enligne { display: inline; }

/* ---------------------------------------------------------------- controles */
.bouton {
  font: 600 13.5px var(--ui);
  border: 1px solid transparent; border-radius: 5px;
  padding: 9px 16px; cursor: pointer;
  background: var(--accent); color: var(--fond);
}
@media (prefers-color-scheme: dark) { .bouton { color: #16181c; } }
.bouton:hover { filter: brightness(1.08); }
.bouton:disabled { opacity: .5; cursor: default; }
.bouton.creux { background: transparent; color: var(--accent); border-color: var(--bord-fort); }
.bouton small { display: block; font-weight: 400; font-size: 11px; opacity: .8; margin-top: 1px; }

.lien {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--accent);
}
.lien:hover { text-decoration: underline; }

input[type=text], input[type=email], input[type=password], select {
  font: 14px var(--ui);
  color: var(--encre); background: var(--surface);
  border: 1px solid var(--bord-fort); border-radius: 4px;
  padding: 8px 10px; width: 100%;
}
select { cursor: pointer; }

.alerte {
  background: var(--attente-f); color: var(--alerte);
  border-radius: 4px; padding: 9px 13px; margin: 0 0 14px; font-size: 13.5px;
}

/* ---------------------------------------------------------------- connexion */
.connexion { display: grid; place-items: center; min-height: 100dvh; padding: 24px; }
.carte-connexion {
  background: var(--surface); border: 1px solid var(--bord);
  border-radius: 8px; padding: 34px 32px; width: min(420px, 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 40px rgba(0,0,0,.06);
}
.carte-connexion .sous { color: var(--encre-3); font-size: 13.5px; margin: 0 0 22px; }
.carte-connexion label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--encre-2); }
.carte-connexion input { margin-top: 5px; }
.carte-connexion .bouton { width: 100%; margin-top: 6px; }

/* ------------------------------------------------------------------- import */
.ligne-destination { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; flex-wrap: wrap; }
.ligne-destination label { font-size: 13px; color: var(--encre-2); display: flex; gap: 8px; align-items: center; }
.ligne-destination select { width: auto; min-width: 260px; }
.ligne-destination input { width: auto; }
.ligne-destination .ou { color: var(--encre-3); font-size: 12.5px; }

.zone-depot {
  border: 2px dashed var(--bord-fort); border-radius: 8px;
  padding: 30px 22px; text-align: center; color: var(--encre-2);
  background: var(--surface); margin-bottom: 14px;
}
.zone-depot b { display: block; font-size: 16px; color: var(--encre); margin-bottom: 4px; }
.zone-depot.survol { border-color: var(--accent); background: var(--champ); }
.lien-fichier { color: var(--accent); cursor: pointer; text-decoration: underline; }

.reprise {
  font-size: 13px; color: var(--ok);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 30%, var(--bord));
  border-radius: 6px; padding: 9px 14px; margin-bottom: 16px; font-weight: 500;
}

.total { display: flex; gap: 24px; align-items: center; margin: 16px 0; font-size: 13px; color: var(--encre-2); flex-wrap: wrap; }
.total b { font: 600 20px var(--ui); color: var(--encre); }

.tableau {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 6px; overflow: hidden;
}
.tableau th {
  text-align: left; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-3); padding: 9px 14px; border-bottom: 1px solid var(--bord);
}
.tableau td { padding: 7px 14px; border-bottom: 1px solid var(--bord); color: var(--encre-2); }
.tableau tr:last-child td { border-bottom: none; }
.tableau .fichier { font: 500 12.5px var(--mono); color: var(--encre); word-break: break-all; }
.colonne-etat { width: 240px; }

.etat-chip { display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 600; }
.etat-chip.attente { color: var(--attente-t); }
.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); }
.barre-prog { width: 110px; height: 5px; background: var(--champ); border-radius: 99px; overflow: hidden; display: inline-block; }
.barre-prog i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .15s ease; }

/* -------------------------------------------------------------- deux volets */
.deux-volets { display: grid; grid-template-columns: 300px 1fr; min-height: calc(100dvh - 49px); }
.volet-arbre {
  border-right: 1px solid var(--bord); background: var(--surface);
  padding: 16px 12px 40px; overflow: auto;
}
.titre-volet {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 10.5px var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--encre-3); padding: 0 10px 10px;
}
.volet-dossier { padding: 22px 30px 60px; min-width: 0; }
.vide { padding: 40px 0; }
.vide-arbre { padding: 0 10px; }

.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }
.arbre ul { padding-left: 15px; border-left: 1px solid var(--bord); margin-left: 9px; }
.noeud {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 9px; border-radius: 4px; font-size: 13.5px;
}
.noeud a { color: var(--encre-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noeud:hover { background: var(--champ); }
.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: 6px; }
.noeud:hover .outils { display: flex; }
.noeud .outils .lien { font-size: 12px; color: var(--encre-3); }
.noeud .outils .lien:hover { color: var(--accent); }

.fil { font-size: 12.5px; color: var(--encre-3); margin-bottom: 10px; }
.fil .sep { margin: 0 6px; }

/* --------------------------------------------------------------- metadonnees */
.metadonnees {
  display: grid; grid-template-columns: 110px minmax(0, 620px);
  gap: 9px 16px; align-items: center; margin: 16px 0 20px;
}
.metadonnees .valeur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.metadonnees input.herite { color: var(--encre-3); font-style: italic; }
.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: 99px; padding: 2px 9px; white-space: nowrap;
}
.chip-iso { font: 500 11.5px var(--mono); background: var(--champ); border-radius: 3px; padding: 3px 8px; color: var(--encre-2); }

.actions {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin: 20px 0 24px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: 7px;
}
.etats { display: flex; gap: 16px; margin-left: auto; font-size: 12.5px; color: var(--encre-2); flex-wrap: wrap; }
.etats span { display: flex; gap: 7px; align-items: center; }
.etats .cout { color: var(--encre-3); }
.sous-titre { margin: 0 0 12px; }

/* ---------------------------------------------------------------- vignettes */
.pastille { width: 8px; height: 8px; border-radius: 99px; display: inline-block; flex: none; background: var(--encre-3); }
.pastille.traduite   { background: var(--ok); }
.pastille.transcrite { background: var(--accent); }
.pastille.manuscrite { background: var(--attente-t); }
.pastille.echec      { background: var(--alerte); }
.pastille.deposee    { background: var(--bord-fort); }

.planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 13px; }
.vig {
  position: relative; display: block; border-radius: 3px; overflow: hidden;
  background: var(--champ); box-shadow: 0 1px 3px rgba(0,0,0,.2);
  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,.6));
}
@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); }
}

/* ------------------------------------------------------------------ galerie */
.filtres { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.filtres select { width: auto; min-width: 170px; }
.bande { border-top: 2px solid var(--encre); padding: 12px 0 26px; }
.bande-tete { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.bande-nom { font-family: var(--titre); font-weight: 600; font-size: 20px; }
.bande-tete .compte { font-size: 12px; color: var(--encre-3); }

/* ---------------------------------------------------------------- recherche */
.requete {
  display: flex; align-items: center; gap: 14px; max-width: 720px;
  border-bottom: 2px solid var(--encre); padding-bottom: 10px; margin: 6px 0 8px;
}
.requete input {
  border: none; background: none; padding: 0; flex: 1;
  font: 400 24px var(--lect); color: var(--encre);
}
.requete input:focus { outline: none; }
.n-res { font-size: 12.5px; color: var(--encre-3); margin-bottom: 24px; }
.gr-dossier { margin-bottom: 26px; }
.gr-tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.gr-tete .cote { font-size: 12px; color: var(--accent); }
.gr-tete .nom { font-weight: 600; font-size: 15px; }
.passage { border-left: 2px solid var(--bord-fort); padding: 3px 0 3px 18px; margin: 0 0 14px; max-width: 76ch; }
.passage .extrait { font-family: var(--lect); font-size: 15.5px; line-height: 1.6; color: var(--encre-2); }
.passage .ou { font-size: 12px; color: var(--encre-3); margin-top: 5px; }
mark { background: var(--surligne); color: var(--encre); padding: 0 2px; border-radius: 2px; }

/* ------------------------------------------------------------------ lecteur */
.lecteur { display: flex; flex-direction: column; height: calc(100dvh - 49px); }
.lecteur-barre {
  display: flex; align-items: center; gap: 18px; padding: 9px 22px;
  border-bottom: 1px solid var(--bord); background: var(--surface); flex-wrap: wrap;
}
.lecteur-barre .folio { font-size: 12.5px; color: var(--encre-3); }
.lecteur-droite { margin-left: auto; display: flex; gap: 16px; }
.lecteur-corps { display: grid; grid-template-columns: minmax(260px, 2fr) 3fr; gap: 0; flex: 1; min-height: 0; }

.volet-image {
  background: var(--champ); border-right: 1px solid var(--bord);
  overflow: hidden; position: relative; display: grid; place-items: center;
  cursor: grab; touch-action: none;
}
.volet-image.tire { cursor: grabbing; }
.volet-image img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; user-select: none; -webkit-user-drag: none;
}
.volet-texte { padding: 24px 30px 40px; overflow: auto; min-width: 0; }

.bascule {
  display: flex; gap: 26px; border-bottom: 1px solid var(--bord-fort);
  margin-bottom: 20px;
}
.bascule button {
  background: none; border: none; cursor: pointer; padding: 0 0 9px;
  font: 400 17px var(--lect); color: var(--encre-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.bascule button.on { color: var(--encre); border-bottom-color: var(--accent); }
.bascule button:disabled { opacity: .4; cursor: default; }

.lire { font-family: var(--lect); font-size: 16.5px; line-height: 1.75; max-width: 62ch; color: var(--encre); }
.lire p { margin: 0 0 1em; }
.lire h3 { font-family: var(--lect); font-size: 18px; font-weight: 600; margin: 1.4em 0 .5em; }
.crochets {
  font-family: var(--ui); font-size: .8em; letter-spacing: .02em;
  color: var(--attente-t); background: var(--attente-f);
  border-radius: 3px; padding: 1px 6px; white-space: nowrap;
}

.panneau-manuscrit {
  background: var(--surface); border: 1px solid var(--bord); border-radius: 8px;
  padding: 24px 26px; max-width: 56ch;
}
.panneau-manuscrit h2 { font-family: var(--lect); font-style: italic; }
.panneau-manuscrit p { color: var(--encre-2); font-size: 13.5px; line-height: 1.65; margin: 0 0 14px; }
.alerte-panneau { border-color: var(--alerte); }

.pied-lecture {
  display: flex; gap: 22px; align-items: center; margin-top: 24px;
  padding-top: 12px; border-top: 1px solid var(--bord); font-size: 12.5px; color: var(--encre-3);
}
.pied-lecture .petit { margin-left: auto; }

/* ------------------------------------------------------------------ etroit */
@media (max-width: 900px) {
  .deux-volets, .lecteur-corps { grid-template-columns: 1fr; }
  .volet-arbre { border-right: none; border-bottom: 1px solid var(--bord); }
  .lecteur { height: auto; }
  .volet-image { height: 60dvh; }
  .metadonnees { grid-template-columns: 1fr; gap: 4px 0; }
  .barre { flex-wrap: wrap; gap: 12px; }
}