/* AstroMeva, feuille de style publique du tunnel de commande.
   Ton éditorial : crème, encre, or. Typo Cormorant Garamond + Merriweather.
   Lisibilité 55-70 ans : base 17px, interlignage large, contraste élevé. */

:root {
    --ink: #1a1626;
    --ink-soft: #4a4256;
    --cream: #faf6ee;
    --cream-warm: #f4ede0;
    --gold: #a68350;
    --gold-soft: #c9a76a;
    --rule: #ded3bd;
    --err: #a03030;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Merriweather', Georgia, serif;
    /* Corps 18px (seuil senior : presbytie après 55 ans). 16px = plancher, réservé
       aux mentions secondaires. */
    font-size: 18px;
    line-height: 1.7;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* --- Header --- */
.site-header {
    background: var(--ink);
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}
.site-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    line-height: 1;
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-soft);
    text-decoration: none;
    letter-spacing: 0.28em;
    font-size: 15px;
    text-transform: uppercase;
}
.site-header .brand img { display: block; width: 24px; height: 24px; border-radius: 50%; }
.site-main { padding: 48px 0 64px; }
.site-main:has(> .sales-hero:first-child) { padding-top: 0; }
.site-footer {
    background: var(--ink);
    color: var(--gold-soft);
    padding: 32px 0;
    text-align: center;
    font-size: 14px;
}
.site-footer a { color: var(--gold-soft); text-decoration: none; margin: 0 4px; }
.site-footer .tiny { font-size: 12px; opacity: 0.7; margin-top: 12px; }

/* --- Titres --- */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
}
h1 { font-size: 36px; margin-bottom: 8px; }
h1 .subtitle {
    display: block; font-size: 18px; font-style: italic;
    color: var(--gold); margin-top: 6px; letter-spacing: 0.05em;
}
h2 { font-size: 26px; margin: 40px 0 12px; }
h3 { font-size: 20px; margin: 24px 0 8px; color: var(--gold); font-style: italic; }
p { margin: 0 0 14px; }
.lead { font-size: 19px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 32px; }

/* --- Formulaire --- */
form.order-form {
    background: var(--cream-warm);
    border: 1px solid var(--rule);
    padding: 32px;
    margin-top: 24px;
}
fieldset { border: none; padding: 0; margin: 0 0 24px; }
legend {
    font-family: 'Cormorant Garamond', serif;
    /* Or FONCÉ sur crème : ~7:1 (le var(--gold) clair ne tenait que ~3,3:1). */
    color: var(--gold-dark);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 15px;
    margin-bottom: 12px;
}
label {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    color: var(--ink);
    font-size: 17px;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
input[type="text"], input[type="email"], input[type="number"], select {
    width: 100%;
    padding: 13px 14px;
    min-height: 48px;
    border: 1px solid var(--rule);
    background: var(--cream);
    font-family: 'Merriweather', serif;
    font-size: 17px;
    color: var(--ink);
    margin-bottom: 16px;
}
input:focus, select:focus {
    outline: 2px solid var(--gold);
    outline-offset: -1px;
}
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* Un champ par ligne sur mobile (seuil senior : jamais deux champs côte à côte,
   un doigt qui tremble ne vise pas entre deux petits champs). */
@media (max-width: 640px) {
    .row, .row-2 { grid-template-columns: 1fr; gap: 8px; }
}
.checkbox {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;          /* >= 8px d'ecart entre deux zones tactiles */
    min-height: 48px;
    font-size: 16px;
    line-height: 1.5;
}
/* Cible tactile >= 48px (seuil senior) : la case a 26px, et le label (cliquable
   via for=) offre une zone haute d'au moins 48px pour un doigt qui tremble. */
.checkbox input { width: 26px; height: 26px; flex-shrink: 0; margin-top: 8px; }
.checkbox > label { padding: 12px 0; min-height: 48px; }

.report-choice { margin-bottom: 20px; }
.report-choice label {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--rule);
    background: var(--cream);
    cursor: pointer;
    margin-bottom: 8px;
    font-size: 16px;
}
.report-choice input[type="radio"] { display: none; }
.report-choice input[type="radio"]:checked + label {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
}
.report-choice .price {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    font-size: 18px;
}
.report-choice input[type="radio"]:checked + label .price { color: var(--gold-soft); }

button.cta {
    display: block;
    width: 100%;                       /* pleine largeur (mobile compris) */
    padding: 18px;
    min-height: 52px;
    background: var(--ink);            /* FOND PLEIN, jamais un bouton fantome */
    color: var(--cream);
    border: none;
    border-radius: 10px;              /* coins arrondis */
    box-shadow: 0 3px 10px rgba(26, 22, 38, 0.25);   /* ombre portee legere */
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;                  /* >= 18px */
    letter-spacing: 0.1em;
    cursor: pointer;
    margin-top: 12px;
    transition: background 0.15s, transform 0.06s, box-shadow 0.15s;
}
/* Survol lisible : creme sur or ne tenait que 3,3:1 (WCAG < 4,5:1). */
button.cta:hover { background: var(--gold-soft); color: var(--ink); }
/* Etat PRESSE visible. */
button.cta:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(26, 22, 38, 0.30); }
/* Etat ERREUR ville : la COULEUR change ET le TEXTE change (via JS) : jamais la
   couleur seule (skill senior). Rouge fonce, creme dessus ~9,5:1 (>= 7:1). Tient
   meme au survol. */
button.cta.is-error,
button.cta.is-error:hover {
    background: #7a1a1a;
    color: var(--cream);
    box-shadow: 0 3px 10px rgba(122, 26, 26, 0.30);
}

.hint {
    font-size: 16px;
    color: var(--ink-soft);
    font-style: italic;
    margin-top: -8px;
    margin-bottom: 16px;
}
/* Lien dans une mention d'aide : or FONCÉ souligné (>= 4,5:1 sur crème). */
.hint a { color: var(--gold-dark); text-decoration: underline; }
/* Disclosure de consentement sous l'email : lisible (>= 16px), contraste 7:1. */
.form-disclosure {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 8px 0 0;
}
.error {
    color: var(--err);
    background: #fdecec;
    border: 1px solid #eecccc;
    padding: 12px;
    margin: 12px 0;
    font-size: 17px;
}
/* Erreur ville, posée SOUS le champ, masquée par JS tant que la liste Google est
   ouverte (elle se déroule dessous), réaffichée à sa fermeture. Contrastée
   (rouge foncé sur rose : ~9,2:1 >= 7:1). */
.form-error-field {
    font-size: 17px;
    color: #7a1a1a;
    background: #fdecec;
    border: 1px solid #eecccc;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0 10px;
    font-weight: 500;
    line-height: 1.5;
}

/* --- Pages de résultat --- */
.result-card {
    background: var(--cream-warm);
    border: 1px solid var(--rule);
    padding: 40px;
    margin-top: 32px;
    text-align: center;
}
.result-card .ornament {
    color: var(--gold);
    font-size: 18px;
    letter-spacing: 0.5em;
    margin-bottom: 20px;
}
.result-card a.btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    margin-top: 16px;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.08em;
}

/* --- Pages légales --- */
.legal h1 { font-size: 30px; }
.legal h2 { font-size: 20px; margin: 32px 0 8px; color: var(--gold); }
.legal { max-width: 780px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; }
.legal a { color: var(--gold); }

/* ==============================================================
   Sales page (homepage), style sobre premium avec chaleur visuelle
   ============================================================== */

/* --- Boutons stylés (fond navy, texte crème, or au survol) --- */
a.btn {
    display: inline-block;
    padding: 16px 32px;
    background: var(--ink);
    color: var(--cream);
    text-decoration: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    letter-spacing: 0.08em;
    transition: all 0.2s ease;
    border: 1.5px solid var(--ink);
    box-shadow: 0 4px 12px rgba(26, 22, 38, 0.15);
}
a.btn:hover {
    /* Or CLAIR + texte encre : creme sur or (#a68350) ne tenait que 3,3:1,
       sous le seuil WCAG de 4,5:1. Encre sur or clair tient 8:1. */
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(150, 118, 47, 0.35);
    transform: translateY(-1px);
}
a.btn-large {
    padding: 22px 52px;
    font-size: 21px;
    letter-spacing: 0.1em;
}
a.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--gold);
    box-shadow: none;
}
a.btn-secondary:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--ink);
}

/* --- Hero avec ciel étoilé profond et mockup PDF --- */
.sales-hero {
    position: relative;
    background: linear-gradient(160deg, #0d0919 0%, var(--ink) 40%, #241d3b 100%);
    color: var(--cream);
    padding: 84px 0 96px;
    overflow: hidden;
}
.sales-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1px 1px at 22% 62%, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(2px 2px at 38% 22%, rgba(255,255,255,.85), transparent 60%),
      radial-gradient(1px 1px at 48% 78%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(1.2px 1.2px at 62% 12%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1px 1px at 71% 45%, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(1.8px 1.8px at 85% 68%, rgba(255,255,255,.9), transparent 60%),
      radial-gradient(1px 1px at 93% 32%, rgba(255,255,255,.75), transparent 60%),
      radial-gradient(1.5px 1.5px at 8% 82%, rgba(255,255,255,.8), transparent 60%),
      radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,.65), transparent 60%),
      radial-gradient(1.3px 1.3px at 32% 88%, rgba(255,255,255,.7), transparent 60%),
      radial-gradient(2px 2px at 78% 8%, rgba(201, 167, 106, .6), transparent 60%),
      radial-gradient(1.5px 1.5px at 18% 45%, rgba(201, 167, 106, .5), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.sales-hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1080px;
}
.hero-text .brand-mark {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-soft);
    letter-spacing: 0.4em;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0 0 28px;
}
.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 52px;
    line-height: 1.08;
    color: var(--cream);
    margin: 0 0 26px;
    letter-spacing: -0.005em;
}
.hero-title em {
    font-style: italic;
    color: var(--gold-soft);
}
.hero-lead {
    color: var(--cream);
    opacity: 0.94;
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 34px;
}
.hero-lead strong { color: var(--gold-soft); font-weight: 400; font-style: italic; }
.hero-cta { margin: 0 0 18px; }
a.btn-hero {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--ink);
    font-weight: 600;
    min-height: 58px;
    padding: 18px 42px;
    font-size: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
a.btn-hero:hover {
    background: var(--cream);
    border-color: var(--cream);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hero-alt {
    color: var(--cream);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.hero-alt a {
    color: #ecd9ab;   /* or clair : ~12,6:1 sur le fond navy du hero */
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.hero-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold-soft);
    font-size: 14.5px;
    margin-top: 12px;
    line-height: 1.6;
}
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-mockup {
    position: relative;
    transform: rotate(-4deg);
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}
.hero-mockup img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    border: 1px solid rgba(201, 167, 106, 0.3);
}
.hero-mockup::before {
    content: "";
    position: absolute;
    top: 12px; left: 12px;
    right: -12px; bottom: -12px;
    background: linear-gradient(135deg, rgba(201, 167, 106, 0.15), transparent 60%);
    z-index: -1;
    border: 1px solid rgba(201, 167, 106, 0.2);
}
@media (max-width: 900px) {
    .sales-hero { padding: 56px 0 64px; }
    .sales-hero-content { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hero-title { font-size: 40px; }
    .hero-mockup { transform: rotate(-2deg); }
    .hero-mockup img { max-width: 240px; }
}
@media (max-width: 480px) {
    .hero-title { font-size: 33px; }
    a.btn-hero { padding: 16px 26px; font-size: 18px; }
}

.sales-section {
    padding: 72px 0;
    background: var(--cream);
    position: relative;
}
.sales-section.sales-alt {
    background: var(--cream-warm);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.sales-section .wrap { max-width: 720px; }
.section-eyebrow {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-size: 13px;
    margin: 0 0 14px;
    position: relative;
    padding-left: 32px;
}
.section-eyebrow::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 22px; height: 1px;
    background: var(--gold);
}
.sales-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 26px;
    border: none;
    padding-bottom: 0;
    letter-spacing: -0.005em;
}
.sales-section p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
.section-emphasis {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--gold-dark);
    text-align: center;
    margin: 28px 0 0;
    line-height: 1.5;
}

.pull-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 24px;
    line-height: 1.4;
    color: var(--gold-dark);
    text-align: center;
    padding: 24px 32px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin: 32px 0;
}

/* --- Séparateur ornemental entre sections --- */
.ornament-divider {
    background: var(--cream);
    text-align: center;
    padding: 24px 0;
    position: relative;
}
.ornament-divider span {
    display: inline-block;
    color: var(--gold);
    font-size: 16px;
    padding: 0 20px;
    background: var(--cream);
    position: relative;
    z-index: 1;
}
.ornament-divider::before {
    content: "";
    position: absolute;
    left: 15%; right: 15%; top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
}
.sales-alt + .ornament-divider { background: var(--cream); }

/* --- Reveal-list : liste enrichie section 4 --- */
.reveal-list {
    list-style: none;
    padding: 0;
    margin: 32px 0;
}
.reveal-list li {
    display: flex;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 17px;
    line-height: 1.7;
}
.reveal-list li:last-child { border-bottom: none; }
.reveal-list .reveal-icon {
    color: var(--gold);
    font-size: 20px;
    flex-shrink: 0;
    padding-top: 2px;
}
.reveal-list strong { color: var(--ink); font-weight: 600; }

.sales-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}
.sales-list li {
    position: relative;
    padding: 8px 0 8px 28px;
    font-size: 17px;
    line-height: 1.65;
}
.sales-list li::before {
    content: "◆";
    position: absolute;
    left: 0;
    top: 12px;
    color: var(--gold);
    font-size: 12px;
}

.section-cta {
    text-align: center;
    margin: 40px 0 8px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 32px 0;
}
.preview-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--cream);
    padding: 12px;
    border: 1px solid var(--rule);
    transition: border-color 0.15s;
}
.preview-tile:hover { border-color: var(--gold); }
.preview-tile img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 16px rgba(26, 22, 38, 0.15);
}
.preview-caption {
    display: block;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold);
    font-size: 14px;
    margin-top: 8px;
    letter-spacing: 0.05em;
}
@media (max-width: 640px) {
    .preview-grid { grid-template-columns: 1fr; }
}

.price-callout {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--gold);
    text-align: center;
    margin: 32px 0 0;
}
.price-callout strong { color: var(--ink); font-weight: 600; }

.reports-list {
    margin: 32px 0;
    display: grid;
    gap: 14px;
}
.report-item {
    padding: 20px 24px;
    background: var(--cream);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gold);
    transition: border-left-color 0.2s;
}
.report-item:hover { border-left-color: var(--gold-dark); }
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    gap: 12px;
}
.report-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--ink);
    font-weight: 500;
}
.report-price {
    color: var(--gold-dark);
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    font-weight: 600;
    white-space: nowrap;
}
.report-question {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 16.5px;
    margin: 0;
    line-height: 1.5;
}

/* --- Sous-titre de bloc dans la section rapports (Signature, Formules) --- */
.subsection-heading {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-style: italic;
    font-size: 22px;
    color: var(--gold-dark);
    margin: 40px 0 16px;
    text-align: center;
    letter-spacing: 0.01em;
}

/* --- Signature Astrale teaser --- */
.signature-teaser {
    background: var(--cream);
    border: 1px solid var(--gold);
    padding: 24px 28px;
    margin: 20px 0 8px;
    position: relative;
}
.signature-teaser-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    gap: 12px;
}
.signature-teaser-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--ink);
    font-weight: 500;
}
.signature-teaser-price {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-dark);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.signature-teaser p { margin: 0 0 6px; font-size: 16px; }

/* --- Bundles (formules avec prix barré) --- */
.bundles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0 8px;
}
@media (max-width: 640px) {
    .bundles-grid { grid-template-columns: 1fr; }
}
.bundle-item {
    background: var(--cream);
    border: 1px solid var(--rule);
    padding: 24px 22px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s;
}
.bundle-item:hover { border-color: var(--gold); }
.bundle-featured {
    border: 2px solid var(--gold);
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}
.bundle-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--gold-soft);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    padding: 4px 16px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bundle-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 8px;
}
.bundle-desc {
    color: var(--ink-soft);
    font-size: 15.5px;
    margin: 0 0 16px;
    line-height: 1.5;
}
.bundle-prices {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 10px;
}
.bundle-price-before {
    color: var(--ink-soft);
    text-decoration: line-through;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
}
.bundle-price {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold-dark);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.how-it-works {
    list-style: none;
    padding: 0;
    margin: 24px 0 32px;
    counter-reset: step;
}
.how-it-works li {
    counter-increment: step;
    position: relative;
    padding: 14px 0 14px 60px;
    font-size: 17px;
    line-height: 1.65;
    border-bottom: 1px dashed var(--rule);
}
.how-it-works li:last-child { border-bottom: none; }
.how-it-works li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    color: var(--gold);
    line-height: 1;
}

.faq { margin: 24px 0; }
.faq-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
}
.faq-item:last-child { border-bottom: none; }
.faq-item h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    color: var(--ink);
    margin: 0 0 8px;
    font-style: normal;
}
.faq-item p { margin: 0; font-size: 16px; color: var(--ink-soft); line-height: 1.65; }

.sales-close {
    padding: 100px 0 96px;
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
    text-align: center;
}
.sales-close .ornament {
    color: var(--gold);
    font-size: 20px;
    letter-spacing: 0.5em;
    margin-bottom: 28px;
}
.close-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 20px;
}
.close-lead {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--gold-dark);
    margin: 0 0 32px;
}

.upsell-banner {
    background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
    border: 1px solid var(--gold);
    border-left: 3px solid var(--gold);
    padding: 24px 28px;
    margin: 24px 0;
}
.upsell-banner h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--gold-dark);
    margin: 0 0 10px;
    font-style: normal;
}
.upsell-banner p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.upsell-banner .btn { padding: 14px 28px; font-size: 16px; }

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--gold);
    color: var(--cream);
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Cormorant Garamond', serif;
}
.status-ready { background: #4a7a4a; }
.status-error { background: var(--err); }

/* ======================================================================
   Catalogue produit (accueil) : grille de cartes cliquables.
   ====================================================================== */

.catalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 24px 0 12px;
}
@media (max-width: 640px) {
    .catalog-grid { grid-template-columns: 1fr; }
}
.catalog-card {
    display: block;
    padding: 20px 24px 22px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.catalog-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(166, 131, 80, 0.12);
}
.catalog-card-price {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: var(--gold);
    font-weight: 500;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}
.catalog-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    margin: 0 0 8px;
    color: var(--ink);
    font-style: normal;
    font-weight: 500;
    line-height: 1.15;
}
.catalog-question {
    font-style: italic;
    color: var(--ink-soft);
    margin: 0 0 12px;
    font-size: 15px;
}
.catalog-teaser {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
}
.catalog-cta {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    font-size: 17px;
    letter-spacing: 0.02em;
}
.catalog-card-starter {
    background: var(--cream-warm);
    border-color: var(--gold-soft);
}
.catalog-bundles { margin-top: 40px; }

/* ======================================================================
   Pages produit dediees : hero + contenu structure.
   ====================================================================== */

.product-hero {
    padding: 48px 0 20px;
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
    border-bottom: 1px solid var(--rule);
}
.product-hero-content { text-align: center; }
.product-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    line-height: 1.15;
    color: var(--ink);
    margin: 12px 0 20px;
    font-weight: 500;
}
.product-title em {
    color: var(--gold-dark, var(--gold));
    font-style: italic;
}
@media (max-width: 640px) {
    .product-title { font-size: 32px; }
}
.product-intro {
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 14px;
    text-align: left;
}
.product-h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    margin: 8px 0 20px;
}
.product-outro { margin: 20px 0 8px; }
.product-price-line {
    text-align: center;
    margin: 24px 0 12px;
    font-size: 18px;
    line-height: 1.6;
}
.product-price-line em.hint {
    font-size: 14px;
    color: var(--ink-soft);
    font-style: italic;
    display: inline-block;
    margin-top: 4px;
}
/* Deduction des 9,90 EUR : le meilleur argument de de-risquage, en clair
   pres du prix (pas en petit gris). */
.price-deduction {
    display: inline-block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    font-weight: 500;
}

/* Ligne de cadrage « deux parties » sous la ligne de preuve (page résultat). */
.reading-plan {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.5;
    color: var(--gold-dark);
    text-align: center;
    margin: 10px 0 0;
}

/* Démarcation de CHAPITRE : « ──── VOTRE MINI-LECTURE ──── ». Plus forte que les
   eyebrows (13-15px) : c'est un changement de chapitre, pas une section de plus.
   gold-dark sur crème/cream-warm >= 6,4:1. */
.chapter-break {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 46px 0 6px;
}
.chapter-break::before, .chapter-break::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    background: var(--gold-dark);
}
.chapter-break span {
    font-family: 'Cormorant Garamond', serif;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 19px;
    color: var(--gold-dark);
    white-space: nowrap;
}
@media (max-width: 640px) {
    .chapter-break { gap: 12px; }
    .chapter-break span { font-size: 16px; letter-spacing: 0.14em; }
}

/* ======================================================================
   Recap produit sur /commander (mono-produit).
   ====================================================================== */

.order-recap {
    padding: 20px 24px;
    background: var(--cream-warm);
    border: 1px solid var(--gold-soft);
    border-left: 3px solid var(--gold);
    margin-bottom: 24px;
}
.order-recap-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.order-recap-label {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
}
.order-recap-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: var(--ink);
    flex: 1;
}
.order-recap-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    color: var(--gold);
}
.order-recap-before {
    text-decoration: line-through;
    color: var(--ink-soft);
    font-size: 18px;
    margin-right: 8px;
}

/* ======================================================================
   Cartes bundle sur /formules.
   ====================================================================== */

.bundle-card {
    position: relative;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    margin-bottom: 28px;
}
.bundle-featured-card {
    background: var(--cream-warm);
    border-color: var(--gold);
    border-left: 3px solid var(--gold);
}
.bundle-card-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--gold);
    color: var(--cream);
    padding: 4px 12px;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: 'Cormorant Garamond', serif;
}
.bundle-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.bundle-card-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    margin: 0;
}
.bundle-card-prices { text-align: right; white-space: nowrap; }
.bundle-price-main {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    color: var(--gold);
}
.bundle-list {
    margin: 12px 0 16px;
    padding-left: 20px;
}
.bundle-list li { margin-bottom: 6px; }


/* ======================================================================
   Refresh accessibilite (audience 50+, guidelines NN/g).
   Ce bloc surcharge intentionnellement les regles precedentes.
   ====================================================================== */

/* --- Palette : un « or fonce » AA sur cream, pour tous les petits textes.
   Sur cream #faf6ee, #6d4f1c donne un ratio ~6.5:1 (AA large + normal). */
:root {
    /* Doré foncé pour TEXTE sur crème : #5f4517 tient >= 7:1 sur tous les fonds
       clairs du site (crème, cream-warm, cartes, encart doré), seuil senior.
       #6d4f1c plafonnait à 6,5-7,0. */
    --gold-dark: #5f4517;
    --ink: #171223;   /* legerement plus fonce pour AAA sur cream */
}

/* --- Base : 18px, comfortable line-height. --- */
body { font-size: 18px; line-height: 1.7; }
.hint { font-size: 16px; color: var(--ink-soft); font-style: normal; }
/* 16px, pas 15 : c'est le plancher que ce fichier declare lui-meme plus haut,
   et cette regle-ci gagne (specificite egale, elle vient apres). 53 textes
   d'aide des gabarits clients en dependent. */
.tiny { font-size: 13px; }

/* --- Contraste des petits textes : plus d'or clair sur clair. --- */
/* L'or de la charte (--gold #a68350) donne 3,26:1 sur creme : sous le plancher
   LEGAL de 4,5:1 pour du texte normal. Il portait encore des PRIX, des titres de
   section et les liens des pages legales. On bascule le TEXTE sur --gold-dark
   (8,29:1), deja defini plus haut pour cette raison exacte.
   Les usages DECORATIFS de --gold (ornements, icones, bordures, etoiles d'avis)
   ne sont PAS touches : leur seuil est 3:1, ils le tiennent, et les changer
   assombrirait la charte sans rien gagner. */
h1 .subtitle,
h3,
.legal h2,
.legal a,
.report-choice .price,
.catalog-card-price,
.catalog-cta,
.order-recap-label,
.order-recap-price,
.price-callout,
.preview-caption { color: var(--gold-dark); }

.section-eyebrow { color: var(--gold-dark); font-size: 15px; letter-spacing: 0.24em; }
.site-footer, .site-footer a, .site-footer .tiny { color: #f0e6d0; }
.site-footer a { text-decoration: underline; }

/* --- Skip-link accessibilite (visible au focus clavier). --- */
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--cream);
    padding: 12px 20px; text-decoration: none; z-index: 100;
    font-family: 'Merriweather', serif;
}
.skip-link:focus { left: 12px; top: 12px; outline: 3px solid var(--gold-soft); }

/* --- Nav persistante dans le header. --- */
.site-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.site-nav {
    display: flex; gap: 4px; flex-wrap: wrap;
}
.site-nav a {
    color: var(--cream);
    text-decoration: none;
    padding: 12px 18px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    letter-spacing: 0.06em;
    border-radius: 2px;
    transition: background 120ms, color 120ms;
    min-height: 44px;
    display: inline-flex; align-items: center;
}
.site-nav a:hover { background: rgba(201, 167, 106, 0.18); color: var(--gold-soft); }
.site-nav a:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }

/* Pas de menu hamburger (règle senior : icône seule non universelle pour ce
   public). La nav est en toutes lettres, ou absente sur une page de conversion. */

/* --- Boutons : 48px min de hauteur, focus visible partout. --- */
a.btn, button.cta {
    min-height: 52px;
    padding: 16px 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
a.btn-large { min-height: 60px; padding: 20px 40px; font-size: 20px; }
a.btn:focus-visible,
button.cta:focus-visible,
.catalog-card:focus-visible,
.bundle-item:focus-visible,
a:focus-visible {
    outline: 3px solid var(--gold-soft);
    outline-offset: 3px;
}

/* --- Cartes catalogue : profondeur, glyphe famille, pastille prix, hover marqué. --- */
.catalog-help {
    font-size: 17px;
    color: var(--ink-soft);
    margin: 4px 0 0;
    max-width: 560px;
}
.catalog-grid { gap: 26px; margin: 32px 0 16px; }

.catalog-card {
    --family: var(--gold-dark);
    --family-tint: var(--cream-warm);
    --family-glow: rgba(109, 79, 28, 0.10);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px 26px;
    background: #fffdf8;
    border: 1px solid var(--rule);
    border-radius: 10px;
    cursor: pointer;
    min-height: 100%;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(23, 18, 35, 0.05),
        0 8px 20px rgba(23, 18, 35, 0.06);
    transition:
        transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
        box-shadow 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
        border-color 160ms;
}
.catalog-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        120% 60% at 0% 0%,
        var(--family-tint) 0%,
        rgba(255, 253, 248, 0) 55%
    );
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}
.catalog-card > * { position: relative; z-index: 1; }

.catalog-card-topband {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--family) 0%, var(--gold-soft) 100%);
    opacity: 0.75;
    z-index: 2;
}

.catalog-card:hover,
.catalog-card:focus-visible {
    transform: translateY(-6px);
    border-color: var(--family);
    box-shadow:
        0 2px 4px rgba(23, 18, 35, 0.06),
        0 22px 44px var(--family-glow),
        0 12px 24px rgba(23, 18, 35, 0.10);
}
.catalog-card:hover .catalog-card-topband,
.catalog-card:focus-visible .catalog-card-topband {
    opacity: 1;
}

/* Badges (glyphe astro + pastille prix) alignés en haut de la carte. */
.catalog-card-badges {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 18px;
}
.catalog-card-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--family-tint);
    color: var(--family);
    font-size: 28px;
    line-height: 1;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(23, 18, 35, 0.08);
    transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.catalog-card:hover .catalog-card-glyph,
.catalog-card:focus-visible .catalog-card-glyph {
    transform: scale(1.06) rotate(-4deg);
}
.catalog-card-price {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--cream);
    color: var(--gold-dark);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}

/* Le nom du rapport passe en kicker discret : c'est la question qui vend.
   Sélecteur composé (h3.catalog-card-name) pour battre la règle .catalog-card h3
   définie plus haut dans la feuille. */
h3.catalog-card-name,
.catalog-card h3.catalog-card-name {
    margin: 0 0 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--family);
    font-style: normal;
    line-height: 1.2;
}

/* La question devient le héros visuel de la carte. */
.catalog-question {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 27px;
    line-height: 1.25;
    color: var(--ink);
    opacity: 1;
    margin: 0 0 16px;
}

.catalog-teaser {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-soft);
    margin: 0 0 22px;
    flex-grow: 1;
}

/* Le « Découvrir » devient un vrai bouton dans la carte. */
.catalog-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 48px;
    padding: 12px 24px;
    background: var(--ink);
    color: var(--cream);
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.catalog-card:hover .catalog-cta,
.catalog-card:focus-visible .catalog-cta {
    background: var(--family);
    border-color: var(--family);
    transform: translateX(2px);
}

/* --- Teintes par famille de rapport (sobres, chaleureuses). --- */
.catalog-card--soleil {
    --family: #b8863b;
    --family-tint: #fbf1dc;
    --family-glow: rgba(184, 134, 59, 0.18);
}
.catalog-card--jupiter {
    --family: #6d8770;
    --family-tint: #eaf0e7;
    --family-glow: rgba(109, 135, 112, 0.20);
}
.catalog-card--venus {
    --family: #b47a75;
    --family-tint: #f5e4df;
    --family-glow: rgba(180, 122, 117, 0.20);
}
.catalog-card--saturne {
    --family: #8a6f3f;
    --family-tint: #f0e6d0;
    --family-glow: rgba(138, 111, 63, 0.20);
}
.catalog-card--noeud {
    --family: #8a7896;
    --family-tint: #ede6f0;
    --family-glow: rgba(138, 120, 150, 0.20);
}
.catalog-card--starter {
    --family: #a68350;
    --family-tint: #f4ede0;
    --family-glow: rgba(166, 131, 80, 0.20);
}

@media (max-width: 640px) {
    .catalog-card { padding: 26px 22px 22px; }
    .catalog-question { font-size: 23px; }
    .catalog-card-glyph { width: 46px; height: 46px; font-size: 25px; }
}

/* --- Cartes bundle : même traitement, cliquables. --- */
.bundle-item {
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
}
.bundle-item:hover {
    border-color: var(--gold-dark);
    box-shadow: 0 8px 24px rgba(109, 79, 28, 0.18);
    transform: translateY(-3px);
}
.bundle-item .bundle-name { color: var(--ink); }
.bundle-price { color: var(--gold-dark); }

/* --- Listes reveal-list : un seul rendu propre pour la puce ✦. --- */
.reveal-list { list-style: none; padding: 0; margin: 28px 0; }
.reveal-list li {
    display: block;                 /* fini le flex qui empilait mal sur mobile */
    position: relative;
    padding: 14px 0 14px 34px;
    border-bottom: 1px solid var(--rule);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
}
.reveal-list li:last-child { border-bottom: none; }
.reveal-list li::before {
    content: "✦";
    position: absolute;
    left: 4px; top: 14px;           /* aligne sur la premiere ligne de texte */
    color: var(--gold-dark);
    font-size: 18px;
    line-height: 1.7;
}
.reveal-list .reveal-icon { display: none; }   /* neutralise l'ancien span ✦ */
.reveal-list strong { color: var(--ink); font-weight: 700; }

/* --- Sales-list : petits ajustements de contraste. --- */
.sales-list li::before { color: var(--gold-dark); }

/* --- Ornament divider un peu moins criard. --- */
.ornament-divider span { color: var(--gold-dark); }

/* --- Product hero : titres proportionnels. --- */
.product-title { font-size: 44px; line-height: 1.2; }
@media (max-width: 640px) { .product-title { font-size: 34px; } }

/* --- Formulaires : champs plus grands, focus visible. --- */
input[type="text"], input[type="email"], input[type="number"], select, textarea {
    font-size: 17px;
    min-height: 48px;
    padding: 12px 14px;
}
textarea { min-height: 160px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--gold-soft);
    outline-offset: 1px;
}
/* Champs grisés (ex. heure inconnue cochée) : visiblement inactifs. */
input:disabled {
    background: var(--cream-warm);
    color: var(--ink-soft);
    opacity: 0.55;
    cursor: not-allowed;
}

/* --- Liens dans les paragraphes : soulignes par defaut. --- */
.site-main p a,
.wrap p a,
.faq p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.site-main p a:hover { color: var(--gold-dark); }
/* Sur le fond sombre du hero, le survol doit rester CLAIR (la règle générique
   ci-dessus rendrait le lien illisible : or foncé sur navy). */
.sales-hero p a:hover,
.sales-hero p a:focus-visible { color: var(--cream); }
.sales-hero p a.btn-hero:hover,
.sales-hero p a.btn-hero:focus-visible { color: var(--ink); }

/* --- Responsive header : la nav (quand elle existe) passe sous la marque, en
   toutes lettres, centrée. Sur une page de conversion elle est absente
   (hide_nav) et l'en-tête n'occupe qu'une ligne. Aucun hamburger. --- */
@media (max-width: 640px) {
    .site-header-inner { flex-direction: column; gap: 8px; }
    .site-nav { justify-content: center; }
}

/* ======================================================================
   Blocs de confiance : bienvenue, teaser a-propos, essai sans risque,
   micro-reassurance sous CTA, touche d'immediatete.
   ====================================================================== */

.welcome-block {
    background: var(--cream-warm);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.welcome-block h2 {
    font-size: 30px;
    margin-bottom: 16px;
}

.about-teaser {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 16px;
    color: var(--ink-soft);
}
.about-teaser a {
    color: var(--gold-dark);
    text-decoration: underline;
    font-weight: 500;
    margin-left: 4px;
    display: inline-block;
    padding: 8px 0;
    min-height: 32px;
}

/* Encadre « Essai sans risque », pose entre le catalogue et les bundles. */
.risk-free-panel {
    margin: 40px 0 8px;
    padding: 2px;
    background: linear-gradient(135deg, var(--gold), var(--gold-soft));
    border-radius: 4px;
}
.risk-free-inner {
    background: var(--cream);
    padding: 28px 32px 24px;
    border-radius: 3px;
    text-align: center;
}
.risk-free-inner h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    color: var(--ink);
    font-style: normal;
    margin: 0 0 14px;
}
.risk-free-inner p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 12px;
    text-align: left;
}
@media (min-width: 720px) {
    .risk-free-inner p { text-align: center; max-width: 620px; margin-left: auto; margin-right: auto; }
}
.risk-free-inner .section-cta { text-align: center; }
.risk-free-inner .reassurance-line { margin-top: 8px; }

/* Micro-reassurance sous chaque CTA d'achat. */
.reassurance-line {
    text-align: center;
    font-size: 14px;
    color: var(--ink-soft);
    margin: 12px 0 0;
    letter-spacing: 0.02em;
}

/* Page /a-propos : corps confortable. */
.about-body p {
    font-size: 18px;
    line-height: 1.8;
    margin: 0 0 20px;
    color: var(--ink);
}
.about-signature {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    text-align: right;
    font-size: 17px;
    color: var(--gold-dark);
}
.about-signature em { font-style: italic; }

/* ======================================================================
   Mini-lecture gratuite : blocs du trio + accord Soleil-Lune.
   ====================================================================== */

.mini-block {
    background: #fffdf8;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    padding: 26px 28px;
    margin: 0 0 22px;
}
.mini-block-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 2px;
}
.mini-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream-warm);
    color: var(--gold-dark);
    font-size: 22px;
    flex-shrink: 0;
}
.mini-block h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 27px;
    margin: 0;
}
.mini-kicker {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--gold-dark);
    font-size: 16px;
    margin: 6px 0 12px;
}
.mini-block p { font-size: 17px; line-height: 1.75; }
.mini-block p:last-child { margin-bottom: 0; }

.mini-accord {
    background: var(--cream-warm);
    border: 1px solid var(--gold-soft);
    border-radius: 6px;
    padding: 30px 30px 26px;
    margin: 34px 0 0;
}
.mini-accord h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    margin: 0 0 14px;
}
.mini-accord p { font-size: 17.5px; line-height: 1.8; }
.mini-accord p:last-child { margin-bottom: 0; }

/* --- La première clé : encart doré clair, offert AVANT le mur email. --- */
.mini-key {
    background: linear-gradient(180deg, #f9efdb 0%, #f4e7cc 100%);
    border: 1px solid var(--gold-soft);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    padding: 26px 28px 24px;
    margin: 30px 0 0;
}
.mini-key .section-eyebrow { margin: 0 0 10px; }
.mini-key-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.7;
    margin: 0;
}

/* --- Le teaser : le debut de la lecture, coupe en pleine phrase, VOILE par un
   fondu progressif vers le bas (pattern "contenu a debloquer"). Le texte semble
   se poursuivre sous la carte email, qui se lit alors comme la cle qui le
   devoile. Anti-fuite intacte : c'est bien le teaser tronque qui est rendu,
   jamais le paragraphe complet. --- */
.mini-teaser {
    margin: 30px 0 0;
}
.mini-teaser .section-eyebrow { margin: 0 0 12px; }
.mini-teaser-body {
    /* On laisse un peu d'air en bas pour que la queue voilee du texte glisse
       sous la carte email (chevauchement ci-dessous). */
    padding-bottom: 24px;
}
#teaser-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.75;
    margin: 0;
}
/* Le fondu porte sur le TEXTE REEL (le <p> dimensionne a son contenu), et non
   sur une hauteur fixe : il reste donc visible quelle que soit la longueur du
   teaser, et les dernieres lignes s'effacent nettement jusqu'a transparent.
   On l'applique au vrai teaser seulement, jamais au message de chargement
   (etat perso-waiting), qui doit rester lisible en entier. */
#teaser-text:not(.perso-waiting) {
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 42%, transparent 96%);
}

/* --- Le mur email : la cle qui devoile la suite. --- */
.email-wall {
    position: relative;
    z-index: 1;
    background: #fffdf8;
    border: 2px solid var(--gold-soft);
    border-radius: 8px;
    padding: 30px 32px 26px;
    margin: 18px 0 0;
    box-shadow: 0 8px 28px rgba(166, 131, 80, 0.12);
}
/* Quand un teaser precede le mur (perso disponible), la carte remonte sous le
   texte voile : le raccord se lit, l'email devient la cle qui devoile la suite.
   Le "~" survit au <script> de polling parfois intercale. Absent si le teaser
   n'existe pas (perso failed) : la carte garde alors son espacement normal. */
.mini-teaser:not([hidden]) ~ .email-wall {
    margin-top: -28px;
}
.email-wall-summary {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-soft);
    text-align: center;
    margin: 20px 0 0;
}
.email-wall label { display: block; margin: 14px 0 6px; }
.email-wall input[type="text"],
.email-wall input[type="email"] {
    width: 100%;
    min-height: 48px;
    font-size: 17px;
}
.email-wall-disclosure {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.65;
    text-align: center;
    margin: 12px 0 0;
}
/* Case OPTIONNELLE d'inscription newsletter mensuelle : discrète, alignée a
   gauche, clairement facultative (distincte du bouton d'acces a la lecture). */
.email-wall-optin {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--ink-soft);
    text-align: left;
}
.email-wall-optin label { display: inline; margin: 0; }

/* --- Bouton dore a fleche (meme langage que le CTA email). --- */
.btn-gold, a.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    padding: 16px 32px;
    background: #C6A15B;
    color: var(--ink);
    border: 1.5px solid #C6A15B;
    border-radius: 8px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}
a.btn-gold { width: auto; margin-top: 0; }
.btn-gold:hover, a.btn-gold:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    color: var(--ink);
}
.btn-gold:focus-visible {
    outline: 3px solid var(--gold-dark);
    outline-offset: 2px;
}
.btn-gold-arrow {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

@media (max-width: 640px) {
    .mini-block { padding: 22px 20px; }
    .mini-accord { padding: 24px 20px; }
    .mini-block h2 { font-size: 23px; }
    .mini-key { padding: 22px 20px; }
    .email-wall { padding: 24px 20px; }
}

/* Bandeau de préversion privée (avis maquette) : impossible à confondre. */
.apercu-prive {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #7a2e2e;
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    letter-spacing: 0.04em;
}

/* ======================================================================
   Avis « Elles nous ont écrit » : réels et approuvés uniquement.
   ====================================================================== */
.avis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
}
@media (max-width: 760px) {
    .avis-grid { grid-template-columns: 1fr; }
}
.avis-card {
    margin: 0;
    background: #fffdf8;
    border: 1px solid var(--rule);
    border-top: 3px solid var(--gold-soft);
    border-radius: 8px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.avis-quote {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink);
    flex-grow: 1;
}
.avis-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding-top: 12px;
}
.avis-stars {
    color: var(--gold);
    font-size: 16px;
    letter-spacing: 2px;
}
.avis-who { font-weight: 700; color: var(--ink); }

/* Variante compacte du checkout : juste au-dessus du bouton de paiement. */
.avis-inline { margin: 26px 0 6px; }
.avis-inline-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-dark);
    font-size: 13px;
    margin: 0 0 10px;
}
.avis-card-inline { margin-bottom: 12px; padding: 16px 18px 14px; }
.avis-card-inline .avis-quote { font-size: 17.5px; }
.avis-card-inline .avis-meta { flex-direction: row; flex-wrap: wrap; gap: 10px; padding-top: 8px; }

/* Bannière douce du formulaire de commande (jamais un mur rouge). */
.form-notice {
    background: var(--cream-warm);
    border: 1.5px solid var(--gold);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 0 0 24px;
}
.form-notice p { margin: 0; font-size: 17px; line-height: 1.6; }

/* Guide doux vers la liste de villes (affiché après une tentative, jamais rouge). */
.city-guide {
    background: var(--cream-warm);
    border: 1.5px solid var(--gold);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 6px 0 4px;
    font-size: 17px;
    color: var(--ink);
}

/* Liste déroulante Google Places : lignes hautes et faciles à toucher (48px+),
   police lisible. Le conteneur .pac-container est injecté par Google. */
.pac-container {
    border-radius: 0 0 10px 10px;
    border: 1.5px solid var(--gold-soft);
    box-shadow: 0 10px 28px rgba(26, 22, 38, 0.18);
    font-family: 'Merriweather', Georgia, serif;
}
.pac-item {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
    border-top: 1px solid var(--rule);
}
.pac-item:hover, .pac-item-selected {
    background: var(--cream-warm);
}
.pac-item .pac-item-query {
    font-size: 17px;
    color: var(--ink);
}

/* Renonciation à la rétractation : langage clair, ligne dédiée. */
.consent-plain {
    display: inline-block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* Question d'intention : quatre grandes options radio, cibles 48px+. */
.intent-options { display: grid; gap: 10px; }
.intent-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    min-height: 52px;
    background: var(--cream);
    border: 1.5px solid var(--rule);
    border-radius: 6px;
    cursor: pointer;
    font-size: 17px;
    transition: border-color 120ms, background 120ms;
}
.intent-option:hover { border-color: var(--gold); }
.intent-option input { width: 20px; height: 20px; accent-color: var(--gold-dark); flex-shrink: 0; }
.intent-option:has(input:checked) {
    border-color: var(--gold-dark);
    background: var(--cream-warm);
}

/* Paragraphe personnalisé : attente douce. */
.mini-perso { border-color: var(--gold); }
.perso-waiting {
    font-style: italic;
    color: var(--ink-soft);
    animation: perso-breathe 2.4s ease-in-out infinite;
}
@keyframes perso-breathe {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .perso-waiting { animation: none; }
}

/* ============================================================
   Structure a trois prix, encart d'offre de la page resultat
   mini-lecture (#ml-offer). Cible 55-75 ans, majoritairement
   mobile : texte grand, contraste net, cibles tactiles larges.
   Trois cartes EQUIVALENTES : aucune emphase visuelle poussant
   l'une plutot que l'autre, le choix appartient a la cliente.
   ============================================================ */
.ml-cards-lead {
    font-size: 17px;
    color: var(--ink-soft);
    margin: 4px auto 26px;
    max-width: 46ch;
}
/* Offre UNIQUE : une seule carte, centrée et généreuse — pas une grille à trois
   colonnes réduite à une (qui se lisait « deux cartes qui n'ont pas chargé »).
   Elle occupe honnêtement la largeur, aucune ambiguïté « il en manque ».
   Décision Alex 17/08 (Option 2 : carte centrée large). */
.ml-solo {
    display: block;
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 16px;
    padding: 38px 40px;
    text-align: center;
    box-shadow: 0 2px 14px rgba(23, 18, 35, 0.05);
}
.ml-solo-title {
    /* Surcharge le h3 global (or, italique) : titre de carte lisible et sobre. */
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--ink);
    font-style: normal;
}
.ml-solo-promise {
    margin: 0 0 20px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.ml-solo-price {
    margin: 0 0 8px;
    font-size: 28px;
    color: var(--gold-dark);
}
.ml-solo-price strong { font-weight: 700; }
.ml-card-price-before {
    text-decoration: line-through;
    color: var(--ink-soft);
    font-size: 20px;
    margin-right: 6px;
}
.ml-solo-note {
    margin: 0 auto 22px;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
}
.ml-solo-cta {
    display: block;
    width: 100%;
    min-height: 50px;    /* cible tactile confortable */
}
/* Frontière effacée : l'offre est la SUITE de la lecture, pas une nouvelle
   section. Même fond chaud, ni bordure ni saut de couleur entre les deux —
   plus de « point final visuel » qui dit « tu peux partir ». */
/* Specificite : .sales-alt pose border-bottom en (0,2,0) ; on egale la
   specificite (.sales-section.ml-reading) et on passe apres dans la feuille
   pour vraiment retirer la bordure de frontiere. */
.sales-section.ml-reading { border-bottom: none; padding-bottom: 22px; }
.ml-offer-continu { background: var(--cream-warm); padding-top: 14px; }
@media (max-width: 720px) {
    .ml-solo { padding: 30px 24px; border-radius: 14px; }
    .ml-solo-title { font-size: 23px; }
}