/* Glyphein — feuille de style du site.
   Autorité : brand/charte-glyphein-v4.md (v4.1) et brand/glyphein-tokens.json.
   Registre : LA MARQUE S'EXPRIME (charte §10) — le site peut porter l'angle plus franchement
   que le chrome in-visual, qui lui se retient.
   Polices auto-hébergées : aucune requête vers un tiers, cohérent avec /privacy. */

/* ─── Jetons (charte §07) ─────────────────────────────────────────────── */
:root {
  --nuit: #070B12;  --encre: #101826;  --encre-claire: #182238;  --minuit: #0E1420;
  --givre: #85AEE4; --givre-pale: #E9EDF3; --cobalt: #3E6AB0; --cobalt-sombre: #2E5288;
  --craie: #EEF1F6; --ardoise: #3A4150; --acier: #7C8698; --brume: #C4CEDC;
  --positif: #30B579; --negatif: #E06456; --alerte: #D9A13B;

  /* Monde sombre — forme canonique de la marque */
  --fond: var(--nuit);
  --surface: var(--encre);
  --surface-haute: var(--encre-claire);
  --encre-texte: var(--givre-pale);
  --encre-2: var(--brume);
  --encre-3: var(--acier);
  --accent: var(--givre);
  --limbe: rgba(133, 174, 228, .32);

  /* Géométrie (tokens) — le chanfrein est un ACCENT, pas un régime (charte §06). */
  --r-control: 8px; --r-panel: 14px; --r-group: 10px; --chamfer: 20px;
  --grille: 4px; --cible-min: 26px;
  --ombre: 0 10px 30px rgba(0,0,0,.38);

  --micro: 150ms; --glissement: 240ms; --ease: cubic-bezier(.3,.85,.35,1);
}

@media (prefers-color-scheme: light) {
  :root {
    --fond: var(--craie);
    --surface: #FFFFFF;
    --surface-haute: #F7F9FC;
    --encre-texte: var(--nuit);
    --encre-2: var(--ardoise);
    --encre-3: var(--acier);
    --accent: var(--cobalt);
    --limbe: rgba(62, 106, 176, .22);
    --ombre: 0 8px 26px rgba(20,32,54,.11);
  }
}

/* ─── Polices embarquées (charte §07) ─────────────────────────────────── */
@font-face { font-family: "Sora";  src: url("fonts/sora-600.woff2")  format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Sora";  src: url("fonts/sora-700.woff2")  format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ─── Socle ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre-texte);
  font: 400 17px/1.65 Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;              /* charte §07 : chiffres tabulaires partout */
  -webkit-font-smoothing: antialiased;
}
.enveloppe { max-width: 68ch; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: Sora, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: clamp(30px, 5.4vw, 46px); line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: clamp(20px, 3vw, 25px); line-height: 1.3; margin: 44px 0 12px; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 6px; }
p  { margin: 0 0 16px; }
small, .fin { font-size: 14px; color: var(--encre-3); }
strong { font-weight: 600; color: var(--encre-texte); }

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--micro) var(--ease); }
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

ul { margin: 0 0 16px; padding-left: 20px; }
li { margin: 0 0 7px; }
code { font: 500 .88em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--surface-haute); padding: 2px 6px; border-radius: 5px; color: var(--encre-2); }

/* ─── Signature n°1 : le limbe (charte §03) ───────────────────────────────
   Un solide à facettes prend la lumière sur ses arêtes. Arête haute de tout
   matériau flottant. Aucun flou : la signature survit à l'export. */
.plaque {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-panel);
  box-shadow: var(--ombre);
  padding: 28px 30px;
  margin: 0 0 20px;
}
.plaque::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent 8%, var(--limbe) 50%, transparent 92%);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}
/* Chanfrein-accent : UN seul coin taillé, en haut à droite (charte §06).
   ⚠ Mesuré au rendu : à 10 px le chanfrein passait sous le rayon de 14 px et devenait
   invisible. Il faut ANNULER le rayon du coin taillé et porter la coupe à 20 px — les
   surfaces du site sont dix fois plus grandes que celles du produit, où 6 px suffisent. */
.plaque--accent {
  border-radius: var(--r-panel) 0 var(--r-panel) var(--r-panel);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
.plaque--accent::before { border-radius: var(--r-panel) 0 0 0; }

/* ─── En-tête ─────────────────────────────────────────────────────────── */
.entete { padding: 40px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: 13px; border: 0; }
.marque svg { display: block; }
.marque .mot { font-family: Sora, system-ui, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: .04em; color: var(--encre-texte); }
nav.pages { display: flex; gap: 22px; font-size: 15px; }
nav.pages a { color: var(--encre-2); }
nav.pages a[aria-current="page"] { color: var(--encre-texte); }

/* ─── Signature n°2 : le trait incisé (charte §03) ────────────────────────
   Creusé, pas posé : ombre sur l'arête haute, lumière sur l'arête basse. 2 px. */
.incise { height: 2px; border-radius: 1px; margin: 34px 0;
  background: var(--surface-haute);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.30), inset 0 -1px 0 var(--limbe); }
@media (prefers-color-scheme: light) {
  .incise { box-shadow: inset 0 1px 0 rgba(20,32,54,.14), inset 0 -1px 0 rgba(255,255,255,.9); }
}

/* ─── Divers ──────────────────────────────────────────────────────────── */
.accroche { font-size: clamp(18px, 2.6vw, 21px); line-height: 1.5; color: var(--encre-2); margin: 0 0 26px; }
.faits { list-style: none; padding: 0; }
/* ⚠ Mesuré au rendu : `display:flex` sur le <li> faisait du <strong> un ITEM de flex séparé
   du texte, qui se comprimait en colonne étroite. Le texte doit couler en ligne. */
.faits li { position: relative; padding-left: 24px; margin-bottom: 13px; }
.faits li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 999px;
  border: 2px solid var(--accent); }   /* signature n°3 : l'anneau-cœur */

.capsule { display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; background: var(--surface-haute); color: var(--encre-2); }

.pied { margin: 56px 0 40px; font-size: 14px; color: var(--encre-3); display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }
.pied a { color: var(--encre-3); }

.remplir { background: rgba(217,161,59,.10); border-left: 2px solid var(--alerte); padding: 12px 16px; margin: 0 0 18px; font-size: 15px; }
.remplir strong { color: var(--alerte); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }