/* Landing (page d'accueil publique), refaite le 05/11/2026 : docs/superpowers/specs/2026-11-05-landing-refonte-design.md.
   Chargée après app.css, dont elle reprend les variables (encre, neutres, sentiment) ; toutes les règles sont sous
   .landing (Turbo peut garder la feuille un instant en quittant la page).
   Direction « le produit en grand » : fond papier chaud, encre seule couleur de marque, titres nets en graisse forte
   et interlettrage serré, écrans d'appli stylisés en cartes blanches, sections ponctuelles sur fond encre.
   Espacements sur 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 80 / 96 px ; rayons emboîtés (intérieur = extérieur −
   marge) ; on n'anime que transform et opacity, 500 ms pour les déplacements, 300 ms pour les survols. */

.landing {
    --l-paper: #f6f3ee;
    --l-line: #e3ded4;
    --l-line-soft: #ece8e0;
    --l-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --l-text: #4a5068;                 /* texte secondaire sur papier (7,3:1) */
    --l-muted: #6b7088;                /* étiquettes (4,6:1 sur papier) */
    --l-gutter: 16px;
    --l-section: 80px;
    --l-header: 88px;                  /* hauteur de la barre flottante et de son décollement, pour les ancres */
    --l-shadow-app: 0 1px 2px rgb(19 27 54 / .04), 0 24px 48px -24px rgb(19 27 54 / .18);
    --l-shadow-float: 0 2px 4px rgb(19 27 54 / .04), 0 12px 32px rgb(19 27 54 / .14);
    min-height: 100vh;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--ink);
    background: var(--l-paper);
    font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 720px) { .landing { --l-gutter: 32px; --l-section: 96px; } }
@media (prefers-reduced-motion: no-preference) { html:has(.landing) { scroll-behavior: smooth; } }
:is(html, body):has(.landing) { background: #f6f3ee; }

.landing p { margin: 0 0 var(--space-4); }
.landing p:last-child { margin-bottom: 0; }
.landing ul, .landing ol { margin: 0; padding: 0; list-style: none; }
.landing :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.landing main:focus { outline: none; }

/* Classes communes à toutes les sections */
.landing .landing-wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--l-gutter); }
.landing .landing-section { padding-block: var(--l-section); scroll-margin-top: var(--l-header); }
.landing .landing-eyebrow {
    margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: 600; line-height: 1rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--l-muted);
}
.landing .landing-h2 {
    max-width: 22ch; margin: 0 0 var(--space-4);
    font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.05; letter-spacing: -.035em;
    word-spacing: 0; text-wrap: balance;
}
.landing .landing-lead { max-width: 36rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--l-text); }

/* Le seul bouton de la page : « Demander une démo », vers #demo. */
.landing .landing-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 10px 16px; font-size: 1rem; font-weight: 600; line-height: 1.25rem; letter-spacing: -.01em; white-space: nowrap;
    color: var(--on-ink); background: var(--ink); border-radius: 8px; text-decoration: none;
    transition: background-color 300ms var(--l-ease), transform 150ms var(--l-ease);
}
.landing .landing-cta:hover { color: var(--on-ink); background: var(--ink-2); }
.landing .landing-cta:active { transform: scale(.98); }

/* Écran d'appli stylisé (carte blanche) et carte qui flotte par-dessus. */
.landing .landing-app {
    background: var(--color-card); border: 1px solid var(--l-line); border-radius: 16px; box-shadow: var(--l-shadow-app);
}
.landing .landing-float {
    padding: 12px 16px; font-size: var(--text-sm); line-height: 1.25rem;
    background: var(--color-card); border: 1px solid var(--l-line); border-radius: 12px; box-shadow: var(--l-shadow-float);
}

/* Section sur fond encre, pour le rythme. */
.landing .landing-section--ink { color: var(--on-ink); background: var(--ink); }
.landing .landing-section--ink .landing-eyebrow { color: rgb(255 255 255 / .62); }
.landing .landing-section--ink .landing-lead { color: var(--on-ink-muted); }
.landing :is(.landing-section--ink, .landing-footer) :focus-visible { outline-color: var(--on-ink); }

/* Apparition des sections (contrôleur landing-reveal, une seule fois ; rien sous animations réduites). */
.landing .is-hidden { opacity: 0; transform: translateY(32px); }
.landing .is-hidden.is-in { opacity: 1; transform: none; transition: opacity 500ms var(--l-ease), transform 500ms var(--l-ease); }

/* Lien d'évitement : visible au focus seulement. */
.landing .landing-skip {
    position: fixed; top: 12px; left: 12px; z-index: 60; padding: 8px 12px;
    font-weight: 600; color: var(--on-ink); background: var(--ink); border-radius: 8px; text-decoration: none;
    transform: translateY(calc(-100% - 24px));
}
.landing .landing-skip:focus { transform: none; }

/* Navigation flottante : barre translucide, décollée de 12 px du haut, centrée, à la largeur de son contenu. */
.landing .landing-header {
    position: sticky; top: 12px; z-index: 40; display: flex; justify-content: center;
    margin-top: 12px; padding-inline: var(--l-gutter); pointer-events: none;
}
.landing .landing-header-shell { display: contents; }
.landing .landing-bar {
    position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-6);
    width: 100%; max-width: 72rem; padding: 8px 8px 8px 12px; pointer-events: auto;
    background: rgb(246 243 238 / .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--l-line); border-radius: 16px;
}
.landing .landing-brand {
    display: inline-flex; align-items: center; gap: var(--space-2); margin-right: auto;
    border-radius: 8px; text-decoration: none;
}
.landing .landing-brand .logo-tile { width: 28px; height: 28px; border-radius: 7px; }
.landing .landing-nav { display: flex; align-items: center; gap: var(--space-1); }
.landing .landing-bar-end { display: flex; align-items: center; gap: var(--space-2); }
.landing .landing-nav-link {
    padding: 6px 10px; font-size: var(--text-base); font-weight: 500; line-height: 1.25rem; color: var(--l-text);
    border-radius: 8px; text-decoration: none; white-space: nowrap;
    transition: color 300ms var(--l-ease), background-color 300ms var(--l-ease);
}
.landing .landing-nav-link:hover { color: var(--ink); background: rgb(19 27 54 / .05); }
.landing .landing-cta--short { display: none; padding: 8px 12px; }
.landing .landing-menu-toggle {
    display: none; place-items: center; width: 40px; height: 40px; padding: 0;
    color: var(--ink); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.landing .landing-menu-toggle:hover { background: rgb(19 27 54 / .05); }
.landing .landing-menu-icon { grid-area: 1 / 1; display: grid; transition: transform 300ms var(--l-ease), opacity 300ms var(--l-ease); }
.landing .landing-menu-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.landing .is-open .landing-menu-icon--open { opacity: 0; transform: rotate(90deg) scale(.6); }
.landing .is-open .landing-menu-icon--close { opacity: 1; transform: none; }
.landing .landing-sheet { display: none; }
@media (min-width: 900px) {
    .landing .landing-bar { width: auto; padding-left: 16px; }
    .landing .landing-brand { margin-right: var(--space-2); }
}
@media (min-width: 900px) and (max-width: 1079px) {
    .landing .landing-bar { gap: var(--space-3); }
    .landing .landing-nav { gap: 0; }
    .landing .landing-nav-link { padding-inline: 8px; font-size: var(--text-sm); }
}

/* Sous 900 px : logo, bouton court « Démo », menu plein écran (papier à .96, flou 24 px), liens qui montent un à un. */
@media (max-width: 899px) {
    .landing .landing-nav, .landing .landing-account, .landing .landing-cta--bar { display: none; }
    .landing .landing-cta--short { display: inline-flex; }
    .landing .landing-menu-toggle { display: grid; }
    .landing .landing-sheet {
        position: fixed; inset: 0; z-index: 1; display: block; overflow-y: auto; pointer-events: auto;
        padding: calc(var(--l-header) + 16px) calc(var(--l-gutter) + 8px) 48px;
        background: rgb(246 243 238 / .96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
        visibility: hidden; opacity: 0;
        transition: opacity 300ms var(--l-ease), visibility 0s linear 300ms;
    }
    .landing .is-open .landing-sheet { visibility: visible; opacity: 1; transition: opacity 300ms var(--l-ease), visibility 0s; }
    .landing .landing-sheet-nav { display: grid; }
    .landing .landing-sheet-link {
        padding-block: 12px; font-size: 2rem; font-weight: 600; line-height: 2.5rem; letter-spacing: -.03em;
        color: var(--ink); border-bottom: 1px solid var(--l-line); text-decoration: none;
        opacity: 0; transform: translateY(24px);
        transition: opacity 220ms var(--l-ease), transform 220ms var(--l-ease);
    }
    .landing .landing-sheet-link--account { margin-top: var(--space-6); font-size: var(--text-lg); line-height: 1.75rem; letter-spacing: -.01em; border-bottom: 0; color: var(--l-text); }
    .landing .is-open .landing-sheet-link { opacity: 1; transform: none; }
    .landing .is-open .landing-sheet-link:nth-child(2) { transition-delay: 60ms; }
    .landing .is-open .landing-sheet-link:nth-child(3) { transition-delay: 120ms; }
    .landing .is-open .landing-sheet-link:nth-child(n+4) { transition-delay: 180ms; }
    html.landing-menu-open { overflow: hidden; }
}

/* Haut de page : titre centré, l'écran de direction en grand, deux cartes qui flottent par-dessus (sous l'écran sous 760 px). */
.landing .landing-hero { padding-block: 64px 80px; }
.landing .landing-hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.landing .landing-hero-title {
    max-width: 12em; margin: 0 0 var(--space-6);
    font-size: clamp(2.25rem, 1.1rem + 3.8vw, 3.75rem); font-weight: 600; line-height: 1.04; letter-spacing: -.035em;
    text-wrap: balance;
}
.landing .landing-hero-sub { max-width: 36rem; margin: 0 0 var(--space-8); font-size: 1.125rem; line-height: 1.75rem; color: var(--l-text); text-wrap: pretty; }
.landing .landing-cta--lg { padding: 12px 20px; }
.landing .landing-assurance {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
    margin-top: var(--space-6); font-size: var(--text-sm); line-height: 1.25rem; color: var(--l-text);
}
/* Chaque point a sa coche : la ligne se replie sans séparateur orphelin. */
.landing .landing-assurance li { display: inline-flex; align-items: center; gap: 6px; }
.landing .landing-assurance .icon { width: 14px; height: 14px; flex: none; color: var(--ink); }
.landing .landing-stage { position: relative; margin-top: 64px; }

.landing .landing-screen { display: grid; overflow: hidden; }
.landing .landing-screen-side { display: none; padding: 16px 12px; color: var(--on-ink-muted); background: var(--ink); }
.landing .landing-screen-org {
    display: flex; align-items: center; gap: 10px; margin: 0 4px 24px;
    font-size: var(--text-sm); font-weight: 600; color: var(--on-ink); white-space: nowrap;
}
.landing .landing-screen-org .logo-tile { width: 24px; height: 24px; border-radius: 6px; color: var(--ink); background: var(--on-ink); }
.landing .landing-screen-nav { display: grid; gap: 2px; }
.landing .landing-screen-nav li {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    font-size: var(--text-sm); line-height: 1.25rem; border-radius: 6px; white-space: nowrap;
}
.landing .landing-screen-nav .icon { width: 16px; height: 16px; flex: none; }
.landing .landing-screen-nav .is-active { color: var(--on-ink); background: var(--ink-2); }
.landing .landing-screen-main { min-width: 0; padding: 16px; }
.landing .landing-screen-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 16px; }
.landing .landing-screen-title { font-size: var(--text-lg); font-weight: 600; line-height: 1.75rem; letter-spacing: -.02em; }
.landing .landing-screen-period {
    padding: 4px 10px; font-size: var(--text-xs); font-weight: 500; line-height: 1rem; color: var(--l-text);
    border: 1px solid var(--color-line); border-radius: 999px; white-space: nowrap;
}
.landing .landing-screen-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.landing .landing-screen-kpi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
    padding: 12px; border: 1px solid var(--color-line); border-radius: 10px;
}
.landing .landing-screen-label { font-size: var(--text-xs); font-weight: 500; line-height: 1rem; color: var(--color-muted); }
.landing .landing-screen-value { font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -.03em; white-space: nowrap; }
.landing .landing-screen-value small { margin-left: 4px; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.landing .landing-screen .kpi-delta { gap: 4px; font-size: var(--text-xs); line-height: 1rem; }
.landing .landing-screen .kpi-delta-arrow { font-size: 9px; }
.landing .landing-screen .kpi-delta.is-weak { cursor: default; }
.landing .landing-screen .kpi-late { padding-block: 0; line-height: 1rem; }

.landing .landing-screen-chart { padding: 12px; border: 1px solid var(--color-line); border-radius: 10px; }
.landing .landing-screen-chart-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 12px;
    font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem;
}
.landing .landing-screen-chart-scope { display: none; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.landing .landing-chart-bars {
    position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    height: 128px; padding-bottom: 20px;
}
/* Grille : deux filets horizontaux et l'axe. */
.landing .landing-chart-bars::before {
    content: ''; position: absolute; inset: 0 0 20px; pointer-events: none;
    border-top: 1px solid var(--viz-grid); border-bottom: 1px solid var(--viz-axis);
}
.landing .landing-chart-bars::after { content: ''; position: absolute; inset: 50% 0 auto; border-top: 1px solid var(--viz-grid); }
.landing .landing-chart-col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.landing .landing-chart-bar {
    display: block; width: 100%; max-width: 28px; height: calc(var(--v) * 100% / 48);
    background: var(--viz-bar); border-radius: 3px 3px 0 0;
}
.landing .landing-chart-col.is-up .landing-chart-bar { background: var(--color-negative-bar); }
.landing .landing-chart-col:last-child .landing-chart-bar { background: var(--color-negative); }
.landing .landing-chart-note { margin-bottom: 4px; font-size: var(--text-xs); font-weight: 600; line-height: 1rem; color: var(--color-negative-ink); white-space: nowrap; }
.landing .landing-chart-week {
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    font-size: 11px; line-height: 16px; color: var(--color-muted); white-space: nowrap;
}
/* Sur téléphone, seules la première et la dernière semaine sont nommées. */
.landing .landing-chart-col:not(:first-child, :last-child) .landing-chart-week { display: none; }

.landing .landing-floats { display: grid; gap: 12px; margin-top: 12px; }
.landing .landing-float p { margin: 0; }
.landing .landing-float-label {
    margin-bottom: 4px; font-size: var(--text-xs); font-weight: 600; line-height: 1rem;
    letter-spacing: .06em; text-transform: uppercase; color: var(--l-muted);
}
.landing .landing-float-title { font-size: 1rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -.01em; }
.landing .landing-float-value { margin-top: 4px; font-weight: 600; }
.landing .landing-float-value.is-bad { color: var(--color-negative-ink); }
.landing .landing-float-value.is-good { color: var(--color-positive-ink); }
.landing .landing-float-foot { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
    .landing .landing-hero .landing-float { animation: landing-float-in 500ms var(--l-ease) 300ms both; }
    .landing .landing-hero .landing-float--effect { animation-delay: 450ms; }
}
@keyframes landing-float-in { from { opacity: 0; transform: translateY(16px); } }

@media (min-width: 760px) {
    .landing .landing-hero { padding-block: 96px 64px; }
    .landing .landing-stage { padding-inline: 48px; }
    .landing .landing-screen-main { padding: 24px; }
    .landing .landing-screen-top { margin-bottom: 24px; }
    .landing .landing-screen-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
    .landing .landing-screen-kpi { padding: 16px; }
    .landing .landing-screen-value { font-size: 1.75rem; line-height: 2.25rem; }
    .landing .landing-screen-chart { padding: 16px; }
    .landing .landing-chart-bars { height: 176px; gap: 8px; }
    .landing .landing-chart-col:not(:first-child, :last-child) .landing-chart-week { display: block; }
    .landing .landing-screen-chart-scope { display: inline; }
    /* Les cartes passent par-dessus l'écran, débordant sur le papier. */
    .landing .landing-floats { display: contents; }
    /* Sans barre latérale, les deux cartes pendent sous l'écran : elles ne couvrent que le pied du graphique. */
    .landing .landing-stage { margin-bottom: 80px; }
    .landing .landing-hero .landing-float { position: absolute; z-index: 2; width: 264px; }
    .landing .landing-float--rise { left: 0; bottom: -80px; }
    .landing .landing-float--effect { right: 0; bottom: -80px; }
}
@media (min-width: 1024px) {
    .landing .landing-stage { padding-inline: 64px; }
    .landing .landing-screen { grid-template-columns: 184px minmax(0, 1fr); }
    .landing .landing-screen-side { display: block; }
    /* L'irritant se pose dans le bas de la barre latérale, vide. */
    .landing .landing-float--rise { top: 320px; bottom: auto; }
}

/* Bandeau des sources : une rangée d'intégrations posée sur le papier, sans cartes. Logo officiel en couleur dans une
   case de 40 px (base commune), nom et détail dessous ; les sources à venir gardent leurs couleurs et ne se distinguent
   que par le badge « Bientôt ». Deux colonnes sur téléphone, trois sur tablette, une rangée sur grand écran. */
.landing .landing-sources { padding-bottom: 16px; }
.landing .landing-sources-inner { display: grid; gap: var(--space-8); }
.landing .landing-sources-title {
    margin: 0; padding-top: var(--space-8); font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem;
    letter-spacing: 0; color: var(--l-text); border-top: 1px solid var(--l-line);
}
.landing .landing-sources-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4);
    margin: 0; padding: 0; list-style: none;
}
.landing .landing-source { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.landing .landing-source-mark { display: flex; align-items: center; height: 40px; margin-bottom: 4px; }
.landing .landing-source-logo { display: block; }
.landing .landing-source-name { font-weight: 600; line-height: 1.5rem; letter-spacing: -.01em; color: var(--ink); }
.landing .landing-source-detail { font-size: var(--text-sm); line-height: 1.25rem; color: var(--l-muted); }
.landing .landing-soon {
    margin-top: 4px; padding: 4px 8px; font-size: var(--text-xs); font-weight: 600; line-height: 1rem;
    color: var(--l-muted); border: 1px solid var(--l-line); border-radius: 5px;
}
@media (min-width: 720px) { .landing .landing-sources-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .landing .landing-sources-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); } }

/* La boucle : un temps par article, texte et grand morceau d'appli côte à côte sur grand écran, colonnes inversées
   d'un temps à l'autre. Les pastilles de codes arrivent une à une quand le temps apparaît. */
.landing .landing-loop-head { margin-bottom: 64px; }
.landing .landing-steps { display: grid; gap: 80px; }
.landing .landing-step { display: grid; gap: 32px; align-items: center; }
.landing .landing-step-copy { max-width: 30rem; }
.landing .landing-step-label { color: var(--ink); }
.landing .landing-step-title {
    margin: 0 0 var(--space-4); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 600;
    line-height: 1.12; letter-spacing: -.03em; text-wrap: balance;
}
.landing .landing-step-text { font-size: 1.125rem; line-height: 1.75rem; color: var(--l-text); text-wrap: pretty; }
.landing .landing-step-visual { min-width: 0; }
/* L'indication d'usage n'a de sens qu'avec JavaScript : cachée sinon (ou si le navigateur ignore scripting). */
.landing .landing-step-hint { display: none; margin: 12px 0 0; font-size: var(--text-sm); line-height: 1.25rem; color: var(--l-muted); }
@media (scripting: enabled) { .landing .landing-step-hint { display: block; } }
@media (min-width: 960px) {
    .landing .landing-steps { gap: 96px; }
    .landing .landing-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
    .landing .landing-steps > .landing-step:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .landing .landing-steps > .landing-step:nth-child(even) .landing-step-copy { order: 2; }
}

/* Lire : un verbatim tel que l'appli l'affiche (étoiles, texte filet à l'encre, thèmes abordés). La barre du haut
   (.landing-read-bar, son fil et sa pastille) et le corps servent aussi aux cartes des trois temps suivants. */
.landing .landing-read { margin: 0; overflow: hidden; }
.landing .landing-read-bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 12px 16px; font-size: var(--text-xs); font-weight: 500; line-height: 1rem; color: var(--l-muted);
    border-bottom: 1px solid var(--color-line);
}
.landing .landing-read-crumb::before { content: '← '; }
.landing .landing-read-place {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--l-text);
    border: 1px solid var(--color-line); border-radius: 999px; white-space: nowrap;
}
.landing .landing-read-place .icon { width: 12px; height: 12px; }
.landing :is(.landing-read-body, .landing-pane-body) { padding: 24px 16px; }
.landing .landing-read-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px;
    font-size: var(--text-sm); line-height: 1.25rem;
}
.landing .landing-read-source { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.landing .landing-read-rating { display: inline-flex; align-items: center; gap: 8px; }
.landing .landing-read-rating .star { width: 16px; height: 16px; }
.landing .landing-read-date { color: var(--l-muted); }
.landing .landing-read-text { margin: 0; padding-left: 16px; border-left: 2px solid var(--ink); }
.landing .landing-read-text p { font-size: 1.0625rem; line-height: 1.85; overflow-wrap: anywhere; }
.landing .landing-read-analysis { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-line); }
.landing .landing-read-analysis-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px;
}
.landing .landing-read-analysis-title { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem; }
@media (min-width: 720px) {
    .landing .landing-read-bar { padding: 12px 24px; }
    .landing :is(.landing-read-body, .landing-pane-body) { padding: 32px 40px 40px; }
    .landing .landing-read-meta { margin-bottom: 24px; }
    .landing .landing-read-text { padding-left: 24px; }
    .landing .landing-read-text p { font-size: 1.25rem; line-height: 2.125rem; letter-spacing: -.005em; }
    .landing .landing-read-analysis { margin-top: 32px; padding-top: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
    .landing .landing-step.is-hidden .segment-chips li { opacity: 0; transform: translateY(8px); }
    .landing .landing-step.is-in .segment-chips li {
        opacity: 1; transform: none; transition: opacity 500ms var(--l-ease), transform 500ms var(--l-ease);
    }
    .landing .landing-step.is-in .segment-chips li:nth-child(1) { transition-delay: 400ms; }
    .landing .landing-step.is-in .segment-chips li:nth-child(2) { transition-delay: 480ms; }
    .landing .landing-step.is-in .segment-chips li:nth-child(3) { transition-delay: 560ms; }
    .landing .landing-step.is-in .segment-chips li:nth-child(n+4) { transition-delay: 640ms; }
}

/* Titre d'une carte (dans la barre du haut) et intertitre (dans son corps). */
.landing .landing-pane-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem; color: var(--ink); }
.landing .landing-pane-heading { font-size: var(--text-lg); font-weight: 600; line-height: 1.75rem; letter-spacing: -.02em; }

/* Comprendre : « Ce qui pèse sur la note » comme dans l'appli (thème, effet quand il est cité et part des verbatims),
   l'effet signé sur la note et sa barre (orangé quand le thème retire, bleu quand il porte), le gain estimé du premier
   à l'encre sur gris (un gain n'est pas un jugement). */
.landing .landing-weigh-head {
    display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px;
    font-size: var(--text-xs); font-weight: 500; line-height: 1rem; color: var(--color-muted);
}
.landing .landing-weigh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding-block: 12px; }
.landing .landing-weigh-row + .landing-weigh-row { border-top: 1px solid var(--color-line); }
.landing .landing-weigh-main { display: grid; gap: 4px; min-width: 0; }
.landing .landing-weigh-name { font-size: 1rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -.01em; }
.landing .landing-weigh-facts { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.landing .landing-weigh-bar { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; background: var(--viz-track); border-radius: 4px; }
.landing .landing-weigh-bar > span { display: block; width: calc(var(--w) * 1%); height: 100%; border-radius: 4px; transform-origin: left center; }
.landing .landing-weigh-bar.is-neg > span { background: var(--color-negative-bar); }
.landing .landing-weigh-row.is-first .landing-weigh-bar.is-neg > span { background: var(--color-negative); }
.landing .landing-weigh-bar.is-pos > span { background: var(--color-positive-bar); }
.landing .landing-weigh-gain {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
    margin-top: 4px; padding: 8px 12px; font-size: var(--text-xs); line-height: 1rem; color: var(--l-text);
    background: var(--color-neutral-soft); border-radius: 8px;
}
.landing .landing-weigh-gain strong { font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem; color: var(--ink); white-space: nowrap; }
.landing .landing-weigh-sub {
    margin: 4px 0 0; padding-top: 16px; font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem;
    border-top: 1px solid var(--color-line);
}

/* Agir : la fiche d'action (titre, statut « En cours » cerclé à l'encre, code ciblé, faits, sous-tâches). */
.landing .landing-act-title { margin: 0 0 12px; font-size: var(--text-xl); font-weight: 600; line-height: 2rem; letter-spacing: -.02em; }
.landing .landing-act-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.landing .landing-act-text { margin: 0 0 24px; color: var(--l-text); }
.landing .landing-act-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 16px;
    border: 1px solid var(--color-line); border-radius: 10px;
}
.landing .landing-act-facts div { min-width: 0; margin: 0; }
.landing .landing-act-facts dt { font-size: var(--text-xs); font-weight: 600; line-height: 1rem; color: var(--color-muted); }
.landing .landing-act-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-weight: 600; line-height: 1.5rem; }
.landing .landing-act-facts small { flex-basis: 100%; font-size: var(--text-xs); font-weight: 500; line-height: 1rem; color: var(--color-muted); }
.landing .landing-act-avatar {
    display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px;
    font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--on-ink); background: var(--ink); border-radius: 50%;
}
.landing .landing-act-tasks-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem; }
.landing .landing-act-tasks-title span { font-weight: 500; color: var(--color-muted); }
.landing .landing-act-tasks li {
    display: flex; align-items: center; gap: 12px; padding-block: 8px; font-size: var(--text-sm); line-height: 1.25rem;
    border-top: 1px solid var(--color-line);
}
.landing .landing-act-tasks li.is-done { color: var(--color-muted); text-decoration: line-through; text-decoration-color: var(--color-line-strong); }
.landing .landing-act-box {
    display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px;
    font-size: 11px; font-weight: 600; line-height: 1; color: var(--on-ink); border: 1px solid var(--color-line-strong); border-radius: 4px;
}
.landing .landing-act-tasks .is-done .landing-act-box { background: var(--ink); border-color: var(--ink); }

/* Prouver : le panneau Effet (verdict en badge neutre, la phrase, avant / après dans le périmètre et ailleurs, la
   courbe pleine du périmètre face aux pointillés du reste, repère « Lancement »). Le bleu ne va qu'à la baisse signée
   de la part négative ; « ≈ » en gris pour l'écart non significatif d'ailleurs. */
.landing .landing-proof-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.landing .landing-proof-sentence { margin: 0 0 24px; font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.01em; text-wrap: pretty; }
.landing .landing-proof-table { margin-bottom: 24px; overflow: hidden; border: 1px solid var(--color-line); border-radius: 10px; }
.landing :is(.landing-proof-cols, .landing-proof-row) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 16px;
}
.landing .landing-proof-cols {
    margin: 0; font-size: var(--text-xs); font-weight: 600; line-height: 1rem; color: var(--color-muted);
    background: var(--viz-surface-soft);
}
.landing :is(.landing-proof-cols, .landing-proof-row) > :first-child { grid-column: 1 / -1; }
.landing .landing-proof-row { border-top: 1px solid var(--color-line); }
.landing .landing-proof-where { font-size: var(--text-sm); font-weight: 500; line-height: 1.25rem; color: var(--l-text); }
.landing .landing-proof-value { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.02em; }
.landing .landing-proof-row .kpi-delta { justify-self: end; font-size: var(--text-xs); }
.landing .landing-proof-curve-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px;
    font-size: var(--text-sm); font-weight: 600; line-height: 1.25rem;
}
.landing .landing-proof-key { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.landing .landing-proof-key-in, .landing .landing-proof-key-out { display: inline-block; width: 16px; border-top: 2px solid var(--ink); }
.landing .landing-proof-key-out { margin-left: 4px; border-top: 2px dashed var(--viz-compare); }
.landing .landing-proof-plot { position: relative; padding-top: 24px; }
.landing .landing-proof-launch {
    position: absolute; top: 0; left: 50%; height: 24px; padding-left: 8px;
    font-size: 11px; font-weight: 500; line-height: 16px; color: var(--color-muted); border-left: 1px solid var(--color-line-strong);
}
.landing .landing-proof-plot svg { display: block; width: 100%; height: 120px; overflow: visible; }
.landing .landing-proof-plot :is(line, polyline) { fill: none; vector-effect: non-scaling-stroke; }
.landing .landing-proof-grid { stroke: var(--viz-grid); }
.landing .landing-proof-axis { stroke: var(--viz-axis); }
.landing .landing-proof-mark { stroke: var(--color-line-strong); }
.landing .landing-proof-in { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.landing .landing-proof-out { stroke: var(--viz-compare); stroke-width: 2; stroke-dasharray: 4 4; }
.landing .landing-proof-axis-labels {
    display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0;
    font-size: 11px; line-height: 16px; color: var(--color-muted);
}
@media (min-width: 560px) {
    .landing :is(.landing-proof-cols, .landing-proof-row) { grid-template-columns: minmax(0, 1fr) 64px 64px 96px; }
    .landing :is(.landing-proof-cols, .landing-proof-row) > :first-child { grid-column: auto; }
}
@media (min-width: 720px) {
    .landing .landing-proof-sentence { font-size: var(--text-lg); line-height: 1.75rem; }
    .landing .landing-proof-plot svg { height: 144px; }
}

/* Quand le temps apparaît : les barres se remplissent, les écarts d'effet arrivent l'un après l'autre. */
@media (prefers-reduced-motion: no-preference) {
    .landing .landing-step.is-hidden .landing-weigh-bar > span { transform: scaleX(0); }
    .landing .landing-step.is-in .landing-weigh-bar > span { transform: none; transition: transform 500ms var(--l-ease) 400ms; }
    .landing .landing-step.is-in .landing-weigh-row:nth-child(2) .landing-weigh-bar > span { transition-delay: 480ms; }
    .landing .landing-step.is-in .landing-weigh-row:nth-child(3) .landing-weigh-bar > span { transition-delay: 560ms; }
    .landing .landing-step.is-in .landing-weigh-sub + .landing-weigh-list .landing-weigh-bar > span { transition-delay: 640ms; }
    .landing .landing-step.is-hidden .landing-proof-row .kpi-delta { opacity: 0; transform: translateY(8px); }
    .landing .landing-step.is-in .landing-proof-row .kpi-delta {
        opacity: 1; transform: none; transition: opacity 500ms var(--l-ease) 400ms, transform 500ms var(--l-ease) 400ms;
    }
    .landing .landing-step.is-in .landing-proof-row + .landing-proof-row .kpi-delta { transition-delay: 480ms; }
}

/* La phrase en très grand, sur fond encre : 36 px sur téléphone, 48 px dès 720 px, une phrase par ligne. Ses mots
   (contrôleur landing-words) passent de .3 au ton plein un à un ; sans le contrôleur, ton plein. */
.landing .landing-tagline-text {
    max-width: 680px; margin: 0 auto; font-size: 2.25rem; font-weight: 600; line-height: 2.75rem; letter-spacing: -.035em;
    text-align: center; text-wrap: balance; color: var(--on-ink);
}
.landing .landing-words, .landing .landing-tagline-line { display: block; }
.landing .landing-word.is-dim { opacity: .3; transition: opacity 500ms var(--l-ease); }
.landing .landing-word.is-dim.is-lit { opacity: 1; }
@media (min-width: 720px) { .landing .landing-tagline-text { font-size: 3rem; line-height: 3.5rem; } }

/* Les deux publics : côte à côte sur grand écran, séparés par un filet vertical ; trois points à filets chacun. */
.landing .landing-audiences-head { margin-bottom: 40px; }
.landing .landing-pair { display: grid; gap: 48px; }
.landing .landing-pair-col { min-width: 0; }
.landing .landing-audience-points { margin-top: 24px; border-bottom: 1px solid var(--l-line); }
.landing .landing-audience-points li { padding-block: 16px; color: var(--l-text); border-top: 1px solid var(--l-line); text-wrap: pretty; }
.landing .landing-audience-points strong { display: block; margin-bottom: 4px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
@media (min-width: 900px) {
    .landing .landing-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .landing .landing-pair-col { padding-right: 48px; }
    .landing .landing-pair-col + .landing-pair-col { padding: 0 0 0 48px; border-left: 1px solid var(--l-line); }
}

/* Le reste du produit en mosaïque : tuiles en papier plus soutenu, chacune un titre, une phrase et un morceau d'appli
   blanc posé en bas. Bureau : trois colonnes, radar et rapports sur deux, en damier ; deux colonnes dès 720 px ; une
   sur téléphone. Rayons emboîtés : tuile 40 px (32 sur téléphone) = carte 16 px + marge 24 px (16). */
.landing .landing-bento-head { margin-bottom: 48px; }
.landing .landing-bento { display: grid; gap: 16px; }
.landing .landing-tile {
    display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 16px;
    background: #eeeae2; border: 1px solid var(--l-line); border-radius: 32px;
}
.landing .landing-tile-copy { max-width: 34rem; padding: 8px 8px 0; }
.landing .landing-tile-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.02em; }
.landing .landing-tile-text { margin: 0; color: var(--l-text); text-wrap: pretty; }
/* Le morceau d'appli prend la hauteur restante : deux tuiles d'une même rangée finissent à la même ligne. */
.landing .landing-tile-visual { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.landing .landing-tile-visual > :not(.visually-hidden) { flex: 1; }
@media (min-width: 720px) {
    .landing .landing-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .landing .landing-tile { padding: 24px; border-radius: 40px; }
    .landing .landing-tile-copy { padding: 8px 8px 0; }
    .landing :is(.landing-tile--radar, .landing-tile--report) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .landing .landing-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .landing :is(.landing-tile--radar, .landing-tile--report) { grid-column: span 2; }
}

/* Radar : anneaux en aplats (le centre, le plus prioritaire, le plus soutenu), rayons blancs entre les secteurs,
   points à la couleur du sentiment (légende en mots dessous), étiquettes sur deux lignes cernées de blanc. */
.landing .landing-radar { display: flex; flex-direction: column; }
.landing .landing-radar-body { display: grid; flex: 1; align-content: center; gap: 16px; padding: 16px 8px; }
.landing .landing-radar-svg { display: block; width: 100%; height: auto; }
.landing .landing-radar-ring-3 { fill: #eef0f6; }
.landing .landing-radar-ring-2 { fill: #e3e7f1; }
.landing .landing-radar-ring-1 { fill: #d6dcea; }
.landing .landing-radar-rays line { stroke: #fff; stroke-width: 2; }
.landing .landing-radar-ring-label text { font-size: 11px; font-weight: 600; letter-spacing: .12em; fill: #4a5374; }
.landing .landing-radar-sector text { font-size: 15px; font-weight: 600; fill: var(--ink); }
.landing .landing-radar-dot { stroke: #fff; stroke-width: 2.5; }
.landing .landing-radar-dot.is-neg-strong { fill: var(--color-negative); }
.landing .landing-radar-dot.is-neg { fill: var(--color-negative-bar); }
.landing .landing-radar-dot.is-pos { fill: var(--color-positive); }
.landing .landing-radar-dot.is-neutral { fill: var(--viz-compare); }
.landing .landing-radar-focus { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.landing .landing-radar-label {
    font-size: 17px; font-weight: 500; fill: var(--ink);
    paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round;
}
.landing .landing-radar-label.is-selected { font-weight: 650; }
.landing .landing-radar-key {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 8px 0 0;
    font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted);
}
.landing .landing-radar-key span { display: inline-flex; align-items: center; gap: 8px; }
.landing .landing-radar-key span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--viz-compare); }
.landing .landing-radar-key .is-neg::before { background: var(--color-negative); }
.landing .landing-radar-key .is-pos::before { background: var(--color-positive); }
.landing .landing-radar-detail { display: grid; align-content: start; gap: 12px; padding: 16px; border: 1px solid var(--color-line); border-radius: 10px; }
.landing .landing-radar-detail p { margin: 0; }
.landing .landing-radar-name { font-size: 1rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -.01em; }
.landing .landing-radar-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.landing .landing-radar-facts .kpi-delta { font-size: var(--text-xs); }
.landing .landing-radar-quote { margin: 0; padding-left: 12px; font-size: var(--text-sm); line-height: 1.25rem; color: var(--l-text); border-left: 2px solid var(--color-line-strong); }
.landing .landing-radar-quote mark { padding: 0 2px; color: var(--ink); background: var(--ink-tint-2); border-radius: 2px; }
.landing .landing-radar-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--color-line); }
.landing .landing-radar-figures div { min-width: 0; }
.landing .landing-radar-figures dt { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.landing .landing-radar-figures dd { margin: 4px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -.02em; }
.landing .landing-radar-figures small { display: block; font-size: var(--text-xs); font-weight: 500; line-height: 1rem; letter-spacing: 0; color: var(--color-muted); }
@media (min-width: 720px) {
    .landing .landing-radar-body { grid-template-columns: minmax(0, 1fr) 256px; align-items: center; gap: 24px; padding: 24px; }
}

/* Alertes : la règle en courbe (huit semaines en graphite, la moyenne en pointillé gris, le seuil du double en filet),
   puis le saut des sept derniers jours en orangé, doublé du « ▲ » et du nombre au-dessus. */
.landing .landing-alarm p { margin: 0; }
.landing .landing-alarm .landing-alarm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.landing .landing-alarm-sent { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 500; line-height: 1rem; color: var(--color-muted); }
.landing .landing-alarm-sent .icon { width: 14px; height: 14px; }
.landing .landing-alarm-value { font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.01em; color: var(--color-negative-ink); }
.landing .landing-alarm-window { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.landing .landing-alarm-plot { margin-top: 16px; }
.landing .landing-alarm-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.landing .landing-alarm-plot :is(line, polyline) { fill: none; }
.landing .landing-alarm-axis { stroke: var(--viz-axis); }
.landing .landing-alarm-mean { stroke: var(--viz-compare); stroke-width: 1.5; stroke-dasharray: 4 4; }
.landing .landing-alarm-threshold { stroke: var(--color-line-strong); stroke-width: 1; }
.landing .landing-alarm-line { stroke: var(--viz-series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.landing .landing-alarm-jump { stroke: var(--color-negative); stroke-width: 2.5; stroke-linecap: round; }
.landing .landing-alarm-dot { fill: var(--color-negative); stroke: #fff; stroke-width: 2; }
.landing .landing-alarm .landing-alarm-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 11px; line-height: 16px; color: var(--color-muted); }
.landing .landing-alarm-key span { display: inline-flex; align-items: center; gap: 8px; }
.landing .landing-alarm-key span::before { content: ''; width: 16px; border-top: 1.5px dashed var(--viz-compare); }
.landing .landing-alarm-key .landing-alarm-key-threshold::before { border-top: 1px solid var(--color-line-strong); }
.landing .landing-alarm .landing-alarm-h { margin: 16px 0 8px; padding-top: 16px; font-size: var(--text-xs); font-weight: 600; line-height: 1rem; color: var(--color-muted); border-top: 1px solid var(--color-line); }
.landing .landing-alarm-quotes { display: grid; gap: 8px; }
.landing .landing-alarm-quotes li { display: flex; gap: 8px; padding: 8px 12px; font-size: var(--text-sm); line-height: 1.25rem; background: var(--color-neutral-soft); border-radius: 8px; }
.landing .landing-alarm-quotes .sign { flex: none; background: var(--color-card); }
.landing .landing-alarm .landing-alarm-axis-labels { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 11px; line-height: 16px; color: var(--color-muted); }

/* Mail du lundi : celui de la direction, en aperçu de messagerie (expéditeur, objet, début du mail). */
.landing .landing-inbox p { margin: 0; }
.landing .landing-inbox-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 0; }
.landing .landing-inbox-head .logo-tile { width: 32px; height: 32px; border-radius: 8px; }
.landing .landing-inbox-from { display: grid; min-width: 0; font-size: var(--text-sm); line-height: 1.25rem; }
.landing .landing-inbox-from strong { font-weight: 600; }
.landing .landing-inbox-from span { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.landing .landing-inbox-time { margin-left: auto; font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); white-space: nowrap; }
.landing .landing-inbox-subject { padding: 12px 16px 16px; font-size: 1rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -.01em; border-bottom: 1px solid var(--color-line); }
.landing .landing-inbox-body { padding: 16px; }
.landing .landing-inbox-hello { font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.01em; }
.landing .landing-inbox .landing-inbox-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 12px; font-size: var(--text-sm); line-height: 1.25rem; }
.landing .landing-inbox-section strong { font-weight: 600; }
.landing .landing-inbox-section span { font-size: var(--text-xs); color: var(--color-muted); }
.landing .landing-inbox .landing-inbox-h { margin: 16px 0 8px; font-size: var(--text-xs); font-weight: 600; line-height: 1rem; color: var(--color-muted); }
.landing .landing-inbox-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.landing .landing-inbox-kpis p { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px; background: var(--color-neutral-soft); border-radius: 8px; }
.landing .landing-inbox-kpis p > span:first-child { font-size: var(--text-xs); line-height: 1rem; color: var(--color-muted); }
.landing .landing-inbox-kpis strong { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.02em; }
.landing .landing-inbox-kpis .kpi-delta { font-size: var(--text-xs); }
.landing .landing-inbox-kpis .kpi-late { padding-block: 0; font-size: var(--text-xs); line-height: 1rem; }
.landing .landing-inbox-change { display: flex; gap: 8px; padding-block: 8px; font-size: var(--text-sm); line-height: 1.25rem; }
.landing .landing-inbox-change + .landing-inbox-change { border-top: 1px solid var(--color-line); }
.landing .landing-inbox-change span { flex: none; font-weight: 600; }
.landing .landing-inbox-change .is-good { color: var(--color-positive-ink); }
.landing .landing-inbox-change .is-bad { color: var(--color-negative-ink); }

/* Rapports : la page (période commune verrouillée, trois graphiques avec leurs étiquettes de sources), le bouton
   d'export et la page PDF qui en sort, posée à cheval sur le bord droit dès 720 px. */
.landing .landing-report-stage { display: grid; gap: 12px; }
.landing .landing-report p { margin: 0; }
.landing .landing-report-pdf {
    display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; font-weight: 600; color: var(--ink); white-space: nowrap;
    border: 1px solid var(--color-line-strong); border-radius: 7px;
}
.landing .landing-report-pdf .icon { width: 14px; height: 14px; }
.landing .landing-report .landing-report-period { margin-bottom: 16px; }
.landing .landing-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.landing .landing-report-block {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 12px;
    border: 1px solid var(--color-line); border-radius: 10px;
}
.landing .landing-report-block--wide { grid-column: 1 / -1; align-items: stretch; }
.landing .landing-report-block .viz-perimeter { margin-top: auto; padding-top: 4px; }
.landing .landing-report-value { font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -.03em; white-space: nowrap; }
.landing .landing-report-value small { margin-left: 4px; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--color-muted); }
.landing .landing-report-block .kpi-delta { font-size: var(--text-xs); }
.landing .landing-report-bars { display: grid; gap: 8px; }
.landing .landing-report-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: var(--text-xs); line-height: 1rem; }
.landing .landing-report-bar-value { font-weight: 600; }
.landing .landing-report-bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 6px; background: var(--viz-track); border-radius: 3px; }
.landing .landing-report-bar > span { display: block; width: calc(var(--w) * 1%); height: 100%; background: var(--viz-series); border-radius: 3px; }
.landing .landing-report-sheet { display: flex; align-items: center; gap: 12px; padding: 12px; }
.landing .landing-report-sheet-page {
    display: flex; flex-direction: column; gap: 4px; flex: none; width: 40px; height: 52px; padding: 4px;
    border: 1px solid var(--color-line); border-radius: 4px;
}
.landing .landing-report-sheet-title { width: 60%; height: 3px; background: var(--ink); border-radius: 2px; }
.landing .landing-report-sheet-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.landing .landing-report-sheet-kpis span { height: 8px; background: var(--color-neutral-soft); border-radius: 2px; }
.landing .landing-report-sheet-line { display: block; width: calc(var(--w) * 1%); height: 3px; background: var(--viz-bar); border-radius: 2px; }
.landing .landing-report-sheet-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: var(--text-xs); font-weight: 500; line-height: 1rem; overflow-wrap: anywhere; }
.landing .landing-report-sheet-type { padding: 0 4px; font-weight: 600; color: var(--on-ink); background: var(--ink); border-radius: 4px; }
@media (min-width: 720px) {
    .landing .landing-report-stage { grid-template-columns: minmax(0, 1fr) 168px; gap: 24px; align-items: center; }
    .landing .landing-report-sheet { flex-direction: column; align-items: stretch; }
    .landing .landing-report-sheet-page { width: auto; height: 200px; gap: 8px; padding: 16px 12px; }
    .landing .landing-report-sheet-title { height: 6px; }
    .landing .landing-report-sheet-kpis { gap: 8px; }
    .landing .landing-report-sheet-kpis span { height: 28px; }
    .landing .landing-report-sheet-line { height: 6px; }
}

/* Sécurité, sur fond encre : titre à gauche (collé en haut au défilement sur grand écran), à droite les six points en
   liste à filets : le nom en blanc, l'explication en retrait. */
.landing .landing-security-sheet { display: grid; gap: 48px; }
.landing .landing-security-list { margin: 0; border-bottom: 1px solid var(--on-ink-line); }
.landing .landing-security-row { display: grid; gap: 4px; padding-block: 24px; border-top: 1px solid var(--on-ink-line); }
.landing .landing-security-row dt { font-size: 1.25rem; font-weight: 600; line-height: 1.75rem; letter-spacing: -.02em; color: var(--on-ink); }
.landing .landing-security-row dd { margin: 0; color: var(--on-ink-muted); text-wrap: pretty; }
@media (min-width: 720px) {
    .landing .landing-security-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
}
@media (min-width: 960px) {
    .landing .landing-security-sheet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
    .landing .landing-security-sheet .landing-security-head { position: sticky; top: calc(var(--l-header) + 24px); }
}

/* Questions fréquentes : liste à déplier, filets plutôt que cartes ; intro à gauche sur grand écran. */
.landing .landing-faq-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) {
    .landing .landing-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
    .landing .landing-faq-intro { position: sticky; top: calc(var(--l-header) + 24px); }
}
.landing .landing-faq-list { border-top: 1px solid var(--l-line); }
.landing .landing-faq-item { border-bottom: 1px solid var(--l-line); }
.landing .landing-faq-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
    padding-block: var(--space-6); cursor: pointer; list-style: none; border-radius: 8px;
}
.landing .landing-faq-item > summary::-webkit-details-marker { display: none; }
.landing .landing-faq-item > summary::after {
    content: ''; flex: none; width: 14px; height: 14px; margin-right: 4px;
    background: linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
                linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat;
    transition: transform 300ms var(--l-ease);
}
.landing .landing-faq-item[open] > summary::after { transform: rotate(45deg); }
.landing .landing-faq-q { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -.015em; }
.landing .landing-faq-item > p { max-width: 40rem; margin: calc(-1 * var(--space-2)) 0 var(--space-6); padding-right: var(--space-8); color: var(--l-text); }
@media (min-width: 720px) { .landing .landing-faq-q { font-size: var(--text-lg); line-height: 1.75rem; } }

/* Demande de démo : ce qui se passe ensuite à gauche, le formulaire dans une carte blanche à droite. */
.landing .landing-demo-grid { display: grid; gap: var(--space-10); }
@media (min-width: 900px) { .landing .landing-demo-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.landing .landing-next { counter-reset: next; margin-top: var(--space-8); border-top: 1px solid var(--l-line); }
.landing .landing-next li {
    counter-increment: next; display: grid; grid-template-columns: 40px minmax(0, 1fr);
    padding-block: var(--space-4); max-width: 28rem; border-bottom: 1px solid var(--l-line);
}
.landing .landing-next li::before { content: '0' counter(next); font-weight: 600; color: var(--l-muted); }
.landing .landing-form-card { padding: var(--space-6); }
@media (min-width: 720px) { .landing .landing-form-card { padding: var(--space-10); } }
.landing .demo-form { display: grid; gap: var(--space-5); margin: 0; }
.landing .demo-form div { margin: 0; }
.landing .demo-form label { margin-top: 0; font-size: var(--text-sm); }
.landing .demo-form .help-text { margin-top: var(--space-2); }
.landing .demo-form select, .landing .demo-form textarea { max-width: none; }
.landing .demo-form textarea { min-height: 7rem; resize: vertical; }
.landing .demo-form .btn { padding: 10px 16px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; border-radius: 8px; }
.landing .demo-form .demo-privacy { margin: 0; }
@media (min-width: 640px) {
    .landing .demo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
    .landing .demo-form > :is([role=alert], div:has(textarea), .btn, .demo-privacy) { grid-column: 1 / -1; }
    .landing .demo-form .btn { justify-self: start; }
}
@media (max-width: 639px) { .landing .demo-form .btn { width: 100%; } }

/* Pied de page sur fond encre. */
.landing .landing-footer { padding-block: 64px 40px; color: var(--on-ink-muted); background: var(--ink); }
.landing .landing-footer-inner { display: grid; gap: var(--space-8); }
.landing .landing-footer-brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.landing .landing-footer-tagline { max-width: 24rem; margin: var(--space-4) 0 0; font-size: var(--text-base); color: var(--on-ink-muted); }
.landing .landing-footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-base); }
.landing .landing-footer-nav a {
    color: var(--on-ink-muted); text-decoration: none; border-radius: 4px; transition: color 300ms var(--l-ease);
}
.landing .landing-footer-nav a:hover { color: var(--on-ink); }
.landing .landing-footer-note { margin: 0; padding-top: var(--space-6); font-size: var(--text-sm); border-top: 1px solid var(--on-ink-line); }
@media (min-width: 900px) {
    .landing .landing-footer-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .landing .landing-footer-nav { padding-top: 4px; }
    .landing .landing-footer-note { grid-column: 1 / -1; }
}

/* Animations réduites : simples fondus, rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
    .landing .landing-cta:active { transform: none; }
    .landing .landing-menu-icon, .landing .landing-menu-icon--close, .landing .is-open .landing-menu-icon--open { transform: none; }
    .landing .landing-sheet-link { transform: none; transition: opacity 220ms linear; }
    .landing .landing-faq-item > summary::after { transition: none; }
}