/* ═══════════════════════════════════════════════════════════════════════
   MonActivité — site vitrine
   ───────────────────────────────────────────────────────────────────────
   Direction : « carnet de comptes ».

   Le produit répond à une question d'argent — « est-ce que je gagne ? ».
   Le site emprunte donc au registre comptable : papier chaud, filets fins,
   colonnes numérotées, chiffres en chasse tabulaire. Rien de décoratif qui
   ne serve la lecture d'un nombre.

   Les jetons de couleur sont ceux de l'application (braise / encre) : un
   prospect qui s'inscrit ne doit pas avoir l'impression de changer de marque.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Braise — accent de marque, calé sur l'orange du logo */
    --ember-50: #fef4f0;
    --ember-100: #fde5da;
    --ember-200: #fac7b0;
    --ember-300: #f5a17e;
    --ember-400: #ee7750;
    --ember-500: #e8512a;
    --ember-600: #d1421c;
    --ember-700: #ae3917;

    /* Encre — neutres CHAUDS. C'est ce qui distingue la marque du gris
       bleuté par défaut de tous les sites de logiciel. */
    --ink-50: #f8f6f4;
    --ink-100: #eeeae5;
    --ink-200: #dad3cc;
    --ink-300: #bfb5ab;
    --ink-400: #9c8f82;
    --ink-500: #7f7264;
    --ink-600: #665b50;
    --ink-700: #524941;
    --ink-800: #3a342e;
    --ink-900: #262220;
    --ink-950: #1a1715;

    --green-600: #059669;
    --green-50: #ecfdf5;
    --amber-600: #d97706;
    --red-600: #dc2626;
    --red-50: #fef2f2;

    --paper: #f8f6f4;
    --card: #fffefd;

    --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --serif: 'Instrument Serif', ui-serif, Georgia, serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    --rule: 1px solid var(--ink-200);
    --shell: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Compense la barre de navigation collante lors des sauts d'ancre. */
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-900);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Aucune page ne doit défiler horizontalement. « clip » et non « hidden » :
       hidden ferait du body un conteneur de défilement et casserait sticky. */
    overflow-x: clip;
}

/* Grain de papier : une trame très légère qui évite l'aplat plastique.
   Posée en couche fixe, sans coût de rendu au défilement. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--ember-200); color: var(--ink-950); }

:focus-visible {
    outline: 2px solid var(--ember-500);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Trame typographique ─────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
p { margin: 0; }

.display {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.02;
}
.display em {
    font-style: italic;
    color: var(--ember-600);
}

/* Chaque montant du site passe par là : chasse fixe et chiffres tabulaires,
   pour que les nombres s'alignent en colonne comme dans un livre de comptes. */
.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    letter-spacing: -.03em;
}

.eyebrow {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* ── Structure ───────────────────────────────────────────────────────── */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 1.25rem;
    position: relative;
    z-index: 1;
}

section { position: relative; z-index: 1; }

.band { padding-block: clamp(4rem, 10vw, 7.5rem); }
.band--rule { border-top: var(--rule); }

/* Intitulé de section numéroté, comme une colonne de registre. */
.band-head {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 3rem;
    max-width: 44rem;
}
.band-head__index {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ember-600);
    letter-spacing: .12em;
    font-weight: 900;
}
.band-head h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.band-head p {
    color: var(--ink-600);
    font-size: 1.0625rem;
    max-width: 38rem;
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    height: 3rem;
    padding-inline: 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--ember-600);
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 20px -10px rgba(209,66,28,.7);
}
.btn--primary:hover { background: var(--ember-700); }

.btn--ghost {
    border-color: var(--ink-300);
    color: var(--ink-800);
}
.btn--ghost:hover { border-color: var(--ink-900); background: var(--ink-100); }

.btn--onDark {
    background: var(--paper);
    color: var(--ink-950);
}
.btn--onDark:hover { background: #fff; }

.btn--lg { height: 3.375rem; padding-inline: 2rem; font-size: 1rem; }

/* ── Navigation ──────────────────────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, background-color .2s;
}
.nav.is-stuck { border-bottom-color: var(--ink-200); }

.nav__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 4.5rem;
}
.nav__brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; margin-right: auto; }
.nav__brand img { height: 2rem; width: auto; }
.nav__brand span { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }

.nav__links { display: none; gap: 1.75rem; align-items: center; }
.nav__links a {
    text-decoration: none;
    font-size: .9375rem;
    color: var(--ink-600);
    transition: color .15s;
}
.nav__links a:hover { color: var(--ink-950); }

.nav__actions { display: flex; align-items: center; gap: .75rem; }
.nav__login { display: none; text-decoration: none; font-size: .9375rem; font-weight: 500; }
.nav__login:hover { color: var(--ember-700); }

@media (min-width: 900px) {
    .nav__links, .nav__login { display: flex; }
}

/* ── Héros ───────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 6.5rem); }

.hero__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}
@media (min-width: 1000px) {
    /* Asymétrie volontaire : le discours à gauche, la démonstration à droite,
       légèrement plus étroite — c'est le texte qui porte la promesse. */
    .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border: 1px solid var(--ink-200);
    border-radius: 999px;
    background: var(--card);
    font-size: .8125rem;
    color: var(--ink-600);
    margin-bottom: 1.75rem;
}
.hero__tag i { color: var(--ember-500); font-size: .75rem; }

.hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.75rem, 7.5vw, 4.75rem);
    line-height: .98;
    letter-spacing: -.025em;
    margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--ember-600); }

.hero__lede {
    font-size: clamp(1.0625rem, 2vw, 1.1875rem);
    color: var(--ink-600);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 2.25rem; }

.hero__note {
    font-size: .875rem;
    color: var(--ink-500);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.hero__note i { color: var(--green-600); }

/* ── Calculateur ─────────────────────────────────────────────────────── */

/* Pièce maîtresse : la promesse du produit, démontrée avant l'inscription.
   Une capture d'écran montrerait l'outil ; ceci le fait fonctionner. */
.calc {
    background: var(--card);
    border: 1px solid var(--ink-200);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px rgba(38,34,32,.04), 0 24px 48px -32px rgba(38,34,32,.35);
    overflow: hidden;
}

.calc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.375rem;
    border-bottom: var(--rule);
    background: linear-gradient(180deg, var(--ink-50), var(--card));
}
.calc__title { font-size: .9375rem; font-weight: 600; }
.calc__live {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-500);
}
.calc__dot {
    width: .4375rem; height: .4375rem;
    border-radius: 999px;
    background: var(--green-600);
}
@media (prefers-reduced-motion: no-preference) {
    .calc__dot { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

.calc__body { padding: 1.375rem; display: grid; gap: 1.25rem; }

.field label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: .875rem;
    color: var(--ink-600);
    margin-bottom: .625rem;
}
.field label b {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-950);
    font-variant-numeric: tabular-nums;
}

/* Curseur : cible tactile large, esthétique « réglette d'instrument ». */
.field input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2rem;
    background: transparent;
    cursor: pointer;
    display: block;
}
/* --fill est posee par le JS : les pseudo-elements heritent des proprietes
   personnalisees de leur element d'origine, ce qui evite d'injecter une
   feuille de style par curseur. */
.field input[type='range'] { --fill: var(--ink-200); }
.field input[type='range']::-webkit-slider-runnable-track {
    height: .375rem;
    border-radius: 999px;
    background: var(--fill);
}
.field input[type='range']::-moz-range-track {
    height: .375rem;
    border-radius: 999px;
    background: var(--fill);
}
.field input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5rem; height: 1.5rem;
    margin-top: -.5625rem;
    border-radius: 999px;
    background: var(--ember-600);
    border: 3px solid var(--card);
    box-shadow: 0 2px 8px -2px rgba(38,34,32,.5);
    transition: transform .15s;
}
.field input[type='range']::-moz-range-thumb {
    width: 1.5rem; height: 1.5rem;
    border-radius: 999px;
    background: var(--ember-600);
    border: 3px solid var(--card);
    box-shadow: 0 2px 8px -2px rgba(38,34,32,.5);
}
.field input[type='range']:hover::-webkit-slider-thumb { transform: scale(1.12); }

/* Le calcul lui-même, présenté comme les lignes d'un ticket. */
.calc__ledger {
    border-top: var(--rule);
    padding: 1.125rem 1.375rem 1.375rem;
    background: var(--ink-50);
}
.ledger-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .4375rem;
    font-size: .9375rem;
}
.ledger-row dt { color: var(--ink-600); }
.ledger-row dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ledger-row--total {
    margin-top: .5rem;
    padding-top: .875rem;
    border-top: 1px dashed var(--ink-300);
    font-size: 1rem;
}
.ledger-row--total dt { color: var(--ink-950); font-weight: 600; }
.ledger-row--total dd { font-size: 1.5rem; font-weight: 600; }

.verdict {
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: .75rem;
    font-size: .875rem;
    line-height: 1.45;
    border: 1px solid;
    transition: background-color .25s, border-color .25s, color .25s;
}
.verdict i { margin-top: .1875rem; flex-shrink: 0; }
.verdict[data-tone='good']   { background: var(--green-50); border-color: #a7f3d0; color: #065f46; }
.verdict[data-tone='warn']   { background: #fffbeb;         border-color: #fde68a; color: #92400e; }
.verdict[data-tone='danger'] { background: var(--red-50);   border-color: #fecaca; color: #991b1b; }

.calc__foot {
    padding: .875rem 1.375rem;
    border-top: var(--rule);
    font-size: .75rem;
    color: var(--ink-500);
    text-align: center;
}

/* ── Constat (le problème) ───────────────────────────────────────────── */

.facts {
    display: grid;
    gap: 0;
    border-top: var(--rule);
}
@media (min-width: 820px) {
    .facts { grid-template-columns: repeat(3, 1fr); }
    .facts .fact + .fact { border-left: var(--rule); border-top: 0; }
}
.fact { padding: 2.25rem 0; }
.fact + .fact { border-top: var(--rule); }
@media (min-width: 820px) {
    .fact { padding: 2.5rem 2rem; }
    .fact:first-child { padding-left: 0; }
    .fact:last-child { padding-right: 0; }
}
.fact__figure {
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 4.25rem);
    line-height: 1;
    color: var(--ember-600);
    margin-bottom: .875rem;
}
.fact h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.fact p { color: var(--ink-600); font-size: .9375rem; }

/* ── Fonctionnalités ─────────────────────────────────────────────────── */

.chain {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 860px) { .chain { grid-template-columns: 1fr 1fr; } }

.chain__col {
    border: 1px solid var(--ink-200);
    border-radius: 1.25rem;
    background: var(--card);
    padding: 1.75rem;
}
.chain__col--dark {
    background: var(--ink-950);
    border-color: var(--ink-800);
    color: var(--ink-100);
}
.chain__col--dark .chain__label { color: var(--ember-400); }
.chain__col--dark h3 { color: #fff; }
.chain__col--dark .feat span { color: var(--ink-300); }
.chain__col--dark .feat i { background: rgba(232,81,42,.16); color: var(--ember-400); }
.chain__col--dark .feat b { color: #fff; }

.chain__label {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ember-600);
    font-weight: 900;
}
.chain__col h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.75rem;
    margin: .5rem 0 1.5rem;
    letter-spacing: -.02em;
}

.feat { display: flex; gap: .875rem; padding-block: .8125rem; }
.feat + .feat { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.feat i {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: .625rem;
    background: var(--ember-50);
    color: var(--ember-600);
    font-size: .8125rem;
}
.feat b { display: block; font-size: .9375rem; font-weight: 600; margin-bottom: .1875rem; }
.feat span { font-size: .875rem; color: var(--ink-600); line-height: 1.5; }

/* ── Secteurs ────────────────────────────────────────────────────────── */

.sectors {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
}
.sector {
    border: 1px solid var(--ink-200);
    border-radius: 1rem;
    background: var(--card);
    padding: 1.375rem;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sector:hover {
    border-color: var(--ember-300);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -20px rgba(38,34,32,.45);
}
.sector i { color: var(--ember-600); font-size: 1.125rem; }
.sector b { display: block; margin: .875rem 0 .25rem; font-size: .9375rem; }
.sector span { font-size: .8125rem; color: var(--ink-500); }
.sector__word {
    margin-top: .875rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--ink-200);
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-600);
}
.sector__word em { font-style: normal; color: var(--ember-700); font-weight: 900;}

/* ── Assistance (bande sombre) ───────────────────────────────────────── */

.dark {
    background: var(--ink-950);
    color: var(--ink-100);
    position: relative;
    overflow: hidden;
}
/* Halo braise très diffus : donne de la profondeur sans concurrencer le texte. */
.dark::after {
    content: '';
    position: absolute;
    top: -30%; left: 50%;
    width: min(46rem, 120vw); aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(232,81,42,.20), transparent 62%);
    pointer-events: none;
}
.dark .band-head h2 { color: #fff; }
.dark .band-head p { color: var(--ink-300); }
.dark .band-head__index { color: var(--ember-400); }

.alerts { display: grid; gap: .875rem; }
@media (min-width: 760px) { .alerts { grid-template-columns: 1fr 1fr; } }

.alert {
    display: flex;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
    border-radius: .875rem;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
}
.alert i { flex-shrink: 0; margin-top: .1875rem; font-size: .9375rem; }
.alert[data-tone='danger'] i { color: #f87171; }
.alert[data-tone='warn'] i   { color: #fbbf24; }
.alert[data-tone='info'] i   { color: var(--ember-400); }
.alert b { display: block; font-size: .9375rem; color: #fff; margin-bottom: .25rem; }
.alert p { font-size: .875rem; color: var(--ink-300); line-height: 1.5; }
.alert .num { color: #fff; }

/* ── Tarifs ──────────────────────────────────────────────────────────── */

.plans {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    align-items: start;
}

/* Chaque offre est présentée comme un ticket de caisse : bord supérieur
   dentelé, montants en chasse fixe, ligne de total séparée en pointillés.
   Le vocabulaire visuel du produit sert d'argument. */
.plan {
    position: relative;
    background: var(--card);
    border: 1px solid var(--ink-200);
    border-radius: 0 0 1rem 1rem;
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}
/* Bord superieur dentele : le masque decoupe des encoches rondes dans un
   bandeau plein, comme la dechirure d'un ticket de caisse. */
.plan::before {
    content: '';
    position: absolute;
    top: -8px; left: -1px; right: -1px;
    height: 8px;
    background: var(--ink-200);
    -webkit-mask-image: radial-gradient(circle at 5px 8px, transparent 4px, #000 4.5px);
    mask-image: radial-gradient(circle at 5px 8px, transparent 4px, #000 4.5px);
    -webkit-mask-size: 10px 8px;
    mask-size: 10px 8px;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
}
.plan--featured {
    border-color: var(--ink-950);
    box-shadow: 0 24px 48px -32px rgba(38,34,32,.5);
}
.plan--featured::before { background: var(--ink-950); }

.plan__badge {
    position: absolute;
    top: -.75rem; right: 1.25rem;
    padding: .1875rem .75rem;
    border-radius: 999px;
    background: var(--ink-950);
    color: #fff;
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.plan__name { font-size: 1.125rem; font-weight: 600; }
.plan__target { font-size: .8125rem; color: var(--ink-500); margin-top: .25rem; min-height: 2.4em; }

.plan__price {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    margin: 1.25rem 0 .25rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.plan__amount { font-size: 2.25rem; font-weight: 600; letter-spacing: -.04em; }
.plan__unit { font-size: .8125rem; color: var(--ink-500); }
.plan__yearly { font-size: .75rem; color: var(--ink-500); font-family: var(--mono); }

.plan__list {
    list-style: none;
    margin: 1.375rem 0 1.75rem;
    padding: 1.375rem 0 0;
    border-top: 1px dashed var(--ink-300);
    display: grid;
    gap: .625rem;
    flex: 1;
}
.plan__list li {
    display: flex;
    gap: .625rem;
    font-size: .875rem;
    color: var(--ink-700);
    line-height: 1.45;
}
.plan__list i { color: var(--green-600); font-size: .75rem; margin-top: .3125rem; flex-shrink: 0; }
.plan__list li[data-off] { color: var(--ink-400); }
.plan__list li[data-off] i { color: var(--ink-300); }

.plan .btn { width: 100%; }

.plans-note {
    margin-top: 1.5rem;
    font-size: .8125rem;
    color: var(--ink-500);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.plans-note i { margin-top: .25rem; color: var(--ink-400); }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq { border-top: var(--rule); max-width: 46rem; }
.faq details { border-bottom: var(--rule); }
.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.375rem 0;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.0625rem;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--ink-400); font-size: .875rem; transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p {
    padding-bottom: 1.375rem;
    color: var(--ink-600);
    max-width: 40rem;
}

/* ── Appel final ─────────────────────────────────────────────────────── */

.final { text-align: center; }
.final h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.25rem;
}
.final h2 em { font-style: italic; color: var(--ember-400); }
.final p { color: var(--ink-300); max-width: 34rem; margin: 0 auto 2.25rem; font-size: 1.0625rem; }
.final__cta { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: center; }

/* ── Pied de page ────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--ink-800); background: var(--ink-950); color: var(--ink-400); }
.foot__inner {
    padding-block: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: .875rem;
}
.foot__brand { display: flex; align-items: center; gap: .625rem; }
.foot__brand img { height: 1.75rem; width: auto; }
.foot__brand b { color: #fff; font-weight: 600; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot a { text-decoration: none; transition: color .15s; }
.foot a:hover { color: #fff; }

/* ── Révélation au défilement ────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
    }
    .reveal.is-in { opacity: 1; transform: none; }

    /* Entrée du héros : une seule séquence orchestrée vaut mieux que dix
       micro-animations dispersées. */
    .rise { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.3,1) forwards; }
    .rise--1 { animation-delay: .05s }
    .rise--2 { animation-delay: .14s }
    .rise--3 { animation-delay: .23s }
    .rise--4 { animation-delay: .32s }
    .rise--5 { animation-delay: .44s }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(22px) }
    to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}