/* 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;
    /* 16px, pas 15 : le nom de marque de l'entete, sur TOUTES les pages.
       Un seul pixel, mais c'est le premier mot que lit une visiteuse et il
       etait sous le plancher. Le logo qui l'accompagne garde ses 24px et
       l'alignement est en inline-flex : rien ne se decale. */
    font-size: 16px;
    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; }
/* LA BANDE CLAIRE AU-DESSUS DU PIED DE PAGE (signalee par Alex, 28/08).
   Le padding de fin du <main> est TRANSPARENT : on y voit le fond du body
   (--cream). Or la derniere section d'une page de vente porte, elle, un fond
   PLUS SOUTENU (--cream-warm pour `.sales-alt`, degrade qui finit en
   cream-warm pour `.sales-close`). Resultat : 64 px de creme plus clair entre
   la section et le pied de page, sur toutes les pages a sections.
   Mesure sur huit pages : bande de 64 px sur /, /commander, /formules,
   /mini-lecture et la page de lecture ; ZERO sur les pages legales, qui n'ont
   pas de section coloree.
   ⚠️ LE REPLI EST VOULU DANS CE SENS : la regle generale garde l'air pour
   TOUT LE MONDE, et c'est `:has()` qui le retire la ou une section prend le
   relais (elle porte deja 72 a 96 px de padding interne, dans SA couleur).
   Un navigateur sans `:has()` ignore la ligne et retrouve exactement la page
   d'aujourd'hui : rien ne casse, la bande reste. `:has()` est deja utilise
   par la regle du dessus.
   Air entre le dernier texte et le pied de page, mesure : 176 -> 112 px. */
.site-main:has(> section) { padding-bottom: 0; }
.site-footer {
    background: var(--ink);
    color: var(--gold-soft);
    padding: 32px 0;
    text-align: center;
    /* 16px, pas 14 : cette taille est heritee par les TROIS liens du pied, qui
       menent aux conditions generales, aux mentions legales et a la politique de
       confidentialite. Ce sont les seuls endroits du site qui disent qui encaisse
       et ce qu'on fait de ses donnees, et ils etaient parmi les plus petits
       textes de la page. Sur toutes les pages. */
    font-size: 16px;
}
.site-footer a { color: var(--gold-soft); text-decoration: none; margin: 0 4px; }
/* 16px, pas 12 : c'est la plus petite chose du site, et elle est sur TOUTES
   les pages. Le plancher senior ne fait aucune exception, et il nomme meme les
   pieds de page. On releve AU plancher, on ne redessine pas : l'opacite et la
   marge ne bougent pas. */
.site-footer .tiny { font-size: 16px; 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;
    /* 16px, pas 15 : une legende dit A QUOI SERT le champ qu'elle surmonte, et
       elle est en MAJUSCULES avec 0,15em d'interlettrage, ce qui est plus dur a
       lire qu'un 15px ordinaire, pas moins. Plancher senior non negociable. */
    font-size: 16px;
    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 DESARME, et il doit SE VOIR. Sans cette regle, un bouton `disabled` qui
   porte deja `background` et `color` d'auteur garde EXACTEMENT son apparence de
   bouton actif : le navigateur n'applique son grisement par defaut que sur un
   bouton sans fond declare. On promettrait un clic qu'on n'entend pas encore,
   ce qui est le defaut qu'on ferme (page de paiement, 31/08).
   Creme sur #4a4256 tient 8,7:1, au-dessus du plancher senior de 7:1 que cette
   feuille se donne. L'ombre portee et le survol partent : ce qui ne s'enfonce
   pas ne doit pas avoir l'air de pouvoir s'enfoncer. */
button.cta:disabled,
button.cta:disabled:hover {
    background: var(--ink-soft);
    color: var(--cream);
    box-shadow: none;
    cursor: default;
    transform: none;
}
/* 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);
}

/* ============ LA PLACE DU CHAMP DE PAIEMENT EST RESERVEE D'AVANCE ============
   Mesure du 31/08, banc telephone bride (360x740, processeur x4) : cette zone
   faisait 0 pixel jusqu'a l'arrivee du champ de Stripe, et le bouton « Payer »
   descendait alors de 211 pixels d'un coup. En 3G, l'attente dure une dizaine de
   secondes. 219 px est la hauteur MESUREE de l'iframe montee par Stripe.
   ⚠️ `min-height` et pas `height` : si le champ reel est plus haut (plus de
   moyens de paiement actifs sur le compte), la zone grandit au lieu d'ecraser.
   ⛔ LA RESERVE EST SUR L'ENVELOPPE : `mount()` VIDE `#payment-element` (mesure
   par MutationObserver a 3 226 ms : « retire paiement-squelette, ajoute DIV »),
   donc le squelette doit etre son FRERE pour survivre jusqu'a `ready`. */
.zone-paiement {
    position: relative;
    min-height: 219px;
}
/* ⛔⛔ UNE SEULE ATTENTE, PAS DEUX. Sans ces deux lignes, la visiteuse voyait
   NOTRE squelette une demi-seconde, puis CELUI DE STRIPE pendant longtemps
   (constat d'Alex sur la page reelle en 3G). Le champ reste invisible et inerte
   jusqu'a `ready` ; le squelette de Stripe ne s'affiche donc jamais.
   ⛔ `opacity` ET PAS `display: none` : Stripe doit pouvoir mesurer et rendre son
   champ pendant qu'il est cache. `pointer-events: none` l'accompagne, sinon un
   doigt atteindrait un champ invisible. */
.zone-paiement #payment-element {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-out;
}
.zone-paiement.champ-pret #payment-element {
    opacity: 1;
    pointer-events: auto;
}
/* ⛔ EN SURIMPRESSION, PAS DANS LE FLUX. Dans le flux, le squelette s'ajouterait
   a l'iframe de Stripe entre le montage et `ready` : la zone doublerait, et on
   remplacerait un saut par deux.
   ⛔ `pointer-events: none` EST LE FILET. Si `ready` n'arrivait jamais, la frappe
   et les clics traverseraient quand meme le squelette jusqu'au vrai champ. */
#paiement-squelette {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
    padding: 18px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--cream-warm);
    /* ⛔ LE SEUIL D'APPARITION, ET C'EST LE SEUL DELAI DE TOUT LE DISPOSITIF.
       Il porte sur l'ENCRE, jamais sur la place : le reservoir de hauteur
       s'applique des le premier pixel, c'est lui qui empeche le saut. Le
       squelette, lui, ne se montre que si l'attente dure.
       800 ms, et voici l'arbitrage. Sans bridage, l'iframe de Stripe est posee a
       225-280 ms (mesure, trois tours) ; `ready` suit d'un aller-retour de plus,
       que ce banc NE PEUT PAS mesurer faute de cle Stripe reelle. Un squelette
       qui apparaitrait a 500 ms pour partir a 700 serait du bruit visuel. On
       prend donc la marge du cote ou l'erreur ne coute rien : en 3G l'attente
       dure une douzaine de secondes, retarder l'encre de 450 ms n'y change rien,
       alors qu'en fibre ces 450 ms font la difference entre un clignotement et
       rien du tout. */
    opacity: 0;
    animation: squelette-apparition 0.25s ease-out 0.8s forwards;
}
.squelette-mot {
    margin: 0 0 16px;
    font-size: 16px;                  /* plancher senior declare par ce fichier */
    color: var(--ink-soft);           /* creme-chaud dessous : ~7,9:1 */
}
.squelette-barre {
    display: block;
    height: 18px;
    margin-bottom: 14px;
    border-radius: 4px;
    background: var(--rule);
    animation: squelette-pulsation 1.6s ease-in-out infinite;
}
.squelette-barre-courte { width: 55%; }
@keyframes squelette-apparition { to { opacity: 1; } }
@keyframes squelette-pulsation {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.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;
}
/* Respiration sous le bouton (demande d'Alex, 28/08) : la ligne d'engagement
   ne doit pas etre collee a l'appel a l'action.
   ⚠️ IL FAUT (0,2,1), ET C'EST LE MEME PIEGE QUE `test_centrage_mini_lecture`.
   `.form-disclosure` seule (0,1,0) est battue par `.sales-section p` (0,1,1,
   plus bas dans ce fichier), dont le `margin: 0 0 16px` ramene la marge haute
   a ZERO. `p.form-disclosure` ne suffit pas non plus : specificite EGALE, et
   la regle adverse vient APRES, donc c'est elle qui gagne.
   Marge haute mesuree dans le navigateur avec cette regle-ci : 32 px.
   CENTREE comme le lien « Confidentialite » qui la suit (demande d'Alex) :
   le bloc bouton / engagement / lien se lit alors sur un seul axe. */
.sales-section p.form-disclosure { margin-top: 32px; text-align: center; }
.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; }
/* 16px, pas 15 : c'est le CORPS des trois pages legales, celui qui porte la
   renonciation au droit de retractation et ce qu'on fait de sa date de naissance.
   Le plancher senior nomme explicitement les mentions legales. Les strong, liens
   et puces de ces pages n'ont pas de taille propre : ils heritent d'ici, donc
   relever cette ligne les releve tous. */
.legal p, .legal li { font-size: 16px; 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;
    /* 16px, pas 13 : le nom de marque du premier ecran, en capitales avec 0,4em
       d'interlettrage, ce qui est plus dur a lire qu'un 13px ordinaire et non
       moins. Aucun risque geometrique : c'est un paragraphe centre, sans position
       absolue ni interdiction de passer a la ligne. */
    font-size: 16px;
    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);
    /* 16px, pas 14,5 : la phrase sous le bouton principal du premier ecran. */
    font-size: 16px;
    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; }

/* --- 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; }

/* --- 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-dark);
    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-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). */

/* 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-dark);
    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;
    /* Or FONCE, comme sa jumelle .bundle-price : les deux affichent les MEMES
       montants (69 EUR, 129 EUR), l'une sur formules.html, l'autre sur sales.html.
       En --gold elle donnait 3,26:1 sur creme contre 8,29:1 pour l'autre. Le
       seuil legal du texte large (3:1) etait tenu, c'est pour ca que personne ne
       l'avait vue ; le prix est le chiffre que la lectrice cherche, il se lit
       comme ailleurs sur le site. */
    color: var(--gold-dark);
}
.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; }
/* ⛔ LA LIGNE SOUS LE BOUTON DE PAIEMENT, ET ELLE SEULE. Elle doit etre posee
   ICI, dans le bloc de surcharge, et pas la-haut a cote de `.hint` : la regle
   ci-dessus a la meme specificite et vient apres, elle gagnait. Mon premier
   essai etait donc sans effet, et la mesure l'a dit (taille rendue : 16 px).
   `.hint` sert ailleurs, y compris dans form.html : on ne la touche pas.
   15 px, ET C'EST UNE EXCEPTION AU PLANCHER MAISON DE 16 px, decidee par Alex
   le 01/09 apres mesure. Le bloc disponible sous le bouton ne fait que 206 px a
   320 px de large (24 px de .wrap + 32 px de .order-form de chaque cote).
   « Sécurisé, sans abonnement » demande 210 px a 16 px : il manquait 4 px, et
   la phrase passait sur deux lignes. A 15 px elle demande 197 px.
   ⚠️ `font-style` n'est PAS repris ici : la regle ci-dessus met deja toutes les
   `.hint` en `normal`. L'italique declare ligne 320 n'atteint donc AUCUNE page,
   et il n'y avait rien a retirer. */
.hint-paiement { font-size: 15px; text-align: center; }

/* ⛔ SOUS 380 px, LE CHAMP DE PAIEMENT DEBORDE LE REMBOURRAGE DE LA PAGE, ET
   C'EST POUR QUE PAYPAL AIT UN NOM. Mesure du 01/09, lue dans le DOM de
   l'iframe de Stripe : l'onglet PayPal n'est nomme qu'a partir de ~264 px de
   CONTENEUR. Ce n'est pas la fenetre qui commande, c'est le conteneur :
   verifie a fenetre CONSTANTE, en faisant varier le seul rembourrage.
     360 px de fenetre : 258 px de conteneur -> pas de nom ; 266 -> « PayPal »
     320 px de fenetre : 262 px de conteneur -> pas de nom ; 264 -> « PayPal »
   Aujourd'hui il reste 246 px a 360 px de fenetre et 206 px a 320 : sous le
   seuil dans les deux cas, donc une tuile au seul logo, sans nom. Le « seuil a
   380 px de fenetre » observe d'abord n'etait que ce meme seuil vu a travers
   112 px de rembourrage (380 - 112 = 268).

   ⛔ ON NE TOUCHE PAS `.order-form` NI `.wrap` : elles servent AUSSI sur
   /commander, et une regression sur le formulaire de commande se paierait plus
   cher que ce gain. La regle vise `#paiement-form`, qui n'existe que sur la
   page de paiement.

   Le compte, par cote : 24 px de .wrap, moins 12 px de marge negative, plus
   14 px de rembourrage propre = 26 px au lieu de 56. A 320 px de fenetre il
   reste donc 268 px de conteneur, soit 4 px au-dessus du seuil mesure ; a
   360 px, 308 px. On ne descend pas plus bas : chaque pixel retire est de la
   respiration en moins pour un lectorat de 55-75 ans. */
@media (max-width: 379px) {
    #paiement-form {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 14px;
        padding-right: 14px;
    }
    /* ⛔ LE RECAPITULATIF SUIT, POUR QUE LES DEUX BLOCS GARDENT LES MEMES BORDS.
       Sans cette ligne, le champ de paiement devenait 24 px plus large que le
       bloc au-dessus, et partait 12 px plus a gauche : mesure du 01/09, aux
       trois largeurs. Variante choisie par Alex sur image, a 360 px.
       ⛔ On ne touche PAS `.form-notice` : elle sert aussi sur /commander et
       sur disambiguation.html. La classe `.recap-paiement` n'existe que sur la
       page de paiement. Seule la MARGE change ; le rembourrage interne du bloc
       reste a 22 px, c'est du texte, il n'a aucune largeur a gagner. */
    /* ⛔ DEUX CLASSES, ET C'EST LA MESURE QUI L'A EXIGE. Ecrite
       `.recap-paiement`, la regle avait la MEME specificite que `.form-notice`,
       qui est declaree PLUS LOIN dans ce fichier (avec un `margin` raccourci
       qui remet les marges laterales a zero) : elle gagnait. La marge lue sur
       la page servie valait 0px au lieu de -12px. Deux classes passent devant,
       quel que soit l'ordre. Meme piege que pour `.hint-paiement`. */
    .form-notice.recap-paiement {
        margin-left: -12px;
        margin-right: -12px;
    }
}
/* 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. */
/* 16px, pas 13. Cette regle-ci ecrase celle du haut : c'est donc ELLE qui
   decide. Une seule occurrence dans les gabarits servis, le copyright du pied
   (base.html), verifie avant de toucher a la feuille : la remonter ne deplace
   aucun autre texte. */
.tiny { font-size: 16px; }

/* --- 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: 17px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--family-text, 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-text: #8e672e;
    --family-tint: #fbf1dc;
    --family-glow: rgba(184, 134, 59, 0.18);
}
.catalog-card--jupiter {
    --family: #6d8770;
    --family-text: #5c725e;
    --family-tint: #eaf0e7;
    --family-glow: rgba(109, 135, 112, 0.20);
}
.catalog-card--venus {
    --family: #b47a75;
    --family-text: #965752;
    --family-tint: #f5e4df;
    --family-glow: rgba(180, 122, 117, 0.20);
}
.catalog-card--saturne {
    --family: #8a6f3f;
    --family-text: #7d6439;
    --family-tint: #f0e6d0;
    --family-glow: rgba(138, 111, 63, 0.20);
}
.catalog-card--noeud {
    --family: #8a7896;
    --family-text: #73627f;
    --family-tint: #ede6f0;
    --family-glow: rgba(138, 120, 150, 0.20);
}
.catalog-card--starter {
    --family: #a68350;
    --family-text: #83673f;
    --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;
    /* 2px collait le texte a la vignette (signale par Alex, 06/09). La vignette
       fait 44px de haut : sous 12px, le paragraphe suivant semble lui appartenir. */
    margin-bottom: 12px;
}
.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;
    /* ⛔ MARGE INOPERANTE ICI, ET C'EST MESURE : `.sales-section p` (0,1,1) bat
       cette classe seule (0,1,0) et impose 0 0 16px. La vraie valeur est posee
       en composant, dans le bloc de fin de feuille. */
    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-dark);
    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; }
    /* Le squelette du champ de paiement : la pulsation s'arrete, mais le bloc
       reste VISIBLE. Couper `animation` sur #paiement-squelette le laisserait a
       l'opacite 0 de son etat initial, donc invisible : on la remet a 1 a la
       main. Sans ce rattrapage, quelqu'un qui a demande moins d'animations
       retrouverait exactement le trou qu'on vient de boucher. */
    #paiement-squelette { animation: none; opacity: 1; }
    .squelette-barre { 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.
   ============================================================ */
/* ⛔ SÉLECTEUR COMPOSÉ, ET C'EST TOUT LE CORRECTIF. Mesure du 23/08 : ce bloc était
   COLLÉ À GAUCHE sur un écran d'ordinateur, 194 px de décalage entre son centre et
   celui de son parent, juste au-dessus du bouton à 9,90 €.
   `margin: … auto` était bien déclaré ici, et `margin-left/right` valaient pourtant
   0px au calculé : `.sales-section p` (l. 516) a une spécificité de 0,1,1 et bat
   `.ml-cards-lead` (0,1,0) , une classe + un élément l'emporte sur une classe seule,
   quel que soit l'ordre dans le fichier. Son `margin: 0 0 16px` gagnait, le `auto`
   ne s'appliquait jamais.
   Même remède que `h3.catalog-card-name` plus haut : on compose pour gagner. */
.ml-cards-lead,
.sales-section p.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; }
    /* 26px = `.mini-accord h2`, l'echelle du bloc « Votre mini-lecture ».
       Etait 23px, soit 6px seulement de plus que le corps. */
    .ml-solo-title { font-size: 26px; }
}

/* ============================================================
   LE TEXTE LONG DE LA CARTE (accroche + corps), Alex 06/09.
   ⛔ SÉLECTEURS COMPOSÉS, ET CE N'EST PAS UN ORNEMENT. `.sales-section p`
   (l. 638) a une spécificité de 0,1,1 et bat toute classe seule (0,1,0), quel
   que soit l'ordre dans la feuille. MESURE sur la page servie : `.ml-solo-price`
   déclare 28px et sort à 17px, `.ml-solo-note` déclare 14px et sort à 17px,
   toutes deux battues par cette règle. Une classe nue ici ne s'appliquerait
   jamais : on compose pour gagner, comme `.ml-cards-lead` plus haut.
   ============================================================ */
.ml-solo-hook,
.sales-section p.ml-solo-hook {
    /* 18px : le pas de texte courant du skill senior, pas le plancher de 16. */
    font-size: 18px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    margin: 0 0 18px;
}
/* ⛔ LE CORPS EST ALIGNÉ À GAUCHE, LE RESTE DE LA CARTE RESTE CENTRÉ. Quatre
   paragraphes de prose centrés obligent l'œil à rechercher le début de chaque
   ligne : c'est le défaut que la cible 55-75 paie le plus cher. Le titre,
   l'accroche, le prix, la ligne de déduction et le bouton, eux, sont courts et
   restent centrés. */
.ml-solo-body,
.sales-section p.ml-solo-body {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    text-align: left;
    margin: 0 0 14px;
}


/* ============================================================
   HIERARCHIE ET AIR DE LA CARTE D'OFFRE (Alex, 06/09).
   Quatre defauts signales, tous visuels : les blocs collent, le corps colle au
   bouton, le titre ne depasse le texte que de 6px, la ligne de reassurance
   touche le bord bas de la carte.

   ⛔ L'ECHELLE EST CELLE DU BLOC « Votre mini-lecture », SUR LA MEME PAGE, et
   non une echelle inventee ici (Alex : « la reponse est deja dans la page ») :
   `.section-eyebrow` pour l'intitule, `.mini-accord h2` (26px) pour le titre,
   `.mini-accord p` (17,5 / 1,8) pour le corps. Une carte qui invente ses
   tailles jure avec le reste de la page.

   ⛔ CE BLOC EST EN FIN DE FEUILLE, ET C'EST DELIBERE. Pose plus haut, il etait
   ECRASE : `.sales-section p.ml-solo-body` (0,1,1) et `.ml-solo-title` du bloc
   suivant ont la meme specificite que les regles d'ici, donc c'est L'ORDRE qui
   tranche. Mesure faite : titre a 28px la ou le repli telephone en demandait 26,
   corps reste a 17px, marges d'origine conservees. Le media query du titre est
   donc REPETE ici : celui d'en haut passe avant et ne gagnerait plus.
   ============================================================ */

/* L'intitule : typo, casse et interlettrage viennent de la charte. Seul le filet
   de gauche part, la carte etant CENTREE (un filet a gauche d'un texte centre ne
   pointe vers rien). 16px et non 15 : plancher senior, et c'est une capitale
   espacee, donc reellement lue. */
.ml-solo .section-eyebrow,
.sales-section .ml-solo p.section-eyebrow {
    font-size: 16px;
    letter-spacing: 0.24em;
    color: var(--gold-dark);
    padding-left: 0;
    margin: 0 0 10px;
}
.ml-solo .section-eyebrow::before { content: none; }

/* LE TITRE PORTE ENFIN SON RANG. Il etait a 23px pour un corps a 17 (rapport
   1,35) : rien ne disait a l'oeil ou commencer. 26px sur telephone est
   EXACTEMENT `.mini-accord h2`, soit 1,49. Interligne 1,2 -> 1,25 : a 320px le
   titre tient sur deux lignes, elles ne doivent pas se toucher. */
.ml-solo-title { font-size: 28px; line-height: 1.25; margin: 0 0 14px; }

/* LES TROIS GROUPES DE LA CARTE, ET C'EST TOUT LE REGLAGE DE L'AIR.
   1. qui je suis     : intitule, titre, accroche
   2. ce que j'achete : prix, acompte, bouton
   3. pourquoi        : le corps, puis le bouton de rappel
   L'espace SEPARE les groupes et RASSEMBLE l'interieur d'un groupe. Avant, tout
   valait 12 a 18px : un pave uniforme, sans articulation. */
.ml-solo-hook,
.sales-section p.ml-solo-hook { margin: 0 0 24px; }
.ml-solo-price,
.sales-section p.ml-solo-price { margin: 0 0 10px; }
.ml-solo-note,
.sales-section p.ml-solo-note { margin: 0 auto 22px; }
.ml-solo-body,
.sales-section p.ml-solo-body {
    font-size: 17.5px;
    line-height: 1.8;
    margin: 0 0 16px;
}

/* ⛔ LE CORPS N'EST PLUS COLLE AU BOUTON : 0px mesure, le texte avait l'air
   d'une legende du bouton. Le filet dit ce que l'espace seul ne dirait pas :
   au-dessus on achete, en dessous on explique. `--rule` est le filet de la
   charte. Ceci vient APRES le premier bouton : la marge de securite du bloc
   d'achat, en haut de l'ecran, n'en paie rien.
   ⛔ APRES la regle generale ci-dessus, et en (0,2,1) : le raccourci `margin`
   de `.sales-section p.ml-solo-body` remettrait sinon `margin-top` a zero. */
.sales-section .ml-solo-cta + .ml-solo-body {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
/* Le bouton de rappel ne colle plus au dernier paragraphe. */
.sales-section .ml-solo-body + .ml-solo-cta { margin-top: 26px; }

/* ⛔ LA LIGNE DE REASSURANCE TOUCHAIT LE BORD BAS DE LA CARTE : 0px mesure.
   Ciblee sous #ml-offer seulement, le meme fragment servant ailleurs. */
#ml-offer .reassurance-line { margin-top: 26px; }

/* LE TEXTE COLLAIT A LA VIGNETTE (defaut 3 signale par Alex) : 2px entre la tete
   a glyphe et ce qui suit, pour un glyphe de 44px de haut. `.mini-block-head`
   est un div, sa marge passe ; `.mini-kicker` est un <p> et se faisait battre
   par `.sales-section p`, d'ou le selecteur compose. */
.mini-kicker,
.sales-section p.mini-kicker { margin: 10px 0 14px; }

@media (max-width: 720px) {
    /* 26px = `.mini-accord h2`, l'echelle du bloc « Votre mini-lecture ».
       REPETE ici parce que le media query d'origine passe AVANT ce bloc. */
    .ml-solo-title { font-size: 26px; }
}

/* ============ PARTAGE DE LA MINI-LECTURE ============
   DES ICONES, PAS DES RECTANGLES AVEC UN MOT DEDANS : une rangee de pastilles
   rondes aux couleurs des applications, le libelle en petit dessous. Une lectrice
   de 65 ans reconnait le vert de WhatsApp avant d'avoir lu le mot.

   TROIS CONTRAINTES QUI NE SONT PAS COSMETIQUES, sur une page lue a 63 % sur
   telephone par des femmes de 55 a 75 ans :
   - la CIBLE fait 64 px de large et la pastille 52 px : au-dessous de 44 px, une
     lectrice presbyte vise et rate, puis reessaie, puis abandonne ;
   - le LIBELLE est a 14 px en #4a4256 sur #faf6ee, soit 9,4 pour 1, tres au-dessus
     du plancher de 4,5. Le lot precedent a corrige des liens a 3,26 pour 1 dans
     les e-mails : on ne recommence pas ici ;
   - les boutons se REPARTISSENT sur plusieurs lignes au lieu de retrecir. Six
     icones ecrasees sur 360 px seraient illisibles ; a cette largeur elles
     tiennent sur deux rangees de trois, chacune gardant sa cible entiere.

   Le bloc reste discret : c'est une proposition, pas l'objet de la page. */
.ml-partage {
    margin: 32px auto 8px;
    padding: 20px 14px;
    max-width: 680px;
    background: #faf6ee;
    border: 1px solid #ded3bd;
    border-radius: 12px;
    text-align: center;
}
.ml-partage-intro {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.6;
    color: #4a4256;
}
.ml-partage-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 4px;
}
/* La CIBLE, pas la pastille : c'est tout ce rectangle qui repond au doigt, le
   libelle compris. Un bouton dont seule l'icone est cliquable donne l'impression
   de ne pas repondre quand on vise un peu bas. */
.ml-partage-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    /* 80 px, ET LA VALEUR EST MESUREE, pas choisie. A 64 px, « Messenger » (73 px
       de texte a 14 px) debordait sur ses voisins : « Partager WhatsApp Messenger »
       se lisait en un seul mot colle. La cible doit tenir le PLUS LONG libelle,
       pas le plus court. Toute nouvelle destination au nom plus long redemande
       cette mesure ; on ne la devine pas depuis la feuille. */
    width: 80px;
    padding: 4px 0;
    background: none;
    border: 0;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ml-partage-rond {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
}
.ml-partage-nom {
    font-size: 14px;
    line-height: 1.25;
    color: #4a4256;
}
/* Retour visible au doigt et au clavier : sans lui, rien ne distingue un bouton
   presse d'un bouton qui n'a pas repondu. */
.ml-partage-btn:hover .ml-partage-rond,
.ml-partage-btn:focus-visible .ml-partage-rond { filter: brightness(1.12); }
.ml-partage-btn:focus-visible {
    outline: 2px solid #5C452A;
    outline-offset: 3px;
    border-radius: 8px;
}
.ml-partage-btn:active .ml-partage-rond { transform: scale(0.94); }
.ml-partage-dit {
    margin: 10px 0 0;
    font-size: 16px;
    color: #2f5c32;
}
@media (max-width: 380px) {
    /* On retrecit l'ecart, JAMAIS la cible ni le libelle : c'est la rangee qui
       passe a trois par ligne, pas les boutons qui maigrissent. */
    .ml-partage-boutons { gap: 12px 0; }
}