/* Héritage — feuille de style unique.
   Parti pris : L'ATELIER. Sombre d'abord, noir chaud, encre ivoire, un seul accent
   (le laiton) et trois familles qui ne se mélangent jamais : romaine de titrage pour
   les NOMS, linéale pour L'INTERFACE, chasse fixe pour LES DONNÉES.
   Polices auto-hébergées dans assets/css/polices.css : aucun appel à un CDN. */


/* ── Les jetons ── */
/* Le SOIR est le défaut (longues séances de dépouillement) ; « auto », « clair »,
   « sombre » : voir le sélecteur du rail.
   Les jetons portent leur RÔLE (--fond, --encre, --accent…), jamais une matière.
   --trait SÉPARE (discret) ; --trait-net BORDE UNE COMMANDE et doit tenir 3:1.
   L'accent se dédouble : --accent (ce qu'on remplit) et --accent-lisible (ce qu'on
   écrit) coïncident en sombre, divergent en clair.
   DANS LES DONNÉES, le laiton ne marque qu'une chose : ce que la machine a DÉDUIT
   et non lu (« vers 1861 », « idem », fenêtre calculée). */

:root{
  color-scheme:dark;

  /* les fonds, du plus profond au plus levé */
  --fond:#141210;                 /* la page */
  --fond-leve:#1d1a16;            /* un panneau, une carte : posé SUR la page */
  --fond-creux:#0f0d0b;           /* un creux : champ de saisie, scène, relevé */
  --fond-champ:#0f0d0b;           /* UN CHAMP EST UN CREUX, jamais une saillie */
  --fond-note:#241f17;            /* la note laitonnée : ce qui est déduit */

  /* l'encre, du plus net au plus effacé — mesurés sur --fond ET sur --fond-leve */
  --encre:#ece4d5;                /* 14,8:1 sur la page */
  --encre-douce:#c3b8a5;          /*  9,5:1 */
  --encre-pale:#8b8175;           /*  4,9:1 sur la page, 4,5:1 sur un panneau — le pire des deux commande */

  /* les traits : l'un sépare, l'autre borde une commande */
  --trait:#3d352a;                /* filet de séparation, discret à dessein */
  --trait-fin:#262119;            /* plus discret encore : à l'intérieur d'un panneau */
  --trait-net:#70665b;            /* BORD D'UNE COMMANDE — 3,3:1 sur la page, 3,1:1 sur un panneau */

  /* l'accent, et ses deux emplois */
  --accent:#d99a3f;               /* ce qu'on REMPLIT */
  --accent-lisible:#d99a3f;       /* ce qu'on ÉCRIT ou qu'on TRACE — 7,7:1 sur la page */
  --accent-clair:#efb75c;         /* le survol */
  --sur-couleur:#191510;          /* ce qu'on écrit SUR l'accent rempli — 7,5:1 */
  --laiton:var(--accent);         /* l'ancien nom, gardé : trois emplois en JS le lisent */

  /* les teintes qui parlent d'autre chose que de l'interface */
  --ardoise:#8fb0cf;              /* le masculin, dans l'arbre — 8,3:1 */
  --mousse:#8fb193;               /* ce qui est confirmé — 7,9:1 */

  --ombre:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.8);
  --ombre-levee:0 2px 6px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.9);
  /* Le grain disparaît : l'Atelier n'imite pas le papier. */
  --grain:0;
  --voile-1:rgba(217,154,63,.028);
  --voile-2:rgba(143,176,207,.018);

  /* Teintes d'état (prêt, bloquant, avertissement) en jetons : codées en dur, elles
     resteraient claires sur une page sombre. */
  --teinte-vert:#1c2a20;   --sur-vert:#a9cbad;
  --teinte-rouge:#2b1c19;  --sur-rouge:#d9897c;
  --teinte-ambre:#2a2419;  --sur-ambre:#dcc79c;

  --pouce-barre:#4a4234;
  --fond-bandeau:#1a1714;         /* le rail : opaque, il ne laisse rien passer */
  --fond-barre:rgba(29,26,22,.96);
  --liseré-haut:rgba(255,255,255,.04);

  /* ── Trois familles, trois offices ──
     --nom     noms de personnes et titres (romaine de titrage, jamais en texte courant) ;
     --texte   l'interface et la prose ;
     --donnee  dates, âges, cotes, transcriptions : la chasse fixe aligne les chiffres. */
  --nom:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --texte:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --donnee:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r:4px;
  --rail:76px;                    /* la largeur du rail, lue par la grille de <body> */
}


/* ── Le jour ── */
/* Pas le soir inversé : même tempérament, blanc chaud. Deux renversements :
   le CHAMP devient plus BLANC que la page (en sombre, c'est un creux) ; l'ACCENT
   s'assombrit à #8a5a12 (le laiton #d99a3f tombe à 2,0:1 sur le crème). */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) { color-scheme:light; }
}
:root[data-theme="clair"]  { color-scheme:light; }
:root[data-theme="sombre"] { color-scheme:dark; }

/* Palette du jour, écrite une fois, appelée par le réglage système et par le choix explicite. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) {
    --fond:#f7f4ef;
    --fond-leve:#fffdf9;
    --fond-creux:#efe9df;
    --fond-champ:#ffffff;         /* en clair, un champ AVANCE */
    --fond-note:#fdf6e6;
    --encre:#1c1917;              /* 15,9:1 */
    --encre-douce:#4f4941;        /*  8,1:1 */
    --encre-pale:#726858;         /*  5,0:1 */
    --trait:#ded7c9;
    --trait-fin:#ebe5d9;
    --trait-net:#8f8574;          /* 3,3:1 sur la page — bord de commande */
    --accent:#8a5a12;             /* porte du blanc à 5,8:1 */
    --accent-lisible:#8a5a12;     /* et se lit sur la page à 5,4:1 */
    --accent-clair:#a8701f;
    --sur-couleur:#fffdf7;
    --ardoise:#3c5a78;            /* 6,5:1 */
    --mousse:#41604a;             /* 6,4:1 */
    --ombre:0 1px 2px rgba(28,25,23,.07), 0 8px 24px -12px rgba(28,25,23,.25);
    --ombre-levee:0 2px 4px rgba(28,25,23,.09), 0 18px 40px -18px rgba(28,25,23,.4);
    --grain:0;
    --voile-1:rgba(217,154,63,.07);
    --voile-2:rgba(60,90,120,.04);
    --teinte-vert:#eaf0ea;   --sur-vert:#2f4635;
    --teinte-rouge:#f7ebe8;  --sur-rouge:#8c3226;
    --teinte-ambre:#f6efdf;  --sur-ambre:#5c4718;
    --pouce-barre:#b8ac96;
    --fond-bandeau:#f0ebe1;
    --fond-barre:rgba(255,253,249,.96);
    --liseré-haut:rgba(255,255,255,.8);
  }
}
:root[data-theme="clair"] {
  --fond:#f7f4ef;
  --fond-leve:#fffdf9;
  --fond-creux:#efe9df;
  --fond-champ:#ffffff;
  --fond-note:#fdf6e6;
  --encre:#1c1917;
  --encre-douce:#4f4941;
  --encre-pale:#726858;
  --trait:#ded7c9;
  --trait-fin:#ebe5d9;
  --trait-net:#8f8574;
  --accent:#8a5a12;
  --accent-lisible:#8a5a12;
  --accent-clair:#a8701f;
  --sur-couleur:#fffdf7;
  --ardoise:#3c5a78;
  --mousse:#41604a;
  --ombre:0 1px 2px rgba(28,25,23,.07), 0 8px 24px -12px rgba(28,25,23,.25);
  --ombre-levee:0 2px 4px rgba(28,25,23,.09), 0 18px 40px -18px rgba(28,25,23,.4);
  --grain:0;
  --voile-1:rgba(217,154,63,.07);
  --voile-2:rgba(60,90,120,.04);
  --teinte-vert:#eaf0ea;   --sur-vert:#2f4635;
  --teinte-rouge:#f7ebe8;  --sur-rouge:#8c3226;
  --teinte-ambre:#f6efdf;  --sur-ambre:#5c4718;
  --pouce-barre:#b8ac96;
  --fond-bandeau:#f0ebe1;
  --fond-barre:rgba(255,253,249,.96);
  --liseré-haut:rgba(255,255,255,.8);
}

/* L'impression reste sur papier blanc : palette du jour quel que soit l'écran. */
@media print {
  :root, :root[data-theme="sombre"], :root[data-theme="clair"] {
    --fond:#fff; --fond-leve:#fff; --fond-creux:#f4f0e7;
    --fond-champ:#fff; --fond-note:#fdf6e6;
    --encre:#1c1917; --encre-douce:#4f4941; --encre-pale:#726858;
    --trait:#cfc7b6; --trait-fin:#e2dbcd; --trait-net:#8f8574;
    --accent:#8a5a12; --accent-lisible:#8a5a12; --accent-clair:#a8701f;
    --sur-couleur:#fff; --ardoise:#3c5a78; --mousse:#41604a;
    --grain:0; --voile-1:transparent; --voile-2:transparent;
    --teinte-vert:#eaf0ea; --sur-vert:#2f4635;
    --teinte-rouge:#f7ebe8; --sur-rouge:#8c3226;
    --teinte-ambre:#f6efdf; --sur-ambre:#5c4718; --pouce-barre:#b8ac96;
    --fond-bandeau:#fff; --fond-barre:#fff; --liseré-haut:transparent;
    --ombre:none; --ombre-levee:none;
  }
}


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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--texte);
  font-size:16.5px;
  line-height:1.62;
  color:var(--encre);
  background-color:var(--fond);
  background-image:
    radial-gradient(1400px 900px at 18% -12%, var(--voile-1), transparent 62%),
    radial-gradient(1000px 800px at 108% 6%, var(--voile-2), transparent 58%);
  min-height:100vh;
}

/* Grain de papier : une seule turbulence SVG, posée par-dessus tout, inerte. */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* L'interligne ne bouge pas ; le blanc entre paragraphes, si : un quart suffit à séparer
   (le cadratin par défaut, cumulé, fait une demi-hauteur d'écran de vide). */
p{ margin:0 0 .72em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 .72em; }

a{ color:var(--accent-lisible); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--accent-clair); }

h1,h2,h3,h4{ font-family:var(--nom); font-weight:400; line-height:1.16; margin:0 0 .38em; letter-spacing:-.01em; }
h1{ font-size:clamp(1.75rem,3.4vw,2.4rem); }
h2{ font-size:1.4rem; }
h3{ font-size:1.15rem; }

/* Petites capitales d'étiquette : la signature visuelle du site. */
.etiquette{
  font-family:var(--texte); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--encre-pale);
}

/* ── Ossature ── */

/* ── Le rail ── */
/* Une colonne à gauche plutôt qu'un bandeau : sur une page de dépouillement, chaque
   pixel de HAUTEUR compte. <body> est une grille à deux colonnes : aucune enveloppe
   à ouvrir dans entete.php et refermer dans pied.php. Les enfants égarés (un
   <a download> posé un instant) sont rangés à droite. */

body{
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  grid-template-rows:1fr auto;
  min-height:100vh;
}
body > *{ grid-column:2; }        /* les égarés vont à droite, pas sous le rail */
/* « width:100% » N'EST PAS DÉCORATIF : dans une grille, « margin:0 auto » réduit
   l'élément à son contenu (pages rétrécies, colonnes de fiche empilées). */
body > main{ grid-column:2; grid-row:1; min-width:0; width:100%; }
body > footer{ grid-column:2; grid-row:2; min-width:0; width:100%; }

.bandeau{
  grid-column:1; grid-row:1 / -1;
  position:sticky; top:0; align-self:start;
  height:100vh; height:100dvh; z-index:50;
  display:flex; flex-direction:column; align-items:stretch; gap:.15rem;
  padding:.7rem .4rem;
  background:var(--fond-bandeau);
  border-right:1px solid var(--trait);
  box-shadow:1px 0 0 var(--liseré-haut) inset;
}
.bandeau .marque{
  font-family:var(--nom); font-weight:400; font-size:1.6rem; line-height:1;
  color:var(--encre); text-decoration:none; text-align:center;
  padding:.35rem 0 .9rem;
}
.bandeau .marque span{ color:var(--accent-lisible); }
.bandeau .pousse{ flex:1 1 auto; }

.rail-nav{ display:flex; flex-direction:column; gap:.15rem; }

/* Le mot reste sous le pictogramme : une icône muette se devine mal. */
.lien-rail{
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
  padding:.5rem .1rem .45rem; border-radius:var(--r);
  font-family:var(--texte); font-size:.62rem; font-weight:600; letter-spacing:.03em;
  color:var(--encre-pale); text-decoration:none; text-align:center;
  background:none; border:0; cursor:pointer; width:100%;
  transition:background .15s, color .15s;
}
.lien-rail svg{ width:21px; height:21px; display:block; }
/* La déconnexion est un formulaire (un GET ne doit pas changer l'état) : il ne doit
   pas casser la colonne du rail. */
.forme-rail{ width:100%; margin:0; display:block; }
.lien-rail:hover{ background:var(--fond-creux); color:var(--encre); }
.lien-rail.actif{ color:var(--accent-lisible); background:var(--fond-note); }
.lien-rail:focus-visible{ outline:2px solid var(--accent-lisible); outline-offset:-2px; }

/* ── Le rail se couche sur un portable ── */
@media (max-width:720px){
  body{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  body > *{ grid-column:1; }
  body > main{ grid-row:2; }
  body > footer{ grid-row:3; }
  .bandeau{
    grid-column:1; grid-row:1;
    position:sticky; top:0; height:auto;
    flex-direction:row; align-items:center; gap:.1rem;
    padding:.3rem .5rem; overflow-x:auto;
    border-right:0; border-bottom:1px solid var(--trait);
    box-shadow:0 1px 0 var(--liseré-haut) inset;
  }
  .bandeau .marque{ padding:0 .5rem 0 .2rem; font-size:1.35rem; }
  .rail-nav{ flex-direction:row; }
  .lien-rail{ width:auto; padding:.35rem .5rem; font-size:.6rem; }
  .lien-rail svg{ width:18px; height:18px; }
}

.page{ max-width:1180px; margin:0 auto; padding:clamp(1rem,2.4vw,1.7rem) clamp(1rem,4vw,2.4rem) 2.2rem; }

/* ── Le mode atelier ── */
/* Page plein écran qui ne défile pas (la toile de l'arbre se déplace elle-même).
   La hauteur passe par une chaîne de flex : chaque maillon doit avoir min-height:0,
   sinon l'enfant déborde en silence. */
body.atelier{
  height:100vh; height:100dvh; min-height:0; overflow:hidden;
  grid-template-rows:1fr;          /* pas de pied : une seule rangée */
}
body.atelier > main{ min-height:0; overflow:hidden; }
body.atelier .atelier-corps{
  height:100%; min-height:0; display:flex; padding:0; margin:0; max-width:none;
}
body.atelier .scene{
  flex:1 1 auto; min-height:0; height:auto;
  border:0; border-radius:0;
}
/* Le message d'arbre vide, centré sur la scène sans en prendre la place. */
.scene .vide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:2rem;
}

/* Filet de titre de section, à la manière d'un registre. */
.titre-section{ display:flex; align-items:baseline; gap:1rem; margin:1.7rem 0 .8rem; }
.titre-section::after{ content:''; flex:1; height:1px; background:var(--trait); }
.titre-section h2{ margin:0; }

/* ── Cartes & blocs ── */

.bloc{
  background:var(--fond-leve);
  border:1px solid var(--trait);
  border-radius:var(--r);
  box-shadow:var(--ombre);
  padding:1.1rem 1.25rem;
}
.bloc + .bloc{ margin-top:.85rem; }

.grille{ display:grid; gap:.85rem; }
.grille-2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grille-3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

/* Un compteur qui annonce une avarie (documents mis de côté) ne doit pas ressembler
   à un compteur ordinaire. */
.compteurs .alerte,
.compteurs .alerte b{ color:var(--accent-lisible); }

/* Une valeur redressée par le site, non lue sur l'acte : le laiton marque le déduit. */
.note-corrigee{ color:var(--accent-lisible); }

/* La date d'un document (fait d'archive), en laiton pour la distinguer de la date de dépôt. */
.date-source{ color:var(--accent-lisible); font-size:.78rem; margin-left:.35rem; }
.puce.piece-datee{ color:var(--accent-lisible); border-color:var(--accent); }

/* La case des vues d'un même acte : discrète, le nom de la pièce se lit d'abord. */
.doc-choix{ margin-right:.45rem; vertical-align:-1px; accent-color:var(--accent); }

/* Chiffre-clé (tableau de bord) */
.chiffre{ text-align:left; }
.chiffre .valeur{ font-family:var(--nom); font-size:2.4rem; font-weight:400; line-height:1; color:var(--accent-lisible); }
.chiffre .libelle{ font-size:.86rem; color:var(--encre-pale); margin-top:.35rem; }

/* ── Formulaires ── */

label{ display:block; margin-bottom:.7rem; }
/* « display:block » ci-dessus l'emporte sur [hidden] du navigateur : on rétablit la règle. */
[hidden]{ display:none !important; }
label > .etiquette{ display:block; margin-bottom:.28rem; }

/* On habille PAR EXCLUSION, pas par énumération : tout champ de saisie, sauf cases,
   boutons, curseurs et couleurs. Une liste de types oublie toujours le prochain. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not([type=hidden]),
select,textarea{
  width:100%; font-family:var(--texte); font-size:.97rem; color:var(--encre);
  background:var(--fond-champ); border:1px solid var(--trait-net);
  border-radius:var(--r); padding:.5rem .65rem;
  transition:border-color .15s, box-shadow .15s;
}
textarea{ line-height:1.55; resize:vertical; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent-lisible);
  box-shadow:0 0 0 3px rgba(217,154,63,.22);
}
input::placeholder,textarea::placeholder{ color:var(--encre-pale); font-style:normal; }
.mono{ font-family:var(--donnee); font-size:.82rem; line-height:1.55; }

.bouton{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--texte); font-size:.85rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:.55rem 1.05rem; border-radius:var(--r);
  background:var(--accent); color:var(--sur-couleur); border:1px solid var(--accent);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 2px 8px -3px rgba(217,154,63,.45);
  transition:transform .12s, background .15s, box-shadow .15s;
}
.bouton:hover{ background:var(--accent-clair); border-color:var(--accent-clair); color:var(--sur-couleur); transform:translateY(-1px); }
.bouton:active{ transform:translateY(0); }
.bouton[disabled],.bouton.occupe{ opacity:.55; cursor:not-allowed; transform:none; }
.bouton.creux{ background:transparent; color:var(--encre); border-color:var(--trait-net); box-shadow:none; }
.bouton.creux:hover{ background:var(--fond-creux); color:var(--encre); border-color:var(--encre-pale); }
.bouton.petit{ font-size:.74rem; padding:.34rem .7rem; }
.bouton.danger{ background:transparent; color:var(--accent-lisible); border-color:var(--accent-lisible); box-shadow:none; }
.bouton.danger:hover{ background:var(--accent); color:var(--sur-couleur); }

.rangee-boutons{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ── Messages ── */

.message{ padding:.6rem .9rem; border-radius:var(--r); border-left:3px solid; margin-bottom:.75rem; font-size:.94rem; }
.message.succes{ background:var(--teinte-vert); border-color:var(--mousse); color:var(--sur-vert); }
.message.erreur{ background:var(--teinte-rouge); border-color:var(--accent-lisible); color:var(--sur-rouge); }
.message.info{ background:var(--teinte-ambre); border-color:var(--laiton); color:var(--sur-ambre); }


/* ── Le répertoire en cartels ── */
/* La PIÈCE d'abord, le nom ensuite : on reconnaît une écriture avant de lire un nom.
   Le sigle (NAI, MAR, DÉC, REC) : l'acte de naissance passe en premier s'il existe
   (api/pieces.php), donc une carte sans « NAI » signale un acte manquant.
   Trois états : image, pièce identifiée non photographiée (sa cote), rien. */

/* ── Le répertoire en deux colonnes ── */
/* La colonne de gauche répond à « qu'y a-t-il là-dedans ? » : chaque ligne est un
   filtre (api/facettes.php). Collée au rail, fond levé, défilement propre. */
.repertoire-page{
  display:grid; grid-template-columns:15rem minmax(0, 1fr);
  align-items:stretch; min-height:100%;
}
.filtres{
  background:var(--fond-leve); border-right:1px solid var(--trait);
  padding:1.15rem 1.05rem 2rem;
  position:sticky; top:0; align-self:start;
  max-height:100vh; overflow-y:auto; overscroll-behavior:contain;
}
.filtres .etiquette{ margin:0 0 .4rem; }
.filtre-cherche{ display:block; }
.filtre-cherche input[type=search]{ width:100%; font-size:.86rem; padding:.5rem .6rem; }
/* Le bouton reste (la page marche sans JavaScript) mais ne domine pas la colonne. */
.filtre-cherche .bouton{
  margin-top:.45rem; width:100%; justify-content:center;
  padding:.34rem; font-size:.64rem;
}
/* Un titre de document sur une ligne ; le titre complet reste sous le pointeur. */
.facette li a > span:first-child{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
/* Une facette à zéro n'est pas un lien (page vide) : montrée, mais éteinte. */
.facette li span.mort{
  display:flex; align-items:baseline; justify-content:space-between; gap:.7rem;
  padding:.26rem 0; font-size:.82rem; color:var(--encre-pale); opacity:.55;
}
.facette li span.mort .n{ font-family:var(--donnee); font-size:.7rem; }

.facette{ margin-top:1.25rem; }
.facette ul{ list-style:none; margin:0; padding:0; }
.facette li a{
  display:flex; align-items:baseline; justify-content:space-between; gap:.7rem;
  padding:.26rem 0; font-size:.82rem; line-height:1.3;
  color:var(--encre-douce); text-decoration:none;
}
.facette li a:hover{ color:var(--accent-lisible); }
.facette li a .n{ font-family:var(--donnee); font-size:.7rem; color:var(--encre-pale); flex:0 0 auto; }
/* Le filtre allumé : libellé ET compte à l'encre d'accent. */
.facette li a.actif,
.facette li a.actif .n{ color:var(--accent-lisible); }
.facette .reste{ margin:.35rem 0 0; font-size:.68rem; color:var(--encre-pale); }

.periode .bornes{ margin:0; font-size:.76rem; color:var(--encre-douce); }
/* La barre est un DESSIN (pas de JavaScript) : les deux cases dessous sont la vraie commande. */
.periode-barre{
  height:6px; margin-top:.45rem; position:relative;
  background:var(--fond-creux); border:1px solid var(--trait); border-radius:3px;
}
.periode-barre i{ position:absolute; top:-1px; bottom:-1px; background:var(--accent); border-radius:2px; }
.periode-champs{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-top:.5rem; }
.periode-champs label{ margin:0; }
.periode-champs .etiquette{ margin:0 0 .15rem; font-size:.6rem; }
.periode-champs input{ width:100%; font-family:var(--donnee); font-size:.78rem; padding:.32rem .4rem; }
.periode-champs .bouton{ grid-column:1 / -1; justify-content:center; padding:.3rem; font-size:.66rem; }

.encart-indices{
  display:block; margin-top:1.3rem; padding:.65rem .75rem;
  border:1px solid var(--accent); border-radius:var(--r);
  background:var(--fond-note); text-decoration:none;
  font-size:.78rem; line-height:1.45; color:var(--encre-douce);
}
.encart-indices .etiquette{ color:var(--accent-lisible); display:block; margin:0 0 .2rem; }
.encart-indices:hover{ background:var(--fond-creux); }
.filtres .tout-voir{ margin:1.1rem 0 0; font-size:.76rem; }

.repertoire-corps{
  min-width:0; padding:clamp(1rem,2.2vw,1.5rem) clamp(1rem,3vw,1.9rem) 2.2rem;
}
.entete-repertoire{
  display:flex; align-items:flex-end; gap:1.1rem; flex-wrap:wrap;
  padding-bottom:.75rem; border-bottom:1px solid var(--trait);
}
.entete-titre h1{ margin:.1rem 0 0; font-size:clamp(1.5rem, 3vw, 2.1rem); line-height:1.05; }
.entete-titre .etiquette{ margin:0; }
.entete-tri, .entete-repertoire .compte-pieces{
  margin:0 0 .3rem; font-size:.74rem; color:var(--encre-pale);
}
.entete-tri .basculer{ color:var(--encre-pale); text-decoration:underline dotted; margin-left:.35rem; }
.entete-tri .basculer:hover{ color:var(--accent-lisible); }
.entete-repertoire .compte-pieces{ color:var(--encre-douce); }
.entete-repertoire .bascule-vue{ margin-left:auto; align-self:center; }

.avis-facette{
  margin:.9rem 0 0; padding:.55rem .75rem; font-size:.8rem;
  border-left:2px solid var(--accent); background:var(--fond-leve); color:var(--encre-douce);
}

/* L'intertitre de lettre : l'initiale, un filet jusqu'au compte (air de fichier de bibliothèque). */
.titre-lettre{ display:flex; align-items:center; gap:.9rem; margin:1.5rem 0 .75rem; }
.titre-lettre .l{
  font-family:var(--nom); font-weight:400; font-size:1.35rem; line-height:1;
  color:var(--accent-lisible);
}
.titre-lettre .filet{ flex:1; height:1px; background:var(--trait); }
.titre-lettre .etiquette{ margin:0; flex:0 0 auto; }

.pied-repertoire{
  margin:1.8rem 0 0; padding-top:.7rem; border-top:1px solid var(--trait);
  font-size:.72rem; color:var(--encre-pale);
}
.pied-repertoire .deduit{ color:var(--accent-lisible); }

@media (max-width:900px){
  /* Sur portable, une colonne de 4 rem écraserait la grille. */
  .repertoire-page{ grid-template-columns:1fr; }
  .filtres{ position:static; max-height:none; border-right:0; border-bottom:1px solid var(--trait); }
}

.compte-pieces{ margin:0; font-size:.78rem; color:var(--encre-douce); }
.compte-pieces .pale{ color:var(--encre-pale); }

.bascule-vue{ margin-left:auto; display:flex; border:1px solid var(--trait-net); border-radius:var(--r); overflow:hidden; }
.bascule-vue a{
  font-family:var(--texte); font-size:.7rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--encre-pale);
  padding:.42rem .8rem; transition:background .15s, color .15s;
}
.bascule-vue a + a{ border-left:1px solid var(--trait-net); }
.bascule-vue a:hover{ background:var(--fond-creux); color:var(--encre); }
.bascule-vue a.actif{ background:var(--fond-note); color:var(--accent-lisible); }

.grille-cartels{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(212px, 1fr));
  gap:.9rem; margin:.9rem 0 1.6rem;
}

.cartel{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--trait); border-radius:var(--r);
  background:var(--fond-leve); overflow:hidden;
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
/* Des milliers de cartels : le navigateur ne met en page que ceux qui approchent de
   l'écran (hauteur annoncée = un cartel mesuré, « auto » retient la vraie). */
.grille-cartels .cartel{ content-visibility:auto; contain-intrinsic-size:auto 184px; }
.cartel:hover{
  border-color:var(--accent-lisible); transform:translateY(-2px);
  box-shadow:var(--ombre-levee); color:inherit;
}
.cartel:focus-visible{ outline:2px solid var(--accent-lisible); outline-offset:2px; }

.cartel-vue{
  display:block; position:relative; height:92px;
  background:var(--fond-creux); border-bottom:1px solid var(--trait);
}
/* « cover » montre le HAUT de la pièce (en-tête, main, année) : c'est là qu'on la reconnaît. */
.cartel-vue img{
  width:100%; height:100%; object-fit:cover; object-position:center 12%;
  display:block;
}
.cartel-sigle{
  position:absolute; left:7px; bottom:6px;
  font-family:var(--donnee); font-size:.58rem; letter-spacing:.04em;
  color:var(--accent-lisible); background:var(--fond-bandeau);
  border:1px solid var(--trait-net); border-radius:2px; padding:.1rem .35rem;
}
/* Un genre DÉDUIT (par les années) ne se présente pas comme un genre lu : pointillé + infobulle. */
.cartel-sigle.deduit{ border-style:dashed; }

.cartel-vue.sans-image, .cartel-vue.vide{
  display:flex; align-items:center; justify-content:center; text-align:center; padding:.5rem;
}
.cartel-vue.sans-image{ background:var(--fond-creux); }
.cartel-vue.sans-image .cote{
  font-family:var(--donnee); font-size:.7rem; color:var(--encre-douce);
  border:1px solid var(--trait); border-radius:2px; padding:.28rem .5rem;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cartel-vue.vide{
  background-image:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--encre-pale) 9%, transparent) 0 1px, transparent 1px 7px);
}
.cartel-vue.vide span{
  font-family:var(--texte); font-size:.6rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--encre-pale);
  border:1px dashed var(--trait-net); border-radius:3px; padding:.3rem .55rem;
}

.cartel-dedans{ display:block; padding:.55rem .7rem .6rem; }
.cartel-nom{
  display:block; font-family:var(--nom); font-size:1.04rem; line-height:1.16;
  color:var(--encre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cartel-dates{
  display:block; font-family:var(--donnee); font-size:.68rem; color:var(--encre-douce);
  margin-top:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cartel-metier{ font-family:var(--texte); font-size:.72rem; color:var(--encre-pale); }
.cartel-source{
  display:block; font-family:var(--donnee); font-size:.62rem; color:var(--encre-pale);
  margin-top:.45rem; padding-top:.4rem; border-top:1px solid var(--trait-fin);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pale{ color:var(--encre-pale); }

/* ── La liste, pour travailler ──
   Sa dernière colonne porte EXACTEMENT la pièce de la vignette : même fonction pour
   les deux vues, sinon elles divergent. */
.bloc.sans-fond{ background:none; border:0; padding:0; }
.table-repertoire{ width:100%; border-collapse:collapse; font-size:.9rem; }
.table-repertoire th{
  font-family:var(--texte); font-size:.66rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--encre-pale); text-align:left;
  padding:.4rem .6rem; border-bottom:1px solid var(--trait);
}
.table-repertoire td{
  padding:.34rem .6rem; border-bottom:1px solid var(--trait-fin); vertical-align:baseline;
}
.table-repertoire tr:hover td{ background:var(--fond-leve); }
.table-repertoire td.num{ width:2.6rem; font-size:.7rem; text-align:right; }
.table-repertoire td .mono{ font-size:.74rem; }
.table-repertoire a{ color:var(--encre); text-decoration:none; }
.table-repertoire a:hover{ color:var(--accent-lisible); }
.sigle-liste{ color:var(--accent-lisible); }
.sigle-liste.deduit{ border-bottom:1px dashed var(--accent-lisible); }

@media (max-width:640px){
  .grille-cartels{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.6rem; }
  .cartel-vue{ height:76px; }
  .table-repertoire{ font-size:.82rem; }
  .table-repertoire td:nth-child(4), .table-repertoire th:nth-child(4),
  .table-repertoire td:nth-child(5), .table-repertoire th:nth-child(5){ display:none; }
}

/* ── L'arbre ── */
/* Quatre styles, UNE SEULE GÉOMÉTRIE (sinon la planche à imprimer diverge).
   Toutes les couleurs sont des variables déclarées ICI : le script les LIT
   (getComputedStyle) pour les filets, les branches et l'affiche.
   data-style-arbre est posé sur <html> (voir plus bas) ; scène et planche en héritent. */

[data-style-arbre]{
  --a-fond:#0f0d0b;
  --a-grille:rgba(255,250,240,.035);
  --a-vignette:rgba(0,0,0,.75);
  --a-carte:#1d1a16;         --a-carte-bord:#3d352a;   --a-carte-rayon:4px;
  --a-foyer:#241f17;         --a-foyer-bord:#d99a3f;
  --a-nom:#ece4d5;           --a-date:#8b8175;         --a-lieu:#8b8175;
  --a-role:#6f665a;
  --a-union:#5a5145;         --a-filiation:#4a4234;
  --a-union-ep:1.8;          --a-filiation-ep:1.4;
  --a-homme:#8fb0cf;         --a-femme:#d9897c;        --a-lisere:3px;
  --a-bois:#8a6a44;          --a-feuille:#7d9a68;      --a-ornement:#d99a3f;
  --a-titre:#ece4d5;
  --a-nom-police:var(--nom);
  --a-nom-casse:none;
  /* Les noms respirent ici : une romaine de titrage à 16 px (et en faux gras) referme
     ses blancs ; deux centièmes de cadratin rouvrent le mot. */
  --a-nom-espace:.022em;
  --a-ombre:var(--ombre);
}

/* Le même style, de jour — pour le style par défaut SEULEMENT : parchemin, arbre
   dessiné et épuré sont des choix qui ne suivent pas la lumière. */
@media (prefers-color-scheme: light) {
  /* L'attribut est sur <html> (arbre.js, documentElement) : d'où la forme :root[…],
     sans laquelle cette palette ne s'applique nulle part. On garde aussi la forme
     descendante, s'il revient sur <main>. */
  :root:not([data-theme="sombre"])[data-style-arbre]:not([data-style-arbre="parchemin"]):not([data-style-arbre="arbre"]):not([data-style-arbre="epure"]),
  :root:not([data-theme="sombre"]) [data-style-arbre]:not([data-style-arbre="parchemin"]):not([data-style-arbre="arbre"]):not([data-style-arbre="epure"]){
    --a-fond:#f2eee6;
    --a-grille:rgba(114,104,88,.13);
    --a-vignette:rgba(120,100,60,.09);
    --a-carte:#fffdf9;         --a-carte-bord:#ded7c9;
    --a-foyer:#fdf6e6;         --a-foyer-bord:#8a5a12;
    --a-nom:#1c1917;           --a-date:#726858;         --a-lieu:#726858;
    --a-role:#8a7a5f;
    --a-union:#a8998a;         --a-filiation:#c5bcae;
    --a-homme:#3c5a78;         --a-femme:#8c3226;
    --a-bois:#7a5a38;          --a-feuille:#6f8a5c;      --a-ornement:#8a5a12;
    --a-titre:#1c1917;
  }
}
:root[data-theme="clair"][data-style-arbre]:not([data-style-arbre="parchemin"]):not([data-style-arbre="arbre"]):not([data-style-arbre="epure"]),
:root[data-theme="clair"] [data-style-arbre]:not([data-style-arbre="parchemin"]):not([data-style-arbre="arbre"]):not([data-style-arbre="epure"]){
  --a-fond:#f2eee6;
  --a-grille:rgba(114,104,88,.13);
  --a-vignette:rgba(120,100,60,.09);
  --a-carte:#fffdf9;         --a-carte-bord:#ded7c9;
  --a-foyer:#fdf6e6;         --a-foyer-bord:#8a5a12;
  --a-nom:#1c1917;           --a-date:#726858;         --a-lieu:#726858;
  --a-role:#8a7a5f;
  --a-union:#a8998a;         --a-filiation:#c5bcae;
  --a-homme:#3c5a78;         --a-femme:#8c3226;
  --a-bois:#7a5a38;          --a-feuille:#6f8a5c;      --a-ornement:#8a5a12;
  --a-titre:#1c1917;
}

/* ── Parchemin ancien ── */
/* Celui qu'on encadre : planche lithographiée du XIXᵉ, sans liseré de couleur. */
[data-style-arbre="parchemin"]{
  --a-fond:#efe3c8;
  --a-grille:transparent;
  --a-vignette:rgba(110,78,30,.22);
  --a-carte:#f9f1dd;         --a-carte-bord:#a98f5f;   --a-carte-rayon:1px;
  --a-foyer:#fdf8e9;         --a-foyer-bord:#7a5a2a;
  --a-nom:#3b2c17;           --a-date:#7b6540;         --a-lieu:#8a7350;
  --a-role:#8a6b3a;
  --a-union:#7a5a2a;         --a-filiation:#a98f5f;
  --a-union-ep:3;            --a-filiation-ep:1.6;
  --a-homme:#a98f5f;         --a-femme:#a98f5f;        --a-lisere:0px;
  --a-ornement:#8a6b3a;      --a-titre:#3b2c17;
  --a-nom-casse:uppercase;   --a-nom-espace:.06em;
  --a-ombre:0 1px 0 rgba(120,92,44,.18);
}

/* ── Arbre dessiné ── */
/* Ascendants en BRANCHES, descendance en RACINES ; le bois remplace les filets. */
[data-style-arbre="arbre"]{
  --a-fond:#f3f0e2;
  --a-grille:transparent;
  --a-vignette:rgba(90,110,70,.14);
  --a-carte:#fdfaf0;         --a-carte-bord:#b6a888;   --a-carte-rayon:14px;
  --a-foyer:#fffdf2;         --a-foyer-bord:#6f8a5c;
  --a-nom:#26301f;           --a-date:#7b8471;         --a-lieu:#7b8471;
  --a-role:#6f8a5c;
  --a-union:#7a5a38;         --a-filiation:transparent;
  --a-union-ep:3;            --a-filiation-ep:0;
  --a-homme:#5b7f9c;         --a-femme:#a05a52;        --a-lisere:3px;
  --a-bois:#7a5a38;          --a-feuille:#7d9a68;      --a-ornement:#6f8a5c;
  --a-titre:#26301f;
  --a-ombre:0 2px 6px -2px rgba(60,50,30,.35);
}

/* ── Épuré ── */
/* Le seul lisible au-delà de deux cents cases, et le seul qui s'imprime sans vider une cartouche. */
[data-style-arbre="epure"]{
  --a-fond:#ffffff;
  --a-grille:transparent;
  --a-vignette:transparent;
  --a-carte:#ffffff;         --a-carte-bord:#d8d8d4;   --a-carte-rayon:0px;
  --a-foyer:#f7f7f4;         --a-foyer-bord:#211d18;
  --a-nom:#211d18;           --a-date:#8d8d88;         --a-lieu:#a3a39d;
  --a-role:#a3a39d;
  --a-union:#6f6f6a;         --a-filiation:#c8c8c4;
  --a-union-ep:1.6;          --a-filiation-ep:1;
  --a-homme:#4a4a46;         --a-femme:#4a4a46;        --a-lisere:0px;
  --a-ornement:#b8b8b3;      --a-titre:#211d18;
  --a-nom-police:ui-sans-serif, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --a-ombre:none;
}

.scene{
  position:relative; overflow:hidden;
  height:calc(100vh - 250px); min-height:440px;
  border:1px solid var(--trait); border-radius:var(--r);
  background-color:var(--a-fond);
  background-image:
    linear-gradient(var(--a-grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-grille) 1px, transparent 1px);
  background-size:38px 38px;
  box-shadow:inset 0 0 70px var(--a-vignette);
  cursor:grab;
}
.scene.saisie{ cursor:grabbing; }

/* ── L'arbre, le soir ── */
/* Les styles de l'arbre sont des PAPIERS : on n'assombrit ni fiches, ni traits, ni
   affiche — seulement le PLAN DE TRAVAIL autour. */
@media (prefers-color-scheme: dark) {
}
.toile{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.toile svg{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }

/* Le vergé du parchemin : une seule image répétée. */
.scene[data-style-arbre="parchemin"], [data-style-arbre="parchemin"] .scene{
  background-image:
    repeating-linear-gradient(90deg, rgba(150,118,66,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(rgba(150,118,66,.05) 0 1px, transparent 1px 9px);
  background-size:auto;
}

.fiche{
  position:absolute; width:206px; box-sizing:border-box; overflow:hidden;
  background:var(--a-carte); border:1px solid var(--a-carte-bord);
  border-radius:var(--a-carte-rayon); padding:.5rem .65rem;
  line-height:1.25;   /* la hauteur des cases est calculée sur cet interligne :
                         voir hauteurCarte() dans assets/js/arbre.js */
  box-shadow:var(--a-ombre); text-decoration:none; color:inherit;
  transition:box-shadow .16s, transform .16s, border-color .16s;
  animation:fiche-apparait .45s ease both;
  --a-accent:var(--a-carte-bord);
}
/* Le liseré est une BARRE, pas une bordure : en border-left, il effaçait le bord
   gauche des styles qui n'en veulent pas. */
.fiche::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:var(--a-lisere); background:var(--a-accent);
}
@keyframes fiche-apparait{ from{ opacity:0; } to{ opacity:1; } }
.fiche:hover{ box-shadow:var(--ombre-levee); transform:translateY(-2px);
  border-color:var(--a-foyer-bord); color:inherit; }
.fiche.homme{ --a-accent:var(--a-homme); }
.fiche.femme{ --a-accent:var(--a-femme); }
.fiche.foyer{ background:var(--a-foyer); border-color:var(--a-foyer-bord);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--a-foyer-bord) 26%, transparent), var(--a-ombre); }
/* La personne trouvée par la recherche : on la montre du doigt, brièvement. */
.fiche.designee{ animation:fiche-designee 1.6s ease 2; }
@keyframes fiche-designee{
  0%,100%{ box-shadow:var(--a-ombre); }
  50%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--a-ornement) 55%, transparent); }
}
.fiche .nom{ font-family:var(--a-nom-police); font-weight:400; font-size:1rem; line-height:1.26;
  color:var(--a-nom); text-transform:var(--a-nom-casse); letter-spacing:var(--a-nom-espace); }
.fiche .dates{ font-family:var(--donnee); font-size:.72rem; color:var(--a-date); margin-top:.12rem; }
.fiche .lieu{ font-size:.75rem; color:var(--a-lieu); font-style:italic; margin-top:.1rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fiche .role{ font-family:var(--texte); font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:var(--a-role); margin-bottom:.16rem; line-height:1.35; }
/* Un filet sous le nom : c'est lui qui fait la planche gravée. */
[data-style-arbre="parchemin"] .fiche .nom{ border-bottom:1px solid color-mix(in srgb, var(--a-carte-bord) 60%, transparent);
  padding-bottom:.16rem; margin-bottom:.16rem; }
[data-style-arbre="parchemin"] .fiche{ box-shadow:var(--a-ombre), inset 0 0 0 3px var(--a-carte),
  inset 0 0 0 4px color-mix(in srgb, var(--a-carte-bord) 45%, transparent); padding:.6rem .75rem; }

.bouton-centrer{
  position:absolute; top:4px; right:4px; width:20px; height:20px;
  border:1px solid var(--a-carte-bord); border-radius:50%; background:var(--a-carte);
  color:var(--a-date); cursor:pointer; line-height:1; font-size:11px; padding:0;
}
.bouton-centrer:hover{ background:var(--a-foyer); color:var(--a-nom); }

.commandes-scene{
  position:absolute; right:.8rem; bottom:.8rem; z-index:5;
  display:flex; gap:.3rem; background:var(--fond-barre);
  border:1px solid var(--trait); border-radius:var(--r); padding:.3rem; box-shadow:var(--ombre);
}
.commandes-scene button{
  font-family:var(--texte); font-size:.9rem; font-weight:600; line-height:1;
  width:32px; height:30px; cursor:pointer; color:var(--encre-douce);
  background:transparent; border:0; border-radius:2px;
}
.commandes-scene button:hover{ background:var(--fond-creux); color:var(--encre); }

.legende-scene{
  position:absolute; left:.8rem; bottom:.8rem; z-index:5;
  font-size:.74rem; color:var(--encre-pale);
  background:var(--fond-barre); border:1px solid var(--trait-fin);
  border-radius:var(--r); padding:.3rem .6rem;
}
.legende-scene kbd{
  font:inherit; font-size:.92em; background:var(--fond-creux);
  border:1px solid var(--trait); border-radius:2px; padding:0 .25em; color:var(--encre-douce);
}

/* ── La barre, posée sur la toile ── */
/* Elle FLOTTE sur la scène au lieu de lui prendre sa hauteur. Le coin regroupe la
   barre et le panneau de l'affiche, qui s'ouvre dessous sans connaître sa hauteur. */
.coin-arbre{
  position:absolute; top:.7rem; left:.7rem; z-index:8;
  max-width:calc(100% - 1.4rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
  pointer-events:none;                 /* la toile reste saisissable autour */
}
.coin-arbre > *{ pointer-events:auto; }

.barre-arbre{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  max-width:100%;
  padding:.35rem .45rem;
  /* Couleur de la palette, pas en dur : sinon barre claire et nom illisible sur bureau sombre. */
  background:var(--fond-barre);
  backdrop-filter:blur(8px);
  border:1px solid var(--trait); border-radius:.45rem;
  box-shadow:var(--ombre-levee);
}
.barre-arbre input[type=search], .barre-arbre select{
  width:auto; font-size:.86rem; padding:.3rem .45rem; background:var(--fond-champ);
}
.barre-arbre input[type=search]{ width:16rem; max-width:38vw; }
.barre-filet{ width:1px; align-self:stretch; background:var(--trait-fin); margin:.1rem 0; }

/* Le nom au centre : titre de la page et porte de sa fiche. */
.barre-foyer{
  display:flex; flex-direction:column; line-height:1.12;
  padding:.15rem .5rem .2rem; text-decoration:none; color:inherit;
  border-radius:var(--r); max-width:15rem;
}
.barre-foyer:hover{ background:var(--fond-creux); color:inherit; }
.barre-foyer .etiquette{ font-size:.58rem; letter-spacing:.14em; }
.barre-foyer > span:last-child{
  font-family:var(--nom); font-weight:400; font-size:1rem; color:var(--encre);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.barre-gen{ display:inline-flex; align-items:center; gap:.2rem; color:var(--encre-pale); font-size:.9rem; }
.barre-gen select{ width:3.2rem; text-align:center; }

/* ── Chercher quelqu'un ── */

.chercher-arbre{ position:relative; display:inline-block; }
.suggestions{
  position:absolute; z-index:30; top:100%; left:0; min-width:100%; width:22rem;
  max-width:min(22rem, 80vw); margin-top:.25rem;
  max-height:19rem; overflow:auto;
  background:var(--fond-leve); border:1px solid var(--trait);
  border-radius:var(--r); box-shadow:var(--ombre-levee);
}
.suggestions[hidden]{ display:none; }
.suggestions button{
  display:block; width:100%; text-align:left; border:0; border-bottom:1px solid var(--trait-fin);
  background:transparent; cursor:pointer; padding:.4rem .6rem; font:inherit; color:inherit;
}
.suggestions button:last-child{ border-bottom:0; }
.suggestions button:hover, .suggestions button.vise{ background:var(--fond-creux); }
.suggestions .s-nom{ font-family:var(--texte); font-weight:600; font-size:.9rem; }
.suggestions .s-detail{ font-size:.76rem; color:var(--encre-pale); }
.suggestions .s-rien{ padding:.5rem .6rem; color:var(--encre-pale); font-size:.85rem; }

/* ── L'affiche ── */

.panneau-affiche{
  width:min(24rem, calc(100vw - 2.4rem));
  padding:.9rem 1rem 1rem;
  background:var(--fond-leve); border:1px solid var(--trait);
  border-radius:.45rem; box-shadow:var(--ombre-levee);
  max-height:calc(100vh - 12rem); overflow:auto;
}
.panneau-affiche[hidden]{ display:none; }
.panneau-affiche h3{ margin:0 0 .3rem; font-size:1.05rem; }
.panneau-affiche label{ margin-bottom:.55rem; }
.panneau-affiche .rangee{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }
.panneau-affiche #affiche-etat:empty{ display:none; }
.panneau-affiche #affiche-etat{ margin-top:.6rem; }

/* La planche n'existe que sur papier : pas de place à l'écran, et PAS masquée par
   « hidden » — c'est la règle @media print qui la fait apparaître seule. */
.planche-impression{ display:none; }
.planche-impression svg{ width:100%; height:auto; }

@media print{
  body.impression-planche > *{ display:none !important; }
  body.impression-planche > .planche-impression{
    display:block !important; position:static; margin:0; padding:0;
  }
  body.impression-planche{ background:#fff; }
  body.impression-planche::after{ display:none; }
  @page{ margin:0; }
}

/* ── Fiche individu ── */

/* La fenêtre de naissance ET les âges qui la dessinent ; en rouge s'ils ne peuvent
   pas être tous exacts (retour au papier). */
.fenetre-naissance{
  margin:.45rem 0 0; padding:.4rem .65rem;
  background:var(--fond); border-left:3px solid var(--mousse);
  border-radius:var(--r); font-size:.88rem; line-height:1.45;
}
.fenetre-naissance.discorde{ border-left-color:var(--accent-lisible); background:rgba(125,43,35,.06); }
.fenetre-naissance .etiquette{ display:block; font-size:.6rem; margin-bottom:.1rem; }
.fenetre-naissance .observations{ display:block; margin-top:.25rem; }
.fenetre-naissance .observations span.ecarte{
  text-decoration:line-through; opacity:.62; border-style:dashed;
}
.fenetre-naissance .observations span{
  display:inline-block; font-size:.76rem; color:var(--encre-douce);
  background:var(--fond-leve); border:1px solid var(--trait-fin);
  border-radius:.8rem; padding:.02rem .5rem; margin:.1rem .25rem .1rem 0;
}

.entete-personne{ display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:.4rem; }
.portrait{
  width:104px; height:104px; flex:none; border-radius:50%;
  background:var(--fond-creux); border:1px solid var(--trait);
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--nom); font-size:2rem; font-weight:400; color:var(--laiton);
  box-shadow:0 0 0 5px var(--fond-leve), 0 0 0 6px var(--trait-fin);
}
.portrait img{ width:100%; height:100%; object-fit:cover; }

/* Chronologie : le fil de vie, avec ses stations. */
.chronologie{ position:relative; margin:.4rem 0 0; padding-left:1.6rem; list-style:none; }
.chronologie::before{ content:''; position:absolute; left:5px; top:.5rem; bottom:.5rem; width:1px; background:var(--trait); }
.chronologie li{ position:relative; padding:.32rem 0 .32rem .2rem; }
.chronologie li::before{
  content:''; position:absolute; left:-1.6rem; top:.95rem;
  width:9px; height:9px; border-radius:50%;
  background:var(--fond-leve); border:1.5px solid var(--laiton);
}
.chronologie li.majeur::before{ background:var(--accent); border-color:var(--accent-lisible); }
.chronologie .quand{ font-family:var(--donnee); font-weight:400; font-size:.82rem; color:var(--accent-lisible); }
.chronologie .quoi{ font-size:.96rem; }
/* L'heure sur la ligne de la date, en retrait de ton. */
.chronologie .heure-fait{ margin-left:.4rem; font-weight:400; font-size:.82rem;
  color:var(--encre-pale); font-variant-numeric:oldstyle-nums; }
.chronologie .ou{ font-size:.86rem; color:var(--encre-pale); font-style:italic; }

/* Tableau de faits, en registre */
.registre{ width:100%; border-collapse:collapse; font-size:.94rem; }
.registre th{
  width:34%; text-align:left; vertical-align:top; padding:.32rem .8rem .32rem 0;
  font-family:var(--texte); font-weight:600; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.11em; color:var(--encre-pale); white-space:nowrap;
}
.registre td{ padding:.32rem 0; border-bottom:1px solid var(--trait-fin); }
.registre tr:last-child td,.registre tr:last-child th{ border-bottom:0; }

/* Liste de proches */
.proches{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.proches a{
  display:flex; align-items:baseline; gap:.5rem; padding:.36rem .5rem;
  border-radius:var(--r); text-decoration:none; color:var(--encre);
  border:1px solid transparent;
}
.proches a:hover{ background:var(--fond); border-color:var(--trait-fin); }
.proches .nom{ font-family:var(--texte); font-weight:600; font-size:.95rem; }
.proches .dates{ font-family:var(--donnee); font-size:.74rem; color:var(--encre-pale); }

.puce{
  display:inline-block; font-family:var(--texte); font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.11em; padding:.12rem .45rem;
  border:1px solid var(--trait); border-radius:20px; color:var(--encre-pale); background:var(--fond);
}

/* ── Console d'administration ── */

/* ── La barre ne se replie jamais ──
   Trop étroite, elle DÉFILE plutôt que de passer sur deux lignes. */
.onglets{
  display:flex; align-items:stretch; gap:.15rem;
  border-bottom:1px solid var(--trait); margin-bottom:1rem;
}
/* Le défilement est sur les ONGLETS seuls : un conteneur qui défile rogne le menu
   des réglages, posé en absolu et qui dépasse par construction. */
.onglets-defile{
  display:flex; gap:.15rem; align-items:stretch; flex:1 1 auto;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
}
.onglets-defile::-webkit-scrollbar{ display:none; }
.onglets-defile > button{ flex:0 0 auto; white-space:nowrap; }

/* ── Le menu des réglages ──
   Un <details> : s'ouvre sans JavaScript, donc rien qui heurte la CSP. */
.onglets .reglages{ margin-left:auto; position:relative; flex:0 0 auto; }
.onglets .reglages > summary{
  list-style:none; cursor:pointer; user-select:none; white-space:nowrap;
  font-family:var(--texte); font-size:.85rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--encre-pale);
  border-bottom:2px solid transparent; padding:.45rem .9rem;
  transition:color .15s, border-color .15s;
}
.onglets .reglages > summary::-webkit-details-marker{ display:none; }
.onglets .reglages > summary::after{ content:' ▾'; font-size:.7em; }
.onglets .reglages[open] > summary::after{ content:' ▴'; }
.onglets .reglages > summary:hover{ color:var(--encre); }
.onglets .reglages > summary.actif{ color:var(--accent-lisible); border-bottom-color:var(--accent-lisible); }
.reglages-liste{
  position:absolute; right:0; top:100%; z-index:40; min-width:max-content;
  display:flex; flex-direction:column; align-items:stretch;
  background:var(--fond-leve); border:1px solid var(--trait);
  border-radius:var(--r); box-shadow:var(--ombre-levee); padding:.25rem;
}
/* En toutes lettres (destinations de menu). Spécificité supérieure à
   « .onglets button », qui vient plus bas. */
.onglets .reglages-liste button{
  text-align:left; text-transform:none; letter-spacing:0;
  font-size:.92rem; font-weight:500; white-space:nowrap; color:var(--encre-douce);
  border-bottom:0; border-radius:var(--r); padding:.42rem .6rem;
}
.onglets .reglages-liste button:hover{ background:var(--fond-creux); color:var(--encre); }
.onglets .reglages-liste button.actif{ background:var(--fond-creux); color:var(--accent-lisible); font-weight:600; }

/* ── Les explications, à un clic ──
   Repliées : rien n'est supprimé, et l'écran commence par ce qu'on vient y faire. */
.explication{ margin:.2rem 0 .6rem; }
.explication > summary{
  list-style:none; cursor:pointer; width:max-content;
  font-family:var(--texte); font-size:.78rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--encre-pale);
  border-bottom:1px dotted var(--trait); padding-bottom:.1rem;
}
.explication > summary::-webkit-details-marker{ display:none; }
.explication > summary::after{ content:' ▾'; font-size:.75em; }
.explication[open] > summary::after{ content:' ▴'; }
.explication > summary:hover{ color:var(--accent-lisible); border-bottom-color:var(--accent-lisible); }
.explication > *:not(summary){ margin-top:.6rem; }

/* Le compte de ce qui attend un avis, sur l'onglet « À trancher ». */
.pastille-compte{
  display:inline-grid; place-items:center; min-width:1.15rem; height:1.15rem;
  padding:0 .28rem; margin-left:.35rem; border-radius:.6rem;
  background:var(--accent); color:var(--sur-couleur);
  font-size:.68rem; font-weight:700; letter-spacing:0; vertical-align:middle;
}

/* Deux volets ouverts ensemble : un filet les sépare, sinon on croit lire une seule liste. */
.volet.actif + .volet.actif{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--trait);
}

.onglets button{
  font-family:var(--texte); font-size:.85rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--encre-pale); background:transparent;
  border:0; border-bottom:2px solid transparent; padding:.45rem .9rem; cursor:pointer;
  transition:color .15s, border-color .15s;
}
.onglets button:hover{ color:var(--encre); }
.onglets button.actif{ color:var(--accent-lisible); border-bottom-color:var(--accent-lisible); }
.volet{ display:none; }
.volet.actif{ display:block; animation:apparait .3s ease both; }
@keyframes apparait{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Les quatre temps de l'import, numérotés comme un protocole d'archivage. */
.etape{ position:relative; padding-left:2.9rem; margin-bottom:1.1rem; }
.etape::before{
  counter-increment:etape; content:counter(etape);
  position:absolute; left:0; top:-.1rem; width:2rem; height:2rem;
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--texte); font-weight:700; font-size:.95rem;
  background:var(--fond-creux); color:var(--encre-douce); border:1px solid var(--trait);
}
.etape.faite::before{ background:var(--accent); color:var(--sur-couleur); border-color:var(--accent-lisible); content:'✓'; }
.etape.active::before{ background:var(--laiton); color:var(--sur-couleur); border-color:var(--laiton); }
.etapes{ counter-reset:etape; }

/* ── Un seul temps à l'écran, et un fil pour se situer ──
   Les quatre temps de l'import sont SUCCESSIFS : un seul s'affiche. */
.etapes .etape{ display:none; }
.etapes .etape.active{ display:block; animation:apparait .25s ease both; }
.etapes .etape.active::before{ display:none; }   /* le fil porte déjà le numéro */
.etapes .etape.active{ padding-left:0; }

/* La barre d'action d'un temps de travail, collée au bas de la fenêtre. */
.barre-action{
  position:sticky; bottom:0; z-index:20;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin:1.2rem -.4rem 0; padding:.7rem .9rem;
  /* Franchement opaque : à 92 %, le texte passait dessous. */
  background:var(--fond-leve);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--trait); border-radius:var(--r);
  box-shadow:0 -4px 14px -10px rgba(33,29,24,.45);
}
/* PAS DE PLEINE LARGEUR (pseudo-élément à 100vw) : cela élargissait le défilement
   de toute la page. Le fond opaque suffit. */

/* ── Le sélecteur d'apparence ──
   Un point à demi rempli comme une lune (vide, plein, moitié en auto) ; le mot à côté
   lève l'ambiguïté. */
.bascule-theme{
  /* Un lien du rail comme les autres (.lien-rail) ; seul le propre est ici. */
  text-transform:none; font-size:.62rem;
}
.bascule-theme .oeil-theme{ margin-bottom:.02rem; }
.bascule-theme:hover{ color:var(--encre); background:var(--fond-creux); }
.oeil-theme{
  width:.85rem; height:.85rem; border-radius:50%; flex:none;
  border:1.5px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.bascule-theme[data-etat="clair"] .oeil-theme{ background:transparent; }
.bascule-theme[data-etat="sombre"] .oeil-theme{ background:currentColor; }
@media (max-width:760px){ .bascule-theme #mot-theme{ display:none; } }

/* ── Relire un nom sur l'acte ──
   Un seul nom, l'image en grand au-dessus du champ : l'image est le sujet. */
.relecture-nom{ max-width:44rem; }

/* ── Cette fenêtre ne doit pas défiler ──
   Geste répété à la chaîne : champ, boutons et compteur restent en place ; seule
   l'image cède du terrain quand l'écran est petit. */
#modale-contenu.fiche-nom{
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
#modale-contenu.fiche-nom .relecture-nom{
  display:flex; flex-direction:column; min-height:0; max-height:100%; width:100%;
}
/* Seule l'image est élastique : c'est elle qui absorbe la place manquante. */
#modale-contenu.fiche-nom .vue-acte{
  /* min-height BAS à dessein : mieux vaut une image réduite qu'une fiche rognée. */
  flex:1 1 auto; min-height:2.2rem; overflow:hidden; padding:.35rem;
}
#modale-contenu.fiche-nom .vue-acte img{ max-height:100%; }
/* Tout le reste garde sa taille : c'est ce qui rend le geste répétable. */
#modale-contenu.fiche-nom .compteur-noms,
#modale-contenu.fiche-nom .aveu-reperage,
#modale-contenu.fiche-nom label,
#modale-contenu.fiche-nom p,
#modale-contenu.fiche-nom .rangee-boutons{ flex:0 0 auto; }
/* Un bouton qui se lit comme un lien : geste rare, il ne pèse pas autant que « valider ». */
.lien-bouton{
  background:none; border:0; padding:0; margin-left:.5rem; cursor:pointer;
  font:inherit; font-size:.82rem; color:var(--accent-lisible);
  text-decoration:underline; text-underline-offset:2px;
}
.lien-bouton:hover{ color:var(--encre); }
/* La boîte cesse de défiler aussi, sinon son « overflow:auto » rétablirait la barre. */
#modale-boite.sans-defilement{ overflow:hidden; display:flex; flex-direction:column; }
#modale-boite.sans-defilement > #modale-contenu{ min-height:0; flex:1 1 auto; }
.compteur-noms{ margin:0 0 .7rem; font-size:.9rem; }
/* Le métier : un repère pour retrouver la personne quand le cadrage tombe à côté. */
.metier-nom{
  display:inline-block; margin-left:.35rem; padding:.05rem .4rem;
  border:1px solid var(--trait); border-radius:999px;
  font-size:.76rem; font-style:italic; color:var(--encre-pale);
  background:var(--fond-note); vertical-align:.05em;
}
.vue-acte{
  background:var(--fond-creux); border:1px solid var(--trait); border-radius:var(--r);
  padding:.5rem; margin-bottom:.9rem; text-align:center; min-height:5rem;
  display:grid; place-items:center;
}
/* L'IMAGE EMPLIT LA BOÎTE : le cadre découpé ne fait que quelques centaines de pixels ;
   un peu de flou vaut mieux qu'un nom trop petit pour être lu (la loupe sur le registre). */
.vue-acte img{
  width:100%; max-width:38rem; max-height:16rem; object-fit:contain;
  border-radius:2px; box-shadow:var(--ombre);
}
/* Ce que le site sait de son cadre : discret si tout va bien, net s'il faut se méfier. */
.aveu-reperage{ margin:-.5rem 0 .9rem; font-size:.8rem; color:var(--encre-pale); }
.aveu-reperage.sur{ color:var(--mousse); }
.aveu-reperage.doute{
  color:var(--sur-rouge); background:var(--teinte-rouge);
  border-left:3px solid var(--accent-lisible); border-radius:var(--r);
  padding:.4rem .6rem; margin:-.4rem 0 .9rem;
}

.relecture-nom input#nom-relu{
  font-family:var(--texte); font-size:1.35rem; font-weight:600;
  letter-spacing:.01em; padding:.5rem .7rem;
}

/* Un intertitre discret à l'intérieur d'une colonne : il sépare sans peser. */
.titre-groupe{
  font-family:var(--texte); font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--encre-pale);
  margin:1.4rem 0 .6rem; padding-bottom:.3rem; border-bottom:1px solid var(--trait);
}

.fil-etapes{
  display:flex; flex-wrap:wrap; align-items:center; gap:.2rem;
  counter-reset:fil; list-style:none; margin:0 0 1.3rem; padding:0;
}
.fil-etapes li{ display:flex; align-items:center; gap:.2rem; }
.fil-etapes li + li::before{
  content:''; width:1.4rem; height:1px; background:var(--trait); flex:none;
}
.fil-etapes button{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--texte); font-size:.82rem; font-weight:600; letter-spacing:.03em;
  color:var(--encre-pale); background:transparent; border:0; cursor:pointer;
  padding:.3rem .5rem; border-radius:var(--r); transition:color .15s, background .15s;
}
.fil-etapes button::before{
  counter-increment:fil; content:counter(fil);
  width:1.5rem; height:1.5rem; flex:none;
  display:grid; place-items:center; border-radius:50%;
  font-size:.75rem; font-weight:700;
  background:var(--fond-creux); color:var(--encre-pale); border:1px solid var(--trait);
  transition:background .15s, color .15s, border-color .15s;
}
.fil-etapes button:disabled{ cursor:default; opacity:.55; }
.fil-etapes button:not(:disabled):hover{ color:var(--encre); background:var(--fond-creux); }
.fil-etapes button.faite{ color:var(--encre-douce); }
.fil-etapes button.faite::before{
  content:'✓'; background:var(--accent); color:var(--sur-couleur); border-color:var(--accent-lisible);
}
.fil-etapes button.actif{ color:var(--accent-lisible); }
.fil-etapes button.actif::before{
  background:var(--laiton); color:var(--sur-couleur); border-color:var(--laiton);
}
@media (max-width:640px){
  .fil-etapes li + li::before{ width:.6rem; }
  .fil-etapes button{ font-size:.74rem; padding:.25rem .3rem; }
}
.etape h3{ margin-bottom:.35rem; }
.etape .aide{ font-size:.88rem; color:var(--encre-pale); margin:-.2rem 0 .7rem; }

.depot{
  border:1.5px dashed var(--trait); border-radius:var(--r);
  padding:1.2rem 1.2rem; text-align:center; background:var(--fond-champ);
  cursor:pointer; transition:border-color .15s, background .15s;
}
.depot:hover,.depot.survol{ border-color:var(--laiton); background:var(--teinte-ambre); }
.depot .grand{ font-family:var(--nom); font-size:1.05rem; font-weight:400; }
.depot .petit{ font-size:.84rem; color:var(--encre-pale); margin-top:.25rem; }

.apercu-media{ display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.apercu-media img{ max-width:230px; max-height:300px; border:1px solid var(--trait); border-radius:var(--r); box-shadow:var(--ombre); background:var(--fond-champ); }

/* Carte d'une personne proposée par l'IA, à valider */
.proposition{
  border:1px solid var(--trait); border-left:3px solid var(--laiton);
  border-radius:var(--r); background:var(--fond-leve); padding:.7rem .9rem; margin-bottom:.55rem;
}
.proposition.ignoree{ opacity:.5; border-left-color:var(--encre-pale); }
.proposition.fusion{ border-left-color:var(--mousse); }
/* La carte visée par un renvoi respire une seconde, que l'œil la retrouve après le défilement. */
.proposition.vise{ animation:vise 1.6s ease-out; }
@keyframes vise{
  0%,55%{ box-shadow:0 0 0 3px var(--mousse); }
  100%{ box-shadow:0 0 0 3px transparent; }
}
.proposition .tete{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.5rem; }
.proposition .tete .nom{ font-family:var(--nom); font-weight:400; font-size:1.02rem; }
.proposition .tete .ref{ font-family:ui-monospace,monospace; font-size:.72rem; color:var(--encre-pale);
  border:1px solid var(--trait); border-radius:2px; padding:0 .3rem; }
.proposition .champs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.5rem .9rem; }
.proposition .champs label{ margin:0; }
.proposition .champs input,.proposition .champs select{ font-size:.9rem; padding:.32rem .5rem; }
.proposition .decision{ display:flex; gap:.4rem; align-items:center; margin-left:auto; }
.proposition .decision select{ width:auto; font-size:.82rem; padding:.28rem .45rem; }

.jauge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; color:var(--encre-pale); }
.jauge i{ display:block; width:34px; height:4px; background:var(--fond-creux); border-radius:2px; overflow:hidden; }
.jauge i b{ display:block; height:100%; background:var(--laiton); }

.pile-evenements{ display:grid; gap:.4rem; margin-top:.5rem; }
.ligne-evenement{ display:grid; grid-template-columns:118px 78px 78px 1fr 1fr auto; gap:.4rem; align-items:center; }
.ligne-evenement input,.ligne-evenement select{ font-size:.88rem; padding:.3rem .45rem; }
/* ── La note prend toute la largeur, sous les autres cases ──
   Elle porte des phrases entières : une colonne de grille la rendrait illisible. */
.ligne-evenement .note-evenement{ grid-column:1 / -1; }
@media (max-width:700px){ .ligne-evenement{ grid-template-columns:1fr 1fr; } }

.liste-personnes{ max-height:60vh; overflow:auto; border:1px solid var(--trait-fin); border-radius:var(--r); }
.liste-personnes button{
  display:block; width:100%; text-align:left; background:transparent; border:0;
  border-bottom:1px solid var(--trait-fin); padding:.5rem .7rem; cursor:pointer;
  font-family:var(--texte); font-size:.93rem; color:var(--encre);
}
.liste-personnes button:hover{ background:var(--fond); }
.liste-personnes button.actif{ background:var(--fond-creux); box-shadow:inset 3px 0 0 var(--accent-lisible); }
.liste-personnes .dates{ font-size:.78rem; color:var(--encre-pale); }

.zone-prompt{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.82rem; line-height:1.55; min-height:200px; background:var(--fond-champ); }

/* ── Sablier discret pendant les appels à l'IA ──
   SEULEMENT sur le message d'état : « attente » est aussi le statut d'une pièce de la
   pile, dont la ligne est une GRILLE ; le pseudo-élément y devenait une case et
   décalait toute la ligne. */
.attente:not(.doc):not(.compteur){
  display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem;
  color:var(--encre-pale); font-style:italic;
}
.attente:not(.doc):not(.compteur)::before{
  content:''; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--trait); border-top-color:var(--accent-lisible);
  animation:tourne .7s linear infinite;
}
@keyframes tourne{ to{ transform:rotate(360deg); } }

/* ── Connexion ── */

.portail{ min-height:100vh; display:grid; place-items:center; padding:2rem 1rem; }
.portail .carte{
  width:min(430px,100%); background:var(--fond-leve);
  border:1px solid var(--trait); border-radius:var(--r);
  box-shadow:var(--ombre-levee); padding:2.4rem 2.1rem 2rem; text-align:center;
  animation:monte .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes monte{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.portail .sceau{
  width:58px; height:58px; margin:0 auto 1.1rem; border-radius:50%;
  display:grid; place-items:center; background:var(--accent); color:#f6e9d8;
  font-family:var(--nom); font-size:1.5rem; font-weight:400;
  box-shadow:0 0 0 4px var(--fond-leve), 0 0 0 5px var(--trait), var(--ombre);
}
.portail h1{ font-size:1.8rem; margin-bottom:.15rem; }
.portail .sous{ color:var(--encre-pale); font-style:italic; font-size:.95rem; margin-bottom:1.6rem; }
.portail form{ text-align:left; }
.portail .bouton{ width:100%; justify-content:center; margin-top:.4rem; }
.portail footer{ margin-top:1.6rem; font-size:.78rem; color:var(--encre-pale); }

/* ── Divers ── */

.vide{ text-align:center; padding:3rem 1rem; color:var(--encre-pale); }
.vide .grand{ font-family:var(--nom); font-size:1.25rem; color:var(--encre-douce); margin-bottom:.4rem; }
.discret{ color:var(--encre-pale); font-size:.88rem; }
.serre{ margin:0; }
hr{ border:0; border-top:1px solid var(--trait); margin:1.1rem 0; }

.filet-double{ border-top:3px double var(--trait); margin:1.3rem 0; }

@media (max-width:640px){
  .scene{ height:70vh; }
  /* Sur téléphone, on cède le nom au champ de recherche et aux réglages. */
  .coin-arbre{ top:.4rem; left:.4rem; max-width:calc(100% - .8rem); }
  .barre-arbre .barre-foyer, .barre-arbre .barre-filet{ display:none; }
  .barre-arbre input[type=search]{ width:11rem; max-width:52vw; }
  .legende-scene{ display:none; }
}

@media print{
  .bandeau,.commandes-scene,.legende-scene,.rangee-boutons{ display:none !important; }
  body{ background:#fff; }
  body::after{ display:none; }
  .bloc{ box-shadow:none; }
}

/* ── Mode de lecture : dire ce qui va être appelé ── */

.note-mode{
  margin:-.5rem 0 .5rem; padding:.55rem .75rem;
  background:var(--fond); border:1px solid var(--trait-fin);
  border-left:3px solid var(--laiton); border-radius:var(--r);
  font-size:.85rem; line-height:1.45; color:var(--encre-douce);
}
.note-mode .mono{ color:var(--accent-lisible); }
.note-mode em{ color:var(--encre-pale); }

/* ── Mots lus avec hésitation ── */

.chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.chip{
  display:inline-flex; align-items:baseline; gap:.3rem;
  font-family:var(--texte); font-size:.85rem; color:var(--encre);
  background:var(--fond-champ); border:1px solid var(--trait); border-radius:20px;
  padding:.15rem .6rem; cursor:pointer; transition:border-color .15s, background .15s;
}
.chip:hover{ border-color:var(--accent-lisible); background:var(--fond-champ); }
.chip i{ font-style:normal; font-size:.7rem; color:var(--accent-lisible); font-variant-numeric:tabular-nums; }

/* ── La fournée ── */

.compteurs{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.9rem 0 .5rem; }
.compteur{
  font-family:var(--texte); font-size:.72rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; padding:.2rem .6rem; border-radius:20px;
  border:1px solid var(--trait); background:var(--fond); color:var(--encre-douce);
}
.compteur.attente{ border-color:var(--trait); }
.compteur.fournee{ border-color:var(--laiton); color:var(--laiton); }
.compteur.lu     { border-color:var(--ardoise); color:var(--ardoise); }
.compteur.pret   { border-color:var(--mousse); color:var(--mousse); background:var(--teinte-vert); }
.compteur.applique{ background:var(--mousse); border-color:var(--mousse); color:#f4f7f2; }
.compteur.erreur { border-color:var(--accent-lisible); color:var(--accent-lisible); background:var(--teinte-rouge); }
.compteur.total  { margin-left:auto; background:transparent; border-style:dashed; }

.pile-documents{ border:1px solid var(--trait-fin); border-radius:var(--r); overflow:hidden; }
.pile-documents:empty{ border:0; }

.doc{
  display:grid;
  grid-template-columns:minmax(120px,1.4fr) 130px 1fr auto;
  gap:.5rem .8rem; align-items:center;
  padding:.5rem .75rem; border-bottom:1px solid var(--trait-fin);
  border-left:3px solid transparent; background:var(--fond-leve);
  font-size:.9rem;
}
.doc:last-child{ border-bottom:0; }
.doc.attente { border-left-color:var(--trait); }
.doc.fournee { border-left-color:var(--laiton); background:var(--fond-note); }
.doc.lu      { border-left-color:var(--ardoise); }
.doc.pret    { border-left-color:var(--mousse); background:var(--teinte-vert); }
.doc.applique{ border-left-color:var(--mousse); opacity:.62; }
.doc.erreur  { border-left-color:var(--accent-lisible); background:var(--teinte-rouge); }

/* La case à cocher à côté du nom ; c'est la boîte du nom qui se tronque. */
.doc-nom{ display:flex; align-items:center; gap:.4rem; min-width:0;
  font-family:var(--donnee); font-size:.86rem; }
.doc-titre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-etat{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--encre-pale);
  font-family:var(--texte); font-weight:600; }
.doc-info{ font-size:.82rem; color:var(--encre-pale); }
.doc-erreur{ grid-column:1/-1; font-size:.82rem; color:var(--accent-lisible); }
.doc-actions{ display:flex; gap:.3rem; justify-content:flex-end; }

@media (max-width:760px){
  .doc{ grid-template-columns:1fr auto; }
  .doc-info{ grid-column:1/-1; }
  .doc-actions{ grid-column:1/-1; justify-content:flex-start; }
}

/* ── Mention de source (obligation des archives) ── */

.mention-source{
  display:inline-block; margin-top:.15rem;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.76rem; letter-spacing:.01em; color:var(--encre-douce);
  background:var(--fond); border:1px solid var(--trait-fin);
  border-left:2px solid var(--laiton); border-radius:2px; padding:.1rem .45rem;
}

/* Titre, date, dépôt, cote, adresse, voir, retirer. Date étroite, en chasse fixe. */
.ligne-source{ display:grid; grid-template-columns:1.2fr .6fr 1fr .8fr 1fr auto auto; gap:.4rem; align-items:center; }
.ligne-source input{ font-size:.88rem; padding:.3rem .45rem; }
@media (max-width:700px){ .ligne-source{ grid-template-columns:1fr 1fr; } }

/* ── Communicabilité ── */

.cadre-communicabilite{
  margin:.2rem 0 1rem; padding:.7rem .85rem;
  background:var(--fond); border:1px solid var(--trait-fin);
  border-left:3px solid var(--mousse); border-radius:var(--r);
}
.cadre-communicabilite .mono{ font-size:.76rem; color:var(--encre-douce); }

/* ── Ce que le navigateur dessine à notre place ── */
/* Tout ce qui suit remplace les couleurs du système (cases, défilement, sélection,
   flèches) par celles du site. Rien n'y change ce que le site FAIT. */

/* color-scheme décide des menus, barres et champs dessinés par le système : il est
   réglé plus haut, avec la palette, pour dire toujours la même chose. */

/* Le texte sélectionné dans la couleur du site, et non dans celle du système. */
::selection{ background:rgba(125,43,35,.22); color:var(--encre); }

/* Le curseur de saisie, à l'encre. */
input,textarea,[contenteditable]{ caret-color:var(--accent-lisible); }

/* Le liseré de mise au point, PARTOUT : sinon le halo bleu du navigateur au clavier. */
a:focus-visible,button:focus-visible,summary:focus-visible,
[role=button]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-lisible); outline-offset:2px; border-radius:2px;
}

/* La flèche des menus déroulants, dessinée ici. */
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a7f72' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:.7rem;
  padding-right:1.9rem;
}
select[multiple],select[size]{ appearance:auto; background-image:none; padding-right:.65rem; }

/* Le champ de fichier, habillé comme les boutons du site. */
input[type=file]{
  width:100%; font-family:var(--texte); font-size:.9rem; color:var(--encre-douce);
  background:var(--fond-champ); border:1px dashed var(--trait); border-radius:var(--r);
  padding:.55rem .65rem; cursor:pointer;
}
input[type=file]:hover{ border-color:var(--encre-pale); }
input[type=file]::file-selector-button{
  font-family:var(--texte); font-size:.74rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; cursor:pointer; margin-right:.7rem;
  padding:.32rem .7rem; border-radius:var(--r);
  background:transparent; color:var(--encre); border:1px solid var(--trait);
}
input[type=file]::file-selector-button:hover{ background:var(--fond-creux); }

/* Barres de défilement dans le ton ; largeur du système gardée (trop fine, elle se rate). */
*{ scrollbar-color:var(--encre-pale) var(--fond-creux); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--fond-creux); }
::-webkit-scrollbar-thumb{ background:var(--pouce-barre); border-radius:6px; border:2px solid var(--fond-creux); }
::-webkit-scrollbar-thumb:hover{ background:var(--encre-pale); }

/* Qui demande moins de mouvement en reçoit moins (mal des transports). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ── Les cases et boutons ronds à la couleur du site (accent-color) ── */
input[type=checkbox],input[type=radio],input[type=range],progress{ accent-color:var(--accent); }
label.case{ display:flex; gap:.5rem; align-items:flex-start; margin:0; font-size:.88rem; }
label.case input{ width:auto; margin-top:.3rem; flex:none; }
label.case em{ display:block; color:var(--encre-pale); font-size:.82rem; font-style:normal; margin-top:.12rem; }

.retraits{ margin:.4rem 0 0; padding-left:1.1rem; font-size:.88rem; }
.retraits li{ margin-bottom:.15rem; }
.message.filtre{ background:var(--teinte-vert); border-color:var(--mousse); color:var(--sur-vert); }

.ligne-complement{ display:grid; grid-template-columns:minmax(140px,1fr) 2fr auto; gap:.4rem; align-items:center; }
/* Une union par ligne : le conjoint, la date, le lieu, le type, la fin. */
.ligne-union{
  display:grid; grid-template-columns:minmax(150px,1.1fr) 1fr 1.1fr minmax(7.5rem,auto) 1fr auto;
  gap:.4rem; align-items:center; margin-bottom:.4rem;
}
.ligne-union input, .ligne-union select{ font-size:.88rem; padding:.3rem .45rem; }
.conjoint-union{ font-size:.9rem; }
@media (max-width:900px){ .ligne-union{ grid-template-columns:1fr 1fr; } }

/* En colonne étroite (atelier des membres), six colonnes débordent : on passe en flux. */
.ligne-union.serree{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.ligne-union.serree > *{ flex:1 1 8rem; min-width:0; }
.ligne-union.serree .conjoint-union{ flex:1 1 100%; }
.ligne-union.serree button{ flex:0 0 auto; }
.ligne-complement input{ font-size:.88rem; padding:.3rem .45rem; }
/* La pastille de confiance d'une ligne de relevé, entre la valeur et le × */
.ligne-complement{ grid-template-columns:minmax(140px,1fr) 2fr auto auto; }
.ligne-complement .champ-sur{ display:inline-flex; align-items:center; gap:.15rem; }
@media (max-width:700px){ .ligne-complement{ grid-template-columns:1fr auto; } }

/* Les réglages de compression : repliés quand tout va bien, dépliés sinon. */
.reglage-compression{
  border:1px solid var(--trait-fin); border-radius:var(--r); padding:.5rem .7rem;
  background:var(--fond-leve); margin-top:.6rem;
}
.reglage-compression > summary{
  cursor:pointer; font-size:.86rem; color:var(--encre-douce); list-style:revert;
}
.reglage-compression label{ margin-bottom:.3rem; }
.reglage-compression em{ font-size:.78rem; color:var(--encre-pale); font-style:normal; }

/* ── La médiathèque ──
   Le nom de rangement reste visible en petit : c'est lui qu'on cite aux archives. */

.mediatheque{ display:grid; gap:.5rem; margin-top:.8rem; }
.media-carte{
  display:grid; grid-template-columns:72px 1fr auto; gap:.7rem; align-items:center;
  border:1px solid var(--trait-fin); border-radius:var(--r); padding:.45rem;
  background:var(--fond-leve);
}
.media-carte:hover{ border-color:var(--trait); background:var(--fond-champ); }
.media-vue{
  display:flex; align-items:center; justify-content:center;
  width:72px; height:56px; overflow:hidden; border:1px solid var(--trait-fin);
  border-radius:2px; background:var(--fond-champ); text-decoration:none;
}
.media-vue img{ width:100%; height:100%; object-fit:cover; }
.media-type{ font-size:.7rem; letter-spacing:.08em; color:var(--encre-pale); }
.media-corps{ min-width:0; }
input.media-titre{
  font-family:var(--texte); font-size:.98rem; padding:.2rem .35rem; margin:0 0 .15rem;
  border:1px solid transparent; background:transparent; width:100%;
}
input.media-titre:hover{ border-color:var(--trait-fin); background:var(--fond-champ); }
input.media-titre:focus{ border-color:var(--laiton); background:var(--fond-champ); }
.media-infos{ font-size:.78rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.media-infos .mono{ font-size:.72rem; color:var(--encre-pale); }
.media-usages{ font-size:.83rem; margin-top:.15rem; }
.media-usages .orphelin{ font-style:italic; }
.media-actions{ display:flex; gap:.3rem; align-items:center; }
@media (max-width:640px){
  .media-carte{ grid-template-columns:56px 1fr; }
  .media-actions{ grid-column:2; justify-content:flex-end; }
}

/* ── Arbitrer une fusion : deux valeurs, on en garde une ──
   Le seul écran où l'on écrase une donnée : on voit ce qu'on abandonne, et d'où. */

/* Style auparavant en attribut (inannulable) : un prompt se lit en « pre », un arbitrage non. */
#modale-contenu{ white-space:pre-wrap; margin-top:.8rem; }
#modale-contenu.riche{ white-space:normal; font-family:var(--texte); font-size:1rem; }
#modale-contenu.riche p{ margin:0 0 .8rem; }
/* Boutons en ligne dans la relecture d'un mot. Classe propre : .serre sert ailleurs à
   des paragraphes qu'un display:flex disloquerait. */
.rang-mot{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:0 0 .8rem; }
#modale-contenu.riche label{ margin-bottom:.8rem; }
#modale-contenu.riche .note-champ:empty{ display:none; }

table.arbitrage{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.arbitrage th, table.arbitrage td{
  padding:.35rem .5rem; text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--trait-fin);
}
table.arbitrage tr:first-child th{
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--encre-pale); font-weight:normal; line-height:1.3;
}
table.arbitrage tr:last-child th, table.arbitrage tr:last-child td{ border-bottom:0; }
table.arbitrage th:first-child{
  width:9rem; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--encre-pale); font-weight:normal;
}
table.arbitrage td:last-child{ width:12rem; }
table.arbitrage td span{ overflow-wrap:anywhere; }

select.origine-nom{ font-size:.76rem; padding:.12rem .25rem; margin:.15rem 0 0; width:100%; }

/* ── La transcription, mot à mot ──
   Chaque mot porte son score au survol ; les hésitants se voient et se corrigent d'un clic. */

.vue-mots{
  border:1px solid var(--trait); border-radius:var(--r); background:var(--fond-leve);
  padding:.8rem 1rem; max-height:26rem; overflow:auto; line-height:2;
  font-family:var(--texte); font-size:.98rem;
}
.vue-mots .mot{
  border-radius:2px; padding:0 .1rem; cursor:pointer;
  border-bottom:1px solid transparent;
}
.vue-mots .mot:hover{ background:var(--fond-creux); border-bottom-color:var(--encre-pale); }
.vue-mots .mot.doute{ background:var(--fond-note); border-bottom:1px dashed var(--laiton); }
.vue-mots .mot.doute-fort{ background:var(--teinte-rouge); border-bottom:1px solid var(--accent-clair); }
.vue-mots .mot i{
  font-style:normal; font-size:.62rem; vertical-align:super; margin-left:.1rem;
  color:var(--encre-pale); font-variant-numeric:tabular-nums;
}
.vue-mots .mot.doute-fort i{ color:var(--accent-lisible); }

/* ── Voir le mot sur le document, sans quitter l'écran ──
   Une loupe contre le champ douteux ; un clic déplie le morceau de papier lu. */

.loupe{
  border:1px solid var(--trait); background:var(--fond-leve); color:var(--encre-pale);
  border-radius:50%; width:19px; height:19px; line-height:1; font-size:12px; padding:0;
  cursor:pointer; margin-left:.2rem; flex:0 0 auto;
}
.loupe:hover{ color:var(--accent-lisible); border-color:var(--accent-clair); background:var(--fond-champ); }
.loupe.ouverte{ color:var(--sur-couleur); background:var(--accent); border-color:var(--accent-lisible); }
/* La loupe d'un champ sûr : présente, discrète, réveillée au survol de la ligne. */
.loupe.discrete{ opacity:.28; }
.champs label:hover .loupe.discrete, .loupe.discrete:hover, .loupe.discrete.ouverte{ opacity:1; }

.zone-mot{
  grid-column:1/-1; margin:.35rem 0 .6rem; padding:.4rem;
  background:var(--fond-creux); border:1px solid var(--trait); border-radius:var(--r);
}
.zone-mot img{
  display:block; width:100%; max-width:640px; border:1px solid var(--trait);
  background:var(--fond-champ); border-radius:2px;
}
.zone-mot.page-entiere img{ max-width:100%; max-height:60vh; object-fit:contain; }
.zone-mot.bande img{ max-width:100%; }

/* ── Le mot douteux montre son écriture, dès la pastille ──
   Un pourcentage ne tranche rien : la pastille porte la vignette, un clic l'agrandit. */

.vignette-mot{
  display:block; height:1.35rem; width:auto; max-width:9rem;
  border:1px solid var(--trait); border-radius:2px; background:var(--fond-champ);
  align-self:center; object-fit:cover; object-position:center;
}
.chip:hover .vignette-mot{ border-color:var(--accent-clair); }

.doc-mot{
  margin:.5rem 0 .6rem; padding:.4rem; text-align:center;
  background:var(--fond-creux); border:1px solid var(--trait); border-radius:var(--r);
}
.doc-mot img{
  display:block; margin:0 auto; max-width:100%;
  border:1px solid var(--trait); background:var(--fond-champ); border-radius:2px;
}
.doc-mot.precise img{ width:100%; max-width:620px; }
.doc-mot.bande img{ width:100%; }
.doc-mot.bloc img{ width:100%; max-width:820px; }
.doc-mot.page-entiere img{ max-height:52vh; object-fit:contain; }
.zone-pied{
  display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:.4rem;
  font-size:.85rem;
}
.zone-pied .discret{ flex:1; min-width:12ch; }

/* Le pourcentage annoncé par l'IA, posé contre le champ concerné. */
.note-champ{
  font-size:.72rem; letter-spacing:.02em; color:var(--accent-lisible); background:var(--teinte-rouge);
  border:1px solid #ecd4cf; border-radius:3px; padding:0 .25rem; margin-left:.25rem;
  font-variant-numeric:tabular-nums;
}

/* ── Progression d'un envoi ──
   Trente secondes de sablier passent pour une panne, trente de jauge pour un travail. */

.progres-envoi{ display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.progres-envoi .rail{
  display:inline-block; width:min(220px,40vw); height:7px; border-radius:4px;
  background:var(--trait-fin); overflow:hidden; vertical-align:middle;
}
.progres-envoi .jauge{
  display:block; height:100%; background:var(--laiton);
  transition:width .18s linear;
}

/* ── Autres formes du nom (francisations) ── */

.ligne-variante{ display:grid; grid-template-columns:1fr 1fr 1fr 1.2fr auto; gap:.4rem; align-items:center; }
.ligne-variante input{ font-size:.88rem; padding:.3rem .45rem; }
@media (max-width:700px){ .ligne-variante{ grid-template-columns:1fr 1fr auto; } }

/* Sur la fiche publique : la forme secondaire se lit comme une citation. */
.variante-nom{ font-style:italic; }
.variante-nom + .variante-nom::before{ content:' · '; font-style:normal; color:var(--encre-pale); }

/* ── Personnes déduites d'un acte ── */

.puce.role-doc{ color:var(--laiton); border-color:var(--laiton); background:var(--fond-note); }
/* Le conjoint de l'union, en tête : un libellé long casserait la grille des champs. */
.puce.conjoint-doc{ color:var(--encre-pale); border-color:var(--trait); background:var(--fond-champ); }
.puce.sans-date{ color:var(--encre-pale); border-style:dashed; }

.rapprochement{
  margin:.15rem 0 .55rem; padding:.35rem .6rem; font-size:.86rem;
  color:var(--encre-douce); background:var(--fond);
  border-left:2px solid var(--trait); border-radius:2px;
}
.rapprochement.incertain{ border-left-color:var(--accent-lisible); }
.rapprochement em{ color:var(--encre-pale); font-size:.82rem; }

/* ── Degrés de sûreté ── */

.surete{
  display:inline-grid; place-items:center; width:19px; height:19px; flex:none;
  font-family:var(--texte); font-size:.72rem; font-weight:700; line-height:1;
  border-radius:50%; cursor:pointer; padding:0; vertical-align:middle;
  border:1px solid var(--trait); background:var(--fond); color:var(--encre-pale);
  transition:transform .12s, background .15s, border-color .15s, color .15s;
}
.surete:hover{ transform:scale(1.15); border-color:var(--encre-pale); }
.surete.confirme{ background:var(--teinte-vert); border-color:var(--mousse); color:var(--mousse); }
.surete.doute{ background:var(--teinte-rouge); border-color:var(--accent-lisible); color:var(--accent-lisible); }
.surete.neutre{ opacity:.5; }
.surete.neutre:hover{ opacity:1; }
.surete[disabled]{ cursor:default; }
.surete[disabled]:hover{ transform:none; }

/* Sur la fiche : la pastille suit la valeur, discrètement. */
.registre td .surete{ margin-left:.4rem; }
.registre tr.douteux td{ background:rgba(125,43,35,.045); }
.registre tr.verifie th{ color:var(--mousse); }

/* Dans les formulaires : la pastille se pose à droite de l'étiquette. */
.champ-sur{ display:flex; align-items:center; gap:.35rem; margin-bottom:.28rem; }
.champ-sur .etiquette{ margin:0; }

.bandeau-surete{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.84rem; color:var(--encre-pale); margin:.5rem 0 0;
}
.bandeau-surete b{ font-weight:600; color:var(--encre-douce); }
.bandeau-surete .compte-confirme{ color:var(--mousse); }
.bandeau-surete .compte-doute{ color:var(--accent-lisible); }
.puce.doute-champ{ color:var(--accent-lisible); border-color:var(--accent-lisible); background:var(--teinte-rouge); }

/* ── Rapprochements entre familles ── */

.rappro{
  border:1px solid var(--trait); border-left:3px solid var(--trait);
  border-radius:var(--r); background:var(--fond-leve);
  padding:.7rem .9rem; margin-bottom:.6rem;
}
.rappro.ia{ border-left-color:var(--laiton); }
.rappro.regle{ border-left-color:var(--ardoise); }
.rappro-tete{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.35rem; }
.rappro-qui{ font-family:var(--texte); font-weight:600; font-size:.98rem; }
.rappro-qui .dates{ font-family:var(--texte); font-weight:400; font-size:.82rem; color:var(--encre-pale); }
.rappro-et{ color:var(--laiton); margin:0 .35rem; font-weight:700; }
.rappro-raison{ margin:.1rem 0 .5rem; font-size:.9rem; color:var(--encre-douce); }

.pastille-rappel{
  display:inline-grid; place-items:center; width:15px; height:15px; margin-left:.3rem;
  border-radius:50%; background:var(--accent); color:var(--sur-couleur);
  font-size:.6rem; font-weight:700; vertical-align:middle;
}

/* ── Inscription : les premières branches ──
   Voir où l'on en est ; distinguer les cases facultatives de celles qu'on attend. */

.portail.large .carte{ max-width:780px; }

.aieul{
  border:1px solid var(--trait); border-radius:var(--r); padding:.7rem .9rem 1rem;
  margin:.8rem 0 0; background:var(--fond-leve);
}
.aieul legend{
  font-family:var(--nom); font-size:1rem; padding:0 .4rem; color:var(--accent-lisible);
}
.aieul .etiquette em{ font-style:italic; color:var(--encre-pale); font-weight:400; }
.obligatoire{ color:var(--accent-lisible); }

/* Pot de miel : hors écran, hors clavier, invisible des lecteurs d'écran ; certains
   automates ignorent un « display:none », pas ceci. */
.appat{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Les comptes, dans la console ── */

.table-comptes{ width:100%; border-collapse:collapse; font-size:.92rem; }
.table-comptes th, .table-comptes td{
  padding:.4rem .55rem; text-align:left; border-bottom:1px solid var(--trait-fin); vertical-align:middle;
}
.table-comptes th{ font-family:var(--texte); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.09em; color:var(--encre-pale); }
.statut{ font-size:.76rem; border-radius:20px; padding:.1rem .55rem; border:1px solid var(--trait); }
.statut.actif{ background:var(--teinte-vert); border-color:var(--mousse); color:var(--sur-vert); }
.statut.attente_email, .statut.attente_admin{ background:var(--fond-note); border-color:var(--laiton); }
.statut.suspendu{ background:var(--teinte-rouge); border-color:var(--accent-clair); color:var(--accent-lisible); }

/* ── L'audit de l'arbre ──
   Trois degrés qui ne se valent pas (erreur certaine ≠ travail à finir) : ne pas confondre. */

.table-audit td{ vertical-align:top; padding:.5rem .55rem; }
.table-audit tr.audit-impossible td:first-child{ box-shadow:inset 3px 0 0 var(--accent-lisible); }
.statut.impossible{ background:var(--teinte-rouge); border-color:var(--accent-clair); color:var(--accent-lisible); }
.statut.invraisemblable{ background:var(--fond-note); border-color:var(--laiton); }
.statut.remarque{ background:var(--fond-creux); }

/* Case suivie d'un texte long : le texte s'aligne sur lui-même, pas sous la case. */
.case-en-ligne{ display:flex; gap:.5rem; align-items:flex-start; max-width:84ch; }
.case-en-ligne input{ width:auto; margin-top:.25rem; flex:0 0 auto; }
.case-en-ligne > span{ font-size:.92rem; }

/* Les états précédents d'une fiche : un pli qu'on n'ouvre qu'en cas de besoin. */
.historique-fiche > summary{
  cursor:pointer; font-size:.9rem; color:var(--encre-pale); padding:.25rem 0;
}
.historique-fiche > summary:hover{ color:var(--accent-lisible); }
.etat-precedent{
  border-left:2px solid var(--trait-fin); padding:.35rem 0 .35rem .6rem; margin:.45rem 0;
  font-size:.9rem;
}
.etat-precedent button{ margin-top:.3rem; }

/* Les pistes de recherche : une tâche par bloc, la fourchette d'années à droite. */
.piste{
  border-left:3px solid var(--trait); padding:.45rem 0 .5rem .7rem; margin:.55rem 0;
}
.piste:hover{ border-left-color:var(--accent-lisible); }
.piste-titre{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;
              justify-content:space-between; }
.piste-titre a{ font-weight:600; }
.piste-quand{ font-size:.86rem; color:var(--encre-pale); white-space:nowrap; }
.piste-ou{ font-size:.9rem; margin:.15rem 0; }
.piste-calcul{ font-size:.84rem; font-style:italic; margin-top:.15rem; }

/* Un lien de partage : ce qu'il montre, jusqu'à quand, et le bouton pour le fermer. */
.ligne-partage{
  border:1px solid var(--trait-fin); border-radius:var(--r);
  padding:.5rem .7rem; margin:.5rem 0; font-size:.92rem;
}
.ligne-partage button{ margin-top:.35rem; }

/* L'assistant d'inscription : une barre qui avance, et rien d'autre. */
.jauge-etapes{
  height:4px; background:var(--trait-fin); border-radius:2px; overflow:hidden;
  margin:.2rem 0 .5rem;
}
.jauge-etapes > span{
  display:block; height:100%; width:0; background:var(--accent);
  transition:width .25s ease;
}

/* Un tableau de transcription (jusqu'à ~150 lignes) : fenêtre à défilement propre. */
.tableau-transcrit{
  max-height:26rem; overflow:auto; border:1px solid var(--trait-fin);
  border-radius:var(--r); background:var(--fond-champ); padding:.4rem;
}
.tableau-transcrit table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.tableau-transcrit td, .tableau-transcrit th{
  border-bottom:1px solid var(--trait-fin); padding:.22rem .4rem; text-align:left;
  vertical-align:top;
}
.tableau-transcrit th{ background:var(--fond-leve); position:sticky; top:0; }

/* ── La relecture bloc par bloc ──
   L'image d'abord, et grande. */
.entete-relecture{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline;
  padding-bottom:.5rem; margin-bottom:.6rem; border-bottom:1px solid var(--trait-fin);
  font-size:.88rem;
}
/* L'extrait et son cadre : le conteneur épouse l'image AU PIXEL (ni object-fit ni
   largeur imposée), condition pour que le rectangle SVG tombe sur les mots. */
.cadre-bloc{
  position:relative; display:inline-block; max-width:100%;
  background:var(--fond-champ); border:1px solid var(--trait); border-radius:var(--r);
  padding:.3rem; line-height:0;
}
.image-bloc{ display:block; max-width:100%; max-height:22rem; width:auto; height:auto; }
/* Le SVG se superpose à l'image : « inset » seul ne suffit pas, sans largeur explicite
   il reprend 300 × 150 et le masque couvre la page. */
.cadre-bloc .surcadre{
  position:absolute; top:.3rem; left:.3rem;
  width:calc(100% - .6rem); height:calc(100% - .6rem);
  pointer-events:none;
}
#relecture textarea{ font-size:.95rem; line-height:1.5; width:100%; }
/* Agrandie, l'image défile dans sa fenêtre au lieu de pousser la page. */
.vue-bloc{ max-width:100%; }
.vue-bloc.zoome{ overflow:auto; max-height:26rem; border-radius:var(--r); }
.vue-bloc.zoome .cadre-bloc{ display:block; width:calc(var(--zoom) * 100%); max-width:none; }
.vue-bloc.zoome .image-bloc{ width:100%; max-width:none; max-height:none; }
.vue-bloc{ cursor:zoom-in; }
.vue-bloc.zoome{ cursor:zoom-out; }
.outils-zoom{ display:flex; align-items:center; gap:.4rem; margin:.35rem 0 .2rem; }
.lecture-machine{ margin:.6rem 0 .5rem; line-height:1.6; }
.lecture-machine .etiquette{ display:block; }
.lecture-machine .mono{ color:var(--encre-douce); }
mark.mot-douteux{ background:var(--fond-note); color:var(--encre); border-bottom:2px solid var(--accent-lisible); padding:0 .1em; }
.raccourcis{ margin-top:.45rem; }
.relecture-avancee{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.6rem; }
.barre-avancee{ flex:1 1 12rem; max-width:22rem; height:.45rem; background:var(--fond-creux); border-radius:1rem; overflow:hidden; }
.barre-avancee span{ display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }
.repli-dataset > summary{ cursor:pointer; font-weight:600; }

/* Les images découpées dans un document : sceaux, timbres, photographies. */
.pile-illustrations{ display:flex; flex-wrap:wrap; gap:.7rem; margin:.4rem 0; }
.illustration{
  margin:0; width:15rem; border:1px solid var(--trait-fin); border-radius:var(--r);
  background:var(--fond-champ); padding:.4rem; font-size:.82rem;
}
.illustration img{
  display:block; width:100%; height:8rem; object-fit:contain; background:var(--fond-leve);
  border-radius:calc(var(--r) - 2px);
}
.illustration figcaption{ margin-top:.35rem; line-height:1.4; }

/* ── L'agent d'harmonisation ──
   On décide en lisant la CITATION (la preuve) : aussi lisible que la valeur proposée. */
.ligne-harmo{
  display:flex; gap:.8rem; align-items:flex-start; flex-wrap:wrap;
  padding:.55rem 0; border-top:1px solid var(--trait-fin);
}
.ligne-harmo > div:first-child{ flex:1 1 22rem; min-width:0; }
.ligne-harmo .etiquette{ margin-right:.4rem; }
.citation-harmo{
  margin-top:.25rem; padding-left:.7rem; border-left:2px solid var(--trait);
  font-style:italic; font-size:.9rem; color:var(--encre-douce, var(--encre-pale));
}

/* ── Le « + » du prénom d'origine ──
   Cases repliées (rarement utiles) mais ouvertes d'elles-mêmes dès qu'elles portent
   quelque chose : une information repliée est une information perdue. */
.plus-origine{
  margin-left:.3rem; padding:0; width:1.15rem; height:1.15rem; line-height:1;
  border:1px solid var(--trait); border-radius:50%; background:var(--fond-leve);
  color:var(--encre-douce); font-size:.85rem; cursor:pointer;
}
.plus-origine:hover{ background:var(--mousse); color:var(--sur-couleur); border-color:var(--mousse); }
.bloc-origine{
  margin:.2rem 0 .8rem; padding:.6rem .7rem;
  border-left:3px solid var(--trait); background:var(--fond-leve);
  border-radius:0 var(--r) var(--r) 0;
}
.bloc-origine label{ margin-bottom:.4rem; }

/* ── Chercher quelqu'un plutôt que le chercher des yeux ──
   Le select porte la valeur, piloté par le champ de recherche ; « display:none » et
   non un masquage visuel, sinon arrêt de tabulation fantôme. */
.chercheur{ position:relative; display:inline-block; flex:1 1 13rem; min-width:11rem; }
.chercheur-cache{ display:none !important; }
.chercheur-champ{ width:100%; }
.chercheur-liste{
  position:absolute; z-index:40; left:0; right:0; top:100%;
  max-height:16rem; overflow-y:auto;
  background:var(--fond); border:1px solid var(--trait); border-radius:var(--r);
  box-shadow:0 6px 18px rgba(30,25,18,.14); margin-top:2px;
}
.chercheur-ligne{
  display:block; width:100%; text-align:left; border:0; background:none;
  padding:.36rem .6rem; font:inherit; font-size:.92rem; color:var(--encre);
  cursor:pointer; border-bottom:1px solid var(--trait-fin);
}
.chercheur-ligne:last-child{ border-bottom:0; }
.chercheur-ligne:hover,.chercheur-ligne.vise{ background:var(--mousse); color:var(--sur-couleur); }
.chercheur-reste{ padding:.4rem .6rem; font-size:.85rem; color:var(--encre-pale); }

/* Un pli d'administration, replié : manœuvre qu'on ne fait qu'une fois. */
.pli{ border:1px solid var(--trait-fin); border-radius:var(--r); padding:.6rem .8rem;
      background:var(--fond-leve); }
.pli > summary{ cursor:pointer; font-size:.95rem; }
.pli > summary:hover{ color:var(--accent-lisible); }
.pli[open] > summary{ margin-bottom:.4rem; padding-bottom:.4rem;
                      border-bottom:1px solid var(--trait-fin); }
.pli ol{ padding-left:1.2rem; }
.pli code{ word-break:break-all; }

/* ── Les relevés, rangés sous l'acte qui les porte ──
   Un <details> natif : aucun JavaScript (rien que la CSP puisse bloquer), clavier compris. */
.liste-documents { margin: 0; padding-left: 1.1rem; }
.liste-documents > li { margin-bottom: .9rem; }

.releves-acte { margin: .35rem 0 .2rem; }

.releves-acte > summary {
  cursor: pointer;
  display: inline-block;
  font-size: .84rem;
  color: var(--encre-pale);
  padding: .12rem .1rem;
  border-radius: 3px;
  list-style: none;                 /* on dessine notre propre flèche */
}
.releves-acte > summary::-webkit-details-marker { display: none; }

/* La flèche pivote à l'ouverture : elle dit l'état sans un mot. */
.releves-acte > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .35rem;
  transition: transform .15s ease;
}
.releves-acte[open] > summary::before { transform: rotate(90deg); }

.releves-acte > summary:hover { color: var(--accent-lisible); }
.releves-acte > summary:focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 2px; }

/* Le trait de gauche rattache les relevés à leur document. */
.releves-acte > .registre {
  margin: .3rem 0 .2rem;
  border-left: 2px solid var(--trait-fin);
  padding-left: .7rem;
}

/* ── Les personnes de la fournée, vues d'ensemble ──
   Une ligne par patronyme, ses graphies dessous : ce qui doit sauter aux yeux, ce
   sont les noms à plusieurs orthographes (futurs doublons). */
.lot-groupe {
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--trait-fin);
}
.lot-groupe:last-child { border-bottom: none; }

.lot-groupe-tete {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.lot-groupe-variantes {
  margin-top: .15rem;
  font-size: .88rem;
  color: var(--encre-pale);
}

/* Trois lignes de service (autres lectures, motif, fiches écartées) : discrètes mais lisibles. */
.lot-groupe-noms,
.lot-groupe-motif,
.lot-groupe-ecartes {
  margin-top: .15rem;
  font-size: .82rem;
  line-height: 1.35;
}
.lot-groupe-noms { font-style: italic; }
.lot-groupe-ecartes { padding-left: .8rem; border-left: 1px solid var(--trait-fin); }

/* Le groupe à unifier : un filet, pas un aplat (qui fatigue sur deux cents lignes). */
.lot-groupe.a-unifier {
  border-left: 3px solid var(--accent-lisible);
  padding-left: .55rem;
  background: rgba(125, 43, 35, .035);
}

#lot-personnes-liste { max-height: 30rem; overflow-y: auto; }

/* ── Les graphies, cliquables ──
   Chaque lecture d'un nom est un bouton, mais se lit comme du texte tant qu'on n'y touche pas. */
.lot-graphie {
  font: inherit;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--encre-pale);
  background: none;
  border: 1px solid var(--trait-fin);
  border-radius: .9rem;
  padding: .1rem .55rem .1rem .35rem;
  margin: .12rem .1rem;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.lot-graphie:hover { border-color: var(--encre-pale); color: var(--encre); }
.lot-graphie:focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 1px; }

/* La case à cocher dit qu'une graphie se clique. */
.lot-coche {
  width: .85rem; height: .85rem;
  flex: 0 0 auto;
  border: 1px solid var(--encre-pale);
  border-radius: .15rem;
  display: inline-block;
  position: relative;
}
.lot-graphie.prise {
  color: var(--encre);
  border-color: var(--accent-lisible);
  background: rgba(125, 43, 35, .09);
}

/* Prise en partie : montre qu'on a sorti une fiche d'un lot. */
.lot-graphie.partielle {
  color: var(--encre);
  border-color: var(--accent-clair, var(--accent-lisible));
  border-style: dashed;
}
.lot-graphie.partielle .lot-coche {
  background: linear-gradient(135deg, var(--accent) 0 50%, transparent 50% 100%);
  border-color: var(--accent-lisible);
}

/* La flèche qui déplie une graphie acte par acte, collée à sa pastille. */
.lot-graphie-bloc { display: inline-flex; align-items: center; white-space: nowrap; }
.lot-ouvrir {
  font: inherit;
  font-size: .8rem;
  line-height: 1;
  color: var(--encre-pale);
  background: none;
  border: none;
  cursor: pointer;
  padding: .15rem .25rem;
  transition: transform .15s ease;
}
.lot-ouvrir:hover { color: var(--accent-lisible); }
.lot-ouvrir.ouverte { transform: rotate(90deg); color: var(--accent-lisible); }
.lot-ouvrir:focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 1px; }

/* ── Les actes d'une graphie, dépliés ──
   Des lectures identiques ne désignent pas forcément la même personne : on descend à l'acte. */
.lot-actes {
  margin: .35rem 0 .35rem 1rem;
  padding: .4rem .6rem;
  border-left: 2px solid var(--trait-fin);
  background: rgba(0, 0, 0, .015);
  border-radius: .2rem;
}
.lot-acte {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  font: inherit;
  font-size: .86rem;
  text-align: left;
  color: var(--encre-pale);
  background: none;
  border: 1px solid transparent;
  border-radius: .2rem;
  padding: .12rem .35rem;
  margin-top: .12rem;
  cursor: pointer;
}
.lot-acte:hover { border-color: var(--trait-fin); color: var(--encre); }
.lot-acte:focus-visible { outline: 2px solid var(--accent-lisible); outline-offset: 1px; }
.lot-acte.prise { color: var(--encre); background: rgba(125, 43, 35, .07); }
.lot-acte.prise .lot-coche { background: var(--accent); border-color: var(--accent-lisible); }
.lot-acte.prise .lot-coche::after {
  content: '';
  position: absolute; left: .26rem; top: .06rem;
  width: .18rem; height: .42rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.lot-acte-nom { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.lot-graphie.prise .lot-coche { background: var(--accent); border-color: var(--accent-lisible); }
.lot-graphie.prise .lot-coche::after {
  content: '';
  position: absolute; left: .26rem; top: .06rem;
  width: .18rem; height: .42rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

/* ── La barre du choix ──
   N'apparaît qu'une fois un choix fait, et reste sous les yeux. */
.lot-choix-barre {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .7rem;
  padding: .55rem .7rem;
  border: 1px solid var(--accent);
  border-radius: .3rem;
  background: rgba(125, 43, 35, .05);
}

/* ── La file de relecture ──
   Une seule question à l'écran ; vue où l'on reste longtemps : aucun ornement. */
.relecture-tete { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.relecture-qui  { margin: .3rem 0 .9rem; font-size: .9rem; }

/* La question : grande, c'est la seule chose à lire. */
.relecture-question { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.relecture-libelle {
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--encre-pale);
  min-width: 11rem;
}
#relecture-valeur {
  flex: 1 1 18rem;
  font-size: 1.35rem;
  padding: .35rem .6rem;
  border: 1px solid var(--trait-fin);
  border-bottom: 2px solid var(--accent);
  border-radius: .2rem;
  background: var(--fond-champ);
}
.relecture-motif { margin: .3rem 0 0 11.8rem; font-size: .82rem; }

/* L'image du mot est là d'emblée : toute la file existe pour cela. */
.relecture-image { margin: .9rem 0 .6rem; }
/* Même cadrage que la loupe des fiches, pleine largeur jusqu'à 640 px. */
.relecture-image img {
  display: block;
  width: 100%;
  max-width: 640px;
  max-height: 18rem;
  object-fit: contain;
  object-position: left center;
  border: 1px solid var(--trait-fin);
  border-radius: .2rem;
  background: var(--fond-champ);
}
.relecture-image .discret { margin-top: .25rem; font-size: .8rem; }

/* La phrase de l'acte, en romain plutôt qu'en gris : on la lit vraiment. */
.relecture-contexte {
  margin: .2rem 0 1rem;
  padding: .5rem .7rem;
  border-left: 2px solid var(--trait-fin);
  font-size: .92rem;
  line-height: 1.55;
}
.relecture-contexte mark {
  background: rgba(125, 43, 35, .13);
  color: var(--encre);
  padding: 0 .15rem;
  border-radius: .15rem;
}

.relecture-gestes { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.relecture-gestes kbd {
  font: inherit;
  font-size: .78rem;
  opacity: .7;
  border: 1px solid currentColor;
  border-radius: .2rem;
  padding: 0 .25rem;
  margin-left: .3rem;
}

/* Un rapprochement que l'arbre dément : on dit pourquoi, et le bouton de fusion disparaît. */
.rappro-empechement {
  margin: .3rem 0 .5rem;
  padding: .4rem .6rem;
  border-left: 3px solid var(--accent-lisible);
  background: rgba(125, 43, 35, .06);
  font-size: .88rem;
}

/* Ce qui APPUIE la proposition (« un enfant en commun : … ») : trancher sans rouvrir les fiches. */
.rappro-preuves {
  margin: .3rem 0 .4rem;
  padding: .35rem .6rem;
  border-left: 3px solid var(--mousse);
  background: rgba(76, 98, 80, .07);
  font-size: .86rem; color: var(--encre-douce);
}


/* La réponse brute de l'API (JSON) : chasse fixe, défilement propre. */
.bloc-diagnostic{
  margin:.6rem 0 0; padding:.6rem .7rem; max-height:22rem; overflow:auto;
  background:var(--fond-note); border:1px solid var(--trait); border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.76rem; line-height:1.45; color:var(--encre); white-space:pre;
}


/* ── Chercher par faisceau d'indices ──
   Formulaire replié : n'encombre pas qui sait déjà quel nom il cherche. */
.quete{ margin:.6rem 0 0; }
.quete > summary{
  cursor:pointer; font-family:var(--texte); font-size:.92rem;
  color:var(--accent-lisible); padding:.3rem 0;
}
.quete > summary:hover{ color:var(--encre); }
.quete-champs{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:.2rem .9rem; margin-top:.6rem; padding:.9rem 1rem;
  background:var(--fond-note); border:1px solid var(--trait); border-radius:var(--r);
}
.quete-champs label{ margin-bottom:.5rem; }
/* La ligne d'action sur toute la largeur. */
.quete-action{
  grid-column:1/-1; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap;
  margin-top:.3rem;
}

/* ── Pourquoi cette fiche est là ──
   Les indices se lisent sous le nom et se rejettent aussi vite. */
.trouvaille{ display:block; padding:.35rem 0; }
.pourquoi{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.15rem 0 .1rem 0; }
.indice{
  font-size:.74rem; padding:.05rem .45rem; border-radius:999px;
  background:var(--teinte-vert); color:var(--sur-vert);
  border:1px solid var(--trait);
}


/* La nature d'une filiation hors du sang (« adopté ») : discrète mais nette. */
.filiation{
  display:inline-block; margin-left:.45rem; padding:.02rem .4rem;
  border:1px solid var(--accent-lisible); border-radius:999px;
  font-size:.72rem; font-style:italic; color:var(--accent-lisible);
}

/* ── La suite des métiers, sous la profession ──
   Pas une correction : la preuve. Elle n'attire pas le regard. */
.suite-metiers{ display:flex; flex-wrap:wrap; gap:.15rem .9rem; }
.un-metier{ font-size:.9rem; white-space:nowrap; }

/* ── Où l'on en est, et quoi faire ensuite ──
   Le cartouche de l'accueil : trois lignes et une jauge, qui mesure la part des fiches
   APPUYÉES SUR UN ACTE (pas un « avancement »). */
.cartouche-progres{ margin-top:1.1rem; }
.compte-progres{ margin:.1rem 0 .6rem; font-size:1.05rem; }
.compte-progres strong{ font-variant-numeric:tabular-nums; }

.jauge-progres{
  height:6px; border-radius:3px; overflow:hidden;
  background:var(--trait-fin, rgba(128,118,102,.25));
}
.jauge-progres > span{
  display:block; height:100%; border-radius:3px;
  background:var(--mousse, #6f8a5c);
  /* Le seul mouvement de la page : la jauge s'anime en arrivant. */
  animation:jauge-pousse .6s ease-out both;
}
@keyframes jauge-pousse{ from{ transform:scaleX(0); transform-origin:left; } }
@media (prefers-reduced-motion:reduce){ .jauge-progres > span{ animation:none; } }

/* La prochaine étape, séparée par un filet, pas par un encadré : même cartouche. */
.etape-suivante{
  margin-top:.9rem; padding-top:.8rem;
  border-top:1px solid var(--trait-fin, rgba(128,118,102,.25));
}
.quoi-faire{ margin:.1rem 0 .25rem; font-size:1.05rem; font-weight:600; }
.etape-suivante .bouton{ margin-top:.5rem; }

/* ── La barre de sections d'une page qui descend loin ──
   Seulement au-delà de trois blocs indépendants (l'atelier). Collée en haut, fond
   OPAQUE : translucide, elle devient illisible au moment où l'on s'en sert. */
.barre-sections{
  position:sticky; top:0; z-index:30;
  display:flex; gap:.15rem; align-items:center;
  margin:-.4rem 0 .9rem; padding:.35rem 0;
  background:var(--fond);
  border-bottom:1px solid var(--trait-fin);
  /* Sur téléphone, elle glisse au lieu de se plier : une barre qui change de hauteur fait sauter la page. */
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.barre-sections::-webkit-scrollbar{ display:none; }

.barre-sections a{
  flex:0 0 auto; scroll-snap-align:start;
  padding:.3rem .6rem; border-radius:4px;
  font-size:.86rem; letter-spacing:.01em;
  color:var(--encre-pale, #8b8175); text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent;
}
.barre-sections a:hover{ color:var(--encre); background:var(--trait-fin); }
.barre-sections a[hidden]{ display:none; }

/* La section courante : un filet, pas un fond (qui se lirait comme un bouton). */
.barre-sections a.actif{
  color:var(--encre); border-bottom-color:var(--accent-lisible); font-weight:600;
}
.barre-sections a:focus-visible{ outline:2px solid var(--accent-lisible); outline-offset:2px; }

/* La cible d'un saut ne doit pas se cacher sous la barre. */
.barre-sections ~ * [id], .barre-sections ~ [id]{ scroll-margin-top:3.2rem; }

/* ── Le trajet d'une vie ──
   Carte muette dessinée sur le serveur : pas de tuiles, donc aucune requête qui
   apprendrait à un tiers où vit cette famille. */
.carte-trajet svg{
  display:block; width:100%; height:auto; max-height:70vh;
  background:var(--fond-panneau, var(--fond));
  border-radius:4px;
}

/* Le fond situe, il ne raconte rien : contours discrets. */
.fond-departements path{
  fill:var(--trait-fin); stroke:var(--fond); vector-effect:non-scaling-stroke;
  stroke-width:.6px;
}

.fil-trajet{
  stroke:var(--accent-lisible); vector-effect:non-scaling-stroke; stroke-width:2px;
  stroke-linejoin:round; stroke-linecap:round; opacity:.85;
}

.etape-trajet circle, .etape-trajet polygon{
  fill:var(--fond); stroke:var(--accent-lisible);
  vector-effect:non-scaling-stroke; stroke-width:2px;
}
/* ── Trois repères, trois formes ──
   Naissance, mariage, décès distingués par la FORME, pas la couleur (impression, daltonisme). */
.etape-trajet.genre-naissance circle{ fill:var(--accent-lisible); }
.etape-trajet.genre-deces circle{ fill:var(--fond); stroke:var(--encre); }
.etape-trajet.genre-deces .croix{ stroke:var(--encre); vector-effect:non-scaling-stroke; stroke-width:2px; }
.etape-trajet.genre-mariage polygon{ fill:var(--mousse); stroke:var(--mousse); }

/* La légende reprend exactement les formes de la carte. */
.legende-trajet{
  display:flex; flex-wrap:wrap; gap:.2rem 1.1rem; align-items:center;
  margin:.55rem 0 0; font-size:.84rem; color:var(--encre-pale);
}
.legende-trajet > span{ display:inline-flex; align-items:center; gap:.35rem; }
.legende-trajet .jeton{
  width:11px; height:11px; border:2px solid var(--accent-lisible); border-radius:50%;
}
.legende-trajet .genre-naissance .jeton{ background:var(--accent-lisible); }
.legende-trajet .genre-mariage .jeton{
  border-color:var(--mousse); background:var(--mousse); border-radius:1px;
  transform:rotate(45deg);
}
.legende-trajet .genre-deces .jeton{ border-color:var(--encre); position:relative; }
.legende-trajet .genre-deces .jeton::after{
  content:'+'; position:absolute; inset:-6px 0 0 0; text-align:center;
  font-size:12px; line-height:1; color:var(--encre);
}

.etape-trajet text{
  fill:var(--encre); paint-order:stroke; stroke:var(--fond); stroke-width:3px;
  vector-effect:non-scaling-stroke; font-family:var(--nom, inherit);
}
/* À l'échelle du pays, les noms se chevauchent : retirés, le survol les rend. */
.carte-trajet svg.vue-pays .etape-trajet text{ display:none; }

@media (max-width:700px){ .carte-trajet svg{ max-height:60vh; } }

/* ── L'atelier : le brouillon repris, les réglages repliés ── */
.bandeau-brouillon{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.2rem 0 1rem; }
.bandeau-brouillon .bouton{ margin:0; }
.reglages-lecture{ margin-top:1rem; }
.reglages-lecture > summary #resume-lecture{ color:var(--encre-douce); font-weight:400; }
.outils-secondaires{ align-items:center; gap:.5rem; flex-wrap:wrap; }
.outils-secondaires .etiquette{ margin-right:.3rem; }

/* ── Le trajet : le détail d'un lieu au clic ── */
.etape-trajet{ cursor:pointer; }
.etape-trajet circle.zone-clic{ fill:transparent; stroke:none; pointer-events:all; }
/* L'étiquette d'un lieu ne doit pas voler le clic de la marque voisine. */
.etape-trajet text{ pointer-events:none; }
.etape-trajet:focus{ outline:none; }
.etape-trajet:focus-visible circle, .etape-trajet:focus-visible polygon,
.etape-trajet.choisi circle, .etape-trajet.choisi polygon{ stroke:var(--accent-lisible); }
.etape-trajet.choisi text{ font-weight:700; }
.detail-lieu{ margin-top:.8rem; padding:.8rem 1rem; border:1px solid var(--trait); border-radius:var(--r); background:var(--fond-leve); }
.fiche-lieu h3{ margin:0 0 .5rem; }
.fait-lieu{ padding:.5rem 0; border-top:1px solid var(--trait-fin); }
.fait-lieu:first-of-type{ border-top:0; padding-top:0; }
.fait-titre{ margin:0; display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; }
.details-fait{ margin:.3rem 0 0 1.1rem; padding:0; }
.details-fait li{ margin:.1rem 0; }
.document-fait{ margin:.3rem 0 0; font-size:.9rem; }
.puce-mpf{ color:var(--accent-lisible); border-color:var(--accent-lisible); }
.ligne-etape{ cursor:pointer; }
.ligne-etape:hover td, .ligne-etape.choisi td, .ligne-etape.choisi th{ background:var(--fond-note); }

/* ── La fiche : l'histoire dans le fil, les métiers expliqués, les pistes, la parenté ── */
.chronologie li.repere-histoire .quoi{ font-style:italic; color:var(--encre-douce); font-weight:400; }
.chronologie li.repere-histoire .quand{ color:var(--encre-pale); }
.chronologie li.repere-histoire::before{ background:transparent; border-style:dashed; }
.chronologie.sans-histoire li.repere-histoire{ display:none; }
.titre-section #btn-histoire{ order:2; }
abbr.metier-explique{ text-decoration:underline dotted var(--accent-lisible); text-underline-offset:.2em; cursor:help; }
.pistes-fiche{ list-style:none; margin:0; padding:0; }
.pistes-fiche li{ padding:.55rem 0; border-top:1px solid var(--trait-fin); }
.pistes-fiche li:first-child{ border-top:0; padding-top:0; }
.chemin-lien{ margin:.6rem 0 0; padding-left:1.4rem; }
.chemin-lien li{ margin:.15rem 0; }
.chemin-lien li.commun a{ font-weight:700; }
.chemin-lien li.commun::marker{ color:var(--accent-lisible); }

/* ── L'accueil : ce jour-là, et les actes qui s'ouvrent ── */
.memoire-du-jour{ margin-top:1.2rem; }
.liste-jour{ margin:0; padding-left:1.1rem; }
.liste-jour li{ margin:.25rem 0; }
.liste-jour li.anniversaire-rond a{ font-weight:700; }