:root { --fg:#1a1a1a; --bg:#fafafa; --accent:#5b3a8c; --danger:#b3261e; }
* { box-sizing: border-box; }

/* Accessibilité (audit P3-12) : lien d'évitement + focus toujours visible. */
.skip-link {
  position:fixed; left:.5rem; top:-3rem; z-index:100;
  background:#fff; color:var(--accent); font-weight:600;
  padding:.5rem .9rem; border-radius:0 0 .4rem .4rem; text-decoration:none;
  transition:top .15s ease-in;
}
.skip-link:focus { top:0; }
/* :focus-visible ne s'affiche qu'au clavier — la souris ne declenche pas le contour. */
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:2px; }
.topbar :focus-visible, .menu-panel :focus-visible { outline-color:#fff; }
#contenu:focus { outline:none; }   /* cible du skip-link : focus programmatique, pas de contour */
/* Un placeholder n'est pas un label : il disparait a la saisie et n'est pas
   annonce de facon fiable. Label reel, masque visuellement. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
body { margin:0; font-family: system-ui, sans-serif; color:var(--fg); background:var(--bg); }
/* Sans regle globale, les liens de contenu restaient au bleu par defaut du navigateur.
   Les selecteurs plus specifiques (.topbar a, .chip, .btn-ghost) l'emportent deja. */
a { color:var(--accent); }
.topbar { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding:.6rem 1rem; background:var(--accent); color:#fff; }
.topbar a, .topbar .user { color:#fff; text-decoration:none; }
.brand { font-weight:700; font-size:1.1rem; }
.topbar-menu { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; flex:1; justify-content:space-between; }
.nav-left, .nav-right { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; }
.hamburger { display:none; background:transparent; font-size:1.5rem; line-height:1; padding:.1rem .5rem; }
/* Menu « Gestion » regroupé (audit RB2) — <details> natif accessible */
.menu { position:relative; }
.menu > summary { list-style:none; cursor:pointer; color:#fff; font-weight:600; }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary::after { content:" ▾"; font-size:.8em; }
.menu[open] > summary::after { content:" ▴"; }
.menu-panel { display:flex; flex-direction:column; gap:.7rem; }
@media (min-width:761px) {
  .menu-panel { position:absolute; top:calc(100% + .5rem); right:0; background:var(--accent); padding:.7rem .9rem; border-radius:.4rem; box-shadow:0 4px 12px rgba(0,0,0,.28); z-index:30; white-space:nowrap; }
  body.gestion .menu-panel { background:#b45309; }
}
.container { max-width: 60rem; margin:0 auto; padding:1.5rem 1rem; }
.inline { display:inline; }
.login { display:flex; flex-direction:column; gap:.5rem; max-width:20rem; }
button { cursor:pointer; padding:.4rem .8rem; border:0; border-radius:.3rem; background:var(--accent); color:#fff; }
/* Actions destructives / d'annulation : contour rouge, jamais le violet primaire (audit U2) */
button.danger, .btn.danger { background:#fff; color:var(--danger); border:1px solid var(--danger); }
button.danger:hover, .btn.danger:hover { background:var(--danger); color:#fff; }
button.link-danger { background:transparent; color:var(--danger); padding:.2rem .4rem; }
button.link-danger:hover { text-decoration:underline; }
/* Sur ecran tactile, une cible de 32px se rate : plancher a 44px (WCAG 2.5.5). */
@media (pointer:coarse) {
  button, .btn { min-height:44px; }
  /* inline-flex : sans centrage, un chip a 44px collerait son texte en haut. */
  .chip { min-height:44px; display:inline-flex; align-items:center; }
  /* Actions destructives : petites visuellement, mais visables au doigt. */
  button.link-danger { min-height:44px; display:inline-flex; align-items:center; }
}
.messages { list-style:none; padding:0; }
.notice-head { display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.cover { max-width:160px; height:auto; border-radius:.3rem; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.meta dt { font-weight:600; } .meta dd { margin:0 0 .4rem; }
.exemplaires { border-collapse:collapse; width:100%; } .exemplaires th,.exemplaires td{ text-align:left; padding:.35rem .6rem; border-bottom:1px solid #ddd; }
/* Le champ de recherche : 16px sinon iOS zoome au focus ; min-width:0 sinon il deborde. */
.search-bar { display:flex; gap:.5rem; margin:1rem 0; flex-wrap:wrap; }
.search-bar input { flex:1; min-width:0; font-size:16px; padding:.7rem .8rem; min-height:48px;
                    border:1px solid #ccc; border-radius:.45rem; }
.resultats { list-style:none; padding:0; } .resultats li{ padding:.35rem 0; border-bottom:1px solid #eee; }
.muted { color:#595959; }
.actions { display:flex; gap:.5rem; align-items:center; margin:.6rem 0; flex-wrap:wrap; }
.loan { background:#fff3e0; padding:.4rem .6rem; border-radius:.3rem; }
textarea { width:100%; font-family:inherit; }
.messages li.success { color:#1b5e20; } .messages li.error { color:#b71c1c; }
.stats { display:flex; flex-wrap:wrap; gap:.8rem; margin:1rem 0; }
.stat { background:#fff; border:1px solid #e0e0e0; border-radius:.4rem; padding:.6rem 1rem; min-width:6rem; text-align:center; }
.stat b { display:block; font-size:1.6rem; color:var(--accent); } .stat span { font-size:.8rem; color:#666; }
.stat.alert b { color:#b71c1c; }
.retard { color:#b71c1c; font-weight:600; }
.exports { display:flex; gap:.6rem; align-items:center; margin:.6rem 0; flex-wrap:wrap; }
.btn { display:inline-block; padding:.35rem .7rem; border:1px solid var(--accent); border-radius:.3rem; background:#fff; color:var(--accent); text-decoration:none; cursor:pointer; font-size:.9rem; }
.apa7-preview { max-width:40rem; }

/* accueil M12 — blocs */
.home-block { margin:1.5rem 0; }
.feature-card { display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid #e0e0e0; border-radius:.5rem; padding:1rem; }
.feature-title { font-size:1.2rem; font-weight:700; color:var(--accent); text-decoration:none; }
/* Grille : `width:14rem` en flex ne laissait qu'UNE colonne sous 360px (catalogue
   de 9800px de haut pour 11 ouvrages). En grid, les colonnes s'adaptent. */
.home-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(13rem, 1fr)); gap:1rem; align-items:start; }
.nouveaute { background:#fff; border:1px solid #e0e0e0; border-radius:.5rem; padding:.8rem; display:flex; flex-direction:column; gap:.3rem; }
.nouveaute .cover { max-width:100%; }
.small { font-size:.8rem; }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:.3rem; background:#eee; color:#555; font-size:.8rem; }
.badge.ok { background:#e8f5e9; color:#1b5e20; }
.badge.warn { background:#fef3c7; color:#92400e; }
.badge.off { background:#eee; color:#555; }

/* page notice — audit UI/UX (D32) */
.fil { margin:0 0 .8rem; font-size:.9rem; }
.notice-main { flex:1; min-width:16rem; }
.statut-line { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.5rem 0 .9rem; }
.statut-line .badge { font-size:.95rem; padding:.2rem .6rem; }
.resume { margin:1.1rem 0; }
.resume h2 { font-size:1.1rem; margin:.2rem 0 .4rem; }
details.cite { margin:.8rem 0; }
details.cite summary { cursor:pointer; color:var(--accent); font-weight:600; }
.gestion-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:1rem 0; padding:.7rem; background:#fff7ed; border:1px solid #fed7aa; border-radius:.4rem; }
.gestion-actions form { display:inline-flex; gap:.4rem; align-items:center; flex-wrap:wrap; }
.cover-link { display:inline-block; }

/* mode gestion — repère visuel (responsables) */
.mode-banner { display:none; }
body.gestion .topbar { background:#b45309; }
body.gestion .mode-banner { display:block; text-align:center; padding:.4rem 1rem; background:#fef3c7; color:#92400e; font-weight:600; font-size:.9rem; border-bottom:1px solid #fcd34d; }

/* catalogue D17 */
.facets { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.chip { display:inline-block; padding:.25rem .7rem; border:1px solid #ccc; border-radius:1rem; text-decoration:none; color:var(--fg); font-size:.85rem; }
.chip.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.pagination { display:flex; gap:1rem; align-items:center; margin:1.2rem 0; }

.resa-box { margin:1rem 0; }

/* responsive — menu hamburger (UI/UX mobile) */
@media (max-width:760px) {
  .hamburger { display:block; }
  .topbar-menu { display:none; flex-basis:100%; flex-direction:column; align-items:flex-start; gap:.7rem; padding-top:.4rem; }
  .nav-left, .nav-right { flex-direction:column; align-items:flex-start; width:100%; gap:.7rem; }
  .topbar.open .topbar-menu { display:flex; }
  .topbar-menu .inline { display:block; }
  .container { padding:1rem .8rem; }
  .notice-head { gap:1rem; }
  .exemplaires { display:block; overflow-x:auto; }
}

/* ===== Import : refonte mobile-first (D42) ===== */
.import-page { max-width: 34rem; }
.import-page h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.import-lead { color:#555; margin:0 0 1.1rem; }

.card { background:#fff; border:1px solid #e2e2e2; border-radius:.7rem; padding:1.1rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }

.scan-form .field-label { display:block; font-weight:600; margin-bottom:.4rem; }
.scan-input-row { display:flex; gap:.5rem; align-items:stretch; }
.scan-input-row input { flex:1; min-width:0; font-size:16px; padding:.7rem .8rem; border:1px solid #ccc; border-radius:.45rem; min-height:48px; }
.scan-input-row input:focus { outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent); }
.btn-primary { background:var(--accent); color:#fff; font-size:1rem; font-weight:600; padding:0 1.1rem; border-radius:.45rem; min-height:48px; white-space:nowrap; }
.btn-primary:hover { filter:brightness(1.08); }

.scan-sep { display:flex; align-items:center; gap:.7rem; margin:1rem 0; color:#6b7280; font-size:.85rem; }
.scan-sep::before, .scan-sep::after { content:""; flex:1; height:1px; background:#e2e2e2; }

.scan-actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.scan-actions > form, .scan-actions > .btn-action { flex:1 1 12rem; margin:0; }
.btn-action { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:54px; font-size:1rem; font-weight:600; background:#f3eefb; color:var(--accent); border:1px solid #d9c9f0; border-radius:.55rem; padding:.6rem .9rem; }
.btn-action:hover { background:#e9ddf9; }
.btn-action:disabled { opacity:.55; cursor:default; }

.photo-status { color:var(--accent); font-weight:600; margin:.7rem 0 0; }

.scanner { margin-top:1rem; }
.scanner video { display:block; width:100%; max-width:100%; border-radius:.6rem; background:#000; aspect-ratio:4/3; object-fit:cover; }
.scan-hint-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.6rem 0 0; }
.btn-ghost { background:#fff; color:var(--accent); border:1px solid var(--accent); padding:.5rem .9rem; min-height:44px; border-radius:.45rem; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn-ghost:hover { background:#f3eefb; }

.import-help { color:#5c5c5c; font-size:.85rem; margin:1.1rem 0 0; line-height:1.5; }
.import-help a { color:var(--accent); font-weight:600; text-decoration:none; }
.import-help a:hover { text-decoration:underline; }

/* Contrôle avant import (import_apercu) */
.meta-source { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.1rem; }
.meta-cover { max-height:120px; border-radius:.35rem; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.form-import { margin-top:0; }
.form-import p { margin:0 0 1rem; }
.form-import label { display:block; font-weight:600; margin-bottom:.3rem; }
.form-import input:not([type=radio]):not([type=checkbox]):not([type=file]),
.form-import select, .form-import textarea { width:100%; font-size:16px; padding:.6rem .7rem; border:1px solid #ccc; border-radius:.45rem; }
.form-import small { display:block; color:#6b7280; margin-top:.25rem; }
.form-actions { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:.4rem; }

@media (max-width:520px) {
  .scan-actions > form, .scan-actions > .btn-action { flex-basis:100%; }
  .home-grid { grid-template-columns:repeat(2, 1fr); }
}

/* ===== Suggestions : la page etait rendue sans aucun style (audit UI/UX 2026-07-10) ===== */
.suggestion-form { display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; margin:1rem 0 1.5rem; }
.suggestion-form textarea { width:100%; font-size:16px; padding:.6rem .7rem; border:1px solid #ccc; border-radius:.45rem; font-family:inherit; }

.suggestions { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; }
.suggestion { background:#fff; border:1px solid #e2e2e2; border-radius:.7rem; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.suggestion-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.suggestion-head .meta { color:#5c5c5c; font-size:.85rem; }
.suggestion-texte { margin:.5rem 0 .8rem; line-height:1.5; }

.commentaires { list-style:none; margin:0 0 .8rem; padding:0 0 0 .9rem; border-left:3px solid #ece4f7; display:flex; flex-direction:column; gap:.5rem; }
/* La date (nowrap) et le « x » occupent la 1re ligne ; le texte prend toute la largeur
   en dessous. Sans `flex-basis:100%`, il se retrouvait coince dans ~120px sur mobile. */
.commentaire { display:flex; align-items:baseline; gap:.25rem .5rem; flex-wrap:wrap; font-size:.92rem; }
.commentaire .meta { color:#5c5c5c; font-size:.8rem; white-space:nowrap; order:1; }
.commentaire > form.inline { margin-left:auto; order:2; }   /* le « x » reste sur la ligne de la date */
.commentaire-texte { flex:1 0 100%; min-width:0; line-height:1.45; order:3; }

.commentaire-form { display:flex; gap:.5rem; flex-wrap:wrap; }
.commentaire-form input { flex:1; min-width:0; font-size:16px; padding:.55rem .7rem; min-height:44px; border:1px solid #ccc; border-radius:.45rem; }

/* Journal des connexions (B01) : la table deborde sur mobile -> elle scrolle
   dans son conteneur, jamais la page. */
.table-scroll { overflow-x:auto; }
.table-connexions { width:100%; border-collapse:collapse; font-size:.95rem; }
.table-connexions th, .table-connexions td { padding:.5rem .6rem; text-align:left; border-bottom:1px solid #e4e4e4; white-space:nowrap; }
.table-connexions .ua { max-width:22rem; overflow:hidden; text-overflow:ellipsis; }
.table-connexions .ok { color:#1b6b3a; font-weight:600; }
.table-connexions .echec { color:var(--danger); font-weight:600; }