/* ==========================================================================
   OV7 Development — Design system
   Tokens, reset, typographie, utilitaires.
   Toute valeur réutilisée est centralisée ici : ne jamais coder une couleur
   ou un espacement en dur dans les autres feuilles.
   ========================================================================== */

:root{
  /* --- Couleurs de marque (identiques en clair et sombre) --- */
  --brand:#d4162c;
  --brand-ember:#ff5a1f;
  --brand-glow:#ff9a3d;
  --brand-rgb:212,22,44;

  /* --- Surfaces (thème sombre = thème principal) --- */
  --bg:#08090b;
  --bg-soft:#0b0d10;
  --surface:#101317;
  --surface-2:#151a20;
  --surface-3:#1b2128;

  /* --- Bordures & séparateurs --- */
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);
  --line-accent:rgba(var(--brand-rgb),.38);

  /* --- Texte --- */
  --text:#edeff2;
  --text-2:#a7aeb8;
  --text-3:#828a95;
  --text-on-accent:#fff;

  /* --- Accent lisible (contraste AA sur --bg) --- */
  --accent:#ff6b57;
  --accent-quiet:rgba(var(--brand-rgb),.14);

  /* --- Élévation --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 12px 32px -12px rgba(0,0,0,.65);
  --shadow-lg:0 32px 64px -24px rgba(0,0,0,.75);
  --glow:0 0 0 1px var(--line-accent), 0 18px 48px -24px rgba(var(--brand-rgb),.55);

  /* --- Rayons --- */
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-xl:22px;
  --r-full:999px;

  /* --- Espacements --- */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:3rem;    --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;

  /* --- Layout --- */
  --container:1200px;
  --container-narrow:860px;
  --gutter:clamp(1.15rem, 4vw, 2.5rem);
  --header-h:72px;
  --section-y:clamp(4.5rem, 9vw, 8rem);

  /* --- Typographie --- */
  --font:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --fs-display:clamp(2.6rem, 6.4vw, 4.75rem);
  --fs-h2:clamp(1.85rem, 3.6vw, 2.85rem);
  --fs-h3:clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-lead:clamp(1rem, 1.5vw, 1.175rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --fs-label:.6875rem;

  /* --- Mouvement --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.6s;

  --z-header:100;
  --z-menu:110;
  --z-modal:200;

  color-scheme:dark;
}

/* --- Thème clair : le sombre reste le mode principal --- */
:root[data-theme="light"]{
  --bg:#f7f7f9;
  --bg-soft:#f1f2f5;
  --surface:#fff;
  --surface-2:#f4f5f8;
  --surface-3:#eceef2;

  --line:rgba(11,12,14,.09);
  --line-strong:rgba(11,12,14,.16);
  --line-accent:rgba(var(--brand-rgb),.32);

  --text:#0b0c0e;
  --text-2:#4d5661;
  --text-3:#616a76;

  --accent:#bd1226;
  --accent-quiet:rgba(var(--brand-rgb),.09);

  --shadow-sm:0 1px 2px rgba(11,12,14,.06);
  --shadow-md:0 12px 32px -16px rgba(11,12,14,.22);
  --shadow-lg:0 32px 64px -28px rgba(11,12,14,.28);
  --glow:0 0 0 1px var(--line-accent), 0 18px 48px -28px rgba(var(--brand-rgb),.35);

  color-scheme:light;
}

/* ========================= Reset ========================= */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;}
html:focus-within{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto;}
}

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}

img,svg,video,canvas{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
ul,ol{list-style:none;padding:0;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h1{font-size:var(--fs-display);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);letter-spacing:-.02em;}
p{text-wrap:pretty;}

::selection{background:rgba(var(--brand-rgb),.32);color:var(--text);}

/* --- Focus visible : obligatoire pour la navigation clavier --- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
:focus:not(:focus-visible){outline:none;}

/* --- Barre de défilement --- */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:11px;height:11px;}
  ::-webkit-scrollbar-track{background:var(--bg);}
  ::-webkit-scrollbar-thumb{background:var(--surface-3);border:3px solid var(--bg);border-radius:var(--r-full);}
  ::-webkit-scrollbar-thumb:hover{background:var(--text-3);}
}

/* ========================= Utilitaires ========================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{max-width:var(--container-narrow);}

.section{padding-block:var(--section-y);position:relative;}
/* Décale l'ancre pour que le header fixe ne recouvre pas le titre visé */
section[id]{scroll-margin-top:calc(var(--header-h) + 1rem);}
.section--tight{padding-block:calc(var(--section-y) * .62);}

.mono{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;top:0;left:50%;translate:-50% -120%;
  z-index:var(--z-modal);
  padding:.7rem 1.2rem;
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:0 0 var(--r-md) var(--r-md);
  font-size:var(--fs-sm);font-weight:600;
  transition:translate var(--t) var(--ease);
}
.skip-link:focus-visible{translate:-50% 0;}

.text-accent{color:var(--accent);}
.text-muted{color:var(--text-2);}
.no-scroll{overflow:hidden;}

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