:root {
  --papier: #F1F3F7;
  --surface: #FFFFFF;
  --encre: #1B2440;
  --doux: #5A6479;
  --trait: #D3D9E4;
  --tampon: #5B3A9E;
  --tampon-fond: #EFEAF9;
  --ok: #1E7B4F;
  --alerte: #B42318;
  --alerte-fond: #FDECEA;
  --f-titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-texte: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rayon: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1rem/1.5 var(--f-texte);
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

h1, h2, h3 { font-family: var(--f-titre); line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.1rem, 7vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.35rem; font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }

.entete { margin-bottom: 1.5rem; }
.compteur { margin: .35rem 0 0; color: var(--doux); }

/* ------------------------------------------------------------ boutons */
.btn, .puce {
  font: 600 1rem/1 var(--f-texte);
  min-height: 44px;
  padding: .7rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
}
.btn { background: var(--encre); color: #fff; border: 2px solid var(--encre); }
.btn:hover { background: #2A3560; border-color: #2A3560; }
.btn-second { background: var(--surface); color: var(--encre); border-color: var(--encre); }
.btn-second:hover { background: var(--papier); border-color: var(--encre); }

.btn:focus-visible, .puce:focus-visible, input:focus-visible, .suppr:focus-visible {
  outline: 3px solid var(--tampon);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ scan */
.bloc {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.25rem;
}
.bloc h2 { margin-bottom: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

#lecteur {
  margin-top: 1rem;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.note { margin: .75rem 0 0; color: var(--doux); font-size: .95rem; }
.note.erreur { color: var(--alerte); }

.saisie { margin-top: 1.25rem; }
.saisie label, .recherche label {
  display: block;
  margin-bottom: .35rem;
  font-size: .95rem;
  font-weight: 500;
}
.saisie-champ { display: flex; gap: .5rem; }
.saisie-champ input { flex: 1; min-width: 0; }

input[type="text"], input[type="search"] {
  width: 100%;
  min-height: 44px;
  padding: .55rem .75rem;
  font: 400 1rem var(--f-texte);
  color: var(--encre);
  background: var(--surface);
  border: 2px solid var(--trait);
  border-radius: 8px;
}
input:focus { border-color: var(--tampon); }

/* ------------------------------------------------------------ résultat */
.fiche {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 1rem;
  background: var(--papier);
  border-left: 5px solid var(--trait);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.fiche-ok { border-left-color: var(--ok); }
.fiche-alerte { border-left-color: var(--alerte); background: var(--alerte-fond); }
.fiche-info { border-left-color: var(--tampon); }
.fiche-manuel { flex-direction: column; align-items: stretch; }
.fiche-texte { min-width: 0; }
.fiche-texte h3 { overflow-wrap: anywhere; }
.fiche-texte p { margin: .15rem 0 0; }

.statut { font-weight: 600; color: var(--doux); }
.fiche-ok .statut { color: var(--ok); }
.fiche-alerte .statut { color: var(--alerte); }

.fiche-manuel label { display: block; font-weight: 500; font-size: .95rem; margin-top: .75rem; }
.fiche-manuel input { margin-top: .3rem; }
.fiche-manuel .btn { margin-top: 1rem; align-self: flex-start; }

/* Le tampon : la date de scan, comme sur la page de garde d'un livre de bibliothèque. */
.tampon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  padding: .3rem .75rem;
  font: 700 1.05rem/1.2 var(--f-titre);
  color: var(--tampon);
  border: 3px double var(--tampon);
  border-radius: 6px;
  transform: rotate(-4deg);
  white-space: nowrap;
  animation: frappe .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.tampon-legende { font: 500 .8rem/1.2 var(--f-texte); }
.tampon-alerte { color: var(--alerte); border-color: var(--alerte); margin-bottom: 1rem; font-size: 1.25rem; }

@keyframes frappe {
  from { transform: rotate(-4deg) scale(1.6); opacity: 0; }
  to   { transform: rotate(-4deg) scale(1);   opacity: 1; }
}

/* ------------------------------------------------------------ historique */
.histo { margin-top: 2.5rem; }

.outils {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin: 1rem 0 .5rem;
}
.recherche { flex: 1 1 220px; }
.tri { display: flex; flex-wrap: wrap; gap: .5rem; }

.puce {
  background: var(--surface);
  color: var(--encre);
  border: 2px solid var(--trait);
}
.puce[aria-pressed="true"] {
  background: var(--tampon-fond);
  border-color: var(--tampon);
  color: var(--tampon);
}
.sens { font-weight: 500; font-size: .9rem; }
.sens:not(:empty)::before { content: '· '; }

.liste { list-style: none; margin: 0; padding: 0; }

.livre {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem 1rem;
  align-items: start;
  padding: .9rem 0;
  border-bottom: 1px solid var(--trait);
}
.livre-titre { font-weight: 600; overflow-wrap: anywhere; }
.livre-auteur { color: var(--encre); }
.livre-meta { grid-column: 1; color: var(--doux); font-size: .9rem; }
.suppr {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  padding: .6rem .4rem;
  background: none;
  border: 0;
  color: var(--alerte);
  font: 500 .9rem var(--f-texte);
  text-decoration: underline;
  cursor: pointer;
}
.vide { padding: 1.5rem 0; color: var(--doux); }

/* ------------------------------------------------------------ alerte doublon */
dialog {
  width: 100%;
  max-width: min(92vw, 26rem);
  padding: 1.5rem;
  border: 0;
  border-top: 6px solid var(--alerte);
  border-radius: var(--rayon);
  color: var(--encre);
}
dialog::backdrop { background: rgba(27, 36, 64, .6); }
dialog h2 { margin-bottom: .75rem; }
.doublon-livre { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.doublon-date { margin: 0 0 1.25rem; color: var(--doux); }

@media (prefers-reduced-motion: reduce) {
  .tampon { animation: none; }
}