/* ==========================================================================
   AIDELY — DESIGN SYSTEM v1
   Couche de base unique. Se charge AVANT toute feuille de page.

   Règle absolue : aucune valeur brute dans les feuilles de page.
   Ni #hex, ni px d'espacement, ni rayon, ni ombre. Uniquement des tokens.
   Si un token manque, on l'ajoute ici — on n'improvise pas sur place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COULEUR — par rôle, jamais par teinte
   -------------------------------------------------------------------------- */
:root{
  /* Teintes brutes. Ne jamais les utiliser directement dans une page. */
  --c-ink:#241B33;
  --c-ink-soft:#4A4358;
  --c-ink-faint:#8F889C;
  --c-paper:#FFFCF7;
  --c-sand:#F3EEE6;
  --c-line:#E4DCD1;
  --c-line-dark:#DCD4C9;
  --c-purple:#5A32B0;
  --c-purple-dark:#42237F;
  --c-purple-tint:#F0EBFA;
  --c-purple-line:#D9CDF2;
  --c-amber:#E9942A;
  --c-green:#237A4B;
  --c-red:#A93832;

  /* Rôles. C'est ce qu'on écrit dans les pages. */
  --bg-page:var(--c-paper);
  --bg-quiet:var(--c-sand);
  --bg-dark:var(--c-ink);
  --bg-action-soft:var(--c-purple-tint);
  --surface:#FFFFFF;

  --text:var(--c-ink);
  --text-muted:var(--c-ink-soft);
  --text-faint:var(--c-ink-faint);
  --text-on-dark:var(--c-paper);
  --text-muted-on-dark:#B9B2C6;

  --action:var(--c-purple);
  --action-hover:var(--c-purple-dark);
  --action-line:var(--c-purple-line);

  --border:var(--c-line);
  --border-strong:var(--c-line-dark);

  --ok:var(--c-green);
  --danger:var(--c-red);

  /* GUIDE — réservé. L'ambre ne sert QU'au repère Aidely Guide.
     Aucun bouton, aucun titre, aucune icône décorative. Si vous écrivez
     var(--guide) ailleurs que sur un repère, c'est une erreur. */
  --guide:var(--c-amber);
  --guide-glow:rgba(233,148,42,.30);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHIE — 6 pas, pas un de plus

   Les grands pas sont bornés par min(vw, vh). C'est le point important :
   un titre ne peut pas dépasser une fraction de la HAUTEUR disponible,
   donc un chapitre ne peut plus déborder sur un écran 1366x768.
   -------------------------------------------------------------------------- */
:root{
  --font-display:"Bricolage Grotesque",Georgia,serif;
  --font-body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;

  --base:20px;

  --t-display: clamp(2.5rem, min(6.4vw, 9.2vh), 5rem);   /* h1 hero, une par page */
  --t-title:   clamp(1.9rem, min(4vw, 6vh), 3rem);       /* h2 de chapitre */
  --t-sub:     clamp(1.15rem, min(2vw, 3vh), 1.5rem);    /* h3 */
  --t-lead:    clamp(1rem, 1.3vw, 1.15rem);              /* chapô */
  --t-body:    1rem;
  --t-small:   .88rem;
  --t-micro:   .76rem;                                    /* eyebrow, mentions */

  --lh-tight:1.02;
  --lh-snug:1.25;
  --lh-body:1.62;

  --track-display:-.045em;
  --track-title:-.03em;
  --track-eyebrow:.13em;

  --measure-tight:22ch;   /* titres */
  --measure:48ch;         /* paragraphes */
}
html.large-text{ --base:24px; }

/* --------------------------------------------------------------------------
   3. ESPACEMENT — échelle unique, base 4

   Les espacements verticaux de section utilisent vh : ils se compriment
   automatiquement sur un écran court au lieu de pousser le contenu dehors.
   -------------------------------------------------------------------------- */
:root{
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:44px;  --s8:60px;  --s9:80px;  --s10:112px;

  --gutter:clamp(20px,5vw,64px);
  --max:1200px;
  --max-narrow:820px;

  --head:72px;
  --chapter-h:calc(100dvh - var(--head));
  --chapter-pad:clamp(28px, 5vh, 72px);   /* respiration interne d'un chapitre */
  --band-pad:clamp(56px, 8vw, 110px);     /* sections hors navigation chapitre */
}

/* --------------------------------------------------------------------------
   4. FORME — 3 rayons, 2 ombres, 1 courbe. C'est tout.
   -------------------------------------------------------------------------- */
:root{
  --r-sm:10px;
  --r-md:18px;
  --r-lg:26px;
  --r-pill:999px;

  --shadow-card:0 18px 40px -28px rgba(36,27,51,.34);
  --shadow-lift:0 34px 70px -30px rgba(36,27,51,.46);

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s;
  --dur:.35s;
  --dur-slow:.62s;
}

/* --------------------------------------------------------------------------
   5. RESET & BASE
   -------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg-page); color:var(--text);
  font-family:var(--font-body); font-size:var(--base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{ font:inherit; color:inherit; }
button,a{ touch-action:manipulation; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
p{ margin:0; }
[hidden]{ display:none !important; }

h1,h2,h3,.display{
  font-family:var(--font-display); font-weight:600;
  line-height:var(--lh-tight); margin:0;
}
h1{ font-size:var(--t-display); font-weight:800; letter-spacing:var(--track-display); max-width:var(--measure-tight); }
h2{ font-size:var(--t-title); letter-spacing:var(--track-title); max-width:var(--measure-tight); }
h3{ font-size:var(--t-sub); letter-spacing:-.015em; line-height:var(--lh-snug); }

.lead{ font-size:var(--t-lead); color:var(--text-muted); max-width:var(--measure); }
.small{ font-size:var(--t-small); }
.micro{ font-size:var(--t-micro); }
.eyebrow{
  font-size:var(--t-micro); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--action); margin:0;
}

.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}
.skip{ position:absolute; left:-9999px; top:0; background:var(--bg-dark); color:#fff; padding:var(--s4) var(--s5); z-index:1000; }
.skip:focus{ left:0; }
:focus-visible{ outline:3px solid var(--action); outline-offset:3px; border-radius:var(--s2); }

/* --------------------------------------------------------------------------
   6. MISE EN PAGE
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--max-narrow); }

/* Chapitre : une unité de navigation. Centré, jamais plus haut que l'écran. */
.chapter{
  min-height:var(--chapter-h);
  display:flex; align-items:center;
  padding-block:var(--chapter-pad);
}
/* Section classique, hors navigation par chapitres. */
.band{ padding-block:var(--band-pad); }

.band-head{ max-width:var(--measure-tight); margin-bottom:clamp(24px,4vh,52px); }
.band-head .eyebrow{ margin-bottom:var(--s4); }
.band-head .lead{ margin-top:var(--s4); }

/* Rythme : trois fonds seulement, alternés volontairement. */
.on-paper{ background:var(--bg-page); color:var(--text); }
.on-sand{ background:var(--bg-quiet); color:var(--text); }
.on-ink{ background:var(--bg-dark); color:var(--text-on-dark); }
.on-ink h1,.on-ink h2,.on-ink h3{ color:#fff; }
.on-ink .lead,.on-ink .small{ color:var(--text-muted-on-dark); }
.on-ink .eyebrow{ color:var(--guide); }

.stack > * + *{ margin-top:var(--s5); }
.stack-tight > * + *{ margin-top:var(--s3); }

/* --------------------------------------------------------------------------
   7. BOUTONS — une seule anatomie, trois intentions, deux tailles
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  padding:var(--s4) var(--s6); border-radius:var(--r-pill);
  border:2px solid transparent; background:none;
  font-weight:700; font-size:var(--t-body); line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:var(--s5) var(--s7); font-size:1.05rem; }

.btn-primary{ background:var(--action); color:#fff; }
.btn-primary:hover{ background:var(--action-hover); }

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

.btn-dark{ background:var(--bg-dark); color:var(--text-on-dark); }
.btn-dark:hover{ background:var(--action-hover); }

.on-ink .btn-ghost{ border-color:rgba(255,255,255,.32); color:#fff; }
.on-ink .btn-ghost:hover{ border-color:#fff; }

.actions{ display:flex; flex-wrap:wrap; gap:var(--s4); }

/* --------------------------------------------------------------------------
   8. CARTES — une anatomie, trois usages
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,44px);
}
.card-quiet{ background:var(--bg-quiet); border-color:transparent; }
.card-accent{ background:var(--bg-action-soft); border-color:var(--action-line); }
.card-link{
  display:block; text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.card-link:hover{ border-color:var(--action); transform:translateY(-3px); }
.card-link .go{
  display:inline-flex; align-items:center; gap:var(--s2);
  margin-top:var(--s5); font-weight:700; color:var(--action);
}

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }

/* --------------------------------------------------------------------------
   9. LE REPÈRE GUIDE — le seul endroit où l'ambre est autorisé
   -------------------------------------------------------------------------- */
.guide-marker{
  position:absolute; border:3px solid var(--guide);
  border-radius:var(--r-sm); box-shadow:0 0 0 8px var(--guide-glow);
  pointer-events:none;
}
.guide-tag{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:var(--guide); color:#fff; font-size:var(--t-micro); font-weight:700;
  padding:var(--s1) var(--s3); border-radius:var(--r-pill); white-space:nowrap;
}

/* --------------------------------------------------------------------------
   10. ÉTATS
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.is-loading{ opacity:.55; pointer-events:none; }
.msg-error{ color:var(--danger); font-size:var(--t-small); }
.msg-ok{ color:var(--ok); font-size:var(--t-small); }

/* --------------------------------------------------------------------------
   11. RESPONSIVE — deux points de rupture, pas dix
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
  .chapter{ min-height:0; padding-block:var(--s8); }
}
@media (max-width:640px){
  :root{ --base:19px; }
  .btn{ width:100%; }
  .actions{ flex-direction:column; align-items:stretch; }
}

/* --------------------------------------------------------------------------
   12. CONTRASTE ÉLEVÉ
   -------------------------------------------------------------------------- */
html.hc{
  --bg-page:#fff; --bg-quiet:#fff; --surface:#fff; --bg-action-soft:#fff;
  --text:#000; --text-muted:#1A1A1A; --text-faint:#1A1A1A;
  --border:#000; --border-strong:#000;
  --action:#3D1A80; --action-hover:#000; --action-line:#000;
}
html.hc .card{ border-width:3px; }
html.hc .btn-ghost{ border-width:3px; }

/* --------------------------------------------------------------------------
   13. MOUVEMENT RÉDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}