/* Généré par outils/charte.py depuis brand/logicloop : ne pas éditer à la main. */
@font-face{font-family:"Figtree";src:url(../fonts/figtree-variable.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/jetbrainsmono-variable.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
:root{--font-sans:Figtree, ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:40px;--space-3xl:48px;--space-4xl:64px;--space-5xl:96px;--space-section:128px;--radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--control-sm:28px;--control-md:40px;--control-lg:48px;--control-xl:56px;--duration-instant:120ms;--duration-fast:180ms;--duration-base:240ms;--duration-slow:400ms;--ease-out:cubic-bezier(0.2, 0, 0, 1);--ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);--type-display-2xl:700 148px/0.94 var(--font-sans);--type-display-2xl-ls:-0.055em;--type-display-xl:700 92px/0.94 var(--font-sans);--type-display-xl-ls:-0.055em;--type-display-lg:700 78px/0.98 var(--font-sans);--type-display-lg-ls:-0.055em;--type-display-md:700 44px/1 var(--font-sans);--type-display-md-ls:-0.05em;--type-stat:600 40px/1 var(--font-sans);--type-stat-ls:-0.045em;--type-heading-lg:600 30px/1.15 var(--font-sans);--type-heading-lg-ls:-0.025em;--type-heading-md:600 24px/1.2 var(--font-sans);--type-heading-md-ls:-0.02em;--type-heading-sm:600 20px/1.25 var(--font-sans);--type-heading-sm-ls:-0.015em;--type-title:600 15px/1.3 var(--font-sans);--type-title-ls:0;--type-body-lg:400 18px/1.5 var(--font-sans);--type-body-lg-ls:0;--type-body-md:400 17px/1.55 var(--font-sans);--type-body-md-ls:0;--type-body-sm:400 15px/1.5 var(--font-sans);--type-body-sm-ls:0;--type-caption:400 13px/1.4 var(--font-sans);--type-caption-ls:0;--type-button-lg:600 16px/1 var(--font-sans);--type-button-lg-ls:0;--type-button-md:600 14px/1 var(--font-sans);--type-button-md-ls:0;--type-mono-label:400 12px/20px var(--font-mono);--type-mono-label-ls:0.02em;--type-mono-caption:400 11px/1.5 var(--font-mono);--type-mono-caption-ls:0;--type-mono-code:400 13px/1.6 var(--font-mono);--type-mono-code-ls:0}
:root,[data-theme="dark"]{--edge-surface:inset 0 1px 0 rgba(255, 255, 255, 0.06);--edge-accent:inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.14);--well-inset:inset 0 1px 2px rgba(0, 0, 0, 0.6);--accent:#E9FF03;--on-accent:#14150A;--accent-text:#E9FF03;--keyword-bg:rgba(233, 255, 3, 0);--keyword-ink:#E9FF03;--bg:#101113;--surface:#15161A;--raised:#1B1D21;--raised-hover:#222428;--well:#0C0D0E;--watermark:#1A1C20;--ink:#F1F0EA;--on-ink:#15161A;--ink-muted:#A0A3AB;--ink-subtle:#8A8E97;--ink-faint:#6C7079;--line:rgba(255, 255, 255, 0.08);--line-strong:rgba(255, 255, 255, 0.10);--field-border:#6C7079;--focus-ring:#E9FF03;--scrim:rgba(12, 13, 14, 0.72);--texture-dot:rgba(255, 255, 255, 0.30);--bg-clear:rgba(16, 17, 19, 0);--logo-ink:#F7F6F2;--logo-loop:#E9FF03;--night:#0C0D0E;--night-line:rgba(255, 255, 255, 0.08);--night-ink:#F1F0EA;--night-muted:#8A8E97;--success:#3DD6B0;--warning:#FFB224;--danger:#FF7A66;--info:#7CB7FF;--chart-1:#E9FF03;--chart-2:#F1F0EA;--chart-3:#7CB7FF;--chart-4:#B9A6FF;--chart-5:#6C7079}
[data-theme="light"]{--edge-surface:none;--edge-accent:inset 0 -1px 0 rgba(0, 0, 0, 0.14);--well-inset:inset 0 1px 2px rgba(21, 22, 26, 0.06);--accent:#E9FF03;--on-accent:#14150A;--accent-text:#15161A;--keyword-bg:#E9FF03;--keyword-ink:#14150A;--bg:#F1F0EA;--surface:#F7F6F2;--raised:#E5E3DA;--raised-hover:#DCD9CE;--well:#FFFFFF;--watermark:#E5E3DA;--ink:#15161A;--on-ink:#F1F0EA;--ink-muted:#3A3C42;--ink-subtle:#5A5D65;--ink-faint:#A0A3AB;--line:#D2D0C7;--line-strong:#C9C8C2;--field-border:#6C7079;--focus-ring:#15161A;--scrim:rgba(12, 13, 14, 0.72);--texture-dot:rgba(21, 22, 26, 0.22);--bg-clear:rgba(241, 240, 234, 0);--logo-ink:#101113;--logo-loop:#E9FF03;--night:#0C0D0E;--night-line:rgba(255, 255, 255, 0.08);--night-ink:#F1F0EA;--night-muted:#8A8E97;--success:#0A6B5B;--warning:#8A5200;--danger:#B3301B;--info:#1D56B0;--chart-1:#15161A;--chart-2:#1D56B0;--chart-3:#5B3FC4;--chart-4:#0A6B5B;--chart-5:#A0A3AB}
/* Logicloop Studio — composants en HTML et CSS, sans script.
   Couleurs, espacements, rayons, arêtes et durées viennent des tokens (tokens.css).
   Un bloc suit le thème de l'ancêtre qui porte data-theme="dark" ou data-theme="light". */

body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* --- Scène d'aperçu ----------------------------------------------------- */
.lls-stage { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: var(--bg); color: var(--ink); }
.lls-stage--col { flex-direction: column; align-items: stretch; }
.lls-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lls-split > * { min-width: 0; }

/* --- Pictos (Phosphor : bold jusqu'à 16 px, regular au-delà) ------------- */
.lls-icon { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* --- Boutons de page ------------------------------------------------------ */
.lls-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; height: var(--control-lg); padding: 0 20px 0 22px; border: 1px solid transparent; border-radius: var(--radius-md); font: 600 16px/1 var(--font-sans); color: var(--ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-instant) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.lls-btn:active { transform: scale(0.97); }
.lls-btn:focus-visible, .lls-pill:focus-visible, .lls-link:focus-visible, .lls-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lls-btn[disabled], .lls-btn[aria-disabled="true"], .lls-pill[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
.lls-btn--primary { padding: 0 8px 0 22px; background-color: var(--accent); color: var(--on-accent); box-shadow: var(--edge-accent); }
.lls-btn--primary:hover { background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)); }
.lls-btn__action { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--on-accent); color: var(--accent); }
.lls-btn--secondary { background-color: var(--raised); border-color: var(--line-strong); box-shadow: var(--edge-surface); font-weight: 500; }
.lls-btn--secondary:hover { background-color: var(--raised-hover); }
.lls-btn--secondary .lls-icon { color: var(--ink-muted); }
.lls-btn--xl { height: var(--control-xl); }
.lls-btn--xl .lls-btn__action { width: 40px; height: 40px; }
.lls-btn--sm { height: var(--control-md); padding: 0 14px 0 16px; gap: 8px; font-size: 15px; }
.lls-btn--sm .lls-icon { color: var(--accent-text); }
.lls-btn--block { display: flex; width: 100%; }

/* --- Boutons de module (pilules) ----------------------------------------- */
.lls-pill { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-md); padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-full); font: 600 14px/1 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-instant) var(--ease-out), transform var(--duration-instant) var(--ease-out); }
.lls-pill:active { transform: scale(0.97); }
.lls-pill--accent { background-color: var(--accent); color: var(--on-accent); box-shadow: var(--edge-accent); }
.lls-pill--accent:hover { background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)); }
.lls-pill--inverse { background-color: var(--ink); color: var(--on-ink); }
.lls-pill--quiet { background-color: var(--raised); border-color: var(--line-strong); box-shadow: var(--edge-surface); color: var(--ink); font-weight: 500; }
.lls-pill--quiet:hover { background-color: var(--raised-hover); }
.lls-pill--lg { justify-content: space-between; height: var(--control-lg); padding: 0 6px 0 22px; font-size: 15px; }
.lls-pill--lg.lls-pill--quiet { padding: 0 20px 0 22px; }
.lls-pill--lg.lls-pill--quiet .lls-icon { color: var(--ink-muted); }
.lls-pill--block { display: flex; width: 100%; }
.lls-pill__disc { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }

/* --- Lien fléché ----------------------------------------------------------- */
.lls-link { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-sans); color: var(--ink); text-decoration: none; }
.lls-link .lls-icon { color: var(--accent-text); transition: transform var(--duration-instant) var(--ease-out); }
.lls-link:hover .lls-icon { transform: translate(2px, -2px); }

/* --- Libellé indexé --------------------------------------------------------- */
.lls-eyebrow { display: flex; gap: 10px; font: 400 12px/20px var(--font-mono); letter-spacing: 0.02em; color: var(--ink-subtle); }
.lls-eyebrow__index { flex: none; white-space: nowrap; color: var(--accent-text); }
/* sur sombre, le libellé passe en ink ; sur clair il reste en ink-subtle */
[data-theme="dark"] .lls-eyebrow { color: var(--ink); }
[data-theme="light"] .lls-eyebrow { color: var(--ink-subtle); }
/* index en pastille : la marque d'accent d'une page de lecture (partie courante, étape en cours) */
.lls-index { flex: none; display: inline-block; padding: 0 6px; border-radius: var(--radius-xs); background: var(--accent); box-shadow: var(--edge-accent); font: 400 12px/20px var(--font-mono); letter-spacing: 0.02em; white-space: nowrap; color: var(--on-accent); }
.lls-mono { font: 400 12px/20px var(--font-mono); letter-spacing: 0.02em; color: var(--ink-subtle); }

/* --- Mot clé : aplat, ou texte en accent sur sombre ---------------------- */
.lls-highlight, .lls-keyword { border-radius: var(--radius-md); padding: 0 0.16em 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lls-highlight { background: var(--accent); color: var(--on-accent); box-shadow: var(--edge-accent); }
.lls-keyword { background: var(--keyword-bg); color: var(--keyword-ink); }
/* en début de ligne, le texte du mot clé reste aligné sur la marge */
.lls-highlight--flush, .lls-keyword--flush { margin-left: -0.16em; }
.lls-highlight--sm, .lls-keyword--sm { border-radius: var(--radius-sm); }
.lls-highlight--xs, .lls-keyword--xs { border-radius: var(--radius-xs); }

/* --- Pastilles d'état et étiquettes --------------------------------------- */
.lls-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: var(--control-sm); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); font: 400 12px/1 var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.lls-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.lls-chip--live { background: var(--night); border-color: var(--night-line); color: var(--accent); }
.lls-chip--live::before { background: var(--accent); }
.lls-chip--success { color: var(--success); }
.lls-chip--warning { color: var(--warning); }
.lls-chip--danger { color: var(--danger); }
.lls-chip--info { color: var(--info); }
.lls-chip--success::before, .lls-chip--warning::before, .lls-chip--danger::before, .lls-chip--info::before { background: currentColor; }
.lls-tag { box-sizing: border-box; display: inline-flex; align-items: center; height: var(--control-sm); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--raised); box-shadow: var(--edge-surface); font: 400 12px/1 var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.lls-tag--accent { border-color: transparent; background: var(--accent); box-shadow: var(--edge-accent); color: var(--on-accent); }
.lls-status { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.lls-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.lls-status--live { color: var(--ink); }
.lls-status--live::before { background: var(--accent-text); }
.lls-status--success::before { background: var(--success); }
.lls-status--warning::before { background: var(--warning); }
.lls-status--danger::before { background: var(--danger); }

/* --- Champs ------------------------------------------------------------------ */
.lls-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lls-field__label { font: 400 13px/1.4 var(--font-sans); color: var(--ink-muted); }
.lls-field__error { font: 400 13px/1.4 var(--font-sans); color: var(--danger); }
.lls-input { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: var(--control-lg); padding: 0 10px 0 14px; border: 1px solid var(--field-border); border-radius: var(--radius-md); background: var(--well); box-shadow: var(--well-inset); transition: border-color var(--duration-instant) var(--ease-out); }
.lls-input input, .lls-input textarea, .lls-input select { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/1.5 var(--font-sans); }
.lls-input textarea { height: auto; padding: 12px 0; resize: vertical; }
.lls-input input::placeholder, .lls-input textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.lls-input:focus-within, .lls-input--focus { border-color: var(--focus-ring); box-shadow: var(--well-inset), 0 0 0 1px var(--focus-ring); }
.lls-input--error { border-color: var(--danger); }
.lls-keycap { box-sizing: border-box; display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--raised); box-shadow: var(--edge-surface); font: 400 11px/1 var(--font-mono); color: var(--ink-muted); }
.lls-check { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1.5 var(--font-sans); color: var(--ink); cursor: pointer; }
.lls-check input { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex: none; width: 20px; height: 20px; margin: 0; border: 1px solid var(--field-border); border-radius: var(--radius-xs); background: var(--well); cursor: pointer; }
.lls-check input[type="radio"] { border-radius: 50%; }
.lls-check input:checked { border-color: var(--accent-text); background: var(--accent) center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2314150A'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); }
.lls-check input[type="radio"]:checked { background: var(--accent); box-shadow: inset 0 0 0 5px var(--accent), inset 0 0 0 10px var(--on-accent); }
.lls-check input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* --- Cartes et cadres ---------------------------------------------------------- */
.lls-card { box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-xl); background: var(--surface); box-shadow: var(--edge-surface); color: var(--ink); }
.lls-card--plain { border-color: transparent; background: var(--bg); }
.lls-frame { position: relative; box-sizing: border-box; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg); color: var(--ink); }
.lls-fade { background: radial-gradient(ellipse 85% 95% at 100% 100%, var(--bg-clear) 0%, var(--bg-clear) 18%, var(--bg) 78%), radial-gradient(circle at 1.5px 1.5px, var(--texture-dot) 1.1px, transparent 1.8px) 0 0 / 24px 24px, var(--bg); }
.lls-mark { position: absolute; width: 11px; height: 11px; background: linear-gradient(var(--ink-faint), var(--ink-faint)) center / 1px 100% no-repeat, linear-gradient(var(--ink-faint), var(--ink-faint)) center / 100% 1px no-repeat; }
.lls-mark--tl { left: 16px; top: 16px; }
.lls-mark--tr { right: 16px; top: 16px; }
.lls-mark--bl { left: 16px; bottom: 16px; }
.lls-mark--br { right: 16px; bottom: 16px; }
.lls-watermark { position: absolute; right: -9%; bottom: -11%; width: 62%; height: auto; fill: var(--watermark); pointer-events: none; }

/* --- Logo en ligne ---------------------------------------------------------------- */
.lls-logo { display: block; flex: none; width: 98px; height: auto; }
.lls-logo__text { fill: var(--logo-ink); }
.lls-logo__loop { fill: var(--logo-loop); }

/* --- Navigation ----------------------------------------------------------------------- */
.lls-nav { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 76px; padding: 0 var(--space-2xl); border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.lls-nav__links { display: flex; gap: 36px; font: 400 15px/1 var(--font-sans); }
.lls-nav__links a { color: var(--ink-muted); text-decoration: none; transition: color var(--duration-instant) var(--ease-out); }
.lls-nav__links a:hover, .lls-nav__links a[aria-current="page"] { color: var(--ink); }
.lls-strip { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 44px; padding: 0 var(--space-3xl); border-bottom: 1px solid var(--line); background: var(--bg); font: 400 12px/1 var(--font-mono); color: var(--ink-subtle); }
.lls-footer { box-sizing: border-box; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-xl); padding: var(--space-4xl) var(--space-3xl) var(--space-xl); border-top: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.lls-footer__col { display: flex; flex-direction: column; gap: 10px; font: 400 15px/1.5 var(--font-sans); }
.lls-footer__col a { color: var(--ink-muted); text-decoration: none; }
.lls-footer__col a:hover { color: var(--ink); }
.lls-footer__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: var(--space-lg); border-top: 1px solid var(--line); font: 400 11px/1.5 var(--font-mono); color: var(--ink-subtle); }
.lls-tabs { display: inline-flex; gap: 4px; padding: var(--space-xxs); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--well); }
.lls-tab { height: 32px; padding: 0 16px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--ink-muted); font: 500 14px/1 var(--font-sans); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.lls-tab[aria-selected="true"] { background: var(--raised); box-shadow: var(--edge-surface); color: var(--ink); }
.lls-accordion { border-top: 1px solid var(--line); color: var(--ink); }
.lls-accordion:last-child { border-bottom: 1px solid var(--line); }
.lls-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) 0; font: 600 20px/1.25 var(--font-sans); letter-spacing: -0.015em; list-style: none; cursor: pointer; }
.lls-accordion summary::-webkit-details-marker { display: none; }
.lls-accordion summary .lls-icon { width: 20px; height: 20px; color: var(--ink-subtle); transition: transform var(--duration-base) var(--ease-out); }
.lls-accordion[open] summary .lls-icon { transform: rotate(45deg); color: var(--accent-text); }
.lls-accordion p { max-width: 680px; margin: 0; padding: 0 0 var(--space-lg); font: 400 17px/1.55 var(--font-sans); color: var(--ink-muted); }

/* --- Preuves, cas, témoignages ------------------------------------------------------- */
.lls-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.lls-stat { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 28px var(--space-2xl); border-right: 1px solid var(--line); }
.lls-stat:last-child { border-right: 0; }
.lls-stat__meta { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-subtle); }
.lls-stat__value { font: 600 40px/1 var(--font-sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lls-case { position: relative; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl); padding: var(--space-xl) 36px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--edge-surface); color: var(--ink); }
.lls-case__head { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-md); border-bottom: 1px solid var(--line); color: var(--ink-subtle); }
.lls-case__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lls-case__number { font: 700 74px/0.95 var(--font-sans); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-text); }
.lls-case__unit { border-radius: var(--radius-sm); padding: 2px 10px 4px; margin-left: -10px; background: var(--keyword-bg); font: 600 24px/1.2 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
.lls-case__text { max-width: 420px; margin: 0; font: 400 17px/1.5 var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.lls-quote { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); }
.lls-quote__text { margin: 0; font: 400 18px/1.5 var(--font-sans); text-wrap: pretty; }
.lls-person { display: flex; align-items: center; gap: 12px; }
.lls-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(1); background: var(--raised); font: 600 15px/1 var(--font-sans); color: var(--ink-muted); }
.lls-person__name { font: 600 15px/1.3 var(--font-sans); }
.lls-person__role { font: 400 12px/1.5 var(--font-mono); color: var(--ink-subtle); }
.lls-steps { display: flex; flex-direction: column; color: var(--ink); }
.lls-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-md); padding: 20px 0; border-top: 1px solid var(--line); }
.lls-step:last-child { border-bottom: 1px solid var(--line); }
.lls-step__index { font: 400 12px/25px var(--font-mono); white-space: nowrap; color: var(--accent-text); }
.lls-step__title { font: 600 20px/1.25 var(--font-sans); letter-spacing: -0.015em; }
.lls-step__text { margin: 6px 0 0; max-width: 560px; font: 400 15px/1.5 var(--font-sans); color: var(--ink-muted); }
.lls-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-3xl); color: var(--ink-muted); }
.lls-logos > * { height: 28px; display: flex; align-items: center; font: 600 20px/1 var(--font-sans); letter-spacing: -0.02em; }

/* --- Formules ---------------------------------------------------------------------------- */
.lls-plan { box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: 28px 30px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--edge-surface); color: var(--ink); }
.lls-plan--featured { border-color: transparent; background: var(--bg); }
.lls-plan__head { display: flex; flex-direction: column; gap: 12px; }
.lls-plan__meta { display: flex; align-items: center; justify-content: space-between; min-height: 28px; }
.lls-plan__name { font: 600 30px/1.15 var(--font-sans); letter-spacing: -0.025em; }
.lls-plan__price { font: 700 44px/1 var(--font-sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.lls-leaders { display: flex; flex-direction: column; gap: 13px; font: 400 15px/1.5 var(--font-sans); }
.lls-leader { display: flex; align-items: baseline; gap: 10px; }
.lls-leader__dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-4px); }
.lls-leader__value { font: 400 12px/1.5 var(--font-mono); color: var(--ink-subtle); }

/* --- Tableau ------------------------------------------------------------------------------ */
.lls-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.lls-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--font-sans); color: var(--ink); }
.lls-table th { height: 32px; padding: 0 14px; background: var(--bg); font: 400 11px/1.5 var(--font-mono); text-align: left; color: var(--ink-subtle); }
.lls-table td { height: 40px; padding: 0 14px; border-top: 1px solid var(--line); }
.lls-table .lls-num { text-align: right; font-variant-numeric: tabular-nums; }
.lls-table__index { font: 400 12px/1.4 var(--font-mono); color: var(--ink-subtle); }

/* --- Encadré, code, modale ----------------------------------------------------------------- */
.lls-callout { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: var(--space-md) 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--edge-surface); font: 400 15px/1.5 var(--font-sans); color: var(--ink); }
.lls-callout p { margin: 0; }
.lls-callout__label { display: flex; align-items: center; gap: 8px; font: 400 12px/20px var(--font-mono); letter-spacing: 0.02em; color: var(--ink-subtle); }
.lls-callout__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }
.lls-callout--warning .lls-callout__label { color: var(--warning); }
.lls-callout--warning .lls-callout__label::before { background: var(--warning); }
.lls-callout--info .lls-callout__label { color: var(--info); }
.lls-callout--info .lls-callout__label::before { background: var(--info); }
/* à retenir : le libellé devient une étiquette pleine en accent, une fois par page */
.lls-callout--key .lls-callout__label { align-self: flex-start; height: var(--control-sm); padding: 0 12px; border-radius: var(--radius-full); background: var(--accent); box-shadow: var(--edge-accent); line-height: 1; color: var(--on-accent); }
.lls-callout--key .lls-callout__label::before { content: none; }
.lls-code { box-sizing: border-box; overflow: hidden; border: 1px solid var(--night-line); border-radius: var(--radius-md); background: var(--night); color: var(--night-ink); }
.lls-code__lang { padding: 10px 20px; border-bottom: 1px solid var(--night-line); font: 400 11px/1.5 var(--font-mono); color: var(--night-muted); }
.lls-code pre { margin: 0; padding: var(--space-md) 20px; overflow-x: auto; font: 400 13px/1.6 var(--font-mono); }
.lls-code .k { color: var(--accent); }
.lls-code .c { color: var(--night-muted); }
.lls-scrim { box-sizing: border-box; display: grid; place-items: center; padding: var(--space-xl); background: var(--scrim); }
.lls-modal { position: relative; box-sizing: border-box; width: 100%; max-width: 720px; padding: var(--space-2xl); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--edge-surface); color: var(--ink); }
.lls-modal__close { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--raised); color: var(--ink-muted); cursor: pointer; }
.lls-modal__title { margin: 12px 0 0; font: 600 30px/1.15 var(--font-sans); letter-spacing: -0.025em; }
.lls-modal__text { max-width: 600px; margin: 16px 0 0; font: 400 17px/1.55 var(--font-sans); color: var(--ink-muted); }

/* --- Hero ------------------------------------------------------------------------------------ */
.lls-hero { container-type: inline-size; }
.lls-hero__body { position: relative; display: flex; align-items: flex-end; gap: var(--space-2xl); padding: 9cqw var(--space-3xl) 44px; }
.lls-hero__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; margin: 0; font: 700 clamp(40px, 9.25cqw, 148px)/0.94 var(--font-sans); letter-spacing: -0.055em; white-space: nowrap; }
.lls-hero__title .lls-highlight { margin-top: 0.08em; padding: 0.014em 0.135em 0.12em; margin-left: -0.135em; }
.lls-hero__side { flex: none; display: flex; flex-direction: column; gap: 22px; width: min(340px, 30cqw); }
.lls-hero__lede { margin: 0; font: 400 18px/1.5 var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.lls-hero__actions { display: flex; flex-direction: column; gap: 10px; }

/* --- Slides et visuels sociaux (tailles en fraction de la largeur) ------------------------- */
.lls-slide { position: relative; box-sizing: border-box; overflow: hidden; container-type: inline-size; aspect-ratio: 16 / 9; background: var(--bg); color: var(--ink); }
.lls-slide__inner { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 4.6cqw 5.6cqw; }
.lls-slide__row { position: relative; display: flex; align-items: center; justify-content: space-between; font: 400 1.25cqw/1.4 var(--font-mono); color: var(--ink-subtle); }
.lls-slide__row--foot { align-items: flex-end; }
.lls-slide__tag { display: inline-flex; align-items: center; gap: 0.8cqw; height: 3cqw; padding: 0 1.2cqw; border-radius: var(--radius-full); font: 400 1.25cqw/1 var(--font-mono); }
.lls-slide__tag--live { border: 1px solid var(--night-line); background: var(--night); color: var(--accent); }
.lls-slide__tag--live::before { content: ""; width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: var(--accent); }
.lls-slide__tag--accent { background: var(--accent); box-shadow: var(--edge-accent); color: var(--on-accent); }
.lls-slide__title { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0; font: 700 7.7cqw/0.98 var(--font-sans); letter-spacing: -0.055em; }
.lls-slide__title .lls-keyword { margin-top: 0.06em; margin-left: -0.16em; }
.lls-slide__heading { position: relative; margin: 0; font: 700 3.4cqw/1.05 var(--font-sans); letter-spacing: -0.04em; }
.lls-slide__content { position: relative; display: flex; flex-direction: column; gap: 1.4cqw; max-width: 62cqw; margin: 0; padding: 0; list-style: none; font: 400 1.6cqw/1.4 var(--font-sans); color: var(--ink-muted); }
.lls-slide__content li { display: flex; gap: 1.4cqw; }
.lls-slide__content li::before { content: attr(data-index); flex: none; white-space: nowrap; font: 400 1.25cqw/1.8 var(--font-mono); color: var(--ink-subtle); }
.lls-slide .lls-logo { width: 10.4cqw; }
.lls-post { position: relative; box-sizing: border-box; overflow: hidden; container-type: inline-size; aspect-ratio: 4 / 5; background: var(--bg); color: var(--ink); }
.lls-post__inner { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; padding: 6.7cqw 5.9cqw; }
.lls-post__head { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 3cqw; border-bottom: 1px solid var(--line); font: 400 2.2cqw/1.4 var(--font-mono); color: var(--ink-subtle); }
.lls-post__head b { font-weight: 400; color: var(--accent-text); }
.lls-post__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2.2cqw; }
.lls-post__number { font: 700 13.7cqw/0.95 var(--font-sans); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-text); }
.lls-post__unit { border-radius: 1.4cqw; padding: 0.3cqw 1.8cqw 0.7cqw; margin-left: -1.8cqw; background: var(--keyword-bg); font: 700 4.8cqw/1.2 var(--font-sans); letter-spacing: -0.035em; color: var(--ink); }
.lls-post__text { margin: 0; font: 400 3.1cqw/1.5 var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.lls-post__foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; font: 400 2cqw/1.4 var(--font-mono); color: var(--ink-subtle); }
.lls-post .lls-logo { width: 15.5cqw; }
/* variantes du visuel social : format carré, affirmation, citation, pages de carrousel */
.lls-post--square { aspect-ratio: 1; }
.lls-post__statement { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font: 700 10.2cqw/0.98 var(--font-sans); letter-spacing: -0.055em; }
.lls-post__statement .lls-keyword { margin-top: 0.06em; margin-left: -0.16em; }
.lls-post__heading { margin: 0; font: 700 6.9cqw/1.02 var(--font-sans); letter-spacing: -0.045em; text-wrap: balance; }
.lls-post__quote { margin: 0; font: 600 5.2cqw/1.18 var(--font-sans); letter-spacing: -0.03em; text-wrap: balance; }
.lls-post__person { display: flex; flex-direction: column; gap: 0.6cqw; }
.lls-post__name { font: 600 3.1cqw/1.3 var(--font-sans); }
.lls-post__role { font: 400 2.2cqw/1.4 var(--font-mono); color: var(--ink-subtle); }
.lls-post__list { display: flex; flex-direction: column; align-self: stretch; margin: 0; padding: 0; list-style: none; font: 400 3.1cqw/1.4 var(--font-sans); color: var(--ink-muted); }
.lls-post__list li { display: flex; gap: 2.6cqw; padding: 2.4cqw 0; border-top: 1px solid var(--line); }
.lls-post__list li:last-child { border-bottom: 1px solid var(--line); }
.lls-post__list li::before { content: attr(data-index); flex: none; white-space: nowrap; font: 400 2.2cqw/1.95 var(--font-mono); color: var(--accent-text); }
.lls-post__list b { font-weight: 600; color: var(--ink); }
.lls-post__link { display: inline-flex; align-items: center; gap: 1.2cqw; font: 400 2.8cqw/1.4 var(--font-mono); color: var(--ink); }
.lls-post__link .lls-icon { width: 3cqw; height: 3cqw; color: var(--accent-text); }

@media (prefers-reduced-motion: reduce) {
  .lls-btn, .lls-pill, .lls-tab, .lls-link .lls-icon, .lls-accordion summary .lls-icon { transition-duration: 0.01ms; }
}