/* ============================================================
   THEME.CSS — Design System partagé "RN-PERFORMANCE"
   Thème "Rouge Performance" — sombre par défaut, clair dispo.
   Utilisé par le site vitrine (index.html) ET le panel admin
   (admin.html). Tokens unifiés => identité visuelle cohérente.
   ============================================================ */

/* ---------- TOKENS : thème sombre (défaut) ---------- */
:root{
  /* Fonds & surfaces */
  --bg:#0B0D12;
  --surface:#14171F;
  --surface-2:#1B1F2A;
  --surface-3:#232838;
  --border:#272D3D;
  --border-strong:#363D52;

  /* Accents "rouge braise / orange flamme" */
  --accent:#E11D48;          /* rouge primaire */
  --accent-2:#F97316;        /* orange secondaire */
  --accent-3:#FB923C;        /* orange clair (survol) */
  --accent-soft:rgba(225,29,72,.16);
  --accent-soft-2:rgba(225,29,72,.08);
  --accent-grad:linear-gradient(135deg,#E11D48 0%,#F97316 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(225,29,72,.20) 0%,rgba(249,115,22,.20) 100%);
  --glow:0 10px 30px -8px rgba(225,29,72,.55);

  /* Texte */
  --text:#F1F5F9;
  --muted:#94A3B8;
  --muted-2:#64748B;

  /* États */
  --success:#22C55E; --success-soft:rgba(34,197,94,.14);
  --danger:#EF4444;  --danger-soft:rgba(239,68,68,.14);
  --warning:#F59E0B; --warning-soft:rgba(245,158,11,.14);
  --info:#3B82F6;    --info-soft:rgba(59,130,246,.14);

  /* Ombres */
  --shadow:0 10px 30px -14px rgba(0,0,0,.65);
  --shadow-lg:0 24px 60px -22px rgba(0,0,0,.78);
  --shadow-card:0 2px 14px -6px rgba(0,0,0,.5);

  /* Rayons */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* Transitions */
  --t-fast:.14s ease;
  --t:.24s cubic-bezier(.4,0,.2,1);

  /* Typo */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,"Cascadia Code","Segoe UI Mono",Menlo,Consolas,monospace;

  /* Conteneur */
  --container:1200px;
}

/* ---------- TOKENS : thème clair ---------- */
[data-theme="light"]{
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#F1F3F9;
  --surface-3:#E9EDF6;
  --border:#E3E7F0;
  --border-strong:#D2D8E6;

  --accent:#BE123C;          /* rouge plus profond pour contraste clair */
  --accent-2:#EA580C;
  --accent-3:#F97316;
  --accent-soft:rgba(190,18,60,.12);
  --accent-soft-2:rgba(190,18,60,.06);
  --accent-grad:linear-gradient(135deg,#BE123C 0%,#EA580C 100%);
  --accent-grad-soft:linear-gradient(135deg,rgba(190,18,60,.14) 0%,rgba(234,88,12,.14) 100%);
  --glow:0 10px 30px -10px rgba(190,18,60,.4);

  --text:#0F172A;
  --muted:#64748B;
  --muted-2:#94A3B8;

  --success:#16A34A; --success-soft:rgba(22,163,74,.12);
  --danger:#DC2626;  --danger-soft:rgba(220,38,38,.10);
  --warning:#D97706; --warning-soft:rgba(217,119,6,.12);
  --info:#2563EB;    --info-soft:rgba(37,99,235,.10);

  --shadow:0 10px 30px -18px rgba(15,23,42,.18);
  --shadow-lg:0 24px 60px -26px rgba(15,23,42,.28);
  --shadow-card:0 2px 14px -8px rgba(15,23,42,.14);
}

/* ---------- RESET léger ---------- */
*,*::before,*::after{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block; max-width:100%;}
a{color:var(--accent); text-decoration:none; transition:color var(--t-fast);}
a:hover{color:var(--accent-2);}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--accent-soft); color:var(--text);}

/* Focus accessibles */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

/* ---------- Utilitaires ---------- */
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 20px;}
.section{padding:80px 0;}
.gradient-text{
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Boutons partagés ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:1px solid transparent; border-radius:var(--r-md);
  padding:13px 22px; font-size:15px; font-weight:700; line-height:1;
  text-align:center; white-space:nowrap; transition:var(--t-fast); cursor:pointer;
}
.btn svg{width:18px; height:18px;}
.btn:active{transform:translateY(1px);}

.btn-primary{
  background:var(--accent-grad); color:#fff;
  box-shadow:var(--glow);
}
.btn-primary:hover{filter:brightness(1.08); color:#fff;}

.btn-ghost{
  background:var(--surface); border-color:var(--border); color:var(--text);
}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

.btn-outline{
  background:transparent; border-color:var(--border-strong); color:var(--text);
}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft-2);}

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}