/* ============================================================================
   DOTIKA — styles.css  (THEME DARK / futuriste)
   Hubs-World / @max-dev — refonte v2 (dark + reseau neuronal 3D)
   DA d'origine : @sara-uxui — textes : @copywriter

   PALETTE SOMBRE near-black + accent ROUGE de marque Dotika — regle d'usage :
     --c-accent       #DC2626  glow, borders, fond CTA, titres >= 24px
     --c-accent-text  #EF4444  liens / labels / petit texte (contraste AA ~5.4:1 sur near-black)
     --c-on-accent    #FFFFFF  texte blanc pose SUR un fond accent rouge (bouton primaire)
   IMPORTANT (inversion v1 -> v2) : var(--c-bg) est desormais SOMBRE.
   Ne l'utiliser que comme COULEUR DE FOND, jamais comme couleur de texte.
   Texte clair = var(--c-ink) / var(--c-ink-soft).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Fonds sombres near-black (theme dark Dotika) */
  --c-bg: #05060A;          /* fond global near-black */
  --c-surface: #0F1115;     /* sections alternees */
  --c-surface-2: #14161C;   /* cartes, inputs, chips */
  --c-panel: #0F1115;       /* section highlight (ambition / CTA inverse) */

  /* Texte clair */
  --c-ink: #FAFAFA;         /* titres, texte principal */
  --c-ink-soft: #9CA3AF;    /* texte secondaire, labels, captions */

  /* Bordures (hairlines clairs sur sombre) */
  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-strong: rgba(255, 255, 255, 0.16);

  /* Accent ROUGE de marque Dotika (signature) */
  --c-accent: #DC2626;          /* glow / border / CTA bg / titres >= 24px */
  --c-accent-bright: #EF4444;   /* variante claire / glow vif */
  --c-accent-text: #EF4444;     /* liens / labels / petit texte (AA ~5.4:1 sur near-black) */
  --c-accent-hover: #B91C1C;    /* hover bouton (rouge sombre) */
  --c-on-accent: #FFFFFF;       /* texte blanc sur fond rouge (contraste ~4.8:1) */
  --c-error: #F87171;

  /* Glows (rouge) */
  --glow-accent: 0 0 24px rgba(220, 38, 38, 0.45);
  --glow-soft: 0 0 0 1px rgba(220, 38, 38, 0.40), 0 12px 40px rgba(220, 38, 38, 0.16);

  /* Typographies */
  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  /* Echelle typo — v2 : tailles FLUIDES clamp() (echelle continue, moins de media queries,
     presence renforcee > 1440px). Les bornes basses == anciennes valeurs mobiles (767px). */
  --t-hero: clamp(40px, 4.2vw, 76px);  /* fluide ; PLAFOND = 76px (valeur d'origine validee QA) ->
                                          ne deborde jamais le hero (overflow:hidden) sur l'accueil */
  --t-h1:   clamp(40px, 5.5vw, 68px);  /* etait 56px fixe */
  --t-h2:   clamp(28px, 3.5vw, 48px);  /* etait 40px fixe */
  --t-h3:   clamp(22px, 2.5vw, 32px);  /* etait 28px fixe */
  --t-h4: 22px;
  --t-display: clamp(56px, 10vw, 120px); /* v2 : display ultra-bold (stat numbers, CTA final) */
  --t-lead: 20px; --t-body: 16px; --t-body-l: 18px; --t-label: 12px; --t-caption: 13px;

  /* Spacing */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px;
  --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;

  /* Layout */
  --content-max: 1200px; --margin-outer: 80px; --nav-h: 64px;

  /* Rayons */
  --r-card: 14px; --r-btn: 8px; --r-input: 8px;

  /* Easings / durees */
  --ease-out-fast: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-instant: 100ms; --dur-fast: 150ms; --dur-normal: 250ms; --dur-reveal: 500ms;

  /* ===== v2 — ENRICHISSEMENT PALETTE (chaque valeur testee contre #05060A) ===== */
  /* Surfaces elevees */
  --c-surface-3: #1C1F28;              /* modals, popovers, menus contextuels */
  /* Rouge etendu */
  --c-accent-subtle: rgba(220, 38, 38, 0.08); /* fond highlighted rows, etat actif nav ancres */
  --c-accent-ghost:  rgba(220, 38, 38, 0.04); /* hover de zones larges (cartes) */
  --c-accent-deep:   #9B1C1C;          /* rouge profond — badge critique, jamais sur texte courant */
  /* Glows etendus */
  --glow-sm:  0 0 10px rgba(220, 38, 38, 0.30);                                  /* petits elements interactifs */
  --glow-lg:  0 0 48px rgba(220, 38, 38, 0.22), 0 0 120px rgba(220, 38, 38, 0.08); /* hero CTA, stats au pulse */
  --glow-num: 0 0 64px rgba(220, 38, 38, 0.35), 0 2px 0 rgba(255, 77, 77, 0.15);   /* .stat__num au pulse d'arrivee */
  /* Etat — feedback UI uniquement, jamais dans le contenu editorial (tous AA sur #05060A) */
  --c-success: #34D399; --c-warning: #FBBF24; --c-info: #60A5FA;
  /* Ink etendu */
  --c-ink-faint: rgba(250, 250, 250, 0.07); /* separateurs ultra-legers */
  --c-ink-muted: #5A6070;                    /* metadata tertiaire */
}

/* ----------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* v2 : scroll-behavior:smooth RETIRÉ (le smooth est porté par Lenis ; le natif créait un
   double-smoothing — cf. audit D6). Lenis off (reduced-motion) -> ancres instantanées, OK. */
html { -webkit-text-size-adjust: 100%; background: var(--c-bg); }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--c-ink);
  /* TRANSPARENT : laisse voir le canvas neuronal global (z-index:-1) ;
     le backdrop opaque est porte par html (#05060A). */
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }
ul { list-style: none; padding: 0; }

@view-transition { navigation: auto; }

::selection { background: rgba(220, 38, 38, 0.3); color: #fff; }

/* ----------------------------------------------------------------------------
   3. TYPO UTILITAIRE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--c-ink); }

.label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-text);   /* label = petit texte -> accent-text (AA) */
  display: inline-block;
  margin-bottom: var(--s-16);
}
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--c-ink-soft); }
.text-soft { color: var(--c-ink-soft); }

.placeholder { color: var(--c-ink-soft); opacity: 0.55; font-style: italic; }

/* ----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin-outer); }

/* Sections semi-opaques : voile near-black qui laisse TRANSPARAITRE le reseau
   neuronal global derriere, tout en garantissant la lisibilite du texte. */
.section { padding-block: var(--s-96); position: relative; }
.section--bg { background: rgba(5, 6, 10, 0.87); }
.section--surface { background: rgba(15, 17, 21, 0.88); }

/* Section highlight (ambition / CTA) : panneau plus profond + hairline accent en haut */
.section--ink { background: rgba(15, 17, 21, 0.91); color: var(--c-ink); }
.section--ink::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent);
}

.section__head { max-width: 680px; margin-bottom: var(--s-48); }

/* ----------------------------------------------------------------------------
   5. NAVIGATION
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; background: transparent;
  transition: box-shadow var(--dur-normal) ease;
}
/* Fond flou porte par un PSEUDO, pas par .nav lui-meme.
   IMPORTANT (fix menu mobile) : backdrop-filter/filter pose sur .nav en ferait un
   containing-block pour ses descendants position:fixed -> le drawer .nav__links
   serait confine a la hauteur du header (56px) et clippe. En deplacant le flou sur
   ::before (qui n'est PAS un ancetre de .nav__links), .nav reste un contexte neutre
   et le drawer se positionne bien par rapport au viewport (pleine hauteur). */
.nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(5, 6, 10, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; transition: opacity var(--dur-normal) ease;
}
.nav.is-stuck::before { opacity: 1; }
.nav.is-stuck { box-shadow: 0 1px 0 0 var(--c-border); }
.nav__inner {
  position: relative; z-index: 1;   /* contenu nav au-dessus du pseudo flou */
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-inline: var(--margin-outer);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-32);
}
.nav__logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; color: var(--c-ink); }
.nav__logo .dot { color: var(--c-accent); text-shadow: var(--glow-accent); }

.nav__links { display: flex; align-items: center; gap: var(--s-32); }
.nav__link {
  position: relative; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-ink-soft); transition: color var(--dur-fast) ease; padding-block: var(--s-8);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="page"] { color: var(--c-ink); }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--c-accent); box-shadow: var(--glow-accent); transition: width var(--dur-normal) ease;
}
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current="page"]::after { width: 100%; }

.nav__burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav__burger svg { stroke: var(--c-ink); }

/* ----------------------------------------------------------------------------
   6. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; border-radius: var(--r-btn);
  transition: background var(--dur-fast) ease, color var(--dur-normal) ease, transform var(--dur-instant) ease,
              border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--c-accent); color: var(--c-on-accent); padding: 14px 28px;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
}
.btn--primary:hover, .btn--primary:focus-visible { background: var(--c-accent-hover); box-shadow: var(--glow-accent); }

.btn--secondary {
  background: transparent; color: var(--c-ink); font-weight: 600; padding: 13px 27px;
  border: 1px solid var(--c-border-strong);
}
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--c-accent); color: #fff; box-shadow: var(--glow-accent); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--s-4); font-size: 14px; font-weight: 600; color: var(--c-accent-text); }
.link-arrow .arrow { transition: transform var(--dur-normal) ease; }
.link-arrow:hover, .link-arrow:focus-visible { text-decoration: underline; color: var(--c-accent-bright); }
.link-arrow:hover .arrow, .link-arrow:focus-visible .arrow { transform: translateX(4px); }

/* v2 : focus stylé Dotika — anneau rouge AA (#EF4444) + glow, lu comme un composant délibéré.
   Surcharges par composant plus bas (inputs gardent leur ring continu). */
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--c-bg),          /* espace intérieur near-black */
    0 0 0 4px var(--c-accent-text), /* anneau rouge AA */
    var(--glow-sm);                 /* glow rouge diffus */
  border-radius: var(--r-btn);
  animation: focusIn 180ms var(--ease-out-fast) both;
  transition: box-shadow 150ms var(--ease-out-fast);
}
@keyframes focusIn {
  from { box-shadow: 0 0 0 0 var(--c-bg), 0 0 0 0 var(--c-accent-text), 0 0 0 rgba(220, 38, 38, 0); }
  to   { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent-text), var(--glow-sm); }
}
/* inputs/textareas : focus ring continu, pas d'animation one-shot */
.field input:focus-visible, .field textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22), 0 0 0 1px var(--c-accent);
  border-color: var(--c-accent); animation: none;
}
/* liens nav : conserve l'underline ::after + ring discret */
.nav__link:focus-visible { color: var(--c-ink); border-radius: 2px; }
.nav__link:focus-visible::after { width: 100%; }

/* ----------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  overflow: hidden; background: transparent; padding-top: var(--nav-h);
}
.hero--inner { min-height: 64vh; }
.hero--compact { min-height: 46vh; }

/* Reseau neuronal : FOND GLOBAL fixe, derriere TOUT le contenu, sur les 4 pages.
   z-index:-1 -> sous le contenu in-flow (sections/footer) ; html (#05060A) sert de
   backdrop opaque, body est transparent. Reste visible pendant tout le scroll. */
.neural-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.neural-bg canvas, .neural-bg svg { width: 100%; height: 100%; display: block; }

/* Voile hero : LEGER (le reseau doit dominer ici) ; juste de quoi asseoir le H1. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 30% 45%, transparent 0%, transparent 60%, rgba(5, 6, 10, 0.28) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.42) 0%, transparent 26%, transparent 64%, rgba(5, 6, 10, 0.70) 100%);
}

.hero__content { position: relative; z-index: 2; max-width: 760px; } /* v2 : ancrage gauche, le tiers droit respire (reseau) */
.hero__title {
  font-size: var(--t-hero); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; /* v2 : -0.025em */
  color: var(--c-ink); max-width: 760px; text-shadow: 0 2px 40px rgba(5, 6, 10, 0.6);
  font-feature-settings: "ss01" 1, "liga" 1; /* v2 : variantes stylistiques Syne sur grand texte */
  text-wrap: balance;                        /* v2 : evite veuves/orphelines sans JS */
}
.hero--inner .hero__title, .hero--compact .hero__title { font-size: var(--t-h1); font-weight: 700; }
.hero__sub { font-size: var(--t-body-l); line-height: 1.65; color: var(--c-ink-soft); max-width: 560px; margin-top: var(--s-24); }
.hero__actions { display: flex; align-items: center; gap: var(--s-24); flex-wrap: wrap; margin-top: var(--s-32); }

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s-32); transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-8);
  font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft);
}
.scroll-cue__line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--c-accent), transparent); animation: scrollPulse 2s var(--ease-in-out) infinite; }
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* ----------------------------------------------------------------------------
   8. POSITIONNEMENT / CHIPS
   -------------------------------------------------------------------------- */
.headline { font-size: var(--t-h2); font-weight: 600; color: var(--c-ink); max-width: 680px; }
.prose { font-size: var(--t-body-l); color: var(--c-ink-soft); max-width: 660px; }
.prose + .prose { margin-top: var(--s-24); }
.prose strong { color: var(--c-ink); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-32); }
.chip {
  font-size: var(--t-caption); color: var(--c-ink-soft); border: 1px solid var(--c-border);
  border-radius: 100px; padding: 8px 18px; background: var(--c-surface-2);
}

/* ----------------------------------------------------------------------------
   9. CARTES PILIERS
   -------------------------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-24); margin-top: var(--s-48); }
.pillar {
  position: relative; background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-left: 1px solid var(--c-border); border-radius: var(--r-card); padding: var(--s-32); overflow: hidden;
  transition: transform var(--dur-normal) var(--ease-out-fast), box-shadow var(--dur-normal) ease, border-color var(--dur-normal) ease;
}
.pillar:hover {
  transform: translateY(-4px); border-left: 3px solid var(--c-accent);
  padding-left: calc(var(--s-32) - 2px); box-shadow: var(--glow-soft);
}
.pillar__num {
  position: absolute; top: var(--s-16); right: var(--s-24); font-family: var(--font-display);
  font-size: 80px; font-weight: 800; line-height: 1; opacity: 0.16; pointer-events: none;
  /* meme traitement CONTOUR que Services (un peu plus discret) */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-accent);
  text-stroke: 1.5px var(--c-accent);
}
.pillar__icon { width: 40px; height: 40px; color: var(--c-accent); margin-bottom: var(--s-24); }
.pillar__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.4)); }
.pillar__title { font-size: var(--t-h4); margin-bottom: var(--s-12); }
.pillar__rule { width: 32px; height: 2px; background: var(--c-accent); margin-bottom: var(--s-16); opacity: 0.6; }
.pillar__text { font-size: 15px; color: var(--c-ink-soft); margin-bottom: var(--s-24); }

/* ----------------------------------------------------------------------------
   10. CHIFFRES
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-48); }
.stat__num {
  font-family: var(--font-display); font-size: var(--t-display); font-weight: 800; line-height: 1; /* v2 : display fluide */
  color: var(--c-accent); text-shadow: 0 0 30px rgba(220, 38, 38, 0.35);
  font-feature-settings: "ss01" 1, "liga" 1; letter-spacing: -0.02em;
}
.stat__label { font-size: 14px; color: var(--c-ink-soft); margin-top: var(--s-12); max-width: 220px; }
.partner-note {
  margin-top: var(--s-64); padding-top: var(--s-32); border-top: 1px solid var(--c-border);
  font-size: var(--t-caption); color: var(--c-ink-soft);
}

/* ----------------------------------------------------------------------------
   11. CTA FINAL CENTRE
   -------------------------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final__title { font-size: 48px; font-weight: 700; color: var(--c-ink); max-width: 660px; margin-inline: auto; }
.cta-final__text { margin: var(--s-24) auto 0; max-width: 520px; color: var(--c-ink-soft); }
.cta-final__actions { display: flex; justify-content: center; align-items: center; gap: var(--s-24); flex-wrap: wrap; margin-top: var(--s-32); }

/* ----------------------------------------------------------------------------
   12. SERVICES — ancres + blocs
   -------------------------------------------------------------------------- */
.anchor-nav {
  position: sticky; top: var(--nav-h); z-index: 50;
  background: rgba(5, 6, 10, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-border);
}
.anchor-nav__inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--margin-outer); display: flex; gap: var(--s-32); overflow-x: auto; }
.anchor-nav__link {
  padding: var(--s-16) 0; font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-ink-soft); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.anchor-nav__link:hover { color: var(--c-ink); }
.anchor-nav__link.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); }

.service-block { position: relative; scroll-margin-top: calc(var(--nav-h) + 60px); overflow: hidden; }
.service-block__num {
  position: absolute; top: var(--s-48); left: var(--margin-outer); font-family: var(--font-display);
  font-size: 180px; font-weight: 800; line-height: 1; opacity: 0.26; pointer-events: none; z-index: 0;
  /* Style CONTOUR (wireframe) rouge : gros chiffres bien visibles, elegants, sans aplat lourd */
  color: transparent;
  -webkit-text-stroke: 2px var(--c-accent);
  text-stroke: 2px var(--c-accent);
}
.service-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: center; }
.service-grid--reverse .service-visual { order: 2; }
.service-visual {
  position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--c-border); border-radius: var(--r-card);
  overflow: hidden; background: var(--c-surface-2); isolation: isolate;
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
/* DUOTONE dark + rouge : teinte rouge appliquee DIRECTEMENT sur l'image via filtre
   (grayscale -> sepia -> hue-rotate -> saturate) -> rouge garanti meme sur photo sombre,
   sans dependre d'un mix-blend-mode. Vignette near-black par-dessus pour fondre. */
.service-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) sepia(1) hue-rotate(-43deg) saturate(2.8) brightness(0.84) contrast(1.08);
}
.service-visual::before {                  /* renfort rouge dans les hautes lumieres (screen tres leger) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--c-accent); mix-blend-mode: screen; opacity: 0.14;
}
.service-visual::after {                   /* vignette + degrade bas -> fond l'image dans le near-black */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 32%, transparent 42%, rgba(5, 6, 10, 0.5) 100%),
    linear-gradient(180deg, transparent 52%, rgba(5, 6, 10, 0.82) 100%);
}
.service-visual:hover { border-color: var(--c-accent); box-shadow: var(--glow-soft); }
.service__name { font-size: var(--t-h2); margin-bottom: var(--s-16); }
.service__hook { font-size: var(--t-lead); color: var(--c-ink); margin-bottom: var(--s-24); }
.service__desc { color: var(--c-ink-soft); }
.service__desc + .service__desc { margin-top: var(--s-16); }
.benefits { margin: var(--s-24) 0 var(--s-32); }
.benefits li { position: relative; padding-left: var(--s-24); color: var(--c-ink-soft); margin-bottom: var(--s-12); }
.benefits li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px;
  border: 1.5px solid var(--c-accent); border-radius: 2px; box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
}

/* ----------------------------------------------------------------------------
   13. A PROPOS
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s-64); align-items: start; }
.quote-rail { position: relative; padding-left: var(--s-32); }
.quote-rail::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--c-accent); box-shadow: var(--glow-accent); }
.quote-rail blockquote { font-family: var(--font-display); font-size: 24px; font-style: italic; font-weight: 400; line-height: 1.4; color: var(--c-ink); }

/* Cartes co-fondateurs : avatars ronds centres sur le visage (crops individuels) */
.founders { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); margin-top: var(--s-48); }
.founder {
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-card);
  padding: var(--s-32) var(--s-24); text-align: center;
  transition: transform var(--dur-normal) var(--ease-out-fast), border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.founder:hover { transform: translateY(-4px); border-color: var(--c-border-strong); box-shadow: var(--glow-soft); }
.founder__avatar {
  width: 132px; height: 132px; border-radius: 50%; margin: 0 auto var(--s-24);
  object-fit: cover; object-position: center; display: block; /* crops deja centres sur le visage par fondateur */
  background: var(--c-surface); border: 1px solid var(--c-border-strong);
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10), 0 0 22px rgba(220, 38, 38, 0.18);
}
.founder__name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--c-ink); }
.founder__role { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent-text); margin-top: var(--s-8); }
.founder__title { font-size: 14px; color: var(--c-ink); margin-top: var(--s-8); }
.founder__cred { font-size: var(--t-caption); color: var(--c-ink-soft); margin-top: var(--s-4); }

/* Visuel premium "piece d'echecs" — illustration de section Notre approche (accueil) */
.approach-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-64); align-items: center; }
.approach-visual { position: relative; display: flex; justify-content: center; }
.approach-visual::before {
  content: ""; position: absolute; left: 50%; top: 48%; width: 70%; height: 80%;
  transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220, 38, 38, 0.26), transparent 72%); filter: blur(34px);
}
.approach-visual img {
  /* brand-king.png : roi argente detoure (alpha droit, fond noir -> transparent).
     Compositing normal -> aucun cadre. Ombre portee epousant la piece. */
  position: relative; z-index: 1; width: auto; max-width: 100%; max-height: 540px; display: block;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.6));
}

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: var(--s-48); }
.value { padding: 0 var(--s-32); border-left: 1px solid var(--c-border); }
.value:first-child { padding-left: 0; border-left: none; }
.value__title { font-size: var(--t-h4); margin-bottom: var(--s-12); }
.value__text { color: var(--c-ink-soft); }

.partner-card { display: flex; flex-direction: column; gap: var(--s-16); max-width: 720px; }
.partner-card__logo { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h3); color: var(--c-ink); }

/* ----------------------------------------------------------------------------
   14. CONTACT — formulaire
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--s-64); align-items: start; }
.contact-aside h2 { font-size: var(--t-h3); margin-bottom: var(--s-24); }
.contact-aside p { color: var(--c-ink-soft); margin-bottom: var(--s-8); }
.contact-aside a { color: var(--c-accent-text); }
.contact-aside a:hover { text-decoration: underline; color: var(--c-accent-bright); }
.contact-aside hr { border: none; border-top: 1px solid var(--c-border); margin: var(--s-32) 0; }
.contact-aside .sub-label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink); margin-bottom: var(--s-8); }

.form { display: grid; gap: var(--s-24); }
.field { display: flex; flex-direction: column; gap: var(--s-8); }
.field label { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); }
.field .req { color: var(--c-accent-text); }
.field input, .field textarea {
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-input);
  padding: 12px 16px; font-size: 15px; color: var(--c-ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-ink-soft); opacity: 0.6; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18); }
.field.has-error input, .field.has-error textarea { border-color: var(--c-error); }
.field__error { font-size: var(--t-label); color: var(--c-error); display: none; }
.field.has-error .field__error { display: block; }

.form__note { font-size: var(--t-label); color: var(--c-ink-soft); line-height: 1.6; }
.form__success {
  display: none; align-items: flex-start; gap: var(--s-12); padding: var(--s-24);
  background: var(--c-surface-2); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent);
  border-radius: var(--r-card); font-size: 14px; color: var(--c-ink); box-shadow: var(--glow-soft);
}
.form__success.is-visible { display: flex; }
.form__success svg { flex-shrink: 0; width: 20px; height: 20px; stroke: var(--c-accent); fill: none; }

.dev-flag {
  font-size: var(--t-label); color: var(--c-ink-soft); background: var(--c-surface-2);
  border: 1px dashed var(--c-border-strong); border-radius: var(--r-btn); padding: var(--s-8) var(--s-12); margin-top: var(--s-12);
}

/* ----------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: rgba(2, 3, 6, 0.92); color: var(--c-ink); padding-top: var(--s-64); border-top: 1px solid var(--c-border); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-48); padding-bottom: var(--s-48); }
.footer__logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--c-ink); }
.footer__logo .dot { color: var(--c-accent); text-shadow: var(--glow-accent); }
.footer__tag { font-size: 14px; color: var(--c-ink-soft); margin-top: var(--s-16); max-width: 320px; }
.footer__col h3 { font-family: var(--font-body); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: var(--s-16); }
.footer__col a { display: block; font-size: 14px; color: var(--c-ink-soft); padding-block: var(--s-4); transition: color var(--dur-fast) ease; }
.footer__col a:hover { color: var(--c-ink); }
.footer__bottom { border-top: 1px solid var(--c-border); padding-block: var(--s-32); display: flex; justify-content: space-between; gap: var(--s-24); flex-wrap: wrap; font-size: var(--t-label); color: var(--c-ink-soft); }

/* ----------------------------------------------------------------------------
   16. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out-fast), transform var(--dur-reveal) var(--ease-out-fast);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------------
   16b. INTRO D'OUVERTURE (accueil) — le reseau s'assemble, le logo s'allume
   -------------------------------------------------------------------------- */
/* FOND dark de l'intro (z1000) : SOUS le canvas neuronal pendant l'intro. */
.intro-overlay {
  position: fixed; inset: 0; z-index: 1000; background: var(--c-bg);
  opacity: 1; transition: opacity 750ms ease;
  will-change: opacity;
}
.intro-overlay.is-hiding { opacity: 0; pointer-events: none; }

/* Pendant l'intro : le canvas neuronal global remonte au-dessus du FOND (z1001),
   mais SOUS la scene logo (z1002). A la fin, body.intro-active retire -> canvas en z-index:-1. */
body.intro-active { overflow: hidden; }
body.intro-active .neural-bg { z-index: 1001; }

/* SCENE logo (z1002) : DEVANT le canvas -> "Dotika." est au premier plan, lisible sur les neurones. */
.intro-stage {
  position: fixed; inset: 0; z-index: 1002;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 750ms ease, transform 750ms var(--ease-out-fast);
  will-change: opacity, transform;
}
.intro-stage.is-hiding { opacity: 0; transform: scale(1.06); pointer-events: none; } /* fondu + leger zoom -> revele le hero */

.intro-logo {
  position: relative; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 9vw, 96px); letter-spacing: -0.02em; color: var(--c-ink);
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity 520ms ease, transform 620ms var(--ease-out-fast), text-shadow 400ms ease;
}
.intro-logo .dot { color: var(--c-accent); display: inline-block; }
.intro-stage.logo-in .intro-logo { opacity: 1; transform: none; }
.intro-stage.is-lit .intro-logo { text-shadow: 0 0 42px rgba(220, 38, 38, 0.28); }
.intro-stage.is-lit .intro-logo .dot {
  text-shadow: 0 0 30px rgba(220, 38, 38, 0.95), 0 0 64px rgba(220, 38, 38, 0.6);
  animation: dotIgnite 620ms var(--ease-out-fast);
}
@keyframes dotIgnite { 0% { transform: scale(1); } 42% { transform: scale(1.5); } 100% { transform: scale(1); } }

.intro-skip {
  position: fixed; bottom: var(--s-24); right: var(--s-24); z-index: 1003;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink-soft); padding: 8px 16px; border-radius: 100px;
  border: 1px solid var(--c-border-strong); background: rgba(255, 255, 255, 0.02);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.intro-skip:hover, .intro-skip:focus-visible { color: var(--c-ink); border-color: var(--c-accent); }

/* reduced-motion : aucune intro animee (overlay + stage retires par JS ; ceinture + bretelles) */
@media (prefers-reduced-motion: reduce) { .intro-overlay, .intro-stage { display: none; } }

/* ----------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) { :root { --margin-outer: 40px; } }

@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; gap: var(--s-32); }
  .service-grid--reverse .service-visual { order: 0; }
  .service-grid .service-visual { order: -1; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: var(--s-48); }
  .approach-split { grid-template-columns: 1fr; gap: var(--s-32); }
  .approach-visual { order: -1; max-width: 420px; margin-inline: auto; }
  .founders { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .stats { grid-template-columns: 1fr; gap: var(--s-32); }
  .values { grid-template-columns: 1fr; }
  .value { padding: var(--s-24) 0; border-left: none; border-top: 1px solid var(--c-border); }
  .value:first-child { padding-top: 0; border-top: none; }
}

@media (max-width: 767px) {
  /* v2 : les tailles typo sont desormais fluides (clamp) -> plus d'override fixe ici */
  :root { --margin-outer: 20px; --nav-h: 56px; }
  .section { padding-block: var(--s-64); }
  .hero__title { font-size: var(--t-hero); }
  .cta-final__title { font-size: 32px; }
  .service-block__num { font-size: 110px; }

  .nav__burger { display: inline-flex; }
  /* Drawer mobile : overlay plein ecran (inset:0 0 0 auto), fond OPAQUE near-black,
     au-dessus du scrim. .nav ne creant plus de containing-block (flou sur ::before),
     ce position:fixed est bien relatif au viewport -> hauteur reelle, tous les liens visibles. */
  .nav__links {
    position: fixed; inset: 0 0 0 auto; z-index: 120; width: min(84vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-16);
    padding: calc(var(--nav-h) + var(--s-32)) var(--s-24) var(--s-32);
    background: var(--c-surface); border-left: 1px solid var(--c-border-strong);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.55); transform: translateX(100%);
    transition: transform var(--dur-normal) var(--ease-out-fast); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links .nav__link { font-size: var(--t-caption); padding-block: var(--s-12); }
  .nav__links .btn { margin-top: var(--s-8); width: 100%; justify-content: center; }
  body.nav-open .nav__links { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  /* Bouton de fermeture (croix) injecte par JS en haut du drawer */
  .nav__close {
    position: absolute; top: var(--s-12); right: var(--s-12); width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink);
  }
  .nav__close svg { stroke: currentColor; }
  /* scrim < 100 : le drawer vit DANS .nav (z-index:100) ; un scrim >= 100 le masquerait. */
  .nav-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity var(--dur-normal) ease, visibility var(--dur-normal) ease; }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
}

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

/* ============================================================================
   19. REFONTE v2 — IDENTITÉ + MOTION LAYER  (@max-dev, d'après sara-v2-direction.md)
   Tout ce bloc ÉTEND le thème dark+rouge — aucune valeur existante écrasée.
   ========================================================================== */

/* --- 19.1 Classe utilitaire display (stats / CTA final si besoin) --- */
.t-display {
  font-family: var(--font-display); font-size: var(--t-display); font-weight: 800;
  line-height: 1.0; letter-spacing: -0.025em; font-feature-settings: "ss01" 1, "liga" 1;
}

/* --- 19.2 Hero : label "eyebrow" décalé (trait accent avant le label) --- */
.hero .label { display: inline-flex; align-items: center; gap: 10px; }
.hero .label::before {
  content: ""; display: inline-block; width: 24px; height: 1px; flex-shrink: 0;
  background: var(--c-accent); box-shadow: var(--glow-accent);
}

/* --- 19.3 Grille éditoriale "tatami" (section 4 piliers, index, desktop large) --- */
@media (min-width: 1100px) {
  .pillars--tatami {
    grid-template-columns: 1.35fr 0.65fr;
    grid-template-rows: auto auto;
  }
  .pillars--tatami .pillar:nth-child(1) { grid-row: 1 / 3; }      /* carte 1 : haute à gauche */
  .pillars--tatami .pillar:nth-child(2) { grid-row: 1; }
  .pillars--tatami .pillar:nth-child(3) { grid-row: 2; }
  .pillars--tatami .pillar:nth-child(4) { grid-column: 1 / 3; } /* carte 4 : bandeau pleine largeur
       (contenu en flux normal — le grand numéro contour à droite équilibre la largeur) */
}

/* --- 19.4 Fondateurs : cartes alignées (même hauteur) --- */
@media (min-width: 901px) {
  .founders { align-items: stretch; }
}

/* --- 19.5 Sections plus marquantes --- */
.section--ink { box-shadow: inset 0 -120px 200px rgba(220, 38, 38, 0.04); } /* halo ambiant bas */
.section--ink::after {                                                     /* 2e hairline dégradé bas */
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.3), transparent);
}
.pillar:hover .pillar__num { filter: drop-shadow(0 0 12px rgba(220, 38, 38, 0.50)); }
.service-block__num { transform: rotate(-4deg); transform-origin: left top; } /* inclinaison éditoriale */

/* --- 19.6 Cinematic H1 line reveal (Motion B) --- */
/* L'état "masqué" est gardé derrière html.js : sans JS, le titre reste visible (anti écran vide). */
.reveal-lines .line-outer {
  display: block; overflow: hidden; line-height: 1.12;
  padding-bottom: 0.08em; margin-bottom: -0.08em;   /* garde les jambages (p, y, g) du clipping */
}
.reveal-lines .line-inner { display: block; }
html.js .reveal-lines .line-inner {
  transform: translateY(108%); opacity: 0; will-change: transform, opacity;
}
html.js .reveal-lines.lines-in .line-inner {
  animation: lineReveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.js .reveal-lines.lines-in .line-outer:nth-child(1) .line-inner { animation-delay: 0ms; }
html.js .reveal-lines.lines-in .line-outer:nth-child(2) .line-inner { animation-delay: 100ms; }
html.js .reveal-lines.lines-in .line-outer:nth-child(3) .line-inner { animation-delay: 200ms; }
html.js .reveal-lines.lines-in .line-outer:nth-child(4) .line-inner { animation-delay: 300ms; }
@keyframes lineReveal {
  from { transform: translateY(108%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
/* Mobile (<=767px) : le masque overflow:hidden clippe horizontalement les phrases longues
   aux tailles réduites. On le neutralise -> wrapping naturel visible + reveal en fondu simple
   (pas de translateY qui chevaucherait). Effet masqué réservé au desktop où les lignes tiennent. */
@media (max-width: 767px) {
  .reveal-lines .line-outer { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  html.js .reveal-lines .line-inner { transform: none; opacity: 0; }
  html.js .reveal-lines.lines-in .line-inner { animation: lineRevealFade 600ms ease both; }
  html.js .reveal-lines.lines-in .line-outer:nth-child(1) .line-inner { animation-delay: 0ms; }
  html.js .reveal-lines.lines-in .line-outer:nth-child(2) .line-inner { animation-delay: 90ms; }
  html.js .reveal-lines.lines-in .line-outer:nth-child(3) .line-inner { animation-delay: 180ms; }
}
@keyframes lineRevealFade { from { opacity: 0; } to { opacity: 1; } }

/* Flash aberration chromatique one-shot (classe ajoutée/retirée par JS) */
.reveal-lines.chroma-flash { animation: chromaFlash 320ms ease both; }
@keyframes chromaFlash {
  0%   { text-shadow: 0 2px 40px rgba(5, 6, 10, 0.6); }
  20%  { text-shadow: 2px 0 rgba(220, 38, 38, 0.5), -2px 0 rgba(100, 200, 255, 0.2); }
  80%  { text-shadow: 1px 0 rgba(220, 38, 38, 0.25), -1px 0 rgba(100, 200, 255, 0.1); }
  100% { text-shadow: 0 2px 40px rgba(5, 6, 10, 0.6); }
}

/* --- 19.7 Curseur magnétique custom (desktop pointeur fin uniquement) ---
   Deux elements concentriques :
   - .cursor-dot : POINT central, suit la souris en 1:1 (zero lag, pose directement
     dans le handler mousemove, hors rAF) -> pointeur precis et reactif.
   - .cursor : ANNEAU/halo secondaire, suit en LERP leger (traînee subtile, rAF) +
     grossissement au survol des cibles + pull magnetique. C'est l'effet "elegance".
   Quand la souris est immobile, l'anneau rattrape le point -> un seul curseur unifie. */
.cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  width: 28px; height: 28px; border-radius: 50%; /* consensus @sara : lit concentrique autour du dot 5px */
  border: 1.5px solid rgba(250, 250, 250, 0.50); background: transparent;
  transform: translate(-50%, -50%); will-change: transform;
  opacity: 0; /* invisible tant que le mode custom n'est pas arme (1er mousemove de la page) */
  transition: width 180ms var(--ease-out-fast), height 180ms var(--ease-out-fast),
              background 180ms ease, border-color 180ms ease, opacity 200ms ease;
}
.cursor.is-hover { width: 48px; height: 48px; background: rgba(220, 38, 38, 0.10); border-color: var(--c-accent-text); }
.cursor.is-active { transform: translate(-50%, -50%) scale(0.85); }
/* POINT central (dual-layer @sara-uxui) : petit rond plein blanc semi-transparent,
   taille FIXE (ne grossit pas au hover), z-index au-dessus de l'anneau. Suivi 1:1. */
.cursor-dot {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(250, 250, 250, 0.85); will-change: transform;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms ease;
}
/* Le mode custom (natif masque + custom visible) n'est arme qu'au 1er mousemove de la
   page (classe has-cursor posee par JS, listener one-shot). Avant ca -> natif visible.
   Evite le "trou" apres une navigation cross-document (View Transitions) : la souris est
   immobile sur la nouvelle page, le natif reste jusqu'au 1er mouvement, puis le custom
   prend le relais sans saut. La garde opacity empeche le custom d'apparaitre au centre
   tant que has-cursor n'est pas pose (et evite tout double-curseur natif+custom). */
body.has-cursor { cursor: none; }
body.has-cursor a, body.has-cursor button, body.has-cursor .pillar, body.has-cursor .founder { cursor: none; }
/* .inference canvas porte cursor:pointer (specificite 0,1,1) -> echappe au cursor:none
   herite du body et reafficherait le natif SOUS le custom. On le force a none. */
body.has-cursor .inference canvas { cursor: none; }
body.has-cursor .cursor, body.has-cursor .cursor-dot { opacity: 1; }
/* Champs texte : le I-beam NATIF est utile -> on le reaffiche ET on masque le custom
   (dot + anneau) pour ne JAMAIS avoir deux curseurs en meme temps. */
body.has-cursor input, body.has-cursor textarea, body.has-cursor select, body.has-cursor [contenteditable="true"] { cursor: auto; }
body.cursor-text .cursor, body.cursor-text .cursor-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* --- 19.8 Button spotlight (torche rouge/blanche qui suit le curseur dans le bouton) --- */
.btn--primary, .btn--secondary { position: relative; overflow: hidden; }
.btn--primary > *, .btn--secondary > * { position: relative; z-index: 1; } /* libellé au-dessus du spot */
.btn--primary::before, .btn--secondary::before {
  content: ""; position: absolute; left: 0; top: 0; width: 80px; height: 80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
  transform: translate(calc(var(--mx, 50%) - 40px), calc(var(--my, 50%) - 40px));
  pointer-events: none; opacity: 0; transition: opacity 200ms ease; z-index: 0;
}
.btn--primary:hover::before, .btn--secondary:hover::before { opacity: 1; }

/* --- 19.9 Scroll progress hairline --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200; height: 2px; width: 100%;
  background: var(--c-accent); box-shadow: var(--glow-sm);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* --- 19.10 View Transitions — rideau rouge (cross-document MPA) --- */
/* Neutralise le crossfade racine par défaut : le rideau rouge (.vt-curtain) est la SEULE
   transition visible -> pas de snapshot root qui occulterait le rideau (advisor / Sara §A). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
.vt-curtain {
  position: fixed; inset: 0; z-index: 9999; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  box-shadow: 0 0 80px rgba(220, 38, 38, 0.5);
}

/* --- 19.11 Lenis smooth scroll — CSS recommandée (annule le smooth natif concurrent) --- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }   /* override de html{scroll-behavior:smooth} */
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --- 19.13a Coupe diagonale entre sections (max 2/page — sur-usage = vulgaire) ---
   Une fine bande inclinée reprend le fond de la section pour glisser depuis la précédente.
   À poser sur une .section--surface qui suit une .section--bg. */
.section--diagonal-top { margin-top: 24px; }            /* compense le décalage du pseudo */
.section--diagonal-top::after {
  content: ""; position: absolute; inset: -24px 0 auto 0; height: 48px; z-index: 0;
  background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none;
}
.section--diagonal-top > .container { position: relative; z-index: 1; } /* contenu au-dessus du biseau */

/* --- 19.13b Sticky storytelling — service-visual (services.html, desktop large) ---
   L'image colle pendant que le texte défile. align-items:start requis pour le sticky. */
@media (min-width: 1100px) {
  .service-grid { align-items: start; }
  .service-grid .service-visual {
    position: sticky; top: calc(var(--nav-h) + 80px); /* sous nav + anchor-nav */
  }
}

/* --- 19.12 prefers-reduced-motion : neutralise les nouveaux effets v2 --- */
@media (prefers-reduced-motion: reduce) {
  :focus-visible { animation: none; }
  html.js .reveal-lines .line-inner { transform: none !important; opacity: 1 !important; animation: none !important; }
  .reveal-lines.chroma-flash { animation: none; }
  .cursor, .cursor-dot, .scroll-progress, .vt-curtain { display: none !important; }
  .service-block__num { transform: rotate(-4deg); } /* statique conservé, pas d'anim */
}

/* ============================================================================
   20. LOT 3 — FEATURES TECH  (@max-dev d'après sara-v2-direction.md §3)
   ========================================================================== */

/* --- 20.1 Timeline scroll-driven des 4 piliers (index.html) --- */
.pillar-timeline { position: relative; }
.pt-progress {
  position: relative; height: 2px; background: var(--c-border); border-radius: 2px;
  margin-bottom: var(--s-48); overflow: hidden;
}
.pt-progress__bar {
  position: absolute; inset: 0; background: var(--c-accent); box-shadow: var(--glow-sm);
  transform: scaleX(0); transform-origin: left;
}
.pt-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-24); }
.pt-card {
  transition: opacity var(--dur-normal) var(--ease-out-fast), transform var(--dur-normal) var(--ease-out-fast),
              box-shadow var(--dur-normal) ease, border-color var(--dur-normal) ease;
}
/* Desktop : section longue + sticky qui maintient la scene pendant le scroll-driving */
@media (min-width: 768px) {
  .pillar-timeline { min-height: 300vh; padding-block: 0; }
  .pillar-timeline__sticky {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; align-items: center; padding-block: var(--s-64);
  }
  .pillar-timeline .pt-card { opacity: 0.32; }
  .pillar-timeline .pt-card.is-active {
    opacity: 1; transform: translateY(-6px);
    border-left: 3px solid var(--c-accent); padding-left: calc(var(--s-32) - 2px);
    box-shadow: var(--glow-soft);
  }
}
/* Tablette 768-900px : 2 colonnes (evite 4 cartes compressees) — fix QA.
   Placee AVANT la regle 767px pour que le 1fr mobile gagne au cascade. */
@media (max-width: 900px) { .pt-cards { grid-template-columns: repeat(2, 1fr); } }

/* Mobile : pas de sticky, simple empilement (fallback) */
@media (max-width: 767px) {
  .pillar-timeline__sticky { position: static; min-height: 0; }
  .pt-cards { grid-template-columns: 1fr; }
  .pillar-timeline .pt-card { opacity: 1 !important; transform: none !important; }
  .pt-progress { display: none; }
}
/* reduced-motion : aucune logique de scroll, tout visible */
@media (prefers-reduced-motion: reduce) {
  .pillar-timeline { min-height: 0 !important; }
  .pillar-timeline__sticky { position: static !important; min-height: 0 !important; }
  .pillar-timeline .pt-card { opacity: 1 !important; transform: none !important; }
  .pt-progress { display: none; }
}

/* --- 20.2 Terminal IA stylisé (contact.html) — simulation typewriter --- */
.terminal {
  max-width: 760px; margin-inline: auto; background: #05060A;
  border: 1px solid var(--c-border); border-radius: var(--r-card);
  font-family: "Courier New", ui-monospace, "SFMono-Regular", monospace;
  overflow: hidden; box-shadow: var(--glow-soft);
}
.terminal__bar {
  display: flex; align-items: center; gap: var(--s-8);
  padding: 10px var(--s-16); background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.terminal__dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.terminal__dot--a { background: var(--c-accent); }                 /* point de marque (rouge) */
.terminal__dot--m { background: var(--c-ink-faint); border: 1px solid var(--c-border-strong); }
.terminal__title { margin-left: var(--s-8); font-size: var(--t-caption); color: var(--c-ink-soft); letter-spacing: 0.02em; }
.terminal__body { padding: var(--s-24); min-height: 168px; font-size: 14px; line-height: 1.95; }
.terminal__line { white-space: pre-wrap; word-break: break-word; }
.terminal__prompt { color: var(--c-accent-text); }                 /* le "> " */
.terminal__txt { color: var(--c-ink-soft); }
.terminal__cursor { color: var(--c-accent-text); font-weight: 700; animation: termBlink 1.06s steps(1) infinite; }
@keyframes termBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .terminal__cursor { animation: none; } }

/* --- 20.3 Live Inference (services.html) — hero 2 colonnes + canvas 2D --- */
.hero-inference { display: block; }
.inference-hint { margin-top: var(--s-24); font-size: var(--t-caption); color: var(--c-ink-soft); }
.inference-hint::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; vertical-align: middle;
  border: 1.5px solid var(--c-accent); border-radius: 2px; box-shadow: var(--glow-sm);
}
.inference {
  position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 300px;
  /* panneau delimite : detache le widget interactif du reseau global en fond + contraste */
  border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden;
  /* v8.1 : panneau bien plus opaque + flou d'arriere-plan -> masque le reseau global derriere,
     le mini-reseau des 4 piliers ressort net (avant : 0.45 -> le fond transparaissait et noyait le widget) */
  background: rgba(5, 6, 10, 0.86); box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color var(--dur-normal) ease;
}
.inference:hover { border-color: var(--c-border-strong); }
.inference canvas { width: 100%; height: 100%; display: block; cursor: pointer; }

/* Desktop large : 2 colonnes (texte | canvas) */
@media (min-width: 901px) {
  .hero--inference { min-height: 74vh; }
  .hero-inference { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-48); align-items: center; }
}
/* Mobile / tablette : pas de canvas (le JS ne s'initialise pas non plus < 901px) */
@media (max-width: 900px) {
  .inference { display: none; }
}