/* ==========================================================================
   Bibliothèque NDM — feuille de style unique
   Palette : encre de registre, toile de reliure, tampon dateur, papier bleuté.
   Aucune police distante (RGPD) : piles système uniquement.
   ========================================================================== */

:root {
  /* Palette relevée sur la maquette : parchemin et brun d'encre.
     Le vert et le rouge d'état sont réaccordés au registre chaud. */
  --encre:   #2f2620;
  --encre-2: #4c3f34;
  --brun:    #33261f;   /* bandeau, pied, barre latérale */
  --brun-2:  #4c2f21;   /* boutons pleins */
  --terre:   #8a5a34;   /* accent du titre, liens de service */
  --terre-2: #f0e2cf;

  --toile:   #4c6b45;   /* disponible */
  --toile-2: #6d8a5f;
  --menthe:  #e9efdf;

  --tampon:  #9a3b28;   /* sorti, retard */
  --tampon-2:#f7e4dd;

  --papier:  #f4e9d8;
  --carte:   #fbf6ec;
  --trait:   #e2d3b8;
  --trait-2: #eee2cd;
  --gris:    #8a7a66;
  --ambre:   #8a5a34;
  --ambre-2: #f6e8d2;

  --titre: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --etiquette: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --donnee: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;

  --r: 12px;
  --r-s: 9px;
  --ombre: 0 1px 2px rgba(47, 38, 32, .05);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 16px/1.55 var(--texte);
}

a { color: var(--toile); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--toile-2); }

:focus-visible {
  outline: 2px solid var(--tampon);
  outline-offset: 2px;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; font-weight: 500; }
h1 { font-size: 1.65rem; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 1em; }

.mono { font-family: var(--donnee); font-size: .88em; font-variant-numeric: tabular-nums; }
.gris { color: var(--gris); }
.sr   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- Étiquette : petites capitales espacées, vocabulaire du tiroir de fichier -- */
.etiquette {
  font-family: var(--etiquette);
  font-weight: 500;
  letter-spacing: 0;
  font-size: .82rem;
  line-height: 1.2;
}

/* ==========================================================================
   Bandeau
   ========================================================================== */
.bandeau {
  background: var(--encre);
  color: #fff;
  border-bottom: 0;
}
.bandeau__inner {
  max-width: 1080px; margin: auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.marque__blason {
  width: 34px; height: auto; flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.marque__texte { display: flex; flex-direction: column; min-width: 0; }
.marque__commune { font-size: .72rem; color: #b7c6bf; }
.marque__nom { font-family: var(--etiquette); font-weight: 500; letter-spacing: -.01em;
               font-size: 1.12rem; line-height: 1.2; }
.marque__cote {
  font-family: var(--texte); font-size: .72rem; color: #cfe6dd;
  background: rgba(255,255,255,.14); border-radius: 20px; padding: 3px 9px;
}
.marque__cote { margin-left: 2px; }
.bandeau nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bandeau nav a, .bandeau nav button {
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .88rem; font-weight: 400;
  color: #d6ded9; text-decoration: none; padding: 8px 11px; border: 0;
  background: none; cursor: pointer; border-radius: var(--r);
}
.bandeau nav a:hover, .bandeau nav button:hover { background: rgba(255,255,255,.12); color: #fff; }
.bandeau nav a[aria-current="page"] { background: var(--toile); color: #fff; }

.contenu { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }

/* ==========================================================================
   Recherche — la vedette de la page publique
   ========================================================================== */
.quete { margin: 8px 0 26px; }
.quete h1 {
  font-family: var(--titre); letter-spacing: -.02em; font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 2.2rem); margin-bottom: 14px;
}
.quete h1 span { color: var(--toile); }
.quete__champ { display: flex; border: 1px solid var(--trait); border-radius: var(--r); background: var(--carte); overflow: hidden; box-shadow: var(--ombre); }
.quete__champ input {
  flex: 1; min-width: 0; border: 0; padding: 15px 16px;
  font: 400 1.05rem var(--texte); color: var(--encre); background: transparent;
}
.quete__champ input::placeholder { color: #8b989f; }
.quete__champ input:focus { outline: 0; }
.quete__champ button {
  border: 0; background: var(--encre); color: #fff; padding: 0 24px; cursor: pointer;
  font-family: var(--etiquette); letter-spacing: 0; font-size: .95rem; font-weight: 500;
}
.quete__champ button:hover { background: var(--toile); }
.quete__compte {
  margin-top: 9px; font-family: var(--donnee); font-size: .8rem; color: var(--gris);
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* --- Filtres : languettes de tiroir ------------------------------------- */
.pratique {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
  margin: 0 0 24px;
}
.pratique__bloc {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 3px;
}
.pratique__titre { font-weight: 500; font-size: .82rem; color: var(--toile); margin-bottom: 3px; }
.pratique__ligne { font-size: .88rem; color: var(--encre); }

.languettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.languette {
  font-family: var(--etiquette); letter-spacing: 0; font-size: .84rem;
  padding: 7px 14px; background: var(--carte); border: 1px solid var(--trait);
  border-radius: 20px; color: var(--encre); text-decoration: none;
}
.languette:hover { border-color: var(--toile-2); color: var(--toile); }
.languette[aria-current] { background: var(--encre); border-color: var(--encre); color: #fff; }
.languette em { font-style: normal; font-family: var(--donnee); opacity: .55; margin-left: 5px; }

/* ==========================================================================
   Fiche livre — étiquette de cote à gauche, tampon à droite
   ========================================================================== */
.fiches { display: grid; gap: 12px; }
.fiche {
  display: grid; grid-template-columns: 58px 1fr auto; align-items: stretch;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  box-shadow: var(--ombre); overflow: hidden;
}
.fiche__cote {
  background: var(--menthe); color: var(--toile); display: flex; align-items: center; justify-content: center;
  padding: 10px 4px; text-align: center;
}
.fiche__cote span {
  font-family: var(--donnee); font-size: .7rem; line-height: 1.25; word-break: break-word;
  writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .06em;
  max-height: 150px; overflow: hidden;
}
.fiche__corps { padding: 15px 18px; min-width: 0; }
.fiche__titre { font-size: 1.08rem; font-weight: 500; margin: 0 0 3px; }
.fiche__titre a { color: var(--encre); text-decoration: none; }
.fiche__titre a:hover { text-decoration: underline; text-decoration-color: var(--toile); }
.fiche__auteur { color: var(--gris); margin: 0 0 9px; font-size: .94rem; }
.fiche__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-family: var(--donnee); font-size: .74rem; color: var(--gris);
}
.fiche__meta b { font-weight: 400; color: var(--encre); }
.fiche__tampon { padding: 14px 18px 14px 4px; display: flex; align-items: center; }

/* --- Le tampon dateur : élément signature ------------------------------ */
.tampon {
  --t: var(--toile); --tb: var(--menthe);
  background: var(--tb); color: var(--t); border: 0; border-radius: var(--r-s);
  padding: 9px 14px; text-align: left; min-width: 128px;
}
.tampon--sorti   { --t: var(--tampon); --tb: var(--tampon-2); }
.tampon--attente { --t: var(--ambre);  --tb: var(--ambre-2); }
.tampon__etat {
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .9rem; font-weight: 500; display: block;
}
.tampon__detail {
  font-family: var(--texte); font-size: .76rem; display: block; margin-top: 2px; opacity: .85;
}
.tampon--grand { min-width: 168px; padding: 13px 18px; }
.tampon--grand .tampon__etat { font-size: 1.15rem; }
.tampon--grand .tampon__detail { font-size: .82rem; }
.tampon--menu { min-width: 0; padding: 3px 10px; border-radius: 20px; }
.tampon--menu .tampon__etat { font-size: .72rem; }



/* ==========================================================================
   Notice détaillée
   ========================================================================== */
.notice { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
.notice__titre { font-size: 1.9rem; margin-bottom: 2px; }
.notice__auteur { font-size: 1.1rem; color: var(--gris); margin-bottom: 20px; }
.notice__resume { max-width: 62ch; }

.releve { border-top: 1px solid var(--trait); margin: 0; }
.releve div {
  display: grid; grid-template-columns: 150px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--trait-2);
}
.releve dt {
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .7rem; color: var(--gris); padding-top: 3px;
}
.releve dd { margin: 0; font-family: var(--donnee); font-size: .86rem; }

.encart {
  background: var(--carte); border: 1px solid var(--trait); padding: 18px; box-shadow: var(--ombre);
}
.encart h2 {
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .78rem; color: var(--gris); margin-bottom: 14px;
  padding-bottom: 9px; border-bottom: 1px solid var(--trait-2);
}
.encart--serre { padding: 14px 16px; }

/* ==========================================================================
   Boutons, formulaires, alertes
   ========================================================================== */
.bouton {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .78rem; font-weight: 500;
  padding: 11px 17px; border: 1px solid var(--encre); background: var(--carte);
  color: var(--encre); cursor: pointer; text-decoration: none; border-radius: var(--r);
}
.bouton:hover { background: var(--encre); color: #fff; }
.bouton--primaire { background: var(--toile); border-color: var(--toile); color: #fff; }
.bouton--primaire:hover { background: var(--toile-2); border-color: var(--toile-2); color: #fff; }
.bouton--danger { border-color: var(--tampon); color: var(--tampon); }
.bouton--danger:hover { background: var(--tampon); border-color: var(--tampon); color: #fff; }
.bouton--petit { padding: 6px 10px; font-size: .7rem; letter-spacing: 0; }
.bouton--large { width: 100%; }
.bouton[disabled], .bouton[aria-disabled="true"] {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}
.actions { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.champ { margin-bottom: 15px; }
.champ label {
  display: block; margin-bottom: 5px;
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .72rem; color: var(--gris);
}
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--trait); background: var(--carte);
  font: 400 .95rem var(--texte); color: var(--encre); border-radius: var(--r);
}
.champ input[type="number"], .champ .mono { font-family: var(--donnee); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--toile); outline: 2px solid rgba(31, 78, 70, .18); outline-offset: 0;
}
.champ textarea { min-height: 108px; resize: vertical; }
.champ small { display: block; margin-top: 4px; color: var(--gris); font-size: .8rem; }
.champ--paire { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.champ--trio  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }

.alerte {
  border-left: 4px solid var(--toile); background: var(--carte); border: 1px solid var(--trait);
  border-left-width: 4px; padding: 12px 16px; margin-bottom: 16px; font-size: .95rem;
}
.alerte--erreur { border-left-color: var(--tampon); }
.alerte--info   { border-left-color: var(--encre-2); }
.alerte--succes { border-left-color: var(--toile); }
.alerte b { font-weight: 500; }

.vide {
  border: 2px dashed var(--trait); background: var(--carte); padding: 40px 24px; text-align: center;
  color: var(--gris);
}
.vide p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Tableaux
   ========================================================================== */
.enveloppe-tableau { overflow-x: auto; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r); }
.tableau { width: 100%; border-collapse: collapse; font-size: .91rem; }
.tableau th {
  text-align: left; padding: 10px 12px; background: #f3f6f7;
  border-bottom: 2px solid var(--trait); white-space: nowrap;
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .7rem; color: var(--gris);
}
.tableau td { padding: 10px 12px; border-bottom: 1px solid var(--trait-2); vertical-align: middle; }
.tableau tbody tr:hover { background: var(--trait-2); }
.tableau td.num, .tableau th.num { font-family: var(--donnee); font-size: .82rem;
  font-variant-numeric: tabular-nums; }
.tableau td.serre { white-space: nowrap; }
.tableau .retard { color: var(--tampon); font-weight: 500; }

.puce {
  display: inline-block; padding: 2px 7px; border: 1px solid currentColor;
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .66rem; font-weight: 500;
}
.puce--ok      { color: var(--toile); }
.puce--retard  { color: var(--tampon); }
.puce--attente { color: var(--ambre); }
.puce--neutre  { color: var(--gris); }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination { display: flex; gap: 5px; margin: 24px 0 0; align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; text-align: center; padding: 8px 10px; border: 1px solid var(--trait);
  background: var(--carte); text-decoration: none; color: var(--encre);
  font-family: var(--donnee); font-size: .82rem;
}
.pagination a:hover { border-color: var(--encre); }
.pagination [aria-current] { background: var(--encre); border-color: var(--encre); color: #fff; }
.pagination .ellipse { border: 0; background: none; color: var(--gris); min-width: 20px; }

/* ==========================================================================
   Back-office
   ========================================================================== */
.admin { display: grid; grid-template-columns: 218px 1fr; min-height: 100vh; }
.laterale { background: var(--encre); color: #d0d0d6; padding: 0 0 30px; }
.laterale__marque {
  padding: 16px 18px 15px; border-bottom: 1px solid #2c2c32;
  display: flex; align-items: center; gap: 11px;
  color: #fff; text-decoration: none;
}
.laterale__marque img { width: 30px; height: auto; flex: none; }
.laterale__marque strong {
  display: block; font-family: var(--etiquette); letter-spacing: 0; font-size: .9rem;
  line-height: 1.25;
}
.laterale__marque em {
  display: block; font-style: normal; font-family: var(--donnee);
  font-size: .64rem; color: #8a8a93;
}
.laterale nav { padding: 12px 0; }
.laterale nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 18px; color: #c9c9d0; text-decoration: none;
  font-family: var(--etiquette); letter-spacing: 0; font-size: .74rem;
  font-weight: 500; border-left: 3px solid transparent;
}
.laterale nav a:hover { background: #26262c; color: #fff; }
.laterale nav a[aria-current="page"] {
  background: #26262c; color: #fff; border-left-color: var(--toile);
}
.laterale nav a i {
  font-style: normal; font-family: var(--donnee); font-size: .7rem;
  background: var(--tampon); color: #fff; padding: 1px 6px; letter-spacing: 0;
}
.laterale__titre {
  padding: 16px 18px 6px; color: #8a8a93;
  font-family: var(--etiquette); letter-spacing: 0; font-size: .66rem;
}
.laterale__pied { padding: 14px 18px; border-top: 1px solid #2c2c32; margin-top: 10px; font-size: .82rem; }
.laterale__pied strong { display: block; color: #fff; font-size: .88rem; }
.laterale__pied span { font-family: var(--donnee); font-size: .68rem; color: #8a8a93; }

.panneau { padding: 24px 28px 60px; min-width: 0; }
.panneau__tete {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 22px; border-bottom: 2px solid var(--trait);
}
.panneau__tete h1 { margin: 0; }
.panneau__tete p { margin: 3px 0 0; color: var(--gris); font-size: .9rem; }
.panneau__tete .actions { margin-left: auto; }

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px;
  margin-bottom: 26px; }
.compteur { background: var(--carte); border: 1px solid var(--trait); padding: 14px 16px;
  box-shadow: var(--ombre); }
.compteur dt {
  font-family: var(--etiquette); letter-spacing: 0;
  font-size: .68rem; color: var(--gris); margin-bottom: 6px;
}
.compteur dd { margin: 0; font-family: var(--donnee); font-size: 1.7rem; line-height: 1;
  font-variant-numeric: tabular-nums; }
.compteur--alerte { border-left: 4px solid var(--tampon); }
.compteur--alerte dd { color: var(--tampon); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.formulaire { background: var(--carte); border: 1px solid var(--trait); padding: 22px;
  box-shadow: var(--ombre); max-width: 760px; }
.formulaire--etroit { max-width: 440px; }

.barre-filtres {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px;
  background: var(--carte); border: 1px solid var(--trait); padding: 14px 16px;
}
.barre-filtres .champ { margin: 0; }
.barre-filtres .champ input, .barre-filtres .champ select { min-width: 168px; }

/* --- Jauges des statistiques ------------------------------------------- */
.jauge { display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center;
  margin-bottom: 7px; }
.jauge__piste { height: 15px; background: var(--trait-2); }
.jauge__part { height: 100%; background: var(--toile); }
.jauge__val { font-family: var(--donnee); font-size: .78rem; text-align: right; }
.jauge__nom { font-size: .88rem; margin-bottom: 2px; }

.histo { display: flex; align-items: flex-end; gap: 5px; height: 130px;
  border-bottom: 1px solid var(--trait); padding-top: 8px; }
.histo__mois { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 4px; min-width: 0; }
.histo__barre { width: 100%; background: var(--encre-2); min-height: 2px; }
.histo__barre:hover { background: var(--toile); }
.histo__etiq { font-family: var(--donnee); font-size: .6rem; color: var(--gris);
  writing-mode: vertical-rl; }

/* --- Recherche instantanée du formulaire de prêt ----------------------- */
.selecteur { position: relative; }
.suggestions {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  background: var(--carte); border: 1px solid var(--encre); border-top: 0;
  max-height: 290px; overflow-y: auto; box-shadow: 0 8px 20px rgba(22, 40, 60, .14);
}
.suggestions:empty { display: none; }
.suggestions button {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 13px; border-bottom: 1px solid var(--trait-2); font: 400 .9rem var(--texte);
  color: var(--encre);
}
.suggestions button:hover, .suggestions button:focus { background: #eef4f3; }
.suggestions button small { display: block; color: var(--gris); font-family: var(--donnee);
  font-size: .72rem; margin-top: 2px; }
.suggestions button[disabled] { opacity: .45; cursor: not-allowed; }
.choix {
  background: #eef4f3; border: 1px solid var(--toile); padding: 11px 14px;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
}
.choix strong { display: block; }
.choix span { font-family: var(--donnee); font-size: .76rem; color: var(--gris); }

/* ==========================================================================
   Pied de page public
   ========================================================================== */
.pied {
  border-top: 1px solid var(--trait); background: var(--carte); padding: 22px 20px;
  color: var(--gris); font-size: .84rem;
}
.pied__inner { max-width: 1080px; margin: auto; display: flex; gap: 8px 22px; flex-wrap: wrap;
  align-items: center; }
.pied a { color: var(--gris); }
.pied .mono { margin-left: auto; font-size: .74rem; }

/* ==========================================================================
   Adaptation mobile
   ========================================================================== */
/* ==========================================================================
   Tiroir de navigation du back-office (sans JavaScript)
   ========================================================================== */
.menu-bascule { position: absolute; opacity: 0; pointer-events: none; }
.barre-mobile, .voile-menu, .laterale__fermer { display: none; }

.menu-bouton {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  color: #fff; font-size: .92rem; padding: 9px 12px; border-radius: var(--r-s);
}
.menu-bouton:hover { background: rgba(255, 255, 255, .12); }
.menu-bouton__traits { position: relative; width: 18px; height: 2px; background: #fff; }
.menu-bouton__traits::before, .menu-bouton__traits::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: #fff;
}
.menu-bouton__traits::before { top: -6px; }
.menu-bouton__traits::after { top: 6px; }
.menu-bascule:focus-visible + .admin .menu-bouton { outline: 2px solid var(--toile-2); outline-offset: 2px; }

/* ==========================================================================
   Adaptation mobile
   ========================================================================== */
@media (max-width: 980px) {
  .admin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .barre-mobile {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    background: var(--encre); color: #fff; position: sticky; top: 0; z-index: 40;
  }
  .barre-mobile__titre {
    font-size: .95rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; min-width: 0;
  }
  .barre-mobile__alerte {
    margin-left: auto; background: var(--tampon); color: #fff; text-decoration: none;
    border-radius: 20px; padding: 3px 10px; font-size: .8rem; flex: none;
  }

  .laterale {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(80vw, 280px); z-index: 60;
    overflow-y: auto; transform: translateX(-100%); transition: transform .22s ease-out;
    box-shadow: 0 0 40px rgba(0, 0, 0, .4);
  }
  .menu-bascule:checked ~ .admin .laterale { transform: none; }

  .voile-menu {
    display: block; position: fixed; inset: 0; z-index: 50; cursor: pointer;
    background: rgba(20, 20, 22, .5); opacity: 0; pointer-events: none;
    transition: opacity .22s;
  }
  .menu-bascule:checked ~ .admin .voile-menu { opacity: 1; pointer-events: auto; }

  .laterale__fermer {
    display: block; position: absolute; top: 10px; right: 12px; cursor: pointer;
    color: #fff; font-size: 1.6rem; line-height: 1; padding: 2px 8px;
  }
  .laterale nav a { font-size: .95rem; padding: 12px 18px; }
  .laterale__titre { font-size: .74rem; }

  .panneau { padding: 18px 14px 60px; }
  .duo, .admin-duo { grid-template-columns: 1fr; }
  .notice { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .laterale, .voile-menu { transition: none; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }

  /* Tableaux transformés en fiches empilées. Les intitulés sont posés par
     admin.js à partir des en-têtes ; sans JavaScript le tableau reste
     simplement défilable horizontalement. */
  .enveloppe-tableau.cartes { overflow: visible; border: 0; background: none; }
  .cartes .tableau, .cartes .tableau tbody, .cartes .tableau tr, .cartes .tableau td {
    display: block; width: auto;
  }
  .cartes .tableau thead { display: none; }
  .cartes .tableau tr {
    background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
    padding: 12px 14px; margin-bottom: 10px;
  }
  .cartes .tableau tbody tr:hover { background: var(--carte); }
  .cartes .tableau td {
    border: 0; padding: 4px 0; display: grid; grid-template-columns: 40% 1fr; gap: 10px;
    align-items: baseline;
  }
  .cartes .tableau td::before {
    content: attr(data-libelle); color: var(--gris); font-size: .78rem;
  }
  .cartes .tableau td:empty { display: none; }
  .cartes .tableau td[data-principal] {
    grid-template-columns: 1fr; font-size: 1.02rem; font-weight: 500;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--trait-2);
  }
  .cartes .tableau td[data-principal]::before { display: none; }
  .cartes .tableau td.serre { white-space: normal; }
  .cartes .tableau td .actions { justify-content: flex-start; }

  .panneau__tete { flex-direction: column; align-items: stretch; gap: 12px; }
  .panneau__tete .actions { margin-left: 0; }
  .panneau__tete .actions .bouton { flex: 1 1 auto; text-align: center; }

  .barre-filtres { flex-direction: column; align-items: stretch; }
  .barre-filtres .champ input, .barre-filtres .champ select { min-width: 0; width: 100%; }
  .barre-filtres .actions .bouton { flex: 1 1 auto; text-align: center; }

  .formulaire { padding: 16px 14px; border-radius: var(--r); }
  .champ--paire, .champ--trio { grid-template-columns: 1fr; }
  .compteurs { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: 9px; }
  .compteur { padding: 11px 12px; }
  .compteur dd { font-size: 1.35rem; }
  .releve div { grid-template-columns: 1fr; gap: 2px; }
  .fil { gap: 8px; }
  .bulle { max-width: 100%; }

  /* Site public */
  .fiche { grid-template-columns: 40px 1fr; }
  .fiche__cote span { font-size: .62rem; max-height: 110px; }
  .fiche__tampon { grid-column: 2; padding: 0 18px 15px; }
  .bandeau__inner { padding: 12px 16px; }
  .bandeau nav { width: 100%; margin-left: 0; }
  .marque__blason { width: 30px; }
  .marque__nom { font-size: 1rem; }
  .marque__cote { display: none; }
  .contenu { padding: 20px 16px 50px; }
  .annonce { grid-template-columns: 1fr; }
  .annonce__image { width: 100%; height: 150px; }
}

@media (max-width: 420px) {
  .panneau { padding: 14px 10px 50px; }
  .actions { gap: 7px; }
  .actions .bouton--petit { flex: 1 1 auto; text-align: center; }
}

@media print {
  .bandeau, .laterale, .pied, .actions, .barre-filtres, .pagination { display: none !important; }
  .annonce { break-inside: avoid; }
  body { background: #fff; }
  .admin { display: block; }
}

/* ==========================================================================
   Messagerie interne
   ========================================================================== */
.fil { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 0; }
.bulle {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 12px 15px; max-width: 74ch;
}
.bulle--moi { background: var(--menthe); border-color: #c8e8dc; align-self: flex-end; }
.bulle--eux { align-self: flex-start; }
.bulle__tete {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  margin-bottom: 5px;
}
.bulle__qui { font-weight: 500; font-size: .86rem; }
.bulle--moi .bulle__qui { color: var(--toile); }
.bulle__quand { font-size: .72rem; color: var(--gris); white-space: nowrap; }
.bulle__corps { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .bulle { max-width: 100%; }
}
.pastille {
  font-style: normal; font-size: .72rem; font-weight: 500;
  background: var(--toile-2); color: #04342c; border-radius: 20px; padding: 1px 7px;
}

/* ==========================================================================
   Annonces publiques
   ========================================================================== */
.annonce {
  --a: var(--toile); --af: var(--menthe); --ab: #c8e8dc;
  display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: start;
  background: var(--af); border: 1px solid var(--ab); border-left: 4px solid var(--a);
  border-radius: var(--r); padding: 14px 16px; margin: 0 0 14px;
}
.annonce--important { --a: var(--ambre); --af: var(--ambre-2); --ab: #eedcbe; }
.annonce--fermeture { --a: var(--tampon); --af: var(--tampon-2); --ab: #f2cfcd; }
.annonce__image {
  width: 132px; height: 96px; object-fit: cover; border-radius: 8px; display: block;
}
.annonce__corps { min-width: 0; }
.annonce__titre { margin: 0 0 4px; font-size: 1.02rem; font-weight: 500; color: var(--a); }
.annonce__texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.annonce__periode { margin: 7px 0 0; font-size: .74rem; color: var(--gris); }

.niveau { font-size: .78rem; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.niveau--info { background: var(--menthe); color: var(--toile); }
.niveau--important { background: var(--ambre-2); color: var(--ambre); }
.niveau--fermeture { background: var(--tampon-2); color: var(--tampon); }

@media (max-width: 620px) {
  .annonce { grid-template-columns: 1fr; gap: 12px; }
  .annonce__image { width: 100%; height: 150px; }
}

/* ==========================================================================
   Annonce en fenêtre modale
   ========================================================================== */
body.modale-ouverte { overflow: hidden; }

.modale {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 20, 22, .55);
  animation: voile .18s ease-out both;
}
.modale--sortie { animation: voile .18s ease-in reverse both; }

.modale__boite {
  position: relative; background: var(--carte); border-radius: 14px;
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(20, 20, 22, .3);
  border-top: 5px solid var(--toile);
  animation: monte .22s cubic-bezier(.2, .9, .3, 1) both;
}
.modale__boite--important { border-top-color: var(--ambre); }
.modale__boite--fermeture { border-top-color: var(--tampon); }
.modale--sortie .modale__boite { animation: none; }

.modale__image { width: 100%; max-height: 210px; object-fit: cover; display: block; }
.modale__corps { padding: 22px 24px 24px; }

.modale__niveau {
  display: inline-block; font-size: .76rem; border-radius: 20px; padding: 3px 11px;
  background: var(--menthe); color: var(--toile); margin-bottom: 10px;
}
.modale__boite--important .modale__niveau { background: var(--ambre-2); color: var(--ambre); }
.modale__boite--fermeture .modale__niveau { background: var(--tampon-2); color: var(--tampon); }

.modale__titre { margin: 0 0 8px; font-size: 1.35rem; font-weight: 500; }
.modale__texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.modale__periode { margin: 12px 0 0; font-size: .8rem; color: var(--gris); }
.modale__actions { margin-top: 20px; display: flex; gap: 10px; }

.modale__fermer {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 1.3rem; line-height: 1;
  background: rgba(255, 255, 255, .88); color: var(--encre);
}
.modale__fermer:hover { background: #fff; }

@keyframes voile { from { opacity: 0; } }
@keyframes monte { from { transform: translateY(14px) scale(.985); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .modale, .modale__boite { animation: none; }
}
@media (max-width: 620px) {
  .modale { padding: 12px; align-items: flex-end; }
  .modale__boite { max-height: 92vh; }
  .modale__actions .bouton { width: 100%; text-align: center; }
}
@media print {
  .modale { display: none !important; }
}

.case {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 12px 14px;
}
.case input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--toile); flex: none; }
.case:hover { border-color: var(--toile-2); }

/* ==========================================================================
   Catalogage assisté par ISBN
   ========================================================================== */
.catalogage {
  background: var(--menthe); border: 1px solid #c8e8dc; border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 20px; max-width: 760px;
}
.catalogage h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--toile); }
.catalogage__ligne { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.catalogage__ligne .champ input { background: var(--carte); }
.catalogage__resultat:not(:empty) { margin-top: 14px; }

.catalogage__message { margin: 0 0 8px; font-size: .9rem; }
.catalogage__message--ok { color: var(--toile); font-weight: 500; }
.catalogage__message--attention { color: var(--tampon); font-weight: 500; }
.catalogage__message--discret { color: var(--gris); font-size: .82rem; }

.proposition {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-s);
  padding: 11px 13px; margin-bottom: 8px;
}
.proposition__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proposition__meta { font-size: .84rem; color: var(--gris); }
.proposition__source {
  font-size: .72rem; color: var(--toile); background: var(--menthe);
  border-radius: 20px; padding: 1px 8px; align-self: flex-start; margin-top: 3px;
}

.champ--rempli {
  animation: rempli 1.4s ease-out both;
}
@keyframes rempli {
  from { background: var(--menthe); box-shadow: 0 0 0 3px var(--menthe); }
}
@media (prefers-reduced-motion: reduce) {
  .champ--rempli { animation: none; }
}
@media (max-width: 620px) {
  .catalogage { padding: 14px; }
  .catalogage__ligne .bouton { width: 100%; text-align: center; }
  .proposition { flex-direction: column; align-items: stretch; }
  .proposition .bouton { text-align: center; }
}

/* ==========================================================================
   Banque de prêt (écran de scan)
   ========================================================================== */
.banque { max-width: 560px; }

.banque__modes { display: flex; gap: 8px; margin-bottom: 16px; }
.mode {
  flex: 1; padding: 12px; cursor: pointer; font: inherit; font-size: 1rem;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  color: var(--gris);
}
.mode--actif { background: var(--encre); border-color: var(--encre); color: #fff; font-weight: 500; }

.banque__etat {
  margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r);
  background: var(--carte); border: 1px solid var(--trait); font-size: .94rem;
}
.banque__etat--ok { background: var(--menthe); border-color: #c8e8dc; color: var(--toile); font-weight: 500; }
.banque__etat--erreur { background: var(--tampon-2); border-color: #f2cfcd; color: var(--tampon); font-weight: 500; }
.banque__etat--attention { background: var(--ambre-2); border-color: #eedcbe; color: var(--ambre); }

.etape {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 14px;
}
.etape__titre { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1rem; }
.etape__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--menthe); color: var(--toile); font-size: .84rem; flex: none;
}
.etape__saisie { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }
.etape__fiche:not(:empty) { margin-top: 13px; }

.fiche-scan { background: var(--papier); border-radius: var(--r-s); padding: 12px 14px; }
.fiche-scan__titre { display: block; font-size: 1.05rem; margin-bottom: 7px; }
.fiche-ligne { display: grid; grid-template-columns: 42% 1fr; gap: 10px; margin: 0 0 3px;
  font-size: .88rem; }
.fiche-ligne__etiquette { color: var(--gris); font-size: .8rem; }
.fiche-ligne--alerte span:last-child { color: var(--tampon); font-weight: 500; }
.fiche-ligne--attention span:last-child { color: var(--ambre); font-weight: 500; }

.banque__valider { display: grid; gap: 9px; margin-top: 18px; }
.banque__journal:not(:empty) {
  margin-top: 20px; border-top: 1px solid var(--trait); padding-top: 12px;
}
.operation { margin: 0 0 5px; font-size: .84rem; color: var(--gris); }
.operation--ok { color: var(--toile); }
.operation--erreur { color: var(--tampon); }

.aide { max-width: 560px; margin-top: 22px; font-size: .9rem; }
.aide summary { cursor: pointer; color: var(--toile); padding: 8px 0; }
.aide ul { margin: 6px 0 0; padding-left: 20px; color: var(--gris); }
.aide li { margin-bottom: 6px; }

@media (max-width: 620px) {
  .etape__saisie .bouton { flex: 1 1 auto; text-align: center; }
  .fiche-ligne { grid-template-columns: 1fr; gap: 0; }
  .camera__flux { max-height: 40vh; }
}

/* ==========================================================================
   Viseur de lecture de code-barres (module partagé)
   ========================================================================== */
.scan {
  position: fixed; inset: 0; z-index: 110; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 20, 22, .82);
}
.scan__boite {
  position: relative; width: 100%; max-width: 520px; background: #000;
  border-radius: 14px; overflow: hidden;
}
.scan__flux { width: 100%; max-height: 62vh; display: block; object-fit: cover; background: #000; }
.scan__viseur {
  position: absolute; top: 28%; left: 8%; right: 8%; height: 22%;
  border: 2px solid rgba(255, 255, 255, .95); border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
}
.scan__etat {
  margin: 0; padding: 12px 16px 4px; color: #fff; font-size: .94rem; text-align: center;
}
.scan__aide {
  margin: 0; padding: 0 16px 12px; color: #b9b9c2; font-size: .82rem; text-align: center;
}
.scan__fermer { display: block; margin: 0 auto 14px; }

@media (max-width: 620px) {
  .scan { padding: 8px; }
  .scan__flux { max-height: 54vh; }
}

/* Liens quittant l'iframe du portail */
.hors-cadre { font-size: .82em; opacity: .7; }

/* Page d'aiguillage affichée quand le back-office est appelé depuis un portail */
.aiguillage {
  margin: 0; padding: 24px; background: var(--papier);
  font-family: var(--texte); color: var(--encre);
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.aiguillage__boite {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 26px 28px; max-width: 460px; box-shadow: var(--ombre);
}
.aiguillage__boite h1 { margin: 0 0 12px; font-size: 1.3rem; font-weight: 500; }
.aiguillage__boite p { margin: 0 0 14px; }
.aiguillage__actions { margin: 18px 0 14px; }

/* Liste d'abonnés proposés à la banque de prêt */
.candidats__intro { margin: 0 0 8px; font-size: .88rem; color: var(--gris); }
.candidat {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-s);
  padding: 11px 13px; margin-bottom: 7px; cursor: pointer; font: inherit;
}
.candidat:hover, .candidat:focus-visible { border-color: var(--toile-2); background: var(--menthe); }
.candidat strong { font-size: 1rem; font-weight: 500; }
.candidat__meta { font-size: .82rem; color: var(--gris); }
.candidat--suspendu strong { color: var(--tampon); }

/* Accès à la gestion, dans le bandeau public */
.bandeau nav .lien-gestion {
  border: 1px solid rgba(255, 255, 255, .28); color: #cfe6dd;
}
.bandeau nav .lien-gestion:hover { background: var(--toile); border-color: var(--toile); color: #fff; }

/* Signature de bas de page */
.pied__signature { margin-left: auto; font-family: var(--donnee); font-size: .74rem; }
.pied-admin {
  margin-top: 34px; padding-top: 12px; border-top: 1px solid var(--trait);
  display: flex; justify-content: flex-end;
}
.pied-admin__signature { font-family: var(--donnee); font-size: .74rem; color: var(--gris); }

/* ==========================================================================
   Journal des mises à jour
   ========================================================================== */
.changelog { max-width: 780px; }
.livraison {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 14px;
}
.livraison--derniere { border-left: 4px solid var(--toile); }
.livraison__tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.livraison__date { font-size: .8rem; color: var(--gris); white-space: nowrap; }
.livraison__titre { margin: 0; font-size: 1.1rem; font-weight: 500; }
.livraison__etiquette {
  font-size: .72rem; background: var(--menthe); color: var(--toile);
  border-radius: 20px; padding: 2px 10px;
}
.livraison__tests { margin: 6px 0 0; font-size: .8rem; }

.changements { list-style: none; margin: 14px 0 0; padding: 0; }
.changement {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--trait-2); align-items: baseline;
}
.changement__nature {
  font-size: .72rem; border-radius: 20px; padding: 2px 9px; text-align: center;
  white-space: nowrap;
}
.changement__nature--ajout { background: var(--menthe); color: var(--toile); }
.changement__nature--evolution { background: #e8eaf2; color: #3a4a75; }
.changement__nature--correction { background: var(--ambre-2); color: var(--ambre); }
.changement__nature--securite { background: var(--tampon-2); color: var(--tampon); }

@media (max-width: 620px) {
  .livraison { padding: 14px 15px; }
  .changement { grid-template-columns: 1fr; gap: 3px; }
  .changement__nature { justify-self: start; }
}

/* ==========================================================================
   Photo de quatrième de couverture et vignette rapatriée
   ========================================================================== */
.catalogage__photo {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #c8e8dc;
}
.catalogage__photo h3 { margin: 0 0 4px; font-size: .96rem; font-weight: 500; }

.propositions-ocr { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.pastille-proposition {
  font: inherit; font-size: .84rem; cursor: pointer;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 20px;
  padding: 6px 13px; color: var(--encre); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pastille-proposition:hover { border-color: var(--toile-2); background: var(--menthe); }
.pastille-proposition--reprise,
.pastille-proposition:disabled {
  background: var(--menthe); border-color: #c8e8dc; color: var(--toile); cursor: default;
}

.ocr-texte { margin-top: 12px; font-size: .84rem; }
.ocr-texte summary { cursor: pointer; color: var(--toile); }
.ocr-texte pre {
  margin: 8px 0 0; padding: 11px 13px; background: var(--carte);
  border: 1px solid var(--trait); border-radius: var(--r-s);
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; max-height: 260px;
  overflow-y: auto;
}

.couverture-auto:not(:empty) { margin: 0 0 16px; }
.couverture-auto__bloc { display: flex; gap: 14px; align-items: flex-start; }
.couverture-auto__bloc img {
  width: 96px; height: auto; border-radius: var(--r-s); border: 1px solid var(--trait);
  display: block; flex: none;
}

@media (max-width: 620px) {
  .catalogage__photo .bouton { width: 100%; text-align: center; }
  .pastille-proposition { max-width: 100%; }
}

/* ==========================================================================
   Clochette des messages en attente, sur le tableau de bord
   ========================================================================== */
.clochette {
  display: flex; align-items: center; gap: 15px; text-decoration: none;
  background: var(--ambre-2); border: 1px solid #eedcbe; border-left: 4px solid var(--ambre);
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; color: var(--encre);
}
.clochette:hover { background: #f6e6cd; }

.clochette__icone { position: relative; color: var(--ambre); flex: none; display: block; }
.clochette__compte {
  position: absolute; top: -6px; right: -9px; min-width: 19px; height: 19px;
  border-radius: 20px; background: var(--tampon); color: #fff;
  font-size: .72rem; font-weight: 500; line-height: 19px; text-align: center;
  padding: 0 5px; box-shadow: 0 0 0 2px var(--ambre-2);
}

.clochette__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clochette__texte strong { font-weight: 500; }
.clochette__qui {
  font-size: .86rem; color: var(--gris);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clochette__aller { margin-left: auto; color: var(--ambre); font-size: .9rem; white-space: nowrap; }

/* Deux oscillations au chargement, puis la clochette se tient tranquille */
@media (prefers-reduced-motion: no-preference) {
  .clochette__icone svg { animation: sonne 1.6s ease-in-out 2; transform-origin: 50% 4px; }
}
@keyframes sonne {
  0%, 60%, 100% { transform: rotate(0); }
  5%  { transform: rotate(13deg); }
  15% { transform: rotate(-11deg); }
  25% { transform: rotate(8deg); }
  35% { transform: rotate(-6deg); }
  45% { transform: rotate(3deg); }
}

@media (max-width: 620px) {
  .clochette { flex-wrap: wrap; gap: 12px; }
  .clochette__aller { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Couvertures
   ========================================================================== */
.couverture {
  max-width: 100%; width: 168px; height: auto; display: block; margin: 0 auto;
  border-radius: var(--r-s); border: 1px solid var(--trait);
}
.fiche__vignette {
  background: var(--papier); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fiche__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .fiche__vignette img { object-position: top; }
}

/* ==========================================================================
   Opérations destructives
   ========================================================================== */
.zone-danger {
  background: var(--carte); border: 1px solid #f2cfcd; border-left: 4px solid var(--tampon);
  border-radius: var(--r); padding: 18px 20px; max-width: 780px;
}
.danger {
  background: var(--tampon-2); border: 1px solid #f2cfcd; border-radius: var(--r);
  padding: 18px 20px; max-width: 780px;
}
.danger__titre { margin: 0 0 10px; font-weight: 500; color: var(--tampon); font-size: 1.02rem; }
.danger p { margin: 0 0 8px; }
.danger p:last-child { margin-bottom: 0; }

.commande {
  margin: 10px 0 0; padding: 11px 13px; background: var(--encre); color: #e8e8ee;
  border-radius: var(--r-s); font-family: var(--donnee); font-size: .78rem;
  overflow-x: auto; white-space: pre;
}

@media (max-width: 620px) {
  .zone-danger .actions .bouton { width: 100%; text-align: center; }
}

/* ==========================================================================
   Catalogage par auteur
   ========================================================================== */
.catalogage__auteur {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #c8e8dc;
}
.catalogage__auteur h3 { margin: 0 0 4px; font-size: .96rem; font-weight: 500; }

.combo { position: relative; }
.combo__liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0;
  padding: 0; list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-s);
  box-shadow: 0 8px 24px rgba(20, 20, 22, .12);
}
.combo__option {
  display: flex; flex-direction: column; gap: 1px; padding: 10px 13px; cursor: pointer;
  border-bottom: 1px solid var(--trait-2);
}
.combo__option:last-child { border-bottom: 0; }
.combo__option:hover, .combo__option--actif { background: var(--menthe); }
.combo__option--local .combo__nom { color: var(--toile); }
.combo__nom { font-weight: 500; font-size: .96rem; }
.combo__meta { font-size: .8rem; color: var(--gris); }
.combo__vide { padding: 12px 13px; color: var(--gris); font-size: .88rem; }

.oeuvres:not(:empty) { margin-top: 14px; }
.oeuvres__grille { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.oeuvre {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 13px; align-items: start;
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r-s);
  padding: 11px 13px;
}
.oeuvre--presente { opacity: .62; }
.oeuvre__vignette {
  width: 62px; height: 88px; object-fit: cover; border-radius: 4px; display: block;
  border: 1px solid var(--trait);
}
.oeuvre__vignette--absente {
  background: var(--papier); color: var(--gris); font-size: .62rem;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.oeuvre__corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oeuvre__titre { font-size: 1rem; font-weight: 500; }
.oeuvre__meta { font-size: .82rem; color: var(--gris); }
.oeuvre__isbn { font-size: .76rem; color: var(--gris); }
.oeuvre__resume { margin: 5px 0 0; font-size: .84rem; color: var(--encre); }
.oeuvre__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.oeuvre__etat { font-size: .76rem; color: var(--toile); white-space: nowrap; }

@media (max-width: 620px) {
  .oeuvre { grid-template-columns: 52px 1fr; }
  .oeuvre__vignette { width: 52px; height: 74px; }
  .oeuvre__actions { grid-column: 2; align-items: stretch; }
  .oeuvre__actions .bouton { text-align: center; }
}

/* ==========================================================================
   Accord graphique : parchemin et brun d'encre
   ========================================================================== */
h1, h2, h3, .fiche__titre, .marque__nom, .oeuvre__titre, .modale__titre,
.annonce__titre, .livraison__titre, .etape__titre, .fiche-scan__titre {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { letter-spacing: -.01em; }

.quete h1 { font-weight: 400; line-height: 1.2; }
.quete h1 span { color: var(--terre); }

/* Bandeau et pied : brun profond */
.bandeau { background: var(--brun); }
.marque__nom { font-size: 1.18rem; line-height: 1.15; }
.marque__commune { color: #c9b8a2; }
.marque__cote {
  background: rgba(255, 255, 255, .1); color: #d8c9b4; border-radius: var(--r-s);
  font-size: .7rem; padding: 3px 9px; align-self: center;
}
.bandeau nav a, .bandeau nav button { color: #e6dbc9; border-radius: var(--r-s); }
.bandeau nav a:hover, .bandeau nav button:hover { background: rgba(255, 255, 255, .1); }
.bandeau nav .lien-gestion { border: 1px solid rgba(255, 255, 255, .32); color: #f2e8d8; }
.bandeau nav .lien-gestion:hover { background: rgba(255, 255, 255, .14); border-color: #f2e8d8; }
.bandeau nav a[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; }

.pied { background: var(--brun); border-top: 0; }
.pied__inner, .pied a, .pied span { color: #d8c9b4; }
.pied a:hover { color: #fff; }

/* Recherche : champ clair arrondi, bouton brun */
.quete__champ {
  border: 1px solid var(--trait); border-radius: var(--r); background: #fffdf8;
  box-shadow: var(--ombre); overflow: hidden;
}
.quete__champ input { background: transparent; padding: 15px 18px; font-size: 1rem; }
.quete__champ button {
  background: var(--brun-2); border-radius: var(--r); margin: 5px; padding: 0 26px;
  font-size: .95rem;
}
.quete__champ button:hover { background: var(--brun); }

/* Compteurs du fonds : sans cadre, précédés d'un pictogramme.
   Réservé à l'accueil ; le tableau de bord conserve ses cartes. */
.compteurs--fonds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px; margin: 20px 0 22px;
}
.compteurs--fonds .compteur {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; box-shadow: none; padding: 4px 2px;
}
.compteur__icone { color: var(--terre); flex: none; display: flex; }
.compteurs--fonds .compteur dt {
  order: 2; font-size: .78rem; color: var(--gris); margin: 0; letter-spacing: 0;
}
.compteurs--fonds .compteur dd {
  order: 1; margin: 0; font-family: var(--titre); font-size: 1.6rem; line-height: 1.1;
}
.compteur__texte { display: flex; flex-direction: column; }

/* Cartes d'informations pratiques */
.pratique__bloc {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 15px 17px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
}
.pratique__icone { grid-row: 1 / span 4; color: var(--terre); align-self: start; margin-top: 2px; }
.pratique__titre { font-family: var(--titre); font-size: .98rem; color: var(--encre); }
.pratique__ligne { font-size: .88rem; color: var(--gris); }

/* Languettes : pastilles, l'active en brun plein */
.languette {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 22px;
  padding: 8px 17px; font-size: .88rem;
}
.languette:hover { border-color: var(--terre); color: var(--terre); }
.languette[aria-current] {
  background: var(--brun); border-color: var(--brun); color: #f5ecdd;
}
.languette[aria-current] em { color: #cbb79e; }

/* Encart d'accueil sans résultat */
.vide {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 24px 28px; text-align: center;
}
.vide p:first-child { font-family: var(--titre); font-size: 1.18rem; }

.vide--presentation {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 26px;
  align-items: center; text-align: left;
}
.vide--presentation .vide__illustration { grid-row: 1 / span 3; flex: none; }
.vide--presentation p { margin: 0 0 8px; max-width: 62ch; }
.vide--presentation p:last-child { margin-bottom: 0; }

/* Sur téléphone, deux colonnes réduiraient le texte à un mot par ligne :
   l'illustration passe au-dessus et le bloc s'aligne en pleine largeur. */
@media (max-width: 720px) {
  .vide { padding: 20px 18px; }
  .vide--presentation {
    grid-template-columns: 1fr; gap: 14px; text-align: center; justify-items: center;
  }
  .vide--presentation .vide__illustration { grid-row: auto; width: 150px; height: auto; }
  .vide--presentation p { max-width: 100%; }
}

/* Rameau décoratif à côté du titre d'accueil */
.quete { position: relative; }
.quete__decor {
  position: absolute; top: -6px; right: 0; pointer-events: none; opacity: .95;
}
@media (max-width: 860px) { .quete__decor { display: none; } }

/* Boutons */
.bouton {
  border-radius: var(--r-s); border-color: var(--trait); background: var(--carte);
}
.bouton:hover { border-color: var(--terre); color: var(--terre); }
.bouton--primaire {
  background: var(--brun-2); border-color: var(--brun-2); color: #f5ecdd;
}
.bouton--primaire:hover { background: var(--brun); border-color: var(--brun); }

/* Cartes et tableaux */
.fiche, .encart, .enveloppe-tableau, .formulaire, .etape, .livraison, .bulle,
.pratique__bloc, .proposition, .oeuvre, .fiche-scan {
  border-color: var(--trait);
}
.fiche__cote { background: var(--brun); color: #e6dbc9; }
.tableau thead th { background: var(--papier); color: var(--gris); }
.tableau tbody tr:hover { background: var(--trait-2); }

/* Barre latérale de gestion, au même registre */
.laterale { background: var(--brun); }
.laterale__marque { border-bottom-color: #4a3a2e; }
.laterale nav a { color: #d8c9b4; }
.laterale nav a:hover { background: #40312a; color: #fff; }
.laterale nav a[aria-current] { background: #4a3a2e; color: #fff; border-left-color: var(--terre); }
.laterale__titre { color: #a3907a; }
.barre-mobile { background: var(--brun); }

/* Couverture prise à l'appareil photo */
.couverture-photo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--papier); border: 1px dashed var(--trait); border-radius: var(--r);
}
.couverture-photo small { font-size: .82rem; }
.couverture-photo--suggeree {
  border-style: solid; border-color: var(--terre); background: var(--ambre-2);
}
@media (max-width: 620px) {
  .couverture-photo .bouton { width: 100%; text-align: center; }
}

/* Provenance du résumé */
.notice__source {
  margin: 10px 0 0; font-size: .8rem; color: var(--gris); font-style: italic;
}
.source-resume {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 14px; font-size: .86rem; color: var(--gris);
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-s);
}
.source-resume strong { color: var(--encre); font-weight: 500; }
.source-resume .bouton { margin-left: auto; }

/* Choix du mode de mot de passe à la création d'un accès */
.case span strong { display: block; font-weight: 500; }
.case span small { display: block; font-size: .82rem; margin-top: 2px; }
.case input[type="radio"] { accent-color: var(--terre); }