/* ======================= POLICES EMBARQUÉES =======================
   Switzer, Gambarino et Geist Mono au format WOFF2, intégrées au fichier :
   la page garde son rendu exact sans accès au réseau et sans dépendance à un CDN.
   Switzer (texte courant) et Gambarino (titres) : Indian Type Foundry, distribuées
   par Fontshare sous la Free Font EULA, qui autorise l'usage commercial et
   l'intégration dans une page web. Geist Mono : Vercel, SIL Open Font License 1.1.
   ================================================================= */

@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/switzer-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/switzer-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/switzer-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/switzer-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gambarino';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/gambarino-400.woff2') format('woff2');
}
/* ================================================================
   AORA DESIGN SYSTEM
   ================================================================
   Dark-first. Gambarino + Switzer. Olive chartreuse accent.
   Square glass pixel motif for branding + UI accents.
   ================================================================ */


/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */

:root {

  /* ---- Color: Base ---- */
  --color-black:            #0A0A0A;
  --color-white:            #FAFAF9;

  /* ---- Color: Neutral (dark palette) ---- */
  --color-neutral-950:      #0A0A0A;
  --color-neutral-900:      #111111;
  --color-neutral-850:      #161616;
  --color-neutral-800:      #1C1C1C;
  --color-neutral-700:      #2A2A2A;
  --color-neutral-600:      #3D3D3D;
  --color-neutral-500:      #5C5C5C;
  --color-neutral-400:      #7A7A7A;
  --color-neutral-300:      #A0A0A0;
  --color-neutral-200:      #CFCFCF;
  --color-neutral-100:      #E8E8E8;
  --color-neutral-50:       #F4F4F3;

  /* ---- Color: Accent (olive chartreuse) ---- */
  --color-accent-950:       #171807;
  --color-accent-900:       #28290A;
  --color-accent-850:       #3A3B0C;
  --color-accent-800:       #4D4E0E;
  --color-accent-700:       #6B6D14;
  --color-accent-600:       #8A8C1E;
  --color-accent-500:       #A3A525;
  --color-accent-400:       #B5B832;
  --color-accent-300:       #CDD04A;
  --color-accent-200:       #E0E26E;
  --color-accent-100:       #F0F1A8;
  --color-accent-50:        #F9F9DC;

  /* ---- Color: Semantic ---- */
  --color-success:          #3ECF71;
  --color-warning:          #E5A832;
  --color-error:            #E5453E;
  --color-info:             #5B9AFF;

  /* ---- Color: Signal strength (for buy signals) ---- */
  --color-signal-hot:       #E5453E;
  --color-signal-warm:      var(--color-accent-400);
  --color-signal-cold:      var(--color-neutral-500);

  /* ---- Typography: Families ---- */
  --font-display:           'Gambarino', Georgia, 'Times New Roman', serif;
  --font-body:              'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:              'Geist Mono', 'SF Mono', 'Fira Code', monospace;

  /* ---- Typography: Scale ---- */
  --text-xs:                11px;
  --text-sm:                13px;
  --text-base:              14px;
  --text-md:                16px;
  --text-lg:                18px;
  --text-xl:                22px;
  --text-2xl:               28px;
  --text-3xl:               36px;
  --text-4xl:               48px;
  --text-5xl:               64px;

  /* ---- Typography: Line heights ---- */
  --leading-tight:          1.15;
  --leading-snug:           1.3;
  --leading-normal:         1.5;
  --leading-relaxed:        1.65;

  /* ---- Typography: Font weights ---- */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* ---- Typography: Letter spacing ---- */
  --tracking-tight:         -0.02em;
  --tracking-normal:        0;
  --tracking-wide:          0.04em;
  --tracking-wider:         0.08em;

  /* ---- Spacing ---- */
  --space-0:                0;
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                20px;
  --space-6:                24px;
  --space-8:                32px;
  --space-10:               40px;
  --space-12:               48px;
  --space-16:               64px;
  --space-20:               80px;
  --space-24:               96px;

  /* ---- Border radius ---- */
  --radius-sm:              4px;
  --radius-md:              6px;
  --radius-lg:              8px;
  --radius-xl:              12px;
  --radius-2xl:             16px;
  --radius-pill:            9999px;

  /* ---- Shadows (dark-friendly, subtle) ---- */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:              0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:              0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl:              0 16px 48px rgba(0, 0, 0, 0.4);

  /* ---- Glass effect ---- */
  --glass-bg:               rgba(255, 255, 255, 0.04);
  --glass-bg-hover:         rgba(255, 255, 255, 0.07);
  --glass-bg-active:        rgba(255, 255, 255, 0.10);
  --glass-border:           rgba(255, 255, 255, 0.08);
  --glass-border-hover:     rgba(255, 255, 255, 0.14);
  --glass-blur:             12px;

  /* ---- Accent glass (for square pixel motif) ---- */
  --glass-accent-bg:        rgba(181, 184, 50, 0.08);
  --glass-accent-border:    rgba(181, 184, 50, 0.15);
  --glass-accent-bg-hover:  rgba(181, 184, 50, 0.14);

  /* ---- Transitions ---- */
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:            cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:          120ms;
  --duration-normal:        200ms;
  --duration-slow:          350ms;

  /* ---- Z-index scale ---- */
  --z-base:                 0;
  --z-dropdown:             10;
  --z-sticky:               20;
  --z-overlay:              30;
  --z-modal:                40;
  --z-panel:                50;
  --z-toast:                60;

  /* ---- Layout ---- */
  --sidebar-width:          220px;
  --panel-width:            400px;
  --header-height:          52px;
  --filter-zone-height:     200px;
}


/* ================================================================
   2. DARK THEME (default)
   ================================================================ */

[data-theme="dark"], :root {
  --bg-app:                 var(--color-neutral-950);
  --bg-surface:             var(--color-neutral-900);
  --bg-surface-raised:      var(--color-neutral-850);
  --bg-surface-overlay:     var(--color-neutral-800);
  --bg-sidebar:             var(--color-black);
  --bg-input:               var(--color-neutral-850);
  --bg-hover:               var(--color-neutral-800);

  --border-default:         var(--color-neutral-800);
  --border-subtle:          var(--color-neutral-850);
  --border-strong:          var(--color-neutral-600);

  --text-primary:           var(--color-white);
  --text-secondary:         var(--color-neutral-300);
  --text-tertiary:          var(--color-neutral-400);
  --text-muted:             var(--color-neutral-500);
  --text-inverse:           var(--color-black);

  --accent:                 var(--color-accent-400);
  --accent-hover:           var(--color-accent-300);
  --accent-muted:           var(--color-accent-600);
  --accent-text:            var(--color-accent-300);
  --accent-on:              #FFFFFF;

  /* ---- Toggle ---- */
  --toggle-track:           var(--color-neutral-800);
  --toggle-active:          var(--color-neutral-700);
}


/* ================================================================
   3. LIGHT THEME
   ================================================================ */

[data-theme="light"] {
  --bg-app:                 var(--color-neutral-50);
  --bg-surface:             var(--color-white);
  --bg-surface-raised:      var(--color-white);
  --bg-surface-overlay:     var(--color-white);
  --bg-sidebar:             var(--color-neutral-950);
  --bg-input:               var(--color-white);
  --bg-hover:               var(--color-neutral-100);

  --border-default:         var(--color-neutral-200);
  --border-subtle:          var(--color-neutral-100);
  --border-strong:          var(--color-neutral-400);

  --text-primary:           var(--color-neutral-950);
  --text-secondary:         var(--color-neutral-600);
  --text-tertiary:          var(--color-neutral-500);
  --text-muted:             var(--color-neutral-400);
  --text-inverse:           var(--color-white);

  --accent:                 var(--color-accent-500);
  --accent-hover:           var(--color-accent-400);
  --accent-muted:           var(--color-accent-100);
  --accent-text:            var(--color-accent-700);
  --accent-on:              #FFFFFF;

  --glass-bg:               rgba(0, 0, 0, 0.02);
  --glass-bg-hover:         rgba(0, 0, 0, 0.04);
  --glass-bg-active:        rgba(0, 0, 0, 0.06);
  --glass-border:           rgba(0, 0, 0, 0.06);
  --glass-border-hover:     rgba(0, 0, 0, 0.10);

  --glass-accent-bg:        rgba(181, 184, 50, 0.06);
  --glass-accent-border:    rgba(181, 184, 50, 0.12);
  --glass-accent-bg-hover:  rgba(181, 184, 50, 0.10);

  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:              0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:              0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:              0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:              0 16px 48px rgba(0, 0, 0, 0.12);

  /* ---- Toggle ---- */
  --toggle-track:           #F2F2F2;
  --toggle-active:          #FFFFFF;
}


/* ================================================================
   4. TYPOGRAPHY CLASSES
   ================================================================ */

/* Display headings — Gambarino */
.text-display-xl {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.text-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.text-display-md {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.text-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* Headings — Geist */
.text-heading-lg {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.text-heading-md {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.text-heading-sm {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

/* Body — Geist */
.text-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.text-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* UI text — Geist */
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
}

/* Mono — Geist Mono */
.text-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* Numbers display — Gambarino for KPIs */
.text-number-display {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}


/* ================================================================
   5. SQUARE GLASS PIXEL MOTIF
   ================================================================
   The signature Aora visual element: a grid of rounded squares
   with glass/translucent effects. Used for:
   - Branding marks and illustrations
   - Section backgrounds (subtle)
   - Loaders and empty states
   - Data visualization accents
   ================================================================ */

/* Pixel grid container */
.pixel-grid {
  display: grid;
  gap: 3px;
}

.pixel-grid--4x4 { grid-template-columns: repeat(4, 1fr); }
.pixel-grid--5x5 { grid-template-columns: repeat(5, 1fr); }
.pixel-grid--6x6 { grid-template-columns: repeat(6, 1fr); }
.pixel-grid--8x8 { grid-template-columns: repeat(8, 1fr); }

/* Individual pixel cell */
.pixel-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: background var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

/* Accent pixel (for active/highlight states) */
.pixel-cell--accent {
  background: var(--glass-accent-bg);
  border-color: var(--glass-accent-border);
}

.pixel-cell--accent-solid {
  background: var(--accent);
  border-color: var(--accent);
}

/* Fading opacity levels for gradient effects */
.pixel-cell--opacity-90 { opacity: 0.9; }
.pixel-cell--opacity-70 { opacity: 0.7; }
.pixel-cell--opacity-50 { opacity: 0.5; }
.pixel-cell--opacity-30 { opacity: 0.3; }
.pixel-cell--opacity-15 { opacity: 0.15; }
.pixel-cell--opacity-05 { opacity: 0.05; }

/* Decorative background pattern (CSS-only) */
.pixel-pattern-bg {
  background-image:
    repeating-conic-gradient(
      var(--glass-bg) 0% 25%,
      transparent 0% 50%
    );
  background-size: 24px 24px;
  border-radius: var(--radius-lg);
}

/* Loader animation using pixel grid */
@keyframes pixel-pulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.6; }
}

.pixel-cell--loading {
  animation: pixel-pulse 1.5s var(--ease-in-out) infinite;
}

.pixel-cell--loading:nth-child(2n)  { animation-delay: 0.15s; }
.pixel-cell--loading:nth-child(3n)  { animation-delay: 0.3s; }
.pixel-cell--loading:nth-child(5n)  { animation-delay: 0.45s; }
.pixel-cell--loading:nth-child(7n)  { animation-delay: 0.6s; }


/* ================================================================
   6. COMPONENT PRIMITIVES
   ================================================================ */

/* ---- Surface / Card ---- */
.surface {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

.surface--raised {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.surface--glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.surface--glass:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
}

/* Focus states */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primary: accent background + inner glow */
.btn--primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  box-shadow: inset 0 -4px 4px 0 var(--color-accent-300),
              inset 0 4px 4px 0 var(--color-accent-300);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: inset 0 -4px 6px 0 var(--color-accent-200),
              inset 0 4px 6px 0 var(--color-accent-200);
}

/* Secondary: solid neutral surface */
.btn--secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: transparent;
}

.btn--secondary:hover {
  background: var(--border-default);
}

/* Ghost: subtle surface + border */
.btn--ghost {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn--ghost:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Tertiary: transparent, accent text, no border */
.btn--tertiary {
  background: transparent;
  color: var(--accent-text);
  border-color: transparent;
}

.btn--tertiary:hover {
  background: var(--glass-bg);
}

.btn--tertiary:active {
  background: var(--glass-bg-active);
}

.btn--tertiary:disabled {
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.5;
}

/* Danger */
.btn--danger {
  background: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}

.btn--danger:hover {
  opacity: 0.9;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size variants */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: 28px;
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  min-height: 44px;
}

/* ---- Input ---- */
.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
  min-height: 36px;
}

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

.input:focus {
  border-color: var(--accent);
}

.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--accent);
}

.input:hover:not(:focus) {
  border-color: var(--border-strong);
}

.input:disabled,
.input[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--glass-bg);
}

/* ---- Chip / Tag ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.chip--accent {
  background: var(--glass-accent-bg);
  border-color: var(--glass-accent-border);
  color: var(--accent-text);
}

.chip--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}

.chip:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.chip--accent:hover {
  background: var(--glass-accent-bg-hover);
}

.chip--solid:hover {
  opacity: 0.9;
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.chip:disabled,
.chip.chip--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* Removable chip with close icon */
.chip .chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--duration-fast) ease;
  flex-shrink: 0;
}

.chip:hover .chip-close {
  opacity: 1;
}

/* ---- Pill (informative / category labels) ---- */
/* Always-dark branded element — fixed colors, no theme switching */
.pill-info {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #0A0A0A;
  border: 1px solid #242424;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  line-height: 16px;
  letter-spacing: -0.48px;
  color: #FAFAFA;
  white-space: nowrap;
}

.pill-info__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Chip Filter (selected filters in list enrichment) ---- */
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  cursor: default;
  transition: all var(--duration-fast) var(--ease-out);
}

.chip-filter:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.chip-filter .chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--duration-fast) ease;
  flex-shrink: 0;
}

.chip-filter:hover .chip-close {
  opacity: 0.8;
}

/* ---- Chip Signal (selected signals in list enrichment) ---- */
.chip-signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--accent-on);
  cursor: default;
  transition: all var(--duration-fast) var(--ease-out);
}

.chip-signal:hover {
  background: var(--accent-hover);
}

.chip-signal .chip-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--duration-fast) ease;
  flex-shrink: 0;
  color: var(--accent-on);
}

.chip-signal:hover .chip-close {
  opacity: 1;
}

/* ---- Badge (status indicators) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.badge--success {
  background: rgba(62, 207, 113, 0.12);
  color: var(--color-success);
}

.badge--warning {
  background: rgba(229, 168, 50, 0.12);
  color: var(--color-warning);
}

.badge--error {
  background: rgba(229, 69, 62, 0.12);
  color: var(--color-error);
}

.badge--info {
  background: rgba(91, 154, 255, 0.12);
  color: var(--color-info);
}

.badge--accent {
  background: var(--glass-accent-bg);
  color: var(--accent-text);
}

/* ---- Toggle / Switch ---- */
.toggle-group {
  display: inline-flex;
  background: var(--toggle-track);
  border: none;
  border-radius: 18px;
  padding: 2px;
}

.toggle-group__item {
  padding: 12px 16px;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: 16px;
  letter-spacing: -0.32px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 16px;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.toggle-group__item:hover {
  color: var(--text-secondary);
}

.toggle-group__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.toggle-group__item--active {
  background: var(--toggle-active);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
}

/* ---- Avatar ---- */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.avatar--sm   { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--md   { width: 36px; height: 36px; font-size: var(--text-sm); }
.avatar--lg   { width: 48px; height: 48px; font-size: var(--text-md); }
.avatar--xl   { width: 64px; height: 64px; font-size: var(--text-xl); }

/* Square avatar aligns with pixel motif — not round */

/* ---- Signal dot ---- */
.signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.signal-dot--hot  { background: var(--color-signal-hot); }
.signal-dot--warm { background: var(--color-signal-warm); }
.signal-dot--cold { background: var(--color-signal-cold); }

/* ---- Divider ---- */
.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-4) 0;
}

.divider--strong {
  border-top-color: var(--border-default);
}

/* ---- Skeleton loading ---- */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--glass-bg) 25%,
    var(--glass-bg-hover) 50%,
    var(--glass-bg) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s var(--ease-in-out) infinite;
  border-radius: var(--radius-sm);
}


/* ================================================================
   7. LAYOUT PRIMITIVES
   ================================================================ */

/* App shell */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  overflow-y: auto;
}

.sidebar__logo {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  padding: 0 var(--space-4) var(--space-5);
  letter-spacing: var(--tracking-wide);
}

.sidebar__group-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-neutral-500);
  padding: var(--space-4) var(--space-4) var(--space-1);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  color: var(--color-neutral-400);
  text-decoration: none;
  font-size: var(--text-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-out);
}

.sidebar__item:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.04);
}

.sidebar__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sidebar__item--active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--accent);
}

/* Main content area */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.main__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6) var(--space-8);
}

/* Side panel (overlay) */
.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--panel-width);
  height: 100vh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}


/* ================================================================
   8. UTILITY CLASSES
   ================================================================ */

/* Accent highlight (for emphasis text) */
.u-accent { color: var(--accent-text); }

/* Truncate text */
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabular numbers (for data tables, KPIs) */
.u-tabular { font-variant-numeric: tabular-nums; }

/* Focus ring (keyboard navigation) */
.u-focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Visually hidden (accessible) */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ================================================================
   AORA LANDING — couche page (au-dessus du design system)
   Tout ce qui suit n'utilise que les tokens du DS.
   Les composites nouveaux sont marqués [COMPOSITE] : à verser au DS.
   Les emplacements non couverts par le DS sont en .wf (wireframe).
   ================================================================ */

/* ---- Correctifs d'accessibilité au niveau des tokens (à remonter dans le DS) ----
   En sombre, text-tertiary et text-muted passaient sous 4,5:1 ; en clair, les couleurs
   sémantiques des badges étaient illisibles sur blanc. */
[data-theme="dark"] {
  --accent-on: var(--color-black);
  --text-secondary: var(--color-neutral-200);
  --text-tertiary: var(--color-neutral-300);
  --text-muted: var(--color-neutral-400);
  --bg-app-rgb: 10, 10, 10;
  --badge-success-text: var(--color-success);
  --badge-warning-text: var(--color-warning);
  --badge-error-text: var(--color-error);
  --badge-info-text: var(--color-info);
}
[data-theme="light"] {
  --accent-on: var(--color-black);
  --bg-app-rgb: 244, 244, 243;
  --badge-success-text: #1F7A43;   /* à tokeniser : success-700 */
  --badge-warning-text: #8A5A00;   /* à tokeniser : warning-700 */
  --badge-error-text: #B3261E;     /* à tokeniser : error-700 */
  --badge-info-text: #1F56B3;      /* à tokeniser : info-700 */
}
.badge--success { color: var(--badge-success-text); }
.badge--warning { color: var(--badge-warning-text); }
.badge--error { color: var(--badge-error-text); }
.badge--info { color: var(--badge-info-text); }

/* ---- Boutons d'appel à l'action : texte blanc ----
   Demande explicite. Sur l'accent vif (accent-500 en clair, accent-400 en sombre), le blanc
   tombe à 2,6:1 et 2,1:1, sous le seuil WCAG de 4,5. Le fond des CTA passe donc à accent-700,
   où le blanc atteint 5,5:1. La teinte reste celle de la palette, d'un cran plus profond.
   Pour revenir au chartreuse vif, remplacer --cta-bg par var(--accent) : le texte reste blanc,
   mais le contraste repasse sous le seuil. */
:root, [data-theme="dark"], [data-theme="light"] {
  --cta-bg: #B0B335;              /* capsule chartreuse, un cran plus sourd qu'accent-400 */
  --cta-bg-hover: #BCBF3F;
  --cta-grad: linear-gradient(180deg, #BABD3D 0%, #A3A62A 100%);
  --cta-grad-hover: linear-gradient(180deg, #C6C947 0%, #AFB233 100%);
  --cta-on: var(--color-white);
}
/* Capsule : le rayon s'applique aux deux variantes, elles vivent toujours côte à côte. */
.btn { border-radius: var(--radius-pill); }
.btn--primary {
  background: var(--cta-bg);
  background-image: var(--cta-grad);
  color: var(--cta-on);
  border-color: rgba(255, 255, 255, .20);
  text-shadow: 0 1px 1px rgba(26, 28, 8, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 6px rgba(70, 72, 12, .18),
              0 1px 2px rgba(10, 12, 6, .14), 0 8px 20px rgba(120, 124, 30, .18);
}
.btn--primary:hover {
  background: var(--cta-bg-hover);
  background-image: var(--cta-grad-hover);
  color: var(--cta-on);
  border-color: rgba(255, 255, 255, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -2px 6px rgba(70, 72, 12, .14),
              0 1px 2px rgba(10, 12, 6, .14), 0 10px 26px rgba(120, 124, 30, .24);
}
/* Sur une capsule claire, le halo de focus doit être sombre pour rester visible. */
.btn--primary:focus-visible { outline: 2px solid var(--color-accent-900); outline-offset: 2px; }
.btn--primary svg { color: var(--cta-on); }
.skip-link { background: var(--cta-bg); background-image: var(--cta-grad); color: var(--color-accent-950); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
svg.icon, .btn svg, .pills svg, .bento__icon svg, .promise-banner svg, .plan__list svg, .faq__q svg, .deliver__proof svg, .sig__who svg, .field__err svg, .form__success svg, .measure__t svg, .persona__name svg, .bento__foot svg, .bento__rules svg, .proof-panel svg, .cust__facts svg, .cust__opener-i, .dlv__fb svg, .dlv__more .alist__pr svg, .awout svg, .dform__k svg, .dbk em svg, .dlist__fb svg, .dlist__sigs .alist__pr svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Les icônes Fluent sont des aplats, pas des traits : elles ne doivent pas hériter du stroke du DS. */
.icon-fluent, .sig__icon svg { fill: currentColor; stroke: none; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  padding: var(--space-2) var(--space-4);
  background: var(--cta-bg); color: var(--cta-on);
  border-radius: var(--radius-md); z-index: var(--z-toast);
  font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-4); }

/* ---- Brand heading (DS · Brand & Landing Page) ---- */
.brand-heading {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.brand-heading .accent {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-style: normal;
  font-size: 1.06em;
  letter-spacing: 0;
}
.brand-heading--serif {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
  line-height: 1.04;
}
.brand-heading--serif .accent { font-style: normal; font-size: 1em; }
.brand-heading .accent--upright {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-style: normal;
}

/* ---- Composites repris du preview DS (KPI, feed, table) ---- */
.kpi-card { padding: var(--space-5); }
.kpi-card__label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-tertiary); margin-bottom: var(--space-2); letter-spacing: var(--tracking-wide); }
.kpi-card__value { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* L'unite se detache du nombre, comme dans les cartes de tarif : trois valeurs
   de meme grammaire, et plus de retour a la ligne sur « 1 month ». */
.kpi-card__unit { margin-left: 6px; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: 0; color: var(--text-tertiary); white-space: nowrap; }

.td-lead { display: flex; align-items: center; gap: var(--space-2); }
.td-lead__name { font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; }
.td-lead__title { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

/* ---- Layout ---- */
/* Mobile-first : toute grille est mono-colonne et ne peut pas dépasser le viewport (min-content). */
.hero__grid, .market, .compare, .steps, .step, .bento, .proof, .proof__quotes, .plans, .plan__cols, .faq, .final__inner, .kpi-grid, .situations, .catalog__grid, .measure, .footer__grid, .persona, .watch { grid-template-columns: minmax(0, 1fr); }
.hero__grid > *, .market > *, .step > *, .final__inner > *, .proof > * { min-width: 0; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .container { padding: 0 var(--space-8); } }
.container--narrow { max-width: 760px; }

.section { padding: var(--space-16) 0; position: relative; }
@media (min-width: 768px) { .section { padding: var(--space-20) 0; } }
.section--tight { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.section--band { background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

.section-head { max-width: 760px; margin-bottom: var(--space-10); }
@media (min-width: 768px) { .section-head { margin-bottom: var(--space-10); } }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--space-4);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }

.h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: var(--space-4); }
.h3 { font-size: clamp(28px, 3vw, 36px); }
.lead { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.55; max-width: 60ch; }
.lead--sm { font-size: var(--text-md); }
.muted { color: var(--text-tertiary); }
.small { font-size: var(--text-sm); }
.source { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cta-row .btn { min-height: 44px; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.pills li { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.pills svg { width: 14px; height: 14px; color: var(--accent-text); flex-shrink: 0; }

.btn--lg { min-height: 48px; padding: var(--space-3) var(--space-6); font-size: var(--text-md); }
/* Le DS ne livre pas la variante pleine largeur ; les cartes de tarif la posaient
   jusqu'ici par un selecteur de contexte, ce qui ne marche que dans une carte. */
.btn--block { width: 100%; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Reveal au scroll ---- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 60ms; } .reveal-d2 { transition-delay: 120ms; } .reveal-d3 { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- [WIREFRAME] emplacement non couvert par le DS ---- */
.wf {
  position: relative;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface);
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, var(--glass-bg-hover) 12px 13px);
  color: var(--text-tertiary);
}
.wf__tag {
  position: absolute; top: var(--space-2); left: var(--space-2);
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--bg-surface-overlay); border: 1px solid var(--border-default);
  font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-tertiary); z-index: 1;
}
.wf__note { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }

/* ================================================================
   0. NAV [COMPOSITE]
   ================================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  height: var(--header-height);
  background: rgba(var(--bg-app-rgb), 0.78);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--border-subtle); background: rgba(var(--bg-app-rgb), 0.92); }
/* Au-dessus du hero sombre, la barre passe en clair ; elle reprend ses couleurs dès le scroll. */
.nav:not(.is-scrolled) { border-bottom-color: transparent; background: rgba(10,12,6,.28); }
.nav:not(.is-scrolled) .nav__logo { color: var(--color-white); }
.nav:not(.is-scrolled) .nav__links a { color: var(--color-neutral-300); }
.nav:not(.is-scrolled) .nav__links a:hover { color: var(--color-white); background: rgba(255,255,255,.08); }
.nav:not(.is-scrolled) .btn--ghost { border-color: rgba(255,255,255,.26); color: var(--color-white); background: rgba(255,255,255,.04); }
.nav:not(.is-scrolled) .btn--ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.4); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
/* Logo de marque : image masquée, donc recolorée par `color` — blanc sur le hero
   sombre, encre normale dès que la barre se pose sur fond clair. */
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--text-primary); }
.nav__logo-mark {
  display: block; width: 103px; height: 25px;
  background-color: currentColor;
  -webkit-mask: url("/aora-logo.png") left center / contain no-repeat;
  mask: url("/aora-logo.png") left center / contain no-repeat;
}
.nav__logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.footer__brand .nav__logo-mark { width: 115px; height: 28px; }
.nav__links { display: none; gap: var(--space-1); }
.nav__links a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.nav__links a:hover { color: var(--text-primary); background: var(--glass-bg); }
.nav__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.nav__actions .btn--ghost { display: none; }
@media (min-width: 900px) { .nav__links { display: flex; } .nav__actions .btn--ghost { display: inline-flex; } }
.nav__cta-long { display: none; }
@media (min-width: 600px) { .nav__cta-long { display: inline; } .nav__cta-short { display: none; } }
@media (max-width: 899px) { .nav .btn--sm { min-height: 40px; font-size: var(--text-sm); padding: 0 var(--space-4); } }

/* ================================================================
   1. HERO
   ================================================================ */
.hero { padding-top: calc(var(--header-height) + var(--space-10)); padding-bottom: var(--space-12); position: relative; }
@media (min-width: 900px) { .hero { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; } }
@media (min-width: 1024px) { .hero { padding-top: calc(var(--header-height) + var(--space-12)); padding-bottom: var(--space-12); } }
/* Le conteneur du hero déborde à droite : la colonne de texte garde l'alignement du reste
   de la page, le visuel gagne tout l'espace restant jusqu'au bord. */
@media (min-width: 1024px) {
  .hero .container {
    max-width: none;
    padding-left: max(var(--space-8), calc((100% - 1200px) / 2 + var(--space-8)));
    padding-right: var(--space-8);
  }
  .hero__grid { max-width: 1520px; }
}

/* ================================================================
   [DS] Pill informative — variante claire
   Le design system ne livre que la version sombre à couleurs fixes
   (« always-dark branded element »). La page étant claire, on en
   décline une version sur surface claire : mêmes dimensions, même
   icône, valeurs inversées pour garder le même rapport de contraste.
   ================================================================ */
.pill-info { --pi-cube: #A3A525; --pi-spark: #E0E26E; --pi-ring: #0A0A0A; }
.pill-info__icon { display: block; }
.pill-info--light {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-primary);
  --pi-cube: var(--color-accent-600);
  --pi-spark: var(--color-accent-700);
  --pi-ring: var(--bg-surface);
}
.pill-info--light:hover { background: var(--bg-surface-raised); border-color: var(--border-strong); }

/* ---- Fond : la seule zone sombre de la page.
   Image de marque (grille de pixels, lueur chartreuse en diagonale) posée en couverture,
   puis un voile dégradé qui éteint la lueur côté texte et la laisse respirer côté produit.
   Le hero bascule sur les tokens sombres du design system via data-theme="dark". ---- */
.hero { background-color: #0C0E07; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background-color: #0C0E07; }
.hero__grid, .hero-switch { position: relative; z-index: 1; }
.hero__bg-img {
  position: absolute; inset: 0;
  background-image: url("/hero-bg.jpg");
  background-size: cover; background-position: 50% 62%;
}
/* voile : opaque à gauche sous le texte, translucide à droite sous les cartes */
.hero__bg-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,12,6,.93) 0%, rgba(10,12,6,.88) 40%, rgba(10,12,6,.72) 52%, rgba(10,12,6,.20) 70%, rgba(10,12,6,.30) 100%),
    linear-gradient(to bottom, rgba(10,12,6,.50) 0%, rgba(10,12,6,0) 26%, rgba(10,12,6,0) 66%, rgba(10,12,6,.46) 100%);
}
/* en vue centrée le texte occupe toute la largeur : voile homogène, un peu plus dense en haut */
.hero--center .hero__bg-veil {
  background:
    linear-gradient(to bottom, rgba(10,12,6,.90) 0%, rgba(10,12,6,.84) 46%, rgba(10,12,6,.36) 72%, rgba(10,12,6,.26) 100%),
    radial-gradient(ellipse 62% 56% at 50% 34%, rgba(10,12,6,.62) 0%, rgba(10,12,6,.22) 58%, rgba(10,12,6,0) 80%);
}
@media (max-width: 1023px) { .hero__bg-img { background-position: 58% 70%; } .hero__bg-veil { background: linear-gradient(to bottom, rgba(10,12,6,.91) 0%, rgba(10,12,6,.86) 46%, rgba(10,12,6,.64) 100%); } }

/* --- contrastes propres au hero sombre --- */
/* Les écrans du produit restent en thème clair : c'est l'application telle qu'elle
   est vraiment. Ils posent donc une surface claire sur le hero sombre, ce qui demande
   une ombre plus franche pour les décoller du fond. */
.hero .appwin { box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3); }
.hero .appwin--brief { box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.35); }
.hero .appwin--acct { box-shadow: 0 22px 54px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); }
.hero .chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--color-neutral-200); }
.hero .btn--ghost { border-color: rgba(255,255,255,.26); color: var(--color-white); background: rgba(255,255,255,.04); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.4); }
.hero .btn--primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -2px 6px rgba(70,72,12,.18), 0 10px 28px rgba(120,124,30,.26); }

/* Le voile laisse davantage passer l'image : les textes du hero remontent d'un cran pour tenir le contraste. */
.hero__lead { color: var(--color-neutral-200); }
.hero .pills li { color: var(--color-neutral-100); }
.hero .pills li svg { color: var(--color-accent-300); }
.hero .hero-switch .toggle-group { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.hero .hero-switch .toggle-group__item { color: var(--color-neutral-400); }
.hero .hero-switch .toggle-group__item--active { background: rgba(255,255,255,.13); color: var(--color-white); }
.hero .chip-filter { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--color-neutral-200); }
.hero .proof-panel { background: rgba(12,14,7,.92); }
.hero .deliver__proof { color: var(--color-accent-300); }

.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: var(--space-8); } }
@media (min-width: 1280px) { .hero__grid { gap: var(--space-16); } }
@media (min-width: 1360px) { .hero__grid { gap: var(--space-10); } }
.hero__cred { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.hero__title { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--space-4); max-width: 16ch; text-wrap: balance; }
.hero__lead { max-width: 46ch; font-size: var(--text-lg); line-height: 1.45; margin-bottom: var(--space-8); }
.hero__lead strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.hero .pills { gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }
.hero .pills li { font-size: var(--text-sm); }

/* ---- [COMPOSITE] Carte « livraison du jour » : grille stricte, lignes de hauteur égale ---- */
.deliver { position: relative; z-index: 3; }
.deliver__card { background: var(--bg-surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }

.deliver__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border-default); background: var(--bg-surface); }
.deliver__head-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.deliver__head-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; }
.deliver__head .text-caption { font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
@media (max-width: 1199px) { .deliver__head .text-caption { display: none; } }

.deliver__persona { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 97%); mask-image: linear-gradient(90deg, #000 78%, transparent 97%); }
.deliver__persona > * { flex: none; }
.deliver__persona .text-label { color: var(--text-tertiary); }

.deliver__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.deliver__row:last-of-type { border-bottom: 0; }
.deliver__row--focus { background: var(--glass-accent-bg); }
@media (min-width: 560px) {
  .deliver__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; column-gap: var(--space-4); min-height: 104px; }
}
.deliver__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.deliver__who .avatar { width: 44px; height: 44px; font-size: var(--text-sm); }
.deliver__who > div { min-width: 0; }
.deliver__who .avatar { flex-shrink: 0; }
.deliver__who-name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deliver__who-role { font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--leading-normal); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.deliver__sig { min-width: 0; display: grid; gap: var(--space-1); }
.deliver__sig-top { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); }
.deliver__sig-top .signal-dot { margin: 0; }
.deliver__sig-title { font-size: var(--text-md); color: var(--text-primary); font-weight: var(--weight-medium); line-height: var(--leading-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deliver__sig-top .badge { justify-self: end; white-space: nowrap; font-size: var(--text-xs); padding: 2px var(--space-2); }
.deliver__sig-top--second { margin-top: 0; }
.deliver__proof { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--accent-text); text-decoration: none; }
.deliver__proof svg { width: 13px; height: 13px; }
.deliver__proof:hover { text-decoration: underline; }
.deliver__sig .deliver__proof { grid-column: 2 / -1; justify-self: start; margin-left: calc(8px + var(--space-2)); }

.deliver__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.deliver__fb { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-tertiary); }
.deliver__fb svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deliver__fb--keep { background: rgba(62, 207, 113, 0.12); border-color: transparent; color: var(--badge-success-text); }

.deliver__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-surface); border-top: 1px solid var(--border-default); font-size: var(--text-sm); color: var(--text-tertiary); flex-wrap: wrap; }
.deliver__pulse { position: absolute; top: -12px; right: -12px; z-index: 2; }
@keyframes aora-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
.deliver__pulse .pixel-cell { animation: aora-pulse 2.4s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .deliver__pulse .pixel-cell { animation: none; } }

/* Entre 1024 et 1279, la carte se resserre : on réduit d'un cran pour éviter les coupures. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .deliver .deliver__sig-title, .deliver .deliver__who-name { font-size: var(--text-xs); }
  .deliver .deliver__who-role { font-size: 10px; }
  .deliver .deliver__row { column-gap: var(--space-2); padding: var(--space-3); min-height: 78px; }
  .deliver .deliver__who { gap: var(--space-2); }
  .deliver .deliver__who .avatar { width: 28px; height: 28px; font-size: 10px; }
  .deliver .deliver__sig-top .badge { font-size: 9px; padding: 1px 6px; }
  .deliver .deliver__fb { width: 24px; height: 24px; }
  .deliver .deliver__actions { gap: var(--space-1); }
}

/* ---- [COMPOSITE] Panneau de preuve : montre l'extrait source au clic ----
   C'est la démonstration du geste différenciant (« cliquez, lisez, jugez »), sans quitter la page. */
.proof-panel { border-top: 1px solid var(--border-default); background: var(--glass-accent-bg); padding: var(--space-4) var(--space-5) var(--space-5); }
.proof-panel[hidden] { display: none; }
.proof-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.proof-panel__close { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: var(--radius-md); color: var(--text-tertiary); cursor: pointer; }
.proof-panel__close:hover { color: var(--text-primary); border-color: var(--border-strong); }
.proof-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.proof-panel__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.proof-panel__body { display: grid; gap: var(--space-2); }
.proof-panel__src { font-size: var(--text-xs); color: var(--accent-text); font-family: var(--font-mono); }
.proof-panel__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.proof-panel__extract { margin: 0; padding-left: var(--space-4); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-primary); }
.proof-panel__meta { font-size: var(--text-xs); color: var(--text-tertiary); }
button.deliver__proof { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; white-space: nowrap; }
button.deliver__proof:hover { text-decoration: underline; }
button.deliver__proof:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
button.deliver__proof[aria-expanded="true"] { text-decoration: underline; }

/* ---- [OUTIL DE DÉCISION] Sélecteur de mise en page du hero ----
   Deux variantes comparables en direct : côte à côte (défaut) et centré façon
   page produit, avec la maquette en dessous. Le choix est mémorisé par navigateur.
   À retirer avant publication si une seule variante est retenue. */
.hero-switch { position: relative; z-index: 2; display: flex; justify-content: flex-end; margin-bottom: var(--space-4); }
.hero-switch .toggle-group, .sigswitch .toggle-group { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 3px; }
.hero-switch .toggle-group__item, .sigswitch .toggle-group__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); font-size: var(--text-xs); line-height: 1.2; letter-spacing: 0; border-radius: var(--radius-pill); color: var(--text-tertiary); }
.hero-switch .toggle-group__item svg, .sigswitch .toggle-group__item svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.hero-switch .toggle-group__item--active, .sigswitch .toggle-group__item--active { background: var(--bg-hover); color: var(--text-primary); box-shadow: var(--shadow-xs); }
@media (max-width: 899px) { .hero-switch { display: none; } }

/* ---- Variante centrée ---- */
@media (min-width: 900px) {
  /* Le hero décale son padding à gauche pour aligner le texte sur le rail de la page.
     En mode centré, ce décalage fausserait le centrage : on repasse en symétrique. */
  .hero--center .container { max-width: 1520px; padding-left: var(--space-8); padding-right: var(--space-8); }
  .hero--center .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); justify-items: center; max-width: none; }
  .hero--center .hero__text { max-width: 880px; text-align: center; }
  .hero--center .hero__title { max-width: 22ch; margin-inline: auto; font-size: clamp(38px, 4.1vw, 54px); }
  .hero--center .hero__lead { max-width: 64ch; margin-inline: auto; }
  .hero--center .cta-row, .hero--center .pills { justify-content: center; }
  .hero--center .deliver { width: 100%; }
  /* la maquette dispose de toute la largeur : on peut réafficher ce qui était masqué */
}

/* --- colonne de gauche --- */

/* --- zone principale --- */

[data-theme="light"] .appmock__tab.is-active { background: var(--text-primary); color: var(--bg-surface); }

/* --- tableau --- */

/* --- adaptations --- */
@media (max-width: 1279px) {
  /* Le rôle figure déjà sous le nom : la colonne persona peut sauter avant de tronquer les noms. */
}

/* ================================================================
   [COMPOSITE] Écrans du produit, empilés
   Reconstitution fidèle de trois vues de l'application, anonymisées :
   la liste des personnes livrées, le brief d'une personne, la fiche compte.
   Empilement en profondeur, à la manière d'une capture d'écran composite.
   ================================================================ */
.appstack { position: relative; padding-bottom: 54px; }
.appwin { background: var(--bg-surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.appwin__bar { display: flex; align-items: center; gap: 6px; padding: 9px var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
.appwin__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.appwin__bar em { margin-left: var(--space-3); font-style: normal; font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.appwin__body { padding: var(--space-4); }

/* --- la règle, telle qu'elle est écrite --- */
.arule__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.arule__name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.arule__sub { font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.arule__block { margin-top: var(--space-4); }
.arule__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-2); }
.arule__chips .chip-filter { font-size: 10px; padding: 2px 8px; }
.arule__personas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.apersona { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 5px 11px; border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); }
.apersona b { font-size: 11.5px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.apersona em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--accent-text); }
.arule__within { margin-top: var(--space-2); font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary); }
.alist__foot b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.arule__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.arule__scope { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
.arule__row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: 5px 0; font-size: 12px; }
.arule__row + .arule__row { border-top: 1px solid var(--border-subtle); }
.arule__sn { color: var(--text-primary); }
.arule__row em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.arule__row b { font-size: 10.5px; font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; text-align: right; min-width: 92px; }
.arule__row--off .arule__sn, .arule__row--off b { color: var(--text-muted); }
.arule__row--off .signal-dot { background: transparent; border: 1px solid var(--text-muted); }
.arule__logic { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; color: var(--text-secondary); }
.arule__logic b { color: var(--text-primary); font-weight: var(--weight-medium); }
.arule__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: 10px; color: var(--text-tertiary); }

/* --- le retour Keep / Drop, à l'étape où il arrive --- */
.anotif__fb { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.anotif__fbrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-top: var(--space-2); }
.afb { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface); font-size: var(--text-xs); color: var(--text-tertiary); }
.afb svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.afb.is-keep { background: rgba(62, 207, 113, .14); border-color: transparent; color: var(--badge-success-text); }
.anotif__fbnote { font-size: var(--text-xs); color: var(--text-tertiary); }
.alist__pr { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-text); white-space: nowrap; }
.alist__pr svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -1px; }
.acc__panel table.alist td { vertical-align: top; }
.acc__panel table.alist td:nth-child(2), .acc__panel table.alist td:nth-child(5) { white-space: nowrap; }
/* sous 768 px l'ecran produit defile dans sa propre fenetre, pas la page */
@media (max-width: 767px) {
  .acc__panel .appwin__body { overflow-x: auto; }
  .acc__panel table.alist { min-width: 520px; }
  .acc__panel .aruns { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .acc__panel .aruns::-webkit-scrollbar { display: none; }
}
.alist__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: 10.5px; line-height: 1.5; color: var(--text-tertiary); }
.alist__foot .signal-dot { flex-shrink: 0; }

/* --- la liste livrée --- */
.alist__h1 { font-family: var(--font-display); font-size: 21px; line-height: 1.1; color: var(--text-primary); }
.alist__sub { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--text-tertiary); max-width: 52ch; }
.alist__tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.alist__tab { padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); font-size: 10px; color: var(--text-tertiary); white-space: nowrap; }
.alist__tab--on { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); color: var(--accent-text); font-weight: var(--weight-medium); }
.alist__count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); white-space: nowrap; }
table.alist { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }
table.alist th { text-align: left; padding: var(--space-2) var(--space-2); font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); }
table.alist td { padding: 9px var(--space-2); font-size: 11.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
table.alist tbody tr:last-child td { border-bottom: 0; }
table.alist tbody tr.is-off { opacity: .55; }
table.alist td > span { display: block; font-size: 10px; color: var(--text-muted); }
.alist__who { display: flex; align-items: center; gap: var(--space-2); }
.alist__who .avatar { width: 24px; height: 24px; font-size: 9px; flex-shrink: 0; }
.alist__who b { display: block; font-size: 11.5px; font-weight: var(--weight-semibold); color: var(--text-primary); white-space: nowrap; }
.alist__who span { font-size: 10px; color: var(--text-muted); }
.alist__sig { display: block; font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; }
.alist__sig::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 1px; margin-right: 6px; vertical-align: 1px; background: var(--text-muted); }
.alist__sig--hot::before { background: var(--color-signal-hot); }
.alist__sig--warm::before { background: var(--accent); }
.alist__fb { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.alist__fb svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.alist__fb.is-keep { background: rgba(62, 207, 113, .14); border-color: transparent; color: var(--badge-success-text); }

/* --- le brief, en surimpression --- */
.appwin--brief .appwin__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.abrief__who { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.abrief__who > div { flex: 1; min-width: 0; }
.abrief__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.abrief__role { font-size: 10px; color: var(--text-tertiary); }
.abrief__k { margin-top: var(--space-3); font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.abrief__sig { margin-top: 6px; }
.abrief__sig b { display: block; font-size: 11.5px; font-weight: var(--weight-medium); color: var(--text-primary); }
.abrief__sig span { display: block; font-size: 10px; color: var(--accent-text); }
.abrief__sig svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -1px; }
.abrief__p { margin-top: 6px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); }
.abrief__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.abrief__btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface); font-size: 10.5px; color: var(--text-secondary); }
.abrief__btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }

/* --- la vignette compte --- */
.aacct__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.aacct__grid { display: flex; gap: var(--space-5); margin-top: var(--space-3); }
.aacct__grid em { display: block; font-family: var(--font-display); font-style: normal; font-size: 20px; line-height: 1; color: var(--text-primary); }
.aacct__grid span { display: block; margin-top: 3px; font-size: 9.5px; line-height: 1.3; color: var(--text-tertiary); }

/* Sur écran étroit la table garde l'essentiel : qui, quel signal, quelle preuve. */
@media (max-width: 620px) {
  table.alist th:nth-child(2), table.alist td:nth-child(2),
  table.alist th:nth-child(5), table.alist td:nth-child(5) { display: none; }
  .alist__sub { display: none; }
}
/* Le hero prend la hauteur reelle de ses cartes : plus de debordement sur la bande claire. */
.deliver { position: relative; z-index: 3; }
/* --- trois cartes du produit, reprises de la version du 12 octobre --- */
.hcards { display: grid; gap: 8px; }
.hcard { background: var(--bg-surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 12px 14px; }
.hcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hcard__label { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.hcard__label svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hcard__top .badge, .hcard__top .text-caption { font-size: 10px; }

/* --- 1. livraison du jour --- */
.hcard--today .hcard__big { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--text-primary); margin-top: 6px; font-variant-numeric: tabular-nums; }
.hcard--today .hcard__big span { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); margin-left: 6px; }
.hcard__barlegend { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: 8px; font-size: 10.5px; color: var(--text-tertiary); }
.hcard__barlegend b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.hcard__split { display: grid; gap: 2px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }
.hcard__splithead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 3px; }
.hcard__sublabel { font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.hcard__sublabel--dim { text-transform: none; letter-spacing: 0; font-weight: var(--weight-regular); font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); }
.hcard__srow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.38; }
.hcard__sname { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcard__srow em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-tertiary); white-space: nowrap; }
.hcard__srow b { font-weight: var(--weight-semibold); font-size: 11.5px; color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
.hcard__srow--watch .hcard__sname, .hcard__srow--watch b { color: var(--text-tertiary); }
.hcard__srow--watch .signal-dot { background: transparent; border: 1px solid var(--text-muted); }

/* --- 2. la personne livrée --- */
.hcard__who { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.hcard__who .avatar { width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; }
.hcard__name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.2; }
.hcard__role { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; }
.hcard__sigs { display: grid; gap: 4px; margin-top: 10px; }
.hcard__sig { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--glass-bg); border: 1px solid var(--glass-border); font-size: 12.5px; color: var(--text-primary); }
.hcard__sig em { font-style: normal; font-size: 10px; color: var(--text-tertiary); white-space: nowrap; }
.hcard__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.hcard__actions .deliver__proof { font-size: 12px; margin-top: 0; }
.hcard__fb { display: flex; gap: 5px; }
.hcard__fb span { width: 24px; height: 24px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface); display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); }
.hcard__fb span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hcard__fb .is-keep { background: rgba(62, 207, 113, .14); border-color: transparent; color: var(--badge-success-text); }

/* --- 3. le brief, prolongement de la ligne livrée --- */
.hcard__brief { margin-top: 10px; display: grid; gap: 2px; }
.hcard__brief dt { font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.hcard__brief dd { margin: 0 0 5px; font-size: 12.5px; line-height: 1.3; color: var(--text-secondary); }
.hcard__brief dd:last-child { margin-bottom: 0; }
.hcard__hook { margin-top: 8px; padding: 6px 9px; border-radius: var(--radius-md); border: 1px solid var(--glass-accent-border); background: var(--glass-accent-bg); }
.hcard__hook p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.38; color: var(--text-primary); }
.hcard__foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-subtle); font-size: 10.5px; color: var(--text-tertiary); }

/* --- le panneau de preuve s'insère dans la carte personne --- */
.hcard .proof-panel { margin: 10px -14px -12px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 1px solid var(--glass-accent-border); padding: 12px 14px; }
.hcard .proof-panel__extract { font-size: var(--text-md); }

/* --- en vue centrée, les trois modules passent en ligne et peuvent respirer --- */
@media (min-width: 900px) {
  .hero--center .hcards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--space-4); max-width: 1320px; margin-inline: auto; }
  .hero--center .hcard { height: 100%; padding: var(--space-5); display: flex; flex-direction: column; }
  .hero--center .hcard__actions, .hero--center .hcard__foot { margin-top: auto; padding-top: var(--space-4); }
  .hero--center .hcard__split { margin-top: auto; }
  .hero--center .hcard__split { margin-top: var(--space-4); padding-top: var(--space-3); }
  .hero--center .hcard .proof-panel { margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1); }
}

/* Sur le hero sombre, elles reprennent la typographie courante et une surface
   assombrie, pour que la lueur du décor ne traverse pas le texte. */
.hero .hcard { background: rgba(14, 17, 9, .78); border-color: rgba(255,255,255,.16); backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1); box-shadow: 0 18px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05); }
.hero .hcard__sig { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.hero .hcard__fb span { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.13); }
.hero .hcard__hook { background: rgba(205,208,74,.1); border-color: rgba(205,208,74,.26); }
.hero .hcard__label { color: var(--color-neutral-300); }
.hero .hcard__big { font-family: var(--font-display); }
.hero .deliver__proof { color: var(--accent-text); }

/* Les écrans d'application, repris dans la section du parcours */
.appwin--acct { align-self: start; }
.hpane__split { display: grid; gap: var(--space-4); }
@media (min-width: 820px) { .hpane__split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.anotif__grid { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
@media (min-width: 700px) { .anotif__grid { grid-template-columns: 1fr 1fr; } }
.anotif__opener { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); }
.anotif__opener p { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-primary); }
.anotif__act { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.anotif__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.lm__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.lm__btn svg { width: 14px; height: 14px; }
.lm__btn svg:not(.icon-fluent) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ================================================================
   2. BANDEAU DE PREUVE
   ================================================================ */
.proofbar { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: var(--space-6) 0; }
.proofbar__inner { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
@media (min-width: 900px) { .proofbar__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8); } }
.proofbar__caption { font-size: var(--text-sm); color: var(--text-tertiary); max-width: 34ch; }
.proofbar__caption strong { color: var(--text-secondary); font-weight: var(--weight-medium); }
.proofbar__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; }
@media (min-width: 560px) { .proofbar__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .proofbar__logos { width: auto; min-width: 560px; } }
.wordmark { min-height: 56px; display: flex; align-items: center; justify-content: center; padding: var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); position: relative; }
.wordmark .badge { position: absolute; top: -8px; right: 8px; }

/* ================================================================
   3. PROBLÈME
   ================================================================ */
.kpi-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi-card--big .kpi-card__value { font-size: clamp(44px, 6vw, 64px); }
.kpi-card__note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-3); line-height: var(--leading-normal); }

/* ================================================================
   4. BASCULEMENT — grille de marché [COMPOSITE: pixel-grid à grande échelle]
   ================================================================ */
.market { display: grid; gap: var(--space-10); align-items: center; margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--border-subtle); }
@media (min-width: 1024px) { .market { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }

/* ================================================================
   5. AVANT / APRÈS [COMPOSITE: deux surfaces en vis-à-vis]
   ================================================================ */
.compare { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-5); align-items: start; } }
.compare__card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.compare__card--after { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); }
.compare__label { display: flex; align-items: center; gap: var(--space-2); }
.compare__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.compare__sub { font-size: var(--text-sm); color: var(--text-tertiary); }
.compare__line { padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); display: grid; gap: var(--space-3); }
.compare__line--raw { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.75; word-break: break-word; flex: 1; align-content: center; }
.compare__line--raw span { color: var(--text-secondary); }
.compare__obj { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; }
.compare__obj-k { width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); color: var(--accent-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); }
.compare__obj-t { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); margin-bottom: 2px; }
.compare__obj-v { font-size: var(--text-sm); color: var(--text-primary); }
.compare__obj-v .muted { color: var(--text-tertiary); }
.compare__verdict { font-size: var(--text-sm); color: var(--text-secondary); padding-top: var(--space-4); margin-top: auto; border-top: 1px solid var(--border-subtle); }

/* ---- [COMPOSITE] Brief d'appel : reproduit le panneau latéral de l'app ---- */
.brief { display: grid; gap: 0; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); overflow: hidden; }
@media (min-width: 620px) {
  .brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief__block--wide { grid-column: 1 / -1; }
  .brief__block:nth-child(2) { border-left: 1px solid var(--border-subtle); }
}
.brief__block { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); align-content: start; }
.brief__block + .brief__block { border-top: 1px solid var(--border-subtle); }
@media (min-width: 620px) { .brief__block:nth-child(2) { border-top: 0; } }
.brief__k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--weight-semibold); color: var(--text-tertiary); }
.brief__v { font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-relaxed); margin: 0; }
.brief__v .muted { color: var(--text-tertiary); }
.brief .deliver__proof { justify-self: start; }
.brief__v--sm { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); }
.brief__block--approach { background: var(--glass-accent-bg); border-top: 1px solid var(--glass-accent-border); }
.brief__tag { display: inline-block; font-size: 10px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); background: var(--bg-surface); border: 1px solid var(--glass-accent-border); border-radius: var(--radius-sm); padding: 1px var(--space-2); margin-right: var(--space-2); vertical-align: 2px; }
.deliver__sig-top--second { margin-top: var(--space-1); }
.sig__window { font-size: 10px; font-family: var(--font-mono); color: var(--text-tertiary); margin-left: auto; white-space: nowrap; }

/* ================================================================
   7. COMMENT ÇA MARCHE  [COMPOSITE]
   Étapes à gauche, un seul visuel à droite qui change avec l'étape active.
   L'activation vient du scroll (IntersectionObserver) ou du clic, jamais d'un scroll-jacking.
   ================================================================ */
/* ---- La matinee telle qu'elle se passe : le texte s'efface, les preparatifs n'en finissent pas ---- */
.routine { position: relative; margin-top: var(--space-10); }
.routine__p {
  --lh: 1.55em;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.55; color: var(--text-secondary); max-width: 92ch;
  max-height: calc(var(--lh) * 3);
  overflow: hidden;
  /* deux couches : les deux premieres lignes restent pleines, la troisieme s'efface vers la droite */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0, #000 calc(var(--lh) * 2), transparent calc(var(--lh) * 2)),
    linear-gradient(to right, #000 0, #000 44%, transparent 94%);
  mask-image:
    linear-gradient(to bottom, #000 0, #000 calc(var(--lh) * 2), transparent calc(var(--lh) * 2)),
    linear-gradient(to right, #000 0, #000 44%, transparent 94%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
}

/* les trois constats, un a la fois, dans la colonne de droite */
@media (min-width: 900px) { #probleme .shead2 { gap: var(--space-16); } }
.statcar { display: grid; gap: var(--space-5); align-content: end; }
.statcar__track { position: relative; min-height: 124px; }
.statcar__item { position: absolute; inset: 0; display: grid; gap: var(--space-2); align-content: start; opacity: 0; visibility: hidden; transition: opacity var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow); }
.statcar__item.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.statcar__dots { display: flex; gap: 6px; }
.statcar__dot { width: 22px; height: 3px; border-radius: 2px; border: 0; padding: 0; cursor: pointer; background: var(--border-strong); transition: background var(--duration-fast) var(--ease-out); }
.statcar__dot.is-on { background: var(--accent); }
.statcar__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.toolpill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; margin: 0 1px; border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border-default); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; vertical-align: 0.39em; }
.toolpill__mark { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: var(--bg-app); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-semibold); color: var(--text-tertiary); text-transform: uppercase; }
.toolpill img, .toolpill svg { width: 18px; height: 18px; border-radius: 5px; }

/* ---- Le problème, en trois constats sur une ligne ---- */
.section--tight { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.painbar__fig { font-family: var(--font-display); font-size: clamp(38px, 4vw, 50px); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.painbar__fig em { font-style: normal; font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-left: 6px; color: var(--text-secondary); }
.painbar__t { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary); line-height: var(--leading-snug); }
.painbar__s { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-tertiary); }
.painbar__out { margin-top: var(--space-8); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 74ch; }
.painbar__out strong { color: var(--text-primary); font-weight: var(--weight-medium); }

/* ---- La promesse : l'engagement chiffre, puis ce qui atterrit ---- */
.pledge { margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); display: grid; gap: var(--space-4); }
@media (min-width: 820px) {
  .pledge { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) var(--space-10); align-items: center; }
  .pledge__body { padding-left: var(--space-8); border-left: 1px solid var(--glass-accent-border); }
}
.pledge__fig { font-family: var(--font-display); font-size: clamp(50px, 6vw, 76px); line-height: 0.95; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pledge__fig span { color: var(--text-tertiary); }
.pledge__fig em { font-style: normal; font-size: 0.46em; color: var(--accent-text); margin-left: 3px; }
.pledge__body { display: grid; gap: var(--space-2); align-content: center; }
.pledge__t { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-secondary); }
.pledge__t strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.pledge__s { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-tertiary); }

/* ---- Tete de section sur deux colonnes : pill + titre a gauche, resume a droite ---- */
.shead2 { display: grid; gap: var(--space-5); margin-bottom: var(--space-10); }
@media (min-width: 900px) {
  .shead2 { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-10); align-items: end; }
  .shead2__d { padding-bottom: 6px; }
}
.shead2__l { display: grid; gap: var(--space-5); justify-items: start; }
.shead2__t { font-size: clamp(32px, 4.4vw, 56px); }
.shead2__d { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 64ch; }
.shead2__d strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ---- Signaux : deux vues, catalogue ou flux ---- */
.shead2__r { display: grid; gap: var(--space-5); align-content: end; }
.shead2__cta { display: none; }
.sigsec .shead2__cta { display: flex; }
/* La preuve porte son appel a l'action dans la tete de section, au niveau de
   la description, plutot qu'en pied : le lecteur a deja le resultat sous les yeux. */
#proof .shead2__cta { display: flex; }
#how .shead2__cta { display: flex; }
.sigswitch { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
/* Meme bascule que la section signaux, posee a gauche. */
.howswitch { display: flex; justify-content: flex-start; margin-bottom: var(--space-5); }
.howswitch .toggle-group { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 3px; }
.howswitch .toggle-group__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-4); font-size: var(--text-xs); line-height: 1; border-radius: var(--radius-pill); border: 0; background: none; color: var(--text-tertiary); cursor: pointer; font-family: inherit; }
.howswitch .toggle-group__item svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.howswitch .toggle-group__item--active { background: var(--bg-hover); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.howview[hidden] { display: none; }

/* ---- Ce que le client recoit, tel qu'il le recoit ---- */
/* Deux colonnes : a gauche les autres formes que prend le resultat, a droite
   la livraison telle qu'elle arrive vraiment. */
.dlvlay { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1040px) { .dlvlay { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: var(--space-6); } }
.dlvlay__l { display: grid; gap: var(--space-4); align-content: start; }
.dlvlay__t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.dform { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-surface-raised); display: grid; gap: var(--space-3); }
.dform__k { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-secondary); }
.dform__k svg { flex: none; width: 14px; height: 14px; color: var(--accent-text); }
.dform__mail { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); }
.dform__mail-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.dform__mail-h b { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.dform__mail-h em { font-style: normal; font-size: 10px; color: var(--text-muted); }
.dform__mail p { margin-top: 5px; font-size: 11.5px; line-height: var(--leading-normal); color: var(--text-tertiary); }
.dform__csv { display: flex; flex-wrap: wrap; gap: 5px; }
.dform__csv span { padding: 3px 8px; border-radius: var(--radius-sm); background: var(--glass-bg); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.dform__sync { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 11.5px; line-height: var(--leading-normal); color: var(--text-tertiary); }
.appwin--dlv .appwin__bar { position: relative; }
.appwin--dlv .appwin__body { display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); }
/* La barre de fenetre stylise ses <span> en pastilles de 8 px : le selecteur
   de canal doit reprendre la main, sinon il se reduit a un point. */
.appwin__bar .dlv__where { width: auto; height: auto; margin-left: auto; display: inline-flex; gap: 3px; padding: 2px; border-radius: var(--radius-pill); background: var(--bg-app); border: 1px solid var(--border-subtle); }
.appwin__bar .dlv__where span { width: auto; height: auto; padding: 3px 9px; border-radius: var(--radius-pill); background: none; font-size: 10px; color: var(--text-muted); }
.appwin__bar .dlv__where span.dlv__where-on { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.dlv__msg { display: flex; gap: var(--space-3); }
.dlv__bot { flex: none; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); display: grid; place-items: center; color: var(--accent-text); }
.dlv__bot svg { width: 19px; height: 19px; }
.dlv__msg-h { display: flex; align-items: baseline; gap: var(--space-2); }
.dlv__msg-h b { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-primary); }
.dlv__app { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--text-primary); color: var(--bg-surface); font-size: 9px; font-weight: var(--weight-semibold); }
.dlv__msg-h em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.dlv__lead { margin-top: 3px; font-size: var(--text-sm); color: var(--text-secondary); }
.dlv__card { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-surface); }
.dlv__who { display: flex; align-items: center; gap: var(--space-3); }
.dlv__who-b { flex: 1; min-width: 0; }
.dlv__who-b b { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.dlv__who-b span { display: block; font-size: 12px; color: var(--text-tertiary); }
.dlv__chips { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dlv__fbs { display: flex; gap: 5px; flex: none; }
.dlv__enrich { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.dlv__enrich .lm__btn { padding: 6px var(--space-3); font-size: 11.5px; }
/* Le brief, au gabarit de la fiche profil : blocs etiquetes a filet lateral,
   signal en gras suivi de sa preuve datee et de son adresse. */
.dlv__brief { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.dbk { padding-left: var(--space-3); border-left: 2px solid var(--border-default); }
.dbk--own { border-left-color: var(--accent); }
.dbk__k { display: block; margin-bottom: 3px; font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.dbk p { font-size: 12.5px; line-height: var(--leading-normal); color: var(--text-secondary); }
.dbk p + p { margin-top: 5px; }
.dbk b { color: var(--text-primary); font-weight: var(--weight-semibold); }
.dbk__own { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-size: 9.5px; color: var(--accent-text); vertical-align: 1px; }
.dbk em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.dbk em svg { width: 10px; height: 10px; vertical-align: -1px; }
.dbk__open { font-family: var(--font-display); font-size: 14.5px; line-height: var(--leading-snug); color: var(--text-primary); }
/* La liste, a l'anatomie des lignes de l'application. */
.dlist { display: grid; }
.dlist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 6px var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.dlist__row:first-child { border-top: 0; padding-top: 0; }
.dlist__id b { display: block; font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.dlist__id span { font-size: 10.5px; color: var(--text-tertiary); }
.dlist__persona { font-size: 10px; }
.dlist__fb { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); display: grid; place-items: center; color: var(--text-muted); }
.dlist__fb svg { width: 11px; height: 11px; }
.dlist__fb.is-keep { background: rgba(62, 207, 113, .14); border-color: transparent; color: var(--badge-success-text); }
.dlist__sigs { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.dlist__sig { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; white-space: nowrap; }
.dlist__sig i { width: 5px; height: 5px; border-radius: 50%; flex: none; }
.dlist__sig--hot { background: rgba(229, 69, 62, .08); border: 1px solid rgba(229, 69, 62, .22); color: var(--badge-error-text); }
.dlist__sig--hot i { background: var(--color-signal-hot); }
.dlist__sig--warm { background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); color: var(--accent-text); }
.dlist__sig--warm i { background: var(--color-signal-warm); }
.dlist__sigs .alist__pr { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.dlist__sigs .alist__pr svg { width: 10px; height: 10px; }
.dlv__block { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dlv__k { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.dlv__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dlv__act-l, .dlv__act-r { display: flex; flex-wrap: wrap; gap: 6px; }
.dlv__act-l .lm__btn { padding: 6px var(--space-3); font-size: 12px; }
.dlv__fb { display: inline-flex; align-items: center; gap: 5px; padding: 6px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border-default); font-size: 12px; color: var(--text-tertiary); }
.dlv__fb svg { width: 12px; height: 12px; }
.dlv__fb.is-keep { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); color: var(--accent-text); }
.dlv__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 12px; color: var(--text-tertiary); }
.dlv__more .alist__pr { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.dlv__more .alist__pr svg { width: 12px; height: 12px; }
@media (max-width: 680px) { .dlv__where { display: none; } .dlv__sig .alist__pr, .dlv__more .alist__pr { margin-left: 0; } }
.sigview[hidden] { display: none; }

/* les bandeaux debordent le conteneur et sont inclines : un bandeau plat ne vit pas */
.sigview--stream { position: relative; }
.mq-wrap { overflow: hidden; padding: 104px 0 96px; display: grid; gap: var(--space-8); }
.mq { width: 106%; margin-left: -3%; transform: rotate(-6deg); overflow: hidden; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); background: var(--bg-app); }
.mq__track { display: flex; align-items: center; gap: var(--space-8); width: max-content; padding: var(--space-6) var(--space-6); animation: mq-left 52s linear infinite; }
.mq--rev { background: rgba(224, 226, 110, 0.22); border-color: rgba(224, 226, 110, 0.55); }
.mq--rev .mq__ico { border-color: rgba(224, 226, 110, 0.6); }
.mq--rev .mq__logo { background-color: var(--accent-text); }
.mq--rev .mq__track { animation-name: mq-right; animation-duration: 64s; }
.mq.is-paused .mq__track { animation-play-state: paused; }
/* Vue catalogue : le meme bandeau, pose a plat. Il enumere les six familles
   et rend toute la largeur a la carte du signal sur-mesure. */
.mq--flat { width: 100%; margin-left: 0; transform: none; border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-surface-raised); margin-bottom: var(--space-5); }
.mq--flat .mq__track { gap: var(--space-8); padding: var(--space-4) var(--space-6); animation-duration: 64s; }
/* Vue stream : le bandeau du sur-mesure passe devant et porte une ligne de plus. */
.mq--tall .mq__track { padding: var(--space-10) var(--space-6); gap: var(--space-12); }
.mq--tall .mq__ico, .mq--tall .mq__av { width: 56px; height: 56px; border-radius: 12px; }
.mq--tall .mq__ico svg { width: 26px; height: 26px; }
.mq--tall .mq__item .mq__ico, .mq--tall .mq__item .mq__av { margin-top: -13px; }
.mq--tall .mq__txt { gap: 3px; }
.mq--tall .mq__txt b { font-size: var(--text-xl); }
.mq--tall .mq__txt em { font-size: var(--text-sm); }
/* La bulle d'entreprise du produit, reprise telle quelle dans le bandeau. */
.mq--tall .mq__av { font-size: 12px; }
.mq__av { flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: .03em; color: var(--text-secondary); }
.mq__txt i { font-style: normal; font-size: var(--text-xs); line-height: 1.3; color: var(--accent-text); }
@keyframes mq-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes mq-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

.mq__item { flex-shrink: 0; display: flex; align-items: flex-start; gap: var(--space-3); white-space: nowrap; font-family: inherit; text-align: left; background: none; border: 0; padding: 0; }
button.mq__item { cursor: pointer; }
.mq__ico { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--accent-text); }
.mq__ico svg { width: 17px; height: 17px; }
.mq__item .mq__ico { margin-top: -7px; }
button.mq__item:hover .mq__ico, button.mq__item.is-on .mq__ico { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); }
.mq__txt { display: grid; gap: 1px; }
.mq__txt b { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary); line-height: 1.3; }
.mq__txt em { font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.3; }
button.mq__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-md); }
.mq__logo { flex-shrink: 0; width: 19px; height: 16px; background-color: var(--accent); -webkit-mask: url("/aora-logo.png") left center / auto 100% no-repeat; mask: url("/aora-logo.png") left center / auto 100% no-repeat; }

/* l'infobulle vit hors du bandeau, qui est coupe et incline */
.mq__tip { position: absolute; z-index: 6; min-width: 230px; max-width: 330px; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: var(--shadow-xl); }
.mq__tip[hidden] { display: none; }
.mq__tip-k { display: block; font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.mq__tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mq__tip li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-primary); }
.mq__tip li em { font-style: normal; font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* sur telephone : ni inclinaison ni defilement, on fait glisser a la main */
@media (max-width: 767px) {
  .mq-wrap { overflow: visible; padding: var(--space-6) 0 var(--space-2); }
  .mq { width: 100%; margin-left: 0; transform: none; overflow-x: auto; scrollbar-width: none; }
  .mq::-webkit-scrollbar { display: none; }
  .mq__track { animation: none; }
  .mq__dup { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } }

/* ---- Ecrans produit, repris de la direction artistique de l'app ---- */
.appwin--app .appwin__body { padding: var(--space-5); }
.acc__panel .appwin { box-shadow: var(--shadow-xl); }

.ahead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.ahead__t { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--text-primary); }
.ahead__d { margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--text-tertiary); max-width: 44ch; }
.ahead__n { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.ahead__n b { font-family: var(--font-display); font-size: 17px; color: var(--text-primary); margin-right: 2px; }

/* la bande des passages, pastille noire pour celui qui est ouvert */
.aruns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-4); }
.arun { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--bg-app); border: 1px solid var(--border-subtle); font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; }
.arun--on { background: var(--color-neutral-950); border-color: var(--color-neutral-950); color: var(--color-white); font-weight: var(--weight-medium); }
.arun--empty { border-style: dashed; color: var(--text-muted); }

/* pastilles de la table : persona, signal, etat */
.apills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-3); }
.apill { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-app); border: 1px solid var(--border-subtle); font-size: 10px; font-weight: var(--weight-medium); color: var(--text-tertiary); white-space: nowrap; }
.apill--persona { background: rgba(62, 120, 222, .10); border-color: rgba(62, 120, 222, .22); color: #2B5BB0; }
.apill--live { background: rgba(62, 207, 113, .14); border-color: rgba(62, 207, 113, .3); color: var(--badge-success-text); }
.asig { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-size: 10px; color: var(--accent-text); white-space: nowrap; }
.asig--hot { background: rgba(229, 72, 77, .09); border-color: rgba(229, 72, 77, .22); color: #B4323A; }
.asig--off { background: none; border-style: dashed; border-color: var(--border-default); color: var(--text-muted); }
.alist__pr--off { color: var(--text-muted); }

/* la chronologie et la fenetre du signal, en plus grand */
.atime { list-style: none; margin: var(--space-4) 0 0; padding: 0 0 0 var(--space-4); display: grid; gap: 7px; border-left: 2px solid var(--border-default); }
.atime li { position: relative; font-size: 12px; color: var(--text-tertiary); }
.atime li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 5px); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--border-strong); }
.atime li span { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-right: 8px; }
.atime li.is-done { color: var(--text-primary); }
.atime li.is-done::before { background: var(--accent); box-shadow: 0 0 0 3px var(--glass-accent-bg); }
.awin { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-app); border: 1px solid var(--border-subtle); }
.awin__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.awin__head .abrief__k { margin-top: 0; }
.awin__d { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.awin__bar { position: relative; height: 6px; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--bg-surface); border: 1px solid var(--border-default); }
.awin__fill { position: absolute; inset: -1px auto -1px -1px; width: 18%; border-radius: var(--radius-pill); background: var(--accent); }
.awin__dot { position: absolute; top: 50%; left: 18%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-app); }
.awin__n { margin-top: var(--space-2); font-size: 10.5px; line-height: 1.45; color: var(--text-tertiary); }

/* le brief en deux colonnes, comme le tiroir de l'app */
.abrief__grid { display: grid; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
@media (min-width: 620px) { .abrief__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.abrief__grid .abrief__k { margin-top: 0; }
.abrief__src { margin-top: 3px; font-size: 10px; color: var(--accent-text); }
.abrief__note { margin-left: auto; font-size: 10.5px; color: var(--text-tertiary); align-self: center; }
.acc__panel .abrief__name { font-family: var(--font-display); font-size: 21px; font-weight: var(--weight-regular); line-height: 1.15; }
.acc__panel .abrief__role { font-size: 11.5px; }
.acc__panel .abrief__who .avatar { width: 36px; height: 36px; font-size: 12px; }

.apledge { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); }
@media (min-width: 620px) { .apledge { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center; } }
.apledge__fig { font-family: var(--font-display); font-size: clamp(34px, 3.6vw, 46px); line-height: 1; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.apledge__fig span { color: var(--text-tertiary); }
.apledge__fig em { font-style: normal; font-size: 0.46em; color: var(--accent-text); margin-left: 2px; }
.apledge__t { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }

.arule__quote { margin-top: var(--space-4); font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 24px); line-height: var(--leading-snug); color: var(--text-primary); }
.arule__grid { display: grid; gap: var(--space-3) var(--space-5); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
@media (min-width: 620px) { .arule__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arule__grid .abrief__k { margin-top: 0; }

/* ---- La promesse, seconde vue : une carte a la fois, le visuel suit ---- */
.promswitch { margin-bottom: var(--space-5); }
.promview[hidden] { display: none; }
.promsec.is-steps > .container > .pledge { display: none; }
.acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.acc__list, .acc__stage, .acc__panel { min-width: 0; }
.acc__panel .appwin { max-width: 100%; }
@media (min-width: 900px) {
  .acc { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--space-8); align-items: start; }
  .acc__stage { position: sticky; top: calc(var(--header-height) + var(--space-8)); }
}
.acc__list { display: grid; gap: var(--space-3); align-content: start; }
.acc__item { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out); }
.acc__item.is-open { border-color: var(--accent); background: var(--glass-accent-bg); }
.acc__item--pledge { background: var(--glass-accent-bg); border-color: var(--glass-accent-border); }
.acc__item--pledge .acc__ico { background: var(--bg-surface); border-color: var(--glass-accent-border); }
.acc__item--pledge .acc__t { color: var(--accent-text); }
.acc__item--pledge.is-open { border-color: var(--accent); }
.acc__q { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.acc__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acc__ico { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--bg-app); border: 1px solid var(--border-subtle); color: var(--accent-text); }
.acc__ico svg { width: 16px; height: 16px; }
.acc__ico svg:not(.icon-fluent) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acc__item.is-open .acc__ico { background: var(--bg-surface); border-color: var(--glass-accent-border); }
.acc__t { flex: 1; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--text-primary); }
.acc__chev { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-tertiary); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-normal) var(--ease-out); }
.acc__item.is-open .acc__chev { transform: rotate(180deg); color: var(--accent-text); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-out); }
.acc__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--duration-slow); }
.acc__item.is-open .acc__a { grid-template-rows: 1fr; }
.acc__item.is-open .acc__a > div { visibility: visible; transition-delay: 0s; }
.acc__a p { padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 32px + var(--space-3)); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.acc__a p strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.acc__stage { display: grid; }
.acc__panel { grid-area: 1 / 1; display: grid; opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal); }
.acc__panel > .appwin { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.acc__panel > .appwin > .appwin__body { align-content: start; }
.acc__panel.is-shown { opacity: 1; visibility: visible; transition-delay: 0s; }


/* ---- La promesse : trois piliers visuels ---- */
.prom { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .prom { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .prom { grid-template-rows: auto auto auto; }
    .prom__c { grid-row: span 3; grid-template-rows: subgrid; }
  }
}
.prom__c { padding: var(--space-5); display: grid; align-content: start; gap: var(--space-4); }
.prom__viz { position: relative; padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-app); border: 1px solid var(--border-subtle); display: grid; align-content: center; min-height: 218px; }
/* Les titres de carte passent en Gambarino. La taille monte d'un cran : une
   serif a la meme valeur numerique paraitrait plus petite que la sans. */
.prom__t { font-family: var(--font-display); font-size: 21px; font-weight: var(--weight-regular); color: var(--text-primary); line-height: 1.12; letter-spacing: -0.01em; }
.prom__d { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.prom__d strong { color: var(--text-primary); font-weight: var(--weight-medium); }

/* grammaire commune aux trois visuels : une zone neutre, un passage de relais, une zone accent */
.vzone { display: grid; gap: 6px; justify-items: start; padding: var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border-default); }
.vzone--on { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); }
.vown { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.vown::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.vown--on { color: var(--accent-text); }
.vown--on::before { background: var(--accent); }
.vdiv { display: flex; align-items: center; gap: var(--space-2); }
.vdiv span { flex: 1; height: 1px; background: var(--border-default); }
.vdiv em { font-style: normal; font-size: 9px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.vk { font-size: 9.5px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.vchans { display: flex; flex-wrap: wrap; gap: 4px; }

/* le signal rattache a une personne */
.pviz { display: grid; gap: var(--space-2); justify-items: start; }
.pviz__link { justify-self: center; }
.pviz__sigs { width: 100%; display: grid; gap: 4px; }
.pviz__sig { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-3); border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--border-default); font-size: var(--text-xs); color: var(--text-secondary); }
.pviz__sig em { margin-left: auto; font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pviz__to { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--glass-accent-border); background: var(--glass-accent-bg); }
.pviz b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; }
.pviz em { display: block; font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 1px; }
.pviz__link { color: var(--accent-text); }
.pviz__link svg { width: 16px; height: 16px; transform: rotate(90deg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pviz__src { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--accent-text); font-weight: var(--weight-medium); }
.pviz__src svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.proof-panel--over { position: absolute; inset: 0; z-index: 2; overflow: auto; border-top: 0; border-radius: var(--radius-md); background: var(--accent-muted); padding: var(--space-4); }
button.pviz__src { cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--glass-accent-border); }
button.pviz__src:hover { text-decoration-color: currentColor; }
button.pviz__src:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* la rapidite : du signal publie au brief livre, le meme jour */
.tviz { display: grid; gap: var(--space-2); align-content: center; }
.tviz__fig { font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 38px); line-height: 1; color: var(--text-primary); }
.tviz__fig em { font-style: normal; color: var(--accent-text); margin-left: 4px; }
.tviz__steps { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 5px; border-left: 2px solid var(--border-default); }
.tviz__steps li { position: relative; padding-left: var(--space-4); font-size: var(--text-xs); color: var(--text-tertiary); }
.tviz__steps li::before { content: ""; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--border-strong); }
.tviz__steps li span { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: var(--weight-medium); margin-right: 5px; }
.tviz__steps li.is-done { color: var(--text-primary); }
.tviz__steps li.is-done::before { background: var(--accent); box-shadow: 0 0 0 3px var(--glass-accent-bg); }
.tviz__win { margin-top: var(--space-2); font-size: 11px; color: var(--text-muted); line-height: var(--leading-snug); }

/* le dernier kilometre : concu par Aora, declenche par le client */
.mviz { display: grid; gap: var(--space-2); align-content: center; }
.mviz__steps { display: flex; flex-wrap: wrap; gap: 4px; }
.mviz__step { display: inline-flex; align-items: center; gap: 4px; padding: 4px var(--space-2); border-radius: var(--radius-pill); background: var(--bg-app); border: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-primary); }
.mviz__step svg { width: 10px; height: 10px; flex-shrink: 0; color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lm__btn--soon { border-style: dashed; color: var(--text-tertiary); }
.lm__btn--soon i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.mviz .lm__btn { padding: 5px var(--space-2); font-size: 11px; gap: 4px; }
.mviz .lm__btn svg { width: 12px; height: 12px; }

/* le signal sur mesure */
.prom__wide { margin-top: var(--space-5); padding: var(--space-6); display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .prom__wide { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-10); padding: var(--space-8); } }
.prom__wtext { display: grid; gap: var(--space-3); align-content: start; }
/* La carte large suit les trois autres : Gambarino herite de .prom__t, le
   fragment accentue se fond dedans comme dans tous les titres serif. */
.prom__t--lg { font-size: clamp(24px, 2.4vw, 30px); font-weight: var(--weight-regular); line-height: 1.08; letter-spacing: -0.015em; }
.prom__wmeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.cviz { padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg-app); border: 1px solid var(--border-subtle); display: grid; gap: var(--space-3); }
.cviz__bar { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); }
.cviz__rule { font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 23px); line-height: var(--leading-snug); color: var(--text-primary); }
.cviz__grid { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
@media (min-width: 420px) { .cviz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.cviz__k { display: block; font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.cviz__grid p { margin-top: 3px; font-size: var(--text-sm); color: var(--text-primary); }
.cviz__who { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ---- Les tetes de chapitre internes a la promesse ---- */
.pblock { max-width: 70ch; margin-top: var(--space-10); }
.pblock--sep { padding-top: var(--space-8); border-top: 1px solid var(--border-default); }
.pblock__t { font-size: clamp(24px, 2.6vw, 32px); line-height: var(--leading-snug); letter-spacing: -0.02em; margin-top: var(--space-2); }
.pblock__d { margin-top: var(--space-3); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); }

/* ---- Le parcours : les étapes défilent, l'écran les suit ---- */
.fsteps { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 980px) { .fsteps { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-10); } }
.fsteps__list { display: grid; gap: var(--space-4); }
.fstep { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out); }
.fstep:hover { background: var(--glass-bg); }
.fstep.is-active { background: var(--bg-surface-raised); border-color: var(--accent); box-shadow: 0 1px 2px rgba(10, 12, 6, .06), 0 10px 24px rgba(120, 124, 30, .14); }
.fstep:not(.is-active) .flow__st { color: var(--text-secondary); }
.fstep:not(.is-active) .flow__sd, .fstep:not(.is-active) .flow__meta { opacity: .64; }
.fstep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flow__n { grid-column: 1; display: flex; align-items: center; }
.fstep .flow__st, .fstep .flow__sd, .fstep .flow__meta { grid-column: 2; }
.flow__n:empty { display: none; }
.flow__n > span:first-child { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); }
.flow__n .text-label { color: var(--text-tertiary); }
.flow__st { font-size: clamp(21px, 2.2vw, 27px); line-height: var(--leading-snug); letter-spacing: -0.02em; color: var(--text-primary); transition: color var(--duration-slow) var(--ease-out); }
.flow__sd { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); transition: opacity var(--duration-slow) var(--ease-out); }
.flow__sd strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.flow__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); transition: opacity var(--duration-slow) var(--ease-out); }
.flow__bar { display: none; }

.fsteps__stage { position: relative; min-height: 420px; }
@media (min-width: 980px) { .fsteps__stage { position: sticky; top: calc(var(--header-height) + var(--space-8)); } }
.fstage { display: grid; align-content: start; position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out), visibility 0s linear var(--duration-slow); }
.fstage.is-shown { position: relative; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .fstage { transition: none; } }
html:not(.js) .fstage { position: relative; opacity: 1; visibility: visible; transform: none; margin-bottom: var(--space-4); }
.fstage .appwin { box-shadow: var(--shadow-xl); }
/* Le resultat, dit dans l'ecran qui le produit : derniere ligne de la fenetre,
   dans la teinte d'accent, comme un recapitulatif que le produit afficherait. */
.awout { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-size: 12px; line-height: var(--leading-normal); color: var(--text-secondary); }
.awout svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--accent-text); }
.awout b { color: var(--accent-text); font-weight: var(--weight-semibold); }

.steps { display: grid; gap: var(--space-10); }
@media (min-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-16); align-items: start; }
}

.step { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-slow) var(--ease-out), border-color var(--duration-slow) var(--ease-out); }
.step:hover { background: var(--glass-bg); }
.step:not(.is-active) .step__title { color: var(--text-secondary); }
.step:not(.is-active) .step__desc, .step:not(.is-active) .step__meta { opacity: .72; }
.step.is-active { background: var(--bg-surface); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.step__title { font-size: clamp(22px, 2.3vw, 30px); }
.step__desc { color: var(--text-secondary); font-size: var(--text-base); }
.step__desc strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.step__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* la progression de l'étape active */
.step__bar { position: absolute; left: 0; top: var(--space-5); bottom: var(--space-5); width: 2px; border-radius: 2px; background: var(--border-default); overflow: hidden; }
.step.is-active .step__bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); }

/* Le panneau unique, collant */
@media (min-width: 900px) { .steps__stage { position: sticky; top: calc(var(--header-height) + var(--space-8)); } .steps__stage .step__visual { min-height: 540px; display: grid; } }
@media (max-width: 899px) { .steps__list { gap: var(--space-2); } .step { padding: var(--space-4) var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .steps__stage .step__visual { transition: none; } }
/* sans JS, on empile les visuels normalement */
html:not(.js) .step { background: var(--bg-surface); border-color: var(--border-default); }

/* Mock persona [COMPOSITE] */
.persona { display: grid; gap: var(--space-4); align-content: space-between; }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { margin-left: -6px; border: 2px solid var(--bg-surface-raised); }
.avatar-group .avatar:first-child { margin-left: 0; }

/* Mock suivi [COMPOSITE] */
/* ---- Étape 1 : le tableau des signaux de la règle ---- */
.spec { display: grid; gap: 5px; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.spec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 2px; }
.spec__scope { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.spec__row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "dot name win" ". vol vol"; align-items: center; gap: 2px var(--space-3); }
.spec__row .signal-dot { grid-area: dot; }
.spec__name { grid-area: name; font-size: var(--text-sm); color: var(--text-primary); }
.spec__win { grid-area: win; font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.spec__vol { grid-area: vol; font-size: var(--text-xs); color: var(--text-tertiary); }
.spec__row--off .spec__name, .spec__row--off .spec__win { color: var(--text-tertiary); }
.spec__row--off .spec__vol { color: var(--text-muted); }
.spec__row--off .signal-dot { background: transparent; border: 1px solid var(--text-muted); }
@media (min-width: 560px) {
  .spec__row { grid-template-columns: 8px minmax(0, 1fr) auto auto; grid-template-areas: "dot name win vol"; gap: var(--space-3); }
  .spec__vol { text-align: right; white-space: nowrap; }
}

/* ---- Étape 2 : un signal ouvert ---- */
@media (min-width: 560px) { .sigview__checks ul { grid-template-columns: 1fr 1fr; } }

/* ---- Étape 3 : la livraison et ce qu'on dit en décrochant ---- */
.deliv__main { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-default); display: grid; gap: var(--space-3); }
.deliv__who { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.deliv__hook { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); }
.deliv__quote { margin: var(--space-2) 0 0; font-size: var(--text-md); line-height: 1.45; color: var(--text-primary); }
.deliv__pitch { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.deliv__act { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.deliv__fb { display: flex; gap: var(--space-2); }
.deliv__fb span { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-surface-raised); font-size: var(--text-xs); color: var(--text-tertiary); }
.deliv__fb span svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.deliv__fb .is-keep { background: rgba(62, 207, 113, .14); border-color: transparent; color: var(--badge-success-text); }
.deliv__rest { display: grid; gap: var(--space-2); }
.deliv__row { display: flex; align-items: center; gap: var(--space-3); }
.deliv__rname { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deliv__row em { font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }
.deliv__row--off { opacity: .6; }
.deliv__foot { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-tertiary); }
.deliv__foot b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ================================================================
   8. POURQUOI AORA — bento [COMPOSITE]
   ================================================================ */
.bento { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bento__item--3 { grid-column: span 2; } .bento .bento__item--6 { grid-column: span 6; flex-direction: row; align-items: flex-start; gap: var(--space-6); min-height: 0; } .bento__item--6 .bento__desc { max-width: 78ch; } }
.bento__item { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-height: 200px; }
.bento__icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); display: flex; align-items: center; justify-content: center; color: var(--accent-text); }
.bento__icon svg { width: 18px; height: 18px; }
.bento__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); }

.bento__desc { color: var(--text-secondary); font-size: var(--text-base); line-height: var(--leading-relaxed); }
.bento__desc strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.bento__item--trust { background: var(--glass-bg); }
.bento__rules { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.bento__rules li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); font-size: var(--text-base); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.bento__rules svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent-text); }
.bento__rules strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.bento__foot { margin-top: auto; padding-top: var(--space-3); font-size: var(--text-xs); color: var(--text-tertiary); display: flex; align-items: center; gap: var(--space-2); }

/* ================================================================
   9. CATALOGUE
   ================================================================ */
@media (min-width: 620px) { .catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sig { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.sig__head { display: flex; align-items: center; gap: var(--space-3); }
/* [COMPOSITE] pastille d'icône de famille — iconographie Fluent, voir le sprite */
.sig__icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-lg); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.sig__icon svg { width: 22px; height: 22px; }
.sig__family { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.sig__name { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); }
.sig__ex { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.sig__who { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-3); }
.sig__who .avatar { flex-shrink: 0; }
.sig__who b { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.sig__who span { font-size: var(--text-xs); color: var(--text-tertiary); line-height: var(--leading-normal); }
/* ---- Les trois différences, et la frontière assumée ---- */
/* ---- La phrase de cloture de la promesse ---- */
.closing { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-default); display: grid; gap: var(--space-5); justify-items: start; }
@media (min-width: 900px) {
  .closing { grid-template-columns: minmax(0, 1.4fr) auto; gap: var(--space-10); align-items: center; }
}
.closing__p { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 78ch; }
.closing__p strong { color: var(--text-primary); font-weight: var(--weight-medium); }

.notfor { margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--glass-bg); border: 1px dashed var(--border-strong); }
.notfor__k { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.notfor p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 92ch; }

/* ---- Signaux : deux cartes, dont un carrousel de familles ---- */
/* Le catalogue est la partie copiable : tout le monde liste des signaux. Un
   signal taille pour un marche ne se replique pas, il prend donc les deux tiers. */
.sigcard { padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
.sigcard__head { display: flex; align-items: center; gap: var(--space-4); }
.sigcard__t { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-primary); }
.sigcard__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-lg); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); display: grid; place-items: center; color: var(--accent-text); }
.sigcard__icon svg { width: 21px; height: 21px; }
.sigcard--own { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); }
.sigcard__d { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); }
.sigcard__case { padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-surface-raised); border: 1px solid var(--border-default); }
.sigcard__case p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.sigcard__case strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.sigcard__meta { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Le cas Cegid, raconte a l'ecran : la demande du client, la regle qu'on en a
   ecrite, puis une personne livree avec sa preuve datee. */
.appwin--cust { margin-top: var(--space-2); }
.appwin--cust .appwin__body { padding: var(--space-5) var(--space-6) var(--space-6); }
/* Le procede en trois temps : ce qu'ils ont demande, la regle qu'on en a
   ecrite, la personne qu'elle livre. Cote a cote, la carte cesse de s'allonger. */
/* Identite d'entreprise : meme gabarit que la fiche de l'application —
   pastille carree aux initiales, nom en Gambarino, puis l'etiquette et les
   reperes separes par des points. */
.ident { display: flex; align-items: center; gap: var(--space-3); }
.ident__av { flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); letter-spacing: .03em; color: var(--text-secondary); }
.ident__b { min-width: 0; display: grid; gap: 5px; }
.ident__name { font-family: var(--font-display); font-size: 25px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); }
.ident__name--sm { font-size: 18px; }
.ident__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ident__tag { padding: 2px 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--weight-medium); background: var(--glass-accent-bg); color: var(--accent-text); border: 1px solid var(--glass-accent-border); }
.ident__sep { color: var(--text-muted); font-size: 12px; }
.ident__t { font-size: 12px; color: var(--text-tertiary); }
.ident--sm .ident__av { width: 36px; height: 36px; border-radius: 8px; font-size: 10px; }
/* La personne livree, en bulle de profil sous le cabinet qui vient d'ouvrir. */
.cust__card { display: grid; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface); }
.cust__person { display: flex; align-items: center; gap: var(--space-3); }
.cust__opener, .cust__act { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
/* L'accroche prete a dire, a la place de la fiche societe : c'est elle qu'on
   vient chercher une fois la personne trouvee. */
.cust__opener { display: flex; gap: var(--space-3); }
.cust__opener-i { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--accent-text); }
.cust__opener p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-primary); }
/* Ce que la regle fait, en phrases plutot qu'en etiquettes. */
.cust__facts { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); display: grid; gap: var(--space-2); }
.cust__facts li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 12px; line-height: var(--leading-normal); color: var(--text-secondary); }
.cust__facts svg { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--accent-text); }
/* L'auteur de la demande : la citation cesse de flotter sans voix. */
.cust__sign { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.cust__act { display: flex; flex-wrap: wrap; gap: 6px; }
.cust__act .lm__btn { padding: 6px var(--space-3); font-size: 12px; }
.cust__person b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.cust__person span:not(.avatar) { font-size: 11.5px; color: var(--text-tertiary); }
.cust__proof { display: inline-flex; align-items: center; gap: 5px; width: fit-content; }
.cust__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .cust__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.cust__step { display: grid; gap: var(--space-3); align-content: start; }
@media (min-width: 860px) { .cust__step + .cust__step { padding-left: var(--space-6); border-left: 1px solid var(--border-subtle); } }
.cust__step-k { display: flex; align-items: center; gap: var(--space-2); font-size: 9.5px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.cust__step-n { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; color: var(--accent-text); }
.cust__quote { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 23px); line-height: var(--leading-snug); color: var(--text-primary); }
.cust__rule { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--glass-accent-border); background: var(--glass-accent-bg); }
.cust__rule-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cust__rule-name { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.cust__who { flex: 1 1 58%; min-width: 0; }
.cust__who b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.cust__who span { font-size: 11.5px; color: var(--text-tertiary); }


/* Marqueur des familles rares, et bande des signaux sur mesure */
.sig-custom { margin-top: var(--space-4); padding: var(--space-6); display: grid; gap: var(--space-5); align-items: start; border-color: var(--glass-accent-border); background: var(--glass-accent-bg); }
@media (min-width: 760px) { .sig-custom { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); } }
.sig-custom__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--bg-surface-raised); border: 1px solid var(--glass-accent-border); display: grid; place-items: center; color: var(--accent-text); }
.sig-custom__icon svg { width: 26px; height: 26px; }
.sig-custom__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: var(--leading-snug); }
.sig-custom__desc { margin-top: var(--space-3); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 70ch; }
.sig-custom__meta { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-tertiary); }

/* ================================================================
   10. PREUVE
   ================================================================ */
.proof { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); } }
.proof__case { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.proof__case-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.proof__case-kpis .kpi-card__value { font-size: clamp(32px, 4vw, 44px); white-space: nowrap; }
.proof__case-note { font-size: var(--text-sm); color: var(--text-secondary); border-left: 2px solid var(--accent); padding-left: var(--space-3); }
.proof__quotes { display: grid; gap: var(--space-4); }
.team { padding: var(--space-6); display: grid; gap: var(--space-4); }
.team__t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.team__d { font-size: var(--text-sm); color: var(--text-secondary); }
.team__people { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .team__people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team__p { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); min-height: 64px; }
.team__p .avatar { flex-shrink: 0; }
.team__p .wf__tag { left: auto; right: var(--space-2); }
.wf.quote { padding-top: var(--space-8); }
.team__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.team__role { font-size: var(--text-xs); color: var(--text-tertiary); }
.quote { padding: var(--space-6); min-height: 180px; display: flex; flex-direction: column; gap: var(--space-4); }
.quote__text { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-secondary); }
.quote__who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.quote__name { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
.quote__role { font-size: var(--text-xs); color: var(--text-tertiary); }
.quote__brief { font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); line-height: var(--leading-relaxed); }
.measure { margin-top: var(--space-12); display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .measure { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.measure__item { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.measure__t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); }
.measure__d { font-size: var(--text-sm); color: var(--text-secondary); }

/* ================================================================
   11. OFFRE [COMPOSITE: carte de prix]
   ================================================================ */
/* ---- L'engagement, en pastille coloree et rien de plus ---- */
.plan__rate { align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-3); border-radius: var(--radius-pill); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-size: var(--text-xs); color: var(--accent-text); white-space: nowrap; }
.plan__rate b { font-weight: var(--weight-semibold); }
/* La periode de facturation, sous la description : elle porte la remise,
   que les cartes n'ont donc plus a repeter. */
.billing { width: fit-content; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 3px; }
.billing .toggle-group__item { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--space-4); font-size: var(--text-xs); line-height: 1.2; border-radius: var(--radius-pill); border: 0; background: none; color: var(--text-tertiary); cursor: pointer; font-family: inherit; }
.billing .toggle-group__item em { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--accent-text); }
.billing .toggle-group__item--active { background: var(--bg-hover); color: var(--text-primary); box-shadow: var(--shadow-xs); }

.plans { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; } }
@media (min-width: 1200px) { .plans { gap: var(--space-5); } }
.plan { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-xl); background: var(--bg-surface-raised); }
.plan__badge { position: absolute; top: -12px; left: var(--space-6); background: var(--bg-surface-raised); border: 1px solid var(--accent); color: var(--accent-text); padding: 3px var(--space-3); }
.plan__name { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.plan__for { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plan__price-v { font-family: var(--font-display); font-size: clamp(36px, 4vw, 46px); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.plan__price-u { font-size: var(--text-sm); color: var(--text-tertiary); }
.plan__price-s { width: 100%; font-size: var(--text-xs); color: var(--text-tertiary); }
.plan__list { display: grid; gap: var(--space-2); }
.plan__list li { display: grid; grid-template-columns: 14px 1fr; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.plan__col-t { margin-top: var(--space-2); }
/* Contrepartie de l'offre Découverte : ce qu'on demande en échange */

/* Trois tuiles égales sous le bloc d'activation */

.step__link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.step__link:hover { color: var(--text-primary); }
.field-row { display: grid; gap: var(--space-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }
.plan__tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---- Carte a deux vues : le gratuit vit dans la carte Solopreneur ---- */
.plan--switch { position: relative; }

/* La bascule de la carte se range sur la ligne du titre. */
.plan__title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.plan__switch { align-self: center; flex: none; }
.plan__switch.toggle-group { background: var(--bg-app); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 3px; }
.plan__switch .toggle-group__item { padding: 5px var(--space-4); font-size: var(--text-xs); line-height: 1.2; letter-spacing: 0; border-radius: var(--radius-pill); }
.plan__switch .toggle-group__item--active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-xs); }
/* les deux vues partagent la meme cellule : la carte ne change pas de taille */
.plan__opts { display: grid; flex: 1; }
.plan__opt { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-5); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal); }
.plan__opt.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.plan__opt .plan__cta { margin-top: auto; }
/* les lignes barrees d'un forfait */
.ptag--off { color: var(--text-muted); border-style: dashed; }
.ptag--off::before { background: transparent; border: 1px solid var(--text-muted); }
/* l'option payante une seule fois */
.plan__addon { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--glass-bg); border: 1px dashed var(--border-strong); }
.plan__addon p { margin-top: var(--space-2); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); }
.plan__addon p strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.ptag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--glass-bg); border: 1px solid var(--border-default); font-size: var(--text-xs); color: var(--text-primary); }
.ptag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ptag--off { color: var(--text-muted); border-style: dashed; }
.ptag--off::before { background: var(--text-muted); opacity: .5; }
.plan__hl { padding: var(--space-4); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.plan__hl strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.plan__exchange { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); }
.plan__exchange .text-label { color: var(--accent-text); }
.plan__exchange p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.plan__exchange strong { color: var(--text-primary); font-weight: var(--weight-medium); }
/* ---- Conformité : la section qui désamorce la revue sécurité ---- */
.trust__inner { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .trust__inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-12); } }
.trust__title { font-size: clamp(24px, 2.6vw, 32px); line-height: var(--leading-snug); letter-spacing: -0.02em; }
.trust__badges { list-style: none; display: grid; gap: var(--space-3); margin: 0; padding: 0; }
/* Trois colonnes : le sceau passe au-dessus du texte, sans quoi la largeur
   d une colonne couperait la ligne de nom. */
@media (min-width: 680px) { .trust__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Les sceaux remplacent les cartes : le visuel officiel porte le propos, la
   carte n'a plus a l'encadrer. La mention d'avancement reste, en retrait. */
.trust__badge { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-surface-raised); border: 1px solid var(--border-default); box-shadow: var(--shadow-xs); }
.trust__seal { flex: none; width: 58px; height: 58px; color: var(--text-secondary); opacity: .9; }
.trust__badge-b { min-width: 0; display: grid; gap: 4px; }
/* « In progress » : dit, jamais crie. Pas de pastille, pas de cadre. */
.trust__wip { white-space: nowrap; font-style: normal; font-size: 10.5px; font-weight: var(--weight-regular); color: var(--text-muted); letter-spacing: 0; }
.trust__wip::before { content: "·"; margin: 0 5px 0 2px; }
.trust__badge-name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.trust__badge-state { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-tertiary); }
.field__opt { margin-left: 6px; font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--text-tertiary); text-transform: none; letter-spacing: 0; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--text-tertiary) 50%), linear-gradient(-45deg, transparent 49%, var(--text-tertiary) 50%); background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px); background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--space-10); cursor: pointer; }
.plan__list svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; color: var(--accent-text); }
.plan__list li.is-off { color: var(--text-tertiary); }
.plan__list li.is-off svg { color: var(--text-muted); }
.plan__cta { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.plan__cta .btn { width: 100%; min-height: 44px; }
.plan__cta small { font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; }
.plan__cols { display: grid; gap: var(--space-5); }
@media (min-width: 560px) and (max-width: 899px) { .plan__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan__col-t { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); margin-bottom: var(--space-2); font-weight: var(--weight-semibold); }
.anchor { margin-top: var(--space-6); padding: var(--space-5) var(--space-6); display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .anchor { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); } }
.anchor__t { font-size: var(--text-md); color: var(--text-primary); }
.anchor__t strong { font-weight: var(--weight-semibold); }
.anchor__s { font-size: var(--text-xs); color: var(--text-tertiary); max-width: 34ch; }

/* ================================================================
   12. FAQ [COMPOSITE: accordéon]
   ================================================================ */
.faq { display: grid; gap: var(--space-3); }
.faq__item + .faq__item { margin-top: 0; }
.faq { max-width: 820px; margin-inline: auto; }
.faqlay { display: grid; gap: var(--space-8); }
.faqlay .faq { max-width: none; margin-inline: 0; }
.faqlay__aside { display: grid; gap: var(--space-3); align-content: start; }
.faqlay__aside > .pill-info { justify-self: start; }
.faqlay__aside .shead2__t { margin-top: var(--space-2); }
.faqlay__aside .lead { margin-top: 0; }
.faqlay__cta { justify-self: start; margin-top: var(--space-3); }
@media (min-width: 980px) {
  .faqlay { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .faqlay__aside { position: sticky; top: calc(var(--header-height) + var(--space-10)); }
}
.faq__item { overflow: hidden; }
.wf.faq__item .faq__q { padding-top: var(--space-10); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: transparent; border: 0; color: var(--text-primary); text-align: left; cursor: pointer; font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-snug); min-height: 64px; }
.faq__q:hover { background: var(--glass-bg); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq__q svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--duration-normal) var(--ease-out); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-out); }
.faq__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--duration-slow); }
.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }
.faq__a p { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-md); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.faq__a p + p { padding-top: var(--space-4); }
.faq__a p strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__q svg { transition: none; } }

/* ================================================================
   13. CTA FINAL + FORMULAIRE
   ================================================================ */
.final { position: relative; overflow: hidden; }
.final__bg { position: absolute; inset: 0; pointer-events: none; }
.final__bg .pixel-grid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1200px, 160vw); gap: 4px; opacity: .10; }
.final__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--bg-app-rgb),0.55) 0%, var(--bg-app) 70%); }
.final__inner { position: relative; z-index: 1; display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 1024px) { .final__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }
.final__title { font-size: clamp(32px, 5vw, 56px); margin-bottom: var(--space-5); max-width: 16ch; }
.form { padding: var(--space-6); display: grid; gap: var(--space-5); background: var(--bg-surface-raised); }
.form__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.form__sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-top: var(--space-1); }
.field { display: grid; gap: var(--space-2); align-content: start; }
.field__help { min-height: 2em; }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.field label span { color: var(--text-tertiary); font-weight: var(--weight-regular); }
.field .input { min-height: 44px; font-size: var(--text-md); }
.field__help { font-size: var(--text-xs); color: var(--text-tertiary); }
.field__err { display: none; font-size: var(--text-xs); color: var(--color-error); align-items: center; gap: var(--space-1); }
.field.is-invalid .input { border-color: var(--color-error); }
.field.is-invalid .field__err { display: inline-flex; }
.form__submit { display: grid; gap: var(--space-3); }
.form__submit .btn { min-height: 48px; width: 100%; }
.form__error { display: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(229, 69, 62, 0.12); color: var(--color-error); font-size: var(--text-sm); }
.form__error.is-shown { display: block; }
.form__privacy { font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; }
.form__privacy a { color: var(--text-secondary); }
.form__success { display: none; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); gap: var(--space-3); }
.form__success.is-shown { display: grid; }
.form__success svg { width: 24px; height: 24px; color: var(--accent-text); }
.form__success h3 { font-size: var(--text-lg); color: var(--text-primary); }
.form__success p { font-size: var(--text-sm); color: var(--text-secondary); }

/* ================================================================
   14. FOOTER
   ================================================================ */
.footer { border-top: 1px solid var(--border-default); padding: var(--space-12) 0 var(--space-8); background: var(--bg-app); }
.footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__brand { display: grid; gap: var(--space-3); max-width: 34ch; }
.footer__tag { font-size: var(--text-sm); color: var(--text-tertiary); }
.footer h4 { font-size: var(--text-xs); letter-spacing: var(--tracking-wider); color: var(--text-tertiary); margin-bottom: var(--space-3); font-weight: var(--weight-semibold); }
.footer ul { display: grid; gap: 0; }
.footer li a { display: inline-block; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--text-tertiary); text-decoration: none; }
.footer li a:focus-visible, .deliver__proof:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.footer li a:hover { color: var(--text-primary); }
.footer__bottom { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; font-size: var(--text-xs); color: var(--text-tertiary); }

/* Inter-section CTA [COMPOSITE] */

/* ================================================================
   14. PAGES DEDIEES — socle commun
   ================================================================ */
/* Hors accueil, aucun hero sombre ne passe derriere la barre : elle doit
   porter ses couleurs de fond clair des le premier pixel. Sans quoi le logo
   blanc et les liens gris clair tombent sur un fond creme. */
.nav--solid { background: rgba(var(--bg-app-rgb), 0.92); border-bottom-color: var(--border-subtle); }
.nav--solid .nav__logo { color: var(--text-primary); }
.nav--solid .nav__links a { color: var(--text-secondary); }
.nav--solid .nav__links a:hover { color: var(--text-primary); background: var(--glass-bg); }
.nav--solid .btn--ghost { border-color: var(--border-default); color: var(--text-primary); background: var(--bg-surface); }
.nav--solid .btn--ghost:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.nav__links a[aria-current="page"] { color: var(--text-primary); background: var(--glass-accent-bg); }

/* ---- Tete de page : le pendant sobre du hero, sur fond clair ---- */
.pghead { padding-top: calc(var(--header-height) + var(--space-12)); padding-bottom: var(--space-12); }
@media (min-width: 768px) { .pghead { padding-top: calc(var(--header-height) + var(--space-16)); } }
.pghead__in { display: grid; justify-items: start; gap: var(--space-5); max-width: 860px; }
.pghead__back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-tertiary); text-decoration: none; }
.pghead__back svg { width: 14px; height: 14px; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pghead__back:hover { color: var(--text-primary); }
.pghead__t { font-size: clamp(36px, 5.4vw, 64px); }
.pghead__d { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 62ch; }
.pghead__cta { margin-top: var(--space-2); }

/* Trois faits, rangee seche sous le titre : pas de carte, juste une regle. */
.pgfacts { display: grid; gap: var(--space-5); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
@media (min-width: 680px) { .pgfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
.pgfact { display: grid; gap: var(--space-1); }
.pgfact__v { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pgfact__k { font-size: var(--text-sm); color: var(--text-tertiary); line-height: var(--leading-normal); }

/* ================================================================
   15. PAGE « HOW IT WORKS »
   ================================================================ */
/* Le second paragraphe d'une etape n'existe que sur la page dediee : sur la
   landing, l'etape devait tenir en un bloc lisible d'un coup d'oeil. */
.flow__sd--more { font-size: var(--text-sm); color: var(--text-tertiary); }
.fstep:not(.is-active) .flow__sd--more { display: none; }
@media (max-width: 979px) { .flow__sd--more { display: none; } }

/* ---- Les deux premieres semaines ----
   Un calendrier se lit de gauche a droite : des que la largeur le permet, les
   cinq jalons passent en ligne et le fil devient horizontal. En dessous, on
   retombe sur la colonne, qui reste la seule forme lisible sur telephone. */
.tline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tline__i { position: relative; display: grid; gap: var(--space-2); padding: 0 0 var(--space-8) var(--space-8); }
.tline__i::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 0; width: 1px; background: var(--border-default); }
.tline__i--last::before { display: none; }
.tline__i::after { content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg-app); box-shadow: inset 0 0 0 3px var(--bg-app), inset 0 0 0 7px var(--accent); }
.tline__d { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); }
.tline__b { display: grid; gap: var(--space-2); align-content: start; }
.tline__t { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.12; letter-spacing: -0.01em; color: var(--text-primary); }
.tline__p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.tline__p strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.tline__w { justify-self: start; font-size: var(--text-xs); color: var(--text-tertiary); padding: 3px var(--space-3); border-radius: var(--radius-pill); background: var(--glass-bg); border: 1px solid var(--border-subtle); }

@media (min-width: 1000px) {
  .tline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
  .tline__i { padding: var(--space-8) var(--space-1) 0 0; align-content: start; }
  /* Le fil court sous la pastille, d'un jalon au suivant, et s'arrete au dernier. */
  .tline__i::before { left: 15px; right: calc(var(--space-5) * -1); top: 7px; bottom: auto; width: auto; height: 1px; }
  .tline__i--last::before { display: none; }
  .tline__i::after { top: 0; left: 0; }
  .tline__b { gap: var(--space-3); }
  .tline__w { font-size: 10.5px; padding: 2px var(--space-2); }
}
@media (max-width: 999px) {
  .tline__i { grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-6); }
  .tline__d { padding-top: 3px; }
  .tline__p { max-width: 68ch; }
}

/* ---- Ce qui tourne entre deux livraisons ---- */
.runs { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .runs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.runcard { padding: var(--space-6); display: grid; align-content: start; gap: var(--space-3); }
.runcard__n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); }
.runcard__t { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(20px, 2vw, 24px); line-height: 1.12; letter-spacing: -0.01em; color: var(--text-primary); }
.runcard__p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.runcard__f { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.runcard__win { display: grid; gap: 5px; margin-top: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.runcard__wrow { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-primary); }
.runcard__wrow em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.runcard__q { margin: var(--space-1) 0 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--glass-bg); border-left: 2px solid var(--accent); font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-primary); }
.runcard__q cite { display: block; margin-top: var(--space-2); font-family: var(--font-body); font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); }

/* ---- La boucle : les quatre temps a gauche, la question posee a droite ---- */
.looplay { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 980px) { .looplay { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-10); } }
.looplay__l { display: grid; gap: var(--space-5); align-content: start; }
.loopstep { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.loopstep__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); }
.loopstep__t { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); }
.loopstep__p { margin-top: 3px; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.looplay__note { margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.looplay__note strong { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* La question telle que le produit la pose : hypothese, preuve, objection, choix. */
.aq__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.aq__hypo { margin-top: var(--space-3); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-primary); }
.aq__hypo strong { font-weight: var(--weight-semibold); }
.aq__k { font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-tertiary); }
.aq__ev { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-app); border: 1px solid var(--border-subtle); display: grid; gap: var(--space-3); }
.aq__row { display: flex; align-items: center; gap: var(--space-3); }
.aq__who { flex: 1; min-width: 0; display: grid; }
.aq__who b { font-size: var(--text-sm); color: var(--text-primary); font-weight: var(--weight-medium); }
.aq__who span { font-size: var(--text-xs); color: var(--text-tertiary); }
.aq__fb { display: inline-flex; align-items: center; gap: 5px; padding: 3px var(--space-3); border-radius: var(--radius-pill); background: rgba(229, 69, 62, .10); font-size: var(--text-xs); color: var(--color-signal-hot); white-space: nowrap; }
.aq__fb svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.aq__why { font-size: var(--text-sm); font-style: italic; line-height: var(--leading-normal); color: var(--text-secondary); }
.aq__obj { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.aq__obj p { margin-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.aq__ask { margin-top: var(--space-4); }
.aq__q { margin-top: var(--space-2); font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; color: var(--text-primary); }
.aq__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.aq__opt { padding: 5px var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-app); font-size: var(--text-xs); color: var(--text-secondary); }
.aq__opt--on { border-color: var(--accent); background: var(--glass-accent-bg); color: var(--accent-text); }
.appwin--ask .appwin__body { display: block; }

/* ---- Et ensuite, ca atterrit ---- */
.lands { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .lands { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); } }
.lands__l { display: grid; justify-items: start; gap: var(--space-5); }
.lands__t { font-size: clamp(28px, 3.6vw, 44px); }
.lands__d { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 54ch; }
.lands__r { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.lands__r li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface-raised); border: 1px solid var(--border-subtle); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.lands__r svg { width: 15px; height: 15px; margin-top: 3px; color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lands__r b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* ================================================================
   16. PAGE « PRICING »
   ================================================================ */
/* Quatre forfaits de front : la landing en range trois, parce que le gratuit y
   vit derriere la carte Solopreneur. Ici il y a la place de tout montrer. */
@media (min-width: 900px) { .plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.plans--4 .plan { padding: var(--space-5); gap: var(--space-4); }
.plans--4 .plan__price-v { font-size: clamp(32px, 3vw, 40px); }
.plans--4 .plan__for { min-height: 0; }

/* La periode de facturation, posee sous le titre de page. */
.prbill { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.prbill__n { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ---- Ce qui compte, ce qui ne compte jamais ---- */
.cnt { display: grid; gap: var(--space-4); align-items: stretch; }
@media (min-width: 860px) { .cnt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.cnt__col { padding: var(--space-6); display: grid; align-content: start; gap: var(--space-4); }
.cnt__col--on { border-color: var(--glass-accent-border); background: var(--glass-accent-bg); }
.cnt__h { display: flex; align-items: center; gap: var(--space-3); }
.cnt__h h3 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(20px, 2vw, 25px); line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); }
.cnt__h svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cnt__col--on .cnt__h svg { color: var(--accent-text); background: var(--bg-surface-raised); }
.cnt__col--off .cnt__h svg { color: var(--text-muted); background: var(--bg-hover); }
.cnt__l { display: grid; gap: var(--space-3); }
.cnt__l li { padding-left: var(--space-4); border-left: 2px solid var(--border-default); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.cnt__col--on .cnt__l li { border-left-color: var(--accent); }
.cnt__l b { display: block; color: var(--text-primary); font-weight: var(--weight-semibold); }

/* L'unite livree, detaillee : six objets, et le prix porte sur leur reunion. */
.unit { margin-top: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--bg-surface-raised); border: 1px solid var(--border-default); }
.unit__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.unit__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.unit__g { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 620px) { .unit__g { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1020px) { .unit__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unit__g li { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-areas: "i t" ". d"; gap: 2px var(--space-3); }
.unit__g svg { grid-area: i; width: 16px; height: 16px; margin-top: 3px; color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unit__g b { grid-area: t; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.unit__g span { grid-area: d; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-tertiary); }
.unit__f { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-tertiary); }

/* ---- Le calcul : vos chiffres a gauche, la facture a droite ---- */
.calc { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: var(--space-5); } }
.calc__in { padding: var(--space-6); display: grid; gap: var(--space-6); }
.calc__field { display: grid; gap: var(--space-2); }
.calc__lab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); padding: 0; }
.calc__out { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.calc__scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.calc__hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); }

/* Le curseur : le design system n'en livre pas, celui-ci reprend ses jetons. */
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.calc__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-pill); }
.calc__range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--border-default); }
.calc__range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--border-default); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--cta-bg); background-image: var(--cta-grad); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 1px 2px rgba(10, 12, 6, .18), 0 4px 10px rgba(120, 124, 30, .22); }
.calc__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cta-bg); background-image: var(--cta-grad); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 1px 2px rgba(10, 12, 6, .18), 0 4px 10px rgba(120, 124, 30, .22); }

.calc__tools { border: 0; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--border-subtle); display: grid; gap: var(--space-2); }
.calc__tools legend { padding: 0; }
.calc__tool { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-app); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.calc__tool:hover { border-color: var(--border-strong); }
.calc__tool:has(input:checked) { border-color: var(--accent); background: var(--glass-accent-bg); }
.calc__tool:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc__tool input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.calc__tool-b { display: grid; min-width: 0; }
.calc__tool-b b { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.calc__tool-b em { font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); }
.calc__tool-p { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; }
.calc__tool-p i { font-style: normal; font-size: 10px; color: var(--text-muted); }

.calc__out-panel { padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 960px) { .calc__out-panel { position: sticky; top: calc(var(--header-height) + var(--space-6)); } }
.calc__t { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(21px, 2.2vw, 27px); line-height: 1.1; letter-spacing: -0.01em; color: var(--text-primary); }
.calc__lines { display: grid; gap: var(--space-2); }
.calc__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.calc__line em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.calc__line b { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-primary); white-space: nowrap; }
.calc__line--hours { padding-top: var(--space-2); border-top: 1px dashed var(--border-default); }
.calc__line--none { color: var(--text-muted); font-style: italic; }
.calc__tot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-default); font-size: var(--text-sm); color: var(--text-secondary); }
.calc__tot i { font-style: normal; font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.calc__tot b { font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__aora { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.calc__aora span { display: grid; }
.calc__aora em { font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); }
.calc__aora b { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__save { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--glass-accent-bg); border: 1px solid var(--glass-accent-border); }
.calc__save-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--glass-accent-border); font-size: var(--text-sm); color: var(--text-secondary); }
.calc__save-h b { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__save p { margin-top: var(--space-3); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.calc__save strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.calc__note { font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-tertiary); }
.calc__note strong { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* ---- La matrice ---- */
.mtx { border-radius: var(--radius-xl); border: 1px solid var(--border-default); background: var(--bg-surface-raised); overflow: hidden; }
.mtx__t { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.mtx__t thead th { padding: var(--space-5) var(--space-4) var(--space-4); text-align: center; font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-lg); line-height: 1.1; color: var(--text-primary); border-bottom: 1px solid var(--border-default); }
.mtx__t thead th:first-child { width: 30%; }
.mtx__t thead th em { display: block; margin-top: 3px; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.mtx__g th { padding: var(--space-4) var(--space-4) var(--space-2); text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); background: var(--bg-app); }
.mtx__t tbody tr:not(.mtx__g) th { padding: var(--space-3) var(--space-4); text-align: left; font-weight: var(--weight-regular); color: var(--text-primary); border-top: 1px solid var(--border-subtle); vertical-align: top; }
.mtx__t tbody tr:not(.mtx__g) th em { display: block; margin-top: 2px; font-style: normal; font-size: var(--text-xs); color: var(--text-tertiary); }
.mtx__t td { padding: var(--space-3) var(--space-4); text-align: center; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); vertical-align: top; }
.mtx__t td.is-none { color: var(--text-muted); }
.mtx__y { display: inline-block; width: 15px; height: 15px; color: var(--accent-text); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mtx__m { display: none; }
/* La colonne recommandee est teintee sur toute sa hauteur. */
.mtx__t .is-featured { background: var(--glass-accent-bg); }
.mtx__t thead th.is-featured { box-shadow: inset 0 3px 0 var(--accent); }

/* Sous 860 px, la table se replie : chaque ligne devient un petit bloc ou le
   nom du forfait precede sa valeur. Une table de cinq colonnes ne tient pas. */
@media (max-width: 859px) {
  .mtx { border: 0; background: none; }
  .mtx__t, .mtx__t tbody, .mtx__t tr, .mtx__t td, .mtx__t th { display: block; }
  .mtx__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .mtx__g th { border-radius: var(--radius-md); margin-top: var(--space-5); }
  .mtx__t tbody tr:not(.mtx__g) { margin-top: var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-surface-raised); overflow: hidden; }
  .mtx__t tbody tr:not(.mtx__g) th { border-top: 0; font-weight: var(--weight-semibold); background: var(--bg-app); }
  .mtx__t td { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); text-align: right; }
  .mtx__m { display: block; text-align: left; color: var(--text-tertiary); font-size: var(--text-xs); }
}

/* ---- Le plafond de rebut ---- */
.ceil { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 940px) { .ceil { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-12); } }
.ceil__l { display: grid; justify-items: start; gap: var(--space-5); }
.ceil__t { font-size: clamp(40px, 5vw, 62px); }
.ceil__d { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 52ch; }
.ceil__r { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ceil__r li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--bg-surface-raised); border: 1px solid var(--border-subtle); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.ceil__n { font-family: var(--font-mono); font-size: 11px; color: var(--accent-text); padding-top: 2px; }
.ceil__r b { color: var(--text-primary); font-weight: var(--weight-semibold); }

/* Le pont entre la section tarifaire de la landing et sa page dediee. */
.prmore { margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--bg-surface-raised); border: 1px solid var(--border-default); display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 760px) { .prmore { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); } }
.prmore p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); max-width: 70ch; }