/* ═══════════════════════════════════════════════════════════════════════════
   ElectroCAD — Auth/SPA skin v8
   Cohérent avec landing v8 rouge Suisse #DC2626 + Inter + glassmorphism
   Cible : /login /register /forgot-password /reset-password /dashboard /admin /profile /support
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --ec-bg: #060A14;
  --ec-bg-elev: rgba(15,23,42,0.65);
  --ec-border: rgba(255,255,255,0.10);
  --ec-border-strong: rgba(255,255,255,0.14);
  --ec-text: #F8FAFC;
  --ec-text-2: #94A3B8;
  --ec-text-3: #64748B;
  --ec-rouge: #DC2626;
  --ec-rouge-h: #B91C1C;
  --ec-rouge-d: #991B1B;
  --ec-rouge-l: #FCA5A5;
  --ec-glow: rgba(220,38,38,0.14);
  --ec-glow-strong: rgba(220,38,38,0.40);
}

/* ═══ Background ambiant rouge subtil pour les pages auth ═══ */
#app section.min-h-screen,
#app section.bg-ink-950 {
  position: relative;
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(220,38,38,0.07), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 110%, rgba(220,38,38,0.04), transparent 55%),
    linear-gradient(180deg, #060A14 0%, #0B1220 100%) !important;
}
/* Variante LIGHT mode : même structure (radial accents rouges) mais sur fond crème
   au lieu du navy sombre. Sinon ces pages restent en dark même en thème clair. */
[data-theme="light"] #app section.min-h-screen,
[data-theme="light"] #app section.bg-ink-950 {
  background:
    radial-gradient(ellipse 900px 600px at 50% -10%, rgba(220,38,38,0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 110%, rgba(220,38,38,0.03), transparent 55%),
    linear-gradient(180deg, #FFFEF8 0%, #F5F1E8 100%) !important;
  color: #1A1A1F;
}
/* Pulse décoratif : couleur ambre douce en light pour rester visible sans agresser */
[data-theme="light"] #app section.min-h-screen::before {
  background: radial-gradient(circle, rgba(220,38,38,0.06) 0%, transparent 70%) !important;
}

/* Pulse rouge décoratif derrière la card login/register */
#app section.min-h-screen::before {
  content: "";
  position: absolute;
  top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: ec-pulse 6s ease-in-out infinite;
}
@keyframes ec-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, 0) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, 0) scale(1.05); }
}

/* ═══ Card glassmorphism (login/register/dashboard cards) ═══ */
#app .bg-ink-900.rounded-3xl,
#app :not(.ec-dashboard) > .bg-ink-900.rounded-2xl, #app .bg-ink-900.rounded-2xl:not(.ec-d-panel):not(.ec-d-stat) {
  background: var(--ec-bg-elev) !important;
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid var(--ec-border) !important;
  position: relative;
  z-index: 1;
}

#app .bg-ink-900.rounded-3xl {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 30px 80px -20px rgba(0,0,0,0.75),
    0 0 0 1px rgba(220,38,38,0.06);
  overflow: hidden;
}

/* Liseré rouge sur le haut de la card login/register */
#app .bg-ink-900.rounded-3xl::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(220,38,38,0.55) 20%,
    rgba(220,38,38,0.55) 80%,
    transparent);
}

/* Dashboard cards : hover state subtle */
#app :not(.ec-dashboard) > .bg-ink-900.rounded-2xl, #app .bg-ink-900.rounded-2xl:not(.ec-d-panel):not(.ec-d-stat) {
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.6);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
#app :not(.ec-dashboard) > .bg-ink-900.rounded-2xl:hover, #app .bg-ink-900.rounded-2xl:not(.ec-d-panel):not(.ec-d-stat):hover {
  border-color: rgba(220,38,38,0.22) !important;
  box-shadow:
    0 16px 36px -14px rgba(0,0,0,0.7),
    0 0 0 1px rgba(220,38,38,0.10);
}

/* ═══ Logo lightning : gradient rouge Suisse ═══ */
#app .from-brand-500.to-brand-700 {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  box-shadow:
    0 0 0 1px rgba(220,38,38,0.32),
    0 12px 24px -8px rgba(220,38,38,0.45),
    0 0 32px -4px rgba(220,38,38,0.30) !important;
}

/* ═══ Typography H1 polish ═══ */
#app h1.text-2xl {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#app h1.text-2xl::after {
  content: "";
  display: block;
  width: 40px; height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #DC2626 0%, #991B1B 100%);
  border-radius: 2px;
}

#app h1.text-3xl, #app h1.text-4xl {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.025em;
}

/* ═══ Inputs design moderne ═══ */
#app input[type="email"],
#app input[type="password"],
#app input[type="text"],
#app input[type="tel"],
#app input[type="url"],
#app input[type="number"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(6,10,20,0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--ec-text) !important;
  font-size: 0.95rem;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#app input[type="email"]:hover,
#app input[type="password"]:hover,
#app input[type="text"]:hover,
#app input[type="tel"]:hover {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(15,23,42,0.70) !important;
}
#app input[type="email"]:focus,
#app input[type="password"]:focus,
#app input[type="text"]:focus,
#app input[type="tel"]:focus,
#app input[type="url"]:focus,
#app input[type="number"]:focus {
  border-color: var(--ec-rouge) !important;
  background: rgba(15,23,42,0.85) !important;
  box-shadow:
    0 0 0 4px rgba(220,38,38,0.12),
    0 0 24px -6px rgba(220,38,38,0.25) !important;
  outline: none !important;
}
#app input::placeholder {
  color: rgba(148,163,184,0.45);
  font-weight: 400;
}
/* ═══ LIGHT MODE OVERRIDE — même selector + [data-theme="light"] pour gagner en
   spécificité (110 → 120) et battre la règle dark plus haut. v34.13. */
[data-theme="light"] #app input[type="email"],
[data-theme="light"] #app input[type="password"],
[data-theme="light"] #app input[type="text"],
[data-theme="light"] #app input[type="tel"],
[data-theme="light"] #app input[type="url"],
[data-theme="light"] #app input[type="number"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #D4D2CD !important;
  color: #1A1A1F !important;
  box-shadow: 0 1px 2px rgba(11,14,22,0.04) !important;
}
[data-theme="light"] #app input[type="email"]:hover,
[data-theme="light"] #app input[type="password"]:hover,
[data-theme="light"] #app input[type="text"]:hover,
[data-theme="light"] #app input[type="tel"]:hover,
[data-theme="light"] #app input[type="url"]:hover,
[data-theme="light"] #app input[type="number"]:hover {
  border-color: #B8B5AE !important;
  background: #FFFFFF !important;
}
[data-theme="light"] #app input[type="email"]:focus,
[data-theme="light"] #app input[type="password"]:focus,
[data-theme="light"] #app input[type="text"]:focus,
[data-theme="light"] #app input[type="tel"]:focus,
[data-theme="light"] #app input[type="url"]:focus,
[data-theme="light"] #app input[type="number"]:focus {
  border-color: #DC2626 !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.18) !important;
}
[data-theme="light"] #app input[type="email"]:disabled,
[data-theme="light"] #app input[type="email"][readonly],
[data-theme="light"] #app input[type="text"]:disabled,
[data-theme="light"] #app input[type="text"][readonly],
[data-theme="light"] #app input[type="password"]:disabled,
[data-theme="light"] #app input[type="tel"]:disabled,
[data-theme="light"] #app input[type="number"]:disabled {
  background: #F5F1E8 !important;
  color: #57534E !important;
  border-color: #E5E2DA !important;
  opacity: 1 !important;
}
[data-theme="light"] #app input::placeholder { color: #9CA3AF !important; opacity: 1 !important; }
/* Autofill Chrome/Edge — désactive le fond bleu-gris injecté par browser */
[data-theme="light"] #app input[type="email"]:-webkit-autofill,
[data-theme="light"] #app input[type="password"]:-webkit-autofill,
[data-theme="light"] #app input[type="text"]:-webkit-autofill,
[data-theme="light"] #app input[type="tel"]:-webkit-autofill,
[data-theme="light"] #app input[type="number"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #1A1A1F !important;
  caret-color: #1A1A1F !important;
}

/* Labels uniformes */
#app label.text-ink-200 {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: rgba(226,232,240,0.85) !important;
}

/* ═══ Bouton primary (CTA) submit — rouge Suisse premium ═══ */
#app button[type="submit"].bg-accent-500,
#app button.bg-accent-500,
#app a.bg-accent-500 {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 0 0 1px rgba(220,38,38,0.40),
    0 10px 20px -4px rgba(220,38,38,0.45),
    0 4px 8px -2px rgba(0,0,0,0.35);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}
#app button[type="submit"].bg-accent-500::before,
#app button.bg-accent-500::before,
#app a.bg-accent-500::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 200ms;
}
#app button[type="submit"].bg-accent-500:hover,
#app button.bg-accent-500:hover,
#app a.bg-accent-500:hover {
  background: linear-gradient(135deg, #B91C1C 0%, #991B1B 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 0 0 1px rgba(220,38,38,0.55),
    0 14px 28px -6px rgba(220,38,38,0.55),
    0 6px 12px -2px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
#app button[type="submit"].bg-accent-500:hover::before,
#app button.bg-accent-500:hover::before,
#app a.bg-accent-500:hover::before { opacity: 1; }
#app button[type="submit"].bg-accent-500:active,
#app button.bg-accent-500:active { transform: translateY(0); }
#app button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ═══ Liens secondaires (Créer un compte, Mot de passe oublié, etc.) ═══ */
#app a.text-brand-600 {
  color: #FCA5A5 !important;
  font-weight: 500;
  position: relative;
  transition: color 160ms;
  text-decoration: none;
}
#app a.text-brand-600:hover {
  color: #FFFFFF !important;
}
#app a.text-brand-600::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
#app a.text-brand-600:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ═══ Alerts ═══ */
#app .alert {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 16px;
  border: 1px solid;
  animation: ec-alert-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ec-alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
#app .alert-error {
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.30);
  color: #FCA5A5;
}
#app .alert-success {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.30);
  color: #86EFAC;
}
#app .alert-warning {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.30);
  color: #FCD34D;
}

/* ═══ Dashboard : Avatar initials rouge ═══ */
#app .from-brand-500.to-brand-700.rounded-full {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  box-shadow:
    0 8px 16px -4px rgba(220,38,38,0.45),
    0 0 0 4px rgba(220,38,38,0.10),
    0 0 0 1px rgba(220,38,38,0.20);
}

/* ═══ Dashboard : Stats numbers premium ═══ */
#app .text-xl.font-bold.text-white {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 60%, #FECACA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═══ Badges Pack en rouge sobre ═══ */
#app .bg-brand-50.text-brand-300 {
  background: rgba(220,38,38,0.12) !important;
  color: #FCA5A5 !important;
  border: 1px solid rgba(220,38,38,0.22);
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* "+ Ajouter un pack" outline button */
#app .text-brand-600.border-brand-200 {
  color: #FCA5A5 !important;
  border: 1px solid rgba(220,38,38,0.30) !important;
  transition: all 160ms;
  background: rgba(220,38,38,0.04);
}
#app .text-brand-600.border-brand-200:hover {
  color: #FFFFFF !important;
  border-color: rgba(220,38,38,0.60) !important;
  background: rgba(220,38,38,0.10) !important;
}

/* Icon pills dans dashboard stats — rouge brand */
#app .bg-brand-50.text-brand-600 {
  background: rgba(220,38,38,0.10) !important;
  color: #FCA5A5 !important;
}
#app .bg-accent-500\/10.text-accent-400 {
  background: rgba(220,38,38,0.10) !important;
  color: #F87171 !important;
}

/* ═══ Animation entrée du SPA ═══ */
#app > section {
  animation: ec-auth-mount 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ec-auth-mount {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Responsive fine-tune mobile ═══ */
@media (max-width: 640px) {
  #app .bg-ink-900.rounded-3xl {
    border-radius: 20px;
    padding: 28px 22px !important;
  }
  #app section.min-h-screen::before {
    width: 320px; height: 320px;
  }
  #app h1.text-2xl { font-size: 1.45rem; }
}

/* ═══ Reduce motion respect ═══ */
@media (prefers-reduced-motion: reduce) {
  #app section.min-h-screen::before { animation: none; }
  #app > section,
  #app .alert { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ═══ Drapeau Suisse subtil top-right décoratif (login/register) ═══ */
#app .bg-ink-900.rounded-3xl::after {
  content: "";
  position: absolute;
  top: 18px; right: 18px;
  width: 14px; height: 14px;
  background:
    linear-gradient(white, white) center / 65% 18%,
    linear-gradient(white, white) center / 18% 65%,
    #DC2626;
  background-repeat: no-repeat;
  border-radius: 3px;
  opacity: 0.45;
  box-shadow: 0 2px 6px rgba(220,38,38,0.40);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV v8 (extracted from shell v8 prod) — pour cohérence pages SPA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NAV v8 — copie depuis le shell v8 prod pour cohérence sur les pages SPA
   (login/register/dashboard/admin/profile/support/etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

 #nav a, .footer a { text-decoration: none; }


 /* ═══ FIX NAV : override Tailwind hidden/lg:hidden si Tailwind charge mal ═══ */
 @media (max-width: 1023px) {
   #nav-links { display: none !important; }
   #nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
 }

 @media (min-width: 1024px) {
   #nav-links { display: flex !important; align-items: center; gap: 28px; }
   #nav-toggle { display: none !important; }
   #mobile-nav, #mobile-nav-backdrop { display: none !important; }
   #nav-links a { color: var(--text2); font-size: 0.94rem; font-weight: 500; text-decoration: none; transition: color 160ms ease-out; padding: 4px 0; }
   #nav-links a:hover { color: #DC2626; }
   #nav-links a#nav-auth-btn { padding: 8px 18px; border: 1px solid var(--border, rgba(255,255,255,0.18)); border-radius: 6px; color: var(--text); font-weight: 600; transition: all 160ms ease-out; }
   #nav-links a#nav-auth-btn:hover { background: linear-gradient(135deg, #DC2626, #991B1B); border-color: #991B1B; color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25); }
   #nav-links .nav-theme-toggle { background: transparent; border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--text2); cursor: pointer; transition: all 160ms ease-out; }
   #nav-links .nav-theme-toggle:hover { color: #DC2626; border-color: rgba(220, 38, 38, 0.45); }
 }


 /* ═══ BURGER MOBILE BULLETPROOF — pattern :target CSS-only, ZÉRO JS ═══
    Le burger est un <a href="#mobile-nav">. Au tap, l'URL devient /preview/#mobile-nav
    et le sélecteur #mobile-nav:target affiche le panneau. Le lien "fermer" (href="#nav-close")
    pointe vers un id qui n'existe pas → :target ne matche plus → le menu se ferme.
    Aucun JS impliqué, marche sur tout navigateur supportant :target (IE9+, tous mobiles). */
 @media (max-width: 1023px) {
   #mobile-nav-backdrop { display: none; }
   #mobile-nav {
     position: fixed !important;
     top: 0 !important; right: 0 !important;
     width: min(88vw, 380px); height: 100dvh;
     background:
       radial-gradient(120% 60% at 100% 0%, rgba(220, 38, 38, 0.18), transparent 60%),
       radial-gradient(80% 40% at 0% 100%, rgba(220, 38, 38, 0.10), transparent 70%),
       linear-gradient(180deg, #14141A 0%, #0A0A0E 100%);
     border-left: 1px solid rgba(255,255,255,0.08);
     box-shadow: -28px 0 70px rgba(0,0,0,0.65), inset 1px 0 0 rgba(255,255,255,0.04);
     padding: 0;
     z-index: 100000;
     transform: translateX(100%);
     transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
     overflow-y: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
     display: flex;
     flex-direction: column;
   }
   [data-theme="light"] #mobile-nav {
     background:
       radial-gradient(120% 60% at 100% 0%, rgba(220, 38, 38, 0.10), transparent 60%),
       radial-gradient(80% 40% at 0% 100%, rgba(220, 38, 38, 0.06), transparent 70%),
       linear-gradient(180deg, #FFFEF8 0%, #F5F1E8 100%);
     border-left-color: rgba(20,18,12,0.10);
     box-shadow: -28px 0 60px rgba(120,80,40,0.20), inset 1px 0 0 rgba(0,0,0,0.03);
   }
   #mobile-nav:target {
     transform: translateX(0);
   }
   /* Header (logo + close) */
   #mobile-nav .mn-header {
     display: flex; align-items: center; justify-content: space-between;
     padding: 22px 22px 18px;
     border-bottom: 1px solid rgba(255,255,255,0.06);
   }
   [data-theme="light"] #mobile-nav .mn-header { border-bottom-color: rgba(20,18,12,0.08); }
   #mobile-nav .mn-brand {
     display: inline-flex; align-items: center; gap: 10px;
     color: var(--text, #E8E5DC);
     font-family: 'Inter', sans-serif;
     font-weight: 700;
     font-size: 1.05rem;
     letter-spacing: -0.01em;
     text-decoration: none;
     padding: 0; min-height: auto;
   }
   [data-theme="light"] #mobile-nav .mn-brand { color: #1A1A1F; }
   #mobile-nav .mn-brand:hover, #mobile-nav .mn-brand:focus { background: transparent; color: var(--text); }
   #mobile-nav .mn-bolt {
     display: inline-flex; align-items: center; justify-content: center;
     width: 32px; height: 32px;
     background: linear-gradient(135deg, rgba(220,38,38,0.18), rgba(220,38,38,0.06));
     border: 1px solid rgba(220,38,38,0.35);
     border-radius: 8px;
     color: #DC2626;
   }
   #mobile-nav .mn-eyebrow {
     padding: 22px 22px 8px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.68rem;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--text2, #87796E);
     opacity: 0.7;
   }
   /* Liste des liens */
   #mobile-nav .mn-list {
     padding: 4px 14px;
     display: flex; flex-direction: column;
     gap: 2px;
   }
   #mobile-nav .mn-list a {
     display: flex; align-items: center; gap: 14px;
     padding: 14px 14px;
     color: var(--text, #E8E5DC);
     font-size: 1.02rem;
     font-weight: 500;
     border-radius: 10px;
     text-decoration: none;
     min-height: 48px;
     position: relative;
     transition: background 160ms ease-out, color 160ms ease-out, transform 160ms ease-out, padding-left 200ms ease-out;
     opacity: 0;
     transform: translateX(20px);
   }
   #mobile-nav .mn-list a .mn-icon {
     display: inline-flex; align-items: center; justify-content: center;
     width: 28px; height: 28px;
     color: var(--text2, #87796E);
     opacity: 0.85;
     transition: color 160ms, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   #mobile-nav .mn-list a .mn-arrow {
     margin-left: auto;
     opacity: 0;
     transform: translateX(-6px);
     transition: opacity 160ms, transform 220ms;
     color: #DC2626;
   }
   #mobile-nav .mn-list a:hover, #mobile-nav .mn-list a:focus {
     background: linear-gradient(90deg, rgba(220,38,38,0.14), rgba(220,38,38,0.04));
     color: #FCA5A5;
     padding-left: 18px;
     outline: none;
   }
   [data-theme="light"] #mobile-nav .mn-list a:hover,
   [data-theme="light"] #mobile-nav .mn-list a:focus {
     background: linear-gradient(90deg, rgba(185,28,28,0.10), rgba(185,28,28,0.02));
     color: #991B1B;
   }
   #mobile-nav .mn-list a:hover .mn-icon, #mobile-nav .mn-list a:focus .mn-icon {
     color: #DC2626; transform: scale(1.1);
   }
   #mobile-nav .mn-list a:hover .mn-arrow, #mobile-nav .mn-list a:focus .mn-arrow {
     opacity: 1; transform: translateX(0);
   }
   /* Animation d'entrée staggérée des liens */
   #mobile-nav:target .mn-list a {
     animation: mnSlideIn 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }
   #mobile-nav:target .mn-list a:nth-child(1) { animation-delay: 80ms; }
   #mobile-nav:target .mn-list a:nth-child(2) { animation-delay: 130ms; }
   #mobile-nav:target .mn-list a:nth-child(3) { animation-delay: 180ms; }
   #mobile-nav:target .mn-list a:nth-child(4) { animation-delay: 230ms; }
   @keyframes mnSlideIn { to { opacity: 1; transform: translateX(0); } }
   /* CTA Connexion — bouton premium */
   #mobile-nav .mn-cta-wrap { padding: 14px 22px 8px; }
   #mobile-nav .mobile-nav-cta {
     display: flex; align-items: center; justify-content: center; gap: 10px;
     padding: 16px 20px;
     background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
     color: #fff !important;
     text-align: center;
     font-weight: 600;
     font-size: 1rem;
     letter-spacing: 0.01em;
     border-radius: 10px;
     text-decoration: none;
     box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
     transition: transform 160ms, box-shadow 220ms;
     min-height: 48px;
     opacity: 0; transform: translateY(8px);
   }
   #mobile-nav:target .mobile-nav-cta {
     animation: mnFadeUp 380ms cubic-bezier(0.22, 1, 0.36, 1) 280ms forwards;
   }
   @keyframes mnFadeUp { to { opacity: 1; transform: translateY(0); } }
   #mobile-nav .mobile-nav-cta:hover {
     transform: translateY(-2px);
     box-shadow: 0 12px 32px rgba(220, 38, 38, 0.45), inset 0 1px 0 rgba(255,255,255,0.18);
     background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
   }
   /* Bouton de fermeture (croix) */
   #mobile-nav .mobile-nav-close {
     position: static;
     width: 40px; height: 40px;
     display: inline-flex; align-items: center; justify-content: center;
     font-size: 24px; line-height: 1;
     color: var(--text2, #A09E97);
     background: transparent;
     border: 1px solid rgba(255,255,255,0.12);
     border-radius: 10px;
     padding: 0; margin: 0;
     text-decoration: none;
     transition: background 160ms, border-color 160ms, color 160ms, transform 160ms;
   }
   [data-theme="light"] #mobile-nav .mobile-nav-close { border-color: rgba(20,18,12,0.10); color: #87796E; }
   #mobile-nav .mobile-nav-close:hover {
     background: rgba(220, 38, 38, 0.12);
     border-color: rgba(220, 38, 38, 0.45);
     color: #DC2626;
     transform: rotate(90deg);
   }
   /* Toggle thème — pill button */
   #mobile-nav .mobile-theme-toggle {
     display: flex; align-items: center; justify-content: space-between; gap: 12px;
     margin: 14px 22px 0;
     padding: 12px 16px;
     background: rgba(255,255,255,0.04);
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: 12px;
     color: var(--text2, #A09E97);
     font-size: 0.78rem;
     font-family: 'JetBrains Mono', monospace;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     cursor: pointer;
     transition: background 160ms, border-color 160ms;
     min-height: 48px;
   }
   [data-theme="light"] #mobile-nav .mobile-theme-toggle {
     background: rgba(0,0,0,0.03);
     border-color: rgba(20,18,12,0.08);
     color: #87796E;
   }
   #mobile-nav .mobile-theme-toggle:hover {
     background: rgba(220,38,38,0.08);
     border-color: rgba(220,38,38,0.35);
     color: #FCA5A5;
   }
   [data-theme="light"] #mobile-nav .mobile-theme-toggle:hover { color: #991B1B; }
   #mobile-nav .mobile-theme-toggle .tt-icons { display: inline-flex; gap: 8px; align-items: center; }
   /* Spacer pour pousser le footer en bas */
   #mobile-nav .mn-spacer { flex: 1 1 auto; }
   /* Footer "Conçu en Suisse" */
   #mobile-nav .mn-footer {
     padding: 18px 22px 22px;
     border-top: 1px solid rgba(255,255,255,0.06);
     display: flex; align-items: center; justify-content: space-between; gap: 12px;
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.66rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--text2, #87796E);
     opacity: 0.7;
   }
   [data-theme="light"] #mobile-nav .mn-footer { border-top-color: rgba(20,18,12,0.08); color: #87796E; }
   #mobile-nav .mn-footer .mn-flag {
     display: inline-flex; align-items: center; gap: 6px;
     color: #DC2626;
   }
   #mobile-nav .mn-footer .mn-flag svg { display: block; }
   /* Backdrop */
   #mobile-nav:target ~ #mobile-nav-backdrop,
   #mobile-nav-backdrop.always-render { display: block; }
   #mobile-nav-backdrop {
     position: fixed; inset: 0;
     background: rgba(0,0,0,0.65);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     z-index: 99999;
     opacity: 0;
     pointer-events: none;
     transition: opacity 220ms ease-out;
   }
   #mobile-nav:target ~ #mobile-nav-backdrop {
     opacity: 1; pointer-events: auto; display: block;
   }
   /* Lock body scroll quand menu ouvert */
   html:has(#mobile-nav:target) body { overflow: hidden; }
 }

 [data-theme="light"] #nav-links a { color: #3A3A40; }

 [data-theme="light"] #nav-links a#nav-auth-btn { color: #1A1A1F; border-color: rgba(20,18,12,0.20); }

 [data-theme="light"] #nav-links .nav-theme-toggle { border-color: rgba(20,18,12,0.18); color: #3A3A40; }


 /* ═══ FIX visuels nav + rail signature ridicule ═══ */
 /* Logo nav : éclair rouge + texte couleur encre normale */
 #nav > div > a:first-child { color: var(--text) !important; font-weight: 600; }

 #nav > div > a:first-child svg { color: #DC2626 !important; }

 #nav > div > a:first-child > span:last-child { color: var(--text) !important; }

 [data-theme="light"] #nav > div > a:first-child { color: #1A1A1F !important; }

 [data-theme="light"] #nav > div > a:first-child > span:last-child { color: #1A1A1F !important; }


 /* Reset boutons natifs (preflight Tailwind off → bg blanc par défaut sinon) */
 #nav button, .footer button { background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer; padding: 0; }


 /* Burger : transparent avec border subtle. Maintenant un <a> anchor (pas un button), donc reset text-decoration. */
 a#nav-toggle,
 button#nav-toggle,
 #nav-toggle {
   background: transparent !important;
   background-color: transparent !important;
   border: 1px solid var(--border, rgba(255, 255, 255, 0.18)) !important;
   border-radius: 8px !important;
   color: var(--text, #E8E5DC) !important;
   width: 44px !important; height: 44px !important; /* WCAG 2.5.8 : 44×44 min target size */
   transition: background 160ms, border-color 160ms;
   appearance: none;
   -webkit-appearance: none;
   text-decoration: none !important;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
 }

 #nav-toggle svg { color: inherit !important; stroke: currentColor !important; }

 #nav-toggle:hover { background: rgba(220, 38, 38, 0.08) !important; border-color: rgba(220, 38, 38, 0.45) !important; color: #DC2626 !important; }

 [data-theme="light"] #nav-toggle { border-color: rgba(20, 18, 12, 0.20) !important; color: #1A1A1F !important; background: transparent !important; }


 /* ═══ NAV : background au scroll (glass blur) ═══ */
 #nav {
   transition: background 220ms ease-out, backdrop-filter 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, padding 200ms ease-out;
   border: 1px solid transparent;
   border-radius: 14px;
 }

 /* Hide navbar logo while hero is in view (évite doublon avec le logo géant du hero).
    Réapparaît dès que la nav passe en .is-scrolled (i.e. après le hero). */
 body:has(#hero) #nav > div > a:first-child {
   opacity: 0;
   transform: translateX(-6px);
   pointer-events: none;
   transition: opacity 280ms ease-out, transform 280ms ease-out;
 }

 body:has(#hero) #nav.is-scrolled > div > a:first-child {
   opacity: 1;
   transform: translateX(0);
   pointer-events: auto;
 }

 #nav.is-scrolled {
   background: color-mix(in srgb, var(--bg, #0E0E11) 82%, transparent);
   backdrop-filter: blur(16px) saturate(160%);
   -webkit-backdrop-filter: blur(16px) saturate(160%);
   border-color: var(--border, rgba(255, 255, 255, 0.10));
   box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
 }

 [data-theme="light"] #nav.is-scrolled {
   background: rgba(255, 254, 248, 0.92);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   border-color: rgba(20, 18, 12, 0.12);
   box-shadow: 0 6px 18px rgba(120, 80, 40, 0.10);
 }

 /* Ancien menu mobile (#nav-mobile) — neutralisé, remplacé par #mobile-nav (pattern :target) */
 #nav-mobile { display: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
   THÈME CLAIR — override des variables --ec-* (auth/SPA skin)
   Couvre #app .bg-ink-900.rounded-2xl/3xl (cards profile, login, register, etc.)
   ═════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --ec-bg: #FAF7EE;
    --ec-bg-elev: rgba(255, 254, 248, 0.92);
    --ec-border: rgba(20, 18, 12, 0.10);
    --ec-border-strong: rgba(20, 18, 12, 0.18);
    --ec-text: #1A1A1F;
    --ec-text-2: #3B3B3D;
    --ec-text-3: #6F6E6A;
    --ec-glow: rgba(220, 38, 38, 0.10);
    --ec-glow-strong: rgba(220, 38, 38, 0.30);
}