/* ═══════════════════════════════════════════════════════════
   CONFLUENCE — TOKENS
   Trois couches. Les composants n'appellent QUE la couche
   sémantique : jamais une primitive, jamais une valeur en dur.
   ═══════════════════════════════════════════════════════════ */

/* ——— Fontes ———
   Les .woff2 déposés dans fonts/ sont utilisés en priorité ;
   à défaut, la substitution Google Fonts prend le relais. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Archivo+Narrow:wght@500;600;700&display=swap');

@font-face{font-family:Display;src:local('SK Modernist Bold'),url('fonts/sk-modernist-bold.woff2') format('woff2');
  font-weight:500 700;font-display:swap}
@font-face{font-family:Texte;src:local('Neue Montreal'),url('fonts/neue-montreal-regular.woff2') format('woff2');
  font-weight:400;font-display:swap}

:root{

  /* ─────────── 1. PRIMITIVES — valeurs brutes, sans intention ─────────── */

  /* Bleu du logo */
  --c-bleu-900:#0B3642;
  --c-bleu-700:#155364;   /* référence charte */
  --c-bleu-500:#2C7A8E;
  --c-bleu-300:#4E98AB;
  --c-bleu-100:#D5E6EA;

  /* Gris neutres, très légèrement froids */
  --c-gris-000:#FFFFFF;
  --c-gris-050:#F6F8F8;
  --c-gris-100:#ECEFF0;
  --c-gris-200:#DCE1E2;
  --c-gris-300:#C2C9CB;
  --c-gris-500:#8B9396;
  --c-gris-600:#6C7477;
  --c-gris-800:#2A3134;
  --c-gris-900:#15191B;
  --c-gris-950:#101315;
  --c-gris-990:#0A0D0E;

  /* États */
  --c-alerte:#A33A22;
  --c-succes:#2F6B4F;

  /* Espacement — trame de 4 px */
  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:24px;
  --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:144px;

  /* Typographie */
  --f-display:Display,'Archivo Narrow',Archivo,'Helvetica Neue',Arial,sans-serif;
  --f-texte:Texte,Archivo,'Helvetica Neue',Arial,sans-serif;
  --f-ui:Archivo,'Helvetica Neue',Arial,sans-serif;

  --t-xxl:clamp(44px,8.4vw,132px);
  --t-xl:clamp(34px,5.6vw,92px);
  --t-l:clamp(26px,3.4vw,52px);
  --t-m:clamp(20px,2.4vw,34px);
  --t-s:18px;
  --t-corps:16.5px;
  --t-petit:14px;
  --t-label:11px;

  --lh-serre:.94;
  --lh-titre:1.02;
  --lh-corps:1.5;
  --ls-serre:-.035em;
  --ls-label:.14em;

  /* Mouvement — une seule courbe, trois durées */
  --courbe:cubic-bezier(.16,1,.3,1);
  --courbe-masque:cubic-bezier(0,.45,0,1);
  --d-vif:180ms;
  --d-base:420ms;
  --d-ample:800ms;

  /* Trame */
  --gouttiere:12px;
  --filet:1px;
  --nav-h:60px;
  --rayon:0px;
  --rayon-pill:999px;
  --colonnes:12;

  /* ─────────── 2. SÉMANTIQUE — le rôle. Seule couche que le thème redéfinit ─────────── */

  --surface:var(--c-gris-000);
  --surface-alt:var(--c-gris-100);
  --surface-creuse:var(--c-gris-050);
  --surface-inverse:var(--c-gris-900);

  --texte:var(--c-gris-900);
  --texte-faible:var(--c-gris-600);
  --texte-tres-faible:var(--c-gris-500);
  --texte-inverse:var(--c-gris-000);

  --accent:var(--c-bleu-700);
  --accent-survol:var(--c-bleu-500);
  --accent-doux:var(--c-bleu-100);
  --accent-contraste:var(--c-gris-000);

  --bordure:var(--c-gris-900);
  --bordure-faible:var(--c-gris-200);
  --bordure-inverse:rgba(255,255,255,.2);

  --focus:var(--c-bleu-500);
  --alerte:var(--c-alerte);
  --succes:var(--c-succes);

  /* Texte posé sur média : jamais --texte, toujours ceci */
  --sur-media:#FFFFFF;
  --sur-media-faible:rgba(255,255,255,.76);
  --voile:linear-gradient(180deg,rgba(15,19,21,.42) 0%,rgba(15,19,21,.14) 42%,rgba(15,19,21,.84) 100%);
  --voile-plat:rgba(15,19,21,.5);

  --photo:grayscale(1) contrast(1.04);
  --photo-active:grayscale(0) contrast(1.02);

  /* Rythme vertical des sections */
  --bloc:clamp(72px,9vw,148px);

  color-scheme:light;
}

/* ─────────── Thème sombre — on ne redéfinit QUE la couche sémantique ─────────── */
:root[data-theme="dark"]{
  --surface:var(--c-gris-950);
  --surface-alt:var(--c-gris-800);
  --surface-creuse:#171B1D;
  --surface-inverse:var(--c-gris-990);

  --texte:#EDEFF0;
  --texte-faible:#949C9F;
  --texte-tres-faible:#767E81;
  --texte-inverse:var(--c-gris-950);

  --accent:var(--c-bleu-300);
  --accent-survol:#6FB4C6;
  --accent-doux:#12303A;
  --accent-contraste:var(--c-gris-990);

  --bordure:#394145;
  --bordure-faible:#252B2E;
  --bordure-inverse:rgba(255,255,255,.16);

  --focus:var(--c-bleu-300);
  --alerte:#D26B4F;

  --photo:grayscale(1) brightness(.86) contrast(1.06);
  --photo-active:grayscale(0) brightness(.95);

  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:var(--c-gris-950);
    --surface-alt:var(--c-gris-800);
    --surface-creuse:#171B1D;
    --surface-inverse:var(--c-gris-990);
    --texte:#EDEFF0;
    --texte-faible:#949C9F;
    --texte-tres-faible:#767E81;
    --texte-inverse:var(--c-gris-950);
    --accent:var(--c-bleu-300);
    --accent-survol:#6FB4C6;
    --accent-doux:#12303A;
    --accent-contraste:var(--c-gris-990);
    --bordure:#394145;
    --bordure-faible:#252B2E;
    --bordure-inverse:rgba(255,255,255,.16);
    --focus:var(--c-bleu-300);
    --alerte:#D26B4F;
    --photo:grayscale(1) brightness(.86) contrast(1.06);
    --photo-active:grayscale(0) brightness(.95);
    color-scheme:dark;
  }
}

/* ─────────── 3. COMPOSANTS — réglages qui appartiennent à un seul objet ─────────── */
:root{
  --btn-h:46px;
  --btn-h-grand:60px;
  --champ-h:52px;
  --cible:44px;          /* taille tactile minimale */
  --carte-ratio:4/3;
}

/* ─────────── Réinitialisation ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--texte);
  font:400 var(--t-corps)/var(--lh-corps) var(--f-texte);
  transition:background-color var(--d-ample) var(--courbe),color var(--d-ample) var(--courbe);
  overflow-x:clip}
h1,h2,h3,h4,p,figure,dl,dd,blockquote{margin:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:var(--ls-serre);
  line-height:var(--lh-titre)}
img,video,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;border-radius:0}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-contraste)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.passer{position:fixed;z-index:100;top:-100px;left:var(--gouttiere);background:var(--texte);
  color:var(--texte-inverse);padding:var(--e-3) var(--e-4)}
.passer:focus{top:var(--e-3)}