/* ===========================================================
   Gesti-Syndic — Site vitrine
   1/3 · BASE : tokens, reset, typographie, utilitaires
   Charte : bleu nuit + or (logo Gesti-Syndic) sur sable clair
   =========================================================== */

:root{
  /* ---- Bleu nuit : la couleur de marque ---- */
  --navy-950:#081a33;
  --navy-900:#0e2444;
  --navy-800:#143059;
  --navy-700:#1a3a63;
  --navy-500:#1e4a80;
  --navy-400:#3f6ea8;

  /* ---- Or : réservé aux actions et aux accents ---- */
  --gold-600:#c98d06;
  --gold-500:#dd9d08;
  --gold-400:#f5b71a;
  --gold-200:#f2e0b4;
  --gold-100:#fdf4de;
  --gold-ink:#8a6205;

  /* ---- Sable : le fond, hérité de la charte ---- */
  --sand-50:#faf7f1;
  --sand-100:#f4efe4;
  --sand-200:#e9e0cf;
  --sand-300:#ddd0b8;

  /* ---- Encre ---- */
  --ink-900:#0e2444;
  --ink-600:#48566d;
  --ink-500:#5a6779;  /* seuil AA sur blanc, pour le petit texte */
  --ink-400:#64707f;  /* relevé pour passer AA sur blanc et sur sable */
  --ink-300:#a2abba;

  /* ---- Accents de pôle (6 teintes réutilisées, jamais plus) ---- */
  --a-blue:#2f86d6;
  --a-green:#17a06a;
  --a-violet:#5b4fcf;
  --a-teal:#0f8f8a;
  --a-amber:#e8942a;
  --a-red:#d94452;

  /* ---- Surfaces ---- */
  --surface:#ffffff;
  --line:#e9e0cf;
  --line-soft:#f0eade;
  --line-dark:rgba(255,255,255,.14);

  /* ---- Rayons ---- */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  /* ---- Ombres : discrètes, teintées navy ---- */
  --sh-xs:0 1px 2px rgba(8,26,51,.05);
  --sh-sm:0 2px 10px rgba(8,26,51,.06);
  --sh:0 10px 34px rgba(8,26,51,.09);
  --sh-lg:0 28px 70px rgba(8,26,51,.20);

  /* ---- Mesures ---- */
  --maxw:1220px;
  --gutter:clamp(18px, 4vw, 32px);
  --header-h:70px;
  --section-y:clamp(64px, 9vw, 116px);

  /* ---- Transitions ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.18s var(--ease);
  --t:.32s var(--ease);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--sand-50);
  color:var(--ink-900);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Outfit',system-ui,sans-serif;
  margin:0;
  line-height:1.1;
  letter-spacing:-.022em;
  font-weight:700;
  text-wrap:balance;
}
p{margin:0;text-wrap:pretty}
a{color:var(--navy-500);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--gold-600)}
ul,ol{margin:0;padding:0;list-style:none}
img,canvas,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong,b{font-weight:650}

/* ---------- accessibilité ---------- */
:focus-visible{
  outline:3px solid var(--gold-400);
  outline-offset:3px;
  border-radius:4px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy-900);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;
  font-weight:600;
}
.skip:focus{left:0;color:#fff}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- typographie ---------- */
.display{
  font-size:clamp(34px, 6.2vw, 66px);
  line-height:1.04;
  letter-spacing:-.032em;
}
.h2{
  font-size:clamp(27px, 4.1vw, 43px);
  letter-spacing:-.026em;
}
.h3{font-size:clamp(19px, 2.2vw, 23px)}

.lede{
  color:var(--ink-600);
  font-size:clamp(15.5px, 1.35vw, 18.5px);
  line-height:1.68;
  max-width:63ch;
}

/* étiquette : micro-capitales, sert d'index de section */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);
}
.eyebrow::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-400),rgba(245,183,26,0));
}
.eyebrow--light{color:var(--gold-400)}
.eyebrow--center{justify-content:center}

/* chiffres : toujours alignés en colonne */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- utilitaires ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.center{text-align:center}
.center .lede{margin-inline:auto}
.stack-sm > * + *{margin-top:10px}
.section{padding-block:var(--section-y);position:relative}
.section__head{max-width:760px}
.section__head .h2{margin:14px 0 16px}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .lede{margin-inline:auto}

/* ---------- animation d'apparition ----------
   Le contenu est visible par défaut. Il n'est masqué que si le
   script a confirmé pouvoir le révéler (classe .js-anim posée
   par main.js). Sans JS, script en échec, ou IntersectionObserver
   indisponible, la page reste entièrement lisible.            */
.reveal{
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js-anim .reveal{opacity:0;transform:translateY(20px)}
.js-anim .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-anim .reveal{opacity:1;transform:none}
}