/* ============================================================
   Protocole 28 jours — Sales page
   Mobile first. Noir chaud + parchemin. JS minimal pour reveals.
   ============================================================ */

:root {
    --bg:            #0A0908;
    --bg-elevated:   #13110E;
    --bg-deeper:     #060504;
    --ink:           #E8E2D5;
    --ink-soft:      #A8A196;
    --ink-faint:     #6B6760;
    --gold:          #B8935A;
    --gold-bright:   #D1AF77;
    --gold-deep:     #8B6F3F;
    --gold-soft:     rgba(184, 147, 90, 0.85);
    --rule:          rgba(184, 147, 90, 0.18);
    --rule-strong:   rgba(184, 147, 90, 0.45);

    --serif:         'Newsreader', Georgia, 'Times New Roman', serif;
    --display:       'Cormorant Garamond', Georgia, serif;

    --measure:       620px;
    --pad-x-mobile:  22px;
    --pad-x-desktop: 32px;

    --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { scroll-behavior: smooth; }

html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

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

/* ============================================================
   Reading progress
   ============================================================ */
.reading-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 1.5px;
    background: rgba(184, 147, 90, 0.08);
    z-index: 100;
}

.reading-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 80ms linear;
}

/* ============================================================
   Page container & atmosphère
   ============================================================ */
.page {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 80px;
}

.page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 28%, rgba(184, 147, 90, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 60%, #15120D 0%, #0A0807 50%, #050403 100%);
    z-index: -2;
    pointer-events: none;
}

.page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ============================================================
   Reveals — état initial caché, transition au .is-visible
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
    font-family: var(--serif);
    font-size: 12.5px;
    font-style: italic;
    line-height: 1.6;
    color: var(--ink-faint);
    text-align: center;
    letter-spacing: 0.02em;
    max-width: 380px;
    margin: 28px auto 0;
    padding: 0 var(--pad-x-mobile);
}

/* ============================================================
   Hero typographique — frontispice + suscription de lettre (h1)
   ============================================================ */
.hero {
    text-align: center;
    padding: 20px var(--pad-x-mobile) 24px;
    max-width: 760px;
    margin: 0 auto;
    position: relative;
}

/* Halo de lumière chaude ambiante, comme une bougie posée à côté */
.hero::before {
    content: '';
    position: absolute;
    inset: -80px -60px -40px -60px;
    background:
        radial-gradient(ellipse 78% 65% at 50% 38%,
            rgba(184, 147, 90, 0.13) 0%,
            rgba(184, 147, 90, 0.05) 30%,
            transparent 70%);
    pointer-events: none;
    z-index: -1;
    filter: blur(10px);
}

/* Eyebrow — devient la seule pièce de texte du hero, donc porte le poids */
.hero-eyebrow {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0.003em;
    color: var(--ink);
    max-width: 540px;
    margin: 14px auto 0;
    text-wrap: balance;
    hanging-punctuation: first;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

.hero-eyebrow em {
    font-style: italic;
    color: var(--ink);
    font-weight: 700;
}

/* Sous-titre — bénéfice + tueur de fausse solution, en retrait sous la headline */
.hero-subhead {
    font-family: var(--serif);
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.006em;
    color: var(--gold);
    max-width: 480px;
    margin: 18px auto 0;
    text-wrap: balance;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}

/* Reveals staggérés : titre, puis sous-titre, puis le frontispice en dessous */
[data-reveal].hero-eyebrow { transition-delay: 0ms; }
[data-reveal].hero-subhead { transition-delay: 160ms; }
[data-reveal].frontispiece { transition-delay: 320ms; }

/* ============================================================
   Frontispice — petit portrait intime au top du hero
   Aucun cadre, aucune ombre. Filtré vintage + grain pour camoufler tells IA.
   ============================================================ */
.frontispiece {
    --parallax: 0px;
    /* Masque partagé img + grain : fonds noirs de l'image fondus dans le noir de la page.
       Fade haut court (préserve le halo de la tête), fade bas plus long (la base émerge des ténèbres),
       fades latéraux doux pour gommer le bord du rectangle. */
    --frontispiece-mask:
        linear-gradient(to bottom, transparent 0%, #000 4%, #000 86%, transparent 100%),
        linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 40px auto 0;
    padding: 0;
    text-align: center;
    background: transparent;
    transform: translate3d(0, var(--parallax, 0), 0);
    transition: transform 80ms linear;
}

.frontispiece img {
    width: 100%;
    display: block;
    /* Traitement gravure d'époque, allégé pour une image déjà sombre et contrastée :
       sépia léger pour neutraliser le vert et tirer vers la palette dorée, sans écraser les ombres */
    filter:
        sepia(0.30)
        saturate(0.80)
        brightness(0.99)
        contrast(1.05);
    -webkit-mask-image: var(--frontispiece-mask);
    mask-image: var(--frontispiece-mask);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Overlay grain : la matière de gravure ancienne */
.frontispiece::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.42  0 0 0 0 0.32  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.22;
    mix-blend-mode: overlay;
    -webkit-mask-image: var(--frontispiece-mask);
    mask-image: var(--frontispiece-mask);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Reveal long sur le frontispice : 1s de fade cinéma */
[data-reveal].frontispiece {
    transition-duration: 1000ms, 900ms;
}

/* ============================================================
   Ornement type imprimeur — ──── · ❦ · ────
   Marque le passage entre la page de titre et la lettre
   ============================================================ */
.hero-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 40px auto 32px;
    max-width: 280px;
    padding: 0 var(--pad-x-mobile);
}

.flourish-rule {
    flex: 1;
    max-width: 56px;
    height: 1px;
    background: var(--gold-deep);
    opacity: 0.55;
}

.flourish-mark {
    font-family: var(--display);
    color: var(--gold);
    font-size: 24px;
    line-height: 1;
    opacity: 0.9;
    user-select: none;
}

/* ============================================================
   Image insérée dans le flux (askèse / écriture)
   ============================================================ */
.inset-image {
    width: 100%;
    max-width: 580px;
    margin: 12px auto 28px;
    padding: 0 var(--pad-x-mobile);
    position: relative;
}

.inset-image img {
    width: 100%;
    display: block;
    filter:
        brightness(0.94)
        contrast(1.1)
        saturate(0.88);
    /* Masquer le sparkle Gemini bas droite + fade des bords */
    -webkit-mask-image:
        radial-gradient(circle at 95% 92%, transparent 0 26px, #000 60px),
        radial-gradient(ellipse 95% 95% at 50% 50%,
            #000 30%,
            rgba(0,0,0,0.85) 60%,
            rgba(0,0,0,0.4) 90%,
            transparent 100%);
    mask-image:
        radial-gradient(circle at 95% 92%, transparent 0 26px, #000 60px),
        radial-gradient(ellipse 95% 95% at 50% 50%,
            #000 30%,
            rgba(0,0,0,0.85) 60%,
            rgba(0,0,0,0.4) 90%,
            transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* ============================================================
   Lettre — corps de lecture
   ============================================================ */
.letter {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 32px var(--pad-x-mobile);
}

.letter + .letter,
.letter + .citadelle,
.letter + .mechanism,
.letter + .big-number,
.letter + .phases,
.letter + .cta-block,
.letter + .guarantee,
.letter + .signature {
    /* keep external rhythm controlled by next block */
}

.letter p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    margin-bottom: 18px;
    text-wrap: pretty;
}

.letter p:last-child { margin-bottom: 0; }

.letter em,
.gold-italic {
    font-style: italic;
    color: var(--gold);
    font-weight: 500;
}

.letter strong { color: var(--ink); font-weight: 500; }

.letter sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
    color: var(--gold);
}

/* Salutation */
.salutation {
    font-family: var(--display);
    font-style: italic;
    font-size: 24px;
    color: var(--gold);
    margin-bottom: 24px !important;
    letter-spacing: 0.01em;
}

/* Drop cap sur le premier paragraphe */
.first-paragraph {
    text-indent: 0;
}

.dropcap {
    float: left;
    font-family: var(--display);
    font-weight: 600;
    font-size: 64px;
    line-height: 0.85;
    color: var(--gold);
    padding: 6px 10px 0 0;
    margin-top: 2px;
}

/* Pensée intérieure */
.inner-thought {
    font-family: var(--display);
    font-style: italic;
    font-size: 20px;
    line-height: 1.55;
    color: var(--ink);
    padding-left: 18px;
    border-left: 1px solid var(--gold-deep);
    margin: 6px 0 24px !important;
}

/* Pivots */
.pivot {
    font-family: var(--display);
    font-weight: 600;
    font-style: italic;
    font-size: 26px !important;
    line-height: 1.32 !important;
    color: var(--ink) !important;
    text-align: left;
    margin: 32px 0 !important;
    text-wrap: balance;
}

.pivot em,
.pivot .gold-italic {
    color: var(--gold);
    font-style: italic;
}

/* Sous-titres */
.section-heading {
    font-family: var(--display);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.22;
    color: var(--ink);
    margin: 40px 0 22px;
    text-wrap: balance;
}

.section-heading em {
    font-style: italic;
    color: var(--gold);
    font-weight: 600;
}

/* Mots isolés */
.single-word {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 32px !important;
    color: var(--gold) !important;
    text-align: center;
    margin: 32px 0 !important;
    letter-spacing: 0.01em;
}

/* Aside */
.aside {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: var(--ink-soft) !important;
    font-style: italic;
    border-left: 1px solid var(--rule);
    padding-left: 16px;
    margin: 28px 0 !important;
}

/* Emphase */
.emphasis {
    font-family: var(--display);
    font-weight: 600;
    font-size: 24px !important;
    color: var(--ink) !important;
    margin: 32px 0 20px !important;
}

/* Contrat */
.contract {
    font-family: var(--display);
    font-style: italic;
    font-size: 20px !important;
    line-height: 1.55 !important;
    color: var(--ink) !important;
    border-left: 2px solid var(--gold);
    padding: 4px 0 4px 20px;
    margin: 10px 0 24px !important;
}

/* ============================================================
   La Citadelle — centerpiece
   ============================================================ */
.citadelle {
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(184, 147, 90, 0.04) 0%, transparent 70%),
        linear-gradient(to bottom, var(--bg-deeper), var(--bg), var(--bg-deeper));
    padding: 70px 0;
    margin: 24px 0;
    position: relative;
}

.citadelle::before,
.citadelle::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
    opacity: 0.6;
}

.citadelle::before { top: 0; }
.citadelle::after  { bottom: 0; }

.citadelle-inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--pad-x-mobile);
}

.citadelle-inner p {
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    margin-bottom: 20px;
    text-wrap: pretty;
}

.citadelle-prelude {
    font-style: italic;
    color: var(--ink-soft) !important;
}

.citadelle-inner em,
.citadelle-inner .gold-italic {
    font-style: italic;
    color: var(--gold);
    font-weight: 500;
}

.citadelle-inner .pivot {
    text-align: center;
    font-size: 28px !important;
}

/* ============================================================
   Citation Marc Aurèle
   ============================================================ */
.quote {
    position: relative;
    margin: 44px auto;
    padding: 36px 24px;
    text-align: center;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
}

.quote::before {
    content: '\201C';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--display);
    font-size: 64px;
    line-height: 1;
    color: var(--gold);
    background: var(--bg-deeper);
    padding: 0 14px;
}

.quote p {
    font-family: var(--display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
    color: var(--ink) !important;
    text-wrap: balance;
    max-width: 520px;
    margin: 0 auto 18px !important;
}

.quote footer {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12.5px;
    letter-spacing: 0.22em;
    color: var(--gold);
    text-transform: uppercase;
}

.quote footer::before { content: '— '; }

/* ============================================================
   Mécanisme — ἄσκησις
   ============================================================ */
.mechanism {
    text-align: center;
    padding: 80px var(--pad-x-mobile) 56px;
    max-width: var(--measure);
    margin: 0 auto;
    position: relative;
}

.greek-word {
    font-family: var(--display);
    font-weight: 500;
    font-size: 72px;
    line-height: 1;
    color: var(--gold);
    letter-spacing: 0.015em;
    margin: 0 0 22px;
    text-shadow: 0 0 60px rgba(184, 147, 90, 0.15);
}

.greek-rule {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--gold-deep);
    margin: 0 auto 22px;
    opacity: 0.7;
}

.mechanism-label {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    color: var(--ink);
    letter-spacing: 0.02em;
}

/* ============================================================
   Pattern interrupt — grands nombres
   ============================================================ */
.big-number {
    text-align: center;
    padding: 90px var(--pad-x-mobile);
    max-width: var(--measure);
    margin: 0 auto;
    position: relative;
}

.big-number-eyebrow {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.big-number .number {
    font-family: var(--display);
    font-weight: 700;
    font-size: 96px;
    line-height: 0.95;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.big-number-label {
    display: block;
    font-family: var(--display);
    font-style: italic;
    font-size: 17px;
    color: var(--gold);
    letter-spacing: 0.01em;
}

.big-number--alt .number {
    color: var(--gold);
}

/* ============================================================
   Ornement
   ============================================================ */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 36px auto;
    max-width: 280px;
    padding: 0 var(--pad-x-mobile);
}

.ornament-rule {
    flex: 1;
    height: 1px;
    background: var(--rule);
}

.ornament-mark {
    font-family: var(--display);
    color: var(--gold-deep);
    font-size: 20px;
    letter-spacing: 0.3em;
    user-select: none;
    opacity: 0.75;
}

/* ============================================================
   Phases — I · II · III
   ============================================================ */
.phases {
    max-width: var(--measure);
    margin: 28px auto 40px;
    padding: 0 var(--pad-x-mobile);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.phase {
    display: flex;
    align-items: stretch;
    gap: 20px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 26px 4px;
    background:
        linear-gradient(to right, rgba(184, 147, 90, 0.03) 0%, transparent 60%);
    position: relative;
    transition: background 400ms ease;
}

.phase:hover {
    background:
        linear-gradient(to right, rgba(184, 147, 90, 0.06) 0%, transparent 60%);
}

.phase-numeral {
    flex: 0 0 auto;
    font-family: var(--display);
    font-weight: 500;
    font-style: italic;
    font-size: 48px;
    line-height: 1;
    color: var(--gold);
    min-width: 60px;
    text-align: center;
    padding-top: 4px;
    letter-spacing: 0.04em;
}

.phase-body {
    flex: 1;
    min-width: 0;
}

.phase-label {
    font-family: var(--serif);
    font-size: 11px !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 8px !important;
    line-height: 1;
    font-weight: 500;
}

.phase-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.22;
    color: var(--ink);
    margin: 0 0 4px;
}

.phase-detail {
    font-family: var(--display);
    font-style: italic;
    font-size: 17px !important;
    color: var(--ink-soft) !important;
    margin: 0 !important;
}

/* ============================================================
   CTA — or plein, garantie signature, hover qui respire
   ============================================================ */
.cta-block {
    max-width: 500px;
    margin: 48px auto;
    padding: 0 var(--pad-x-mobile);
    text-align: center;
}

.cta {
    --cta-glow: 0 6px 28px -6px rgba(184, 147, 90, 0.28),
                0 0 0 0 rgba(184, 147, 90, 0),
                inset 0 1px 0 rgba(255, 255, 255, 0.10),
                inset 0 -1px 0 rgba(0, 0, 0, 0.18);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    padding: 26px 28px;
    background: var(--gold);
    color: var(--bg-deeper);
    border: 1px solid var(--gold);
    font-family: var(--display);
    font-style: italic;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: 0.012em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: var(--cta-glow);
    transition:
        background 380ms var(--ease-out),
        box-shadow 380ms var(--ease-out),
        transform 260ms var(--ease-out),
        border-color 380ms var(--ease-out);
    will-change: transform, box-shadow;
}

.cta-label {
    font-style: italic;
    font-weight: 600;
}

/* Séparateur vertical délicat entre label et prix */
.cta-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: currentColor;
    opacity: 0.35;
    align-self: center;
}

.cta-price {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.01em;
}

.cta:hover,
.cta:focus-visible {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    outline: none;
    transform: translateY(-1px);
    box-shadow:
        0 14px 44px -8px rgba(184, 147, 90, 0.45),
        0 0 0 5px rgba(184, 147, 90, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.cta:active {
    transform: translateY(0);
    box-shadow:
        0 4px 16px -4px rgba(184, 147, 90, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

/* Ligne garantie : signature gold sous le bouton */
.cta-guarantee {
    margin-top: 18px;
    font-family: var(--display);
    font-style: italic;
    font-size: 15px;
    line-height: 1.4;
    color: var(--gold);
    letter-spacing: 0.02em;
    text-align: center;
    opacity: 0.95;
}

/* Micro : trust secondaire, plus discret */
.cta-micro {
    margin-top: 6px;
    font-family: var(--serif);
    font-size: 12px;
    font-style: italic;
    color: var(--ink-faint);
    letter-spacing: 0.05em;
}

/* Prix promo : ancien prix barré + prix réduit dans le CTA */
.cta-price-old {
    position: relative;
    display: inline-block;
    font-size: 0.6em;
    font-weight: 600;
    font-style: normal;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0.01em;
    opacity: 0.55;
    margin-right: 0.55em;
    vertical-align: 0.1em;
    white-space: nowrap;
    text-decoration: none;
}
/* Rature dessinée à la main : trait fin et net, centré, indépendant de la police */
.cta-price-old::after {
    content: "";
    position: absolute;
    left: -0.08em;
    right: -0.08em;
    top: 50%;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transform: translateY(-50%);
}
.cta-price-now {
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

/* Échéance sobre sous le CTA */
.cta-deadline {
    margin-top: 14px;
    font-family: var(--display);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gold);
    letter-spacing: 0.02em;
}

/* ============================================================
   Garantie — sceau
   ============================================================ */
.guarantee {
    max-width: 380px;
    margin: 36px auto;
    padding: 44px 28px 36px;
    text-align: center;
    background: var(--bg-elevated);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 0 80px -30px rgba(184, 147, 90, 0.18);
}

.guarantee-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid var(--gold);
}

.guarantee-corner--tl { top: -1px;    left: -1px;    border-right: none;  border-bottom: none; }
.guarantee-corner--tr { top: -1px;    right: -1px;   border-left: none;   border-bottom: none; }
.guarantee-corner--bl { bottom: -1px; left: -1px;   border-right: none;  border-top: none; }
.guarantee-corner--br { bottom: -1px; right: -1px;  border-left: none;   border-top: none; }

.guarantee-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px !important;
}

.guarantee-number {
    font-family: var(--display);
    font-weight: 700;
    font-size: 84px;
    color: var(--ink);
    line-height: 1;
    margin: 0 !important;
}

.guarantee-unit {
    font-family: var(--display);
    font-style: italic;
    font-size: 20px;
    color: var(--gold);
    margin: 4px 0 18px !important;
    letter-spacing: 0.05em;
}

.guarantee-text {
    font-family: var(--display);
    font-style: italic;
    font-size: 17px !important;
    line-height: 1.55 !important;
    color: var(--ink) !important;
    margin: 0 !important;
}

.guarantee-condition {
    color: var(--gold);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ============================================================
   Signature
   ============================================================ */
.signature {
    text-align: center;
    margin: 70px auto 30px;
    padding: 0 var(--pad-x-mobile);
}

.signature-rule {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--gold-deep);
    margin: 0 auto 22px;
}

.signature-line {
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    color: var(--gold);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.signature-meta {
    font-family: var(--serif);
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ============================================================
   Bibliographie
   ============================================================ */
.biblio {
    max-width: var(--measure);
    margin: 30px auto 0;
    padding: 30px var(--pad-x-mobile) 0;
    border-top: 1px solid var(--rule);
}

.biblio-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    text-align: center;
}

.biblio ul {
    list-style: none;
    padding: 0;
    max-width: 480px;
    margin: 0 auto;
}

.biblio li {
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-faint);
    margin-bottom: 6px;
}

.biblio em {
    font-style: italic;
    color: var(--ink-soft);
}

.biblio sup {
    font-size: 0.65em;
    vertical-align: super;
    line-height: 0;
}

/* ============================================================
   Checkout embedded — Stripe section + success inline
   ============================================================ */
.checkout-section {
    max-width: 560px;
    margin: 48px auto 40px;
    padding: 0 var(--pad-x-mobile);
    scroll-margin-top: 30px;
}

.checkout-eyebrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    margin-bottom: 22px;
}

#checkout {
    min-height: 60px;
}

.checkout-loading {
    font-family: var(--display);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-faint);
    text-align: center;
    margin: 24px 0;
    letter-spacing: 0.04em;
}

.checkout-error {
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    background: rgba(207, 70, 70, 0.08);
    border: 1px solid rgba(207, 70, 70, 0.4);
    border-radius: 3px;
    padding: 16px 18px;
    margin: 16px 0;
}

/* ── Success inline ────────────────────────────────────── */
.checkout-success {
    max-width: 460px;
    margin: 56px auto;
    padding: 56px var(--pad-x-mobile);
    text-align: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(184, 147, 90, 0.06) 0%, transparent 70%);
    scroll-margin-top: 30px;
}

.success-ornament {
    font-family: var(--display);
    font-size: 28px;
    color: var(--gold-deep);
    line-height: 1;
    margin-bottom: 28px;
    opacity: 0.85;
}

.success-title {
    font-family: var(--display);
    font-weight: 600;
    font-style: italic;
    font-size: 36px;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 14px;
    letter-spacing: 0.005em;
}

.success-sub {
    font-family: var(--display);
    font-style: italic;
    font-size: 19px;
    color: var(--gold);
    margin: 0 0 36px;
    letter-spacing: 0.02em;
}

.success-cta {
    display: inline-block;
    padding: 22px 32px;
    background: var(--gold);
    color: var(--bg-deeper);
    border: 1px solid var(--gold);
    font-family: var(--display);
    font-style: italic;
    font-weight: 600;
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: 0.012em;
    text-decoration: none;
    border-radius: 3px;
    box-shadow:
        0 6px 28px -6px rgba(184, 147, 90, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition:
        background 380ms var(--ease-out),
        transform 220ms var(--ease-out),
        box-shadow 380ms var(--ease-out);
}

.success-cta:hover,
.success-cta:focus-visible {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
    outline: none;
    transform: translateY(-1px);
    box-shadow:
        0 14px 44px -8px rgba(184, 147, 90, 0.45),
        0 0 0 5px rgba(184, 147, 90, 0.10);
}

.success-fine {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-faint);
    line-height: 1.6;
    margin: 28px auto 0;
    max-width: 360px;
    letter-spacing: 0.01em;
}

@media (min-width: 720px) {
    .checkout-section { max-width: 620px; margin: 60px auto 48px; padding: 0 var(--pad-x-desktop); }
    .checkout-eyebrow { font-size: 14px; }
    .success-title { font-size: 44px; }
    .success-sub { font-size: 21px; }
    .success-cta { font-size: 21px; padding: 26px 40px; }
    .success-fine { font-size: 14px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Tablette / desktop
   ============================================================ */
@media (min-width: 720px) {
    html, body { font-size: 18px; }

    .topbar { font-size: 13.5px; margin-top: 40px; }

    .hero { padding: 40px var(--pad-x-desktop) 36px; }

    .frontispiece { max-width: 350px; margin-top: 48px; }

    .hero-eyebrow {
        font-size: 30px;
        max-width: 620px;
        margin-top: 22px;
    }

    .hero-subhead {
        font-size: 16px;
        max-width: 540px;
        margin-top: 22px;
    }

    .hero-flourish {
        gap: 28px;
        max-width: 380px;
        margin: 56px auto 48px;
    }

    .flourish-rule { max-width: 100px; }
    .flourish-mark { font-size: 28px; }

    .inset-image {
        max-width: 640px;
        margin: 20px auto 40px;
        padding: 0 var(--pad-x-desktop);
    }

    .letter { padding: 36px var(--pad-x-desktop); }
    .letter p { font-size: 18px; line-height: 1.78; }

    .salutation { font-size: 28px; }

    .dropcap { font-size: 78px; padding: 6px 12px 0 0; }

    .pivot { font-size: 32px !important; margin: 40px 0 !important; }
    .section-heading { font-size: 34px; margin: 48px 0 28px; }
    .single-word { font-size: 40px !important; }
    .inner-thought { font-size: 23px; padding-left: 22px; }
    .contract { font-size: 23px !important; padding-left: 22px; }
    .aside { font-size: 16px !important; }
    .emphasis { font-size: 26px !important; }

    .citadelle { padding: 100px 0; }
    .citadelle-inner { padding: 0 var(--pad-x-desktop); }
    .citadelle-inner p { font-size: 18px; line-height: 1.78; }
    .citadelle-inner .pivot { font-size: 34px !important; }

    .quote { padding: 48px 32px; margin: 56px auto; }
    .quote p { font-size: 26px !important; line-height: 1.45 !important; }
    .quote::before { font-size: 80px; top: -28px; }

    .mechanism { padding: 110px var(--pad-x-desktop) 70px; }
    .greek-word { font-size: 110px; }
    .mechanism-label { font-size: 24px; }

    .big-number { padding: 130px var(--pad-x-desktop); }
    .big-number-eyebrow { font-size: 14.5px; margin-bottom: 28px; }
    .big-number .number { font-size: 168px; }
    .big-number-label { font-size: 20px; }

    .ornament { margin: 48px auto; max-width: 340px; }
    .ornament-mark { font-size: 24px; }

    .phases { padding: 0 var(--pad-x-desktop); gap: 22px; margin: 36px auto 56px; }
    .phase { padding: 32px 8px; gap: 32px; }
    .phase-numeral { font-size: 64px; min-width: 80px; }
    .phase-title { font-size: 28px; }
    .phase-detail { font-size: 19px !important; }

    .cta-block { margin: 60px auto; max-width: 540px; }
    .cta { font-size: 23px; padding: 30px 36px; gap: 22px; }
    .cta-price { font-size: 22px; }
    .cta-sep { height: 26px; }
    .cta-guarantee { margin-top: 22px; font-size: 16.5px; }
    .cta-micro { font-size: 13px; margin-top: 8px; }
    .cta-deadline { font-size: 16px; margin-top: 16px; }

    .guarantee { max-width: 440px; padding: 52px 36px 42px; margin: 48px auto; }
    .guarantee-number { font-size: 110px; }
    .guarantee-unit { font-size: 24px; }
    .guarantee-text { font-size: 19px !important; }

    .signature { margin: 90px auto 40px; }
    .signature-line { font-size: 20px; }

    .biblio { margin-top: 40px; padding: 40px var(--pad-x-desktop) 0; }
}

/* ============================================================
   Très grand desktop — confort de lecture
   ============================================================ */
@media (min-width: 1100px) {
    .big-number .number { font-size: 200px; }
    .greek-word { font-size: 128px; }
    .hero-eyebrow { font-size: 34px; max-width: 720px; }
    .hero-subhead { font-size: 17px; max-width: 580px; }
    .frontispiece { max-width: 390px; }
}

/* ============================================================
   Exit interception — marqueur, pop-up de sortie, barre CTA
   ============================================================ */

/* Marge de scroll : la cible ne se colle pas sous la barre de progression */
#hook-mecanisme, #hook-protocole { scroll-margin-top: 40px; }

/* ── Marqueur d'orientation (toast bref) ── */
.exit-marker {
    position: fixed;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translate(-50%, 10px);
    z-index: 200;
    max-width: calc(100% - 44px);
    padding: 10px 20px;
    background: rgba(13, 11, 10, 0.88);
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    font-family: var(--display);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--ink-soft);
    text-align: center;
    letter-spacing: 0.01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.exit-marker.is-visible { opacity: 1; transform: translate(-50%, 0); }
.exit-marker .em-lead { color: var(--gold); font-weight: 600; font-style: italic; }

/* ── Pop-up de sortie : bottom sheet sobre ── */
.exit-popup {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
}
.exit-popup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 360ms var(--ease-out), visibility 0s linear 0s;
}
.exit-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 5, 4, 0.74);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.exit-popup__sheet {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--rule-strong);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 40px 26px calc(32px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    box-shadow: 0 -24px 70px -24px rgba(0, 0, 0, 0.85);
    transform: translateY(100%);
    transition: transform 440ms var(--ease-out);
}
.exit-popup.is-open .exit-popup__sheet { transform: translateY(0); }
.exit-popup__title {
    font-family: var(--display);
    font-weight: 600;
    font-style: italic;
    font-size: 30px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 16px;
}
.exit-popup__body {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 410px;
    margin: 0 auto 14px;
}
.exit-popup__danger {
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink);
    max-width: 420px;
    margin: 0 auto 26px;
}
.exit-popup__body [data-promo-price],
.exit-popup__danger [data-promo-price] {
    color: var(--gold);
    font-style: normal;
    font-weight: 600;
}
.exit-popup__cta { padding: 20px 24px; font-size: 19px; }
.exit-popup__dismiss {
    display: inline-block;
    margin-top: 18px;
    padding: 4px 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--ink-faint);
    border-bottom: 1px solid rgba(107, 103, 96, 0.4);
}

/* ── Barre CTA persistante ── */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 9, 8, 0.95);
    border-top: 1px solid var(--rule-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(120%);
    visibility: hidden;
    transition: transform 440ms var(--ease-out), visibility 0s linear 440ms;
}
.sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 440ms var(--ease-out), visibility 0s linear 0s;
}
.sticky-cta__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 18px;
    background: var(--gold);
    color: var(--bg-deeper);
    border-radius: 3px;
    font-family: var(--display);
    font-style: italic;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.1;
    box-shadow: 0 6px 24px -8px rgba(184, 147, 90, 0.4);
}
.sticky-cta__price {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
}
.sticky-cta__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink-faint);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 720px) {
    .exit-marker { font-size: 18px; }
    .exit-popup__title { font-size: 34px; }
    .exit-popup__body { font-size: 17px; }
    .exit-popup__danger { font-size: 20px; }
    .sticky-cta { padding: 13px 18px calc(13px + env(safe-area-inset-bottom, 0px)); }
    .sticky-cta__btn { font-size: 19px; }
}