/* BibliOfelia — système de design OFELIA (Studio Ayer).
   Remplace pico.min.css + bibliofelia.css. SPEC §10. */

/* ────────── Polices locales (contrainte hors-ligne) ────────── */
/* Bricolage Grotesque — variable, 3 subsets */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-1.c4c7bb6a8d9b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-2.8c5bedf81bd3.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-3.ad33cbc6d232.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* DM Sans — variable, 2 subsets */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/dm-sans-1.b9209b52c467.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/dm-sans-2.6c1e961057d2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ────────── Tokens de design OFELIA ────────── */
:root {
  /* Couleurs de marque */
  --burgundy:      #6B2138;
  --burgundy-dark: #4E1829;
  --burgundy-light:#F2E8EC;
  --orange:        #ED7538;
  --orange-light:  #FDE9D9;
  --amber:         #F3B84C;
  --amber-light:   #FDF3DC;
  --sky:           #B7D9FF;
  --sky-dark:      #5A9ED4;
  --sky-light:     #EAF5FF;
  --blush:         #F4BABA;
  --blush-light:   #FEF2F2;
  --olive:         #D1C360;
  --olive-light:   #F8F5D6;
  --forest:        #3D8C5A;
  --forest-light:  #E8F5EE;

  /* Neutres */
  --cream:         #F7F5F0;
  --cream-dark:    #EAE6DC;
  --paper:         #FFFFFF;
  --ink:           #3D3530;
  --ink-soft:      #5C5550;
  --grey:          #9A9088;
  --grey-light:    #D4CEC8;
  --line:          rgba(61,53,48,0.10);
  --line-strong:   rgba(61,53,48,0.20);
  --shadow-sm:     0 2px 8px rgba(61,53,48,0.07);
  --shadow-md:     0 6px 22px rgba(61,53,48,0.10);
  --shadow-lg:     0 14px 40px rgba(61,53,48,0.16);

  /* Rayons */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Typographie */
  --font-brand: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:  'DM Sans', system-ui, sans-serif;

  /* Mise en page */
  --page-pad: 16px;
  --page-max: 980px;
  --tile-radius: var(--r-lg);
}

/* ────────── Reset ────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  line-height: 1.5;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; padding: 0; }

/* ────────── App shell ────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ────────── Topbar ────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(61,53,48,0.02);
}
.topbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 10px var(--page-pad);
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-logo {
  height: 28px;
  width: auto;
  flex-shrink: 0;
}
.topbar-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.topbar-lib {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 16px;
  color: var(--burgundy);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-sub {
  font-size: 11px;
  color: var(--grey);
  font-weight: 500;
}
.topbar-spacer { flex: 1; }
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sélecteur de langue */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.lang-pill svg { width: 14px; height: 14px; }
.lang-pill select {
  background: transparent;
  border: 0;
  font-weight: 600;
  font-size: 12px;
  padding-right: 2px;
  cursor: pointer;
}

/* Pilule utilisateur */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.user-pill::-webkit-details-marker { display: none; }
.user-pill .avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--burgundy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  font-family: var(--font-brand);
}

/* Dropdown utilisateur */
.user-dropdown { position: relative; }
.user-menu-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  z-index: 50;
  overflow: hidden;
  display: none;
}
.user-dropdown[open] .user-menu-drop { display: block; }
.user-menu-drop a,
.user-menu-drop button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.user-menu-drop a:hover,
.user-menu-drop button:hover { background: var(--cream); }
.user-menu-drop svg { width: 16px; height: 16px; color: var(--grey); }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--cream-dark); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* ────────── Page ────────── */
.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--page-pad) 60px;
}

/* ────────── Hero (accueil) ────────── */
.hero {
  margin: 4px 0 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.hero-text { min-width: 0; }
/* FEAT-077 — date et heure de la Box, alignées sur le bloc de salutation. */
.hero-clock {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
  line-height: 1.15;
}
.hero-clock-time {
  font-family: var(--font-brand);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}
/* Abréviation du fuseau (CEST, -03…) : discrète, elle n'a d'intérêt que le
   jour où l'on doute de l'heure affichée. */
.hero-clock-tz {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  vertical-align: 2px;
}
.hero-clock-date {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}
.hero-greet {
  font-family: var(--font-brand);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-greet b { color: var(--burgundy); font-weight: 700; }
.hero-sub { margin-top: 6px; color: var(--ink-soft); font-size: 14px; }

/* ────────── Grille de grosses tuiles ────────── */
.tilegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 28px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--tile-radius);
  background: var(--tile-bg, var(--burgundy));
  color: var(--tile-fg, #fff);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 92px;
  text-align: left;
  border: 0;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
}
.tile:active { transform: scale(0.985); }
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tile-icon {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-icon-bg, rgba(255,255,255,0.22));
  color: var(--tile-icon-fg, #fff);
}
.tile-icon svg { width: 28px; height: 28px; }
.tile-icon--illus {
  width: 68px; height: 68px;
  border-radius: 18px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(61,53,48,0.10), inset 0 0 0 1px rgba(61,53,48,0.06);
  flex-shrink: 0;
}
.tile-icon--illus svg { width: 60px; height: 60px; }
.tile-text { min-width: 0; flex: 1; }
.tile-title {
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.tile-desc {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.35;
}
.tile-chev { flex-shrink: 0; opacity: 0.6; }
.tile-chev svg { width: 22px; height: 22px; }

/* Recettes de couleur des tuiles */
.tile--burgundy { --tile-bg: var(--burgundy); --tile-fg: #fff; --tile-icon-bg: rgba(255,255,255,0.20); }
.tile--amber    { --tile-bg: var(--amber);    --tile-fg: var(--ink); --tile-icon-bg: rgba(61,53,48,0.12); --tile-icon-fg: var(--ink); }
.tile--orange   { --tile-bg: var(--orange);   --tile-fg: #fff; --tile-icon-bg: rgba(255,255,255,0.22); }
.tile--sky      { --tile-bg: var(--sky);      --tile-fg: var(--ink); --tile-icon-bg: rgba(61,53,48,0.10); --tile-icon-fg: var(--ink); }
.tile--olive    { --tile-bg: var(--olive);    --tile-fg: var(--ink); --tile-icon-bg: rgba(61,53,48,0.12); --tile-icon-fg: var(--ink); }
.tile--blush    { --tile-bg: var(--blush);    --tile-fg: var(--ink); --tile-icon-bg: rgba(61,53,48,0.12); --tile-icon-fg: var(--ink); }
.tile--forest   { --tile-bg: var(--forest);   --tile-fg: #fff; --tile-icon-bg: rgba(255,255,255,0.22); }

@media (min-width: 600px) {
  :root { --page-pad: 24px; }
  .tilegrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hero-greet { font-size: 32px; }
  .hero-clock-time { font-size: 26px; }
}
@media (min-width: 900px) {
  .tilegrid { grid-template-columns: repeat(4, 1fr); }
  .tile { flex-direction: column; align-items: flex-start; padding: 24px; min-height: 180px; }
  .tile-chev { position: absolute; top: 18px; right: 18px; }
  .tile-title { font-size: 22px; }
  .tile-icon--illus { width: 78px; height: 78px; }
  .tile-icon--illus svg { width: 70px; height: 70px; }
}

/* ────────── Tile strip (pages secondaires) ────────── */
.tilestrip-wrap {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.tilestrip-wrap::-webkit-scrollbar { display: none; }
.tilestrip {
  display: flex;
  gap: 10px;
  padding: 10px var(--page-pad);
  max-width: var(--page-max);
  margin: 0 auto;
}
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 12px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  scroll-snap-align: start;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(61,53,48,0.02);
  transition: all .15s;
  cursor: pointer;
  text-decoration: none;
}
.chip:hover { border-color: var(--line-strong); }
.chip-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip-bg, var(--burgundy));
  color: var(--chip-fg, #fff);
}
.chip-dot svg { width: 14px; height: 14px; }
.chip.is-active {
  background: var(--chip-bg, var(--burgundy));
  color: var(--chip-fg, #fff);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.chip.is-active .chip-dot {
  background: rgba(255,255,255,0.22);
  color: var(--chip-fg, #fff);
}
.chip--burgundy { --chip-bg: var(--burgundy); --chip-fg: #fff; }
.chip--amber    { --chip-bg: var(--amber); --chip-fg: var(--ink); }
.chip--orange   { --chip-bg: var(--orange); --chip-fg: #fff; }
.chip--sky      { --chip-bg: var(--sky); --chip-fg: var(--ink); }
.chip--olive    { --chip-bg: var(--olive); --chip-fg: var(--ink); }
.chip--blush    { --chip-bg: var(--blush); --chip-fg: var(--ink); }
.chip--forest   { --chip-bg: var(--forest); --chip-fg: #fff; }
.chip--amber.is-active .chip-dot,
.chip--sky.is-active .chip-dot,
.chip--olive.is-active .chip-dot,
.chip--blush.is-active .chip-dot { background: rgba(61,53,48,0.16); color: var(--ink); }

/* ────────── En-tête de page (pages secondaires) ────────── */
.pagehead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 18px;
}
.pagehead-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ph-bg, var(--burgundy));
  color: var(--ph-fg, #fff);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.pagehead-icon svg { width: 28px; height: 28px; }
.pagehead-icon--illus {
  background: #fff;
  padding: 4px;
}
.pagehead-icon--illus svg { width: 48px; height: 48px; }
.pagehead-text { min-width: 0; flex: 1; }
.pagehead-title {
  font-family: var(--font-brand);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.pagehead-sub { margin-top: 4px; font-size: 13.5px; color: var(--ink-soft); }
.pagehead-action { flex-shrink: 0; }
@media (min-width: 600px) { .pagehead-title { font-size: 34px; } }

/* ────────── Recherche ────────── */
.search { position: relative; margin: 0 0 18px; }
.search input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 4px rgba(107,33,56,0.10);
}
.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey);
  pointer-events: none;
}
.search-icon svg { width: 18px; height: 18px; }

/* FEAT-036 : cadre « infos importantes » sur le dashboard (notifications à
   faire, …). Visuellement plus marqué qu'une simple .card. */
.alert-box {
  background: var(--blush-light, #FCE7E1);
  border: 1px solid var(--blush, #E8B5A7);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 14px 0 18px;
  box-shadow: var(--shadow-sm);
}
.alert-box-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.alert-box-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--burgundy, #6B2138);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.alert-box-title { font-weight: 700; font-size: 15px; }
.alert-box-sub { font-size: 13px; color: var(--ink-soft, #5A5048); }
.alert-box-list { display: flex; flex-direction: column; gap: 8px; }
.alert-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper, #fff);
  border-radius: 10px;
  padding: 10px 12px;
}
.alert-row-body { flex: 1; min-width: 0; }

/* BUG-014 : couple input + bouton Valider sur lend/return, pour la saisie
   clavier d'un code Ofelia ou d'un n° de carte. Le bouton "Scanner" reste
   au-dessous en `type="button"` pour ne pas absorber la touche Entrée. */
.search-with-submit {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.search-with-submit .search { margin: 0; }
.search-with-submit > .btn { padding-left: 18px; padding-right: 18px; }

/* ────────── Boutons ────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: filter .12s, transform .08s, box-shadow .15s;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--burgundy); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--burgundy-dark); }
.btn--accent { background: var(--orange); color: #fff; box-shadow: var(--shadow-sm); }
.btn--accent:hover { filter: brightness(0.95); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--cream); }
.btn--olive { background: var(--olive); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--olive:hover { filter: brightness(0.95); }
.btn--lg { padding: 14px 22px; font-size: 15px; }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
/* FEAT-044 : petit bouton scan inline — cercle plein dont le diamètre s'aligne
   sur la hauteur de l'input voisin (align-self: stretch + aspect-ratio 1). */
.scan-inline-btn {
  flex-shrink: 0;
  align-self: stretch;
  aspect-ratio: 1 / 1;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
}
.scan-inline-btn svg { width: 20px; height: 20px; }

/* ────────── KPI ────────── */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (min-width: 600px) { .kpis { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .kpis { grid-template-columns: repeat(6, 1fr); } }
.kpi {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 14px 16px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--kpi-color, var(--burgundy));
  opacity: 0.85;
}
.kpi-num {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.kpi-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.kpi-meta { font-size: 11px; color: var(--grey); margin-top: 2px; }

/* ────────── Titres de section ────────── */
.section-title {
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.section-title small {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.section-title .stitle-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 32px; height: 32px;
  border-radius: 10px;
  justify-content: center;
}
.section-title .stitle-badge svg { width: 16px; height: 16px; }

/* ────────── Cartes ────────── */
.card {
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 12px; }
.card-title {
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-sub { margin-top: 4px; font-size: 13px; color: var(--grey); }

/* ────────── Grilles ────────── */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ────────── Tables (catalogue, usagers, prêts) ────────── */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* BUG-017 : sur mobile, garantir un scroll horizontal au lieu de comprimer */
@media (max-width: 599px) {
  .table-wrap .table { min-width: 560px; }
}
.table th, .table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table th {
  background: var(--cream);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 700;
}
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: rgba(247,245,240,0.5); }
.cell-title { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 12px; color: var(--grey); margin-top: 2px; }
.cell-link { color: var(--burgundy); font-weight: 600; }
.cell-link:hover { text-decoration: underline; }

/* ────────── Listes (cartes mobiles) ────────── */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-row {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
}
.list-row:hover { box-shadow: var(--shadow-md); }
.lrow-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--lr-bg, var(--cream));
  color: var(--lr-fg, var(--ink));
}
.lrow-icon svg { width: 18px; height: 18px; }
.lrow-body { flex: 1; min-width: 0; }
.lrow-title { font-weight: 600; color: var(--ink); }
.lrow-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.lrow-end { font-size: 12.5px; color: var(--ink-soft); text-align: right; flex-shrink: 0; }

/* ────────── Badges ────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--cream-dark);
  color: var(--ink-soft);
}
.badge svg { width: 12px; height: 12px; }
.badge--ok   { background: var(--forest-light); color: var(--forest); }
.badge--late { background: var(--blush-light); color: #B83232; }
.badge--soon { background: var(--amber-light); color: #946906; }
.badge--info { background: var(--sky-light); color: var(--sky-dark); }
.badge--mut  { background: var(--cream-dark); color: var(--ink-soft); }

/* ────────── Formulaires ────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(107,33,56,0.10);
}
.field .errorlist { list-style: none; padding: 0; margin-top: 4px; }
.field .errorlist li { font-size: 12.5px; color: #B83232; }

/* Style pour les selects standalone (filtres) */
select.filter-select {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink-soft);
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
select.filter-select:focus {
  border-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(107,33,56,0.10);
}

/* ────────── Actions rapides (accueil) ────────── */
.qactions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 600px) { .qactions { grid-template-columns: repeat(4, 1fr); } }
.qaction {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.qaction:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.qaction:active { transform: scale(0.98); }
.qaction-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--qa-bg, var(--cream-dark));
  color: var(--qa-fg, var(--ink));
}
.qaction-icon svg { width: 18px; height: 18px; }
.qaction-label { font-weight: 600; font-size: 14px; color: var(--ink); }
.qaction-meta { font-size: 11.5px; color: var(--grey); }

/* ────────── Pied de page ────────── */
.footer {
  background: var(--burgundy);
  color: rgba(255,255,255,0.75);
  font-size: 12.5px;
  margin-top: auto;
}
.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 18px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footer img { height: 22px; opacity: 0.85; filter: brightness(0) invert(1); }

/* ────────── Tendance (sparkline) ────────── */
.trend {
  position: relative;
  height: 140px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 14px;
}
.trend svg { width: 100%; height: 100%; display: block; }

/* ────────── Bannière scan ────────── */
.scan-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--burgundy) 0%, var(--burgundy-dark) 100%);
  color: #fff;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  text-decoration: none;
  cursor: pointer;
}
.scan-banner .sb-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.scan-banner .sb-icon svg { width: 22px; height: 22px; }
.scan-banner .sb-text { flex: 1; min-width: 0; }
.scan-banner .sb-title { font-family: var(--font-brand); font-weight: 700; font-size: 16px; }
.scan-banner .sb-sub { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }
.scan-banner .sb-btn {
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--burgundy);
  font-weight: 700;
  font-size: 13px;
}

/* ────────── Utilitaires ────────── */
.muted { color: var(--ink-soft); }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.divider { height: 1px; background: var(--line); margin: 18px 0; border: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-md > * + * { margin-top: 14px; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 11.5px; }
.font-brand { font-family: var(--font-brand); }

/* ────────── Responsive utilitaires ────────── */
@media (max-width: 599px) { .hide-sm { display: none !important; } }
@media (min-width: 600px) { .only-sm { display: none !important; } }
@media (max-width: 699px) { .hide-md { display: none !important; } }

/* ────────── Messages flash Django ────────── */
.msg {
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  border-left-width: 4px;
}
.msg-success { background: var(--forest-light); border-color: var(--forest); color: #1d5c35; }
.msg-error   { background: var(--blush-light); border-color: #B83232; color: #8a1a1a; }
.msg-warning { background: var(--amber-light); border-color: var(--amber); color: #946906; }
.msg-info    { background: var(--sky-light); border-color: var(--sky-dark); color: #1a4a80; }

/* ────────── Pagination ────────── */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}
.pager-info { font-size: 13px; color: var(--ink-soft); }

/* ────────── Pilule condition (retour) ────────── */
.condition-pill {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.condition-pill.is-active {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.condition-pill--forest.is-active { background: var(--forest); color: #fff; }
.condition-pill--amber.is-active  { background: var(--amber); color: var(--ink); }
.condition-pill--blush.is-active  { background: var(--blush); color: var(--ink); }

/* ────────── Scan line (récolement / prêt) ────────── */
.scan-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 8px;
  font-size: 14px;
}
.scan-line.scan-ok   { border-color: var(--forest); background: var(--forest-light); }
.scan-line.scan-warn { border-color: var(--amber); background: var(--amber-light); }
.scan-line.scan-error{ border-color: #B83232; background: var(--blush-light); }

/* ────────── Métadonnées notice ────────── */
.record-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 24px;
  margin-bottom: 24px;
}
.record-meta dt { font-size: 12px; font-weight: 600; color: var(--grey); text-transform: uppercase; letter-spacing: 0.04em; }
.record-meta dd { margin: 0; font-size: 14px; }

/* ────────── Barre de filtres ────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-end;
}
.filter-bar input, .filter-bar select { margin: 0; }
.filter-bar input[type="search"] { flex: 1; min-width: 200px; }

/* ────────── Breadcrumb ────────── */
.breadcrumb { font-size: 13px; color: var(--grey); margin-bottom: 12px; }
.breadcrumb a { color: var(--burgundy); }
.breadcrumb a:hover { text-decoration: underline; }

/* ────────── Helpers formulaires ────────── */
.req { color: #B83232; }
.help-hint { display: block; font-size: 12px; color: var(--grey); margin-top: 4px; }
.field-error { display: block; font-size: 12.5px; color: #B83232; margin-top: 4px; }
.form-control,
input.form-control, select.form-control, textarea.form-control {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-size: 15px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
}
.form-control:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(107,33,56,0.10); }

details.advanced-section {
    margin: 14px 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    overflow: hidden;
}
details.advanced-section > summary {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cream);
    border-bottom: 1px solid transparent;
    transition: background .15s;
}
details.advanced-section > summary::-webkit-details-marker { display: none; }
details.advanced-section > summary::before {
    content: "▸";
    font-size: 12px;
    color: var(--grey);
    transition: transform .15s;
}
details.advanced-section[open] > summary { border-bottom-color: var(--line); }
details.advanced-section[open] > summary::before { transform: rotate(90deg); }
details.advanced-section > *:not(summary) { margin: 0; }
details.advanced-section[open] { padding: 16px; }
details.advanced-section[open] > summary { margin: -16px -16px 14px; }

.isbn-row { display: flex; gap: 8px; align-items: stretch; }
.isbn-row input { flex: 1; }
.isbn-row .btn { flex-shrink: 0; }

.form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

/* ────────── Paramètres ────────── */
.settings-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.settings-nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 14px;
}
.settings-nav a:hover { background: var(--cream); }

/* ────────── Impression / PDF ────────── */
@media print {
  .topbar, .tilestrip-wrap, .footer, .btn, .qactions, .scan-banner { display: none; }
  .page { padding: 0; }
  body { background: white; }
}

/* ────────── Icône Lucide ────────── */
.icon { vertical-align: -0.15em; flex-shrink: 0; }

/* ────────── Page d'avancé — sous-sections ────────── */
.adv-section { margin-bottom: 8px; }

/* ────────── Wizard ────────── */
.wizard-step { max-width: 600px; margin: 40px auto; }

/* ────────── Modal caméra (FEAT-024) ────────── */
.scan-camera-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.scan-camera-card {
  background: var(--paper);
  border-radius: var(--r-lg, 16px);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.scan-camera-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.scan-camera-title { font-weight: 700; font-size: 16px; }
.scan-camera-close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  padding: 0 4px;
}
.scan-camera-viewfinder {
  background: #000;
  width: 100%;
  aspect-ratio: 3 / 2;
  position: relative;
  overflow: hidden;
}
.scan-camera-viewfinder video { width: 100%; height: 100%; object-fit: cover; }
.scan-camera-hint {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--grey);
  text-align: center;
}
.scan-camera-error {
  padding: 0 16px 8px;
  color: #B83232;
  font-size: 13px;
  min-height: 18px;
  text-align: center;
}
.scan-camera-error:empty { display: none; }
.scan-camera-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
body.scan-camera-open { overflow: hidden; }

/* Bande de décodage centrale (~1/4 hauteur) pour le moteur Quagga — FEAT-045.
   html5-qrcode ombre lui-même l'extérieur de son qrbox. Le box-shadow géant
   assombrit tout sauf la bande claire. */
.scan-camera-band {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 37%;
  bottom: 37%;
  border: 2px solid var(--orange, #ED7538);
  border-radius: 8px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* Compteur live dans le viseur (mode continu — FEAT-045). */
.scan-camera-count {
  padding: 6px 16px 0;
  font-weight: 700;
  color: var(--forest, #3a6b35);
  text-align: center;
}
/* Dernier exemplaire trouvé (titre — auteur) affiché dans le viseur. */
.scan-camera-last {
  padding: 2px 16px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.scan-camera-last:empty { display: none; }

/* FEAT-046 : « exemplaire X » en gros lors d'un exemplaire supplémentaire. */
.scan-camera-last--copy {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--forest, #3a6b35);
}

/* FEAT-046 : tableau d'édition du lot de catalogage. */
.cat-scan-table td { vertical-align: middle; }
.cat-scan-table .form-control { padding: 4px 8px; font-size: 0.85rem; }
.cat-scan-table code { font-size: 0.78rem; white-space: nowrap; color: var(--ink-soft); }
/* Colonne Auteur / Titre : large, prioritaire. */
.cat-scan-table .cat-scan-meta { min-width: 260px; }
.cat-scan-author { font-weight: 600; color: var(--ink); }
.cat-scan-title { color: var(--ink-soft); font-size: 0.9rem; }
.cat-scan-isbn { margin-top: 2px; }
/* Scroll horizontal garanti sur mobile (table plus large que l'écran). */
.cat-scan-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cat-scan-table { min-width: 720px; }

@media (max-width: 480px) {
  .scan-camera-modal { padding: 0; }
  .scan-camera-card { max-width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .scan-camera-viewfinder { aspect-ratio: auto; flex: 1; }
}

@media print {
  .scan-camera-modal { display: none !important; }
}

/* Panneau de scan de la page rapport de récolement (FEAT-045). */
.scan-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.scan-panel-counts { font-size: 16px; color: var(--ink); }
.scan-panel--pulse .js-scan-inventory {
  animation: scanpulse 1.2s ease-in-out 3;
}
@keyframes scanpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 117, 56, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(237, 117, 56, 0); }
}
.scan-manual {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  max-width: 420px;
}
.scan-manual input { flex: 1; }
.inv-scan-live { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.inv-scan-row {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 8px;
  border-left: 3px solid var(--line);
}
.inv-scan-row.is-ok { background: var(--forest-light, #eef4ec); border-left-color: var(--forest, #3a6b35); }
.inv-scan-row.is-dup { background: var(--amber-light, #fbf2dd); border-left-color: var(--amber, #ED7538); }
.inv-scan-row.is-unknown { background: #fbe9e9; border-left-color: #B83232; }

/* Pastilles de codes Ofelia par notice (rapport — FEAT-045) :
   vert = exemplaire trouvé, rouge = manquant. */
.code-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.code-pill {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.code-pill--found { background: #e2efe0; color: #2f5b2c; }
.code-pill--missing { background: #fbe1e1; color: #9c2626; text-decoration: line-through; }
.code-legend { display: flex; gap: 10px; margin: 0 0 12px; }

/* ── FEAT-065 / FEAT-066 : langues parlées et enfants d'un usager ────────── */

/* Encadré de cases à cocher (22 langues). La classe est aussi posée sur chaque
   <input> par Django : les sélecteurs sont donc préfixés par l'élément. */
div.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e3d9cc);
  border-radius: 10px;
  background: var(--cream, #fdfaf5);
}
div.lang-grid > div { display: flex; align-items: center; gap: 8px; }
div.lang-grid label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink, #2b2118);
  letter-spacing: 0;
  cursor: pointer;
}
div.lang-grid input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; }

/* Une ligne « enfant » : prénom / sexe / âge sur une ligne, langues repliées. */
.child-row {
  border: 1px solid var(--line, #e3d9cc);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.child-row-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 110px auto;
  gap: 10px;
  align-items: end;
}
.child-row-head .field { margin-bottom: 0; }
.child-langs > summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft, #6a5b4c);
  margin-top: 10px;
}
.child-langs[open] > summary { margin-bottom: 8px; }

@media (max-width: 600px) {
  .child-row-head { grid-template-columns: 1fr 1fr; }
  .child-row-head .field:first-child { grid-column: 1 / -1; }
}

/* FEAT-069 : menus d'affectation en masse dans la barre d'action du catalogue. */
.bulk-assign {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 12px;
  column-gap: 10px;
}
.bulk-assign .field { margin-bottom: 0; min-width: 160px; }
.bulk-assign .field label { font-size: 12px; }

/* FEAT-073 : les deux cases « tout sélectionner » du catalogue. */
.select-all {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--cream, #fdfaf5);
  border: 1px solid var(--line, #e3d9cc);
  border-radius: 8px;
  font-size: 14px;
}
.select-all label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.select-all input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }

/* FEAT-073 : les deux boutons de mode restent côte à côte, même quand la barre
   de filtres passe à la ligne. */
.search-modes { display: inline-flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 600px) {
  .search-modes { width: 100%; }
  .search-modes .btn { flex: 1; justify-content: center; }
}

/* ────────── FEAT-088 : moteur de recherche de devise ────────── */
.currency-search { position: relative; }
.currency-search-input { width: 100%; }
.currency-results {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--line-strong, #d6c9b8);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(61,53,48,0.14));
}
.currency-result {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 2px 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--line, #e9e2d8);
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.currency-result:last-child { border-bottom: 0; }
.currency-result.is-active { background: var(--cream-dark, #f0e9de); }
.currency-code {
  grid-row: span 2;
  align-self: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--burgundy, #6B2138);
}
.currency-name { font-size: 14px; color: var(--ink, #3D3530); }
.currency-countries {
  font-size: 12px;
  color: var(--ink-soft, #7A6E66);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.currency-current { margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════════════
   FEAT-093 — Rapports
   Un public peu à l'aise avec l'informatique, souvent sur un écran modeste :
   une chose par bandeau sous 600 px, deux compteurs par ligne au maximum,
   et jamais un tableau qui déborde la page.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Boutons de choix : périodes, seuils, sommaire ──
   Un seul style pour tout ce qui se clique et se met en évidence quand il est
   actif. Les libellés sont des dates ou des titres, jamais des abréviations. */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; min-height: 42px;
    border-radius: 999px;
    border: 1.5px solid var(--line-strong);
    background: var(--paper);
    color: var(--ink);
    font-size: 14.5px; font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background .12s, border-color .12s, color .12s;
}
.chip-btn:hover { background: var(--cream); border-color: var(--burgundy); }
.chip-btn svg { width: 14px; height: 14px; }
.chip-btn--on {
    background: var(--burgundy);
    border-color: var(--burgundy);
    color: #fff;
}
.chip-btn--on:hover { background: var(--burgundy-dark); }

/* ── Hub : les actions du jour, plus lourdes que les statistiques ── */
.report-actions { display: grid; gap: 10px; }
.report-action {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; background: var(--paper);
    border: 1px solid var(--line); border-left: 5px solid var(--lr-fg, var(--burgundy));
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--ink);
}
.report-action:hover { background: var(--cream); }
.report-action-icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--lr-bg, var(--burgundy-light));
    color: var(--lr-fg, var(--burgundy));
}
.report-action-body { flex: 1; min-width: 0; }
.report-action-title { font-weight: 700; font-size: 16px; color: var(--burgundy); }
.report-action-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.report-action-count {
    flex-shrink: 0; min-width: 46px; padding: 6px 10px; border-radius: 999px;
    text-align: center; font-size: 20px; font-weight: 700;
    background: var(--cream-dark); color: var(--grey);
}
.report-action-count--on { background: var(--lr-fg, var(--burgundy)); color: #fff; }

.report-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.report-card {
    display: block; padding: 16px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink);
}
.report-card:hover { background: var(--cream); }
.report-card-icon {
    width: 38px; height: 38px; border-radius: 11px; display: grid;
    place-items: center;
    background: var(--lr-bg, var(--forest-light));
    color: var(--lr-fg, var(--forest));
    margin-bottom: 10px;
}
.report-card-title { font-weight: 700; font-size: 15.5px; color: var(--burgundy); }
.report-card-sub { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }

/* ── Écran de rapport ── */
.report-exports { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.report-note { font-size: 13px; margin: 6px 0 0; }
.report-block { margin-top: 26px; scroll-margin-top: 16px; }
.report-kpis { margin-top: 16px; }

/* Exports d'un sous-rapport : discrets, ils ne doivent pas concurrencer les
   deux gros boutons du haut de page. */
.block-exports { display: flex; gap: 12px; margin: -4px 0 10px; }
.block-exports a {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
    text-decoration: none;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
}
.block-exports a:hover { color: var(--burgundy); border-color: var(--burgundy); }
.block-exports svg { width: 14px; height: 14px; }

.report-toc {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-top: 20px; padding: 14px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.report-toc-label { font-weight: 700; font-size: 14px; color: var(--ink); }
.report-toc .chip-btn { font-size: 13.5px; padding: 8px 14px; min-height: 36px; }

/* ── Sélecteur de période et filtres ── */
.period-picker, .report-filters { margin-top: 14px; }
.period-label, .filter-label {
    font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--ink);
}
.period-custom { margin-top: 12px; }
.period-custom > summary {
    cursor: pointer; font-size: 14px; color: var(--burgundy); font-weight: 600;
    padding: 6px 0;
}
.period-form { margin-top: 10px; }
.period-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.period-form-row .field { flex: 1 1 180px; }
.filter-group + .filter-group { margin-top: 14px; }
.filter-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filter-form .field { flex: 1 1 200px; margin-bottom: 0; }

/* ── Tableau et graphe des mêmes données, côte à côte ──
   Le graphe prend la moitié droite sur grand écran. Un tableau de plus de
   quatre colonnes (`--wide`) garde la pleine largeur et pose son graphe en
   dessous : à moitié de page, ses colonnes deviendraient illisibles. */
.block-pair { display: block; }
.block-pair-chart { margin-top: 12px; }
@media (min-width: 900px) {
    .block-pair--split:not(.block-pair--wide) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    .block-pair--split:not(.block-pair--wide) .block-pair-chart { margin-top: 0; }
}

/* ── Graphes ── */
.chart-card { padding: 14px; }
.chart-scroll { overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; }

/* ── Téléphone : une chose par bandeau ── */
@media (max-width: 600px) {
    .report-kpis { grid-template-columns: repeat(2, 1fr); }
    .btn-row { display: grid; grid-template-columns: 1fr 1fr; }
    .chip-btn { justify-content: center; text-align: center; }
    .report-toc { display: block; }
    .report-toc .chip-btn { display: flex; margin-top: 6px; }
    .report-exports .btn { flex: 1 1 100%; justify-content: center; }
    .report-action-sub { display: none; }
}

@media print {
    .report-exports, .report-toc, .period-picker, .report-filters,
    .block-exports { display: none; }
    .report-block { break-inside: avoid; }
}