/* ── Variables ── */
:root {
  --primary:    #f2f2f7;
  --accent:     #6366f1;
  --accent-h:   #818cf8;
  --bg:         #0d0d14;
  --surface:    #14141d;
  --surface-2:  #1c1c28;
  --surface-3:  #23232f;
  --border:     rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text:       #f2f2f7;
  --text-muted: #9797ab;
  --text-faint: #6b6b80;
  --success:    #34d399;
  --success-soft: rgba(52,211,153,.14);
  --danger:     #f87171;
  --danger-soft: rgba(248,113,113,.14);
  --warning:    #fbbf24;
  --warning-soft: rgba(251,191,36,.14);
  --accent-soft: rgba(99,102,241,.16);
  --radius:     10px;
  --shadow:     0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --sidebar-w:  248px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; width: 100%; overflow-x: hidden; }
body {
  display: flex;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  overscroll-behavior-x: none;
}
body.camera-open { overflow: hidden; position: fixed; inset: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 20px 14px; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .name { font-weight: 700; font-size: .95rem; color: var(--text); }
.brand-text .tag { font-size: .7rem; color: var(--text-faint); font-weight: 500; }

.nav-scroll { display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label { font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--text-faint); padding: 0 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--text-muted); font-size: .87rem; font-weight: 500;
  text-decoration: none; transition: background .15s, color .15s;
}
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-h); }

.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius); background: var(--surface-2); }

/* Bouton et fond d'estompage du menu mobile : caches par defaut (display:none),
   n'apparaissent qu'au breakpoint 900px ci-dessous ou la sidebar passe hors-champ. */
.sidebar-toggle {
  /* AT-021 (audit terrain 2026-09-03) : 44px, pas 40px - cible tactile
     minimale recommandee (WCAG 2.5.8/2.5.5) pour le seul acces au menu
     sur mobile. */
  display: none; align-items: center; justify-content: center;
  position: fixed; top: 12px; left: 12px; z-index: 1210;
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); cursor: pointer;
}
.sidebar-toggle:hover { background: var(--surface-2); }
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1190;
}
.sidebar-backdrop.is-open { display: block; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; border: 1px solid var(--border-strong); }
.user-info { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.user-info .u-name { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info .u-role { font-size: .7rem; color: var(--text-faint); }
/* AT-021 (audit terrain 2026-09-03) : 44x44 (icone 16px + padding), pas
   24x24 - meme cible minimale que .sidebar-toggle pour les icones
   securite/deconnexion. */
.logout-btn { background: none; border: none; cursor: pointer; color: var(--text-faint); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0; transition: color .15s, background .15s; }
.logout-btn:hover { color: var(--danger); background: var(--danger-soft); }

main { padding: 24px; }
main.with-nav { flex: 1; min-width: 0; padding: 28px 36px 56px; max-width: 1240px; }

/* ── Flash messages ── */
/* Toast de navigation : positionne au sommet du document, mais defile avec lui.
   La position absolue evite qu'il reste colle a la fenetre pendant le defilement
   tout en le retirant du flex-layout body/sidebar/main. */
.flash-container {
  /* top:96px (pas 16px) : sous la ligne titre+boutons d'action de .page-header/
     .page-actions (h1 1.5rem + boutons ~40px + marge), verifie visuellement
     via un test navigateur reel (le toast recouvrait "Telecharger PDF" sur
     la fiche facture avant ce correctif). */
  position: absolute; top: 96px; right: 16px; left: 16px; z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.flash-container .flash { width: 100%; max-width: 420px; pointer-events: auto; box-shadow: var(--shadow); }
.flash {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; border: 1px solid transparent;
}
.flash-success { background: var(--success-soft); color: var(--success); border-color: rgba(52,211,153,.3); }
.flash-danger  { background: var(--danger-soft); color: var(--danger); border-color: rgba(248,113,113,.3); }
.flash-warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(251,191,36,.3); }
.flash-info    { background: var(--accent-soft); color: var(--accent-h); border-color: rgba(99,102,241,.3); }

/* Encart "Prochaine etape" (fiche dossier, ProchaineEtapeService) : meme
   palette que .flash-info mais classe distincte - .flash est cible par le
   script d'auto-disparition de main.js (5s), cet encart doit rester visible
   tant que la condition qu'il decrit reste vraie. */
.next-step-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent-h); border: 1px solid rgba(99,102,241,.3);
  font-size: .9rem; font-weight: 500;
}
.next-step-banner .btn { flex-shrink: 0; }

/* ── Page header ── */
.page-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-bottom: 24px;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.page-header p { color: var(--text-muted); font-size: .9rem; margin-top: 2px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px;
  font-size: .875rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; transition: all .15s;
  min-height: 40px;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary  { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-h); }
.btn-outline  { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent-h); }
.btn-ghost    { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-danger   { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-success  { background: var(--success); color: #0d0d14; border-color: var(--success); }
.btn-warning  { background: var(--warning); color: #0d0d14; border-color: var(--warning); }
.btn-full { width: 100%; justify-content: center; }
.btn-lg { padding: 11px 24px; font-size: .95rem; }
/* AT-021 (audit terrain 2026-09-03) : 40px, pas 36px - reste sous 44px
   (texte + padding suffisant pour rester visuellement compact dans les
   tableaux), mais se rapproche de la cible tactile recommandee pour les
   actions de ligne (Voir/Modifier/Retirer...) frequemment utilisees sur
   mobile. */
.btn-sm { padding: 5px 11px; font-size: .78rem; min-height: 40px; }

/* Etat de chargement generique (voir global-handlers.js) : spinner en
   currentColor, s'adapte donc a n'importe quelle variante de bouton
   (primary/outline/danger/...) sans couleur codee en dur. Le texte reste
   visible - seul un anneau tournant s'ajoute apres, grace au gap deja
   present sur .btn (display:inline-flex). */
.btn.is-loading { opacity: .65; pointer-events: none; cursor: wait; }
.btn.is-loading::after {
  content: "";
  width: .8em; height: .8em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation: none; }
}

/* ── Cards ── */
.card {
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  overflow: hidden;
}
.card-full { grid-column: 1 / -1; }
.card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: .9rem; color: var(--text);
}
.card-body { padding: 20px; }

/* ── Forms ── */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.u-max-640 { max-width: 640px; }
.u-max-480 { max-width: 480px; }
.u-max-820 { max-width: 820px; }
.u-max-760 { max-width: 760px; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-32 { margin-bottom: 32px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mt-32 { margin-top: 32px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-mt-24 { margin-top: 24px; }
.u-mb-20 { margin-bottom: 20px; }
.u-mb-12 { margin-bottom: 12px; }
.field-error { color: var(--danger); font-size: .8rem; }
.u-flex-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.u-flex-card { flex: 1; min-width: 260px; }
.u-upload-preview { max-height: 80px; display: block; margin-bottom: 12px; }
/* AT-021 (audit terrain 2026-09-03) : 13px (taille native du navigateur)
   etait mesure comme trop petit sur mobile - agrandi a 18px. Le clic reste
   deja possible sur tout le <label> englobant (voir roles/form-fields.html
   et les autres formulaires a checkbox), mais la cible visuelle elle-meme
   doit rester lisible/actionnable independamment du texte associe. */
.checkbox-auto { width: 18px; height: 18px; }
.permission-option { margin-bottom: 4px; }
.label-normal { font-weight: normal; }
.page-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.inline-actions { display: flex; gap: 8px; }
.logout-form { display: inline; }
.listing-search-field { flex: 1; max-width: 320px; }
.link-inherit { color: inherit; text-decoration: none; }
.section-title-12 { margin-bottom: 12px; }
.settings-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-toc a {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-muted); text-decoration: none; font-size: .85rem;
}
.settings-toc a:hover, .settings-toc a:focus-visible { border-color: var(--accent); color: var(--text); }
.text-compact { font-size: .85rem; }
.text-muted-compact { color: var(--text-muted); font-size: .9rem; }
.text-muted-small { color: var(--text-muted); font-size: .85rem; }
.form-note { color: var(--muted); font-size: .8rem; }
.panel-soft { margin-bottom: 16px; background: var(--surface-soft); }
.text-muted-spaced { color: var(--text-muted); font-size: .85rem; margin: 6px 0 10px; }
.danger-text { color: var(--danger); font-weight: 600; }
.success-text { color: var(--success, green); }
.twofa-code { font-family: monospace; font-size: 1rem; letter-spacing: 1px; word-break: break-all; }
.twofa-qr { text-align: center; margin: 16px 0; }
.twofa-qr img { border-radius: 8px; }
.btn-full { width: 100%; }
.error-card { text-align: center; }
.error-icon { color: var(--text-faint); margin-bottom: 16px; }
.error-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.error-message { color: var(--text-muted); margin-bottom: 28px; }
.color-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; }
.dashboard-alerts { margin-bottom: 16px; }
.dashboard-alert-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.dashboard-alert-message { flex: 1; }
.dashboard-alerts-more summary { cursor: pointer; color: var(--text-muted); font-size: .85rem; padding: 8px 0; }
.dashboard-alerts-more[open] summary { margin-bottom: 4px; }
.dashboard-grid-wide { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.dashboard-grid-half { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dashboard-grid-half-last { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
.dashboard-grid-wide > *, .dashboard-grid-half > *, .dashboard-grid-half-last > * { min-width: 0; }
.dashboard-chart { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.text-faint-compact { color: var(--text-faint); font-size: .85rem; }
.tag-list { margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tag-chip { display: flex; align-items: center; gap: 6px; }
.tag-remove { display: inline; }
.tag-remove .btn { padding: 0 4px; }
.form-inline-end { display: flex; gap: 8px; align-items: end; margin-bottom: 24px; }
.form-inline-end .form-group { margin: 0; }
.form-inline-compact { display: flex; gap: 8px; align-items: end; }
.form-inline-compact .form-group { margin: 0; }
.passport-capture { display: flex; flex-direction: column; gap: 6px; min-width: 230px; }
.passport-capture-form { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.passport-camera-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.passport-camera-modal { position: fixed; inset: 0; z-index: 1000; display: flex; width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; flex-direction: column; gap: 12px; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: #080b10; color: #fff; }
.passport-camera-modal[hidden] { display: none !important; }
.passport-camera-modal-header, .passport-camera-modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.passport-camera-modal-header .btn { color: #fff; border-color: rgba(255,255,255,.45); }
.passport-camera-stage { position: relative; display: flex; flex: 1 1 auto; min-height: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: #000; }
.passport-camera-preview { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; background: #000; }
.passport-camera-frame { position: absolute; width: min(90vw, 680px); aspect-ratio: 1.42 / 1; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.42); pointer-events: none; transition: border-color .2s ease, box-shadow .2s ease; }
.passport-camera-frame.is-valid { border-color: var(--success); box-shadow: 0 0 0 9999px rgba(0,0,0,.42), 0 0 0 4px var(--success); }
.passport-camera-modal-help { margin: 0; color: rgba(255,255,255,.86); text-align: center; }
.passport-camera-modal-actions { justify-content: center; }
.passport-capture-result-link { display: block; width: 100%; max-width: 360px; }
.passport-capture-result { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; background: #000; }
.passport-analysis-button { width: 100%; justify-content: center; }
.passport-existing-photo-label { cursor: pointer; }
.passport-camera-status { margin: 0; max-width: 280px; }
.passport-extraction-valid { border-color: var(--success); box-shadow: 0 0 0 2px var(--success-soft), var(--shadow); }
.form-group label { font-size: .8rem; font-weight: 600; color: var(--text-faint); letter-spacing: .1px; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 9px 12px; border: 1.5px solid var(--border-strong);
  border-radius: 8px; font-size: .9rem;
  font-family: inherit; background: var(--surface-2); color: var(--text);
  transition: border-color .15s;
  width: 100%;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-faint); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group input[readonly] { background: var(--surface); color: var(--text-muted); cursor: default; }

/* Le bouton natif "Choisir un fichier" suit le style par defaut du systeme
   d'exploitation, pas celui de l'appli : sa taille et son style variaient
   d'un ecran a l'autre a cote des .btn themes. ::file-selector-button est le
   point d'extension standard pour le reharmoniser, sans reimplementer tout
   le controle en JS. */
input[type="file"] { font-family: inherit; font-size: .85rem; color: var(--text-muted); max-width: 100%; }
input[type="file"]::file-selector-button {
  font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  padding: 8px 16px; margin-right: 10px;
  border: 1.5px solid var(--border-strong); border-radius: 8px;
  background: transparent; color: var(--text);
  transition: all .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent-h); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .9rem; }
.form-check input { width: auto; }
.form-section { margin-bottom: 28px; }
.form-section h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.readonly-field .value-display { color: var(--text-muted); }
.total-field input { font-size: 1.05rem; font-weight: 700; color: var(--accent-h); }
.required { color: var(--danger); }

/* ── Auth page ── */
.auth-page {
  width: 100%; min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 15%, rgba(99,102,241,.16), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(52,211,153,.10), transparent 45%),
    var(--bg);
}
.auth-card {
  background: var(--surface); border-radius: 16px;
  border: 1px solid var(--border);
  padding: 48px 40px; width: 100%; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.auth-logo { text-align: center; margin-bottom: 32px; }
.auth-logo .brand-mark { width: 64px; height: auto; display: block; margin: 0 auto 14px; }
.auth-logo h1 { font-size: 1.6rem; font-weight: 800; color: var(--text); }
.auth-logo .brand-lite { color: var(--accent-h); }
.auth-logo p { color: var(--text-muted); font-size: .85rem; margin-top: 6px; }
.auth-form .form-group { margin-bottom: 16px; }
.auth-form .form-group label { font-size: .85rem; }
.auth-form .form-group input { padding: 11px 14px; }
.auth-footer { text-align: center; color: var(--text-faint); font-size: .78rem; margin-top: 24px; }

/* ── Upload ── */
.upload-container { max-width: 680px; margin: 0 auto; }
.drop-zone {
  border: 2px dashed var(--border-strong); border-radius: 16px;
  padding: 48px 32px; text-align: center;
  transition: all .2s; cursor: pointer;
  background: var(--surface);
}
.drop-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone.has-file  { border-color: var(--success); background: var(--success-soft); }
.drop-icon { color: var(--text-faint); margin-bottom: 16px; }
.drop-text { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.drop-sub  { color: var(--text-muted); font-size: .85rem; margin-bottom: 12px; }
.file-name { margin-top: 12px; font-size: .85rem; color: var(--success); font-weight: 600; }
.upload-info { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.info-item   { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--text-muted); }
.upload-actions { display: flex; justify-content: center; margin-top: 24px; }
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Preview ── */
.preview-form { }
.preview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;
}
.amounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.preview-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }

/* ── Table ── */
.table-card { position: relative; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: auto; -webkit-overflow-scrolling: touch; transition: box-shadow .2s ease, border-color .2s ease; }
.table-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.35); border-color: var(--border-strong); }

/* AT-021 : indicateur visuel de defilement horizontal (tableaux compresses
   sur mobile, voir .data-table min-width plus bas) - degrade estompe qui
   n'apparait que si le conteneur deborde reellement (classe posee par
   global-handlers.js), invisible sur desktop ou rien ne deborde. */
.table-card::before, .table-card::after,
.tab-nav::before, .tab-nav::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 28px;
  opacity: 0; transition: opacity .15s ease; pointer-events: none; z-index: 1;
}
.table-card::before, .tab-nav::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.table-card::after, .tab-nav::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.tab-nav::before { background: linear-gradient(to right, var(--bg), transparent); }
.tab-nav::after { background: linear-gradient(to left, var(--bg), transparent); }
.table-card.has-scroll-left::before, .tab-nav.has-scroll-left::before { opacity: 1; }
.table-card.has-scroll-right::after, .tab-nav.has-scroll-right::after { opacity: 1; }
.data-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.data-table thead tr { background: var(--surface-2); }
.data-table thead th { color: var(--text-muted); padding: 12px 14px; text-align: left; font-weight: 700; font-size: .78rem; letter-spacing: .1px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255,255,255,.02); }
.data-table tbody td { padding: 11px 14px; vertical-align: middle; color: var(--text); font-variant-numeric: tabular-nums; }
/* Numeros, dates et montants : jamais coupes sur deux lignes ("FAC-2026-" / "0007"). */
.data-table tbody td.nowrap, .data-table tbody td.nowrap .badge { white-space: nowrap; }
/* Tableau a nombreuses colonnes (factures) : marges resserrees pour tenir sur un ecran de portable. */
.data-table.compact { font-size: .8rem; }
.data-table.compact thead th, .data-table.compact tbody td { padding-left: 8px; padding-right: 8px; }
.data-table.compact .btn-sm { padding-left: 9px; padding-right: 9px; }
.invoice-num { font-weight: 700; color: var(--accent-h); }
.pnr-badge { font-family: monospace; background: var(--accent-soft); color: var(--accent-h); padding: 2px 8px; border-radius: 4px; font-size: .8rem; }
.prefix-badge { font-family: monospace; background: var(--surface-2); color: var(--text-muted); padding: 2px 6px; border-radius: 4px; }
.route { font-weight: 600; letter-spacing: .5px; }
.actions-cell { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.btn-icon-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 6px;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.btn-icon-action:hover { border-color: var(--accent); color: var(--accent-h); background: var(--accent-soft); }
.btn-icon-action.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge-green { background: var(--success-soft); color: var(--success); }
.badge-red   { background: var(--danger-soft); color: var(--danger); }
.badge-accent { background: var(--accent-soft); color: var(--accent-h); }
.badge-muted { background: var(--surface-2); color: var(--text-muted); }

/* ── Panels (dashboard charts/lists) ── */
.panel { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease; }
.panel:hover { box-shadow: 0 8px 28px rgba(0,0,0,.35); border-color: var(--border-strong); }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.panel-head h3 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--text); }
.panel-body { padding: 20px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 12px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { font-size: .82rem; color: var(--text-muted); }
.bar-track { height: 8px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #22c3dc, #8b5cf6); animation: bar-fill-grow 1.4s cubic-bezier(.22,.9,.32,1) both; }
.bar-value { font-size: .78rem; color: var(--text-faint); text-align: right; }
@keyframes bar-fill-grow { from { width: 0; } }

/* ── Stats ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: var(--shadow); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.stat-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.4); border-color: var(--border-strong); transform: translateY(-2px); }
.stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon.blue  { background: rgba(34,195,220,.16); color: #6fe3f2; }
.stat-icon.green { background: var(--success-soft); color: var(--success); }
.stat-icon.amber { background: var(--warning-soft); color: var(--warning); }
.stat-icon.violet { background: rgba(139,92,246,.16); color: #b794f6; }
.stat-icon.teal { background: rgba(20,184,166,.16); color: #5eead4; }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 1.6rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.admin-actions-bar { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .bar-fill { animation: none; }
  .stat-card:hover { transform: none; }
}

/* ── Pagination ── */
.pagination { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 20px; }
.page-btn { padding: 7px 16px; border: 1.5px solid var(--border-strong); border-radius: 8px; font-size: .85rem; font-weight: 600; color: var(--text-muted); background: var(--surface); text-decoration: none; transition: all .15s; }
.page-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.page-info { color: var(--text-faint); font-size: .85rem; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 64px 24px; color: var(--text-muted); }
.empty-state svg { margin-bottom: 16px; color: var(--text-faint); }
.empty-state p { font-size: 1rem; margin-bottom: 20px; }

/* ── Edit card ── */
.edit-card { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 28px; max-width: 820px; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.modal-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.modal-close:hover { background: var(--surface-2); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ── File chips (upload multiple) ── */
.file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.file-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); color: var(--accent-h);
  border: 1px solid rgba(99,102,241,.3); border-radius: 20px;
  font-size: .75rem; font-weight: 600;
  padding: 3px 10px; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Dossier meta ── */
.dossier-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.meta-label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-faint); letter-spacing: .1px; margin-bottom: 4px; }
.meta-value { font-size: .95rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.meta-value-accent { color: var(--accent-h); }
.dossier-notes { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.dossier-notes p { color: var(--text-muted); font-size: .9rem; }

/* ── Tabs ── */
.tab-nav { position: relative; display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-btn {
  padding: 10px 16px; border: none; background: none;
  font-family: inherit;
  font-size: .85rem; font-weight: 600; color: var(--text-faint);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text-muted); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── Reservation type picker ── */
.reservation-type-picker { max-width: 380px; }
.reservation-form-card { display: none; }
.reservation-form-card.active { display: block; }

/* ── Focus visibility ── */
/* Catch-all d'abord (couvre les checkboxes/radios et boutons sans classe
   .btn*, ex. le picker de type de reservation) - les selecteurs specifiques
   ensuite ne font que reaffirmer le meme style, gardes pour la lisibilite. */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
a:focus-visible, .nav-item:focus-visible, .tab-btn:focus-visible, .btn:focus-visible, .page-btn:focus-visible, .logout-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Accessibilite : contenu reserve aux lecteurs d'ecran / lien d'evitement ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Cache au-dessus de l'ecran par sa propre hauteur (pas une valeur fixe : a -40px, un lien
   de 43px laissait depasser 3px violets en haut a gauche), visible seulement au clavier. */
.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 1300;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
  transform: translateY(calc(-100% - 16px));
  transition: transform .15s ease;
}
.skip-link:focus {
  transform: none;
}

/* ── Rapports ── */
.rapport-filter-bar { display: flex; gap: 12px; align-items: end; margin-bottom: 8px; flex-wrap: wrap; }
.rapport-filter-bar .form-group { margin-bottom: 0; }
.rapport-index-filters { margin-bottom: 20px; }
.rapport-search-group { flex: 1 1 280px; }
.rapport-index-filters select { min-width: 220px; }
.rapport-result-count { color: var(--text-muted); font-size: .85rem; padding-bottom: 10px; }
.rapport-no-result { grid-column: 1 / -1; color: var(--text-muted); margin: 12px 0; }
.rapport-meta { color: var(--text-muted); font-size: .85rem; margin-bottom: 20px; }
.rapport-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rapport-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 8px; transition: border-color .15s; }
.rapport-card:hover { border-color: var(--accent); text-decoration: none; }
.rapport-card h3 { font-size: 1rem; font-weight: 700; color: var(--text); }
.rapport-card p { font-size: .85rem; color: var(--text-muted); margin: 0; }
.rapport-cat { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-h); }
.rapport-total-row td { font-weight: 700; border-top: 2px solid var(--border-strong); }
.rapport-bucket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.rapport-bucket { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.rapport-bucket .b-label { font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--text-faint); }
.rapport-bucket .b-value { font-size: 1.2rem; font-weight: 800; color: var(--text); margin-top: 4px; }
.rapport-bucket.danger .b-value { color: var(--danger); }

@media print {
  .sidebar, .btn, .rapport-filter-bar, form, .page-header a { display: none !important; }
  body { display: block; background: #fff; color: #000; }
  main.with-nav { padding: 0; max-width: none; }
  .table-card, .panel, .rapport-bucket, .rapport-card { box-shadow: none; border: 1px solid #999; }
  .data-table thead tr { background: #eee !important; }
  .data-table thead th, .data-table tbody td { color: #000 !important; }
  .rapport-meta, .stat-value, .b-value { color: #000 !important; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  body { flex-direction: column; }
  /* Sidebar hors-champ (off-canvas) plutot qu'une barre horizontale : sur un
     ecran de telephone, une quinzaine d'items de nav en ligne repliee sur
     plusieurs rangs poussait tout le contenu de la page bien plus bas que
     l'ecran visible. Cachee par translateX, ouverte via #sidebarToggle
     (voir global-handlers.js) qui bascule la classe .is-open. */
  .sidebar-toggle { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 1200;
    width: min(280px, 84vw); height: 100vh;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 22px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.is-open { transform: translateX(0); }
  .nav-scroll { flex-direction: column; flex-wrap: nowrap; gap: 18px; overflow-y: auto; }
  .nav-group { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-group-label { display: block; }
  .sidebar-footer { margin-left: 0; margin-top: auto; }
  main.with-nav { width: 100%; max-width: none; min-width: 0; padding-top: 64px; }
  .page-actions { flex-wrap: wrap; gap: 10px; }
  .inline-actions { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  main.with-nav { padding: 16px; padding-top: 64px; }
  .preview-grid  { grid-template-columns: 1fr; }
  .form-row      { grid-template-columns: 1fr; }
  .amounts-grid  { grid-template-columns: 1fr 1fr; }
  .table-card { width: 100%; max-width: 100%; min-width: 0; }
  .data-table    { min-width: 680px; font-size: .78rem; }
  .stats-grid    { grid-template-columns: 1fr 1fr; }
  .dashboard-grid-wide, .dashboard-grid-half, .dashboard-grid-half-last { grid-template-columns: 1fr; }
  .u-flex-card { min-width: 0; }
  .panel-head, .card-header, .modal-header, .modal-footer { flex-wrap: wrap; }
  .bar-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .bar-label { min-width: 0; overflow-wrap: anywhere; }
  .bar-track { grid-column: 1; grid-row: 2; }
  .bar-value { grid-column: 2; grid-row: 2; }
  .card-body, .edit-card { padding: 16px; }
  .form-inline-end, .form-inline-compact { align-items: stretch; flex-direction: column; }
  .form-inline-end .form-group, .form-inline-compact .form-group { width: 100%; }
  .form-inline-end .btn, .form-inline-compact .btn { width: 100%; justify-content: center; }
  .page-header > *, .page-actions > *, .form-actions > *, .preview-actions > * { flex: 1 1 180px; }
}
@media (max-width: 480px) {
  html { font-size: 14px; }
  .auth-card { padding: 32px 24px; }
  .stats-grid { grid-template-columns: 1fr; }
  .amounts-grid { grid-template-columns: 1fr; }
  /* Sous 480px, .u-flex-card { min-width: 0 } (regle a 768px) laisse le
     flexbox tasser 4 cartes cote a cote au lieu d'empiler (verifie
     visuellement via un test navigateur reel : "Signature"/"Tampon"
     tronques en "Signa"/"Tamp" sur la page Parametres a 320px). Une seule
     carte par ligne en dessous de ce seuil, comme .stats-grid ci-dessus. */
  .u-flex-card { flex: 1 1 100%; }
  main.with-nav { padding: 12px; padding-top: 64px; }
  .sidebar { padding: 12px 10px; gap: 14px; }
  .nav-item { min-height: 44px; }
  .sidebar-footer { width: 100%; margin-left: 0; }
  .page-header h1, .page-header h2 { font-size: 1.25rem; }
  .page-header > *, .page-actions > *, .form-actions > *, .preview-actions > * { flex-basis: 100%; }
  .inline-actions { width: 100%; }
  .inline-actions .btn { flex: 1 1 0; justify-content: center; }
  .passport-capture { min-width: 0; }
  .passport-camera-actions .btn { flex: 1 1 140px; justify-content: center; }
  .passport-camera-modal { gap: 10px; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  .passport-camera-stage { min-height: 0; }
  .passport-camera-frame { width: min(92vw, 520px); }
  .drop-zone { padding: 32px 16px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  main.with-nav { padding: 12px; padding-top: 64px; }
  .page-header, .page-actions { align-items: stretch; flex-direction: column; }
  .page-header { gap: 8px; margin-bottom: 16px; }
  .page-header > *, .page-actions > * { width: 100%; }
  .page-actions .btn { justify-content: center; }
  .tab-nav { flex-wrap: nowrap; overflow-x: auto; margin-right: -12px; padding-right: 12px; scrollbar-width: thin; }
  .tab-btn { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  .form-actions, .preview-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn, .preview-actions .btn { width: 100%; justify-content: center; }
  .dashboard-alert-row { align-items: stretch; flex-direction: column; }
  .panel-body, .card-body { padding: 14px; }
  .dossier-meta-grid { grid-template-columns: 1fr; gap: 10px; }
  .modal-overlay { padding: 12px; }
  .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
  .modal-footer { align-items: stretch; flex-direction: column; }
  .modal-footer .btn { width: 100%; justify-content: center; }
}

/* ── Theme clair (choix par utilisateur, memorise dans le navigateur par theme.js) ──
   Le theme sombre reste le defaut : il n'y a rien a surcharger. Le theme clair ne
   redefinit que les variables, plus les quelques couleurs codees en dur plus haut. */
:root[data-theme="light"] {
  color-scheme: light;
  --primary:    #14141f;
  --accent:     #4f46e5;
  --accent-h:   #4338ca;
  --bg:         #f4f5f9;
  --surface:    #ffffff;
  --surface-2:  #f1f2f8;
  --surface-3:  #e6e8f1;
  --border:     rgba(15,23,42,.10);
  --border-strong: rgba(15,23,42,.20);
  --text:       #14141f;
  --text-muted: #55576b;
  --text-faint: #6b6d82;
  --success:    #047857;
  --success-soft: rgba(4,120,87,.12);
  --danger:     #b91c1c;
  --danger-soft: rgba(185,28,28,.10);
  --warning:    #b45309;
  --warning-soft: rgba(180,83,9,.12);
  --accent-soft: rgba(79,70,229,.10);
  --shadow:     0 1px 2px rgba(15,23,42,.08), 0 6px 20px rgba(15,23,42,.08);
}
:root[data-theme="light"] .btn-success,
:root[data-theme="light"] .btn-warning { color: #fff; }
:root[data-theme="light"] .flash-success { border-color: rgba(4,120,87,.3); }
:root[data-theme="light"] .flash-danger  { border-color: rgba(185,28,28,.3); }
:root[data-theme="light"] .flash-warning { border-color: rgba(180,83,9,.3); }
:root[data-theme="light"] .flash-info,
:root[data-theme="light"] .badge-info { border-color: rgba(79,70,229,.3); }
:root[data-theme="light"] .data-table tbody tr:hover { background: rgba(15,23,42,.03); }
:root[data-theme="light"] .table-card:hover,
:root[data-theme="light"] .panel:hover,
:root[data-theme="light"] .stat-card:hover { box-shadow: 0 8px 24px rgba(15,23,42,.12); }
:root[data-theme="light"] .stat-icon.blue   { background: rgba(8,145,178,.12); color: #0e7490; }
:root[data-theme="light"] .stat-icon.violet { background: rgba(124,58,237,.12); color: #6d28d9; }
:root[data-theme="light"] .stat-icon.teal   { background: rgba(13,148,136,.12); color: #0f766e; }
:root[data-theme="light"] .modal-overlay,
:root[data-theme="light"] .sidebar-backdrop { background: rgba(15,23,42,.45); }

/* Les pages d'authentification et d'erreur gardent leur identite sombre quel que soit le theme. */
:root[data-theme="light"] body:has(.auth-page) {
  color-scheme: dark;
  --primary: #f2f2f7; --accent: #6366f1; --accent-h: #818cf8; --bg: #0d0d14; --surface: #14141d;
  --surface-2: #1c1c28; --surface-3: #23232f; --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.14);
  --text: #f2f2f7; --text-muted: #9797ab; --text-faint: #6b6b80; --success: #34d399;
  --success-soft: rgba(52,211,153,.14); --danger: #f87171; --danger-soft: rgba(248,113,113,.14);
  --warning: #fbbf24; --warning-soft: rgba(251,191,36,.14); --accent-soft: rgba(99,102,241,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}

/* Bouton de bascule : une seule icone visible selon le theme actif. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Pied de menu : l'identite en haut, puis les trois actions (theme, securite, deconnexion)
   l'une sous l'autre, chacune avec son icone nette et son libelle - cible tactile de 44 px. */
.sidebar-footer { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; flex-shrink: 0; }
.sidebar-footer .foot-user { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.sidebar-footer .logout-form { display: block; }
.sidebar-footer .logout-btn { width: 100%; justify-content: flex-start; gap: 12px; padding: 0 10px; color: var(--text-muted); font: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; }
.sidebar-footer .logout-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-footer .logout-btn:hover { color: var(--text); background: var(--surface-3); text-decoration: none; }
.sidebar-footer .theme-toggle:hover, .sidebar-footer .logout-btn[title="Sécurité du compte"]:hover { color: var(--accent-h); background: var(--accent-soft); }
.sidebar-footer .logout-form .logout-btn:hover { color: var(--danger); background: var(--danger-soft); }

/* Bandeau d'alerte de licence (fragments/layout.html). Le fragment de navigation est rendu
   avant <main> : plutot que de le positionner en fixe avec une hauteur supposee, le bandeau
   occupe une premiere ligne pleine largeur du conteneur flex (body), au-dessus du menu et du
   contenu. Sous 900 px le body n'est plus un flex : il reste simplement le premier bloc. */
body:has(.licence-banner) { flex-wrap: wrap; align-content: flex-start; }
.licence-banner { order: -1; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; font-size: .88rem; font-weight: 600; line-height: 1.4; border-bottom: 1px solid var(--border-strong); }
.licence-banner svg { flex-shrink: 0; }
.licence-banner-warning { background: var(--warning-soft); color: var(--warning); }
.licence-banner-danger { background: var(--danger-soft); color: var(--danger); }
@media (min-width: 901px) {
  /* Le menu fait toute la hauteur de la fenetre : on lui retire celle du bandeau (une ligne),
     sinon son pied passe sous le bas de l'ecran tant que la page n'a pas defile. */
  .licence-banner { min-height: 44px; }
  body:has(.licence-banner) .sidebar { height: calc(100vh - 44px); }
}
@media (max-width: 900px) {
  /* Le bouton du menu mobile est fixe en haut a gauche (12 px + 44 px). */
  .licence-banner { justify-content: flex-start; padding: 12px 16px 12px 68px; min-height: 68px; }
}
@media print { .licence-banner { display: none; } }

/* Bouton "oeil" des champs de mot de passe (ajoute par global-handlers.js). Cible de 44 px
   comme les autres boutons d'icone ; le champ garde la place du bouton a droite. */
.password-field { position: relative; display: block; }
.form-group .password-field input, .password-field input { padding-right: 48px; }
.password-toggle { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--text-faint); cursor: pointer; transition: color .15s; }
.password-toggle:hover, .password-toggle[aria-pressed="true"] { color: var(--accent-h); }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* Edge ajoute son propre oeil : un seul suffit. */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }

/* Case a cocher dans un libelle (fidelite, contact principal, politiques...) : case et texte
   sur la meme ligne, centres, quelle que soit la hauteur du texte. */
.form-group label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text); }
.form-group input[type="checkbox"] { width: 18px; height: 18px; padding: 0; margin: 0; flex-shrink: 0; accent-color: var(--accent); }