/* ============================================================================
   MaVerif — Design System v2 (refonte mai 2026)
   Direction : rouge pompier modernise, neutres chauds, type Inter cv11/ss01.
   Cible : PWA mobile-first, terrain (caserne, gants, nuit).
   ============================================================================ */

/* === Reset minimal === */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{margin:0;line-height:inherit;font-feature-settings:"cv11","ss01","ss03"}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
summary{display:list-item}
blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
menu,ol,ul{list-style:none;margin:0;padding:0}
textarea{resize:vertical}
[role=button],button{cursor:pointer}
:disabled{cursor:default}
img,video{max-width:100%;height:auto}
[hidden]{display:none}

/* ============================================================================
   Tokens — Light theme (defaut)
   ============================================================================ */
:root, [data-theme="light"] {
  /* === Palette brand v2 — rouge pompier modernise, plus profond === */
  --brand-50:  #FFF1EE;
  --brand-100: #FFDDD5;
  --brand-200: #FFB7A6;
  --brand-300: #FF8770;
  --brand-400: #F25A3F;
  --brand-500: #DC3220;
  --brand-600: #B6261A;
  --brand-700: #8C1C13;
  --brand-800: #65140D;
  --brand-900: #420C08;

  /* === Neutres chauds (legere teinte rouge pour coherence) === */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFAF8;
  --neutral-50:  #F5F3F0;
  --neutral-100: #ECEAE5;
  --neutral-150: #DDDAD3;
  --neutral-200: #C9C4BC;
  --neutral-300: #ACA69D;
  --neutral-400: #8B847A;
  --neutral-500: #6E685F;
  --neutral-600: #524D46;
  --neutral-700: #3A352F;
  --neutral-800: #25211C;
  --neutral-900: #14110E;

  /* === Tokens semantiques (compatibilite avec l'app existante) === */
  --fire-red: var(--brand-500);
  --fire-red-dark: var(--brand-700);
  --fire-red-light: var(--brand-400);
  --success-green: #22C55E;
  --warning-yellow: #FBBF24;

  /* === Surfaces (legacy + v2) === */
  --bg-primary:   var(--neutral-50);
  --bg-secondary: var(--neutral-100);
  --bg-tertiary:  var(--neutral-150);
  --bg-card:      var(--neutral-0);
  --bg-input:     var(--neutral-0);
  --bg-hover:     var(--neutral-50);
  --bg-badge:     var(--neutral-100);
  --bg:           var(--neutral-50);
  --bg-soft:      var(--neutral-100);
  --surface:      var(--neutral-0);
  --surface-2:    var(--neutral-25);
  --surface-inset:var(--neutral-50);

  /* === Texte === */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500); /* WCAG AA : #6E685F = 4.98:1 sur #F5F3F0, 5.51:1 sur blanc */
  --text:           var(--neutral-900);
  --text-muted:     var(--neutral-600);
  --text-subtle:    var(--neutral-400);
  --text-on-brand:  #FFFFFF;

  /* === Borders === */
  --border-color:   var(--neutral-150);
  --border-input:   var(--neutral-150);
  --border:         var(--neutral-150);
  --border-strong:  var(--neutral-200);
  --divider:        var(--neutral-100);

  /* === Semantique === */
  --success: #2A7F4A;
  --success-bg: #E8F5EE;
  --warning: #B6711A;
  --warning-bg: #FCF1DC;
  --danger:  #B6261A;
  --danger-bg: #FFE8E2;
  --info:    #1E5BB8;
  --info-bg: #E5EEFB;

  /* === Ombres feutrees (jamais "floating SaaS") === */
  --shadow-xs: 0 1px 0 rgba(20,17,14,0.04);
  --shadow-sm: 0 1px 2px rgba(20,17,14,0.06), 0 1px 1px rgba(20,17,14,0.04);
  --shadow-md: 0 4px 12px -2px rgba(20,17,14,0.08), 0 2px 4px -2px rgba(20,17,14,0.04);
  --shadow-lg: 0 12px 32px -8px rgba(20,17,14,0.16), 0 4px 8px -4px rgba(20,17,14,0.06);
  --shadow-brand: 0 4px 14px -2px rgba(220,50,32,0.28);
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --header-bg:     rgba(245,243,240,0.97);
  --header-shadow: var(--shadow-xs);
  --sticky-bg:     rgba(245,243,240,0.92);

  /* === Radii === */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-full: 9999px;

  /* === Spacing === */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* === Type scale === */
  --fs-xs:  0.75rem;     /* 12 */
  --fs-sm:  0.8125rem;   /* 13 */
  --fs-base:0.9375rem;   /* 15 */
  --fs-md:  1rem;        /* 16 */
  --fs-lg:  1.125rem;    /* 18 */
  --fs-xl:  1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;     /* 28 */
  --fs-3xl: 2.25rem;     /* 36 */
  --fs-4xl: 3rem;        /* 48 */

  --tracking-eyebrow: 0.10em;

  /* === Micro-interactions v2 (timing + courbes standardisees) === */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --focus-ring: 0 0 0 3px rgba(220,50,32,0.18);
  --shadow-modal: 0 16px 48px -12px rgba(20,17,14,0.28);

  /* === Toggle (legacy) === */
  --toggle-knob: #FFFFFF;
  --toggle-track: var(--neutral-150);
  --icon-bg: var(--neutral-100);

  /* === Touch === */
  --touch-min: 48px;

  /* === Safe area === */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ============================================================================
   Tokens — Dark theme
   ============================================================================ */
[data-theme="dark"] {
  --neutral-0:   #14110E;
  --neutral-25:  #1A1714;
  --neutral-50:  #1F1B17;
  --neutral-100: #28231E;
  --neutral-150: #332D27;
  --neutral-200: #423A33;
  --neutral-300: #5C5249;
  --neutral-400: #847A6F;
  --neutral-500: #A39A8F;
  --neutral-600: #C2BAB0;
  --neutral-700: #D8D2CA;
  --neutral-800: #E9E5DF;
  --neutral-900: #F5F2EC;

  --bg-primary:   var(--neutral-25);
  --bg-secondary: var(--neutral-50);
  --bg-tertiary:  var(--neutral-100);
  --bg-card:      var(--neutral-100);
  --bg-input:     var(--neutral-100);
  --bg-hover:     var(--neutral-100);
  --bg-badge:     var(--neutral-100);
  --bg:           var(--neutral-25);
  --bg-soft:      var(--neutral-50);
  --surface:      var(--neutral-100);
  --surface-2:    var(--neutral-50);
  --surface-inset:var(--neutral-50);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500); /* WCAG AA : #A39A8F = 6.44:1 sur #1A1714 (bg-primary), 5.62:1 sur #28231E (bg-card) */
  --text:           var(--neutral-900);
  --text-muted:     var(--neutral-600);
  --text-subtle:    var(--neutral-400);

  --border-color:   var(--neutral-150);
  --border-input:   var(--neutral-200);
  --border:         var(--neutral-150);
  --border-strong:  var(--neutral-200);
  --divider:        var(--neutral-150);

  --success-bg: #122A1B;
  --warning-bg: #2A1F0E;
  --danger-bg:  #2A1310;
  --info-bg:    #11203A;

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,0.6);
  --shadow-card:       var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-modal: 0 16px 48px -8px rgba(0,0,0,0.6);
  --header-bg:     rgba(20,17,14,0.97);
  --header-shadow: var(--shadow-xs);
  --sticky-bg:     rgba(20,17,14,0.92);

  --toggle-knob: #FAFAF9;
  --toggle-track: var(--neutral-200);
  --icon-bg: var(--neutral-100);
}

/* ============================================================================
   Base
   ============================================================================ */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-base);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-bottom: var(--safe-bottom);
}

::selection { background: var(--brand-200); color: var(--brand-900); }

/* === Utility === */
.container { max-width: 80rem; margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 640px) { .container { padding: 0 var(--s-6); } }
.tabular { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.t-primary   { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary  { color: var(--text-tertiary); }
.t-fire      { color: var(--brand-500); }

/* ============================================================================
   Cards
   ============================================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card-static {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.card-pad     { padding: var(--s-5); }
.card-pad-lg  { padding: var(--s-6); }
.card-elevated{ box-shadow: var(--shadow-md); }

/* ============================================================================
   Buttons — systeme v2
   ============================================================================ */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--touch-min);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.75rem;
  border: none;
  background: var(--brand-500);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--shadow-brand);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.btn-primary:hover  { background: var(--brand-600); transform: translateY(-1px); }
.btn-primary:active { background: var(--brand-700); transform: translateY(0) scale(0.98); }

.btn-fire {
  background: var(--brand-500);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--shadow-brand);
}
.btn-fire:hover  { background: var(--brand-600); }
.btn-fire:active { background: var(--brand-700); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { background: var(--neutral-50); border-color: var(--neutral-300); }

.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover { background: var(--neutral-100); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: var(--brand-700); }

.btn-success { background: var(--success); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 14px -2px rgba(42,127,74,0.30); }
.btn-success:hover { background: #23693E; }

.btn-disabled { background: #6B7280; color: #9CA3AF; opacity: 0.6; cursor: not-allowed; }

/* Feedback de pression reutilisable (tuiles, chips, elements cliquables) */
.pressable { transition: transform var(--dur-fast) var(--ease-out); }
.pressable:active { transform: scale(0.97); }

.btn-sm    { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg    { min-height: 56px; padding: 0 var(--s-6); font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn-block,
.btn-full  { width: 100%; }

/* ============================================================================
   Inputs
   ============================================================================ */
.input, .textarea, .select {
  width: 100%;
  min-height: var(--touch-min);
  padding: 0.75rem 1rem;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  border-radius: 0.5rem;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.textarea { padding: var(--s-3) var(--s-4); min-height: 96px; resize: vertical; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--neutral-300); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(220,50,32,0.18);
}

.field-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s-2);
}
.field-hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  margin-top: var(--s-2);
}
.field-icon { position: relative; }
.field-icon > svg, .field-icon > .icn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}
.field-icon > .input { padding-left: 44px; }

/* ============================================================================
   Badges & dots
   ============================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--neutral-100);
  color: var(--text-muted);
  border: 1px solid var(--border);
  line-height: 1.2;
}
.badge-success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: transparent; }
.badge-info    { background: var(--info-bg);    color: var(--info);    border-color: transparent; }
.badge-brand   { background: var(--brand-50);   color: var(--brand-700); border-color: transparent; }
.badge-dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Legacy badges (gardes pour compat) */
.badge-done { background: var(--success-bg); color: var(--success); border: 1px solid transparent; }
.badge-todo { background: var(--warning-bg); color: var(--warning); border: 1px solid transparent; }
[data-theme="dark"] .badge-done { background: rgba(34,197,94,0.15); color: #86EFAC; border-color: rgba(34,197,94,0.25); }
[data-theme="dark"] .badge-todo { background: rgba(251,191,36,0.15); color: #FDE68A; border-color: rgba(251,191,36,0.25); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-success { background: var(--success); }
.dot-warning { background: var(--warning); }
.dot-danger  { background: var(--danger); }
.dot-muted   { background: var(--neutral-300); }
.dot-pulse   { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* ============================================================================
   Section header
   ============================================================================ */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.section-head h2 {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.section-head .link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-600);
}

/* ============================================================================
   Flash messages
   ============================================================================ */
.flash {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 500;
  border: 1px solid;
}
.flash-error,
.flash-error.flash { background: var(--danger-bg); color: var(--danger); border-left: 4px solid var(--brand-500); border-color: rgba(182,38,26,0.22); }
.flash-warning,
.flash-warning.flash { background: var(--warning-bg); color: var(--warning); border-left: 4px solid var(--warning); border-color: rgba(182,113,26,0.22); }
.flash-success,
.flash-success.flash { background: var(--success-bg); color: var(--success); border-left: 4px solid var(--success); border-color: rgba(42,127,74,0.20); }
.flash-info,
.flash-info.flash { background: var(--info-bg); color: var(--info); border-left: 4px solid var(--info); border-color: rgba(30,91,184,0.20); }

[data-theme="dark"] .flash-error   { background: var(--danger-bg);  color: #FCA5A5; }
[data-theme="dark"] .flash-warning { background: var(--warning-bg); color: #FDE68A; }
[data-theme="dark"] .flash-success { background: var(--success-bg); color: #86EFAC; }

/* ============================================================================
   Hero — gradient brand modernise
   ============================================================================ */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--s-6);
  color: #fff;
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(135deg, #DC3220 0%, #8C1C13 100%);
  box-shadow: var(--shadow-md);
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 22px);
  pointer-events: none;
  z-index: -1;
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 60% 100% at 100% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(135deg, #8C1C13 0%, #420C08 100%);
}

/* ============================================================================
   Vehicle tile
   ============================================================================ */
.vtile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 64px;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  position: relative;
}
.vtile:hover { border-color: var(--neutral-300); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vtile-marker {
  position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 var(--r-full) var(--r-full) 0;
}
.vtile-marker-ok      { background: var(--success); }
.vtile-marker-pending { background: var(--warning); }
.vtile-marker-danger  { background: var(--danger); }

/* List row */
.list-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--divider);
}
.list-row:last-child { border-bottom: none; }

/* ============================================================================
   Empty states — composant reutilisable (transforme un vide en invitation)
   ============================================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-4);
}
.empty-state-icon {
  width: 3rem; height: 3rem; border-radius: var(--r-lg);
  background: var(--brand-50); color: var(--brand-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.empty-state-icon.is-neutral { background: var(--bg-tertiary); color: var(--text-tertiary); }
.empty-state-title { font-weight: 700; color: var(--text); font-size: var(--fs-base); }
.empty-state-text { font-size: var(--fs-sm); color: var(--text-subtle); max-width: 32ch; margin: 0 auto; }

/* ============================================================================
   Animations
   ============================================================================ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease-out; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Skeleton de chargement (shimmer) — reutilisable, remplace le spinner generique */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}
.skeleton-line { height: 0.75rem; margin: 0.5rem 0; }
.skeleton-card { height: 5rem; margin-bottom: 0.75rem; }

/* Cible le MOUVEMENT (transform/animations/parallax), pas les fondus de couleur
   qui aident la lisibilite des etats (hover/focus restent fluides). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .pressable:active, .btn:active, .btn-primary:active, .btn-fire:active,
  .vtile:hover, .card:hover { transform: none !important; }
}

/* ============================================================================
   Focus
   ============================================================================ */
*:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Les inputs ont deja un halo brand au focus : eviter le double anneau au clavier */
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; }
/* Focus a fort contraste sur les fonds brand (rouge sur rouge = invisible sinon) */
.hero *:focus-visible, .dash-hero *:focus-visible, .header-fixed *:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.28);
}

/* ============================================================================
   Header (legacy compat — base.html re-declare le sien)
   ============================================================================ */
.header-fixed {
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 2px solid rgba(220,50,32,0.20);
  box-shadow: var(--header-shadow);
  transition: background-color 0.3s ease;
  padding-top: var(--safe-top);
}