/* =============================================================================
   ALVINAH PARTNERS — Site vitrine V2
   components.css · menu, hero, cartes, simulateur, trajectoire, footer
   ============================================================================= */


/* ============================================================
   MENU — pilule sticky smart (BRIEF §4.1)
   ============================================================ */
.site-menu {
    position: sticky;
    top: 24px;
    z-index: var(--z-menu);
    width: 100%;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--viewport-padding);
    transition: transform 300ms ease-out;

    /* F-013 (audit V3, 11/05/2026) — perf FCP :
       Avant : opacity:0 + transform:translateY(-20px) initial → menu invisible
       jusqu'à .is-visible posé par animations.js. Blocait le FCP du fold.
       Après : opacity:1 par défaut → menu visible dès le 1er paint. L'anim
       slide-down via .is-visible devient décorative (re-trigger possible
       mais sans dépendance pour la visibilité initiale). */
    opacity: 1;
    pointer-events: auto;
}
.site-menu.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.site-menu.is-hidden {
    transform: translateY(calc(-100% - 48px));
    transition: transform 300ms ease-out;
}

.site-menu__inner {
    display: flex;
    align-items: center;
    height: 62px;
    padding: 16px 24px;
    background: #18314a;
    border: 1px solid var(--color-border-faint);
    border-radius: var(--radius-pill);
    overflow: visible;
}

/* Le logo dépasse volontairement la pilule (fond perdu transparent
   du SVG → le contenu visible apparaît plus grand sans tronquer). */
.site-menu__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    overflow: visible;
}
/* V1.8 — logo réduit de -18% (200×80 → 164×66). */
.site-menu__logo img {
    width: 164px;
    height: 66px;
    display: block;
    margin: -21px 0;
}

.site-menu__nav {
    display: flex;
    flex: 1;                                    /* prend tout l'espace entre logo et CTA */
    justify-content: space-between;             /* répartit les liens uniformément */
    align-items: center;
    gap: 16px;                                  /* gap minimum si écrasement */
    margin: 0 clamp(24px, 4vw, 64px);          /* marges latérales avec logo + CTA */
}
.site-menu__nav a {
    font-size: 16px;
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    transition: opacity var(--transition-hover);
}

.site-menu__cta {
    flex-shrink: 0;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    transition: background var(--transition-hover);
}
.site-menu__cta:hover {
    background: rgba(255, 255, 255, 0.10);
    opacity: 1;
}

.site-menu__burger {
    display: none;
    width: 32px;
    height: 32px;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.site-menu__burger span {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--color-text-primary);
}

@media (max-width: 900px) {
    .site-menu { top: 16px; padding: 0 16px; }
    .site-menu__inner {
        padding: 12px 16px;
        height: 56px;
    }
    .site-menu__logo img {
        width: 123px;
        height: 49px;
        margin: -15px 0;
    }
    .site-menu__nav { display: none; }
    .site-menu__nav.is-open {
        display: flex;
        position: absolute;
        top: calc(100% + 12px);
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 0;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border-faint);
        border-radius: 16px;
        backdrop-filter: var(--backdrop-blur);
    }
    .site-menu__nav.is-open a {
        padding: 12px 24px;
        border-bottom: 1px solid var(--color-border-faint);
    }
    .site-menu__nav.is-open a:last-child { border-bottom: none; }
    .site-menu__burger { display: flex; }
}


/* ============================================================
   HERO (BRIEF §4.2)
   ============================================================ */
.hero {
    /* V4.2 — Hero compacté : 100vh → 85vh + padding bottom 80→60.
       Objectif : faire remonter la 1ère section (Une autre lecture). */
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px var(--viewport-padding) 60px;
    text-align: center;
    position: relative;
}

/* V4.7 — Wrapper qui empile logo + SVG du spark trace.
   Reprend les dimensions précédentes du .hero__logo. */
.hero__logo-wrap {
    position: relative;
    display: block;
    width: 806px;
    max-width: 94vw;
    aspect-ratio: 375 / 150;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .hero__logo-wrap {
        width: min(94vw, 410px);
    }
}

/* Logo Hero V2.0 : -15% (948 → 806), glow supprimé.
   V4.7 — width/aspect-ratio délégués au wrapper, le logo prend 100%. */
.hero__logo {
    width: 100%;
    max-width: 100%;
    height: 100%;
    aspect-ratio: 375 / 150;

    /* F-013 (audit V3, 11/05/2026) — perf FCP :
       Avant : opacity:0 initial → logo invisible jusqu'à .is-revealed posé
       par animations.js (~0.25s après JS chargé). Blocait le FCP visible.
       Après : opacity:1 par défaut → logo visible dès le 1er paint. L'anim
       fade-in via .is-revealed devient décorative (re-trigger possible
       mais pas nécessaire pour visibilité initiale). */
    opacity: 1;

    /* V4.5 — wipe top→bottom au scroll (piloté par hero-scroll.js).
       Formule à 4 stops pour un effet propre :
       - transparent 0% → transparent (var-8)% : zone effacée (haut)
       - transition douce sur 8% : bord adouci
       - #000 var% → #000 100% : zone visible (bas)
       Au repos : var=0% → tout #000 (tout visible).
       Au scroll : var monte → la zone transparente descend du haut. */
    --reveal-top: 0%;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent calc(var(--reveal-top) - 8%),
        #000 var(--reveal-top),
        #000 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent calc(var(--reveal-top) - 8%),
        #000 var(--reveal-top),
        #000 100%);
}
.hero__logo.is-revealed {
    opacity: 1;
    transition: opacity 1s ease-out;
}

/* V4.8b — SVG du spark trace, superposé sur le logo (parent .hero__logo-wrap).
   Logo principal : viewBox 375×150, lettres AVH y=0→68, bandeau y=68→100.
   Donc les lettres + haut bandeau occupent 0% → 45% du wrapper en hauteur.
   Le contour spark a viewBox 397×73 : on force aspect-ratio pour éviter la
   hauteur SVG par défaut (150px) qui faisait plonger le tracé en bas. */
.hero__spark {
    position: absolute;
    /* V4.13 — Retour au SVG viewBox 397×73 + calibration CSS (Vincent).
       Width: -15% par rapport à V4.11 (86% → 73%). Centré normalement. */
    top: calc(8% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 73%;
    aspect-ratio: 397 / 73;
    /* V4.18 — spark réactivé (test V4.17 confirmé : c'était bien lui).
       Élément retiré du DOM via removeChild() en fin de fade-out — plus
       radical et fiable que display:none. */
    display: block;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}
.hero__spark path {
    /* V4.15 — DEBUG : aucun filter pour isoler la source du halo persistant.
       Si halo toujours visible : ne vient PAS du spark. */
    stroke: #FFF8EC;
    stroke-width: 1.4;
}
.hero__spark.is-tracing {
    opacity: 1;
    transition: opacity 0.25s ease-out;
}
.hero__spark.is-fadeout {
    opacity: 0;
    /* V4.13 — fade-out doux mais pas trop long (400ms) ; pas de chevauchement
       avec le logo (logo apparaît après que spark soit invisible). */
    transition: opacity 0.4s ease-out;
}
/* V4.16 — Une fois caché, plus aucune trace possible (display: none).
   Appliqué : après le fade-out OU directement dans jumpToFinalState. */
.hero__spark.is-hidden {
    display: none !important;
}
/* Reduced motion : pas de spark trace */
@media (prefers-reduced-motion: reduce) {
    .hero__spark { display: none; }
}

/* margin-top réduit de -25% pour remonter la phrase plus près du logo
   (V1.6 : clamp 40-100 → clamp 30-75). */
.hero__calligraphy {
    margin: clamp(30px, 4.5vw, 75px) 0 0 0;
    width: 100%;
    max-width: 900px;
    line-height: 0;
    display: flex;
    justify-content: center;

    /* F-013 (audit V3, 11/05/2026) — perf FCP :
       Avant : opacity:0 initial → calligraphie invisible jusqu'à JS révèle.
       Blocait FCP du fold hero.
       Après : opacity:1 par défaut → texte calligraphique visible dès 1er
       paint. L'effet "stylo qui écrit" via clip-path animé (cf. animations.css
       @keyframes hero-calligraphy-write) reste sur .is-revealed et joue
       décoré quand JS finit de charger. Le rendu final est identique. */
    opacity: 1;
    /* V4.5 — le mask wipe est désormais sur l'<img> enfant (.hero__calligraphy-svg)
       pour garantir qu'il s'applique au rendu (le mask sur le h1 parent ne se
       propage pas correctement à l'image enfant). */
}
/* +10% en taille (V2.0) : 800px → 880px. */
.hero__calligraphy-svg {
    width: 100%;
    height: auto;
    max-width: 880px;
    display: block;

    /* V4.5 — wipe top→bottom au scroll (cohérent avec le logo). */
    --reveal-top: 0%;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent calc(var(--reveal-top) - 8%),
        #000 var(--reveal-top),
        #000 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0%,
        transparent calc(var(--reveal-top) - 8%),
        #000 var(--reveal-top),
        #000 100%);
}
@media (max-width: 768px) {
    .hero__calligraphy-svg { max-width: 90vw; }
}
.hero__calligraphy.is-revealed {
    opacity: 1;
    transition: opacity 1.7s ease-in-out;
}


/* ============================================================
   SECTION TITLE — — UNE AUTRE LECTURE — (style commun)
   ============================================================ */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 48px);
    font-family: var(--font-sans);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: var(--fw-light);
    font-style: italic;
    color: var(--color-text-secondary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto clamp(40px, 6vw, 80px);
    white-space: nowrap;
    max-width: 100%;
}
.section-title::before,
.section-title::after {
    content: "";
    display: block;
    width: clamp(40px, 6vw, 100px);
    height: 1px;
    background: var(--color-text-muted);
    flex-shrink: 1;
    min-width: 24px;
}

/* Sur viewports étroits, autorise le wrap mais en gardant l'esprit */
@media (max-width: 600px) {
    .section-title {
        white-space: normal;
        font-size: 20px;
        letter-spacing: 0.15em;
    }
}


/* ============================================================
   "UNE AUTRE LECTURE" — 2 cartes côte à côte centrées (BRIEF §4.3)
   ============================================================ */
.lecture__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(24px, 3vw, 48px);
    width: 100%;
    margin: 0 auto;
}

.lecture__card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 540px;
    padding: var(--card-padding-mobile);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-faint);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 280px;
}
@media (min-width: 1024px) {
    .lecture__card {
        padding: var(--card-padding);
        min-height: 380px;
    }
}
@media (max-width: 768px) {
    .lecture__card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.lecture__card p {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: var(--fs-body-italic);
    font-weight: var(--fw-extralight);
    color: var(--color-text-secondary);
    line-height: var(--lh-body);
    max-width: 38ch;
}
/* V2.6 — texte de la carte gauche en blanc (la droite reste taupe doux) */
.lecture__grid .lecture__card:first-child p {
    color: var(--color-text-primary);
}


/* ============================================================
   SIMULATEUR (BRIEF §4.4) — placeholder XXX en V1
   ============================================================ */
.simulator__selectors {
    display: grid;
    /* Vincent 08/05/2026 : retrait de l'input EBITDA → grid 2 colonnes */
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-accent-blue-soft);
    border-radius: var(--radius-pill);
    margin-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 768px) {
    .simulator__selectors {
        grid-template-columns: 1fr;
        border-radius: var(--radius-card);
    }
}

.simulator__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;     /* ancre pour le span 'optionnel' (V2.7) */
    min-width: 0;           /* hotfix S5-02 — empêche le <select> d'éclater le grid 1fr quand les libellés d'options sont longs (134 groupes_fin NAF) */
}
.simulator__field label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-extralight);
    color: var(--color-text-muted);
    letter-spacing: var(--ls-narrow);
    padding: 0 12px;
}
.simulator__field select,
.simulator__field input {
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight);
    font-size: var(--fs-body);
    text-align: center;
    transition: border-color var(--transition-hover);
    width: 100%;            /* hotfix S5-02 — adopte la largeur du grid item, pas celle du contenu */
    box-sizing: border-box; /* padding inclus dans la largeur */
}
.simulator__field select {
    /* hotfix S5-02 — tronque le libellé sélectionné si plus long que la colonne grid */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Placeholder italique façon Figma */
.simulator__field input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
    opacity: 1;
}
.simulator__placeholder-italic option[value=""] {
    font-style: italic;
    color: var(--color-text-muted);
}
.simulator__placeholder-italic:invalid,
.simulator__placeholder-italic:not(:focus):has(option[value=""]:checked) {
    font-style: italic;
    color: var(--color-text-muted);
}
.simulator__field select option {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}
/* Audit V3 K H-9 (12/05/2026) — :focus-visible plutôt que :focus pur.
   Avant : ``:focus { outline:none }`` écrasait la règle globale base.css
   ``:focus-visible { outline:2px solid }``. Conséquence : focus invisible
   au clavier sur les selects + input du simulator → régression a11y WCAG
   2.1 SC 2.4.7 (Focus Visible). Après : :focus-visible préserve l'outline
   accessibilité clavier ; le hover/clic souris reste sans outline (focus
   non visible) via :focus:not(:focus-visible) déjà défini base.css L95. */
.simulator__field select:focus-visible,
.simulator__field input:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
    border-color: var(--color-accent-blue);
}
.simulator__field select:focus:not(:focus-visible),
.simulator__field input:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--color-accent-blue);
}

/* V2.9 — décalages cumulés : -30mm (gauche) puis +75px (droite) = ~+38px gauche net.
   Remontée de 4% de la hauteur du parent. */
.simulator__optional-mention {
    position: absolute;
    top: 96%;                                 /* 100% - 4% */
    right: calc(12px + 30mm - 75px);          /* +30mm gauche, puis -75px (droite) */
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
    pointer-events: none;
}

.simulator__results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 768px) {
    .simulator__results { grid-template-columns: 1fr; }
}

.simulator__card {
    padding: var(--card-padding-mobile);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-faint);
    border-radius: var(--radius-card);
}
@media (min-width: 1024px) {
    .simulator__card { padding: var(--card-padding); }
}
.simulator__card--rj {
    background: rgba(22, 32, 48, 0.95);
    border-color: var(--color-accent-blue-soft);
}

.simulator__card-title {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 24px;
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    margin-bottom: 24px;
    text-align: center;       /* V3.0 — titre centré dans la bulle */
}

.simulator__highlight {
    padding: 20px 24px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--color-border-faint);
    border-radius: var(--radius-input);
    margin-bottom: 24px;
    text-align: center;       /* V3.0 — label + montant centrés */
}
.simulator__highlight-label {
    font-size: 14px;
    font-weight: var(--fw-extralight);
    color: var(--color-text-secondary);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.simulator__highlight-value {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.simulator__kpi {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-faint);
    gap: 12px;
}
.simulator__kpi:last-child { border-bottom: none; }
.simulator__kpi-label {
    font-size: 14px;
    font-weight: var(--fw-extralight);
    color: var(--color-text-secondary);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    flex: 1;
    position: relative;          /* ancre pour le em en absolute */
}
/* V3.2 — '(par normalisation)' : top 100% → 97% (-3%), left 0 → 110px. */
.simulator__kpi-label em {
    position: absolute;
    top: 97%;                    /* -3% (remontée) */
    left: 110px;                 /* +110px vers la droite */
    font-style: italic;
    text-transform: none;
    color: var(--color-text-muted);
    font-size: 11px;
    letter-spacing: 0;
    white-space: nowrap;
    pointer-events: none;
}
.simulator__kpi-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.simulator__disclaimer {
    margin-top: 32px;
    font-size: 13px;
    font-weight: var(--fw-extralight);
    font-style: italic;
    color: var(--color-text-secondary);
    opacity: 0.75;
    line-height: 1.6;
    text-align: left;
    transform: translateY(-30px);   /* V3.4 — remontée 40px puis +10px (descente) → -30px net */
    margin-bottom: -30px;           /* V3.7 — compense pour faire remonter tout ce qui suit */
}
.simulator__disclaimer p { margin-bottom: 4px; }


/* ============================================================
   CTA — pilule (Voir le catalogue, Accédez aux opportunités)
   ============================================================ */
.cta-block {
    text-align: center;
    margin: clamp(40px, 6vw, 80px) auto 0;
    transform: translateY(-40px);   /* V3.6 — +20px de remontée (cumul 40px) */
    margin-bottom: -40px;           /* V3.7 — compense pour faire remonter tout ce qui suit */
}
/* V4.27 — CTA "Lancer mon Projet" remonté de 25% supplémentaire pour
   centrage entre la bulle de simulation et les cards de résultat. */
.cta-block--simulator-launch {
    transform: translateY(calc(-40px - 20%));
    margin-bottom: -20px;  /* compense partiellement pour resserrer */
}

.cta-block__lead {
    font-family: var(--font-sans);
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: var(--fw-light);
    color: var(--color-text-secondary);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    margin-bottom: 24px;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 40px;
    background: rgba(44, 111, 173, 0.50);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    letter-spacing: var(--ls-narrow);
    text-transform: uppercase;
    transition: all var(--transition-hover);
}
.cta-button:hover {
    background: rgba(44, 111, 173, 0.70);
    opacity: 1;
}
.cta-button--lg {
    padding: 20px 56px;
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: var(--ls-wide);
    background: rgba(44, 111, 173, 0.60);
    box-shadow: 0 0 24px rgba(44, 111, 173, 0.20);
}
.cta-button--lg:hover {
    background: rgba(44, 111, 173, 0.80);
    box-shadow: 0 0 32px rgba(44, 111, 173, 0.40);
}


/* ============================================================
   TRAJECTOIRE (BRIEF §4.6)
   ============================================================ */
.trajectory__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trajectory__step {
    display: grid;
    grid-template-columns: clamp(80px, 9vw, 120px) 1fr;
    gap: clamp(24px, 4vw, 80px);
    align-items: baseline;
    padding: clamp(28px, 4vw, 40px) 0;
    border-bottom: 1px solid var(--color-border-faint);
    /* CORRECTION 2 V1.0 (2026-05-03) — empêche sélection texte au clic
       (Vincent : le texte restait figé/sélectionné après clic). Cursor
       retiré (plus de toggle clic, juste hover desktop + focus clavier).
       Conservé sur mobile : tap éventuel pour focus accessibilité. */
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.trajectory__step:focus { outline: none; }
.trajectory__step:focus-visible {
    /* CORRECTION 2 — focus clavier accessibilité, pas figé via souris */
    outline: 1px solid var(--color-border-soft);
    outline-offset: 4px;
}
.trajectory__step:last-child { border-bottom: none; }

.trajectory__num {
    font-family: var(--font-sans);
    font-weight: var(--fw-extralight);
    font-size: var(--fs-trajectory-num);
    color: var(--color-text-muted);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    transform-origin: left center;
    transition: transform 250ms ease-out, color 200ms ease-out;
}
/* V4.0 — N° grossit (+ couleur taupe) sur la ligne survolée / ouverte */
.trajectory__step.is-open .trajectory__num {
    transform: scale(1.18);
    color: var(--color-taupe);
}
@media (hover: hover) and (pointer: fine) {
    .trajectory__step:hover .trajectory__num {
        transform: scale(1.18);
        color: var(--color-taupe);
    }
}

.trajectory__content {
    display: flex;
    flex-direction: column;
}

.trajectory__title {
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: var(--fw-light);
    color: var(--color-text-primary);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    line-height: 1.3;
    text-align: center;             /* V3.9 — titre centré (cohérence avec détail) */
}

.trajectory__detail {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: var(--fw-extralight);
    color: var(--color-text-secondary);
    line-height: var(--lh-body);
    max-width: 60ch;
    text-align: center;                  /* V3.8 — détail centré */
    margin-left: auto;
    margin-right: auto;
    transition: max-height 300ms ease-in-out, opacity 300ms ease-in-out, margin-top 300ms ease-in-out, color 200ms ease-out;
}
.trajectory__title {
    transition: color 200ms ease-out;    /* V3.8 — transition couleur titre au hover */
}

.trajectory__step.is-open .trajectory__detail {
    margin-top: 16px;
    max-height: 200px;
    opacity: 1;
    color: var(--color-text-primary);    /* V3.8 — détail en blanc */
}
.trajectory__step.is-open .trajectory__title {
    color: var(--color-taupe);           /* V3.8 — titre en taupe */
}

@media (hover: hover) and (pointer: fine) {
    .trajectory__step:hover .trajectory__detail {
        margin-top: 16px;
        max-height: 200px;
        opacity: 1;
        color: var(--color-text-primary);    /* V3.8 — détail en blanc au hover */
    }
    .trajectory__step:hover .trajectory__title {
        color: var(--color-taupe);           /* V3.8 — titre en taupe au hover */
    }
}


/* ============================================================
   "TROUVEZ VOTRE PROCHAINE REPRISE" (BRIEF §4.7)
   ============================================================ */
.find__heading {
    font-family: var(--font-sans);
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: var(--fw-light);
    font-style: italic;
    color: var(--color-text-secondary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 48px);
    white-space: nowrap;
    max-width: 100%;
}
.find__heading::before,
.find__heading::after {
    content: "";
    display: block;
    width: clamp(40px, 6vw, 100px);
    height: 1px;
    background: var(--color-text-muted);
    flex-shrink: 1;
    min-width: 24px;
}

@media (max-width: 700px) {
    .find__heading {
        white-space: normal;
        font-size: 18px;
        letter-spacing: 0.15em;
    }
}

.find__cta-wrap {
    text-align: center;
}

.find__mention {
    margin-top: 24px;
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-extralight);
    color: var(--color-text-muted);
    line-height: 1.8;
}


/* ============================================================
   FOOTER (BRIEF §4.8)
   ============================================================ */
.site-footer {
    /* V4.1 — padding-bottom réduit à 22px (était 64-120px) pour resserrer
       l'espace sous "© ALVINAH PARTNERS 2026". Top inchangé. */
    padding: clamp(64px, 10vw, 120px) var(--viewport-padding) 22px;
    text-align: center;
}

/* Logo Footer V2.0 : glow supprimé. */
.site-footer__logo {
    width: 261px;
    max-width: 85vw;
    height: auto;
    aspect-ratio: 375 / 150;
    margin: 0 auto;
    opacity: 0.95;
}
@media (max-width: 768px) {
    .site-footer__logo {
        width: min(80vw, 210px);
    }
}

.site-footer__calligraphy {
    margin-top: 24px;
    font-family: var(--font-calligraphy);
    font-size: clamp(20px, 2.5vw, 28px);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.site-footer__links {
    margin-top: clamp(40px, 6vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 48px);
    flex-wrap: wrap;
}
.site-footer__links a {
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-extralight);
    color: var(--color-text-muted);
    letter-spacing: var(--ls-narrow);
}
.site-footer__contact-btn {
    padding: 12px 28px;
    background: var(--color-accent-blue);
    border-radius: var(--radius-pill);
    color: var(--color-text-primary) !important;
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: var(--ls-narrow);
    transition: background var(--transition-hover);
}
.site-footer__contact-btn:hover {
    background: rgba(44, 111, 173, 0.85);
    opacity: 1;
}

.site-footer__copyright {
    margin-top: clamp(32px, 4vw, 48px);
    font-family: var(--font-sans);
    font-size: var(--fs-caption);
    font-weight: var(--fw-light);
    color: var(--color-text-muted);
}


/* =============================================================================
   §X — NOS OFFRES (T03 V1.0 ouverture commerciale 2026-05-03)
   3 cards : Visiteur / Club Observateurs (mise en avant) / Club Repreneurs.
   Cohérence charte vitrine : Inter ExtraLight 200, taupe titres, pilules CTA.
   ============================================================================= */

.section--offers {
    padding-top: clamp(16px, 2.5vw, 32px);   /* remonté : Vincent 5/5/26 */
    padding-bottom: clamp(48px, 6vw, 96px);
}

.offers__intro {
    text-align: center;
    max-width: 620px;
    margin: 0 auto clamp(40px, 5vw, 72px);
}

.offers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
    max-width: 880px;       /* 2 cards : largeur plus serrée, plus centrée */
    margin: 0 auto;
}

.offers__card {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 40px);
    background: rgba(24, 49, 74, 0.4);
    border: 1px solid var(--color-border-faint);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 250ms ease, transform 250ms ease, background 250ms ease;
}

.offers__card:hover {
    border-color: var(--color-border-soft);
    background: rgba(24, 49, 74, 0.55);
    transform: translateY(-3px);
}

.offers__card--featured {
    border-color: var(--color-accent-blue);
    background: rgba(44, 111, 173, 0.12);
    position: relative;
}

.offers__card--featured:hover {
    border-color: var(--color-taupe);
    background: rgba(44, 111, 173, 0.18);
}

.offers__card-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-faint);
}

.offers__card-eyebrow {
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}

.offers__card--featured .offers__card-eyebrow {
    color: var(--color-taupe);
}

.offers__card-name {
    color: var(--color-taupe);
    font-family: var(--font-sans);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 200;
    letter-spacing: 0.04em;
    margin: 0 0 12px 0;
}

.offers__card-price {
    color: var(--color-text-primary);
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 200;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.offers__card-price-value {
    font-weight: 300;
}

.offers__card-price-period {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 200;
}

.offers__card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offers__card-features li {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 200;
    line-height: 1.6;
    padding-left: 22px;
    position: relative;
    opacity: 0.85;
}

.offers__card-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-taupe);
    opacity: 0.6;
}

.offers__card--featured .offers__card-features li::before {
    color: var(--color-accent-blue);
    opacity: 1;
}

.offers__card-cta {
    align-self: stretch;
    text-align: center;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--color-border-soft);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease;
}

.offers__card-cta:hover {
    background: var(--color-accent-blue-soft);
    border-color: var(--color-accent-blue);
}

.offers__card-cta--primary {
    background: var(--color-accent-blue);
    border-color: var(--color-accent-blue);
}

.offers__card-cta--primary:hover {
    background: transparent;
    border-color: var(--color-taupe);
}

@media (max-width: 720px) {
    .offers__grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   §X bis — SCREENING À LA CARTE — bandeau horizontal sous .offers__grid
   (V1.0 ouverture commerciale, contenu CR01 Vincent 2026-05-04)
   Format différent des cards : bandeau pleine largeur du grid (880px),
   2 zones flex : info (gauche) + action prix+CTA (droite).
   ============================================================================= */

.offers__oneshot {
    max-width: 880px;
    margin: 28px auto 0;
    padding: 28px clamp(28px, 3vw, 40px);
    background: rgba(24, 49, 74, 0.4);
    border: 1px solid var(--color-border-faint);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    transition: border-color 250ms ease, transform 250ms ease, background 250ms ease;
}

.offers__oneshot:hover {
    border-color: var(--color-border-soft);
    background: rgba(24, 49, 74, 0.55);
    transform: translateY(-2px);
}

.offers__oneshot-info {
    flex: 1;
    min-width: 0;
}

.offers__oneshot-info .offers__card-eyebrow {
    margin: 0 0 10px 0;
}

.offers__oneshot-info .offers__card-name {
    margin: 0 0 16px 0;
}

.offers__oneshot-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.offers__oneshot-features li {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 200;
    line-height: 1.6;
    padding-left: 22px;
    position: relative;
    opacity: 0.85;
}

.offers__oneshot-features li::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-taupe);
    opacity: 0.6;
}

.offers__oneshot-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-width: 200px;
}

.offers__oneshot-action .offers__card-price {
    margin: 0;
    text-align: right;
}

.offers__oneshot-action .offers__card-cta {
    align-self: stretch;
    text-align: center;
    padding: 12px 22px;
    font-size: 13px;
}

@media (max-width: 720px) {
    .offers__oneshot {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 24px;
    }
    .offers__oneshot-action {
        align-items: stretch;
        min-width: 0;
    }
    .offers__oneshot-action .offers__card-price {
        text-align: left;
    }
}