/* ==========================================================================
   APB CONSEIL — Design System Groupe
   Fichier : tokens.css
   Rôle    : socle commun aux 5 sites du groupe (APB CONSEIL, Docolab,
             Docostock et Docotherm).
             Seul le bloc [data-brand] change d'un site à l'autre.
   Version : 1.0 — 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset moderne
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:target { scroll-margin-block-start: 6.5rem; }

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

/* --------------------------------------------------------------------------
   2. Primitives de couleur
   Chaque teinte est déclinée sur une échelle 50→950, calibrée pour que
   les paires documentées atteignent au minimum le ratio 4,5:1 (WCAG 2.2 AA,
   critère 1.4.3) et 3:1 pour les composants d'interface (critère 1.4.11).
   -------------------------------------------------------------------------- */
:root {
  /* Neutres — base froide légèrement bleutée, cohérente avec l'univers APB */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f5f7fa;
  --n-100: #eaeef4;
  --n-200: #d6dde8;
  --n-300: #b3bfd0;
  --n-400: #8695ab;
  --n-500: #62718a;
  --n-600: #4a586f;
  --n-700: #374357;
  --n-800: #253145;
  --n-900: #16202f;
  --n-950: #0b1220;

  /* APB CONSEIL — bleu de marque #004899, relevé sur le logo officiel.
     Échelle construite autour de cette valeur : le 600 EST la couleur du logo.
     Contraste de #004899 sur blanc : 8,8:1 (WCAG AAA pour le texte courant). */
  --apb-50:  #eaf1fa;
  --apb-100: #d0e1f4;
  --apb-200: #a1c2e8;
  --apb-300: #6d9fd8;
  --apb-400: #3b7cc4;
  --apb-500: #145fa9;
  --apb-600: #004899;  /* couleur officielle du logo APB|Conseil */
  --apb-700: #003a7b;
  --apb-800: #002b5c;
  --apb-900: #001e40;
  --apb-950: #00142c;

  /* Couleurs de marque du groupe, relevées au pixel sur les logos officiels
     (flyers 2025). Ne pas les modifier sans accord. */
  --docolab-500:    #014898;  /* logo DOCOLAB */
  --docolab-700:    #003a7b;
  --docolab-100:    #d5e5f7;
  --docostock-500:  #ffc142;  /* logo DOCOSTOCK */
  --docostock-700:  #8a6702;  /* déclinaison texte : le jaune de marque
                                 plafonne à 1,8:1 sur blanc et ne peut donc
                                 jamais porter du texte (WCAG 1.4.3) */
  --docostock-100:  #fff1d3;
  --docotherm-500:  #b91b1c;  /* logo DOCOTHERM — 5,9:1 sur blanc */
  --docotherm-700:  #8f1415;
  --docotherm-100:  #fadedd;

  /* États */
  --success-600: #0f7a4f;
  --warning-600: #9a6700;   /* conservé pour mémoire, plus employé : cet ocre
                               tirait vers le brun, hors charte. Le signal
                               d'alerte passe désormais par --alert-* . */
  --danger-600:  #b42318;
  --info-600:    #1e4670;
}

/* --------------------------------------------------------------------------
   3. Rôles sémantiques

   Chaque rôle reçoit sa valeur claire dans :root / [data-brand], et sa valeur
   sombre dans deux blocs identiques :

     • :root[data-theme="dark"]                       → forcé sombre ;
     • @media (prefers-color-scheme: dark)
         :root:not([data-theme="light"])              → préférence système.

   Sans attribut, la préférence système décide ; data-theme="light" force le
   clair. Le bouton de bascule fonctionne donc même quand le système est réglé
   sur l'autre thème, sans recourir à la fonction light-dark (navigateurs 2024+) :
   compatible Chrome/Edge 88+, Firefox 85+, Safari 14.1+.
   Toute valeur sombre doit être reportée À L'IDENTIQUE dans les deux blocs.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:            var(--n-0);
  --bg-subtle:     var(--n-50);
  --bg-muted:      var(--n-100);
  --bg-inverse:    var(--apb-900);
  --surface:       var(--n-0);
  --surface-raised:var(--n-0);

  /* Surfaces toujours sombres (héros, bandeau d'appel à l'action, pied de
     page). Elles ne s'inversent pas avec le thème : c'est l'ancrage visuel
     de la marque, identique en clair et en sombre. */
  --dark-bg:        var(--apb-900);
  --dark-text:      #f3f7fc;

  /* Accent employé SUR les surfaces toujours sombres (héros, bandeau d'appel
     à l'action). La couleur de marque y serait sombre sur sombre : on utilise
     sa déclinaison claire, avec du texte foncé par-dessus. */
  --dark-accent:       var(--apb-200);
  --dark-accent-hover: #cddff2;
  --logo-brand:        var(--apb-600);
  --dark-text-soft:    rgb(243 247 252 / .78);

  --text:          var(--n-900);
  --text-muted:    var(--n-600);
  --text-subtle:   var(--n-500);
  --text-inverse:  var(--n-0);
  --text-on-accent:var(--n-0);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-inverse:rgb(255 255 255 / .18);

  /* Accent = couleur pilotée par [data-brand], APB par défaut */
  --accent:        var(--apb-600);
  --accent-hover:  var(--apb-700);
  --accent-soft:   var(--apb-50);
  --accent-border: var(--apb-200);
  --accent-text:   var(--apb-700);
  --highlight:     var(--apb-600);
  --highlight-soft:var(--apb-50);

  --focus-ring:    var(--apb-500);

  /* Titres : le bleu du groupe, identique sur les quatre sites, quelle que
     soit la marque. Les couleurs de marque (jaune Docostock, rouge Docotherm)
     portent les éléments décoratifs via --deco, jamais les titres. */
  --heading:       var(--docolab-500);

  /* Accent décoratif de marque : filets des surtitres, pastilles d'icônes,
     bordures des étapes et des références. Purement graphique — il ne porte
     jamais de texte, ce qui permet au jaune Docostock d'y figurer. */
  --deco:          var(--apb-600);
  --deco-soft:     var(--apb-50);

  /* Encart d'alerte réglementaire — charte blanc / jaune / bleu.
     Le signal est porté par un filet et une pastille, jamais par du texte :
     le jaune de charte plafonne à 1,8:1 sur blanc et ne peut donc pas être
     employé en couleur de texte (WCAG 1.4.3). Le glyphe posé sur la pastille
     jaune est en bleu profond, soit un contraste très supérieur au minimum. */
  --alert-rule:    var(--docostock-500);
  --alert-pill:    var(--docostock-500);
  --alert-glyph:   var(--apb-900);
  --alert-surface: var(--n-50);

  --shadow-xs: 0 1px 2px -1px rgb(11 27 43 / .10);
  --shadow-sm: 0 1px 3px rgb(11 27 43 / .08),
               0 1px 2px -1px rgb(11 27 43 / .06);
  --shadow-md: 0 4px 12px -2px rgb(11 27 43 / .10),
               0 2px 6px -2px rgb(11 27 43 / .06);
  --shadow-lg: 0 18px 40px -12px rgb(11 27 43 / .18),
               0 6px 14px -8px rgb(11 27 43 / .10);
}

/* Déclinaisons de marque : <html data-brand="docostock"> suffit à rhabiller
   l'intégralité du site sans toucher au reste de la feuille de styles. */
[data-brand="docolab"] {
  --dark-accent: #a8cdf9; --dark-accent-hover: #cbe1fb;
  --logo-brand:    var(--docolab-500);
  --accent:        var(--docolab-500);
  --accent-hover:  var(--docolab-700);
  --accent-soft:   var(--docolab-100);
  --accent-border: #b4c7e2;
  --accent-text:   var(--docolab-700);
  --deco:          var(--docolab-500);
  --deco-soft:     var(--docolab-100);
  --focus-ring:    var(--docolab-500);
  --bg-inverse:    #002b5c;
  --dark-bg: #002b5c;
}
[data-brand="docostock"] {
  --dark-accent: var(--docostock-500); --dark-accent-hover: #ffd479;
  --logo-brand: var(--docostock-500);
  /* Le jaune de marque ne peut pas porter de texte (1,8:1 sur blanc). Plutôt
     que de le décliner en un ocre sombre — un brun, hors charte — on lui fait
     jouer son vrai rôle : il signe (logotype, filets, surlignages, boutons sur
     fond sombre) et le bleu du groupe assure la lisibilité du texte et des
     liens. Blanc, jaune, bleu, sans teinte intermédiaire. */
  --accent:        var(--apb-600);
  --accent-hover:  var(--apb-700);
  --accent-soft:   var(--apb-50);
  --accent-border: var(--apb-200);
  --accent-text:   var(--apb-700);
  --focus-ring:    var(--apb-500);
  --highlight:     var(--docostock-500);
  --highlight-soft:var(--docostock-100);
  --deco:          var(--docostock-500);
  --deco-soft:     var(--docostock-100);
  --bg-inverse:    var(--apb-900);
  --dark-bg: var(--apb-900);
}
[data-brand="docotherm"] {
  /* Rouge plein, blanc et neutres — comme le site historique : le rouge de
     marque n'est JAMAIS éclairci en rosé. Les fonds « doux » sont neutres
     (gris froids du groupe), pas des teintes de rouge. Sur les surfaces
     sombres, l'accent est blanc (boutons, surtitres) ; en thème sombre, les
     textes d'accent utilisent #ef5350, un rouge clair qui tient 4,5:1 sur le
     fond sans virer au saumon. */
  --dark-accent: #ffffff; --dark-accent-hover: var(--n-100);
  --logo-brand:    var(--docotherm-500);
  --accent:        var(--docotherm-500);
  --accent-hover:  var(--docotherm-700);
  --accent-soft:   var(--n-50);
  --accent-border: var(--n-200);
  --accent-text:   var(--docotherm-500);
  --focus-ring:    var(--docotherm-500);
  --deco:          var(--docotherm-500);
  --deco-soft:     var(--n-100);
  --highlight:     var(--docotherm-500);
  /* Surfaces sombres : bleu profond du groupe, ossature commune aux 4 sites. */
  --bg-inverse:    var(--apb-900);
  --dark-bg: var(--apb-900);
}

/* Thème sombre — choix manuel */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            var(--apb-950);
  --bg-subtle:     var(--apb-900);
  --bg-muted:      var(--apb-800);
  --bg-inverse:    var(--n-0);
  --surface:       #001a38;
  --surface-raised:#002249;
  --logo-brand:    var(--apb-200);
  --text:          #e8eef6;
  --text-muted:    #a9b8cb;
  --text-subtle:   #93a3b8;
  --text-inverse:  var(--apb-950);
  --text-on-accent:var(--apb-950);
  --border:        rgb(232 238 246 / .14);
  --border-strong: rgb(232 238 246 / .26);
  --accent:        var(--apb-300);
  --accent-hover:  var(--apb-200);
  --accent-soft:   #062a4f;
  --accent-border: rgb(109 159 216 / .34);
  --accent-text:   var(--apb-200);
  --highlight:     var(--apb-200);
  --highlight-soft:#062a4f;
  --focus-ring:    var(--apb-300);
  --heading:       var(--apb-200);
  --deco:          var(--apb-300);
  --deco-soft:     #062a4f;
  --alert-surface: #092748;
  --shadow-xs: 0 1px 2px -1px rgb(0 0 0 / .45);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / .50),
               0 1px 2px -1px rgb(0 0 0 / .40);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / .55),
               0 2px 6px -2px rgb(0 0 0 / .45);
  --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / .70),
               0 6px 14px -8px rgb(0 0 0 / .55);
}
:root[data-theme="dark"][data-brand="docolab"] {
  --logo-brand:    #ffffff;
  --accent:        #79b2f4;
  --accent-hover:  #a8cdf9;
  --accent-soft:   #002753;
  --accent-border: rgb(121 178 244 / .34);
  --accent-text:   #a8cdf9;
  --deco:          #79b2f4;
  --deco-soft:     #002753;
  --focus-ring:    #79b2f4;
  --bg-inverse:    var(--n-0);
}
:root[data-theme="dark"][data-brand="docostock"] {
  --logo-brand:    var(--docostock-500);
  --accent:        var(--apb-300);
  --accent-hover:  var(--apb-200);
  --accent-soft:   #062a4f;
  --accent-border: rgb(109 159 216 / .34);
  --accent-text:   var(--apb-200);
  --focus-ring:    var(--apb-300);
  --highlight:     var(--docostock-500);
  --highlight-soft:#2e3b44;
  --deco:          var(--docostock-500);
  --deco-soft:     #333e46;
  --bg-inverse:    var(--n-0);
}
:root[data-theme="dark"][data-brand="docotherm"] {
  --logo-brand:    #ffffff;
  --accent:        #ef5350;
  --accent-hover:  #ff6b5e;
  --accent-soft:   #07203e;
  --accent-border: rgb(232 238 246 / .20);
  --accent-text:   #ef5350;
  --focus-ring:    #ef5350;
  --deco:          #ef5350;
  --deco-soft:     #0f2946;
  --highlight:     #ef5350;
  --bg-inverse:    var(--n-0);
}

/* Thème sombre — préférence système (sauf choix manuel du clair) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            var(--apb-950);
    --bg-subtle:     var(--apb-900);
    --bg-muted:      var(--apb-800);
    --bg-inverse:    var(--n-0);
    --surface:       #001a38;
    --surface-raised:#002249;
    --logo-brand:    var(--apb-200);
    --text:          #e8eef6;
    --text-muted:    #a9b8cb;
    --text-subtle:   #93a3b8;
    --text-inverse:  var(--apb-950);
    --text-on-accent:var(--apb-950);
    --border:        rgb(232 238 246 / .14);
    --border-strong: rgb(232 238 246 / .26);
    --accent:        var(--apb-300);
    --accent-hover:  var(--apb-200);
    --accent-soft:   #062a4f;
    --accent-border: rgb(109 159 216 / .34);
    --accent-text:   var(--apb-200);
    --highlight:     var(--apb-200);
    --highlight-soft:#062a4f;
    --focus-ring:    var(--apb-300);
    --heading:       var(--apb-200);
    --deco:          var(--apb-300);
    --deco-soft:     #062a4f;
    --alert-surface: #092748;
    --shadow-xs: 0 1px 2px -1px rgb(0 0 0 / .45);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / .50),
                 0 1px 2px -1px rgb(0 0 0 / .40);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / .55),
                 0 2px 6px -2px rgb(0 0 0 / .45);
    --shadow-lg: 0 18px 40px -12px rgb(0 0 0 / .70),
                 0 6px 14px -8px rgb(0 0 0 / .55);
  }
  :root:not([data-theme="light"])[data-brand="docolab"] {
    --logo-brand:    #ffffff;
    --accent:        #79b2f4;
    --accent-hover:  #a8cdf9;
    --accent-soft:   #002753;
    --accent-border: rgb(121 178 244 / .34);
    --accent-text:   #a8cdf9;
    --deco:          #79b2f4;
    --deco-soft:     #002753;
    --focus-ring:    #79b2f4;
    --bg-inverse:    var(--n-0);
  }
  :root:not([data-theme="light"])[data-brand="docostock"] {
    --logo-brand:    var(--docostock-500);
    --accent:        var(--apb-300);
    --accent-hover:  var(--apb-200);
    --accent-soft:   #062a4f;
    --accent-border: rgb(109 159 216 / .34);
    --accent-text:   var(--apb-200);
    --focus-ring:    var(--apb-300);
    --highlight:     var(--docostock-500);
    --highlight-soft:#2e3b44;
    --deco:          var(--docostock-500);
    --deco-soft:     #333e46;
    --bg-inverse:    var(--n-0);
  }
  :root:not([data-theme="light"])[data-brand="docotherm"] {
    --logo-brand:    #ffffff;
    --accent:        #ef5350;
    --accent-hover:  #ff6b5e;
    --accent-soft:   #07203e;
    --accent-border: rgb(232 238 246 / .20);
    --accent-text:   #ef5350;
    --focus-ring:    #ef5350;
    --deco:          #ef5350;
    --deco-soft:     #0f2946;
    --highlight:     #ef5350;
    --bg-inverse:    var(--n-0);
  }
}

/* --------------------------------------------------------------------------
   4. Typographie
   Pile système : aucune requête réseau, aucun transfert de données vers un
   tiers (les Google Fonts appelées en distant constituent un transfert d'IP
   sanctionné — LG München I, 20 janv. 2022, 3 O 17493/20 ; mises en demeure
   CNIL sur les outils de mesure d'audience). Pour une police propriétaire,
   la déposer dans /assets/fonts et l'ajouter en tête de la pile.
   -------------------------------------------------------------------------- */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-serif: ui-serif, "Iowan Old Style", "Source Serif 4", Georgia,
                "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;

  /* Échelle fluide (base 16 → 18 px, ratio ~1.24) */
  --fs-2xs:  clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-xs:   clamp(0.80rem, 0.78rem + 0.12vw, 0.87rem);
  --fs-sm:   clamp(0.90rem, 0.87rem + 0.15vw, 0.98rem);
  --fs-base: clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --fs-md:   clamp(1.12rem, 1.06rem + 0.30vw, 1.28rem);
  --fs-lg:   clamp(1.30rem, 1.20rem + 0.50vw, 1.60rem);
  --fs-xl:   clamp(1.55rem, 1.36rem + 0.90vw, 2.10rem);
  --fs-2xl:  clamp(1.72rem, 1.44rem + 1.35vw, 2.45rem);
  --fs-3xl:  clamp(2.10rem, 1.62rem + 2.10vw, 3.25rem);
  --fs-4xl:  clamp(2.45rem, 1.75rem + 3.20vw, 4.10rem);

  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.09em;
}

/* --------------------------------------------------------------------------
   5. Espacement, rayons, transitions, profondeur
   -------------------------------------------------------------------------- */
:root {
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 999px;

  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* --------------------------------------------------------------------------
   6. Accessibilité — focus visible normalisé (WCAG 2.2, critères 2.4.11/2.4.13)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

@media (forced-colors: active) {
  .btn, .card, .chip { border: 1px solid CanvasText; }
}