/* sandflow.ai · pages du labo (Research, notes, About, llm-info, Legal ; Press, modèle, papier, etc. aux paliers suivants).
   Composition reprise de ltx.io (veille du 2 octobre 2026) dans la charte du site : Encre, Craie, gris, Inter.
   L'accueil garde sa feuille à lui (styles.css) : rien ici ne le touche. Aucune règle ne dépend d'un style en ligne (CSP). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #121117;
  --craie: #F7F6F3;
  --gris: #8E8B96;
  --texte: rgba(247, 246, 243, .82);
  --ligne: rgba(247, 246, 243, .12);
  --carte: rgba(247, 246, 243, .035);
  --carte2: rgba(247, 246, 243, .07);
  --fond2: #0d0c11;
  --w: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--encre); scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.lab {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--encre); color: var(--craie);
  font: 15px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Règles de base en :where() : spécificité nulle, toute classe les remplace. */
:where(.lab) main { flex: 1; }
:where(.lab) a { color: inherit; text-decoration: none; }
:where(.lab) img { display: block; max-width: 100%; height: auto; }
.lab a:focus-visible, .lab summary:focus-visible { outline: 2px solid var(--craie); outline-offset: 3px; border-radius: 2px; }
.wrap { width: min(var(--w), 100% - 32px); margin: 0 auto; }

/* Lien d'évitement : visible seulement au clavier. */
.skip { position: absolute; left: 16px; top: -48px; z-index: 30; padding: 8px 12px; background: var(--craie); color: var(--encre); border-radius: 4px; font-size: 13px; }
.skip:focus { top: 12px; }

/* ---------- En-tête : logo, menus déroulants, boutons (comme ltx.io) ---------- */
header.site { position: sticky; top: 0; z-index: 20; background: rgba(18, 17, 23, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ligne); }
.barre { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: inline-flex; align-items: center; min-height: 32px; }
.brand img { width: 118px; }
nav.menu { flex: 1; }
nav.menu > ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dd { position: relative; }
.dd summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px; font-size: 13px; color: var(--craie); opacity: .86; border-radius: 4px; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: ""; width: 6px; height: 6px; border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; }
.dd summary:hover, .dd details[open] summary { opacity: 1; background: var(--carte2); }
.dd .panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; margin: 0; padding: 8px; list-style: none; background: #1a1920; border: 1px solid var(--ligne); border-radius: 8px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.dd:last-child .panel { left: auto; right: 0; }
.panel a { display: block; padding: 8px 10px; border-radius: 4px; font-size: 13px; }
.panel a small { display: block; color: var(--gris); font-size: 12px; }
.panel a:hover { background: var(--carte2); }
.panel .sep { height: 1px; background: var(--ligne); margin: 6px 4px; }
.actions { display: flex; gap: 8px; }
.burger { display: none; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: 4px; font-size: 13px; font-weight: 500; border: 1px solid var(--craie); white-space: nowrap; }
.btn.plein { background: var(--craie); color: var(--encre); }
.btn.contour { color: var(--craie); border-color: rgba(247, 246, 243, .4); }
.btn.contour:hover { border-color: var(--craie); }
.btn.petit { min-height: 32px; padding: 0 12px; font-size: 12px; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.triplet { display: flex; flex-wrap: wrap; gap: 8px; }
.triplet .btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.btns .triplet { display: contents; }

/* ---------- Fil d'Ariane ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0 0 40px; padding: 0; list-style: none; font-size: 12.5px; color: var(--gris); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin-right: 4px; opacity: .7; }
.crumbs a { display: inline-block; padding: 4px 0; }
.crumbs a:hover { color: var(--craie); }
.crumbs [aria-current] { color: var(--craie); opacity: .8; }

/* ---------- Typographie ---------- */
.eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: 0 0 18px; }
:where(.lab) :is(h1, h2, h3) { font-weight: 300; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
:where(.lab) h1 { font-size: clamp(36px, 5.6vw, 68px); line-height: 1.04; }
:where(.lab) h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; }
:where(.lab) h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; font-weight: 400; }
/* Titre en escalier : une ligne par span, coupée à la main. */
h1.stair span, h2.stair span { display: block; }
.lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--texte); max-width: 640px; margin: 22px 0 30px; }
:where(.lab) p { margin: 0 0 12px; }
.dates { font-size: 13px; color: var(--gris); margin: 22px 0 0; }

/* ---------- Sections ---------- */
section.bloc { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--ligne); }
section.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.hero .btns, .hero .triplet { margin-top: 8px; }
.hero.centre { text-align: center; }
.hero.centre .lead { margin-left: auto; margin-right: auto; }
.hero.centre .btns { justify-content: center; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.split-titre h2 { font-size: clamp(24px, 2.6vw, 32px); }
.split-corps > p { color: var(--texte); max-width: 640px; }
.split-corps .lead { margin-top: 0; }
.bloc > .wrap > h2 { margin-bottom: 28px; }
.tete { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.these { font-size: clamp(21px, 2.5vw, 30px); line-height: 1.3; font-weight: 300; letter-spacing: -.02em; max-width: 980px; color: var(--craie); }
.sous { margin: 56px 0 18px; }

/* ---------- Rangées, piliers, cartes ---------- */
.rangs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ligne); }
.rang { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 170px 24px; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--ligne); align-items: baseline; }
.rang:hover { background: linear-gradient(90deg, transparent, var(--carte), transparent); }
.rang .t { font-size: 17px; letter-spacing: -.01em; }
.rang .d { color: rgba(247, 246, 243, .72); font-size: 14px; }
.rang .s { color: var(--gris); font-size: 12.5px; white-space: nowrap; }
.rang .f { color: var(--gris); text-align: right; }
.piliers { margin: 0; border-top: 1px solid var(--ligne); }
.pilier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.pilier dt { font-size: 17px; }
.pilier dd { margin: 0; color: rgba(247, 246, 243, .75); font-size: 14px; }
.pilier a, .split-corps p a, .prose a, .carte p a { text-decoration: underline; text-decoration-color: rgba(247, 246, 243, .4); text-underline-offset: 3px; }
.cartes { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.carte p { color: rgba(247, 246, 243, .78); font-size: 14px; margin: 0; }
.carte .pied { margin-top: auto; padding-top: 10px; }
.tag { display: inline-block; align-self: flex-start; margin: 0; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(247, 246, 243, .35); border-radius: 3px; color: var(--craie); }
.faits { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -8px 0 26px; font-size: 13px; color: var(--gris); }
.faits b { color: var(--craie); font-weight: 500; }
.phare { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; background: var(--carte); }
.phare .image { min-height: 280px; background: var(--fond2); display: grid; place-items: center; border-right: 1px solid var(--ligne); padding: 24px; text-align: center; font-size: 12.5px; color: var(--gris); }
.phare .texte { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }

/* Le bloc partagé du premier modèle (le pendant de « LTX-2.5 is here »). */
.encart { border: 1px solid var(--ligne); border-radius: 10px; background: var(--carte); padding: clamp(24px, 4vw, 40px); }
.encart .eyebrow { margin-bottom: 12px; }
.encart-t { font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 20px; }
.encart-t a { text-decoration: none; }
.encart > p:not(.eyebrow):not(.encart-t) { color: var(--texte); max-width: 640px; }
.premier + .suite { border-top: 0; padding-top: 0; }

/* ---------- Notes : la colonne de lecture ---------- */
.note-tete { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.prose { max-width: 720px; padding-bottom: clamp(48px, 6vw, 80px); }
.wrap.prose { width: min(720px, 100% - 32px); margin-left: max(16px, (100% - var(--w)) / 2); }
.prose > p, .prose li, .prose dd { font-size: 16px; line-height: 1.65; color: var(--texte); }
.prose > p.chapo { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--craie); }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 48px 0 14px; scroll-margin-top: 80px; }
.prose h3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin: 28px 0 8px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin: 0 0 8px; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--craie); }
.prose .formula { font-size: 14px; color: var(--craie); overflow-x: auto; white-space: nowrap; padding: 12px 0; }
.table { overflow-x: auto; margin: 4px 0 18px; }
.table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 520px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--ligne); }
.table th { font-weight: 500; color: var(--gris); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.table td { color: var(--texte); }
.glossary { margin: 24px 0; }
.glossary dt { font-size: 17px; font-weight: 500; margin: 26px 0 4px; scroll-margin-top: 80px; }
.glossary dd { margin: 0; }
.index { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 20px 0 8px; padding: 0; list-style: none; }
.index a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1px solid var(--ligne); border-radius: 14px; font-size: 13px; text-decoration: none; color: var(--texte); }
.index a:hover { border-color: rgba(247, 246, 243, .4); color: var(--craie); }
.prose pre, .bloc pre { background: var(--fond2); border: 1px solid var(--ligne); border-radius: 8px; padding: 18px; overflow-x: auto; font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; color: rgba(247, 246, 243, .85); }
.liens-suite { margin-top: 18px; color: var(--gris); font-size: 13px; }
.liens-suite a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */
details.q { border-bottom: 1px solid var(--ligne); }
details.q:first-child { border-top: 1px solid var(--ligne); }
details.q summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; color: var(--gris); }
details.q[open] summary::after { content: "−"; }
details.q div { padding: 0 0 18px; color: var(--texte); max-width: 760px; }
details.q a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Clôture ---------- */
.cloture { text-align: center; }
.cloture .btns { justify-content: center; margin-top: 28px; }

/* ---------- Pied de page en colonnes (comme ltx.io) ---------- */
footer.site { border-top: 1px solid var(--ligne); padding: 56px 0 calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; }
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.cols .marque p { margin: 14px 0 0; max-width: 280px; color: var(--gris); font-size: 13px; }
.cols .brand img { width: 132px; }
.foot-h { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.cols ul, .bas ul { margin: 0; padding: 0; list-style: none; }
.cols li a { display: inline-block; padding: 5px 0; color: rgba(247, 246, 243, .86); }
.cols li a:hover, .bas a:hover { color: var(--craie); }
.bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--ligne); font-size: 12.5px; color: var(--gris); }
.bas ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.bas a { display: inline-block; padding: 5px 0; }

/* ---------- Accueil du 2 novembre : le fond Shape Waves tenu dans l'ouverture ---------- */
.accueil { position: relative; overflow: hidden; min-height: min(82vh, 760px); display: grid; align-items: center; }
.accueil .wrap { position: relative; z-index: 1; }
.accueil .waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.accueil .waves canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1); }
.accueil .waves[data-ready="true"] canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .accueil .waves canvas { transition: none; } }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 900px) {
  .avec-burger nav.menu, .avec-burger .actions { display: none; }
  .avec-burger .burger { display: block; margin-left: auto; }
  .burger summary { list-style: none; cursor: pointer; font-size: 13px; min-height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 4px; }
  .burger summary::-webkit-details-marker { display: none; }
  .burger[open] .tiroir { position: absolute; left: 0; right: 0; top: 60px; max-height: calc(100vh - 60px); overflow-y: auto; background: #17161c; border-bottom: 1px solid var(--ligne); padding: 8px 16px 20px; }
  .tiroir ul { margin: 0; padding: 0; list-style: none; }
  .tiroir a { display: block; padding: 10px 0; border-bottom: 1px solid var(--ligne); font-size: 14px; }
  .tiroir .btns { margin-top: 16px; }
  .tiroir-h { margin: 16px 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
  .split, .phare, .c2, .c3, .c4 { grid-template-columns: minmax(0, 1fr); }
  .phare .image { border-right: 0; border-bottom: 1px solid var(--ligne); min-height: 200px; }
  .rang { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 16px; }
  .rang .d, .rang .s { grid-column: 1; }
  .rang .f { grid-row: 1; grid-column: 2; }
  .pilier { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols .marque { grid-column: 1 / -1; }
  .wrap.prose { margin-left: auto; }
}
@media (max-width: 720px) {
  .actions { display: none; }
  .barre { gap: 12px; }
  nav.menu { display: flex; justify-content: flex-end; }
  .dd summary { padding: 0 8px; }
}
/* Titres en escalier sur téléphone : chaque ligne voulue reste entière (jamais une ligne courte entre deux longues). */
@media (max-width: 480px) {
  :where(.lab) h1 { font-size: 7.4vw; }
  h1.stair span { white-space: nowrap; }
  .bas { flex-direction: column; }
}