/* =============================================================================
   Onagre — site vitrine (UIUX-02, docs/archive/design/WEBSITE-DOCUMENTATION-REDESIGN-2026.md)

   Prolonge le design system de l'App (Ordalie.Onagre.UI : tokens.css, base.css, components.css) sans le redéfinir :
   aucune couleur littérale hors de la « nuit » de marque (mêmes valeurs que le visuel d'authentification de l'App).
   Le site ajoute seulement ce que l'usage marketing exige : échelle typographique d'affichage, sections aérées,
   compositions texte + produit, navigation de site.
   ============================================================================= */
@layer s-site {

/* ------------------------------------------------------------------ Socle */
:root {
    --s-container: 76rem;
    --s-gutter: clamp(1rem, 4vw, 2rem);
    --s-section-y: clamp(4.5rem, 9vw, 8rem);
    --s-header-h: 4rem;
    --s-radius-panel: 1.5rem;

    --s-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
    --s-h2: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
    --s-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --s-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

    /* Nuit de marque (charte, brand/README.md) : identique au visuel de connexion de l'App */
    --s-night-text: oklch(0.97 0.01 90);
    --s-night-text-2: oklch(0.86 0.025 85);
    --s-night-text-3: oklch(0.74 0.025 80);
    --s-night-line: oklch(1 0 0 / 0.1);
    --s-night-surface: oklch(0.22 0.015 72 / 0.72);
    --s-night-bg:
        radial-gradient(60% 50% at 82% 0%, oklch(0.87 0.16 96 / 0.34) 0%, transparent 65%),
        radial-gradient(55% 55% at 6% 100%, oklch(0.64 0.15 48 / 0.3) 0%, transparent 65%),
        linear-gradient(170deg, oklch(0.27 0.03 85) 0%, oklch(0.2 0.02 70) 50%, oklch(0.15 0.012 60) 100%);
}

html { scroll-padding-top: calc(var(--s-header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body.s-site {
    font-size: 1rem;
    line-height: 1.6;
    background: var(--o-bg);
    color: var(--o-text);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}
.s-main { flex: 1; }

.s-container { width: min(100% - 2 * var(--s-gutter), var(--s-container)); margin-inline: auto; }
.s-container--narrow { width: min(100% - 2 * var(--s-gutter), 52rem); }
.s-container--text { width: min(100% - 2 * var(--s-gutter), 44rem); }

.s-section { padding-block: var(--s-section-y); position: relative; }
.s-section--tight { padding-block: calc(var(--s-section-y) * 0.6); }
.s-section--flush-top { padding-top: 0; }
.s-section--band { background: var(--o-surface-2); border-block: 1px solid var(--o-border-subtle); }

/* Typographie d'affichage — même famille (Inter, axe optique), approche serrée comme les titres de l'App */
.s-display {
    font-size: var(--s-display);
    font-weight: var(--o-weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.02;
    text-wrap: balance;
}
.s-display--page { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.s-h2 {
    font-size: var(--s-h2);
    font-weight: var(--o-weight-bold);
    letter-spacing: -0.035em;
    line-height: 1.06;
    text-wrap: balance;
}
.s-h3 { font-size: var(--s-h3); font-weight: var(--o-weight-semibold); letter-spacing: -0.02em; line-height: 1.2; }
.s-h4 { font-size: 1.0625rem; font-weight: var(--o-weight-semibold); letter-spacing: -0.012em; line-height: 1.3; }
.s-lead { font-size: var(--s-lead); line-height: 1.55; color: var(--o-text-2); text-wrap: pretty; }
.s-text { color: var(--o-text-2); text-wrap: pretty; }
.s-small { font-size: var(--o-text-sm); color: var(--o-text-3); }
.s-dim { color: var(--o-text-3); }

.s-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--o-space-2);
    font-size: var(--o-text-xs);
    font-weight: var(--o-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--o-text-3);
}
.s-eyebrow__index { font-family: var(--o-font-mono); letter-spacing: 0; color: var(--o-text-2); }
.s-eyebrow__rule { width: 1.5rem; height: 1px; background: var(--o-border-strong); }

.s-heading { display: flex; flex-direction: column; gap: var(--o-space-4); max-width: 46rem; }
.s-heading--center { margin-inline: auto; text-align: center; align-items: center; }
.s-heading + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

.s-link {
    display: inline-flex; align-items: center; gap: var(--o-space-1-5);
    font-weight: var(--o-weight-medium); color: var(--o-text);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
    text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
}
.s-link:hover { text-decoration-color: currentColor; color: var(--o-text); }
.s-link .o-icon { transition: transform var(--o-duration-base) var(--o-ease-out); }
.s-link:hover .o-icon { transform: translateX(2px); }

/* Boutons : ceux du design system (o-btn), en taille « site » */
.s-btn { --o-btn-h: 2.875rem; --o-btn-px: 1.25rem; font-size: 0.9375rem; border-radius: 0.625rem; gap: var(--o-space-2); }
.s-btn--sm { --o-btn-h: 2.25rem; --o-btn-px: 0.875rem; font-size: var(--o-text-sm); border-radius: var(--o-radius-md); }
.s-actions { display: flex; flex-wrap: wrap; gap: var(--o-space-3); align-items: center; }
.s-actions--center { justify-content: center; }
@media (max-width: 30rem) {
    .s-actions--stack { flex-direction: column; align-items: stretch; }
    .s-actions--stack .o-btn { width: 100%; }
}

/* Liste de points vérifiés */
.s-checks { list-style: none; padding: 0; display: grid; gap: var(--o-space-3); }
.s-checks li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--o-space-3); align-items: start; color: var(--o-text-2); }
.s-checks .o-icon { margin-top: 0.2rem; color: var(--o-ok); }

/* ------------------------------------------------------------------ En-tête */
.s-header {
    position: sticky; top: 0; z-index: var(--o-z-sticky);
    height: var(--s-header-h);
    background: color-mix(in oklch, var(--o-bg) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--o-duration-base) var(--o-ease-out), background-color var(--o-duration-base) var(--o-ease-out);
}
:root[data-scrolled] .s-header { border-bottom-color: var(--o-border-subtle); background: color-mix(in oklch, var(--o-bg) 90%, transparent); }
.s-header__inner { height: 100%; display: flex; align-items: center; gap: var(--o-space-6); }
.s-brand { display: inline-flex; align-items: center; color: var(--o-text); flex-shrink: 0; }
.s-brand:hover { color: var(--o-text); }

.s-nav { display: flex; align-items: center; gap: var(--o-space-1); }
.s-nav__link, .s-nav__trigger {
    display: inline-flex; align-items: center; gap: var(--o-space-1);
    height: 2.25rem; padding: 0 var(--o-space-3);
    border-radius: var(--o-radius-md);
    font-size: var(--o-text-md); font-weight: var(--o-weight-medium);
    color: var(--o-text-2);
    transition: color var(--o-duration-fast), background-color var(--o-duration-fast);
}
.s-nav__link:hover, .s-nav__trigger:hover, .s-nav__item:focus-within > .s-nav__trigger { color: var(--o-text); background: var(--o-surface-hover); }
.s-nav__link[aria-current="page"] { color: var(--o-text); }
.s-nav__trigger .o-icon { transition: transform var(--o-duration-base) var(--o-ease-out); color: var(--o-text-3); }
.s-nav__item { position: relative; }
.s-nav__item[data-open] > .s-nav__trigger .o-icon { transform: rotate(180deg); }

/* Panneau « Product » : ouvert au survol (souris), au focus (clavier) ou au clic (tactile, script) */
.s-mega {
    position: absolute; top: calc(100% + 0.5rem); left: 50%;
    width: min(46rem, calc(100vw - 2rem));
    translate: -50% 0;
    display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--o-space-2);
    padding: var(--o-space-2);
    border-radius: var(--o-radius-xl);
    background: var(--o-surface-raised);
    border: 1px solid var(--o-border);
    box-shadow: var(--o-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity var(--o-duration-base) var(--o-ease-out), transform var(--o-duration-base) var(--o-ease-out), visibility 0s linear var(--o-duration-base);
}
.s-mega::before { content: ""; position: absolute; inset: -0.75rem 0 auto; height: 0.75rem; }
.s-nav__item[data-open] > .s-mega,
.s-nav__item:focus-within > .s-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) {
    .s-nav__item:hover > .s-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.s-mega__col { display: flex; flex-direction: column; padding: var(--o-space-2); border-radius: var(--o-radius-lg); }
.s-mega__col--muted { background: var(--o-surface-2); }
.s-mega__title { padding: var(--o-space-1) var(--o-space-2) var(--o-space-2); font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--o-text-3); }
.s-mega__link {
    display: grid; grid-template-columns: 2rem 1fr; gap: var(--o-space-3); align-items: center;
    padding: var(--o-space-2); border-radius: var(--o-radius-md); color: var(--o-text);
}
.s-mega__link:hover { background: var(--o-surface-hover); color: var(--o-text); }
.s-mega__icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--o-radius-md); border: 1px solid var(--o-border); background: var(--o-surface); color: var(--o-text-2); box-shadow: var(--o-shadow-xs); }
.s-mega__name { font-size: var(--o-text-sm); font-weight: var(--o-weight-medium); line-height: 1.3; }
.s-mega__desc { display: block; font-size: var(--o-text-xs); color: var(--o-text-3); line-height: 1.35; }
.s-mega__all { margin-top: auto; padding: var(--o-space-2); font-size: var(--o-text-sm); }

.s-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--o-space-2); }
.s-lang { display: inline-flex; align-items: center; gap: 2px; font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); }
.s-lang a { padding: 0.25rem 0.4rem; border-radius: var(--o-radius-sm); color: var(--o-text-3); letter-spacing: 0.04em; }
.s-lang a:hover { color: var(--o-text); }
.s-lang a[aria-current="true"] { color: var(--o-text); background: var(--o-surface-hover); }

/* Navigation mobile : <details> (fonctionne sans script), enrichie par site.js (Échap, fermeture au clic) */
.s-burger { display: none; }
.s-burger > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; }
.s-burger > summary .o-icon { max-width: none; }
.s-burger > summary::-webkit-details-marker { display: none; }
.s-burger__icon-close { display: none; }
.s-burger[open] .s-burger__icon-open { display: none; }
.s-burger[open] .s-burger__icon-close { display: inline-block; }
.s-mnav {
    position: fixed; inset: var(--s-header-h) 0 0 0; z-index: var(--o-z-overlay);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--o-bg);
    padding: var(--o-space-4) var(--s-gutter) var(--o-space-10);
    display: flex; flex-direction: column; gap: var(--o-space-6);
    animation: s-sheet-in var(--o-duration-slow) var(--o-ease-out);
}
@keyframes s-sheet-in { from { opacity: 0; transform: translateY(-6px); } }
.s-mnav__group { display: flex; flex-direction: column; }
.s-mnav__title { font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--o-text-3); padding-bottom: var(--o-space-2); }
.s-mnav__link { display: flex; align-items: center; gap: var(--o-space-3); padding: var(--o-space-3) 0; border-bottom: 1px solid var(--o-border-subtle); font-size: 1.0625rem; font-weight: var(--o-weight-medium); color: var(--o-text); }
.s-mnav__link .o-icon { color: var(--o-text-3); }
.s-mnav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-4); }
:root[data-nav-open] { overflow: hidden; }
/* Le flou de l'en-tête crée un bloc conteneur pour les éléments fixes : retiré quand le menu mobile est ouvert */
.s-header:has(.s-burger[open]) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--o-bg); border-bottom-color: var(--o-border-subtle); }

@media (max-width: 62rem) {
    .s-nav, .s-header__end > .s-hide-mobile { display: none; }
    .s-burger { display: block; }
}

/* ------------------------------------------------------------------ Héros (nuit de marque) */
.s-hero { padding: var(--o-space-3) var(--o-space-3) 0; }
.s-hero__panel {
    position: relative; isolation: isolate;
    border-radius: var(--s-radius-panel);
    background: var(--s-night-bg);
    color: var(--s-night-text);
    padding: clamp(3.5rem, 8vw, 6.5rem) 0 0;
    overflow: hidden;
}
.s-night-grid::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(80% 70% at 50% 30%, black 25%, transparent 80%);
}
.s-hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--o-space-6); }
.s-hero__title { color: oklch(0.99 0.004 90); max-width: 18ch; }
.s-hero__title em { font-style: normal; color: var(--o-brand-primrose); }
.s-hero__lead { max-width: 40rem; color: var(--s-night-text-2); font-size: var(--s-lead); line-height: 1.55; }
.s-hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--o-space-2) var(--o-space-5); font-size: var(--o-text-sm); color: var(--s-night-text-3); }
.s-hero__meta span { display: inline-flex; align-items: center; gap: var(--o-space-1-5); }
.s-hero__meta .o-icon { color: var(--s-night-text-2); }

.s-pill {
    display: inline-flex; align-items: center; gap: var(--o-space-2);
    padding: 0.3rem 0.75rem 0.3rem 0.4rem;
    border-radius: var(--o-radius-full);
    border: 1px solid var(--s-night-line);
    background: oklch(1 0 0 / 0.05);
    font-size: var(--o-text-xs); font-weight: var(--o-weight-medium);
    color: var(--s-night-text-2);
}
.s-pill__dot { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: oklch(0.72 0.16 152 / 0.18); }
.s-pill__dot::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: oklch(0.78 0.16 152); box-shadow: 0 0 0 0 oklch(0.78 0.16 152 / 0.6); animation: s-ping 2.4s var(--o-ease-out) infinite; }
@keyframes s-ping { 0% { box-shadow: 0 0 0 0 oklch(0.78 0.16 152 / 0.55); } 70%, 100% { box-shadow: 0 0 0 7px oklch(0.78 0.16 152 / 0); } }

/* Boutons sur la nuit : l'accent devient le clair du logo (comme en thème sombre) */
.s-on-night .o-btn--primary {
    --o-btn-bg: oklch(0.97 0.006 85); --o-btn-bg-hover: oklch(1 0 0); --o-btn-fg: oklch(0.2 0.01 70);
    --o-btn-border: transparent; --o-btn-shadow: 0 8px 24px -8px oklch(0.87 0.16 96 / 0.45);
}
.s-on-night .o-btn:not(.o-btn--primary) {
    --o-btn-bg: oklch(1 0 0 / 0.06); --o-btn-bg-hover: oklch(1 0 0 / 0.12); --o-btn-fg: var(--s-night-text);
    --o-btn-border: oklch(1 0 0 / 0.16); --o-btn-shadow: none;
}
.s-on-night :focus-visible { outline-color: oklch(0.87 0.16 96 / 0.95); }

.s-hero__stage { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); padding-inline: clamp(0rem, 3vw, 2.5rem); }
.s-hero__stage::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 8%; height: 60%; z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, oklch(0.87 0.16 96 / 0.22), transparent 70%);
    filter: blur(30px);
}
.s-hero__shot { margin-bottom: -1px; }
.s-hero__shot .s-shot { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.s-hero__phone { position: absolute; right: clamp(0.5rem, 4vw, 3.5rem); bottom: clamp(1.5rem, 5vw, 3.5rem); width: clamp(9rem, 17vw, 13.5rem); }
@media (max-width: 48rem) {
    .s-hero { padding: var(--o-space-2) var(--o-space-2) 0; }
    .s-hero__panel { border-radius: 1.125rem; }
    /* Sur téléphone, la vraie vue mobile de l'App remplace la capture de bureau, illisible à cette taille */
    .s-hero__shot { display: none; }
    .s-hero__stage { padding-inline: 0; }
    .s-hero__phone { position: relative; right: auto; bottom: auto; width: min(16.5rem, 72vw); margin: 0 auto -5rem; }
}
@media (max-width: 30rem) { .s-pill { display: none; } }

/* ------------------------------------------------------------------ Captures produit */
.s-shot {
    position: relative;
    border-radius: 0.875rem;
    border: 1px solid var(--o-border);
    background: var(--o-surface);
    box-shadow: var(--o-shadow-lg), var(--o-highlight);
    overflow: hidden;
}
.s-on-night .s-shot { border-color: oklch(1 0 0 / 0.14); box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.65), 0 0 0 1px oklch(0 0 0 / 0.2); }
.s-shot__bar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: 2.25rem; padding: 0 var(--o-space-3);
    background: var(--o-surface-2); border-bottom: 1px solid var(--o-border-subtle);
}
.s-shot__dots { display: flex; gap: 6px; }
.s-shot__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--o-border-strong); }
.s-shot__url {
    display: inline-flex; align-items: center; gap: var(--o-space-1-5);
    padding: 0.2rem 0.75rem; border-radius: var(--o-radius-sm);
    background: var(--o-surface); border: 1px solid var(--o-border-subtle);
    font-family: var(--o-font-mono); font-size: 0.6875rem; color: var(--o-text-3);
}
.s-shot__img { display: block; width: 100%; height: auto; }
/* Capture haute (carte des services) : rognée en bas pour garder le rythme de la page */
.s-shot--tall { max-height: min(46rem, 85vh); }
.s-shot--phone { border-radius: 1.75rem; border-width: 5px; border-color: var(--o-surface-inverse); box-shadow: var(--o-shadow-lg); }
.s-on-night .s-shot--phone { border-color: oklch(0.12 0.01 70); }
.s-shot-caption { margin-top: var(--o-space-3); font-size: var(--o-text-xs); color: var(--o-text-3); text-align: center; }

/* Une image par thème : seule celle du thème courant est affichée (et donc chargée quand elle est différée) */
:root[data-theme="dark"] .s-themed--light, :root:not([data-theme="dark"]) .s-themed--dark { display: none; }

/* Emplacement vidéo (démonstrations Playwright à venir) : poster, chargement différé, aucune lecture automatique sonore */
.s-video { display: block; width: 100%; height: auto; background: var(--o-surface-2); }

/* ------------------------------------------------------------------ Bandeau de faits */
.s-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--o-border-subtle); border-radius: var(--o-radius-xl); background: var(--o-surface); overflow: hidden; }
.s-fact { padding: var(--o-space-6); display: flex; flex-direction: column; gap: var(--o-space-1); }
.s-fact + .s-fact { border-left: 1px solid var(--o-border-subtle); }
.s-fact__value { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: var(--o-weight-bold); letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.s-fact__value small { font-size: 0.5em; font-weight: var(--o-weight-semibold); letter-spacing: -0.01em; color: var(--o-text-3); margin-left: 0.15em; }
.s-fact__label { font-size: var(--o-text-sm); color: var(--o-text-3); }
@media (max-width: 56rem) {
    .s-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-fact:nth-child(3) { border-left: 0; }
    .s-fact:nth-child(n+3) { border-top: 1px solid var(--o-border-subtle); }
}

/* ------------------------------------------------------------------ Chapitres texte + produit */
.s-story { display: flex; flex-direction: column; gap: clamp(5rem, 10vw, 8.5rem); }
.s-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.s-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.s-split--reverse > .s-split__copy { order: 2; }
.s-split__copy { display: flex; flex-direction: column; gap: var(--o-space-5); }
.s-split__media { position: relative; }
@media (max-width: 56rem) {
    .s-split, .s-split--reverse { grid-template-columns: minmax(0, 1fr); }
    .s-split--reverse > .s-split__copy { order: 0; }
}

/* Mise en scène d'une capture sur fond doux (cartes produits) */
.s-stage {
    position: relative; isolation: isolate;
    padding: clamp(1rem, 3vw, 2.25rem);
    border-radius: var(--s-radius-panel);
    background:
        radial-gradient(70% 60% at 100% 0%, color-mix(in oklch, var(--o-brand-primrose) 14%, transparent), transparent 70%),
        var(--o-surface-2);
    border: 1px solid var(--o-border-subtle);
}
.s-stage--plain { background: var(--o-surface-2); }

/* Annotations de lecture à côté d'une capture (expliquent l'écran réel, ne le simulent pas) */
.s-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-space-6); margin-top: var(--o-space-8); }
.s-note { display: flex; flex-direction: column; gap: var(--o-space-2); padding-top: var(--o-space-4); border-top: 1px solid var(--o-border); }
.s-note__title { display: flex; align-items: center; gap: var(--o-space-2); font-weight: var(--o-weight-semibold); }
.s-note__title .o-icon { color: var(--o-text-3); }
.s-note p { font-size: var(--o-text-sm); color: var(--o-text-2); }
@media (max-width: 48rem) { .s-notes { grid-template-columns: minmax(0, 1fr); gap: var(--o-space-4); } }

/* ------------------------------------------------------------------ Répertoires (cas d'usage, fonctionnalités) */
.s-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--o-space-8); }
.s-directory--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-entry {
    display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--o-space-4); align-items: center;
    padding: var(--o-space-5) 0; border-bottom: 1px solid var(--o-border-subtle); color: var(--o-text);
}
.s-entry:hover { color: var(--o-text); }
.s-entry__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--o-radius-lg); border: 1px solid var(--o-border); background: var(--o-surface); color: var(--o-text-2); box-shadow: var(--o-shadow-xs); transition: border-color var(--o-duration-base), color var(--o-duration-base); }
.s-entry:hover .s-entry__icon { border-color: var(--o-border-strong); color: var(--o-text); }
.s-entry__title { font-weight: var(--o-weight-semibold); letter-spacing: -0.01em; }
.s-entry__desc { display: block; font-size: var(--o-text-sm); color: var(--o-text-3); }
.s-entry__arrow { color: var(--o-text-3); transition: transform var(--o-duration-base) var(--o-ease-out), color var(--o-duration-base); }
.s-entry:hover .s-entry__arrow { transform: translateX(3px); color: var(--o-text); }
@media (max-width: 56rem) { .s-directory, .s-directory--3 { grid-template-columns: minmax(0, 1fr); } }

/* Cartes sobres (le design system garde les cartes pour l'App ; ici, peu nombreuses et jamais en grille uniforme) */
.s-card { padding: var(--o-space-6); border-radius: var(--o-radius-xl); border: 1px solid var(--o-border-subtle); background: var(--o-surface); display: flex; flex-direction: column; gap: var(--o-space-3); }
.s-card__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--o-radius-lg); background: var(--o-surface-2); border: 1px solid var(--o-border-subtle); color: var(--o-text-2); }
.s-grid { display: grid; gap: var(--o-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .s-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* Carte horizontale (icône, texte, action) */
.s-card--wide { flex-direction: row; align-items: center; gap: var(--o-space-6); padding: var(--o-space-8); }
.s-card--wide > .o-stack { flex: 1; }
@media (max-width: 48rem) { .s-card--wide { flex-direction: column; align-items: flex-start; } }
.s-store { display: inline-flex; flex-shrink: 0; border-radius: var(--o-radius-md); }

/* Commande shell (le prompt « $ » est décoratif et n'est pas sélectionnable) */
.s-terminal {
    display: flex; align-items: center; gap: var(--o-space-3); overflow-x: auto;
    padding: var(--o-space-4) var(--o-space-5); border-radius: var(--o-radius-lg);
    background: var(--o-surface-inverse); color: var(--o-text-inverse);
    font-family: var(--o-font-mono); font-size: var(--o-text-sm); white-space: nowrap;
}
.s-terminal code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.s-terminal__prompt { user-select: none; opacity: 0.55; }

/* ------------------------------------------------------------------ Catalogue des sensors */
.s-catalog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-space-4); }
.s-catalog__group { padding: var(--o-space-5); border-radius: var(--o-radius-xl); border: 1px solid var(--o-border-subtle); background: var(--o-surface); display: flex; flex-direction: column; gap: var(--o-space-4); }
.s-catalog__head { display: flex; align-items: center; gap: var(--o-space-3); }
.s-catalog__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--o-space-3); }
.s-catalog__item { display: grid; grid-template-columns: 1fr auto; gap: var(--o-space-1) var(--o-space-3); align-items: start; }
.s-catalog__name { font-weight: var(--o-weight-medium); font-size: var(--o-text-md); }
.s-catalog__desc { grid-column: 1 / -1; font-size: var(--o-text-sm); color: var(--o-text-3); line-height: 1.45; }
@media (max-width: 68rem) { .s-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .s-catalog { grid-template-columns: minmax(0, 1fr); } }

/* Badges d'offre (les états de monitoring gardent leurs couleurs : les offres restent neutres) */
.s-plan-badge { font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: var(--o-radius-sm); border: 1px solid var(--o-border); color: var(--o-text-3); white-space: nowrap; }
.s-plan-badge--free { color: var(--o-ok-fg); border-color: var(--o-ok-line); background: var(--o-ok-soft); }

/* ------------------------------------------------------------------ Topologie public / privé */
.s-topology {
    position: relative; isolation: isolate;
    border-radius: var(--s-radius-panel);
    background: var(--s-night-bg);
    color: var(--s-night-text);
    padding: clamp(1.5rem, 4vw, 3rem);
    display: grid; grid-template-columns: 1fr 1.1fr 1.25fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch;
    overflow: hidden;
}
.s-zone { position: relative; display: flex; flex-direction: column; gap: var(--o-space-3); padding: var(--o-space-4); border-radius: var(--o-radius-xl); border: 1px dashed oklch(1 0 0 / 0.18); background: oklch(1 0 0 / 0.025); }
.s-zone--onagre { border-style: solid; border-color: oklch(0.87 0.16 96 / 0.4); background: oklch(0.87 0.16 96 / 0.05); }
.s-zone__label { font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-night-text-3); }
.s-node { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--o-space-3); align-items: center; padding: var(--o-space-3); border-radius: var(--o-radius-lg); background: var(--s-night-surface); border: 1px solid var(--s-night-line); }
.s-node .o-icon { grid-row: span 2; color: var(--s-night-text-2); }
.s-node__name { font-size: var(--o-text-sm); font-weight: var(--o-weight-semibold); color: var(--s-night-text); }
.s-node__detail { font-size: var(--o-text-xs); color: var(--s-night-text-3); font-variant-numeric: tabular-nums; }
.s-node--hub { background: oklch(0.3 0.04 92 / 0.9); border-color: oklch(0.87 0.16 96 / 0.6); box-shadow: 0 0 28px -6px oklch(0.87 0.16 96 / 0.45); }
.s-node--hub .o-icon { color: var(--o-brand-primrose); }
.s-node__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: oklch(0.78 0.16 152); }
.s-flow { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--o-space-2); font-size: var(--o-text-2xs); color: var(--s-night-text-3); font-family: var(--o-font-mono); padding: var(--o-space-1) 0; }
.s-flow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, oklch(0.87 0.16 96 / 0.7) 0 6px, transparent 6px 12px); background-size: 24px 1px; animation: s-flow 1.6s linear infinite; z-index: -1; }
.s-flow span { background: oklch(0.2 0.02 70); padding: 0 var(--o-space-2); border-radius: var(--o-radius-sm); }
@keyframes s-flow { to { background-position: 24px 0; } }
.s-topology__caption { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-space-6); padding-top: var(--o-space-4); border-top: 1px solid var(--s-night-line); }
.s-topology__caption p { font-size: var(--o-text-sm); color: var(--s-night-text-2); }
.s-topology__caption strong { display: block; color: var(--s-night-text); margin-bottom: var(--o-space-1); }
@media (max-width: 62rem) {
    .s-topology, .s-topology__caption { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Intégrations */
.s-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--o-space-3); }
.s-logo-tile { display: flex; align-items: center; gap: var(--o-space-3); padding: var(--o-space-3) var(--o-space-4); border-radius: var(--o-radius-lg); border: 1px solid var(--o-border-subtle); background: var(--o-surface); }
.s-logo-tile img, .s-logo-tile__glyph { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.s-logo-tile__glyph { display: grid; place-items: center; border-radius: var(--o-radius-md); background: var(--o-surface-2); color: var(--o-text-2); }
.s-logo-tile__name { font-size: var(--o-text-sm); font-weight: var(--o-weight-medium); line-height: 1.25; }
.s-logo-tile__plan { display: block; font-size: var(--o-text-xs); color: var(--o-text-3); }

/* ------------------------------------------------------------------ Tarifs */
.s-stack-xl { display: flex; flex-direction: column; gap: var(--o-space-8); }
.s-billing-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--o-space-3); }
.s-billing { display: inline-flex; align-items: center; gap: var(--o-space-3); }
.s-billing .o-segmented__item { height: 2rem; padding: 0 var(--o-space-4); font-size: var(--o-text-sm); }
.s-save { font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); color: var(--o-ok-fg); }
.s-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--o-space-4); align-items: stretch; }
.s-plan { position: relative; display: flex; flex-direction: column; gap: var(--o-space-5); padding: var(--o-space-6); border-radius: var(--o-radius-xl); border: 1px solid var(--o-border); background: var(--o-surface); box-shadow: var(--o-shadow-xs); }
.s-plan--feature { border-color: var(--o-border-strong); box-shadow: var(--o-shadow-md); }
.s-plan__name { font-size: var(--o-text-lg); font-weight: var(--o-weight-semibold); }
.s-plan__for { font-size: var(--o-text-sm); color: var(--o-text-3); min-height: 3.2em; }
.s-plan__price { display: flex; align-items: baseline; gap: var(--o-space-1); min-height: 3.25rem; }
.s-plan__amount { font-size: 2.75rem; font-weight: var(--o-weight-bold); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.s-plan__unit { font-size: var(--o-text-sm); color: var(--o-text-3); }
.s-plan__billed { font-size: var(--o-text-xs); color: var(--o-text-3); min-height: 1.2em; margin-top: var(--o-space-1); }
.s-plan__tierbox { display: flex; flex-direction: column; gap: var(--o-space-1-5); }
.s-plan__tiers-label { font-size: var(--o-text-xs); color: var(--o-text-3); }
.s-plan__tiers { width: 100%; }
.s-plan__tiers .o-segmented__item { white-space: nowrap; }
.s-plan__tiers .o-segmented__item { flex: 1; justify-content: center; }
.s-plan__features { list-style: none; padding: var(--o-space-5) 0 0; border-top: 1px solid var(--o-border-subtle); display: flex; flex-direction: column; gap: var(--o-space-2-5); font-size: var(--o-text-sm); }
.s-plan__features li { display: grid; grid-template-columns: 1rem 1fr; gap: var(--o-space-2-5); color: var(--o-text-2); }
.s-plan__features .o-icon { margin-top: 0.15rem; color: var(--o-text-3); }
.s-plan__features li.s-plan__lead { color: var(--o-text); font-weight: var(--o-weight-medium); }
.s-plan__features li.s-plan__lead .o-icon { color: var(--o-text); }
[data-billing="monthly"] .s-price--yearly, [data-billing="yearly"] .s-price--monthly { display: none; }
@media (max-width: 62rem) { .s-plans { grid-template-columns: minmax(0, 1fr); max-width: 30rem; margin-inline: auto; } }

.s-compare-wrap { overflow-x: auto; border-radius: var(--o-radius-xl); border: 1px solid var(--o-border-subtle); background: var(--o-surface); }
.s-compare { width: 100%; min-width: 40rem; font-size: var(--o-text-sm); }
.s-compare th, .s-compare td { padding: var(--o-space-3) var(--o-space-5); text-align: center; border-bottom: 1px solid var(--o-border-subtle); }
.s-compare th:first-child, .s-compare td:first-child { text-align: left; }
.s-compare thead th { position: sticky; top: 0; background: var(--o-surface); font-weight: var(--o-weight-semibold); font-size: var(--o-text-md); }
.s-compare tbody th { font-weight: var(--o-weight-regular); color: var(--o-text-2); }
.s-compare__group th { background: var(--o-surface-2); font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--o-text-3); }
.s-compare tr:last-child td, .s-compare tr:last-child th { border-bottom: 0; }
.s-compare .o-icon { margin-inline: auto; }
.s-yes { color: var(--o-ok); }
.s-no { color: var(--o-text-disabled); }

/* ------------------------------------------------------------------ FAQ */
.s-faq { border-top: 1px solid var(--o-border); }
.s-faq details { border-bottom: 1px solid var(--o-border); }
.s-faq summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-4);
    padding: var(--o-space-5) 0; font-size: 1.0625rem; font-weight: var(--o-weight-medium); letter-spacing: -0.01em;
}
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary .o-icon { flex-shrink: 0; color: var(--o-text-3); transition: transform var(--o-duration-base) var(--o-ease-out); }
.s-faq details[open] summary .o-icon { transform: rotate(45deg); }
.s-faq__answer { padding: 0 0 var(--o-space-6); color: var(--o-text-2); max-width: 46rem; }
.s-faq-layout > * { margin-top: 0; }
.s-faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 56rem) { .s-faq-layout { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Appel à l'action final */
.s-cta { padding: 0 var(--o-space-3); }
.s-cta__panel {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--s-radius-panel);
    background: var(--s-night-bg);
    color: var(--s-night-text);
    padding: clamp(3.5rem, 8vw, 6rem) var(--s-gutter);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--o-space-6);
}
.s-cta__panel .s-h2 { color: oklch(0.99 0.004 90); max-width: 18ch; }
.s-cta__panel p { color: var(--s-night-text-2); max-width: 36rem; font-size: var(--s-lead); }
/* Le logo reste monochrome (charte) : le clair du logo sur la nuit, sans halo */
.s-cta__mark { color: oklch(0.95 0.004 90); }

/* ------------------------------------------------------------------ Pages intérieures */
.s-intro { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.s-intro__inner { display: flex; flex-direction: column; gap: var(--o-space-5); max-width: 50rem; }
.s-intro--center .s-intro__inner { margin-inline: auto; text-align: center; align-items: center; }
.s-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-1-5); font-size: var(--o-text-sm); color: var(--o-text-3); }
.s-crumbs a { color: var(--o-text-3); text-decoration: none; }
.s-crumbs a:hover { color: var(--o-text); }
.s-crumbs .o-icon { color: var(--o-text-disabled); }

/* Texte long (pages légales) : même typographie de lecture que la documentation */
.s-prose { color: var(--o-text-2); font-size: 1rem; line-height: 1.75; }
.s-prose > * + * { margin-top: 1em; }
.s-prose h2 { margin-top: 2.5em; font-size: 1.375rem; color: var(--o-text); letter-spacing: -0.02em; }
.s-prose h3 { margin-top: 2em; font-size: 1.125rem; color: var(--o-text); }
.s-prose h4 { margin-top: 1.75em; font-size: 1rem; color: var(--o-text); }
.s-prose ul, .s-prose ol { padding-left: 1.4em; }
.s-prose li + li { margin-top: 0.4em; }
.s-prose strong { color: var(--o-text); }
.s-prose hr { margin-block: 2.5em; }
.s-prose table { width: 100%; font-size: var(--o-text-sm); }
.s-prose th, .s-prose td { border: 1px solid var(--o-border-subtle); padding: var(--o-space-2) var(--o-space-3); text-align: left; vertical-align: top; }

/* ------------------------------------------------------------------ Pied de page */
.s-footer { margin-top: calc(var(--s-section-y) * 0.75); border-top: 1px solid var(--o-border-subtle); background: var(--o-bg-sidebar); }
.s-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--o-space-8); padding-block: clamp(3rem, 6vw, 4.5rem); }
.s-footer__about { display: flex; flex-direction: column; gap: var(--o-space-4); max-width: 18rem; }
.s-footer__about p { font-size: var(--o-text-sm); color: var(--o-text-3); }
.s-footer__about .o-segmented { align-self: flex-start; }
.s-footer__title { font-size: var(--o-text-xs); font-weight: var(--o-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--o-text-3); margin-bottom: var(--o-space-4); }
.s-footer__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--o-space-2-5); font-size: var(--o-text-sm); }
.s-footer__list a { color: var(--o-text-2); display: inline-flex; align-items: center; gap: var(--o-space-1); text-decoration: none; }
.s-footer__list a:hover { color: var(--o-text); }
.s-footer__list .o-icon { color: var(--o-text-3); }
.s-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-space-4); padding-block: var(--o-space-6); border-top: 1px solid var(--o-border-subtle); font-size: var(--o-text-sm); color: var(--o-text-3); }
.s-footer__tools { display: flex; align-items: center; gap: var(--o-space-4); }
.s-footer__social { color: var(--o-text-3); display: inline-flex; }
.s-footer__social:hover { color: var(--o-text); }
@media (max-width: 62rem) {
    .s-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-footer__about { grid-column: 1 / -1; max-width: none; }
}

/* ------------------------------------------------------------------ Page introuvable / erreur */
.s-lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-section-y); }
.s-lost__inner { display: flex; flex-direction: column; align-items: center; gap: var(--o-space-5); max-width: 32rem; }
.s-lost__code { font-family: var(--o-font-mono); font-size: var(--o-text-sm); color: var(--o-text-3); }

/* ------------------------------------------------------------------ Apparition au défilement (mesurée, désactivée si mouvement réduit) */
@media (prefers-reduced-motion: no-preference) {
    :root[data-reveal] [data-reveal-item] { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--o-ease-out), transform 700ms var(--o-ease-out); }
    :root[data-reveal] [data-reveal-item][data-revealed] { opacity: 1; transform: none; }
    .s-hero__copy > * { animation: s-rise 700ms var(--o-ease-out) both; }
    .s-hero__copy > :nth-child(2) { animation-delay: 60ms; }
    .s-hero__copy > :nth-child(3) { animation-delay: 120ms; }
    .s-hero__copy > :nth-child(4) { animation-delay: 180ms; }
    .s-hero__copy > :nth-child(5) { animation-delay: 240ms; }
    .s-hero__stage { animation: s-rise 900ms 200ms var(--o-ease-out) both; }
}
@keyframes s-rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .s-pill__dot::after, .s-flow::before { animation: none; } }

} /* @layer s-site */