/* ============================================================
   main.css — Ordre des bannis Red Premium · IMPORTS MEGA-MODULE (cache bust ?v=1)
   Ordre: Design Tokens → Reset → Layout → Components → Cards → Forms → Tables → Admin → Sections → Hero → Animations → Responsive
   ============================================================ */
/* ============================================================
   _variables.css — Design Tokens · Ordre des Bannis
   Refonte "Cyber-Tactical Masterpiece & Parallax Luxury"
   Dual-thème : dark (abysse obsidienne & néon rubis) + light
   Breakpoints: 820 · 1200 · 1440 · 1920
   ============================================================ */

:root {
  /* ---------- Layout ---------- */
  --container: min(1320px, calc(100vw - 3.5rem));
  --container-padding: 2rem;
  --max-width: 1920px;
  --header-h: 84px;

  /* ---------- Modern Squircles Hierarchy ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 9999px;

  /* ---------- Spacing (8px scale) ---------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- Typography ---------- */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Space Grotesk', 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: clamp(.78rem, 0.74rem + 0.12vw, .86rem);
  --fs-sm: clamp(.88rem, 0.84rem + 0.16vw, .96rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-lg: clamp(1.18rem, 1.08rem + 0.4vw, 1.38rem);
  --fs-xl: clamp(1.48rem, 1.35rem + 0.6vw, 1.82rem);
  --fs-2xl: clamp(1.85rem, 1.62rem + 1vw, 2.5rem);
  --fs-3xl: clamp(2.4rem, 2.05rem + 1.5vw, 3.6rem);
  --fs-hero: clamp(3rem, 2.5rem + 2.8vw, 5.6rem);

  --line-body: 1.68;
  --line-head: 1.12;
  --ls-head: -0.03em;
  --ls-tight: -0.045em;

  /* ---------- Shadows (Profondes, diffuses + aura néon) ---------- */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.25);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45), 0 20px 48px rgba(0,0,0,.3);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.55), 0 35px 80px rgba(0,0,0,.4);
  --shadow-xl: 0 28px 72px rgba(0,0,0,.65), 0 60px 120px rgba(0,0,0,.5);
  --shadow-glow: 0 0 60px rgba(255,42,75,.15);
  --shadow-primary-glow: 0 12px 42px rgba(255,42,75,.35);
  --shadow-amber-glow: 0 12px 42px rgba(245,158,11,.32);
  --shadow-cyan-glow: 0 12px 42px rgba(6,182,212,.32);

  --shadow-card: 0 1px 1px rgba(0,0,0,.2), 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);

  /* ---------- Effects & Blur ---------- */
  --blur-sm: 12px;
  --blur-md: 24px;
  --blur-lg: 36px;
  --blur-xl: 52px;
  --blur-hero: 120px;
  --glass-saturate: 1.8;

  /* ---------- Z-index Hierarchy ---------- */
  --z-bg: 0;
  --z-content: 2;
  --z-header: 100;
  --z-nav: 120;
  --z-modal: 200;
  --z-toast: 300;
  --z-btt: 999;
  --z-laser: 1001;

  /* ---------- Transitions (Courbes Apple & Physique Inertielle) ---------- */
  --t-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-med: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-reveal: 650ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-spring: 520ms cubic-bezier(0.34, 1.45, 0.64, 1);

  /* ============================================================
     DARK THEME (DÉFAUT · ABYSSE OBSIDIENNE & NÉON ÉLITE)
     ============================================================ */
  --c-bg: #050307;
  --c-bg-soft: #0b0710;
  --c-bg-alt: #130c1c;
  --c-surface: rgba(255,255,255,.05);
  --c-surface-2: rgba(255,255,255,.085);
  --c-surface-hover: rgba(255,255,255,.12);
  --c-surface-solid: #150d1e;
  --c-border: rgba(255,255,255,.09);
  --c-border-strong: rgba(255,255,255,.18);
  --c-border-glow: rgba(255,42,75,.35);

  --c-primary: #ff2a4b;      /* Rouge Rubis Laser vibrant */
  --c-primary-700: #e11d48;
  --c-primary-900: #9f1239;
  --c-primary-soft: rgba(255,42,75,.14);
  --c-primary-glow: rgba(255,42,75,.28);

  --c-accent: #f59e0b;       /* Ambre Tactique Cyber */
  --c-accent-soft: rgba(245,158,11,.15);
  --c-cyan: #06b6d4;         /* Cyan HUD */
  --c-cyan-soft: rgba(6,182,212,.14);

  --c-success: #10b981;
  --c-warning: #f59e0b;
  --c-error: #f43f5e;
  --c-info: #38bdf8;

  --c-text: #f8fafc;
  --c-text-soft: #cbd5e1;
  --c-muted: #848a9b;
  --c-muted-2: #515667;

  --c-text-on-primary: #ffffff;
  --c-link: #ff3b5c;
  --c-link-hover: #000000;

  /* Glass tokens calibrés pour haute fidélité */
  --glass-bg: rgba(14, 9, 18, 0.65);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-bg-soft: rgba(14, 9, 18, 0.45);
  --glass-border-soft: rgba(255, 255, 255, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.16);

  /* Formulaire */
  --input-bg: rgba(255, 255, 255, 0.045);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus: var(--c-primary);

  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME (PORCELAINE TACTIQUE · ÉLÉGANCE CLAIRE)
   ============================================================ */
html[data-theme="light"] {
  --c-bg: #f4f5f8;
  --c-bg-soft: #ffffff;
  --c-bg-alt: #eaecf2;
  --c-surface: rgba(255,255,255,.8);
  --c-surface-2: rgba(255,255,255,.95);
  --c-surface-hover: #ffffff;
  --c-surface-solid: #ffffff;
  --c-border: rgba(15,10,25,.08);
  --c-border-strong: rgba(15,10,25,.16);
  --c-border-glow: rgba(225,29,72,.35);

  --c-primary: #e11d48;
  --c-primary-700: #be123c;
  --c-primary-900: #881337;
  --c-primary-soft: rgba(225,29,72,.1);
  --c-primary-glow: rgba(225,29,72,.22);

  --c-accent: #d97706;
  --c-accent-soft: rgba(217,119,6,.12);
  --c-cyan: #0891b2;
  --c-cyan-soft: rgba(8,145,178,.12);

  --c-success: #059669;
  --c-warning: #d97706;
  --c-error: #e11d48;
  --c-info: #0284c7;

  --c-text: #0f172a;
  --c-text-soft: #475569;
  --c-muted: #64748b;
  --c-muted-2: #94a3b8;

  --c-text-on-primary: #ffffff;
  --c-link: #e11d48;
  --c-link-hover: #000000;

  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(15, 10, 25, 0.09);
  --glass-bg-soft: rgba(255, 255, 255, 0.6);
  --glass-border-soft: rgba(15, 10, 25, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.95);

  --input-bg: rgba(15, 10, 25, 0.03);
  --input-border: rgba(15, 10, 25, 0.12);
  --input-focus: var(--c-primary);

  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 4px 12px rgba(15,23,42,.07);
  --shadow-md: 0 10px 25px rgba(15,23,42,.09);
  --shadow-lg: 0 20px 40px rgba(15,23,42,.11);
  --shadow-xl: 0 30px 60px rgba(15,23,42,.14);
  --shadow-glow: 0 0 50px rgba(225,29,72,.12);

  color-scheme: light;
}

/* Accessibilité Clavier */
html.kbFocus :focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (min-width: 1440px){ :root { --container: min(1400px, calc(100vw - 5rem)); } }
@media (min-width: 1920px){ :root { --container: min(1680px, calc(100vw - 7rem)); } }

/* ============================================================
   _base.css — Reset & Typographie & Body
   Refonte Apple-like Premium
   ============================================================ */


*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  width:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--line-body);
}
body{
  min-height:100dvh;
  width:100%;
  background: transparent;
  color: var(--c-text);
  font-size: var(--fs-base);
  position:relative;
  overflow-x:clip;
  transition: color .4s ease;
}

/* NB : l'image de fond (var --bg-image) + le voile (var --bg-overlay)
   sont gérés par body::before / body::after dans premium.css (!important).
   Le halo rouge d'ambiance est posé ici sur html::after (couche libre),
   au-dessus de l'image mais derrière le contenu (z-index -1, après le voile). */
html::after{
  content:"";
  position:fixed; inset:-20% -10% auto -10%;
  height:90vh; width:120vw; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 800px at -10% -18%, var(--c-primary-soft), transparent 60%),
    radial-gradient(900px 700px at 110% -6%, var(--c-accent-soft), transparent 62%),
    radial-gradient(800px 640px at 50% 120%, var(--c-primary-soft), transparent 58%);
  opacity:.85;
  filter: blur(30px);
}

img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--line-head);
  letter-spacing: var(--ls-head);
  color: var(--c-text);
  margin:0 0 var(--space-4);
}
h1{font-size: var(--fs-3xl);max-width:22ch;letter-spacing:var(--ls-tight)}
h2{font-size: var(--fs-2xl);max-width:24ch}
h3{font-size: var(--fs-xl);max-width:30ch}
h4{font-size: var(--fs-lg);max-width:36ch}
p{margin:0 0 1rem;max-width:68ch;color:var(--c-text-soft)}
p:last-child{margin-bottom:0}
a{color:var(--c-link);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--c-link-hover)}
ul,ol{padding-left:1.2rem;margin:0 0 1rem;max-width:68ch}
li{margin-bottom:.35rem;color:var(--c-text-soft)}
hr{border:0;border-top:1px solid var(--c-border);margin:var(--space-6) 0}
code{font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;font-size:.9em}
small{font-size:var(--fs-xs);color:var(--c-muted)}
em{font-style:normal}
.grad-text{
  background:linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 200%;
  animation: grad-shift 6s ease-in-out infinite;
}
.muted{color:var(--c-muted) !important}
.centered{margin-inline:auto;text-align:center;max-width:68ch}

button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer}
input,button,select,textarea{font:inherit;color:inherit}

/* Scrollbar élégante, fine */
*{scrollbar-width:thin;scrollbar-color:var(--c-border-strong) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--c-border-strong);
  border-radius:10px;border:3px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--c-muted);background-clip:padding-box}

::selection{background:var(--c-primary-soft);color:var(--c-text)}
input::selection,textarea::selection{background:var(--c-primary-soft)}

/* Utilitaire glass réutilisable */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--blur-md)) saturate(var(--glass-saturate));
}

@media (min-width:1920px){
  body::before{
    background:
      radial-gradient(2400px 1700px at -12% -18%, var(--c-primary-soft), transparent 60%),
      radial-gradient(2000px 1500px at 112% -8%, var(--c-accent-soft), transparent 62%),
      radial-gradient(1700px 1300px at 50% 125%, var(--c-primary-soft), transparent 58%);
    opacity:.6;
  }
}

/* ============================================================
   _layout.css — App shell · Container · Header · Footer · Sections
   ============================================================ */


/* ---------- SHELL ---------- */
.app-shell{
  position:relative;z-index:1;
  width:100%;
  min-width:100%;
  min-height:100dvh;
  display:flex;flex-direction:column;
  overflow-x:clip;
}
.app-main{
  position:relative;z-index:1;flex:1;
  padding-top: var(--space-6);
  padding-bottom: var(--space-9);
  padding-inline: clamp(.5rem, 1.8vw, 2.5rem);
}

/* ---------- CONTAINER ---------- */
.container{
  width: var(--container);
  margin-inline:auto;
  position:relative;
  z-index:2;
}

/* ---------- SECTION ---------- */
.section{
  position:relative;z-index:2;padding:var(--space-9) 0;
  padding-inline: clamp(.5rem, 1.8vw, 2.5rem);
}
.section--lg{padding:var(--space-10) 0 var(--space-9); padding-inline: clamp(.5rem, 1.8vw, 2.5rem);}
.section--alt{
  background:linear-gradient(180deg, transparent 0%, var(--c-bg-soft) 30%, var(--c-bg-soft) 70%, transparent 100%);
  padding:var(--space-10) 0;
  padding-inline: clamp(.5rem, 1.8vw, 2.5rem);
}
.section-head{margin-bottom:clamp(2.5rem,4vw,4rem);position:relative}
.section-head .kicker{margin-bottom:1.25rem}
.section-head h2{margin-bottom:1rem;font-size:var(--fs-3xl);max-width:30ch}
.section-head p{color:var(--c-muted);font-size:var(--fs-lg)}

/* ---------- GRIDS ---------- */
.grid-2col{
  display:grid;gap:clamp(1.25rem,2vw,2rem);
  grid-template-columns:1.2fr 1fr;align-items:stretch;
}
.cards-grid{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.mini-stats{
  display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(min(100%, 200px),1fr));
}

/* ---------- HEADER ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-header);
  width:100%;
  min-width:100%;
  backdrop-filter:blur(var(--blur-md));
  -webkit-backdrop-filter:blur(var(--blur-md));
  background:color-mix(in srgb, var(--c-bg) 60%, transparent);
  border-bottom:1px solid transparent;
  transition:all var(--t-med);
  padding-inline: clamp(1rem, 2.5vw, 4rem);
}
body{
  padding-top: var(--header-h);
  background-color: var(--c-bg);
  color: var(--c-text);
}
/* ---------- GLOBAL ANIMATED MESH BACKGROUND (SaaS Premium) ---------- */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  /* Static premium mesh gradient - no animation for max performance */
  background: 
    radial-gradient(circle at 0% 0%, var(--c-primary-soft), transparent 40%),
    radial-gradient(circle at 100% 100%, var(--c-accent-soft), transparent 40%);
  opacity: 0.5;
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.header.is-scrolled{
  backdrop-filter:blur(40px) saturate(1.5);
  -webkit-backdrop-filter:blur(40px) saturate(1.5);
  background:color-mix(in srgb, var(--c-bg) 75%, transparent);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 24px 80px rgba(0,0,0,.40), inset 0 -1px 0 rgba(255,255,255,.05);
  transform:translateY(0);
}
.header.is-scrolled .header__inner{
  height:calc(var(--header-h) - 10px);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--header-h);width:var(--container);margin-inline:auto;position:relative;
}
.logo{
  display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-head);font-weight:800;
  font-size:1.15rem;color:var(--c-text);text-decoration:none;
}
.logo__mark{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700));
  color:#fff;box-shadow:0 8px 24px var(--c-primary-glow), inset 0 1px 0 rgba(255,255,255,.25);
  font-size:1.1rem;
}
.logo__text{letter-spacing:-.02em;font-size:1.25rem}
.logo__text em{
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:normal;font-weight:600;opacity:.9;margin-left:.2rem;
}
.staff-logo .logo__mark{background:linear-gradient(135deg,var(--c-accent),var(--c-primary-900))}

/* ---------- NAV DESKTOP ---------- */
.nav{display:flex;align-items:center;gap:1.5rem;flex:1;justify-content:center}
.nav__mobile-head, .nav__mobile-cta{display:none}
.nav__list{
  display:flex;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0;
}
.nav__link{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.25rem;border-radius:999px;font-weight:600;font-size:1.05rem;
  color:var(--c-text-soft);transition:all var(--t-fast);position:relative;
}
.nav__link i{font-size:.9rem;opacity:.9}
.nav__link:hover{color:var(--c-text);background:var(--c-surface)}
.nav__link.is-active{
  color:var(--c-primary);
  background:var(--c-primary-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.nav__link.is-active::after{
  content:none;
}
.nav__link--admin{color:var(--c-accent)!important;font-weight:700}
.nav__link--admin.is-active{background:rgba(245,158,11,.1)!important}
.nav__link--staff{color:#a78bfa!important}

/* ---------- HAMBURGER ---------- */
.header__cta{display:flex;align-items:center;gap:.6rem}
.hamburger{
  width:44px;height:44px;border-radius:12px;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);
  transition:all var(--t-fast);
}
.hamburger span{display:block;width:22px;height:2.5px;background:var(--c-text);border-radius:4px;transition:all var(--t-fast)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- USER CHIP ---------- */
.user-chip{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.4rem .6rem .4rem .4rem;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all var(--t-apple);
}
.user-chip:hover{
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  transform: translateY(-2px);
}
.user-chip__avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.user-chip__name{font-weight:800;font-size:.95rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding-right:.5rem;}

/* ---------- FOOTER ---------- */
.footer{
  position:relative;z-index:2;
  width:100%;min-width:100%;
  margin-top:auto;padding-top:var(--space-10);padding-bottom:3rem;
  border-top:1px solid var(--glass-border);
  background: var(--glass-bg-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow:hidden;
}
.footer::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.footer__grid{
  display:grid;gap:4rem;
  grid-template-columns:1.5fr 1fr 1fr 1fr;padding-bottom:4rem;
}
.footer__brand p{color:var(--c-muted);margin-top:1.5rem;max-width:34ch;line-height:1.7;font-size:1.05rem;}
.footer__grid h4{
  font-family:var(--font-head);font-size:1.05rem;margin-bottom:1.5rem;letter-spacing:.05em;
  font-weight:800;
  color:var(--c-text);
}
.footer__col ul{list-style:none;padding:0;margin:0}
.footer__col ul li{margin-bottom:.85rem}
.footer__col a{color:var(--c-text-soft);text-decoration:none;transition:color var(--t-fast);font-size:1.05rem;}
.footer__col a:hover{color:var(--c-primary)}
.socials{display:flex;gap:.7rem;list-style:none;padding:0;margin:0 0 1rem!important}
.socials a{
  width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);
  transition:all var(--t-apple);font-size:1.2rem;
}
.socials a:hover{background:var(--c-primary);color:#fff;transform:translateY(-4px);border-color:var(--c-primary);box-shadow:var(--shadow-sm);}
.footer__contact{color:var(--c-muted);font-size:1rem;margin-top:.5rem}
.footer__bottom{
  padding-top:2.5rem;border-top:1px solid var(--c-border);
  display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  color:var(--c-muted-2);font-size:1rem;
}
.footer__bottom a{color:var(--c-text-soft)}

/* ---------- ERROR WRAP ---------- */
.err-wrap{
  min-height:70dvh;display:flex;align-items:center;justify-content:center;padding:var(--space-8) 1rem;
}
.err-card{
  text-align:center;width:100%;max-width:540px;padding:2rem;
}
.err-code{
  font-family:var(--font-head);font-size:clamp(6rem,18vw,11rem);font-weight:800;
  letter-spacing:-.05em;line-height:.9;margin-bottom:1.5rem;
}
.err-card h1{margin:1rem auto;font-size:var(--fs-2xl)}
.err-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.5rem}

/* ============================================================
   _components.css — UI Components Cyber-Tactiques
   Buttons · Inputs · Chips · Badges · Alerts · Kicker · Icon-btns
   Ordre des Bannis · Refonte Masterpiece
   ============================================================ */


/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.95rem 2.2rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}

.btn i {
  font-size: 1em;
  transition: transform var(--t-fast);
}

.btn:hover i {
  transform: translateX(3px);
}

.btn--sm {
  padding: 0.55rem 1.35rem;
  font-size: 0.88rem;
}

.btn--lg {
  padding: 1.15rem 2.6rem;
  font-size: 1.12rem;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-700) 100%);
  color: var(--c-text-on-primary);
  box-shadow: var(--shadow-primary-glow), inset 0 1px 0 rgba(255,255,255,0.28);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn--primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 45px var(--c-primary-glow), inset 0 1px 0 rgba(255,255,255,0.4);
}

.btn--primary:active {
  transform: translateY(0) scale(0.975);
}

.btn--primary.btn--alt {
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-primary-700) 100%);
  box-shadow: 0 12px 35px var(--shadow-amber-glow), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn--ghost {
  background: var(--glass-bg);
  color: var(--c-text);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-xs);
}

.btn--ghost:hover {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--shadow-sm), 0 0 25px rgba(255,255,255,0.06);
}

.btn--warn {
  background: linear-gradient(135deg, var(--c-warning), #b45309);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 25px var(--shadow-amber-glow);
}

/* ---------- ICON BUTTONS ---------- */
.icon-btn {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--c-text);
  transition: all var(--t-fast);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
  color: var(--c-primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-sm);
}

.icon-btn .theme-icon-dark, .icon-btn .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-icon-dark { display: inline; }
html[data-theme="light"] .theme-icon-light { display: inline; }

/* ---------- KICKER (Pill Label Futuriste) ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-saturate));
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-text);
  text-transform: uppercase;
  box-shadow: var(--shadow-xs);
  position: relative;
}

.kicker__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  box-shadow: 0 0 0 3px var(--c-primary-soft), 0 0 16px var(--c-primary);
  position: relative;
}

.kicker__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--c-primary);
  opacity: 0.5;
  animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- BADGES DE STATUT ---------- */
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-xs);
  font-family: var(--font-head);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat--pending {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
}

.stat--accepted {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.stat--refused {
  background: rgba(244, 63, 94, 0.14);
  color: #fb7185;
  border: 1px solid rgba(244, 63, 94, 0.35);
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.15);
}

/* ---------- CHIPS ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-sm));
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-soft);
}

.chip--glass { background: var(--glass-bg-soft); border: 1px solid var(--glass-border-soft); }
.chip--anim  { background: linear-gradient(135deg, rgba(255, 42, 75, 0.18), rgba(255, 42, 75, 0.05)); color: var(--c-primary); border-color: rgba(255, 42, 75, 0.4); }
.chip--modo  { background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.05)); color: var(--c-accent); border-color: rgba(245, 158, 11, 0.4); }
.chip--admin { background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), rgba(6, 182, 212, 0.05)); color: var(--c-cyan); border-color: rgba(6, 182, 212, 0.4); }
.chip--active { box-shadow: inset 0 0 0 2px var(--c-primary), 0 0 15px var(--c-primary-glow); }

/* ---------- ALERTS AVEC GLASSMORPHISM ---------- */
.alerts {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
}

.alert {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.15rem 1.5rem;
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  margin-bottom: 1.25rem;
  font-weight: 500;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  line-height: 1.55;
}

.alert .bi {
  font-size: 1.4rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.alert--success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.35);
  color: #a7f3d0;
}
.alert--success i { color: #10b981; }

.alert--error {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.38);
  color: #fecdd3;
}
.alert--error i { color: #f43f5e; }

.alert--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.38);
  color: #fde68a;
}
.alert--warn i { color: #f59e0b; }

.alert--verify-email {
  align-items: center;
}

.alert-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #050307;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.alert-verify-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5);
  color: #000;
}

/* ---------- FORMULAIRES & INPUTS ---------- */
.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 0 1.25rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  backdrop-filter: blur(var(--blur-sm));
}

.input-wrap:hover {
  border-color: var(--c-border-strong);
}

.input-wrap:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-soft), 0 0 24px var(--c-primary-glow);
  background: var(--c-surface-2);
}

.input-wrap i {
  color: var(--c-muted);
  margin-right: 0.85rem;
  flex-shrink: 0;
  font-size: 1.05rem;
  transition: color var(--t-fast);
}

.input-wrap:focus-within i {
  color: var(--c-primary);
}

.input-wrap input, .input-wrap select, .input-wrap textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-text);
  padding: 1.05rem 0;
  min-height: 48px;
  font-size: var(--fs-base);
  font-family: inherit;
  width: 100%;
}

.input-wrap .toggle-pw {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: all var(--t-fast);
  cursor: pointer;
  background: transparent;
  border: none;
}

.input-wrap .toggle-pw:hover {
  color: var(--c-primary);
  background: var(--c-primary-soft);
}

/* ---------- BOUTON RETOUR EN HAUT (BACK TO TOP) ---------- */
.btt {
  position: fixed;
  left: max(1.75rem, env(safe-area-inset-left));
  right: auto;
  bottom: max(1.75rem, env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 999px !important;
  z-index: var(--z-btt);
  background: linear-gradient(135deg, var(--c-primary, #ff3b3b), var(--c-accent, #ff6a45));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 9px 26px rgba(255,59,59,.45), inset 0 1px 0 rgba(255,255,255,.25);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-spring), box-shadow .25s ease;
  cursor: pointer;
  border: none;
}
.btt.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.btt:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 16px 40px rgba(255,59,59,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
}

/* ============================================================
   _cards.css — Cartes Cyber-Tactiques & Glassmorphism
   app-card · stat-card · glass-panel · note-box · panel-card
   Ordre des Bannis · Refonte
   ============================================================ */


/* ---------- APPLICATION CARD (Mes Candidatures / Suivi) ---------- */
.app-card {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
  position: relative;
  overflow: hidden;
}

.app-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
  opacity: 0;
  transition: opacity var(--t-fast);
}

.app-card:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: var(--shadow-lg), 0 0 25px var(--c-primary-glow);
  border-color: var(--c-border-strong);
}

.app-card:hover::before {
  opacity: 1;
}

.app-card__left {
  width: 76px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.app-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  transition: transform var(--t-spring);
}

.app-card:hover .app-card__icon {
  transform: scale(1.1) rotate(-4deg);
}

.app-card__icon--anim {
  background: linear-gradient(135deg, var(--c-primary), #ff6b8b);
  box-shadow: 0 10px 28px var(--c-primary-glow);
}

.app-card__icon--modo {
  background: linear-gradient(135deg, var(--c-accent), #f97316);
  box-shadow: 0 10px 28px var(--shadow-amber-glow);
}

.app-card__icon--admin {
  background: linear-gradient(135deg, var(--c-cyan), #3b82f6);
  box-shadow: 0 10px 28px var(--shadow-cyan-glow);
}

.app-card__body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.app-card__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.app-card__role {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-text);
  letter-spacing: -0.02em;
}

.app-card__date {
  color: var(--c-muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.app-card__snippet {
  color: var(--c-text-soft);
  font-size: 0.96rem;
  margin-bottom: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.55;
}

.app-card__meta {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.app-card__right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
  justify-content: center;
}

.applications-empty {
  text-align: center;
  padding: 4rem 2rem;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px dashed var(--c-border-strong);
  backdrop-filter: blur(var(--blur-md));
}

.applications-empty .bi-4x {
  margin-bottom: 1.25rem;
  color: var(--c-muted);
}

/* ---------- STAT CARD ---------- */
.stat-card {
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--c-border);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}

.stat-card:hover {
  border-color: var(--c-border-strong);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 30px rgba(255, 255, 255, 0.04);
}

.stat-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  color: #fff;
  transition: transform var(--t-spring);
}

.stat-card:hover .stat-card__icon {
  transform: scale(1.12);
}

.stat-card--primary .stat-card__icon {
  background: linear-gradient(135deg, var(--c-primary), #ff6b8b);
  box-shadow: 0 10px 24px var(--c-primary-glow);
}

.stat-card--accent .stat-card__icon {
  background: linear-gradient(135deg, var(--c-accent), #f97316);
  box-shadow: 0 10px 24px var(--shadow-amber-glow);
}

.stat-card--success .stat-card__icon {
  background: linear-gradient(135deg, var(--c-success), #059669);
  box-shadow: 0 10px 24px rgba(16, 185, 129, 0.35);
}

.stat-card--warn .stat-card__icon {
  background: linear-gradient(135deg, var(--c-warning), #d97706);
  box-shadow: 0 10px 24px var(--shadow-amber-glow);
}

.stat-card--error .stat-card__icon {
  background: linear-gradient(135deg, var(--c-error), #e11d48);
  box-shadow: 0 10px 24px rgba(244, 63, 94, 0.35);
}

.stat-card--info .stat-card__icon {
  background: linear-gradient(135deg, var(--c-cyan), #3b82f6);
  box-shadow: 0 10px 24px var(--shadow-cyan-glow);
}

.stat-card__num {
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-text);
}

.stat-card__lbl {
  color: var(--c-muted);
  font-size: 0.88rem;
  margin-top: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- GLASS PANEL (Grande Fiche) ---------- */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-highlight);
  overflow: hidden;
}

.glass-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.75rem 2rem;
  border-bottom: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.015);
}

.glass-panel__body {
  padding: 2rem;
}

.glass-panel__footer {
  padding: 1.25rem 2rem;
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.15);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.panel-head__icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), #ff6b8b);
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 0 10px 24px var(--c-primary-glow);
}

/* ============================================================
   _forms.css — Formulaires Cyber-Tactiques
   Candidature · Support · Administration · Profil
   Ordre des Bannis · Refonte Masterpiece
   ============================================================ */


.form {
  display: grid;
  gap: 2rem;
}

.form--2col { grid-template-columns: 1fr 1fr; gap: 2rem; }
.form--3col { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 820px) {
  .form--2col, .form--3col { grid-template-columns: 1fr; }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-group.full {
  grid-column: 1 / -1;
}

.form-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-text);
  letter-spacing: -0.01em;
}

.form-label i {
  color: var(--c-primary);
  font-size: 1.1rem;
}

.form-hint {
  color: var(--c-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

.form-hint--ok { color: var(--c-success); font-weight: 600; }
.form-hint--warn { color: var(--c-warning); font-weight: 600; }

.field-error {
  font-size: 0.92rem;
  color: var(--c-error);
  font-weight: 700;
  margin-top: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.input-wrap--has-error {
  border-color: var(--c-error) !important;
  box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.18), 0 0 20px rgba(244, 63, 94, 0.3) !important;
  background: rgba(244, 63, 94, 0.06) !important;
}

/* Zone de texte textarea avec glassmorphism haute fidélité */
.textarea-wrap {
  display: flex;
  flex-direction: column;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  transition: all var(--t-fast);
  backdrop-filter: blur(var(--blur-md));
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.textarea-wrap:hover {
  border-color: var(--c-border-strong);
}

.textarea-wrap:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-soft), 0 0 30px var(--c-primary-glow);
  background: var(--c-surface-2);
  transform: translateY(-2px);
}

.textarea-wrap textarea {
  width: 100%;
  min-height: 180px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-text);
  padding: 1.5rem;
  resize: vertical;
  font-size: var(--fs-base);
  line-height: 1.7;
  font-family: var(--font-body);
}

.textarea-wrap__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.88rem;
  color: var(--c-muted);
  font-weight: 600;
  border-top: 1px dashed var(--c-border);
  background: rgba(0, 0, 0, 0.15);
}

.form-section {
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-card);
}

.form-section h3 {
  font-size: 1.45rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--c-primary);
  font-family: var(--font-head);
  letter-spacing: -0.02em;
}

.form-section h3::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--c-border-strong), transparent);
  margin-left: 0.85rem;
  border-radius: 999px;
}

/* Honeypot field (anti-spam bot invisible) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Filtres de tableau de bord */
.filter-form {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-md));
}

.filter-form .form-group {
  margin: 0;
  gap: 0.5rem;
}

.filter-form .form-label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Checkbox personnalisée */
.inline-check {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0;
}

.inline-check input[type=checkbox] {
  width: 22px;
  height: 22px;
  accent-color: var(--c-primary);
  border-radius: 6px;
  cursor: pointer;
}

.inline-check label {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--c-text-soft);
  margin: 0;
  cursor: pointer;
}

.success-card {
  padding: 3.5rem 2rem;
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  background: var(--glass-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-lg));
  box-shadow: var(--shadow-lg), 0 0 50px rgba(16, 185, 129, 0.15);
}

.success-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.05));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-success);
  font-size: 3.5rem;
  border: 3px solid rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 80px rgba(16, 185, 129, 0.3), inset 0 0 40px rgba(16, 185, 129, 0.15);
}

/* ============================================================
   _tables.css — Datatables admin · respondent · blacklist
   ============================================================ */


.data-wrap{
  border-radius:var(--radius-lg);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.data-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table.data{
  width:100%;min-width:780px;border-collapse:collapse;border-spacing:0;
  font-size:.95rem;
}
table.data thead{
  background:linear-gradient(180deg,var(--c-bg-soft),transparent);
  border-bottom:2px solid var(--c-border-strong);
}
table.data th{
  text-align:left;padding:1rem 1.1rem;
  font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);
  white-space:nowrap;
}
table.data tbody tr{
  border-top:1px solid var(--c-border);
  transition:background var(--t-fast);
}
table.data tbody tr:first-child{border-top:0}
table.data tbody tr:hover{background:var(--c-bg-soft)}
table.data td{
  padding:1rem 1.1rem;vertical-align:middle;color:var(--c-text-soft);
  border-top:1px solid var(--c-border);
  max-width:420px;
}
table.data td:first-child{color:var(--c-text);font-weight:600}
table.data .td-actions{white-space:nowrap;text-align:right;width:1%;min-width:220px}
table.data .td-actions > *{margin-left:.4rem}
table.data .td-actions > *:first-child{margin-left:0}
.row-bad td{background:rgba(239,68,68,.04)!important}
.row-bad td:first-child{color:var(--c-error)}
.row-blacklisted td{background:rgba(239,68,68,.06)!important}
.row-blacklisted td:first-child{color:var(--c-error);font-weight:700}

/* TABLE FOOTER (pagination) */
.data-foot{
  padding:1rem 1.1rem;border-top:1px solid var(--c-border);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  color:var(--c-muted);font-weight:500;font-size:.9rem;
}
.data-foot .muted{color:var(--c-muted)}

/* TL timeline logs */
.tl{padding-left:1.25rem;margin:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:.5rem;bottom:.5rem;width:2px;background:var(--c-border)}
.tl-item{list-style:none;margin:0;padding:0 0 1rem 1.25rem;position:relative}
.tl-item::before{
  content:"";position:absolute;left:-1.15rem;top:.45rem;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  box-shadow:0 0 0 3px var(--c-primary-soft), 0 0 0 4px var(--c-surface);
}
.tl-item:nth-child(even)::before{background:linear-gradient(135deg,var(--c-info),#6366f1);box-shadow:0 0 0 3px rgba(59,130,246,.15), 0 0 0 4px var(--c-surface)}
.tl-item__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.25rem}
.tl-item__action{font-weight:700;color:var(--c-text)}
.tl-item__meta{font-size:.82rem;color:var(--c-muted);font-weight:500}
.tl-item__body{color:var(--c-text-soft);font-size:.92rem;margin:.25rem 0 0;word-break:break-word}
.tl-item__body small{color:var(--c-muted);display:block;margin-top:.25rem}

/* ============================================================
   _admin.css — Admin layout & Respondent layout
   Sidebar · Main · Dashboard stats cards · Tabs · Nav sidebar
   ============================================================ */


/* ---------- ADMIN / RESPONDENT SHELL ---------- */
.panel{
  display:grid;grid-template-columns:280px 1fr;gap:0;min-height:100dvh;
  position:relative;z-index:1;
}
.panel-aside{
  position:sticky;top:0;height:100dvh;overflow:hidden;
  border-right:1px solid var(--c-border);
  background:linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 100%);
  display:flex;flex-direction:column;
}
.panel-aside::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
}
.panel-brand{
  padding:1.25rem 1.25rem 1rem;
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:.75rem;
}
.panel-brand h2{font-size:1rem;margin:0;letter-spacing:.02em;font-family:var(--font-head)}
.panel-brand h2 em{
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;
}
.panel-nav{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:1rem .75rem;
  display:flex;flex-direction:column;gap:.25rem;
  scrollbar-width:thin;
}
.panel-nav h3{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);
  padding:.9rem .75rem .4rem;margin:0;font-family:var(--font-head);
}
.panel-link{
  display:flex;align-items:center;gap:.85rem;
  padding:.8rem .9rem;border-radius:12px;font-weight:600;color:var(--c-text-soft);
  transition:all var(--t-fast);font-size:.95rem;
  position:relative;
}
.panel-link i{width:20px;text-align:center;font-size:1rem;flex-shrink:0;color:var(--c-muted);transition:color var(--t-fast)}
.panel-link .count{
  margin-left:auto;font-size:.72rem;padding:.25rem .55rem;border-radius:999px;
  background:var(--c-primary-soft);color:var(--c-primary);font-weight:700;font-family:var(--font-head);
}
.panel-link:hover{background:var(--c-surface);color:var(--c-text)}
.panel-link:hover i{color:var(--c-primary)}
.panel-link.is-active{
  background:linear-gradient(135deg,var(--c-primary-soft),transparent);
  color:var(--c-primary);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--c-border-strong);
}
.panel-link.is-active i{color:var(--c-primary)}
.panel-link--danger{color:var(--c-error)!important}
.panel-link--danger.is-active{background:rgba(239,68,68,.12)!important}
.panel-footer{
  padding:1rem 1rem 1.25rem;border-top:1px solid var(--c-border);
}
.panel-footer__me{
  display:flex;align-items:center;gap:.85rem;
  padding:.75rem .75rem;border-radius:14px;
  background:var(--c-surface);border:1px solid var(--c-border);margin-bottom:.75rem;
}
.panel-footer__av{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-primary-700));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:800;
}
.panel-footer__name{font-weight:700;font-size:.9rem;line-height:1.15}
.panel-footer__role{font-size:.75rem;color:var(--c-muted);margin-top:.1rem;font-weight:600}

/* Panel main area */
.panel-main{
  display:flex;flex-direction:column;min-width:0;
  padding:1.5rem 2rem 3rem;
}
.panel-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.25rem;border-bottom:1px solid var(--c-border);margin-bottom:1.5rem;
}
.panel-bar h1{font-size:1.65rem;margin:0}
.panel-bar__meta{display:flex;align-items:center;gap:.75rem;color:var(--c-muted);font-weight:500;font-size:.9rem;flex-wrap:wrap}
.panel-bar__ctas{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

.stats-grid{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-bottom:1.5rem;
}
.panel-section{margin-bottom:1.5rem}
.panel-section h2{
  font-size:1.25rem;margin:0 0 1rem;display:flex;align-items:center;gap:.6rem;
}
.panel-section h2 i{color:var(--c-primary)}

.tabs{
  display:flex;gap:.35rem;padding:.35rem;border-radius:14px;
  background:var(--c-surface);border:1px solid var(--c-border);width:fit-content;margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.tabs a{
  padding:.55rem 1rem;border-radius:10px;font-weight:700;color:var(--c-muted);font-size:.9rem;
  transition:all var(--t-fast);
}
.tabs a:hover{color:var(--c-text);background:var(--c-bg-soft)}
.tabs a.is-active{
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700));color:#fff;
  box-shadow:0 4px 14px var(--c-primary-glow);
}

/* ---------- History timeline (application status) ---------- */
.history{
  padding:.25rem 0 .25rem .25rem;position:relative;margin:0;
}
.history::before{
  content:"";position:absolute;left:19px;top:1rem;bottom:1rem;width:2px;background:linear-gradient(180deg,var(--c-primary),var(--c-info));
  opacity:.4;
}
.hist-item{
  list-style:none;padding:.5rem 0 1.1rem 3.5rem;position:relative;
}
.hist-item__dot{
  position:absolute;left:.25rem;top:.6rem;width:36px;height:36px;border-radius:50%;
  background:var(--c-surface);border:2px solid var(--c-border-strong);
  display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;
  z-index:1;
}
.hist-item.pending .hist-item__dot{border-color:var(--c-warning);color:var(--c-warning)}
.hist-item.accepted .hist-item__dot{border-color:var(--c-success);color:var(--c-success)}
.hist-item.refused .hist-item__dot{border-color:var(--c-error);color:var(--c-error)}
.hist-item.blacklist .hist-item__dot{border-color:#7c3aed;color:#7c3aed}
.hist-item__head{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.2rem;
}
.hist-item__who{font-weight:700;font-size:.95rem}
.hist-item__when{font-size:.8rem;color:var(--c-muted);font-weight:500}
.hist-item__msg{
  background:var(--c-bg-alt);border-left:4px solid var(--c-border-strong);
  padding:.75rem 1rem;border-radius:10px;color:var(--c-text);margin-top:.4rem;font-size:.95rem;white-space:pre-wrap;
}
.hist-item.accepted .hist-item__msg{border-left-color:var(--c-success)}
.hist-item.refused .hist-item__msg{border-left-color:var(--c-error)}
.hist-item.pending .hist-item__msg{border-left-color:var(--c-warning)}
.hist-item.blacklist .hist-item__msg{border-left-color:#7c3aed}

/* ---------- Respondent login page (standalone) ---------- */
.respondent-wrap{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;z-index:1;
}
.respondent-card{
  width:100%;max-width:520px;padding:2.25rem;border-radius:24px;
  background:var(--c-surface);border:1.5px solid var(--c-border);
  box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
}
.respondent-card::before{
  content:"";position:absolute;top:-80px;right:-80px;width:280px;height:280px;
  background:radial-gradient(circle, var(--c-primary-glow), transparent 60%);
  filter:blur(30px);opacity:.6;
}
.respondent-card > *{position:relative;z-index:1}

/* ---------- Mobile panel top bar ---------- */
.panel-topbar{display:none}
.panel-topbar{
  align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--c-border);
  background:var(--c-bg-soft);position:sticky;top:0;z-index:10;
}
.panel-topbar .menu-btn{
  width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);
}

/* Overlay when drawer open on mobile */
.panel-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:15;
  backdrop-filter:blur(3px);
}
.panel-aside.is-open + .panel-main .panel-overlay,
.panel[data-drawer="open"] .panel-overlay{display:block}

/* Token display box */
.token-display{
  padding:1rem 1.25rem;border-radius:14px;
  background:rgba(34,197,94,.08);border:2px dashed rgba(34,197,94,.4);
  font-family:ui-monospace,'JetBrains Mono',monospace;font-size:1.05rem;
  letter-spacing:.04em;word-break:break-all;margin-top:.75rem;font-weight:600;
  color:#86efac;
}
html[data-theme="light"] .token-display{color:#15803d;background:rgba(34,197,94,.06)}
.token-instructions{
  background:var(--c-bg-alt);border:1px solid var(--c-border);
  padding:1.25rem;border-radius:14px;margin-top:1rem;
}
.token-instructions h4{color:var(--c-primary);margin-bottom:.5rem;font-size:1rem;display:flex;align-items:center;gap:.5rem}
.token-instructions ul{margin:.5rem 0 0}

/* ============================================================
   _sections.css — Process · Roles · Trust · FAQ · Auth · Dashboard grid · Timeline · KV
   ============================================================ */


/* ---------- PROCESS ---------- */
.process{
  display:grid;gap:1.25rem;
  grid-template-columns:repeat(4,1fr);
}
.process-step{
  position:relative;padding:1.75rem 1.5rem;border-radius:var(--radius-lg);
  background:var(--c-surface);border:1.5px solid var(--c-border);
  transition:all var(--t-med);
}
.process-step::after{
  content:"";position:absolute;left:calc(100% + .3rem);top:50%;transform:translateY(-50%);
  width:1.4rem;height:2px;background:var(--c-border-strong);
  background-image:linear-gradient(90deg, var(--c-primary), var(--c-accent));
  z-index:0;display:block;
}
.process-step:last-child::after{display:none}
.process-step:hover{border-color:var(--c-border-strong);transform:translateY(-4px);box-shadow:var(--shadow-md)}
.process-step .step-num{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;font-family:var(--font-head);font-weight:800;font-size:1.2rem;
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-700));color:#fff;
  margin-bottom:1rem;box-shadow:0 6px 20px var(--c-primary-glow), inset 0 1px 0 rgba(255,255,255,.15);
}
.process-step h3{font-size:1.2rem;margin-bottom:.5rem}
.process-step p{color:var(--c-muted);font-size:.95rem;margin:0}

/* ---------- ROLES CARDS ---------- */
.roles{
  display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;
}
.role-card{
  position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  background:var(--c-surface);
  border:1.5px solid var(--c-border);
  transition:all var(--t-slow);
  cursor:pointer;
}
.role-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.role-card--anim:hover{border-color:var(--c-primary);box-shadow:var(--shadow-lg), 0 0 80px var(--c-primary-glow)}
.role-card--modo:hover{border-color:var(--c-info);box-shadow:var(--shadow-lg), 0 0 80px rgba(59,130,246,.35)}
.role-card__bg{
  position:absolute;inset:-1px;z-index:0;opacity:.15;pointer-events:none;
}
.role-card--anim .role-card__bg{
  background:
    radial-gradient(600px 400px at 80% 0%, var(--c-primary), transparent 60%),
    radial-gradient(400px 300px at 0% 100%, var(--c-accent), transparent 60%);
}
.role-card--modo .role-card__bg{
  background:
    radial-gradient(600px 400px at 80% 0%, var(--c-info), transparent 60%),
    radial-gradient(400px 300px at 0% 100%, var(--c-primary), transparent 60%);
}
.role-card__inner{position:relative;z-index:1;padding:2rem}
.role-card__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.role-card__icon{
  width:56px;height:56px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.role-card--anim .role-card__icon{background:linear-gradient(135deg,var(--c-primary),var(--c-accent));box-shadow:0 10px 30px var(--c-primary-glow)}
.role-card--modo .role-card__icon{background:linear-gradient(135deg,var(--c-info),#6366f1);box-shadow:0 10px 30px rgba(59,130,246,.35)}
.role-card__tag{
  font-family:var(--font-head);font-size:.75rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;
}
.role-card--anim .role-card__tag{background:var(--c-primary-soft);color:var(--c-primary);border:1px solid var(--c-border-strong)}
.role-card--modo .role-card__tag{background:rgba(59,130,246,.12);color:var(--c-info);border:1px solid rgba(59,130,246,.3)}
.role-card h3{font-size:1.75rem;margin-bottom:.5rem}
.role-card__desc{color:var(--c-text-soft);margin-bottom:1.5rem}
.role-card ul{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.6rem}
.role-card ul li{
  display:flex;align-items:flex-start;gap:.65rem;color:var(--c-text-soft);font-size:.95rem;margin:0;
}
.role-card ul li i{color:var(--c-primary);margin-top:.25rem;flex-shrink:0}
.role-card__footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid var(--c-border)}
.role-card__count{color:var(--c-muted);font-size:.9rem;font-weight:600}

/* ---------- TRUST / PREREQUIS ---------- */
.trust-grid{
  display:grid;gap:1.25rem;grid-template-columns:repeat(4,1fr);
}
.trust-card{
  padding:1.5rem;border-radius:var(--radius-lg);
  background:var(--c-surface);border:1px solid var(--c-border);
  transition:all var(--t-med);
  display:flex;flex-direction:column;gap:.6rem;
}
.trust-card:hover{border-color:var(--c-border-strong);transform:translateY(-2px)}
.trust-card__icon{
  width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-primary-soft);color:var(--c-primary);font-size:1.1rem;margin-bottom:.25rem;
}
.trust-card h4{font-size:1.05rem;margin-bottom:.25rem}
.trust-card p{color:var(--c-muted);font-size:.9rem;margin:0}

/* ---------- FAQ ---------- */
.faq{
  max-width:900px;margin:0 auto;display:grid;gap:.85rem;
}
.faq-item{
  overflow:hidden;border-radius:var(--radius);
  background:var(--c-surface);border:1px solid var(--c-border);
  transition:all var(--t-med);
}
.faq-item[open]{border-color:var(--c-border-strong);box-shadow:var(--shadow-sm)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-weight:700;font-size:1rem;
  transition:color var(--t-fast);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q i{color:var(--c-primary);transition:transform var(--t-fast);font-size:1.1rem;flex-shrink:0}
.faq-item[open] .faq-q i{transform:rotate(180deg)}
.faq-q:hover{color:var(--c-primary)}
.faq-a{padding:0 1.5rem 1.5rem 1.5rem;color:var(--c-text-soft);border-top:1px solid var(--c-border);padding-top:1.25rem}

/* ---------- AUTH WRAP (Refonte Apple / Vercel style) ---------- */
.auth-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 6rem) 1rem;
  min-height: calc(100vh - var(--header-h));
  background: radial-gradient(circle at 50% 0%, var(--c-primary-soft), transparent 60%);
}

/* Auth Grid Layout (2 columns) */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.auth-side {
  display: flex;
  flex-direction: column;
}

.auth-side .logo {
  margin-bottom: 2.5rem;
  transform: scale(1.2);
  transform-origin: left center;
}

.auth-title {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  font-family: var(--font-head);
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
  color: var(--c-text);
}

.auth-lead {
  font-size: 1.15rem;
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 480px;
  margin-bottom: 3rem;
}

.auth-trust {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.trust-item i {
  font-size: 1.5rem;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 1rem;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trust-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 0.25rem;
}

.trust-item p {
  font-size: 0.95rem;
  color: var(--c-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 992px) {
  .auth-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .auth-side {
    text-align: center;
    align-items: center;
  }
  .auth-side .logo {
    transform-origin: center center;
  }
  .auth-lead {
    margin-bottom: 2rem;
  }
  .auth-trust {
    text-align: left;
  }
}

.auth-card {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 32px;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .auth-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 30px 60px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
}

.auth-card--wide {
  max-width: 720px;
}

.auth-card-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.auth-card-head .logo {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 2rem;
  transform: scale(1.2);
}

.auth-card-head h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
  font-weight: 800;
  font-family: var(--font-head);
  line-height: 1.1;
}

.auth-card-head .auth-sub {
  color: var(--c-muted);
  font-size: 1.15rem;
  font-weight: 500;
}

/* Auth specific inputs (massive) */
.auth-card .form-group {
  gap: 0.75rem;
}

.auth-card .form-label {
  font-size: 1rem;
  font-weight: 600;
  margin-left: 0.5rem;
}

.auth-card .input-wrap {
  position: relative;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  display: block !important;
}

.auth-card .input-wrap:hover,
.auth-card .input-wrap:focus-within,
.auth-card .input-wrap.input-wrap--has-error {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.auth-card .input-wrap.input-wrap--has-error input {
  border-color: var(--c-error) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.16) !important;
  background: rgba(239,68,68,0.06) !important;
}

.auth-card .input-wrap i:first-child {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  color: var(--c-muted);
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 2;
}

.auth-card .input-wrap input {
  width: 100%;
  height: 64px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 20px;
  padding: 0 1.5rem 0 3.5rem;
  font-size: 1.1rem;
  color: var(--c-text);
  transition: all var(--t-apple);
  outline: none !important;
  display: block;
}

.auth-card .input-wrap input:focus {
  border-color: var(--c-primary);
  background: var(--c-surface);
  box-shadow: 0 0 0 4px var(--c-primary-soft), inset 0 2px 10px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

.auth-card .toggle-pw {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.1rem;
  transition: color var(--t-fast);
}

.auth-card .toggle-pw:hover {
  color: var(--c-text);
}

.auth-card .btn--block {
  height: 64px;
  font-size: 1.15rem;
  border-radius: 20px;
  margin-top: 1rem;
}

.auth-card .checkbox {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  color: var(--c-muted);
  cursor: pointer;
}

.auth-card .checkbox input {
  width: 22px;
  height: 22px;
  accent-color: var(--c-primary);
  cursor: pointer;
}

.auth-form-alt {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--c-border);
  margin-top: 2.5rem;
  color: var(--c-muted);
  font-weight: 500;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form-alt a {
  font-weight: 700;
  color: var(--c-text);
  transition: color var(--t-fast);
}

.auth-form-alt a:hover {
  color: var(--c-primary);
}

@media (max-width: 600px) {
  .auth-card .form-row {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ---------- KV (Key-Value) pairs on detail pages ---------- */
.kv-grid{
  display:grid;gap:.85rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.kv{
  padding:1rem 1.1rem;border-radius:14px;background:var(--c-bg-alt);border:1px solid var(--c-border);
}
.kv__lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c-muted);font-weight:700;margin-bottom:.4rem;font-family:var(--font-head)}
.kv__val{font-weight:700;color:var(--c-text);font-size:1rem;word-break:break-word}

/* ---------- ANSWER BOX (formulaire candidature) ---------- */
.answer-box{
  padding:1.1rem 1.25rem;border-radius:14px;
  background:var(--c-bg-alt);border-left:4px solid var(--c-primary);
}
.answer-box h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);margin-bottom:.5rem}
.answer-box p{color:var(--c-text);white-space:pre-wrap;margin:0}

/* ---------- DASHBOARD GRID (user) ---------- */
.dash-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;
}
.dash-head h1{margin:0}
.dash-meta{color:var(--c-muted);font-weight:600}
.station-status{
  display:inline-flex;gap:.7rem;align-items:center;padding:.5rem 1rem;border-radius:14px;
  background:var(--c-surface);border:1px solid var(--c-border);font-weight:600;
}
/* ---------- MULTI-STEP FORMS ---------- */
.step-section {
  display: none;
  animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.step-section.active {
  display: block;
}
.step-compliment {
  font-size: 0.95rem;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  border: 1px solid rgba(var(--c-primary-rgb), 0.2);
}
.step-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.step-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--c-border);
  transition: all var(--t-apple);
}
.step-dot.active {
  background: var(--c-primary);
  box-shadow: 0 0 10px var(--c-primary-soft);
}
.step-dot.completed {
  background: var(--c-primary);
  opacity: 0.3;
}
.step-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn-back {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  width: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
  font-size: 1.1rem;
}
.btn-back:hover {
  background: var(--c-surface);
  border-color: var(--c-muted);
}
.btn-edit-email {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-edit-email:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ============================================================
   _hero.css — HERO 2-NIVEAUX Fullwidth
   Niveau 1: .hero (fullwidth overflow decor blobs)
   Niveau 2: .container.hero-inner (content container never stretched)
   ============================================================ */


.hero{
  position:relative;width:100%;min-width:100%;overflow:hidden;
  padding: var(--space-8) 0 var(--space-10);
  padding-inline: clamp(.5rem, 1.8vw, 2.5rem);
  z-index:1;
}
.hero__decor{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__blob{
  position:absolute;border-radius:50%;filter: blur(80px);opacity:.6;
  mix-blend-mode: screen;
}
html[data-theme="light"] .hero__blob{mix-blend-mode:multiply;opacity:.35}
.blob-1{
  width:620px;height:620px;top:-200px;left:-180px;
  background:radial-gradient(circle, var(--c-primary) 0%, var(--c-primary-700) 40%, transparent 70%);
  animation:blob-drift-1 22s ease-in-out infinite;
}
.blob-2{
  width:520px;height:520px;top:-140px;right:-120px;
  background:radial-gradient(circle, var(--c-accent) 0%, var(--c-primary) 45%, transparent 70%);
  animation:blob-drift-2 26s ease-in-out infinite;
}
.blob-3{
  width:680px;height:680px;bottom:-280px;left:40%;
  background:radial-gradient(circle, var(--c-primary-soft) 0%, transparent 60%);
  animation:blob-drift-3 30s ease-in-out infinite;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,3vw,3.5rem);
  align-items:center;position:relative;z-index:2;
  padding-top:1rem;
}
.hero-content{max-width:640px}
.hero-content .kicker{margin-bottom:1.5rem}
.hero-content h1{
  font-size: var(--fs-hero);
  letter-spacing:-.035em;line-height:1.02;font-weight:800;margin-bottom:1.5rem;
}
.hero-content h1 em{font-style:normal}
.hero__lead{
  font-size:var(--fs-lg);color:var(--c-text-soft);margin-bottom:2rem;max-width:54ch;line-height:1.7;
}
.hero__meta{
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-bottom:2rem;
  padding:1rem 1.25rem;border-radius:18px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--blur-md));
  width:fit-content;
}
.hero__meta .meta-item{
  display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem;color:var(--c-text-soft);
}
.hero__meta .meta-item i{color:var(--c-primary);font-size:1.05rem}
.hero__actions{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.hero-showcase{
  position:relative;padding:.5rem;
  transform-style:preserve-3d;perspective:1500px;
}
.hero-card{
  position:relative;z-index:2;
  padding:1.75rem;border-radius:var(--radius-xl);
  background:var(--glass-bg);
  border:1.5px solid var(--glass-border);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:var(--shadow-lg), 0 0 60px var(--c-primary-glow), inset 0 1px 0 rgba(255,255,255,.04);
  transform:rotateX(3deg) rotateY(-7deg);
  transition:transform var(--t-slow);
}
.hero-showcase:hover .hero-card{transform:rotateX(0) rotateY(0) scale(1.01)}
.hero-card__header{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;
}
.hero-card__title{font-family:var(--font-head);font-size:1.05rem;font-weight:700}
.hero-card__live{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:700;
  padding:.35rem .65rem;border-radius:999px;background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.35);
}
html[data-theme="light"] .hero-card__live{color:#15803d}
.hero-card__metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem;
}
.hero-metric{
  padding:.85rem;border-radius:14px;background:var(--c-surface);border:1px solid var(--c-border);
}
.hero-metric__val{
  font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:var(--c-primary);line-height:1;
}
.hero-metric__lbl{font-size:.72rem;color:var(--c-muted);margin-top:.35rem;letter-spacing:.03em;text-transform:uppercase}
.hero-card__streamers{display:flex;align-items:center;gap:.85rem;padding:1rem 0;border-top:1px solid var(--c-border)}
.avatar-stack{display:flex}
.avatar-stack .av{
  width:40px;height:40px;border-radius:50%;border:2px solid var(--c-bg);
  margin-left:-10px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem;font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.avatar-stack .av:first-child{margin-left:0}
.hero-card__streamers-label{font-size:.9rem;color:var(--c-muted)}
.hero-card__cta{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}

/* floating back card */
.hero-card--bg{
  position:absolute;inset:1rem -0.75rem -1rem 1.25rem;z-index:1;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--c-primary-soft),var(--c-accent-soft));
  transform:rotateX(6deg) rotateY(-10deg) translateZ(-1px);
  filter:blur(2px);
}
.hero__stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:var(--space-8);
  padding:1.5rem;border-radius:var(--radius-xl);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));
}
.hs-item{display:flex;flex-direction:column;gap:.4rem;text-align:center;position:relative}
.hs-item + .hs-item::before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--c-border)}
.hs-num{font-family:var(--font-head);font-weight:800;font-size:1.8rem;letter-spacing:-.03em;color:var(--c-primary)}
.hs-lbl{font-size:.82rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.05em}

/* ============================================================
   _animations.css — Keyframes & Reveal patterns
   ============================================================ */


/* ---------- KEYFRAMES ---------- */
/* grad-shift SUPPRIMÉ — animait background-position (non-compositable = repaint chaque frame).
   Remplacer par transform sur pseudo-élément si besoin. */
@keyframes pulse-ring{
  0%{transform:scale(1);opacity:.6}
  100%{transform:scale(2.2);opacity:0}
}
@keyframes blob-drift-1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(50px,-30px) scale(1.08)}
  66%{transform:translate(-30px,40px) scale(.94)}
}
@keyframes blob-drift-2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-60px,50px) scale(1.04)}
}
@keyframes blob-drift-3{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-60px) scale(1.1)}
}
@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes spin-slow{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
@keyframes pop-in{
  0%{opacity:0;transform:scale(.92)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes toast-in{
  0%{opacity:0;transform:translateY(-10px) scale(.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ---------- REVEAL BASE (IntersectionObserver toggle .in) ---------- */
/* will-change retiré de l'état initial : le browser composite naturellement opacity+transform */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity var(--t-reveal), transform var(--t-reveal);
}
.reveal.in,.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:50ms}
.reveal[data-delay="2"]{transition-delay:100ms}
.reveal[data-delay="3"]{transition-delay:150ms}
.reveal[data-delay="4"]{transition-delay:200ms}
.reveal[data-delay="5"]{transition-delay:250ms}
.reveal[data-delay="6"]{transition-delay:300ms}
.reveal[data-delay="7"]{transition-delay:350ms}
.reveal[data-delay="8"]{transition-delay:400ms}
.reveal[data-delay="9"]{transition-delay:450ms}
.reveal[data-delay="10"]{transition-delay:500ms}
/* left / right reveal */
.reveal-left{opacity:0;transform:translateX(-36px);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.reveal-left.in{opacity:1;transform:none}
.reveal-right{opacity:0;transform:translateX(36px);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.reveal-right.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.reveal-scale.in{opacity:1;transform:scale(1)}
.reveal-flip{opacity:0;transform:perspective(800px) rotateX(12deg);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.reveal-flip.in{opacity:1;transform:none}

/* Hero content & showcase */
.hero-content{
  opacity:0;transform:translateY(30px);
  transition: opacity  var(--t-slow), transform  var(--t-slow);
}
.hero-content.in{opacity:1;transform:none}
.hero-showcase{
  opacity:0;transform:translateY(30px) scale(.97);
  transition: opacity  var(--t-slow) 80ms cubic-bezier(.16,1,.3,1), transform  var(--t-slow) 80ms cubic-bezier(.16,1,.3,1);
}
.hero-showcase.in{opacity:1;transform:none}

/* Process steps stagger by index */
.process-step{opacity:0;transform:translateY(22px);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.process-step.in{opacity:1;transform:none}
.process-step:nth-child(2){transition-delay:40ms}
.process-step:nth-child(3){transition-delay:80ms}
.process-step:nth-child(4){transition-delay:120ms}

.role-card{opacity:0;transform:translateY(28px);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.role-card.in{opacity:1;transform:none}
.role-card:nth-child(2){transition-delay:80ms}

.trust-card{opacity:0;transform:translateY(18px);transition: opacity  var(--t-med), transform  var(--t-med)}
.trust-card.in{opacity:1;transform:none}
.trust-card:nth-child(2){transition-delay:40ms}
.trust-card:nth-child(3){transition-delay:80ms}
.trust-card:nth-child(4){transition-delay:120ms}

.faq-item{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal), transform var(--t-reveal)}
.faq-item.in{opacity:1;transform:none}

.app-card{opacity:0;transform:translateY(16px);transition: opacity  var(--t-med), transform  var(--t-med)}
.app-card.in{opacity:1;transform:none}

.section-head{
  opacity:0;transform:translateY(20px);
  transition: opacity  var(--t-slow), transform  var(--t-slow);
}
.section-head.in{opacity:1;transform:none}

.glass-panel{
  opacity:0;transform:translateY(22px) scale(.985);
  transition: opacity  var(--t-slow), transform  var(--t-slow);
}
.glass-panel.in{opacity:1;transform:none}

/* Pop-in on stat cards */
.stat-card{opacity:0;transform:translateY(16px);transition: opacity  var(--t-med), transform  var(--t-med)}
.stat-card.in{opacity:1;transform:none}
.stat-card:nth-child(2){transition-delay:40ms}
.stat-card:nth-child(3){transition-delay:80ms}
.stat-card:nth-child(4){transition-delay:120ms}
.stat-card:nth-child(5){transition-delay:160ms}
.stat-card:nth-child(6){transition-delay:200ms}

/* fade-in-up : will-change retiré de l'état initial (layer GPU permanent pour chaque élément hors viewport).
   Le browser composiite naturellement les transitions opacity+transform sans will-change. */
.fade-in-up {
  opacity: 0;
  transform: translateY(50px) scale(0.97);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

/* Field error shake */
.field-error{animation: pop-in var(--t-fast) }

/* Page transition-in: app-main fade */
.app-main{animation: toast-in var(--t-med) }

/* Floating decorative icons */
.float-y{animation:float-y 5s ease-in-out infinite}
.spin-slow{animation:spin-slow 16s linear infinite}

/* Toast-like alert pop */
.alert{animation: toast-in var(--t-med) }
.alert:nth-child(2){animation-delay:60ms}

/* Token pulse */
.token-display{
  position:relative;
}
.token-display::after{
  content:"copié !";position:absolute;right:.75rem;top:50%;transform:translateY(-50%) scale(.9);
  font-family:var(--font-body);font-size:.7rem;padding:.2rem .55rem;border-radius:999px;
  background:var(--c-success);color:#fff;font-weight:700;opacity:0;transition:all var(--t-fast);letter-spacing:.02em;pointer-events:none;
}
.token-display.copied::after{opacity:1;transform:translateY(-50%) scale(1)}

/* No-focus-visible ring override (managed via html.kbFocus) */
:focus:not(:focus-visible){outline:none;border-color:inherit}

/* ============================================================
   _responsive.css — Mobile-first responsive fixes
   Breakpoints: 320 · 480 · 640 · 768 · 900 · 1024 · 1200
   ============================================================ */

/* ── Tokens mobile — Ultra-small devices (320px) ────────────── */
@media (max-width: 320px) {
  :root {
    --header-h: 56px;
    --container-padding: 0.75rem;
    --space-9: 2rem;
    --space-10: 3rem;
    --fs-base: clamp(0.9rem, 2.2vw, 1rem);
  }
  body { font-size: var(--fs-base); }
}

/* ── Tokens mobile — Small devices (480px) ────────────────── */
@media (max-width: 480px) {
  :root {
    --header-h: 60px;
    --container-padding: 0.85rem;
    --space-9: 2.5rem;
    --space-10: 3.5rem;
  }
}

/* ── Tokens mobile — Tablets (768px) ──────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
    --container-padding: 1rem;
    --space-9: 3.5rem;
    --space-10: 5rem;
  }
}

/* ══════════════════════════════════════════════════════════
   LAYOUT GLOBAL
══════════════════════════════════════════════════════════ */

/* Ultra-small devices (320px) */
@media (max-width: 320px) {
  .app-main {
    padding-inline: 0.6rem;
    padding-top: calc(var(--header-h) + 0.75rem);
  }
  .container {
    width: 100%;
    padding-inline: 0.6rem;
  }
  .grid-2col, .grid-3col, .grid-4col {
    grid-template-columns: 1fr !important;
  }
  .section {
    padding: 1.5rem 0;
    padding-inline: 0.6rem;
  }
  .section--lg, .section--alt {
    padding: 2rem 0;
    padding-inline: 0.6rem;
  }
}

/* Small to medium devices (480px - 768px) */
@media (max-width: 768px) {
  .app-main {
    padding-inline: 0.85rem;
    padding-top: calc(var(--header-h) + 1rem);
  }
  .container {
    width: 100%;
    padding-inline: 0.85rem;
  }
  .grid-2col {
    grid-template-columns: 1fr;
  }
  .grid-3col, .grid-4col {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
  .section {
    padding: 2.5rem 0;
    padding-inline: 0.85rem;
  }
  .section--lg, .section--alt {
    padding: 3rem 0;
    padding-inline: 0.85rem;
  }
}

/* ══════════════════════════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════════════════════════ */

/* Ultra-small devices */
@media (max-width: 320px) {
  .header {
    height: 56px;
    padding: 0 0.75rem;
  }
  .header-brand { font-size: 1.2rem; }
  .nav-link { font-size: 0.85rem; padding: 0.5rem 0.75rem; }
}

/* Small devices */
@media (max-width: 480px) {
  .header {
    height: 60px;
    padding: 0 0.85rem;
  }
}

/* Tablets and up */
@media (max-width: 1550px) {
  /* déjà dans _header.php inline — on renforce ici */
  .header-wrapper { padding: 0; }
  .header {
    border-radius: 0;
    border-top: none; border-left: none; border-right: none;
    max-width: none;
    height: 64px;
    padding: 0 1rem;
  }
  .hide-mobile { display: none !important; }
  .hamburger { display: flex !important; }
}

/* Mobile nav drawer optimization */
@media (max-width: 768px) {
  .nav-drawer {
    right: 0 !important;
    left: auto !important;
    width: min(90vw, 340px) !important;
  }
  .nav-drawer-link { padding: 1rem 1.25rem; }
  .nav-drawer-link-text strong { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .socials { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — HERO
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-master {
    padding: 8rem 1rem 4rem;
    gap: 2.5rem;
    min-height: auto;
    text-align: center;
  }
  .hero-cta-master {
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
  }
  .btn-master {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
  .hero-badge-master { font-size: 0.82rem; padding: 8px 16px; }
}

/* ══════════════════════════════════════════════════════════
   CHOOSE ROLE PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .choose-wrap { padding: 6rem 1rem 4rem; }
  .choose-header { margin-bottom: 2.5rem; }
  .choose-header h1 { font-size: clamp(2rem, 8vw, 3rem); }
  .choose-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .choose-card {
    padding: 2rem 1.5rem;
    border-radius: 20px;
  }
  .choose-card:hover {
    /* désactive le tilt/scale sur mobile — inutile au touch */
    transform: none !important;
  }
  .choose-card-list { margin-bottom: 1.75rem; }
}

/* ══════════════════════════════════════════════════════════
   APPLICATION FORM (wizard)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .apply-wrapper {
    padding: 6rem 1rem 4rem !important;
  }
  .apply-header h1 { font-size: clamp(1.6rem, 7vw, 2.5rem) !important; }
  .apply-header p  { font-size: 0.95rem; }

  /* Wizard steps */
  .wizard-steps {
    gap: 0.5rem !important;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
  }
  .step-dot {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
    flex-shrink: 0;
  }

  /* Role switcher */
  .role-switcher { grid-template-columns: 1fr !important; }
  .role-card { padding: 1.25rem 1rem; }

  /* Form sections */
  .form-section { padding: 1.5rem 1rem !important; }
  .form-section h3 { font-size: 1.25rem !important; }

  /* Intro grid */
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Wizard nav */
  .wizard-nav {
    flex-direction: column-reverse;
    gap: 0.75rem;
  }
  .wizard-nav .wizard-btn,
  .wizard-nav .btn {
    width: 100%;
    justify-content: center;
    padding: 1rem !important;
  }

  /* Submit box */
  .submit-box { padding: 2.5rem 1.25rem !important; }

  /* Input large — on réduit la taille SANS écraser le padding-left (place de l'icône) */
  .input-huge { padding-top: 1rem !important; padding-bottom: 1rem !important; font-size: 1rem !important; }

  /* Progress bar meta */
  .qprogress-meta { flex-wrap: wrap; gap: 0.25rem; }
}

/* ══════════════════════════════════════════════════════════
   APPLICATIONS LIST (candidatures)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .apps-page { padding: 6rem 1rem 4rem !important; }
  .apps-hero { margin-bottom: 2.5rem; }
  .hero-title-apps { font-size: clamp(1.8rem, 7vw, 3rem); }

  .dossier-card {
    padding: 1.5rem 1.25rem !important;
    border-radius: 20px !important;
  }
  .dossier-card:hover { transform: none !important; }

  .dc-header { flex-direction: row; gap: 1rem; }
  .dc-icon { width: 54px !important; height: 54px !important; font-size: 1.5rem !important; border-radius: 16px !important; }
  .dc-role { font-size: 1.3rem !important; }

  .dc-tracker {
    flex-direction: column !important;
    gap: 1.25rem !important;
    align-items: flex-start;
    padding: 1.25rem !important;
  }
  .dc-step {
    flex-direction: row !important;
    text-align: left !important;
    gap: 1rem !important;
    width: 100%;
  }
  .dc-step::before { display: none !important; }

  .dc-footer {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  .dc-btn, .dc-badge-status { justify-content: center; width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   APPLICATION SHOW (detail candidature)
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bento-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .app-view-page { padding: 6rem 1rem 4rem !important; }
  .ah-title { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; flex-direction: column; gap: 0.35rem; }
  .ah-sep { display: none; }
  .ah-meta { flex-wrap: wrap; gap: 0.5rem; }
  .ah-chip { font-size: 0.8rem; padding: 0.5rem 0.9rem; }
  .info-bar { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
  .qa-tabs-nav { padding: 0.75rem 1rem !important; }
  .qa-tab-btn { padding: 0.6rem 1rem !important; font-size: 0.82rem !important; }
  .qa-tabs-content { padding: 1.25rem 1rem !important; }
  .side-panel { padding: 1.25rem 1rem !important; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD CANDIDAT
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dashboard-page { padding: 6rem 1rem 5rem !important; }
  .hero-title-master { font-size: clamp(1.75rem, 7vw, 2.75rem); }
  .mini-stats-row { flex-direction: column !important; gap: 0.75rem !important; }
  .bento-card { padding: 1.25rem !important; }
  .main-actions {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .main-actions .btn-action {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════
   AUTH PAGES (login / register / forgot)
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .auth-card, .auth-box {
    padding: 1.75rem 1.25rem !important;
    border-radius: 20px !important;
    margin: 0 0.5rem;
  }
  .form--2col { grid-template-columns: 1fr !important; }
  .forgot-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ══════════════════════════════════════════════════════════
   RESPONDENT PANEL
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-layout, .panel {
    grid-template-columns: 1fr !important;
  }
  .admin-sidebar, .panel-aside {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(280px, 100vw) !important;
    max-width: 100vw !important;
    box-sizing: border-box;
    z-index: 200;
    transform: translateX(-100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100vh !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .admin-sidebar.is-open, .panel-aside.is-open { transform: translateX(0) !important; }
  .admin-main, .panel-main { padding: 1.25rem 1rem 3rem !important; }
}

/* ══════════════════════════════════════════════════════════
   ADMIN CONFIG PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ac-sidebar { display: none !important; }
  .ac-main { padding: 1.25rem 1rem 4rem !important; }
  .ac-g2, .ac-g3 { grid-template-columns: 1fr !important; }
  .ac-section-body { padding: 1.25rem !important; }
  .ac-section-head { padding: 1rem 1.25rem !important; }
  .ac-savebar { bottom: 0.75rem; }
  .ac-savebar button { padding: 0.8rem 1.5rem; font-size: 0.88rem; }
}

/* ══════════════════════════════════════════════════════════
   RESPONDENT APPLICATION VIEW
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .resp-layout, .resp-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .resp-sidebar { position: static !important; }
}

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; font-size: 0.85rem; }
  .data-table th, .data-table td { padding: 0.65rem 0.75rem !important; }
}

/* ══════════════════════════════════════════════════════════
   GLASS PANELS (admin panels)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .glass-panel {
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }
  .panel-head { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .filter-form { flex-direction: column; }
  .filter-form .input-sm, .filter-form .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   MINI-STATS GRID
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .mini-stats { grid-template-columns: 1fr 1fr !important; }
  .stat-card { padding: 1rem !important; }
  .stat-card strong { font-size: 1.5rem !important; }
}
@media (max-width: 380px) {
  .mini-stats { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   SUPPORT PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .support-wrap, .support-container {
    padding: 6rem 1rem 4rem !important;
  }
  .support-form { padding: 1.5rem 1.25rem !important; }
}

/* ══════════════════════════════════════════════════════════
   HOME pages (lore, communaute, roles)
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-item summary { font-size: 0.95rem; padding: 1.1rem 1.25rem; }
  .faq-body { padding: 1rem 1.25rem; }
  .roles-grid, .cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — taille minimum tactile 44px + améliorations mobile
══════════════════════════════════════════════════════════ */

/* Ultra-small devices (320px) */
@media (max-width: 320px) {
  .btn, .header-btn {
    min-height: 40px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    border-radius: 999px;
  }
  .btn--sm { 
    min-height: 36px; 
    padding: 0.5rem 0.85rem;
    font-size: 0.85rem;
  }
  .btn--lg {
    min-height: 48px;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* Small devices (480px) */
@media (max-width: 480px) {
  .btn, .header-btn, button {
    min-height: 44px;
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
  }
  .btn--sm { 
    min-height: 38px; 
    padding: 0.6rem 1rem;
  }
  .btn--lg {
    min-height: 50px;
    padding: 1.1rem 1.6rem;
  }
  .btn-block, .btn--block {
    width: 100% !important;
  }
}

/* Medium devices (768px) */
@media (max-width: 768px) {
  .btn, .header-btn {
    min-height: 44px;
  }
  .btn--sm { min-height: 38px; }
  
  /* Back to top — plus petit sur mobile */
  .btt { 
    width: 44px !important; 
    height: 44px !important; 
    left: max(1rem, env(safe-area-inset-left)) !important;
    right: auto !important;
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    font-size: 1.2rem;
  }
}

/* Tactile-friendly spacing for buttons in groups */
@media (max-width: 768px) {
  .btn-group, .button-group {
    gap: 0.75rem !important;
  }
  .btn-group .btn, .button-group .btn {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════
   FORMS & INPUTS — optimisation mobile
══════════════════════════════════════════════════════════ */

/* Ultra-small devices (320px) */
@media (max-width: 320px) {
  input, textarea, select {
    font-size: 1rem; /* Évite le zoom lors de focus */
    min-height: 40px;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  label {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
  }
  .form-group, .su-field {
    margin-bottom: 1.25rem;
  }
}

/* Small devices (480px) */
@media (max-width: 480px) {
  input, textarea, select {
    font-size: 16px; /* Important: 16px for iOS to avoid zoom */
    min-height: 44px;
    padding: 0.85rem 1rem;
    border-radius: 14px;
  }
  textarea {
    min-height: 120px;
    resize: vertical;
  }
  input[type="checkbox"], input[type="radio"] {
    width: 22px;
    height: 22px;
  }
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .form--2col {
    grid-template-columns: 1fr !important;
  }
}

/* Medium devices (768px) */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px;
    min-height: 44px;
    border-radius: 14px;
  }
  .input-wrap {
    min-height: 44px;
  }
  .input-wrap i {
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════
   MISC — fixes globaux mobile
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Évite le débordement horizontal */
  * { max-width: 100%; }
  img { height: auto; }

  /* Alertes flash */
  .alerts { padding: 0.75rem 0.85rem 0; }
  .alert  { padding: 0.85rem 1rem; font-size: 0.9rem; }

  /* Breadcrumbs */
  .breadcrumbs { font-size: 0.8rem; padding: 0.6rem 0.85rem; flex-wrap: wrap; }

  /* Pagination */
  .pagination { gap: 0.4rem; }
  .pagination .btn--sm { padding: 0.5rem 0.75rem; font-size: 0.82rem; }
}

/* ══════════════════════════════════════════════════════════
   FIXES CIBLÉS — classes des vues refaites (auth, dashboard .cd-*)
══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Boutons OAuth Google/Discord : en colonne pour ne pas déborder */
  .oauth-buttons { flex-direction: column !important; }
  .oauth-btn { width: 100% !important; }

  /* Champs à icône : garantir la place de l'icône (placeholder non tronqué) */
  .input-huge { padding-left: 3.2rem !important; }
  .input-wrap-huge i { left: 1.1rem !important; }

  /* Wizard d'inscription (register) : pastilles compactes et barre alignée */
  .step-progress { gap: 2.2rem !important; }
  .step-progress::before { left: 22% !important; right: 22% !important; }
  .step-dot { width: 28px !important; height: 28px !important; }
}

/* Dashboard candidat (préfixe .cd-*) */
@media (max-width: 640px) {
  .cd-page { padding-left: .85rem !important; padding-right: .85rem !important; }
  .cd-grid { grid-template-columns: 1fr !important; }
  .cd-stats { grid-template-columns: 1fr 1fr !important; }
  /* Libellés de stats : ne pas tronquer */
  .cd-stat-l { white-space: normal !important; line-height: 1.2; }
  .cd-stat-v { font-size: 1.3rem !important; }
  .cd-head { gap: 1rem; }
  .cd-avatar { width: 104px !important; height: 104px !important; }
  .cd-avwrap { margin-top: -52px !important; }
  .cd-steps { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 380px) {
  .cd-stats { grid-template-columns: 1fr !important; }
}

/* Anti-débordement horizontal renforcé (mobile) */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}


/* ══════════════════════════════════════════════════════════
   ENHANCED MOBILE OPTIMIZATIONS — Ultra-small & small devices
══════════════════════════════════════════════════════════ */

/* ── FORMS & INPUTS ── */
@media (max-width: 320px) {
  input, textarea, select {
    font-size: 1rem;
    min-height: 40px;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  input, textarea, select {
    font-size: 16px; /* iOS zoom prevention */
    min-height: 44px;
    padding: 0.85rem 1rem;
    border-radius: 14px;
  }
  textarea {
    min-height: 120px;
    resize: vertical;
  }
  .form-row, .form--2col {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ── HERO SECTIONS ── */
@media (max-width: 480px) {
  .hero-master {
    padding: 6rem 0.85rem 3rem !important;
    gap: 1.5rem;
  }
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2.5rem);
  }
  .hero-cta-master {
    flex-direction: column;
    gap: 0.75rem;
  }
  .btn-master {
    width: 100%;
    justify-content: center;
  }
}

/* ── MODALS & OVERLAYS ── */
@media (max-width: 480px) {
  .modal, .dialog, .modal-content {
    width: 90vw !important;
    max-width: 100% !important;
    border-radius: 16px;
    padding: 1.5rem !important;
  }
  .modal-header { padding: 1rem 0; }
  .modal-body { padding: 1.5rem 0; }
  .modal-footer { 
    flex-direction: column-reverse;
    gap: 0.75rem;
  }
  .modal-footer .btn {
    width: 100%;
  }
}

/* ── TOOLTIPS & POPOVERS ── */
@media (max-width: 768px) {
  [role="tooltip"], .tooltip, .popover {
    font-size: 0.85rem;
    padding: 0.65rem 0.9rem;
    max-width: 280px;
  }
}

/* ── DROPDOWNS & MENUS ── */
@media (max-width: 480px) {
  .dropdown-menu, .menu, .popover {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }
}

/* ── CARDS & PANELS ── */
@media (max-width: 480px) {
  .card, .panel, .box {
    padding: 1.25rem !important;
    border-radius: 16px;
    margin-bottom: 1rem;
  }
  .card--hover:active {
    transform: scale(0.98);
  }
}

/* ── SPACING UTILITIES ── */
@media (max-width: 480px) {
  .p-4 { padding: 1rem !important; }
  .p-6 { padding: 1.5rem !important; }
  .m-4 { margin: 1rem !important; }
  .gap-4 { gap: 1rem !important; }
  .gap-6 { gap: 1.5rem !important; }
}

/* ── OVERFLOW FIXES ── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  * {
    max-width: 100%;
  }
}

/* ── SAFE AREA SUPPORT (iPhone notch, etc.) ── */
@media (max-width: 768px) {
  .app-main {
    padding-left: max(0.85rem, env(safe-area-inset-left));
    padding-right: max(0.85rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .sticky-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ── MICRO-INTERACTIONS — disabled on touch ── */
@media (max-width: 768px) and (hover: none) {
  .card:hover { transform: none; }
  .btn:hover { transform: none; }
  .interactive:hover { box-shadow: none; }
}


/* ══════════════════════════════════════════════════════════
   CRITICAL FIXES — Form & Input Overflow Prevention
══════════════════════════════════════════════════════════ */

/* ── AUTH FORMS — Login / Register / OTP ── */
@media (max-width: 480px) {
  .auth-wrap {
    padding: 1.5rem 0.85rem !important;
    min-height: auto;
  }
  
  .auth-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    padding: 0 0.85rem !important;
    max-width: 100% !important;
  }
  
  .auth-side {
    display: none !important;
  }
  
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }
  
  .auth-card--wide {
    max-width: 100% !important;
  }
  
  .auth-card-head {
    margin-bottom: 2rem !important;
  }
  
  .auth-card-head h2 {
    font-size: 1.5rem !important;
  }
  
  .auth-card .input-wrap {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .auth-card .input-wrap input {
    height: 48px !important;
    font-size: 16px !important;
    padding: 0.85rem 1rem !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .auth-card .input-wrap i:first-child {
    left: 0.85rem !important;
  }
  
  .auth-card .toggle-pw {
    right: 0.85rem !important;
  }
  
  .auth-card .btn--block {
    height: 48px !important;
    font-size: 1rem !important;
    width: 100% !important;
  }
  
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .forgot-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .auth-form-alt {
    padding-top: 1.5rem !important;
    font-size: 0.9rem;
  }
}

/* ── CANDIDATURE FORM — Application Wizard ── */
@media (max-width: 480px) {
  .apply-wrapper {
    padding: 5rem 0.85rem 4rem !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .form-section {
    padding: 1.5rem 1.25rem !important;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
  }
  
  .form-section h3 {
    font-size: 1.25rem !important;
  }
  
  .wizard-steps {
    gap: 0.35rem !important;
    padding: 0 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
  }
  
  .step-dot {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    flex-shrink: 0;
  }
  
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .form-group {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .input-wrap {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .input-wrap input,
  .input-wrap textarea,
  .input-wrap select {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }
  
  textarea {
    min-height: 120px !important;
  }
  
  .wizard-nav {
    flex-direction: column-reverse !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }
  
  .wizard-nav .btn,
  .wizard-nav button {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .role-switcher {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .role-card {
    padding: 1.25rem 1rem !important;
  }
}

/* ── SUPPORT FORM ── */
@media (max-width: 480px) {
  .su-wrap {
    padding: 1rem !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .su-box {
    padding: 1.5rem 1.25rem !important;
    box-sizing: border-box;
  }
  
  .su-cats {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }
  
  .su-chip {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 44px;
  }
  
  .su-input {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important;
    min-height: 44px;
  }
  
  .su-btn {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 48px;
  }
  
  .su-field {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .su-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ── RECLAMATIONS FORM ── */
@media (max-width: 480px) {
  .recla-form, .reclamation-form {
    width: 100% !important;
    box-sizing: border-box;
  }
  
  .recla-wrapper {
    padding: 1.5rem 0.85rem !important;
  }
}

/* ── PASSWORD RESET / FORGOT ── */
@media (max-width: 480px) {
  .forgot-wrapper {
    padding: 5rem 0.85rem 4rem !important;
  }
  
  .forgot-card {
    max-width: 100% !important;
    padding: 1.5rem 1.25rem !important;
  }
}

/* ── UNIVERSAL BOX-SIZING FIX ── */
@media (max-width: 768px) {
  input,
  textarea,
  select,
  button,
  .btn,
  .form-control,
  .input-wrap,
  .form-group,
  .form-section {
    box-sizing: border-box !important;
  }
  
  * {
    box-sizing: border-box;
  }
}

/* ── OVERFLOW-X PREVENTION ── */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip !important;
  }
  
  .app-main,
  .container,
  main,
  section {
    min-width: 0;
    max-width: 100% !important;
    overflow-x: clip !important;
  }
}

/* ── SAFE AREA + NOTCH SUPPORT ── */
@media (max-width: 768px) {
  body {
    padding-left: max(0, env(safe-area-inset-left));
    padding-right: max(0, env(safe-area-inset-right));
    padding-top: calc(var(--nav-h, 82px) + env(safe-area-inset-top, 0px));
    padding-bottom: max(0, env(safe-area-inset-bottom));
  }
  
  .sticky-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}



/* ══════════════════════════════════════════════════════════
   SPECIFIC VIEW FIXES — Modern refactored pages (support, recla)
══════════════════════════════════════════════════════════ */

/* Support page (.su-*) */
@media (max-width: 640px) {
  .su {
    overflow-x: hidden;
    width: 100%;
  }
  
  .su-hero {
    margin: 0 !important;
    border-radius: 0;
    min-height: 35vh;
    padding: clamp(2rem, 6vh, 3.5rem) 1rem !important;
  }
  
  .su-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    line-height: 1.2;
  }
  
  .su-hero p {
    font-size: 0.95rem;
    max-width: 100%;
  }
  
  .su-channels {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: 0 1rem;
  }
  
  .su-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    padding: 0 1rem;
  }
  
  .su-box {
    padding: 1.5rem 1.25rem !important;
    border-radius: 16px;
  }
  
  .su-box-title {
    font-size: 1.2rem !important;
  }
  
  .su-faq-item {
    border-radius: 12px;
  }
  
  .su-faq-item summary {
    padding: 1rem 1.2rem !important;
    font-size: 0.95rem;
  }
  
  .su-faq-body {
    padding: 0.75rem 1.2rem 1.2rem !important;
    font-size: 0.9rem;
  }
}

/* Reclamations page */
@media (max-width: 640px) {
  .recla-wrapper,
  .reclamation-wrapper {
    padding: 1.5rem 0.85rem !important;
    width: 100%;
    box-sizing: border-box;
  }
  
  .recla-card,
  .reclamation-card {
    padding: 1.25rem 1rem !important;
    border-radius: 14px;
    margin-bottom: 1rem;
  }
  
  .recla-form,
  .reclamation-form {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Admin pages (.ad-*) */
@media (max-width: 640px) {
  .ad {
    width: 100%;
    overflow-x: hidden;
  }
  
  .ad-shell {
    max-width: 100%;
    padding: 1.5rem 0.85rem 4rem !important;
  }
  
  .ad-mcard {
    margin: 0 !important;
    border-radius: 14px;
  }
  
  .ad-cover {
    height: 120px;
  }
  
  .ad-mhead-av {
    width: 90px;
    height: 90px;
    font-size: 2rem;
  }
  
  .ad-avwrap {
    margin-top: -45px;
  }
  
  .ad-section {
    border-radius: 14px;
    margin-bottom: 1.5rem;
    overflow-x: hidden;
  }
  
  .ad-sec-head {
    padding: 1rem 1.25rem;
    flex-wrap: wrap;
  }
  
  .ad-sec-body {
    padding: 1.25rem;
  }
  
  .ad-toggle {
    padding: 0.85rem;
    flex-wrap: wrap;
  }
  
  .ad-switch {
    width: 42px;
    height: 24px;
  }
  
  .ad-savebar {
    flex-direction: column-reverse;
    gap: 0.75rem;
    padding: 1rem 0.85rem;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
  }
  
  .ad-save,
  .ad-cancel {
    width: 100% !important;
    box-sizing: border-box;
  }
}

/* Dashboard (.cd-*) */
@media (max-width: 640px) {
  .cd-page {
    padding: 1rem 0.85rem 3rem !important;
    width: 100%;
    box-sizing: border-box;
  }
  
  .cd-head {
    flex-direction: column;
    gap: 1rem;
  }
  
  .cd-avatar {
    width: 100px !important;
    height: 100px !important;
  }
  
  .cd-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  
  .cd-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* OTP & verification pages */
@media (max-width: 480px) {
  .otp-wrapper,
  .verify-wrapper {
    padding: 4rem 0.85rem 2rem !important;
  }
  
  .otp-input-group,
  .verify-input-group {
    display: flex !important;
    justify-content: space-between;
    gap: 0.35rem !important;
    width: 100% !important;
  }
  
  .otp-input-group input,
  .verify-input-group input {
    width: calc(20% - 0.15rem) !important;
    height: 48px !important;
    font-size: 1.5rem;
    text-align: center;
    box-sizing: border-box;
  }
  
  .otp-resend {
    width: 100% !important;
    text-align: center;
    margin-top: 1.5rem;
  }
}

/* Tables overflow fix */
@media (max-width: 640px) {
  .data-table {
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    width: 100%;
    display: table;
    border-collapse: collapse;
  }
  
  thead {
    display: table-header-group;
  }
  
  tbody {
    display: table-row-group;
  }
  
  tr {
    display: table-row;
  }
  
  th, td {
    display: table-cell;
    padding: 0.5rem 0.65rem !important;
  }
}

/* =========================================================
   V4 PRESENTATION (PREMIUM DARK SAAS / GLASSMORPHISM)
========================================================== */

/* Fond de base : couleur unie. Le décor animé (ondulations + bulles) est
   fourni globalement par .site-bg (voir layouts/main.php), rendu au-dessus. */
html {
  background-color: var(--c-bg) !important;
  background-image: none !important;
}
html[data-theme="light"] {
  background-color: #eef0f4 !important;
  background-image: none !important;
}
body {
  background: transparent !important;
}

.premium-layout {
  font-family: var(--font-body);
  color: var(--c-text);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

.text-gradient-animated {
  background: linear-gradient(135deg, #ff0000 0%, #ff0000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* HERO V2 */
.hero-v2 {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12rem 0 8rem;
  z-index: 1;
}

.hero-v2-glow {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  height: 40vh;
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.10) 0%, transparent 70%);
  /* filter:blur supprimé (80vw×80vh trop coûteux en mémoire GPU) — gradient seul suffit */
  z-index: -1;
}

.hero-v2-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 2.5rem;
  backdrop-filter: none; /* supprimé — layer GPU inutile sur badge hero */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ff0000;
  box-shadow: 0 0 12px #ff0000;
  animation: pulse-soft 2s infinite ease-in-out;
}
@keyframes pulse-soft {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.hero-v2-title {
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  color: #fff;
}

.hero-v2-lead {
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  color: var(--c-text-soft);
  line-height: 1.6;
  max-width: 650px;
  margin-bottom: 3.5rem;
  font-weight: 400;
}

.hero-v2-actions {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 6rem;
}

.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2.2rem;
  background: linear-gradient(135deg, #ff0000 0%, #f74849 100%);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 100px;
  text-decoration: none;
  transition: all var(--t-apple);
  box-shadow: 0 4px 15px rgba(255, 0, 0, 0.25);
}
.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4);
  background: linear-gradient(135deg, #fb7185 0%, #fb923c 100%);
}
.btn-premium--disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  box-shadow: none;
  cursor: not-allowed;
}
.btn-premium--disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,0.1);
}

.btn-premium-ghost {
  display: inline-flex;
  align-items: center;
  padding: 1.1rem 2.2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--t-apple);
  /* backdrop-filter supprimé — fond opaque compense */
}
.btn-premium-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* BENTO STATS IN HERO */
.hero-v2-bento {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 1100px;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .hero-v2-bento { grid-template-columns: 1fr; gap: 1rem; }
}

.bento-card {
  background: rgba(20, 20, 20, 0.88);
  /* backdrop-filter supprimé (~11 layers GPU simultanés) */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
}
.bento-card:hover { 
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(30, 30, 30, 0.6);
  transform: translateY(-2px);
}

.bento-card--main {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 3rem 2rem;
  background: linear-gradient(145deg, rgba(30,30,30,0.8) 0%, rgba(10,10,10,0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.bento-card--main h2 {
  font-family: var(--font-head);
  font-size: 4rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: #fff;
  letter-spacing: -0.03em;
}

.bento-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.bento-data h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.2rem;
  color: #fff;
}
.bento-data p {
  color: var(--c-text-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* SECTIONS V2 */
.section-v2 {
  padding: 8rem 0;
  position: relative;
  z-index: 2;
}
.section-v2-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 5rem auto;
}
.kicker-v2 {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}
.section-v2-head h2 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.section-v2-head p {
  font-size: 1.1rem;
  color: var(--c-text-soft);
  line-height: 1.6;
}

/* ROLES GRID */
.roles-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  padding: 2rem 0;
}

.role-v2-card {
  background: rgba(18, 18, 18, 0.92);
  /* backdrop-filter supprimé */
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}
.role-v2-card:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(25, 25, 25, 0.6);
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.role-v2-card--anim { --role-c: #A855F7; }
.role-v2-card--modo { --role-c: #3B82F6; }
.role-v2-card--admin { --role-c: #F43F5E; }

.role-v2-ribbon {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: var(--role-c);
  padding: 0.3rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 10;
}

.role-v2-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  color: var(--role-c);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.role-v2-content {
  flex: 1;
}
.role-v2-content h3 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.role-v2-content p {
  color: var(--c-text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.role-v2-list {
  list-style: none; padding: 0; margin: 0 0 2.5rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.role-v2-list li {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.9rem; color: var(--c-text-soft);
}
.role-v2-list i {
  color: var(--role-c);
  font-size: 0.8rem;
}

.role-v2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.5rem;
  margin-top: auto;
}
.role-v2-age {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--c-muted);
}
.btn-role {
  padding: 0.6rem 1.25rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.btn-role:hover {
  background: var(--role-c);
  border-color: var(--role-c);
  color: #fff;
}
.btn-role--disabled {
  background: transparent;
  border-color: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.3);
  cursor: not-allowed;
}

/* PROCESS BENTO */
.process-v2-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .process-v2-bento { grid-template-columns: 1fr; }
}
.bento-box {
  background: rgba(18, 18, 18, 0.92);
  /* backdrop-filter supprimé */
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 3rem;
  position: relative;
  transition: all 0.3s ease;
}
.bento-box:hover {
  background: rgba(25, 25, 25, 0.6);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.bento-box-num {
  position: absolute;
  top: 1.5rem; right: 2rem;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  letter-spacing: -0.05em;
}
.bento-box-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 1.5rem;
}
.bento-box h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.bento-box p {
  font-size: 0.95rem;
  color: var(--c-text-soft);
  line-height: 1.6;
}

/* REQ V2 GRID */
.req-v2-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .req-v2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .req-v2-grid { grid-template-columns: 1fr; }
}
.req-v2-card {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: rgba(15, 15, 15, 0.5);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 20px;
  transition: all 0.3s ease;
}
.req-v2-card:hover {
  background: rgba(25, 25, 25, 0.6);
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.req-v2-card i {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 1rem;
  display: block;
}
.req-v2-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.req-v2-card p {
  font-size: 0.9rem;
  color: var(--c-text-soft);
  margin: 0;
}

/* ============================================================
   _theme-compat.css — Couche de compatibilité thème clair
   ------------------------------------------------------------
   Beaucoup de vues embarquent du CSS inline avec des couleurs
   hardcodées (blanc, fonds noirs) pensées pour le dark.
   Ce fichier rétablit un contraste correct en mode CLAIR pour
   ces motifs récurrents, sans toucher aux vues une par une.

   N'affecte QUE html[data-theme="light"] pour ne pas casser le dark.
   ============================================================ */


/* ------------------------------------------------------------
   1. Sur-couche pour "assombrir" légèrement le fond clair global
      afin que les fonds inline rgba() translucides restent lisibles
------------------------------------------------------------ */
html[data-theme="light"] {
  /* Adoucit les grands aplats blancs sous le glass */
}

/* ------------------------------------------------------------
   2. Textes clairs hardcodés → encre en mode clair
      On cible les couleurs texte les plus fréquentes des vues.
------------------------------------------------------------ */
html[data-theme="light"] body {
  color: var(--c-text);
}

/* Titres / textes "blancs" dans les blocs premium (home, lore, etc.)
   On ne peut pas surcharger un style inline `color:#fff` avec un
   sélecteur d'élément (spécificité inline plus forte). On agit donc
   sur les CONTENEURS qui héritent, et on force les classes connues. */

/* ------------------------------------------------------------
   3. HOME (home/index.php) — classes .mp-*
------------------------------------------------------------ */
html[data-theme="light"] .mp-hero-title,
html[data-theme="light"] .mp-section-title,
html[data-theme="light"] .mp-quote-text,
html[data-theme="light"] .mp-kouta-name,
html[data-theme="light"] .mp-stat-val,
html[data-theme="light"] .mp-float-label,
html[data-theme="light"] .mp-val-title { color: var(--c-text) !important; }

html[data-theme="light"] .mp-hero-sub,
html[data-theme="light"] .mp-section-sub,
html[data-theme="light"] .mp-kouta-card p,
html[data-theme="light"] .mp-kouta-items li,
html[data-theme="light"] .mp-val-desc { color: var(--c-text-soft) !important; }

html[data-theme="light"] .mp-badge {
  background: rgba(9,9,20,.03);
  border-color: rgba(9,9,20,.1);
  color: var(--c-muted) !important;
}
html[data-theme="light"] .mp-hero-title .t-outline {
  -webkit-text-stroke: 2px rgba(9,9,20,.2);
}
html[data-theme="light"] .mp-hero-stats {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
html[data-theme="light"] .mp-stat { border-right-color: rgba(9,9,20,.08); }
html[data-theme="light"] .mp-stat:hover { background: rgba(9,9,20,.03); }
html[data-theme="light"] .mp-stat-label { color: var(--c-muted) !important; }
html[data-theme="light"] .mp-btn-ghost {
  background: rgba(9,9,20,.04);
  border-color: rgba(9,9,20,.12);
  color: var(--c-text) !important;
}
html[data-theme="light"] .mp-btn-ghost:hover { background: rgba(9,9,20,.08); }
html[data-theme="light"] .mp-marquee {
  background: rgba(255,255,255,.5);
  border-color: var(--c-primary-soft);
}
html[data-theme="light"] .mp-mq-item .mq-fill { color: rgba(9,9,20,.75); }
html[data-theme="light"] .mp-mq-item .mq-stroke { -webkit-text-stroke: 1px rgba(9,9,20,.2); }
html[data-theme="light"] .mp-kouta-card,
html[data-theme="light"] .mp-float-card,
html[data-theme="light"] .mp-val-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .mp-kouta-header { border-bottom-color: rgba(9,9,20,.08); }
html[data-theme="light"] .mp-quote-bg { -webkit-text-stroke-color: rgba(9,9,20,.04); }
html[data-theme="light"] .mp-kouta-role { color: var(--c-primary) !important; }
html[data-theme="light"] .mp-kouta-items li i { color: var(--c-accent); }
html[data-theme="light"] .mp-float-label { color: var(--c-muted) !important; }
html[data-theme="light"] .mp-quote-author { color: var(--c-muted-2) !important; }

/* Valeurs (bento) */
html[data-theme="light"] .mp-val-card h3 { color: var(--c-text) !important; }
html[data-theme="light"] .mp-val-card p { color: var(--c-text-soft) !important; }

/* Rôles (cartes recrutement) */
html[data-theme="light"] .mp-role-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-md);
}
html[data-theme="light"] .mp-role-info strong { color: var(--c-text); }
html[data-theme="light"] .mp-role-info span { color: var(--c-text-soft); }
html[data-theme="light"] .mp-role-closed {
  background: rgba(9,9,20,.04);
  color: var(--c-muted);
  border-color: rgba(9,9,20,.08);
}
html[data-theme="light"] .mp-role-arrow { color: var(--c-muted-2); }

/* Final CTA */
html[data-theme="light"] .mp-cta-section h2 { color: var(--c-text) !important; }
html[data-theme="light"] .mp-cta-section p { color: var(--c-text-soft) !important; }

/* Section eyebrow lisible en clair */
html[data-theme="light"] .mp-section-eyebrow {
  background: var(--c-primary-soft);
  border-color: rgba(225,29,29,.2);
  color: var(--c-primary) !important;
}

/* Canvas de fond : atténué en clair pour ne pas noircir */
html[data-theme="light"] #mp-canvas { opacity: .12 !important; }

/* ------------------------------------------------------------
   4. FOOTER (_footer.php)
------------------------------------------------------------ */
html[data-theme="light"] .mp-footer,
html[data-theme="light"] .site-footer { color: var(--c-text-soft); }
html[data-theme="light"] .mp-footer h1,
html[data-theme="light"] .mp-footer h2,
html[data-theme="light"] .mp-footer h3,
html[data-theme="light"] .mp-footer h4,
html[data-theme="light"] .mp-footer strong { color: var(--c-text); }

/* ------------------------------------------------------------
   5. AUTH (auth/*) — .auth-* patterns
------------------------------------------------------------ */
html[data-theme="light"] .auth-card,
html[data-theme="light"] .auth-wrap .auth-panel {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .auth-title,
html[data-theme="light"] .auth-card h1,
html[data-theme="light"] .auth-card h2 { color: var(--c-text); }
html[data-theme="light"] .auth-sub,
html[data-theme="light"] .auth-card p { color: var(--c-text-soft); }

/* ------------------------------------------------------------
   6. Cartes / panneaux génériques translucides sombres
      (dashboard, applications, support, respondent)
      Beaucoup utilisent background: rgba(255,255,255,.02..08)
      qui devient invisible sur fond clair -> on renforce.
------------------------------------------------------------ */
html[data-theme="light"] .bento-card,
html[data-theme="light"] .stat-box,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .app-row,
html[data-theme="light"] .recent-apps-card {
  background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] .app-row-info strong,
html[data-theme="light"] .stat-val,
html[data-theme="light"] .mini-stat-info .val,
html[data-theme="light"] .profile-name,
html[data-theme="light"] .card-title { color: var(--c-text) !important; }
html[data-theme="light"] .app-row-info small,
html[data-theme="light"] .stat-lbl,
html[data-theme="light"] .mini-stat-info h5,
html[data-theme="light"] .contact-pill { color: var(--c-text-soft) !important; }

/* ------------------------------------------------------------
   7. Respondent (dashboard.php + application_show.php) — .rd-* / .as-*
------------------------------------------------------------ */
html[data-theme="light"] .rd-card,
html[data-theme="light"] .as-card,
html[data-theme="light"] .as-section,
html[data-theme="light"] .as-form-card,
html[data-theme="light"] .as-qa-item {
  background: var(--c-surface);
  border-color: var(--c-border);
}
html[data-theme="light"] .rd-name,
html[data-theme="light"] .as-profile-name,
html[data-theme="light"] .as-section-head h2,
html[data-theme="light"] .as-topbar-name { color: var(--c-text) !important; }
html[data-theme="light"] .as-qa-a { color: var(--c-text-soft) !important; }
html[data-theme="light"] .as-qa-q {
  background: rgba(9,9,20,.03);
  color: var(--c-text-soft) !important;
  border-bottom-color: rgba(9,9,20,.06);
}
html[data-theme="light"] .rd-header-left h1 { color: var(--c-text) !important; }
html[data-theme="light"] .rd-filter-btn,
html[data-theme="light"] .as-anchor-btn {
  background: rgba(9,9,20,.03);
  border-color: rgba(9,9,20,.08);
  color: var(--c-text-soft) !important;
}
html[data-theme="light"] .as-anchors { background: rgba(242,243,247,.85); border-color: var(--c-border); }
html[data-theme="light"] .rd-search input,
html[data-theme="light"] .as-modal-textarea,
html[data-theme="light"] .as-textarea {
  background: rgba(9,9,20,.03);
  border-color: var(--c-border);
  color: var(--c-text);
}

/* Modale décision — fond clair */
html[data-theme="light"] .as-modal {
  background: var(--c-bg-soft);
  border-color: var(--c-border);
}
html[data-theme="light"] .as-modal-overlay { background: rgba(20,20,40,.4); }
html[data-theme="light"] .as-modal-head h3,
html[data-theme="light"] .as-modal-label { color: var(--c-text); }

/* ------------------------------------------------------------
   8. Cookie banner / modal (main.php)
------------------------------------------------------------ */
html[data-theme="light"] .cookie-banner {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .cookie-text h3 { color: var(--c-text); }
html[data-theme="light"] .cookie-text p { color: var(--c-text-soft); }
html[data-theme="light"] .cookie-modal-dialog {
  background: var(--c-bg-soft);
  border-color: var(--c-border);
}
html[data-theme="light"] .cookie-modal-header h3,
html[data-theme="light"] .cookie-option h4 { color: var(--c-text); }
html[data-theme="light"] .cookie-btn--secondary {
  background: rgba(9,9,20,.05);
  border-color: rgba(9,9,20,.1);
  color: var(--c-text);
}
html[data-theme="light"] .cookie-toggle label { background: rgba(9,9,20,.15); }

/* ------------------------------------------------------------
   9. Pages légales (cgu/legal/privacy) déjà tokenisées en partie
------------------------------------------------------------ */
html[data-theme="light"] .legal-page,
html[data-theme="light"] .legal-content { color: var(--c-text-soft); }
html[data-theme="light"] .legal-page h1,
html[data-theme="light"] .legal-page h2,
html[data-theme="light"] .legal-page h3 { color: var(--c-text); }

/* ------------------------------------------------------------
   10. Panel Admin (admin/config.php) — classes .ac-*
------------------------------------------------------------ */
html[data-theme="light"] .ac-sidebar,
html[data-theme="light"] .ac-section {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
html[data-theme="light"] .ac-sb-brand-text h3,
html[data-theme="light"] .ac-page-title h1,
html[data-theme="light"] .ac-section-head h3 { color: var(--c-text) !important; }
html[data-theme="light"] .ac-sb-brand-text small,
html[data-theme="light"] .ac-sb-meta span,
html[data-theme="light"] .ac-page-title p,
html[data-theme="light"] .ac-section-head p,
html[data-theme="light"] .ac-field label,
html[data-theme="light"] .ac-field .ac-hint { color: var(--c-text-soft) !important; }
html[data-theme="light"] .ac-sb-link { color: var(--c-text-soft) !important; }
html[data-theme="light"] .ac-sb-link:hover { color: var(--c-text) !important; background: rgba(9,9,20,.05); }
html[data-theme="light"] .ac-sb-meta,
html[data-theme="light"] .ac-toggle { background: rgba(9,9,20,.03); border-color: rgba(9,9,20,.07); }
html[data-theme="light"] .ac-section-head { background: rgba(9,9,20,.02); border-bottom-color: rgba(9,9,20,.06); }
html[data-theme="light"] .ac-field input[type="text"],
html[data-theme="light"] .ac-field input[type="email"],
html[data-theme="light"] .ac-field input[type="number"],
html[data-theme="light"] .ac-field textarea {
  background: rgba(9,9,20,.03) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
html[data-theme="light"] .ac-toggle-text strong { color: var(--c-text); }
html[data-theme="light"] .ac-toggle-text span { color: var(--c-text-soft) !important; }
html[data-theme="light"] .ac-sw-track { background: rgba(9,9,20,.12); border-color: rgba(9,9,20,.1); }


/* ============================================================
   11. RAFFINEMENT THÈME CLAIR — profondeur & définition
   Le clair a besoin d'OMBRES portées (pas de lueurs) pour créer
   la hiérarchie visuelle. On renforce les cartes, on adoucit les
   glows rouges qui salissent le blanc, on nette les bordures.
   ============================================================ */

/* Cartes glass : contour net + ombre douce = "posées" sur le fond */
html[data-theme="light"] .bento-card,
html[data-theme="light"] .glass-box,
html[data-theme="light"] .choose-card,
html[data-theme="light"] .com-card,
html[data-theme="light"] .social-card,
html[data-theme="light"] .com-stat-card,
html[data-theme="light"] .mp-val-card,
html[data-theme="light"] .mp-role-card,
html[data-theme="light"] .mp-float-card,
html[data-theme="light"] .mp-kouta-card,
html[data-theme="light"] .lore-card,
html[data-theme="light"] .dossier-card,
html[data-theme="light"] .support-card-box,
html[data-theme="light"] .auth-card-box,
html[data-theme="light"] .legal-article,
html[data-theme="light"] .form-section,
html[data-theme="light"] .success-card-box {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(9,9,20,.07);
  box-shadow:
    0 1px 2px rgba(20,20,45,.04),
    0 8px 24px rgba(20,20,45,.07),
    0 24px 56px rgba(20,20,45,.06);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(1.1);
  backdrop-filter: blur(var(--blur-lg)) saturate(1.1);
}

/* Petites surfaces (stat, mini-stat, app-row) : blanc plus opaque, contour subtil */
html[data-theme="light"] .stat-box,
html[data-theme="light"] .mini-stat,
html[data-theme="light"] .app-row,
html[data-theme="light"] .rd-card,
html[data-theme="light"] .as-card,
html[data-theme="light"] .as-section,
html[data-theme="light"] .as-form-card,
html[data-theme="light"] .as-qa-item,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .value-item,
html[data-theme="light"] .info-item,
html[data-theme="light"] .intro-card {
  background: #ffffff;
  border-color: rgba(9,9,20,.08);
  box-shadow: 0 1px 2px rgba(20,20,45,.04), 0 4px 14px rgba(20,20,45,.05);
}

/* Hover des cartes en clair : ombre plus marquée (pas de glow rouge) */
html[data-theme="light"] [data-fx-lift]:hover,
html[data-theme="light"] .bento-card:hover,
html[data-theme="light"] .com-card:hover,
html[data-theme="light"] .choose-card:hover,
html[data-theme="light"] .dossier-card:hover,
html[data-theme="light"] .lore-card:hover {
  border-color: rgba(9,9,20,.14) !important;
  box-shadow:
    0 4px 12px rgba(20,20,45,.08),
    0 18px 44px rgba(20,20,45,.12),
    0 40px 90px rgba(20,20,45,.1) !important;
}

/* Glow curseur (fx) : très discret en clair, teinte rouge à peine visible */
html[data-theme="light"] .fx-glow::before {
  background: radial-gradient(
    460px circle at var(--mx,50%) var(--my,50%),
    rgba(225,29,29,.06), transparent 45%);
}
html[data-theme="light"] .fx-glow:hover::before { opacity: .9; }

/* Shine (reflet) : plus subtil sur blanc pour éviter l'effet "lavé" */
html[data-theme="light"] .fx-shine::after {
  background: linear-gradient(
    100deg, transparent, rgba(9,9,20,.05) 40%, transparent 70%);
}

/* Halo d'ambiance rouge global : atténué en clair (sinon fond rosâtre) */
html[data-theme="light"]::after {
  opacity: .35 !important;
}

/* Inputs en clair : fond blanc franc + focus lisible */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .input-huge,
html[data-theme="light"] .sb-textarea,
html[data-theme="light"] .as-textarea,
html[data-theme="light"] .as-modal-textarea {
  background: #ffffff !important;
  border-color: rgba(9,9,20,.14) !important;
  color: var(--c-text) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--c-muted) !important; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] .input-huge:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 4px var(--c-primary-soft) !important;
}

/* Badges / pills translucides sombres → clairs lisibles */
html[data-theme="light"] .hero-badge,
html[data-theme="light"] .mp-badge,
html[data-theme="light"] .com-hero-badge,
html[data-theme="light"] .lore-hero-eyebrow,
html[data-theme="light"] .ah-badge,
html[data-theme="light"] .hero-badge-apps,
html[data-theme="light"] .hero-badge-master {
  background: #ffffff !important;
  border-color: rgba(9,9,20,.1) !important;
  color: var(--c-text-soft) !important;
  box-shadow: 0 2px 8px rgba(20,20,45,.05) !important;
}

/* Séparateurs / traits décoratifs blancs → gris encre en clair */
html[data-theme="light"] .ft-quote-bgtext,
html[data-theme="light"] .lore-hero-bg-text,
html[data-theme="light"] .mp-quote-bg {
  -webkit-text-stroke-color: rgba(9,9,20,.06) !important;
}

/* Boutons ghost / secondaires translucides → surface claire nette */
html[data-theme="light"] .btn--ghost,
html[data-theme="light"] .mp-btn-ghost,
html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .wizard-btn--ghost,
html[data-theme="light"] .btn-success-ghost {
  background: #ffffff !important;
  border-color: rgba(9,9,20,.12) !important;
  color: var(--c-text) !important;
  box-shadow: 0 1px 3px rgba(20,20,45,.05) !important;
}
html[data-theme="light"] .btn--ghost:hover,
html[data-theme="light"] .mp-btn-ghost:hover,
html[data-theme="light"] .btn-ghost:hover {
  background: var(--c-bg-alt) !important;
  border-color: rgba(9,9,20,.2) !important;
}

/* Scrollbar claire */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(9,9,20,.18);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(9,9,20,.3);
}

/* Progress bar de scroll : garde le rouge mais halo réduit en clair */
html[data-theme="light"] #scrollProgress {
  box-shadow: 0 0 8px rgba(225,29,29,.3) !important;
}


/* ============================================================
   12. FOND IMAGE VISIBLE PARTOUT
   Le fond (body::before, var --bg-image) doit transparaître sur
   toutes les pages. On force la transparence des grands
   conteneurs de page qui, sinon, posent un aplat opaque.
   S'applique aux DEUX thèmes.
   ============================================================ */
.app-shell, .app-main,
.hm, .lr, .com-page, .dashboard-page, .apps-page, .app-view-page,
.choose-wrap, .success-wrap, .support-wrap, .apply-wrapper,
.auth-wrap, .legal-page, .legal-shell, .admin-app-page, .as-page {
  background: transparent !important;
}

/* ============================================================
   _fx.css — Moteur d'effets visuels Masterpiece & Parallaxe
   Ordre des Bannis · Refonte
   ============================================================ */


/* ------------------------------------------------------------
   0. BARRE DE DÉFILEMENT LASER (TOP DU VIEWPORT)
------------------------------------------------------------ */
.scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent), #ff6b8b);
  box-shadow: 0 0 12px var(--c-primary), 0 0 24px var(--c-primary-glow);
  z-index: var(--z-laser, 1001);
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ------------------------------------------------------------
   1. SCROLL FLUIDE & PARALLAXE
------------------------------------------------------------ */
html { scroll-behavior: smooth; }

/* Retire will-change statique — appliqué dynamiquement par fx.js juste avant la RAF */
[data-parallax], [data-mouse] {
  /* will-change géré par JS */
}

/* ------------------------------------------------------------
   2. RÉVÉLATION CINÉMATIQUE (Blur + Scale + Translation)
------------------------------------------------------------ */
/* Révélation : opacity + transform uniquement — filter:blur retiré (GPU repaint) */
.fx-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.978);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fx-reveal.fx-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* will-change nettoyé après la transition */
.fx-reveal.fx-done {
  will-change: auto;
}

.fx-reveal[style*="--fx-i"] {
  transition-delay: calc(var(--fx-i) * 65ms);
}

/* ------------------------------------------------------------
   3. TILT 3D INTERACTIF & SPOTLIGHT SPÉCULAIRE
------------------------------------------------------------ */
/* Tilt : preserve-3d retiré globalement (trop de layers GPU sur toutes les cartes).
   Appliqué uniquement sur .rb-card via roles.php qui en a réellement besoin. */
.fx-tilt {
  transform:
    perspective(1000px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(var(--tz, 0px));
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.fx-tilt.fx-tilt-reset {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Spotlight spéculaire qui suit le curseur */
.fx-glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fx-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    480px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 42, 75, 0.22),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.fx-glow:hover::before {
  opacity: 1;
}

/* ------------------------------------------------------------
   4. SHINE REFLECTIF (BALAYAGE DU SURVOL)
------------------------------------------------------------ */
.fx-shine {
  position: relative;
  overflow: hidden;
}

.fx-shine::after {
  content: "";
  position: absolute;
  top: 0; left: -140%;
  width: 65%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 80%
  );
  transform: skewX(-20deg);
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}

.fx-shine:hover::after {
  left: 150%;
}

/* ------------------------------------------------------------
   5. FLOTTEMENT INERTIEL DÉSYNCHRONISÉ (.fx-floaty)
------------------------------------------------------------ */
@keyframes fx-floaty {
  0%, 100% { translate: 0 calc(var(--famp, 6px) * -1); }
  50%      { translate: 0 var(--famp, 6px); }
}

/* fx-floaty désactivé — floating breathing supprimé de fx.js (trop de layers GPU).
   Conservé pour usage manuel ponctuel uniquement. */
.fx-floaty {
  animation: fx-floaty var(--fdur, 7s) ease-in-out var(--fdelay, 0s) infinite;
  /* will-change:translate retiré — layer GPU permanent pour chaque floater */
}

/* ------------------------------------------------------------
   6. BOUTONS MAGNÉTIQUES & ÉLÉVATION TACTIQUE
------------------------------------------------------------ */
/* Boutons magnétiques : will-change retiré du CSS statique, ajouté au hover uniquement */
.btn-magnetic, .pm-btn-primary, .btn-primary {
  position: relative;
  cursor: pointer;
}
.btn-magnetic:hover, .pm-btn-primary:hover, .btn-primary:hover {
  will-change: transform;
}
.btn-magnetic:not(:hover), .pm-btn-primary:not(:hover), .btn-primary:not(:hover) {
  will-change: auto;
}

.btn-magnetic:active, .pm-btn-primary:active, .btn-primary:active {
  transform: scale(0.96) !important;
}

/* ------------------------------------------------------------
   7. LIGNES HUD & ACCENTS NÉON
------------------------------------------------------------ */
.fx-laser-line {
  position: relative;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
  opacity: 0.65;
}

.fx-pulse-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 42, 75, 0.12);
  border: 1px solid rgba(255, 42, 75, 0.28);
  color: var(--c-primary);
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fx-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 10px var(--c-primary);
  animation: fx-dot-pulse 2s ease-in-out infinite;
}

@keyframes fx-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px var(--c-primary); }
}

/* ------------------------------------------------------------
   8. ACCESSIBILITÉ (PREFERS-REDUCED-MOTION & TACTILE)
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-tilt { transform: none !important; }
  .fx-floaty { animation: none !important; }
  .fx-shine::after { display: none !important; }
  .scroll-progress-bar { display: none !important; }
}

@media (hover: none), (pointer: coarse) {
  .fx-tilt { transform: none !important; }
  .fx-glow::before { display: none !important; }
}

/* ============================================================
   _military.css — Surcouche "look militaire" globale
   Angles nets, typo pochoir, liserés, coins marqués.
   Chargé en dernier pour primer sur les modules.
   ============================================================ */


/* ---------- Typographie de titres : premium (sans pochoir) ---------- */
h1, h2, h3 {
  letter-spacing: -.02em;
  font-weight: 700;
}

/* ---------- Angles nets sur tout ce qui était arrondi ---------- */
/* (les tokens --radius-* déjà écrasés couvrent l'essentiel ; ici on force
   les cas de valeurs en dur les plus courants) */
.btn, .btn--primary, .btn--alt, button, input, textarea, select,
.card, .app-card, .glass-panel, .stat-card, .dossier-card, .cc-modal,
.choose-card, .rs-card, .rs-btn, .support-btn, .support-card-box,
.data-wrap, .data-table, .faq-item, .channel-card {
  border-radius: 3px !important;
}
.rs-btn, .support-btn, .choose-card-btn, .btn--primary { border-radius: 2px !important; }

/* ---------- Boutons : style "équipement", liseré + coin coupé ---------- */
.btn--primary, .rs-btn, .support-btn {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}

/* ---------- Crochets d'angle réutilisables via .mil-corners ---------- */
.mil-corners::before, .mil-corners::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 4;
  border-color: color-mix(in srgb, var(--c-primary) 70%, transparent); border-style: solid;
}
.mil-corners::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.mil-corners::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* ---------- Bandeau "danger stripes" utilitaire ---------- */
.mil-stripes {
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--c-primary) 22%, transparent) 0 10px,
    transparent 10px 20px);
}

/* ---------- Badges / tags : plus anguleux + majuscules ---------- */
.badge, .chip, .rd-tag, .ca-hb, .ap-hb, .rs-tag, .rs-meta, .ccm-item, .hero-badge {
  border-radius: 2px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ---------- Champs de formulaire : encoche militaire ---------- */
.input-huge, .form input, .form textarea, .form select {
  border-radius: 2px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.input-huge:focus { box-shadow: 0 0 0 2px var(--c-primary-soft), inset 0 0 0 1px var(--c-primary) !important; }

/* Mobile-specific input fixes */
@media (max-width: 480px) {
  .input-huge {
    font-size: 16px !important;
    padding: 0.85rem 1rem !important;
    min-height: 44px;
  }
}

/* ============================================================
   EXCEPTION NAVBAR — la barre est premium/arrondie, on ne lui
   applique PAS les angles nets militaires ci-dessus.
   ============================================================ */
.nav-inner,
.nav-link,
.nav-recruit,
.nav-btn-login,
.nav-btn-register,
.nav-user-chip,
.nav-drawer-recruit,
.nav-drawer-login-btn,
.nav-drawer-register-btn,
.nav-drawer-logout-btn { border-radius: 999px !important; }

.nav-theme-toggle,
.nav-hamburger,
.nav-avatar,
.nav-dd-avatar,
.nav-drawer-avatar,
.nav-drawer-close { border-radius: 50% !important; }

.nav-dropdown-menu { border-radius: 18px !important; }
.nav-drawer-link,
.nav-drawer-user,
.nav-drawer-link-ico,
.nav-drawer-auth-btns a { border-radius: 16px !important; }

/* La navbar n'hérite pas de la typo pochoir militaire */
.nav-inner .nav-link,
.nav-brand-text .t1,
.nav-brand-text .t2 { text-transform: none; letter-spacing: -.005em !important; }




@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

.bi-fw {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}

.bi-4x { font-size: 4em; }

/* ============================================================
   PATCHES FINAUX — Gestion vues spécifiques
   ============================================================ */

/* Correction badges statuts dans pages d'admin */
.history .stat-badge{margin-top:.3rem}

/* Support messages left border type */
.answer-box[data-type="support"]{border-left-color:var(--c-info)}

/* Auth captions - form alt */
.auth-form-alt small{color:var(--c-muted)}

/* Applications list: empty */
.applications-empty h3{font-size:1.1rem}

/* Login form: forgot link spacing */
.forgot-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.forgot-row a{font-size:.9rem;font-weight:600}

/* Token info card */
.token-display .bi-copy{margin-left:.5rem;font-size:.85rem;cursor:pointer;opacity:.85;color:inherit;background:transparent;border:0}
.token-display .bi-copy:hover{opacity:1}

/* Panel nav user-chip header */
.panel-brand .user-chip{padding:.25rem .4rem .25rem .5rem}
.panel-brand .user-chip__avatar{width:28px;height:28px;font-size:.75rem}

/* Prevent horizontal scroll on iOS when drawer open */
html:has(.nav.is-open) body, body[data-nav-open="true"]{overflow:hidden}

/* Form submit btn loading state */
.btn[disabled]{cursor:not-allowed;opacity:.75!important}

/* ============================================================
   COMPAT ALIASES — Templates respondent & admin legacy classes
   admin-layout / admin-sidebar / admin-main → panel / panel-aside / panel-main
   ============================================================ */
.admin-layout{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:100dvh}
.admin-sidebar{
  position:sticky;top:0;height:100dvh;overflow:hidden;
  border-right:1px solid var(--c-border);
  background:linear-gradient(180deg,var(--c-bg-soft) 0%, var(--c-bg) 100%);
  display:flex;flex-direction:column;
}
.admin-sidebar::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--c-primary),var(--c-accent))}
.admin-sidebar .as-head{padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.admin-sidebar .as-head h3{margin:0;font-size:1rem}
.admin-sidebar .as-head > i{color:var(--c-primary);font-size:1.15rem}
.admin-sidebar .as-head small{color:var(--c-muted);width:100%;margin-top:.1rem;font-weight:600}
.admin-sidebar .as-bottom{margin-top:auto;padding:1rem;border-top:1px solid var(--c-border)}
.admin-main{display:flex;flex-direction:column;min-width:0;padding:1.5rem 2rem 3rem;gap:1.25rem}
.admin-page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:.25rem}
.admin-page-head h1{font-size:1.8rem;margin:.5rem 0 0}
.admin-page-head p{margin:.25rem 0 0}

.data-table{width:100%;min-width:780px;border-collapse:collapse;border-spacing:0;font-size:.95rem}
.data-table thead{background:linear-gradient(180deg,var(--c-bg-soft),transparent);border-bottom:2px solid var(--c-border-strong)}
.data-table th{
  text-align:left;padding:1rem 1.1rem;
  font-family:var(--font-head);font-weight:700;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-muted);white-space:nowrap;
}
.data-table tbody tr{border-top:1px solid var(--c-border);transition:background var(--t-fast)}
.data-table tbody tr:hover{background:var(--c-bg-soft)}
.data-table td{padding:1rem 1.1rem;vertical-align:middle;color:var(--c-text-soft);border-top:1px solid var(--c-border)}
.data-table td:first-child{color:var(--c-text);font-weight:600}
.data-table .empty-row{padding:2.5rem;color:var(--c-muted)!important;text-align:center;font-weight:500;font-style:italic}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding:.25rem}
.data-table + .pagination{border-top:0;margin-top:0}

/* Legacy stat-card glass inline */
.stat-card.glass{padding:1rem 1.25rem;border-radius:var(--radius-lg);background:var(--c-surface);border:1.5px solid var(--c-border);display:flex;align-items:center;gap:.9rem}
.stat-card.glass:hover{border-color:var(--c-border-strong);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.stat-card.glass i{font-size:1.25rem}
.stat-card.glass strong{font-family:var(--font-head);font-size:1.65rem;display:block;letter-spacing:-.02em;line-height:1}
.stat-card.glass span{font-size:.82rem;color:var(--c-muted);margin-top:.2rem;font-weight:500;display:block}

/* Kicker legacy glass */
.kicker.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(var(--blur-md))}

/* Role legacy chips used inline as buttons */
.chip--anim i{color:inherit}
.chip--modo i{color:inherit}


/* ============================================================
   OPTIMISATION PERFORMANCE MOBILE
   Désactiver les effets GPU coûteux sur écrans <768px
   (backdrop-filter, preserve-3d, will-change, mix-blend-mode)
   ============================================================ */
@media (max-width: 768px) {

  /* Supprimer backdrop-filter sur toutes les cartes glass */
  .pf-glass, .rc-glass, .al-card, .mb-glass, .cf-glass, .ad-glass,
  .st-glass, .su-glass, .cd-hero, .rb-card, .pa-card,
  .nav-dd-header, .nav-dropdown-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Supprimer preserve-3d (les cartes redeviennent plates sur mobile) */
  .al-card, .rb-card, .pa-card, .rc-card,
  .pf-card, .pf-tile, .af-section {
    transform-style: flat !important;
    transform: none !important;
  }

  /* Supprimer will-change sauf si explicitement nécessaire */
  * { will-change: auto !important; }
  /* Exception : éléments actuellement en animation */
  .site-bg-logo img { will-change: opacity !important; }

  /* Supprimer mix-blend-mode sur les pseudo-éléments de cartes */
  .al-card::after, .rb-card::after, .pa-card::after,
  .st-card::after, .cd-hero::after {
    display: none !important;
  }

  /* Réduire les filter:blur sur éléments inline */
  .pf-avhalo { filter: none !important; animation: none !important; }
  .rb-badge-float { animation: none !important; }
  .rb-badge-img { filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)) !important; }
  .al-badge-img { filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)) !important; }

  /* Désactiver les animations de fond dans les vues (orbes locaux) */
  .cd-bg-orb, .af-orb, .al-orb, .pf-orb, .rb-orb { animation: none !important; }

  /* Désactiver le liseré lumineux (::before) des cartes */
  .al-card::before, .rb-card::before, .st-card::before { display: none !important; }

  /* Réduire les ombres complexes */
  .al-card, .rb-card, .pf-tile, .pf-card {
    box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
  }
}

/* prefers-reduced-motion global renforcé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Garder les transitions d'état UI (hover, focus) mais très courtes */
  a, button, input, select, textarea {
    transition-duration: 0.1ms !important;
  }
}

/* Boutons arrondis uniformément, y compris les variantes legacy. */
:is(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a[class*="btn"],
  a[class*="button"],
  [role="button"],
  .btn
) {
  border-radius: 999px !important;
}