@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/plus-jakarta-sans-latin-400-normal.221a4135.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/plus-jakarta-sans-latin-500-normal.bad081c8.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/plus-jakarta-sans-latin-600-normal.8872bb5c.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/plus-jakarta-sans-latin-700-normal.2050755b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-display:swap;font-weight:800;src:url(../fonts/plus-jakarta-sans-latin-800-normal.5f301a8e.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.6010e7fd.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.90aef64f.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.16734a5a.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.04c730b4.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.9ed8dcb0.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.be6a3b2e.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.63f47572.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.ae2d59f9.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jakarta-fallback";src:local("Arial"),local("Helvetica Neue");size-adjust:104.5%;ascent-override:101.5%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:"PlexArabic-fallback";src:local("Segoe UI"),local("Tahoma"),local("Arial");size-adjust:104%;ascent-override:108%;descent-override:36%;line-gap-override:0%}
/* ------------------------------------------------------------------ tokens
   « Desert Gold » — the app's design tokens, applied verbatim to the site.
   Source of truth: app monorepo packages/ui/src/tokens.css. Any change there
   must be mirrored here (hex values, radii, glow, fonts — no drift).

   P-SITE-THEME (2026-07-23): DARK is the brand default; the SAME tokens take
   their light values under :root[data-theme="light"] below — never a second
   system. This file is the ONLY place a color literal may live
   (scripts/check-no-hard-colors.mjs enforces it); every alpha accent flows
   through the *-rgb channels so both themes derive from one source.
--------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Media constants — NEVER themed. The WebGL hero scene, the photo masters
     and their scrims are dark media in BOTH themes (convention média): text
     laid over them keeps this fixed ink, veils keep this fixed scrim. */
  --media-bg: #0b0b0d;
  --media-ink: #f5f5f7;
  --media-ink-soft: #d4d4d8;
  --media-ink-muted: #a1a1aa;
  --media-gold: #e9b44c;
  --media-gold-rgb: 233 180 76;
  --media-grad-a: #f2c14e;
  --media-grad-b: #d9a441;
  --scrim-rgb: 11 11 13;
  --shine-rgb: 255 246 220;
  /* Carte « 1761 » posée sur la photo héritage (RETOUCHES-4 ⑥) : verre média
     FIXE (les photos restent des médias sombres dans les deux thèmes). Alpha
     calculé par la suite de contraste sur le PIRE fond possible (pixel blanc
     pur sous le verre) : l'or du millésime (grad-b) >= 3:1 exige >= ~0.67,
     l'encre >= 4.5:1 suit — 0.72 retenu pour la marge. */
  --scrim-card: rgb(var(--scrim-rgb) / 0.72);

  /* Surfaces */
  --bg: #0b0b0d;
  --bg-rgb: 11 11 13;
  --surface: #141416;
  --elevated: #1b1b1f;
  --border: #26262c;

  /* Gold */
  --gold: #e9b44c;
  --gold-hover: #f4c766;
  --on-gold: #1a1206;
  --gold-rgb: 233 180 76;
  /* Decorative ambient washes (radial gold atmospheres behind sections). */
  --gold-wash-rgb: 217 164 65;
  /* Gradient stops as used by the app's .bg-gold-gradient / LogoMark. */
  --gold-grad-a: #f2c14e;
  --gold-grad-b: #d9a441;
  --grad-gold: linear-gradient(135deg, var(--gold-grad-a), var(--gold-grad-b));

  /* Text */
  --text: #f5f5f7;
  --text-secondary: #a1a1aa;
  --text-muted: #6b6b74;

  /* Semantic */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Gold alpha accents (borders on hover, tinted fills) — derived from the
     live gold channel so the light theme flows through automatically. */
  --border-strong: rgb(var(--gold-rgb) / 0.3);
  --gold-tint-6: rgb(var(--gold-rgb) / 0.06);
  --gold-tint-10: rgb(var(--gold-rgb) / 0.1);
  --gold-tint-16: rgb(var(--gold-rgb) / 0.16);

  /* Assay instrument (SITE-BENCH-1) : la page de mesures est un INSTRUMENT,
     pas une nouvelle identite. Une seule couleur entre ici, l'accent teal ;
     tout le reste DERIVE des tokens existants et suit donc le theme sans
     surcharge claire (la garde de completude ignore les valeurs var-only).
     Doctrine assumee : « encre profonde sur blanc » se realise litteralement
     dans le theme clair, ou --elevated est l'ivoire le plus clair de la
     charte ; en sombre la meme feuille devient le panneau d'instrument le
     plus haut. Le cadre natif prime, la direction d'essai se porte dedans. */
  --assay-paper: var(--elevated);
  --assay-ink: var(--text);
  --assay-ink-soft: var(--text-secondary);
  --assay-rule: var(--border);
  --assay-teal: #4fd1c5;
  --assay-teal-rgb: 79 209 197;
  --assay-tint: rgb(var(--assay-teal-rgb) / 0.1);

  /* Shape */
  --r-input: 10px;
  --r-card: 14px;
  --r-panel: 16px;

  /* Effects */
  --glow-gold: 0 0 24px rgb(var(--gold-rgb) / 0.25);
  --glow-gold-strong: 0 0 40px rgb(var(--gold-rgb) / 0.4);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.35);

  --card-hover: var(--elevated);
  --header-bg: rgb(var(--bg-rgb) / 0.8);
  /* Header top-of-page — doctrine RETOUCHES-3 : le CHROME suit le thème, les
     MÉDIAS gardent leur convention. Sombre : la barre reste transparente sur
     la scène WebGL (l'existant, au pixel). Le clair surcharge en verre ivoire
     dès le sommet (voir le bloc clair). */
  --header-top-bg: transparent;
  --header-top-glass: none;

  /* Typography — Plus Jakarta Sans everywhere (the app has one family). */
  --font-display: "Plus Jakarta Sans", "Jakarta-fallback", system-ui, "Segoe UI", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Jakarta-fallback", system-ui, "Segoe UI", Arial, sans-serif;

  --ls-eyebrow: 0.18em;
  --ls-display: -0.02em;
  --lh-body: 1.65;
  --lh-display: 1.15;

  --container: 1200px;
  --gutter: clamp(20px, 4.5vw, 44px);
  --section-y: clamp(72px, 11vw, 140px);

  /* Motion — the app's ease-out-soft. */
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 0.2s;
  --dur-slow: 0.6s;
}

/* The light theme — warm desert surfaces (ivory/sand, never clinical white),
   warm ink text, and gold that DARKENS: the #e9b44c that reads on #0b0b0d
   cannot hold AA contrast on ivory; deep desert gold keeps the brand
   recognizable in daylight. Values proven by the app's P-THÈME (adapted to
   the site's palette); every pair below is pinned by the computed WCAG suite
   (scripts/check-contrast.mjs) — text/bg >= 4.5, UI/large >= 3. */
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg: #f6f1e6;
  --bg-rgb: 246 241 230;
  --surface: #fcf9f1;
  --elevated: #fffdf7;
  --border: #ddd3bf;

  /* Gold — darkens to hold AA as text and as button ground. One notch below
     the app's #8f620d: the site lays gold text on gold-tinted washes
     (legal-banner, chat-badge) and the computed suite pins those composites
     at >= 4.5 too. */
  --gold: #875c0b;
  --gold-hover: #7d550b;
  --on-gold: #fdf8ee;
  --gold-rgb: 135 92 11;
  /* Ambient washes stay light gold: a warm sand veil on ivory (decorative). */
  --gold-wash-rgb: 233 180 76;
  --gold-grad-a: #8f620d;
  --gold-grad-b: #7d550b;

  /* Text — warm ink, never neutral gray-on-white. */
  --text: #2b2417;
  --text-secondary: #5c5240;
  --text-muted: #857863;

  /* Semantic */
  --success: #166534;
  --warning: #854d0e;
  --danger: #b91c1c;

  /* Assay instrument : l'accent teal s'assombrit pour tenir AA sur l'ivoire,
     exactement comme l'or de la charte. Ratios calcules sur les trois fonds
     clairs : bg 6.68, surface 7.15, elevated 7.40 (seuil texte 4.5). */
  --assay-teal: #0d5f57;
  --assay-teal-rgb: 13 95 87;

  /* Effects — glows soften on ivory, shadows turn warm-ink and lighter. */
  --glow-gold: 0 0 24px rgb(var(--gold-rgb) / 0.18);
  --glow-gold-strong: 0 0 40px rgb(var(--gold-rgb) / 0.28);
  --shadow: 0 24px 60px rgb(43 36 23 / 0.18);
  --shadow-soft: 0 12px 34px rgb(43 36 23 / 0.12);

  --header-bg: rgb(var(--bg-rgb) / 0.82);
  /* Header top-of-page — le chrome est clair DÈS LE SOMMET : même verre
     ivoire que l'état scrollé, posé sur la scène WebGL sombre. 0.82 est le
     verre MINIMAL admissible : l'AA des liens (--text-secondary) sur le pire
     fond (--media-bg) exige alpha >= 0.8125 — paires épinglées par la suite
     calculée ; le gain d'opacité au scroll est perceptuel (la scène saigne à
     travers le verre au sommet, la barre se scelle sur le contenu). */
  --header-top-bg: var(--header-bg);
  --header-top-glass: blur(14px);
}

/* Arabic: connected script — IBM Plex Sans Arabic, zero tracking, no italics,
   taller leading, text colors without alpha (rendering artifacts between
   joined letters). */
html[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "PlexArabic-fallback", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "PlexArabic-fallback", "Segoe UI", Tahoma, sans-serif;
  --ls-eyebrow: 0;
  --ls-display: 0;
  --lh-body: 1.8;
  --lh-display: 1.4;
}

/* -------------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* Verrouille l'autosize heuristique des WebViews (font boosting) — la
     préférence « taille du texte » de l'OS, elle, reste respectée : le
     layout l'absorbe (robustesse font-scale, RETOUCHES-4 ①). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: color-mix(in srgb, var(--gold) 28%, var(--surface)) var(--bg);
  scrollbar-width: thin;
  accent-color: var(--gold);
}

body {
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  min-height: 100dvh;
}

/* Arabic body copy: >= 16px, opaque colors only. */
html[lang="ar"] body {
  font-size: 1.0625rem;
}

::selection {
  background: var(--gold);
  color: var(--on-gold);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-inline-size: 100%;
}

/* Keep the width/height attributes for CLS while letting CSS ratios win. */
img {
  block-size: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keyboard focus target never fully hidden behind the sticky header. */
:target,
[id] {
  scroll-margin-block-start: 110px;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-input);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 600;
  transform: translateY(-240%);
  transition: transform 0.2s var(--ease-signature);
}

.skip-link:focus-visible {
  transform: none;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Premium grain — the "matter" signature of the site. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Alternate sections: the app is dark everywhere — "light" sections become
   surface-elevated bands (kept class names, Desert Gold values). */
.section-light {
  background: var(--surface);
  color: var(--text-secondary);
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4 {
  color: var(--text);
}

.section-light ::selection {
  background: var(--gold);
  color: var(--on-gold);
}

/* ------------------------------------------------------------------ layout */
.container {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section-header {
  max-inline-size: 720px;
  margin-block-end: clamp(36px, 5vw, 64px);
}

.section-header.centered {
  margin-inline: auto;
  text-align: center;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 120;
  /* Top-of-page : le chrome suit le thème (sombre : transparent sur la scène,
     clair : verre ivoire dès le sommet — tokens --header-top-*). */
  background: var(--header-top-bg);
  -webkit-backdrop-filter: var(--header-top-glass);
  backdrop-filter: var(--header-top-glass);
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-block-end: 1px solid transparent;
}

.site-header.is-scrolled {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block-end-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  min-block-size: 76px;
}

.progress-bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 100%;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 121;
}

[dir="rtl"] .progress-bar {
  transform-origin: 100% 50%;
}

/* Brand lockup — the app's Logo: pixel-diamond mark + « YASI One » wordmark
   (YASI extrabold in text color, One semibold in gold gradient). */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

html[lang="ar"] .brand {
  letter-spacing: 0;
}

.brand-one {
  font-weight: 600;
  margin-inline-start: 0.22em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-mark {
  inline-size: 30px;
  block-size: 30px;
  flex: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin-inline-start: auto;
}

.site-nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding-block: 6px;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur-quick) ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease-signature);
}

[dir="rtl"] .site-nav a::after {
  transform-origin: 100% 50%;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--text);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Theme toggle — discret : une icône par mode (lune, soleil, écran),
   le tooltip natif (title) nomme le mode courant. Icônes symétriques,
   rien à refléter en RTL. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: border-color var(--dur-quick) ease, color var(--dur-quick) ease;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.theme-toggle .tt-icon {
  display: none;
  line-height: 0;
}

.theme-toggle[data-mode="dark"] .tt-dark,
.theme-toggle[data-mode="light"] .tt-light,
.theme-toggle[data-mode="system"] .tt-system {
  display: block;
}

/* Language switcher */
.lang-switcher {
  position: relative;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: var(--r-input);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  min-block-size: 40px;
  transition: border-color var(--dur-quick) ease, color var(--dur-quick) ease;
}

.lang-toggle:hover,
.lang-switcher.is-open .lang-toggle {
  border-color: var(--border-strong);
  color: var(--text);
}

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  min-inline-size: 190px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: 8px;
  display: none;
  z-index: 130;
}

.lang-switcher.is-open .lang-menu {
  display: block;
}

.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: background-color var(--dur-quick) ease, color var(--dur-quick) ease;
}

.lang-menu a:hover {
  background: var(--gold-tint-10);
  color: var(--text);
}

.lang-menu a[aria-current="true"] {
  color: var(--gold);
  font-weight: 600;
}

/* Mobile burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  inline-size: 44px;
  block-size: 44px;
  align-items: center;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
}

.burger span {
  display: block;
  inline-size: 20px;
  block-size: 1.6px;
  background: var(--text);
  transition: transform 0.3s var(--ease-signature), opacity 0.2s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.6px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg);
  display: none;
  flex-direction: column;
  padding-block: 110px 40px;
  overflow-y: auto;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  color: var(--text);
  padding-block: 12px;
  border-block-end: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu nav a .icon-dir {
  color: var(--gold);
  opacity: 0;
  transition: opacity var(--dur-quick) ease;
}

.mobile-menu nav a:hover .icon-dir {
  opacity: 1;
}

.mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 34px;
}

.mobile-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 34px;
}

.mobile-langs a {
  padding: 8px 14px;
  min-block-size: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  font-size: 0.9rem;
}

.mobile-langs a[aria-current="true"] {
  border-color: var(--border-strong);
  color: var(--gold);
}

@media (max-width: 920px) {
  .site-nav,
  .header-actions .btn-ghost,
  .header-actions .lang-switcher {
    display: none;
  }

  .burger {
    display: flex;
  }

  /* Robustesse font-scale (RETOUCHES-4 ①, constat Xiaomi/DuckDuckGo) : le
     réglage « taille du texte » d'Android gonfle les rem — la rangée du
     header dépassait le viewport (bouton et burger coupés, et en ar le
     viewport layout s'élargissait au min-content du header : page « dézoomée »).
     Le CHROME plafonne son inflation à ×1.3 (min() rem/px : 1.16rem×16×1.3
     et 0.875rem×16×1.3) — la barre est de l'UI, le contenu de page continue
     de suivre la préférence sans plafond. Arbitrage consigné au rapport. */
  .brand {
    font-size: min(1.16rem, 24.1px);
  }

  .header-actions .btn-sm {
    font-size: min(0.875rem, 18.2px);
    white-space: nowrap;
  }
}

/* Libellé court du CTA header (clé i18n dédiée ×7) : sous 560 px le libellé
   complet ne tient plus dès que la police est gonflée (pire cas mesuré :
   pt-br « Experimentar a Yasi »). */
.header-actions .try-short {
  display: none;
}

@media (max-width: 560px) {
  .header-actions .try-full {
    display: none;
  }

  .header-actions .try-short {
    display: inline;
  }
}

/* Compaction géométrique sous ~430 px : retraits, icônes et lockup se
   resserrent pour que la rangée tienne à 360 px même sous font-scale 1.5
   (prouvé par la probe RETOUCHES-4 : avant fix le burger était coupé dès
   360×1.0). Cibles tactiles >= 32 px (AA 2.5.8). */
@media (max-width: 430px) {
  .header-inner {
    gap: 10px;
  }

  .header-actions {
    gap: 5px;
  }

  .theme-toggle {
    inline-size: 32px;
    block-size: 32px;
  }

  .burger {
    inline-size: 36px;
    block-size: 36px;
  }

  .brand {
    gap: 8px;
    font-size: min(1rem, 20.8px);
  }

  .brand-mark {
    inline-size: 26px;
    block-size: 26px;
  }

  .header-actions .btn-sm {
    padding-inline: 10px;
  }
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  border-block-start: 1px solid var(--border);
  background: var(--surface);
  padding-block-start: clamp(48px, 7vw, 80px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-block-end: clamp(40px, 6vw, 64px);
}

@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand p {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-inline-size: 30ch;
  margin-block: 14px 20px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: border-color var(--dur-quick) ease, color var(--dur-quick) ease;
}

.footer-social a:hover {
  border-color: var(--border-strong);
  color: var(--gold);
}

/* Legal entity block (verbatim English on every locale). The dir="ltr" in
   the markup isolates it from RTL reordering. Beats `.footer-brand p` on
   specificity; 44ch lets the registered address sit on one line at desktop. */
.footer-brand p.footer-entity {
  font-size: 0.82rem;
  line-height: 1.7;
  max-inline-size: 44ch;
}

.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin-block-end: 18px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  list-style: none;
  padding: 0;
}

.footer-col a {
  color: var(--text-muted);
  font-size: 0.95rem;
  padding-block: 2px;
  transition: color var(--dur-quick) ease;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-newsletter {
  border-block-start: 1px solid var(--border);
  padding-block: clamp(28px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-newsletter h2 {
  font-size: 1.25rem;
}

.footer-newsletter p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-block-start: 4px;
}

.newsletter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.newsletter-form input {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 12px 16px;
  /* Largeur EXPLICITE bornée au conteneur (RETOUCHES-4 ①) : sans elle la
     largeur par défaut de l'input (attribut size ≈ 20ch) remonte en
     min-content du formulaire flex — sous font-scale en ar elle atteignait
     ~420 px et élargissait le viewport layout de toute la page (442 px
     mesurés ; max-width seul ne suffit pas, prouvé par la probe). 280 px
     NORMALISE aussi l'ar sur les 6 autres locales : son ~317 px desktop
     était un accident de largeur par défaut, pas un choix. */
  inline-size: 280px;
  max-inline-size: 100%;
  min-inline-size: min(280px, 70vw);
  min-block-size: 44px;
  color: var(--text);
  transition: border-color var(--dur-quick) ease, box-shadow var(--dur-quick) ease;
}

.newsletter-form input::placeholder {
  color: var(--text-muted);
}

.newsletter-form input:focus {
  outline: none;
  border-color: rgb(var(--gold-rgb) / 0.6);
  box-shadow: 0 0 0 2px rgb(var(--gold-rgb) / 0.15);
}

.newsletter-notice {
  inline-size: 100%;
  color: var(--gold);
  font-size: 0.9rem;
  min-block-size: 1.4em;
}

.footer-legal {
  border-block-start: 1px solid var(--border);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.footer-legal .spacer {
  flex: 1;
}

.footer-legal a {
  color: var(--text-muted);
  transition: color var(--dur-quick) ease;
}

.footer-legal a:hover {
  color: var(--text);
}

.footer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.footer-langs a[aria-current="true"] {
  color: var(--gold);
  font-weight: 600;
}

/* -------------------------------------------------------------- components */

/* Buttons — the app's Button: radius input (10px), primary = gold gradient
   with standing glow + brightness hover, secondary = elevated + border. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-input);
  padding: 12px 24px;
  min-block-size: 48px;
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: box-shadow 0.2s ease, border-color var(--dur-quick) ease,
    color var(--dur-quick) ease, background-color var(--dur-quick) ease,
    filter var(--dur-quick) ease;
  will-change: transform;
}

.btn-gold {
  background: var(--grad-gold);
  color: var(--on-gold);
  border: 1px solid transparent;
  box-shadow: var(--glow-gold);
}

.btn-gold:hover {
  filter: brightness(1.1);
}

.btn-gold:active {
  filter: brightness(0.95);
}

.btn-ghost {
  background: var(--elevated);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  border-color: rgb(var(--gold-rgb) / 0.4);
  background: color-mix(in srgb, var(--elevated) 80%, transparent);
}

.btn-sm {
  padding: 8px 16px;
  min-block-size: 40px;
  font-size: 0.875rem;
}

/* Robustesse font-scale (RETOUCHES-4 ①) : sur petit écran un libellé long
   gonflé par la préférence de taille de texte doit replier dans le bouton
   plutôt que déborder du conteneur (pire cas : pt-br « Experimentar a Yasi
   grátis » à 360×1.5). Le CTA du header garde son nowrap (libellé court +
   compaction, layout.css). */
@media (max-width: 480px) {
  .btn {
    max-inline-size: 100%;
    white-space: normal;
  }
}

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--gold);
  margin-block-end: 18px;
}

.eyebrow::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  flex: none;
  background: var(--grad-gold);
  transform: rotate(45deg);
  border-radius: 1.5px;
}

/* Gold display word: gradient-clipped like the app's .text-gold-gradient —
   upright (the app has no italics). Arabic renders the keyword by color/
   weight alone (flat gold, no gradient clip on joined letters). */
.gold-word {
  font-style: normal;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline-end: 0.06em;
}

html[lang="ar"] .gold-word {
  background: none;
  color: var(--gold);
  padding-inline-end: 0;
}

/* Badge (hero) — pill, gold tone like the app's Badge tone="gold". */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--gold-tint-10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.badge::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  flex: none;
  background: var(--grad-gold);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* Cards — the app's Card: surface bg, border, radius card (14px);
   interactive hover = gold/30 border + elevated bg (no shadow). */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 32px);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  will-change: transform;
}

.card:hover {
  border-color: var(--border-strong);
  background: var(--card-hover);
}

.card h3 {
  font-size: 1.22rem;
  margin-block: 16px 10px;
}

.card p {
  color: var(--text-muted);
  font-size: 0.96rem;
}

.section-light .card {
  background: var(--elevated);
  border-color: var(--border);
}

.section-light .card p {
  color: var(--text-secondary);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 16px;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.92rem;
}

.card-link .icon-dir {
  transition: translate 0.25s var(--ease-signature);
}

.card-link:hover .icon-dir {
  translate: 4px 0;
}

[dir="rtl"] .card-link:hover .icon-dir {
  translate: -4px 0;
}

/* Icon tile — the app's feature icon: rounded-xl, gold/20 border, gold/8 bg. */
.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: 12px;
  border: 1px solid rgb(var(--gold-rgb) / 0.2);
  background: rgb(var(--gold-rgb) / 0.08);
  color: var(--gold);
}

.icon-pill svg {
  inline-size: 22px;
  block-size: 22px;
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  min-block-size: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.chip svg {
  inline-size: 15px;
  block-size: 15px;
  color: var(--gold);
  flex: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Checklist */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.checklist svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--gold);
  margin-block-start: 0.2em;
}

/* Directional icons mirror in RTL; universal icons never do. */
.icon-dir:dir(rtl) {
  transform: scaleX(-1);
}

/* Trust line */
.trust-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.trust-line svg {
  inline-size: 17px;
  block-size: 17px;
  color: var(--gold);
  flex: none;
}

/* Prompt bar — the hero's conversion piece, shaped like the app's composer
   (elevated field, radius input, gold send). Decorative but fully wired:
   any click inside it goes where the primary app CTA goes (main.js). Sized
   like the two hero CTAs together on desktop, full column width on mobile;
   the placeholder must NEVER truncate (fr is the longest, checked in the
   7 locales at 1280 and 390 — see reports/2026-07-18-fix-hero).
   NOTE: in the hero this cap is restated as min(460px, 100%) in pages.css —
   the generic `.hero-inner > *` bound loads later and would win otherwise. */
.prompt-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 8px;
  padding-inline-start: 18px;
  inline-size: 100%;
  max-inline-size: 460px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.prompt-bar:hover {
  border-color: var(--border-strong);
  box-shadow: var(--glow-gold);
}

.prompt-bar:focus-within {
  border-color: rgb(var(--gold-rgb) / 0.6);
  box-shadow: var(--glow-gold);
}

.prompt-bar input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1rem;
  min-inline-size: 0;
  min-block-size: 44px;
}

.prompt-bar input::placeholder {
  color: var(--text-muted);
}

.prompt-bar input:focus {
  outline: none;
}

/* Narrow columns: lighter chrome + slightly smaller type so the longest
   placeholder (fr, ~300px at 1rem) still shows in full at 390px. */
@media (max-width: 480px) {
  .prompt-bar {
    gap: 8px;
    padding: 6px;
    padding-inline-start: 14px;
  }

  .prompt-bar input {
    font-size: 0.9rem;
  }
}

.prompt-send {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  border-radius: 8px;
  background: var(--grad-gold);
  color: var(--on-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter var(--dur-quick) ease, box-shadow 0.3s ease;
}

.prompt-send:hover {
  filter: brightness(1.1);
  box-shadow: var(--glow-gold);
}

.prompt-send svg {
  inline-size: 18px;
  block-size: 18px;
}

/* --------------------------------------------------------------- chat demo
   Mirrors the app landing's product frame: surface panel with a soft gold
   ambient shadow, elevated user bubbles, gold/15-bordered assistant bubble. */
.chat-demo {
  background: var(--surface);
  border: 1px solid rgb(var(--gold-rgb) / 0.2);
  border-radius: var(--r-panel);
  padding: clamp(18px, 2.6vw, 28px);
  box-shadow: 0 0 60px rgb(var(--gold-rgb) / 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-inline-size: 560px;
}

.chat-demo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.chat-demo-header .brand-mark {
  inline-size: 24px;
  block-size: 24px;
}

.chat-bubble {
  border-radius: var(--r-panel);
  padding: 14px 18px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.chat-bubble.user {
  align-self: flex-end;
  background: var(--elevated);
  color: var(--text);
  border-end-end-radius: 6px;
  max-inline-size: 85%;
}

.chat-bubble.assistant {
  align-self: flex-start;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border: 1px solid rgb(var(--gold-rgb) / 0.15);
  border-end-start-radius: 6px;
  color: var(--text-secondary);
}

.chat-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-block-start: 12px;
}

.chat-thumbs img,
.chat-thumb {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-input);
  border: 1px solid var(--border);
}

.chat-days {
  margin-block-start: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.chat-days strong {
  color: var(--text);
  font-weight: 600;
}

.chat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--gold-tint-10);
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
}

.chat-badge svg {
  inline-size: 14px;
  block-size: 14px;
  flex: none;
}

.chat-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.88rem;
}

.chat-panel-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.chat-panel-row .k {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.chat-panel-row .v {
  color: var(--text-muted);
}

.chat-panel-link {
  color: var(--gold);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: default;
}

/* ------------------------------------------------------------------- modal */
.modal {
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--elevated);
  color: var(--text-secondary);
  padding: clamp(30px, 5vw, 48px);
  max-inline-size: min(480px, calc(100vw - 40px));
  box-shadow: var(--shadow);
  text-align: center;
}

.modal::backdrop {
  background: rgb(var(--scrim-rgb) / 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal .brand-mark {
  inline-size: 52px;
  block-size: 52px;
  margin-inline: auto;
  margin-block-end: 20px;
}

.modal h2 {
  font-size: 1.6rem;
  margin-block-end: 12px;
}

.modal p {
  color: var(--text-muted);
  margin-block-end: 26px;
}

.modal-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  inline-size: 40px;
  block-size: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-input);
  color: var(--text-muted);
  transition: color var(--dur-quick) ease, background-color var(--dur-quick) ease;
}

.modal-close:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--elevated) 60%, var(--text-muted) 8%);
}

.modal-close svg {
  inline-size: 18px;
  block-size: 18px;
}

/* Modal entry — @starting-style native transition. */
.modal[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.4s var(--ease-signature), transform 0.4s var(--ease-signature),
    overlay 0.4s ease allow-discrete, display 0.4s ease allow-discrete;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

.modal[open]::backdrop {
  opacity: 1;
  transition: opacity 0.4s ease, overlay 0.4s ease allow-discrete, display 0.4s ease allow-discrete;
}

@starting-style {
  .modal[open]::backdrop {
    opacity: 0;
  }
}

/* Latin fragments inside Arabic copy are isolated with <bdi>. */
bdi {
  unicode-bidi: isolate;
}

/* Honeypot field — physically present for bots, invisible to humans:
   off-canvas, no tab stop, no AT exposure (aria-hidden in the markup). */
.hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------- pages */

/* Shared section furniture */
.lead {
  font-size: 1.06rem;
  color: var(--text-secondary);
  margin-block: 14px 24px;
  max-inline-size: 62ch;
}

.section-header.centered .lead {
  margin-inline: auto;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 940px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
}

@media (max-width: 940px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(30px, 4vw, 48px);
}

.centered-lead {
  margin-inline: auto;
}

.cta-gap {
  margin-block-start: 6px;
}

/* --------------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-block-size: max(92svh, 640px);
  display: flex;
  align-items: center;
  padding-block: 150px 90px;
  overflow: clip;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* WebGL signature scene: the poster paints first, the canvas fades in over
   it. RTL gets a pure CSS mirror of the visual layer (the diamond is
   symmetric); the veil flips the same way so the shaded side always
   protects the text column. */
.hero3d,
.hero3d-visual {
  position: absolute;
  inset: 0;
}

.hero-poster,
.hero-poster img,
.hero3d-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.hero-poster img {
  object-fit: cover;
}

.hero3d-canvas {
  opacity: 0;
  transition: opacity 0.7s var(--ease-signature);
}

.hero3d.is-live .hero3d-canvas {
  opacity: 1;
}

.hero3d.hero3d-off .hero3d-canvas {
  display: none;
}

[dir="rtl"] .hero3d-visual,
[dir="rtl"] .hero-veil {
  transform: scaleX(-1);
}

/* Intro-only wordmark, revealed under the diamond by the choreography
   (decorative: hidden by default, GSAP drives it, aria-hidden). The strip
   is full-width with a logical start padding so its center sits under the
   diamond (63 % inline) and mirrors for free in RTL. */
.hero3d-wordmark {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 62%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em;
  padding-inline-start: 44%; /* centers the strip under the diamond (fx 0.72) */
  opacity: 0;
  pointer-events: none;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: 0.02em;
}

.hero3d-wordmark .wm-yasi {
  font-weight: 800;
  color: var(--media-ink);
}

.hero3d-wordmark .wm-one {
  font-weight: 600;
  background: linear-gradient(135deg, var(--media-grad-a), var(--media-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 760px) {
  .hero3d-wordmark {
    padding-inline-start: 0;
    inset-block-start: 56%;
  }
}

.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgb(var(--scrim-rgb) / 0.66) 0%, rgb(var(--scrim-rgb) / 0.3) 44%, rgb(var(--scrim-rgb) / 0) 68%),
    linear-gradient(to bottom, rgb(var(--scrim-rgb) / 0.5), rgb(var(--scrim-rgb) / 0) 30%, rgb(var(--scrim-rgb) / 0) 62%, var(--bg) 97%);
  transition: opacity 0.9s var(--ease-signature);
}

/* While the opening choreography owns the stage there is no text to protect:
   the veil pulls back and closes in again as the hero text lands. */
[data-hero].intro-live .hero-veil {
  opacity: 0.3;
}

/* Mobile: the text column flows OVER the crystal — the scene becomes an
   ambient backdrop behind a stronger veil (poster and canvas dim equally,
   so the crossfade stays seamless). */
@media (max-width: 760px) {
  .hero-veil {
    background:
      radial-gradient(92% 58% at 50% 42%, rgb(var(--scrim-rgb) / 0.58), rgb(var(--scrim-rgb) / 0.3) 62%, rgb(var(--scrim-rgb) / 0.12)),
      linear-gradient(to bottom, rgb(var(--scrim-rgb) / 0.55), rgb(var(--scrim-rgb) / 0.18) 30%, rgb(var(--scrim-rgb) / 0.12) 60%, var(--bg) 97%);
  }
}

/* The hero is a flex row: without an explicit inline-size the container
   shrink-wraps to its widest child and self-centers — the text column then
   drifts INTO the diamond's territory (and moves whenever a locale's copy
   changes width). Full width pins the column to the site grid (aligned with
   the header lockup) and keeps text and scene apart at every viewport. */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  inline-size: 100%;
  max-inline-size: calc(var(--container));
}

/* Robustesse font-scale (RETOUCHES-4 ①) : la colonne en flex-start laisse
   ses enfants en fit-content — sous inflation de police une rangée nowrap
   (CTAs) ou un mot long du titre DÉPASSAIT le conteneur au lieu d'y
   replier (le clip du body masque la barre, pas la coupe). Chaque enfant
   est borné au conteneur ; les règles nommées plus bas re-bornent leurs
   plafonds en min(plafond, 100%). */
.hero-inner > * {
  max-inline-size: 100%;
}

/* Mobile: the text flows OVER the dimmed crystal (v2 design) — the veil
   alone leaves the brightest cells at 3.3:1 behind the paragraph (measured).
   A soft radial scrim under the text block closes the gap to AA without
   boxing the text; it steps back with the veil during the opening. */
@media (max-width: 760px) {
  .hero-inner {
    position: relative;
  }

  .hero-inner::before {
    content: "";
    position: absolute;
    inset: -8% -16%;
    background: radial-gradient(
      88% 74% at 50% 44%,
      rgb(var(--scrim-rgb) / 0.6),
      rgb(var(--scrim-rgb) / 0.32) 58%,
      transparent 80%
    );
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.9s var(--ease-signature);
  }

  [data-hero].intro-live .hero-inner::before {
    opacity: 0;
  }
}

/* Vertical rhythm: one scale instead of a flat gap — 14px inside a group
   (champ+CTAs, confiance+chips), 22px around the title copy, 30px between
   groups (sub → conversion → confiance). */
/* Convention média (P-SITE-THEME) : la scène WebGL est un média sombre dans
   les DEUX thèmes — le texte posé dessus garde l'encre média fixe, l'or du
   titre et du badge reste l'or clair de la scène ; seul le voile fond vers
   var(--bg), ce qui encadre la bande sombre sur la page claire. */
.hero-title {
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  font-weight: 800;
  max-inline-size: min(17ch, 100%);
  margin-block-start: 6px;
  color: var(--media-ink);
  /* Dernier recours sous font-scale : un mot plus large que la colonne
     (« L'intelligence » à 360×1.3+, probe RETOUCHES-4) casse dans la ligne
     plutôt que d'être coupé au bord du viewport. hyphens: auto écarté :
     le titre est splité en lignes par GSAP au chargement (pas de trait
     rendu) et le rendu sans JS divergerait. */
  overflow-wrap: break-word;
}

.hero-title .gold-word {
  --gold-grad-a: var(--media-grad-a);
  --gold-grad-b: var(--media-grad-b);
  background: linear-gradient(135deg, var(--media-grad-a), var(--media-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
}

html[lang="ar"] .hero-title .gold-word {
  background: none;
  color: var(--media-gold);
}

.hero .badge {
  color: var(--media-gold);
  border-color: rgb(var(--media-gold-rgb) / 0.3);
  background: rgb(var(--media-gold-rgb) / 0.1);
}

.hero .badge::before {
  background: linear-gradient(135deg, var(--media-grad-a), var(--media-grad-b));
}

/* Same territory logic as the title (17ch): the paragraph must end before
   the diamond's leftmost cells at every viewport 1280→1920, parallax
   excursions included. Tone raised over the starfield — text-secondary
   measured below AA there (ratio noted in reports/2026-07-18-fix-hero). */
.hero-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--media-ink-soft);
  max-inline-size: min(46ch, 100%);
  margin-block-start: 8px;
}

.hero .prompt-bar {
  margin-block-start: 16px;
  /* Le plafond 460px de components.css (gabarit « les deux CTA », placeholder
     ×7 locales prouvé) perdait contre `.hero-inner > *` ci-dessus : même
     spécificité, feuille plus tardive dans la cascade. Re-borné ici en
     min(plafond, 100%) — la convention des autres enfants du héro. */
  max-inline-size: min(460px, 100%);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Over the starfield the muted tone is illegible — one step up (6,4:1
   measured) — but the line stays a caption, far lighter than a CTA. */
.hero .trust-line {
  color: var(--media-ink-muted);
  font-size: 0.88rem;
  margin-block-start: 16px;
}

.hero .trust-line svg {
  inline-size: 16px;
  block-size: 16px;
  color: var(--media-gold);
}

.centered-ctas {
  justify-content: center;
}

/* The 4 chips read as a balanced 2×2 grid (app lesson « chips en paires »):
   each column is sized on its widest chip and both chips of a column share
   that width; the gap is uniform. Mirrors for free in RTL. */
.hero-chips {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
  max-inline-size: min(620px, 100%);
}

.hero-chips .chip {
  inline-size: 100%;
}

@media (max-width: 480px) {
  .hero-chips {
    grid-template-columns: minmax(0, max-content);
  }
}

/* Étagère d'écrans réels du héro (Lot D, conditionnelle au jeu HERO de la
   locale) : deux frames compactes sous les chips, dans la colonne texte.
   Les images sont lazy : le LCP reste le poster de la scène. */
.hero-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  gap: 14px;
  align-items: start;
  margin-block-start: 30px;
  max-inline-size: min(560px, 100%);
}

.shelf-frame {
  box-shadow: var(--shadow-soft);
}

@media (max-width: 760px) {
  .hero-shelf {
    grid-template-columns: 1fr;
  }

  .hero-shelf .shelf-phone {
    display: none;
  }
}

/* ------------------------------------------------------ bande d'essentiels */

/* « Des faits, pas des promesses » : bande compacte sous le héro, rendue
   depuis le registre (6 items au plus, chacun lie Confiance ou
   Fonctionnalités). Paddings resserrés : c'est une bande, pas une section
   pleine hauteur. */
.essentials-band {
  padding-block: clamp(44px, 6vw, 72px);
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.essentials-head {
  margin-block-end: 26px;
}

.essentials-title {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.essentials-grid {
  display: grid;
  /* La cure SITE-CURE (2026-07-26) ramène la bande à une poignée de messages
     forts : deux colonnes tiennent quatre essentiels en deux rangées pleines,
     là où la grille de trois laissait une carte orpheline. */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}

@media (max-width: 940px) {
  .essentials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .essentials-grid {
    grid-template-columns: 1fr;
  }
}

.essential-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  block-size: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--elevated);
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.essential-item:hover {
  border-color: rgb(var(--gold-rgb) / 0.4);
  color: var(--text);
}

.essential-item > svg:first-child {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  color: var(--gold);
  margin-block-start: 0.12em;
}

.essential-arrow {
  flex: none;
  margin-inline-start: auto;
  align-self: center;
  opacity: 0;
  color: var(--gold);
  transition: opacity 0.2s ease;
}

.essential-item:hover .essential-arrow,
.essential-item:focus-visible .essential-arrow {
  opacity: 1;
}

/* --------------------------------------------------- rangée de catégories */

/* 5 cartes-liens sobres vers les groupes de /features : la grille responsive
   des valeurs (une ligne >=1280, 3+2 centré, empilées) est réutilisée telle
   quelle via .values-grid. */
.category-card {
  display: block;
}

.category-card:hover h3 {
  color: var(--gold);
}

.category-card h3 {
  transition: color 0.2s ease;
}

/* ------------------------------------------------------------ yasi-en-action */

/* Scène produit « l'app s'assemble » : bloc simple et complet sans JS /
   sous reduced-motion ; la mise en scène en profondeur vient de motion.js.
   Hook [data-pin-scene] historique : depuis RETOUCHES-5 la scène ne se
   pinne plus — la simulation JOUE d'elle-même à l'arrivée, plus aucun
   défilement n'est exigé du visiteur pour voir la réponse s'assembler. */
[data-pin-scene] {
  position: relative;
}

/* Desktop : la scène occupe le viewport et se centre. Le padding de section
   est réduit ici (le 100svh centre déjà — le grand --section-y poussait la
   carte hors cadre sur les desktops courts ~768 px). Mobile : flux naturel
   de page, paddings de section normaux. */
@media (min-width: 761px) {
  [data-pin-scene] {
    min-block-size: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(28px, 5svh, 64px);
  }
}

[data-pin-scene] .col-visual {
  perspective: 1100px;
}

[data-pin-scene] .chat-demo {
  transform-style: preserve-3d;
}

.section-action .col-visual {
  justify-self: center;
  inline-size: 100%;
  display: flex;
  justify-content: center;
}

/* ------------------------------------------------------------------ heritage */
.framed-figure {
  margin: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
}

.framed-figure img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.framed-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.55), transparent 42%);
  border-radius: inherit;
}

/* La légende repose sur le voile sombre de la photo : encre média fixe. */
.framed-figure figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 1;
  padding: 18px 22px;
  font-size: 0.88rem;
  color: var(--media-ink);
}

.section-heritage {
  border-block-start: 1px solid var(--border);
}

/* ------------------------------------------------------- écrans réels (SHOTS) */
/* La section accueil ne se rend que si le jeu de captures de la locale est
   complet (src/_data/shots.mjs, doctrine SHOTS.md). Les captures sont des
   médias (app sombre par défaut) : le cadre suit les tokens du thème. */
.screens-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.62fr);
  align-items: start;
  margin-block-start: 34px;
}

.screen-shot {
  margin: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.screen-shot img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.screen-shot figcaption {
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
  border-block-start: 1px solid var(--border);
}

.screen-wide { grid-column: 1 / 3; }
.screen-phone { grid-row: 1 / 3; grid-column: 3; }

/* Angles étendus du jeu v2 : carousel CSS scroll-snap, aucune lib. Le flux
   logique (flex + overflow inline) suit la direction d'écriture : miroir
   RTL gratuit. */
.screens-carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 26px 10px;
  scrollbar-width: thin;
}

.screens-carousel .carousel-item {
  flex: 0 0 min(420px, 86%);
  scroll-snap-align: start;
}

/* Rangée de familles de l'accueil (cure SITE-CURE 2026-07-26, 7 familles) :
   carte compacte, rangées centrées. Le nombre de familles vient du registre :
   la grille suit ce compte sans jamais laisser une carte seule au bord. */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
}

.category-grid .card {
  flex: 0 1 258px;
  padding: 24px 20px;
}

.category-grid .card h3 {
  font-size: 1.05rem;
}

.category-grid .card p {
  font-size: 0.92rem;
}

@media (max-width: 620px) {
  .category-grid .card {
    flex: 1 1 100%;
  }
}

/* Famille à une seule capacité (cure SITE-CURE 2026-07-26) : après la cure,
   « création d'images », « vidéos » et « langues » tiennent en une carte. Elle
   prend toute la largeur de la section plutôt que de laisser une demi-grille
   vide à côté d'elle. */
.feature-grid-single {
  grid-template-columns: 1fr;
}

/* Slot d'écran réel des cartes de /features (conditionnel au jeu v2). */
.feature-card .card-shot {
  margin: 0 0 18px;
  border-radius: var(--r-input);
  overflow: hidden;
  border: 1px solid var(--border);
}

.feature-card .card-shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (max-width: 980px) {
  .screens-grid { grid-template-columns: 1fr; }
  .screen-wide { grid-column: auto; }
  .screen-phone {
    grid-row: auto;
    grid-column: auto;
    justify-self: center;
    inline-size: min(320px, 100%);
  }
}

/* ----------------------------------------------------------------- final CTA */
.section-final-cta {
  background:
    radial-gradient(90% 130% at 50% 118%, rgb(var(--gold-wash-rgb) / 0.26), transparent 62%),
    var(--bg);
  border-block-start: 1px solid var(--border);
}

.final-cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Même trappe fit-content que le héro (colonne en align-items: center). */
.final-cta-inner > * {
  max-inline-size: 100%;
}

.final-cta-inner h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  max-inline-size: min(24ch, 100%);
}

/* ---------------------------------------------------------------- page hero */
.page-hero {
  position: relative;
  padding-block: 170px 90px;
  background:
    radial-gradient(70% 90% at 85% 0%, rgb(var(--gold-wash-rgb) / 0.14), transparent 60%),
    var(--bg);
  overflow: clip;
}

.page-title {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  font-weight: 800;
  margin-block-end: 4px;
}

/* -------------------------------------------------------------------- about */
.mission-card {
  max-inline-size: 780px;
  margin-inline: auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: clamp(30px, 5vw, 52px);
  background: var(--elevated);
  box-shadow: var(--shadow-soft);
}

.mission-card .eyebrow {
  justify-content: center;
}

.mission-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.45;
  color: var(--text);
  text-wrap: balance;
}

html[lang="ar"] .mission-statement {
  line-height: 1.7;
}

/* « Notre histoire » : l'illustration héritage porte le récit, la carte
   « 1761 » (année + légende inchangées) se pose DESSUS en verre compact —
   le récit visuel ET l'ancre factuelle (décision gravée RETOUCHES-4 ⑥,
   remplace le panneau typographique d'attente). La photo est un DOCUMENT :
   jamais de miroir RTL. Convention média : verre (--scrim-card) et encres
   de la carte FIXES dans les deux thèmes, contraste épinglé par la suite
   calculée sur le pire fond possible (pixel blanc pur sous le verre). */
.heritage-figure {
  margin: 0;
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.heritage-figure img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.heritage-card {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  max-inline-size: min(32ch, calc(100% - 36px));
  padding: 14px 20px 16px;
  border-radius: var(--r-card);
  background: var(--scrim-card);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(var(--shine-rgb) / 0.14);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.heritage-card-year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
  background: linear-gradient(135deg, var(--media-grad-a), var(--media-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heritage-card-note {
  color: var(--media-ink);
  font-size: 0.92rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* « Une idée simple » card: shield icon, tight hierarchy, breathing room. */
.idea-card {
  max-inline-size: 820px;
  margin-inline: auto;
  margin-block-end: clamp(28px, 4vw, 44px);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--elevated);
  box-shadow: var(--shadow-soft);
  padding: clamp(30px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.idea-card .icon-pill {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 14px;
}

.idea-card .icon-pill svg {
  inline-size: 26px;
  block-size: 26px;
}

.idea-card h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  max-inline-size: 26ch;
  text-wrap: balance;
}

.idea-card .lead {
  margin-block: 0;
  max-inline-size: 58ch;
}

/* The 5 values: ONE line ≥1280, centered 3+2 between 768 and 1280, stacked
   below. Cards keep a working minimum — chrome tightens before text does. */
@media (min-width: 1280px) {
  .values-grid {
    grid-template-columns: repeat(5, minmax(196px, 1fr));
    gap: clamp(14px, 1.4vw, 20px);
  }

  .values-grid .card {
    padding: 26px 20px;
  }

  .values-grid .card h3 {
    font-size: 1.08rem;
  }

  .values-grid .card p {
    font-size: 0.92rem;
  }
}

@media (min-width: 768px) and (max-width: 1279.98px) {
  .values-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .values-grid .card {
    grid-column: span 2;
  }

  .values-grid .card:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 767.98px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.quote-band blockquote {
  margin: 0;
  max-inline-size: 860px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  padding-block-start: 40px;
}

.quote-band blockquote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -30px;
  inset-inline-start: 50%;
  translate: -50% 0;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[dir="rtl"] .quote-band blockquote::before {
  content: "\201D";
  translate: 50% 0;
}

.quote-band blockquote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.5;
  color: var(--text);
  text-wrap: balance;
}

html[lang="ar"] .quote-band blockquote p {
  line-height: 1.75;
}

/* -------------------------------------------------------------------- trust */
.trust-hero {
  text-align: center;
}

.hero-narrow {
  max-inline-size: 820px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero-narrow .lead {
  margin-inline: auto;
}

.trust-hero-scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 100% at 50% 115%, rgb(var(--gold-wash-rgb) / 0.22), transparent 62%),
    linear-gradient(to bottom, var(--bg), var(--surface));
}

.trust-hero-scene svg {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  inline-size: 100%;
  block-size: 78%;
}

.trust-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--bg));
}

.card-micro {
  margin-block-start: 14px;
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 600;
}

.pillars-closing {
  text-align: center;
  max-inline-size: 62ch;
  margin-inline: auto;
  margin-block-start: clamp(30px, 4vw, 48px);
  color: var(--text-muted);
  font-size: 1.02rem;
}

.kv-list strong {
  color: var(--text);
}

.section-transparency {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.method-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
  counter-reset: step;
}

@media (max-width: 940px) {
  .method-steps {
    grid-template-columns: 1fr;
  }
}

.method-step {
  position: relative;
}

.method-num {
  display: inline-grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  background: var(--grad-gold);
  color: var(--on-gold);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.chip-light {
  background: var(--elevated);
  border-color: var(--border);
  color: var(--text-secondary);
}

.section-light .chip svg {
  color: var(--gold);
}

.culture-title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-block-end: 8px;
}

.commit-box {
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--elevated);
  box-shadow: var(--shadow-soft);
  padding: clamp(24px, 3.4vw, 40px);
  inline-size: 100%;
}

.commit-box h3 {
  margin-block-end: 18px;
  font-size: 1.2rem;
}

.trust-final-band {
  background:
    radial-gradient(70% 120% at 50% 0%, rgb(var(--gold-wash-rgb) / 0.12), transparent 60%),
    var(--surface);
  border-block: 1px solid var(--border);
  padding-block: clamp(48px, 7vw, 84px);
  text-align: center;
}

.band-statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.5;
  color: var(--text);
  max-inline-size: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}

html[lang="ar"] .band-statement {
  line-height: 1.75;
}

/* --------------------------------------------------------------- technologie */

/* Chips des moteurs publics (labels maison, registre facts) : la rangée suit
   le header de la section orchestration. */
.engine-row {
  margin-block-start: 6px;
}

.engine-chip {
  font-weight: 600;
  color: var(--text);
}

/* -------------------------------------------------------------- coming soon */
.coming-hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 150px 90px;
  background:
    radial-gradient(80% 110% at 50% 118%, rgb(var(--gold-wash-rgb) / 0.2), transparent 60%),
    var(--bg);
  overflow: clip;
}

.coming-particles {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}

.coming-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-inline-size: 720px;
}

.coming-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
}

/* -------------------------------------------------------------------- legal */
.legal-section {
  padding-block-start: 150px;
}

.legal-banner {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--gold-tint-6);
  color: var(--gold);
  font-size: 0.86rem;
  margin-block-end: 34px;
}

.legal-body {
  max-inline-size: 72ch;
}

.legal-body h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin-block-end: 24px;
}

.legal-body h2 {
  font-size: 1.35rem;
  margin-block: 34px 12px;
}

.legal-body h3 {
  font-size: 1.1rem;
  margin-block: 26px 10px;
}

.legal-body p,
.legal-body li {
  color: var(--text-secondary);
  margin-block-end: 12px;
}

.legal-body ul,
.legal-body ol {
  padding-inline-start: 1.4em;
  margin-block-end: 16px;
}

.legal-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.table-scroll {
  overflow-x: auto;
  margin-block: 18px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-input);
}

.legal-body table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: 0.92rem;
}

.legal-body th,
.legal-body td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: start;
  vertical-align: top;
  color: var(--text-secondary);
  min-inline-size: 130px;
}

.legal-body th {
  color: var(--gold);
  font-weight: 600;
  background: var(--gold-tint-6);
}

/* ------------------------------------------------------------------ support */
.support-wrap {
  max-inline-size: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.support-form[hidden] {
  display: none;
}

.support-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.field input,
.field textarea {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 12px 16px;
  min-block-size: 48px;
  color: var(--text);
  transition: border-color var(--dur-quick) ease, box-shadow var(--dur-quick) ease;
}

.field textarea {
  resize: vertical;
  min-block-size: 160px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: rgb(var(--gold-rgb) / 0.6);
  box-shadow: 0 0 0 2px rgb(var(--gold-rgb) / 0.15);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 640px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
}

.consent-row input {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  margin-block-start: 2px;
  accent-color: var(--gold);
}

.consent-row a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.form-status {
  color: var(--gold);
  font-size: 0.92rem;
  min-block-size: 1.4em;
}

.form-error a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.support-success {
  background: var(--surface);
  border: 1px solid rgb(var(--gold-rgb) / 0.2);
  border-radius: var(--r-panel);
  padding: clamp(28px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: 0 0 60px rgb(var(--gold-rgb) / 0.12);
}

.support-success[hidden] {
  display: none;
}

.support-success h2 {
  font-size: 1.5rem;
}

.support-success p {
  color: var(--text-muted);
}

.support-channels h2 {
  font-size: 1.22rem;
  margin-block: 16px 10px;
}

.support-channels p {
  color: var(--text-muted);
  font-size: 0.96rem;
}

/* -------------------------------------------------------------- benchmarks */
/* SITE-BENCH-1 : la feuille d'essai. Doctrine flottante tenue au pixel : le
   blanc separe partout, les SEULS filets de la page vivent DANS les tables de
   donnees (exception fonctionnelle assumee). L'accent teal est unique, vient
   des tokens, et ne sert qu'a deux choses : marquer la colonne maison et
   poser les reperes de calibration. Les chiffres sont en chasse tabulaire :
   une colonne de scores doit s'aligner a la virgule. */

.assay-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Repere de calibration : une reglette courte, jamais un separateur. */
.assay-figure-tick,
.assay-card-tick,
.assay-phase2-tick {
  display: block;
  block-size: 9px;
  background: repeating-linear-gradient(
    to right,
    rgb(var(--assay-teal-rgb) / 0.9) 0 1px,
    transparent 1px 10px
  );
}

/* ------------------------------------------------------------ trio de tete */
.assay-caption {
  margin-block-start: clamp(48px, 7vw, 84px);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--assay-ink-soft);
}

.assay-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(30px, 5vw, 58px);
  margin-block-start: clamp(24px, 4vw, 38px);
}

.assay-figure-tick {
  inline-size: 84px;
  margin-block-end: 18px;
}

.assay-figure-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--assay-ink-soft);
}

.assay-figure-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-block: 4px 12px;
}

.assay-figure-score .assay-num {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--assay-ink);
}

.assay-figure-unit {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--assay-teal);
}

.assay-figure-detail {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--assay-ink-soft);
  max-inline-size: 34ch;
}

/* ------------------------------------------------------- bande de preuve */
.assay-proof {
  padding-block: clamp(44px, 7vw, 76px);
}

.assay-proof-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--assay-teal);
  margin-block-end: 16px;
}

.assay-proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: var(--assay-ink-soft);
}

.assay-proof-strip li {
  display: inline-flex;
  align-items: baseline;
}

.assay-proof-strip li + li::before {
  content: "·";
  color: var(--assay-teal);
  margin-inline: 20px;
}

/* ------------------------------------------------------ tables de donnees */
/* Seul endroit de la page ou un filet est permis. */
.assay-table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.assay-table-scroll:focus-visible {
  outline: 2px solid var(--assay-teal);
  outline-offset: 4px;
}

.assay-table {
  inline-size: 100%;
  border-collapse: collapse;
  min-inline-size: 640px;
}

.assay-table th,
.assay-table td {
  padding: 15px 18px;
  text-align: start;
  vertical-align: baseline;
  border-block-end: 1px solid var(--assay-rule);
}

.assay-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--assay-ink-soft);
  white-space: nowrap;
  border-block-end: 1px solid var(--assay-teal);
}

.assay-table tbody th {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--assay-ink);
}

.assay-table tbody tr:last-child th,
.assay-table tbody tr:last-child td {
  border-block-end: none;
}

.assay-col-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.assay-table td .assay-num {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--assay-ink);
}

/* La colonne maison, seule teintee : elle se lit sans se confondre. */
.assay-table td.assay-ours .assay-num {
  color: var(--assay-teal);
  font-weight: 800;
}

/* SITE-BENCH-5 : le bloc borne, dessin r2. Trois tables d'instrument, une
   liste publique STRICTEMENT triee, et notre ligne en REFERENCE. Toute la
   charge de ce dessin tient dans deux gestes de style : la ligne de reference
   se voit d'un coup d'oeil (teinte + accent) ET porte son jeton NON CLASSE
   dans le meme en-tete de ligne, pour qu'on ne puisse pas lire l'un sans
   l'autre ; la classe de source reste une micro-etiquette sourde, parce
   qu'elle qualifie la confiance sans jamais crier plus fort que le chiffre. */
.assay-asof {
  margin-block-start: 14px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--assay-ink-soft);
}

.assay-board + .assay-board {
  margin-block-start: clamp(44px, 6vw, 78px);
}

.assay-board-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 1.02rem;
  margin-block-end: 16px;
}

.assay-board-cond {
  font-size: 0.84rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--assay-ink-soft);
}

.assay-board-sub {
  margin-block: 20px 10px;
  font-size: 0.84rem;
  color: var(--assay-ink-soft);
}

/* La ligne de reference : teintee sur toute sa largeur, chiffre a l'accent. */
.assay-ref-row th,
.assay-ref-row td {
  background: var(--assay-tint);
}

.assay-ref-row .assay-num {
  color: var(--assay-teal);
  font-weight: 700;
}

/* Sa cellule de score porte de la PROSE, pas une colonne de chiffres : elle
   reprend donc l'alignement du texte et le droit de revenir a la ligne. */
.assay-ref-row td.assay-col-num {
  text-align: start;
  white-space: normal;
}

.assay-ref-note {
  font-size: 0.84rem;
  color: var(--assay-ink-soft);
}

.assay-ref-sep {
  margin-inline: 7px;
  color: var(--assay-teal);
}

/* Le jeton qui desarme la ligne. Il ne se detache jamais de son nom. */
.assay-chip {
  display: inline-block;
  margin-inline-start: 9px;
  padding: 2px 7px;
  border: 1px solid var(--assay-teal);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--assay-teal);
}

.assay-src {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--assay-ink-soft);
}

.assay-src.is-ours {
  color: var(--assay-teal);
}

.assay-mark {
  margin-inline-start: 2px;
  color: var(--assay-teal);
}

.assay-board-footnote {
  margin-block-start: 16px;
  max-inline-size: 82ch;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--assay-ink-soft);
}

/* Le verdict est une LECTURE, pas un slogan : il porte la reglette de
   calibration de la page et l'encre pleine, une seule fois par table. */
.assay-verdict {
  margin-block-start: 18px;
  max-inline-size: 82ch;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--assay-ink);
}

.assay-verdict::before {
  content: "";
  display: block;
  inline-size: 44px;
  block-size: 9px;
  margin-block-end: 12px;
  background: repeating-linear-gradient(
    to right,
    rgb(var(--assay-teal-rgb) / 0.9) 0 1px,
    transparent 1px 10px
  );
}

/* Le manque occupe la largeur : il ne se glisse pas entre deux chiffres. */
.assay-gap-row td {
  font-size: 0.92rem;
  color: var(--assay-ink-soft);
  background: var(--assay-tint);
  border-block-end: none;
}

.assay-notes {
  list-style: none;
  padding: 0;
  margin-block-start: 20px;
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--assay-ink-soft);
}

/* SITE-BENCH-2 : la citation de provenance reste SOUS la table qu'elle
   qualifie, dans le meme bloc borne. Elle se lit en second, jamais en premier :
   plus petite que les notes, mais du meme encre douce. */
.assay-cite {
  margin-block-start: 14px;
  max-inline-size: 88ch;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--assay-ink-soft);
}

/* --------------------------------------------------------------- routage */
.assay-route {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(28px, 4.5vw, 54px);
}

.assay-route-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  color: var(--assay-teal);
  margin-block-end: 12px;
  font-variant-numeric: tabular-nums;
}

.assay-route-step h3 {
  font-size: 1.06rem;
  margin-block-end: 8px;
}

.assay-route-step p {
  color: var(--assay-ink-soft);
  font-size: 0.96rem;
}

.assay-honest {
  margin-block-start: clamp(36px, 5.5vw, 60px);
  max-inline-size: 76ch;
  font-size: clamp(1.04rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: var(--assay-ink);
}

.assay-honest::before {
  content: "";
  display: block;
  inline-size: 60px;
  block-size: 9px;
  margin-block-end: 18px;
  background: repeating-linear-gradient(
    to right,
    rgb(var(--assay-teal-rgb) / 0.9) 0 1px,
    transparent 1px 10px
  );
}

/* --------------------------------------------------------------- phase 2 */
/* SITE-BENCH-2 : une annonce d'instruments, pas un calendrier. Meme grammaire
   que le reste de la feuille : un paragraphe court, puis des reperes de
   calibration courts, jamais une liste a puces qui ferait roadmap. */
.assay-phase2-body {
  max-inline-size: 74ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  color: var(--assay-ink-soft);
}

.assay-phase2-list {
  list-style: none;
  padding: 0;
  margin-block-start: clamp(30px, 4.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(22px, 3.2vw, 38px);
}

.assay-phase2-list li {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--assay-ink);
  max-inline-size: 26ch;
}

.assay-phase2-tick {
  inline-size: 30px;
  margin-block-end: 12px;
}

.assay-card-tick {
  inline-size: 38px;
  margin-block-end: 16px;
}

/* -------------------------------------------------------- comparabilite */
.assay-comparability-body {
  max-inline-size: 78ch;
  margin-block-start: 16px;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  color: var(--assay-ink-soft);
}

/* SITE-BENCH-4 : la prose de mesure. Un seul corps pour les sections qui
   racontent (refus, contamination, cadence, profondeur) : la feuille garde
   une seule voix, et le blanc separe, comme partout ailleurs ici. */
.assay-prose {
  max-inline-size: 76ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.65;
  color: var(--assay-ink-soft);
}

/* ------------------------------------------------- pistes de mesure -------
   Plages et nuages partagent la meme grammaire : une piste, une reglette de
   calibration en guise d'axe (JAMAIS un filet, la doctrine flottante tient),
   des repartitions en pourcentage POSEES par le gabarit et calculees en
   amont. Tout est en proprietes logiques : en arabe la piste se retourne avec
   la page, et les nombres restent LTR par <bdi> dans le gabarit. */
.assay-scale {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--assay-ink-soft);
}

/* La reglette : la meme trame que les reperes de calibration de la page, tiree
   sur toute la piste. Elle gradue, elle ne separe pas. */
.assay-range-track::after,
.assay-strip-track::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 9px;
  background: repeating-linear-gradient(
    to right,
    rgb(var(--assay-teal-rgb) / 0.38) 0 1px,
    transparent 1px 10px
  );
}

/* ---------------------------------------------------------------- plages */
.assay-range-set {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}

.assay-range {
  margin: 0;
}

.assay-range-head,
.assay-strip-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.assay-range-name,
.assay-strip-name {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--assay-ink);
}

.assay-range-cond,
.assay-strip-cond {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--assay-ink-soft);
}

.assay-range-track {
  position: relative;
  block-size: 46px;
  margin-block-start: 20px;
}

/* La bande grise est une ETENDUE, pas une valeur : elle reste neutre, derivee
   de l'encre, et ne prend jamais l'accent qui appartient a la mesure maison. */
.assay-range-band {
  position: absolute;
  inset-block: 9px 18px;
  inset-inline-start: var(--from);
  inline-size: calc(var(--to) - var(--from));
  background: color-mix(in srgb, var(--assay-ink) 14%, transparent);
}

.assay-range-ci {
  position: absolute;
  inset-block: 20px 21px;
  inset-inline-start: var(--from);
  inline-size: calc(var(--to) - var(--from));
  background: rgb(var(--assay-teal-rgb) / 0.34);
}

.assay-range-mark {
  position: absolute;
  inset-block: 4px 14px;
  inset-inline-start: var(--at);
  inline-size: 3px;
  margin-inline-start: -1.5px;
  background: var(--assay-teal);
}

/* La partition reservee est une mesure DE PLUS, pas la mesure de tete : elle
   se lit en second, donc elle s'allege au lieu de crier. */
.assay-range-mark.is-held {
  background: rgb(var(--assay-teal-rgb) / 0.45);
}

.assay-range-legend {
  list-style: none;
  padding: 0;
  margin-block-start: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  font-size: 0.86rem;
  color: var(--assay-ink-soft);
}

.assay-range-legend li {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.assay-key-swatch {
  flex: none;
  align-self: center;
  inline-size: 15px;
  block-size: 9px;
}

.assay-range-legend .is-band .assay-key-swatch {
  background: color-mix(in srgb, var(--assay-ink) 14%, transparent);
}

.assay-range-legend .is-ours .assay-key-swatch {
  inline-size: 3px;
  block-size: 16px;
  background: var(--assay-teal);
}

.assay-range-legend .is-held .assay-key-swatch {
  inline-size: 3px;
  block-size: 16px;
  background: rgb(var(--assay-teal-rgb) / 0.45);
}

.assay-range-legend .is-ci .assay-key-swatch {
  block-size: 3px;
  background: rgb(var(--assay-teal-rgb) / 0.34);
}

.assay-key-value {
  font-weight: 700;
  color: var(--assay-ink);
}

/* --------------------------------------------------- profondeur du parc */
.assay-strip-set {
  display: grid;
  gap: clamp(34px, 5vw, 58px);
}

.assay-strip {
  margin: 0;
}

.assay-strip-track {
  position: relative;
  block-size: 34px;
  margin-block-start: 18px;
}

/* Un point = un moteur, sans etiquette et sans ordre lisible : la dispersion
   se voit, l'identite ne se deduit pas. */
.assay-strip-dot {
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: var(--at);
  inline-size: 9px;
  block-size: 9px;
  margin-inline-start: -4.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--assay-ink) 34%, transparent);
}

/* La ligne de front est le premier point du nuage, donc le DERNIER a etre
   peint serait n'importe lequel des douze autres : sans plan, un point gris
   voisin recouvre la mesure que la section existe pour montrer. Le plan est
   pose ici, pas l'ordre du gabarit, qui reste celui des valeurs. */
.assay-strip-dot.is-front {
  inline-size: 13px;
  block-size: 13px;
  inset-block-start: 3px;
  margin-inline-start: -6.5px;
  background: var(--assay-teal);
  z-index: 1;
}

.assay-strip-front {
  margin-block-start: 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--assay-ink-soft);
}

.assay-depth-closing {
  margin-block-start: clamp(34px, 5vw, 58px);
}

/* ------------------------------------------------------------- cadences */
.assay-speed-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: clamp(30px, 5vw, 58px);
}

.assay-speed-name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--assay-ink-soft);
}

.assay-speed-value {
  margin-block: 4px 12px;
}

.assay-speed-value .assay-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--assay-ink);
}

.assay-speed-detail {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--assay-ink-soft);
  max-inline-size: 34ch;
}

.assay-speed-line {
  margin-block-start: clamp(34px, 5vw, 58px);
}

/* -------------------------------------------------------------- methode */
.assay-method-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(28px, 4.5vw, 54px);
}

.assay-method-letter {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  color: var(--assay-teal);
  margin-block-end: 12px;
}

.assay-method-point h3 {
  font-size: 1.06rem;
  margin-block-end: 8px;
}

.assay-method-point p {
  color: var(--assay-ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------- glossaire */
.assay-glossary {
  margin: 0;
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
}

.assay-glossary-row {
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr);
  gap: 6px 30px;
  align-items: baseline;
}

.assay-glossary dt {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--assay-ink);
}

.assay-glossary dd {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--assay-ink-soft);
  max-inline-size: 68ch;
}

.assay-disclaimer {
  margin-block-start: clamp(38px, 5.5vw, 62px);
  max-inline-size: 88ch;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Le terme et sa definition se superposent quand la colonne de termes ne peut
   plus tenir sans casser un mot du glossaire. */
@media (max-width: 640px) {
  .assay-glossary-row {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ motion */

/* The first-load golden veil is gone: the WebGL hero's crystallization
   opening (hero3d.mjs, once per session via sessionStorage "yasi_intro")
   is the site's welcome now. */

/* Golden shimmer: a soft sheen sweeps the gold words every ~7 s. The sheen
   is an extra background layer over the app's 2-stop gold gradient so the
   resting state is seamless. Arabic renders the keyword flat gold (no
   gradient clip) — no shimmer there. */
html:not([lang="ar"]) .gold-word {
  background-image:
    linear-gradient(115deg, transparent 0%, transparent 42%, rgb(var(--shine-rgb) / 0.85) 50%, transparent 58%, transparent 100%),
    linear-gradient(135deg, var(--gold-grad-a), var(--gold-grad-b));
  background-size: 260% 100%, 100% 100%;
  background-position: 140% 0, 0 0;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([lang="ar"]) .gold-word {
    animation: gold-shimmer 7s linear infinite;
  }
}

@keyframes gold-shimmer {
  0% {
    background-position: 140% 0, 0 0;
  }
  13% {
    background-position: -60% 0, 0 0;
  }
  100% {
    background-position: -60% 0, 0 0;
  }
}

/* Native cross-document View Transitions: elegant golden fade (~350 ms).
   Firefox ignores the at-rule — navigation stays classic, nothing breaks. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 0.35s var(--ease-signature) both;
}

::view-transition-new(root) {
  animation: vt-in 0.35s var(--ease-signature) both;
}

/* The header lockup travels between pages as ONE object (shared
   view-transition-name -> the browser morphs position/size instead of
   fading it with the root). The header bar itself stays put too. */
.site-header {
  view-transition-name: yasi-header;
}

.brand {
  view-transition-name: yasi-lockup;
}

::view-transition-group(yasi-lockup) {
  animation-duration: 0.4s;
  animation-timing-function: var(--ease-signature);
}

::view-transition-old(yasi-header),
::view-transition-new(yasi-header) {
  animation: none;
}

@keyframes vt-out {
  to {
    opacity: 0;
    filter: brightness(1.18) sepia(0.28);
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    filter: brightness(1.18) sepia(0.28);
  }
}

/* Golden cursor halo (desktop fine pointers, created by motion.js under
   no-preference only). A halo, not a lamp: a faint radial light that trails
   the pointer and leans in over interactive elements. Physical anchors on
   purpose — the transform that drives it is physical too. */
.cursor-halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 115; /* under the header (120), over the content */
  background: radial-gradient(circle, rgb(var(--media-gold-rgb) / 0.09), rgb(var(--media-gold-rgb) / 0.032) 42%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  transition:
    opacity 0.45s var(--ease-signature),
    scale 0.45s var(--ease-signature),
    filter 0.45s var(--ease-signature);
  will-change: transform;
}

.cursor-halo.is-on {
  opacity: 1;
}

.cursor-halo.is-hot {
  scale: 1.45;
  filter: brightness(1.55);
}

/* Decorative scroll-driven reveal (progressive enhancement only): the final
   state is the default; the animation is applied only where supported and
   only for simple fades — orchestrated sequences stay in GSAP. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sda-fade {
      animation: sda-fade-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes sda-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html {
    scroll-behavior: auto;
  }
}