/* ============================================================
   PAGE OFFRE — "Découvrir ESOP 2026"
   Frame Figma : ESOP 2025 (353:1881).
   ============================================================ */

body.offre {
    background: var(--color-primary-light-grey);
}

/* Reset des margins sur les <p> issus de TinyMCE qui se retrouvent
   dans des wrappers stylés. Tout texte BDD est wrappé dans <p>. */
.offreIntro__titleMain p,
.offreIntro__titleSub p,
.offreIntro__tealTitle p,
.offreIntro__tealBody p,
.offreSection__title p,
.offreSection__intro p,
.offreSection__intro em,
.offreAccordion__title p,
.offreNoteCols__rightTitle p,
.offreNoteCols__hint p,
.offreDateRow__when p,
.offreDateRow__title p,
.offreCases__caseLabel p,
.offreCases__caseCondition p,
.offreCases__caseOutcome p,
.offrePayMethod__title p,
.offrePayMethod__body p,
.offreCalcul__valBadge p,
.offreCalcul__highlightBlue p,
.offreCalcul__purpleTitle p,
.offreCalcul__formula p {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* Les <p> dans des conteneurs body doivent garder un espacement entre eux. */
.offreIntro__tealBody p + p,
.offreSection__intro + p,
.offrePayMethod__body p + p {
    margin-top: var(--space-2);
}

/* ============================================================
   Section intro : "ESOP 2026 / en bref" + bloc teal
   ============================================================ */
.offreIntro {
    padding: 0 var(--content-gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-10);     /* espace avec le 1er accordéon */
}

.offreIntro__title {
    background: var(--color-primary-white);
    padding: var(--space-10);
    margin-bottom: -30px;
    z-index: 1;
    position: relative;
}

.offreIntro__titleMain,
.offreIntro__titleSub {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.offreIntro__titleMain {
    color: var(--color-primary-dark-blue);
}

/* "en bref" (BDD = <em> sur la 2e ligne) → teal italique regular, comme
   Figma (node 353:1888 : text-[#00828e], Ubuntu Italic). Vaut pour tous
   les pays (la 2e ligne est toujours dans un <em>). */
.offreIntro__titleMain em {
    color: var(--color-secondary-teal);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

/* Sub : Italic Regular (Figma utilise Ubuntu:Italic, pas Bold Italic) */
.offreIntro__titleSub {
    color: var(--color-secondary-teal);
    font-style: italic;
    font-weight: var(--font-weight-regular);
}

.offreIntro__wrap {
    width: 100%;
    padding: 0 var(--content-gutter);
    z-index: 2;
    position: relative;
}

.offreIntro__teal {
    background: var(--color-secondary-teal);
    color: var(--color-primary-white);
    padding: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.offreIntro__tealTitle {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-white);
}

.offreIntro__tealBody {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-primary-white);
}

.offreIntro__tealBody p {
    margin: 0;
}

/* Pas de saut de ligne entre paragraphes du bloc teal (cf. Figma : mb-0) */
.offreIntro__tealBody p + p {
    margin-top: 0;
}

.offreIntro__tealBody strong {
    font-weight: var(--font-weight-bold);
}

/* ============================================================
   Accordéon (Conditions / Calcul / Déblocage)
   ============================================================ */
.offreAccordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.offreAccordion + .offreAccordion {
    margin-top: var(--space-10);
}

/* ----- Header blanc (titre + bouton +/x) ------------------------------- */
.offreAccordion__head {
    background: var(--color-primary-white);
    padding: var(--space-10);
    margin: 0 var(--content-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    z-index: 2;
    position: relative;
}

.offreAccordion.is-open .offreAccordion__head {
    margin-bottom: -60px;
}

.offreAccordion__title {
    flex: 1 1 0;
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark-blue);
}

.offreAccordion__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-dark-blue);
    background: var(--color-secondary-turquoise);
    color: var(--color-primary-dark-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.offreAccordion__btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.offreAccordion.is-open .offreAccordion__btn {
    background: transparent;
}

.offreAccordion.is-open .offreAccordion__btn svg {
    transform: rotate(45deg);
}

.offreAccordion__body {
    background: var(--color-primary-dark-blue);
    padding-top: 60px;
    padding-bottom: var(--space-5);
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.offreAccordion.is-closed .offreAccordion__body {
    display: none;
}

/* Variant : body transparent (utilisé pour le déblocage qui a son propre wrap) */
.offreAccordion__body--transparent {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
}

/* Variant : body lilac — la zone de padding-top (60px réservée pour
   l'overlap du head) prend la couleur de la 1re section (Calcul commence
   par .offreCalcul__videoWrap qui est lilac).
   padding-bottom: 0 pour ne pas laisser une bande lilac dépasser en bas
   après la dernière section blanche. */
.offreAccordion__body--lilac {
    background: var(--color-secondary-lilac);
    padding-bottom: 0;
}

/* ============================================================
   Sous-sections — variants de couleur de fond
   ============================================================ */
.offreSection {
    padding: var(--space-10) 180px;
    width: 100%;
    color: var(--color-primary-white);
}

.offreSection--navy  { background: var(--color-primary-dark-blue);  color: var(--color-primary-white); }
.offreSection--teal  { background: var(--color-secondary-teal);     color: var(--color-primary-white); }
.offreSection--lilac { background: var(--color-secondary-lilac);    color: var(--color-primary-dark-blue); }
.offreSection--grey  { background: var(--color-primary-light-grey); color: var(--color-primary-dark-blue); }
.offreSection--white { background: var(--color-primary-white);      color: var(--color-primary-dark-blue); }

.offreSection__title {
    margin: 0 0 var(--space-5) 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

/* ──────────────────────────────────────────────────────────────────
   Neutralisation des couleurs inline 2025
   ──────────────────────────────────────────────────────────────────
   IMPORTANT : la CSP du site retire tous les `style="…"` du HTML et les
   réécrit en attributs `data-csp-s="N"`, avec un <style nonce> généré qui
   réapplique chaque style en !important (ex `[data-csp-s="5"]{color:
   rgb(0,191,191)!important}` = cyan 2025, `="6"` = bleu). On cible donc
   `[data-csp-s]` (et NON `[style*="color"]`, qui ne matche plus rien) pour
   neutraliser les couleurs héritées vers `inherit`, puis les règles par
   section ci-dessous appliquent la couleur Figma (specificité > base). */
.offreSection [data-csp-s] {
    color: inherit !important;
}
.offreSection [style*="background"] {
    background: transparent !important;
}

.offreSection strong { font-weight: var(--font-weight-bold); }
.offreSection em     { font-style: italic; }

/* ──────────────────────────────────────────────────────────────────
   Couleurs Figma par section (cf. Figma node 2061:6648)
   ──────────────────────────────────────────────────────────────────
   - Section LILAC "Comment régler" :
     · <strong> = navy #121A38   (déjà inherit depuis .offreSection--lilac)
     · texte courant = Capgemini blue #0058AB
   - Section NAVY (avec titleAlt) "Que se passe-t-il" :
     · titre = yellow #FEB100   (.offreSection__titleAlt)
     · highlights (CAS 1/2, conclusions colorées) = yellow #FEB100
     · texte courant = blanc (inherit). */
.offreSection--lilac p,
.offreSection--lilac div {
    color: var(--color-primary-blue);
}
.offreSection--lilac strong {
    color: var(--color-primary-dark-blue);   /* titres : navy gras */
}

/* Titre "Comment régler / sont investissement ?" (.offreSection__intro en
   section lilac) : ligne principale navy, sous-ligne <em> en TEAL — même
   traitement que les autres titres (ex "ESOP 2025 / en bref"). Sans ça la
   règle `.offreSection--lilac div` colorait tout en bleu Capgemini. */
.offreSection--lilac .offreSection__intro,
.offreSection--lilac .offreSection__intro p {
    color: var(--color-primary-dark-blue);
}
.offreSection--lilac .offreSection__intro em {
    color: var(--color-secondary-teal);
}

/* "Comment régler" : les segments de corps ex-cyan (data-csp-s) → bleu
   Capgemini uniforme (Figma). La base les neutralise déjà vers inherit
   (= bleu de .offrePayMethod__body) ; on l'explicite pour robustesse. */
.offrePayMethod__body [data-csp-s] {
    color: var(--color-primary-blue) !important;
}

/* Dans "Que se passe-t-il" : SEULS les segments anciennement cyan
   (CAS 1/2 et leurs conclusions, ex-`<span style="color: rgb(0,191,191)">`)
   passent en JAUNE Figma. Les <strong> NON colorés (conditions
   "Votre souscription ≤ …", "Toutes les souscriptions …") restent
   BLANCS (inherit de la section). On override donc la neutralisation
   générique uniquement sur les éléments qui portaient une couleur. */
.offreSection--navy:has(.offreSection__titleAlt) [data-csp-s] {
    color: var(--color-secondary-yellow) !important;
    /* CAS 1/2 + leurs conclusions ("Vous êtes certain…", "Vous obtenez…")
       en gras (Figma). Les libellés CAS ont déjà un <strong> ; on force le
       gras pour les conclusions qui n'en avaient pas. */
    font-weight: var(--font-weight-bold);
}

.offreSection__titleAlt {
    color: var(--color-secondary-yellow);
}

.offreSection__intro {
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-5);
}

.offreSection__intro em {
    font-family: var(--font-family-base);
    font-weight: 300;
    font-style: italic;
}

/* ============================================================
   Bullets fléchés
   ============================================================ */
.offreBullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.offreBullets__item {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* Couleur de la flèche selon la section parente. Convention Figma :
   - teal/cyan par défaut sur navy (cf. "Pour participer à ESOP")
   - jaune uniquement quand la section a un titre jaune (.offreSection__titleAlt)
   - blanc sur teal, navy sur lilac/grey/white */
.offreBullets__arrow {
    flex-shrink: 0;
    width: 30px;
    height: 14px;
    color: var(--color-secondary-teal);
}

.offreSection--navy .offreBullets__arrow {
    color: var(--color-secondary-teal);
}

/* Sections navy à titre jaune (Au début de l'opération, Que se passe-t-il)
   → flèches jaunes pour rester cohérent avec l'accent de la section */
.offreSection--navy:has(.offreSection__titleAlt) .offreBullets__arrow {
    color: var(--color-secondary-yellow);
}

.offreSection--teal  .offreBullets__arrow { color: var(--color-primary-white); }
.offreSection--lilac .offreBullets__arrow,
.offreSection--grey  .offreBullets__arrow,
.offreSection--white .offreBullets__arrow {
    color: var(--color-primary-dark-blue);
}

.offreBullets__text {
    flex: 1 1 0;
    min-width: 0;
}

.offreBullets__text strong {
    font-weight: var(--font-weight-bold);
}

.offreBullets__text p {
    margin: 0;
}

/* ============================================================
   Flèches sur les <ul><li> du contenu BDD
   ------------------------------------------------------------
   Le contenu issu de 2025 contient des `<ul><li>...</li></ul>`
   à plat (sans la classe .offreBullets__item). On ajoute un
   marker visuel "→" à chaque <li> via mask-image. La couleur
   suit la section parente (teal / yellow / blanc / navy).
   ============================================================ */
.offreSection ul {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Chaque <li> : flèche en ABSOLU à gauche, contenu en flux normal.
   (Un `display:flex` ferait de chaque enfant inline un flex-item séparé
   et casserait l'empilement titre/corps — ex "Comment régler" où le
   <strong>titre</strong><br><span>corps</span> doit s'empiler. En flux
   normal, les <br> du BDD empilent correctement, comme dans Figma.) */
.offreSection ul li {
    position: relative;
    padding-left: 50px;                 /* 30px flèche + 20px gap (Figma) */
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.offreSection ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;                           /* flèche centrée verticalement (Figma) */
    transform: translateY(-50%);
    width: 30px;
    height: 14px;
    background-color: var(--bullet-arrow-color, var(--color-secondary-teal));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 14.7279'%3E%3Cpath d='M30.7071 8.07107C31.0976 7.68054 31.0976 7.04738 30.7071 6.65685L24.3431 0.292893C23.9526 -0.097631 23.3195 -0.097631 22.9289 0.292893C22.5384 0.683418 22.5384 1.31658 22.9289 1.70711L28.5858 7.36396L22.9289 13.0208C22.5384 13.4113 22.5384 14.0445 22.9289 14.435C23.3195 14.8256 23.9526 14.8256 24.3431 14.435L30.7071 8.07107ZM0 7.36396V8.36396H30V7.36396V6.36396H0V7.36396Z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 14.7279'%3E%3Cpath d='M30.7071 8.07107C31.0976 7.68054 31.0976 7.04738 30.7071 6.65685L24.3431 0.292893C23.9526 -0.097631 23.3195 -0.097631 22.9289 0.292893C22.5384 0.683418 22.5384 1.31658 22.9289 1.70711L28.5858 7.36396L22.9289 13.0208C22.5384 13.4113 22.5384 14.0445 22.9289 14.435C23.3195 14.8256 23.9526 14.8256 24.3431 14.435L30.7071 8.07107ZM0 7.36396V8.36396H30V7.36396V6.36396H0V7.36396Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Couleur de la flèche selon la section (custom property utilisable
   en CSS pour faciliter d'éventuels overrides). */
.offreSection--navy                                   { --bullet-arrow-color: var(--color-secondary-teal); }
.offreSection--navy:has(.offreSection__titleAlt)      { --bullet-arrow-color: var(--color-secondary-yellow); }
.offreSection--teal                                   { --bullet-arrow-color: var(--color-primary-white); }
.offreSection--lilac,
.offreSection--grey,
.offreSection--white                                  { --bullet-arrow-color: var(--color-primary-dark-blue); }

/* En RTL : flèche à droite, pointant à gauche. */
html[dir="rtl"] .offreSection ul li {
    padding-left: 0;
    padding-right: 50px;
}
html[dir="rtl"] .offreSection ul li::before {
    left: auto;
    right: 0;
    transform: translateY(-50%) scaleX(-1);
}

/* Reset les <p> intérieurs (TinyMCE wrap) et neutralise les inline-styles
   couleur héritage 2025 qui forçaient du noir / blanc inadapté. */
.offreSection ul li p,
.offreSection ul li div {
    margin: 0;
}

/* <sup> dans le contenu BDD : réduire la marge gauche injectée par défaut. */
.offreSection sup {
    margin-inline-start: 0;
    padding-inline-start: 0;
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}

/* ──────────────────────────────────────────────────────────────────
   Icônes scénarii / résultats dans calcul (Pendant 5 ans + À échéance)
   ──────────────────────────────────────────────────────────────────
   Figma (node 2061:7046) utilise 4 pictos BI-TON, non reproductibles
   par un mask monochrome :
     · scenario  1 → picto-action-up   (courbe ↑, #1DB8F2 + baseline #0058AB)
     · scenario  2 → picto-action-down (courbe ↓)
     · résultat  1 → picto-result-neutral  (ligne plate purple #71609E)
     · résultat  2 → picto-result-positive (zigzag ↑ purple)
   On les rend donc via `background-image` (data-URI = les 2 tons sont
   préservés), en neutralisant le marqueur flèche générique (mask).
   NB : la liste "résultats" vit dans .offreCalcul__resultDesc (pas
   dans .offreCalcul__scenarios) — d'où le sélecteur dédié. */
/* Picto 40×40 = courbe/ligne bi-ton + un POINT navy 6px (Figma node
   2061:7046 "picto-share" : <courbe> + <Ellipse 6px #121A38>). Le point
   manquait : on l'intègre directement dans le SVG (translate de la ligne
   pour la centrer dans la box 40×40, puis cercle aux coords Figma).
   Positionné en absolu à gauche, centré verticalement (Figma items-center). */
.offreCalcul__scenarios ul li,
.offreCalcul__resultDesc ul li {
    padding-left: 60px;                 /* 40px picto + 20px gap */
}

.offreCalcul__scenarios ul li::before,
.offreCalcul__resultDesc ul li::before {
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: transparent;       /* SVG bi-ton réel (pas de mask mono) */
    -webkit-mask-image: none;
            mask-image: none;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.offreCalcul__scenarios ul li:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cg transform='translate(1 7.53)'%3E%3Cpath d='M4 11.9163C4 24.2856 12 31.2236 18 11.9322C24 -7.35918 34 2.96253 34 11.9163' stroke='%231DB8F2' stroke-width='2'/%3E%3Cpath d='M0 10.9163H38' stroke='%230058AB' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='27' cy='9' r='3' fill='%23121A38'/%3E%3C/svg%3E");
}

.offreCalcul__scenarios ul li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cg transform='translate(1 7.53)'%3E%3Cpath d='M4 13.023C4 0.653711 12 -6.28424 18 13.0071C24 32.2985 34 21.9768 34 13.023' stroke='%231DB8F2' stroke-width='2'/%3E%3Cpath d='M0 12.9184H38' stroke='%230058AB' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='28' cy='20' r='3' fill='%23121A38'/%3E%3C/svg%3E");
}

.offreCalcul__resultDesc ul li:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cg transform='translate(1 19)'%3E%3Cpath d='M0 1H38' stroke='%2371609E' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='29' cy='20' r='3' fill='%23121A38'/%3E%3C/svg%3E");
}

.offreCalcul__resultDesc ul li:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Cg transform='translate(0.61 9.3)'%3E%3Cpath d='M0 14.3968H38' stroke='%2371609E' stroke-width='2'/%3E%3Cpath d='M0.816406 20.7569L10.8164 8.76605L22.3164 19.766L38 0.633966' stroke='%2371609E' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='35' cy='15' r='3' fill='%23121A38'/%3E%3C/svg%3E");
}

/* Couleurs des segments BDD (ex-spans cyan neutralisés) : bleu Capgemini
   pour les scénarii ("ce cours qui est enregistré"…), purple pour les
   résultats ("Vous recevrez votre apport personnel…") — cf. Figma. */
.offreCalcul__scenarios ul li [data-csp-s] {
    color: var(--color-primary-blue) !important;
}
.offreCalcul__resultDesc ul li [data-csp-s] {
    color: var(--color-secondary-purple) !important;
}

/* RTL : picto à droite, pas de flip (courbes symboliques). */
html[dir="rtl"] .offreCalcul__scenarios ul li,
html[dir="rtl"] .offreCalcul__resultDesc ul li {
    padding-left: 0;
    padding-right: 60px;
}
html[dir="rtl"] .offreCalcul__scenarios ul li::before,
html[dir="rtl"] .offreCalcul__resultDesc ul li::before {
    left: auto;
    right: 0;
    transform: translateY(-50%);
}

/* ============================================================
   Bouton mini (visible sur tous les fonds — hover teal)
   ============================================================ */
.btnMini {
    display: inline-flex;
    align-self: flex-start;             /* évite le stretch dans un flex-col */
    align-items: center;
    padding: var(--space-3);
    background: var(--color-primary-white);
    color: var(--color-primary-dark-blue);
    border: 1px solid var(--color-primary-dark-blue);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    width: auto;
}

/* Espacement contextuel — 20px (gap Figma) pour équilibrer avant/après */
.offreLegal + .btnMini,
.offreDateRow__body .btnMini {
    margin-top: var(--space-5);          /* 20px */
}

/* Dans la colonne "Combien peut-on investir ?" — flex-col gap 10
   on garde un espacement plus serré pour ne pas trop écarter */
.offreNoteCols__left .btnMini {
    margin-top: var(--space-3);          /* 10px */
}

/* Pays non-FR : le titre de section suit directement le btnMini (frères),
   sans colonne intermédiaire comme en FR → on rétablit l'espace de 20px. */
.btnMini + .offreSection__title {
    margin-top: var(--space-5);          /* 20px */
}

/* Le label CTA vient de la BDD wrappé dans <p> → on neutralise sa marge. */
.btnMini p {
    margin: 0;
}

/* CTA inline placé directement dans une section (après les conditions /
   après le hint simulateur en colonne pleine) — espace Figma (gap 20). */
.offreSection > .btnMini {
    margin-top: var(--space-5);
}

.btnMini:hover,
.btnMini:focus-visible {
    background: var(--color-primary-dark-blue);
    color: var(--color-primary-white);
    border-color: var(--color-primary-dark-blue);
    outline: none;
}

/* Sur fond navy, navy bg = invisible — on bascule sur teal pour contraster */
.offreSection--navy .btnMini:hover,
.offreSection--navy .btnMini:focus-visible {
    background: var(--color-secondary-teal);
    color: var(--color-primary-white);
    border-color: var(--color-secondary-teal);
}

/* Sur fond teal, le navy reste visible (par défaut) — mais on assure
   un fond bien différencié */
.offreSection--teal .btnMini:hover,
.offreSection--teal .btnMini:focus-visible {
    background: var(--color-primary-dark-blue);
    color: var(--color-primary-white);
    border-color: var(--color-primary-dark-blue);
}

/* ============================================================
   Section "À noter" (2 colonnes)
   ============================================================ */
.offreNoteCols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: stretch;
    margin-top: var(--space-10);
}

.offreNoteCols__left,
.offreNoteCols__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.offreNoteCols__right {
    background: var(--color-secondary-lilac);
    color: var(--color-primary-dark-blue);
    padding: var(--space-5);
    justify-content: center;
}

.offreNoteCols__rightTitle {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark-blue);
}

.offreNoteCols__rightBody {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
}

.offreNoteCols__rightBody p {
    margin: 0;
}

.offreNoteCols__rightBody p + p {
    margin-top: var(--space-2);
}

.offreNoteCols__rightBody strong { font-weight: var(--font-weight-bold); }
.offreNoteCols__rightBody em { font-style: italic; }

.offreNoteCols__hint {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-lilac);
    line-height: var(--line-height-tight);
}

/* ============================================================
   Dates (Quand et comment participer ?)
   ============================================================ */
.offreDates {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.offreDateRow {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.offreDateRow__head {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    text-align: left;
}

.offreDateRow__picto {
    width: 40px;
    height: 40px;
    background: var(--color-primary-dark-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Permet aux ::after (drapeau Figma) de se positionner correctement. */
    position: relative;
    /* La pointe "drop" (::after, 10px) déborde à droite ; Figma réserve
       ensuite 10px AVANT le pill (picto-date = 50px puis gap 10). On ajoute
       donc 10px pour que la pointe ne touche pas le texte ("trop collés"). */
    margin-inline-end: var(--space-3);
}

/* Variante "flag" : pointe "drop" navy à droite du badge.
   Figma (picto-date, node 2061:5774) = un carré 40×40 + picto-drop.svg
   (20×10) empilés puis rotatés -90° → la pointe se retrouve à DROITE,
   ~10px de profondeur × 20px de haut, centrée verticalement (et non
   pleine hauteur comme l'ancien clip-path). On rend la silhouette réelle
   du drop via mask, colorée navy pour rester visible sur le fond teal. */
.offreDateRow__picto--flag::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 20px;
    background: var(--color-primary-dark-blue);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cpath d='M0 0L0 20L10 10Z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cpath d='M0 0L0 20L10 10Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* RTL : pointe à gauche, miroir horizontal. */
html[dir="rtl"] .offreDateRow__picto--flag::after {
    left: auto;
    right: 100%;
    transform: translateY(-50%) scaleX(-1);
}

.offreDateRow__picto img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.offreDateRow__when {
    background: var(--color-primary-dark-blue);
    padding: var(--space-1);
    font-family: var(--font-family-base);
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
    white-space: nowrap;
    line-height: var(--line-height-tight);
}

.offreDateRow__title {
    flex: 1 1 0;
    margin: 0;
    text-align: left;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
    line-height: var(--line-height-tight);
}

.offreDateRow__body {
    padding-left: 60px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-primary-white);
}

.offreDateRow__body p {
    margin: 0;
}

.offreDateRow__body p + p {
    margin-top: 0;                /* Figma : mb-0 entre les paragraphes */
}

.offreDateRow__body strong { font-weight: var(--font-weight-bold); }

/* Corps d'une date (date 2 = liste) — Figma utilise des puces DISC
   (list-disc ms-24), PAS les flèches génériques. On neutralise donc la
   flèche ::before et l'indent, et on rétablit le marqueur disc blanc. */
.offreDateRow__body ul {
    list-style: disc;
    padding-left: var(--space-6);       /* ms-24 Figma */
    margin: 0;
    display: block;
}

.offreDateRow__body ul li {
    padding-left: 0;                    /* annule l'indent flèche */
    margin-bottom: var(--space-2);
}

.offreDateRow__body ul li:last-child {
    margin-bottom: 0;
}

.offreDateRow__body ul li::before {
    content: none;                      /* pas de flèche : disc Figma */
}

.offreDateRow__body ul li::marker {
    color: var(--color-primary-white);
}

/* ============================================================
   Méthodes de paiement (section lilac)
   ============================================================ */
.offrePayMethods {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.offrePayMethod {
    display: flex;
    flex-direction: column;
    gap: 0;                       /* serré : la body padding-left:50 suffit */
}

.offrePayMethod__title {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark-blue);
    margin: 0;
    line-height: var(--line-height-tight);
}

.offrePayMethod__titleArrow {
    flex-shrink: 0;
    width: 30px;
    height: 14px;
    color: var(--color-primary-blue);   /* #0058AB — assorti au body bleu */
}

.offrePayMethod__titleText {
    flex: 1 1 0;
    font-weight: var(--font-weight-bold);
}

.offrePayMethod__body {
    padding-left: 50px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-blue);
    line-height: 1.4;
}

.offrePayMethod__body p {
    margin: 0;
}

/* Le <li> "Comment régler" contient titre + corps empilés → la flèche
   reste alignée sur le titre (1re ligne), pas centrée sur tout le bloc. */
.offrePayMethod__body ul li::before {
    top: 4px;
    transform: none;
}

html[dir="rtl"] .offrePayMethod__body ul li::before {
    transform: scaleX(-1);
}

/* ============================================================
   Cas 1 / Cas 2 (section navy — labels jaune, outcomes jaune+gras)
   ============================================================ */
.offreCases {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-right: 200px;
    margin-top: var(--space-5);     /* espace avec le paragraphe d'intro au-dessus */
}

.offreCases__case {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);          /* serré entre les 3 lignes */
}

.offreCases__caseLabel {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-yellow);
    line-height: var(--line-height-tight);
}

.offreCases__caseCondition {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
    line-height: var(--line-height-tight);
}

.offreCases__caseOutcome {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-yellow);
    line-height: 1.3;
}

/* "Toutes les souscriptions..." + "Pour bénéficier d'un gain..." */
.offreCasesConclTitle {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);   /* 20px */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
    line-height: var(--line-height-tight);
}

.offreCasesConclBody {
    margin: var(--space-2) 0 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-white);
    line-height: 1.4;
}

.offreCasesConclBody p { margin: 0; }
.offreCasesConclBody p + p { margin-top: var(--space-2); }

.offreCasesConclWrap {
    margin-top: var(--space-5);
}

/* ============================================================
   Calcul du gain
   ============================================================ */
.offreCalcul__videoWrap {
    background: var(--color-secondary-lilac);
    padding: var(--space-10) 180px;
}

.offreCalcul__videoWrap .videoPlayer {
    max-width: 640px;
    margin: 0 auto;
}

/* Badge inline avec valeur (XX,XX € / XX) */
.offreCalcul__valBadge {
    display: inline-flex;
    align-items: center;
    background: var(--color-primary-white);
    color: var(--color-secondary-teal);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-left: var(--space-2);
}

/* Item bullet avec badge inline à la fin */
.offreBullets__item--withBadge .offreBullets__text {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Spacing après "Deux facteurs sont fixés :" */
.offreCalcul__debutIntro {
    margin: 0 0 var(--space-5);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-white);
    line-height: var(--line-height-tight);
}

/* Espace entre "Deux facteurs sont fixés :" et la liste (prix/multiple). */
.offreCalcul__debutIntro p {
    margin: 0 0 var(--space-3);
}

/* Scénarii avec picto rond 40px */
.offreCalcul__scenarios {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.offreCalcul__scenario {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    width: 100%;
}

.offreCalcul__scenarioPicto {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.offreCalcul__scenarioPicto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.offreCalcul__scenarioText {
    flex: 1 1 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
}

.offreCalcul__scenarioText p { margin: 0; }
.offreCalcul__scenarioText p + p { margin-top: var(--space-1); }
.offreCalcul__scenarioText strong { font-weight: var(--font-weight-bold); }
.offreCalcul__scenarioText em {
    color: var(--color-primary-blue);
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

/* Titre intermédiaire bleu */
.offreCalcul__highlightBlue {
    margin: var(--space-5) 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-blue);
    line-height: var(--line-height-tight);
}

.offreCalcul__highlightBlueLg {
    font-size: var(--font-size-h1);
}

/* Description hausse moyenne (texte 16px navy) */
.offreCalcul__hausseDesc {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
}

.offreCalcul__hausseDesc p { margin: 0; }
.offreCalcul__hausseDesc p + p { margin-top: 0; }     /* leading-0 Figma */
.offreCalcul__hausseDesc strong { font-weight: var(--font-weight-bold); }
.offreCalcul__hausseDesc em { font-style: italic; }

/* Formule encadrée (border bleu) — content-width, alignée à gauche (Figma shrink-0) */
.offreCalcul__formula {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--color-primary-blue);
    background: transparent;
    color: var(--color-primary-blue);
    padding: var(--space-5) var(--space-10);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    margin-top: var(--space-3);
}

.offreCalcul__formula p { margin: 0; }

/* Titre purple section "Ainsi à échéance" */
.offreCalcul__purpleTitle {
    margin: 0 0 var(--space-5);
    font-family: var(--font-family-base);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-purple);
    line-height: var(--line-height-tight);
}

.offreCalcul__resultText em {
    color: var(--color-secondary-purple);
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

.offreCalcul__resultDesc {
    margin-bottom: var(--space-5);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-primary-dark-blue);
    line-height: 1.4;
}

.offreCalcul__resultDesc p { margin: 0; }
.offreCalcul__resultDesc p + p { margin-top: var(--space-2); }
.offreCalcul__resultDesc strong { font-weight: var(--font-weight-bold); }

/* ============================================================
   Cas de déblocage — liste numérotée
   ============================================================ */
.offreDeblocage__wrap {
    background: var(--color-primary-dark-blue);
    padding-top: 60px;
    padding-bottom: 0;
    margin: 0 160px;
}

.offreDeblocage__inner {
    padding: var(--space-10);
}

/* La liste : on cible la classe Figma ET tout <ol>/<ul> imbriqué pour
   que le HTML 2025 migré (sans classe) hérite des mêmes styles. */
.offreDeblocage__list,
.offreDeblocage__inner ol,
.offreDeblocage__inner ul {
    margin: 0;
    padding: 0 0 0 var(--space-5);
    list-style: decimal;
    color: var(--color-primary-white);          /* descriptions blanches (Figma) */
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.offreDeblocage__list li,
.offreDeblocage__inner ol > li,
.offreDeblocage__inner ul > li {
    margin-bottom: var(--space-5);
}

.offreDeblocage__list li:last-child,
.offreDeblocage__inner ol > li:last-child,
.offreDeblocage__inner ul > li:last-child {
    margin-bottom: 0;
}

.offreDeblocage__list li::marker,
.offreDeblocage__inner ol > li::marker,
.offreDeblocage__inner ul > li::marker {
    color: var(--color-secondary-yellow);       /* numéros jaunes (Figma) */
    font-weight: var(--font-weight-bold);
}

/* Le libellé du cas (en jaune, gras, uppercase) : classe Figma OU
   <strong> brut migré depuis 2025. */
.offreDeblocage__caseLabel,
.offreDeblocage__inner strong,
.offreDeblocage__inner b {
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary-yellow);
    text-transform: uppercase;
}

.offreDeblocage__voirMoins {
    background: var(--color-primary-dark-blue);
    text-align: center;
    padding: var(--space-5) 0;
}

/* ============================================================
   CTA buttons à l'intérieur d'un accordéon — continuité visuelle
   avec la section précédente (navy ou white).
   ============================================================ */

/* CTA juste après une section white → fond white continuité (cas Calcul).
   Gap au-dessus de la grille = section padding-bottom (40px).
   Gap en dessous = CTA padding-bottom (20) + voir moins padding-top (20) = 40px.
   → équilibré 40 / 40. */
.offreSection--white + .ctaButtons {
    background: var(--color-primary-white);
    padding-top: 0;
    padding-bottom: var(--space-5);   /* 20px */
}

/* CTA juste après une section navy → fond navy continuité,
   les cartes restent BLANCHES avec texte/border navy (comme défaut).
   Même balancement vertical que pour --white (40/40 autour de la grille). */
.offreSection--navy + .ctaButtons {
    background: var(--color-primary-dark-blue);
    padding-top: 0;
    padding-bottom: var(--space-5);     /* 20px (+ 20px voir moins) = 40px sous */
}

.offreSection--navy + .ctaButtons .ctaButtons__btn {
    background: var(--color-primary-white);
    border-color: var(--color-primary-dark-blue);
    color: var(--color-primary-dark-blue);
}

/* Hover teal — différent du navy bg pour rester visible */
.offreSection--navy + .ctaButtons .ctaButtons__btn:hover,
.offreSection--navy + .ctaButtons .ctaButtons__btn:focus-visible {
    background: var(--color-secondary-teal);
    color: var(--color-primary-white);
    border-color: var(--color-secondary-teal);
}

/* ============================================================
   Lien "Voir moins" en bas d'accordéon
   ============================================================ */
.offreAccordion__voirMoins {
    background: var(--color-primary-dark-blue);
    text-align: center;
    padding: var(--space-5) 0;
}

.offreAccordion__voirMoins--white {
    background: var(--color-primary-white);
}

.offreAccordion__voirMoinsLink {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--color-secondary-turquoise);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    text-decoration: underline;
}

.offreAccordion__voirMoins--white .offreAccordion__voirMoinsLink {
    color: var(--color-secondary-teal);
}

/* ============================================================
   Note légale (astérisque)
   ============================================================ */
.offreLegal {
    margin: var(--space-5) 0;        /* 20px haut & bas — équilibre avec .btnMini suivant */
    padding-left: 20px;
    list-style: disc;
    font-family: var(--font-family-base);
    font-size: var(--font-size-mention);
    line-height: 1.4;
}

.offreSection--navy .offreLegal { color: var(--color-primary-white); }
.offreSection--lilac .offreLegal,
.offreSection--white .offreLegal,
.offreSection--grey .offreLegal { color: var(--color-primary-dark-blue); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .offreSection {
        padding-left: var(--content-gutter);
        padding-right: var(--content-gutter);
    }

    .offreCases {
        padding-right: 0;
    }

    .offreDeblocage__wrap {
        margin: 0 var(--content-gutter);
    }

    .offreCalcul__videoWrap {
        padding-left: var(--content-gutter);
        padding-right: var(--content-gutter);
    }
}

@media (max-width: 1024px) {
    .offreIntro,
    .offreSection,
    .offreAccordion__head,
    .offreCalcul__videoWrap {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    .offreAccordion__head {
        margin-left: 0;
        margin-right: 0;
    }

    .offreIntro__wrap {
        padding: 0;
    }

    .offreIntro__titleMain,
    .offreIntro__titleSub,
    .offreIntro__tealTitle,
    .offreSection__title,
    .offreSection__intro,
    .offreAccordion__title,
    .offreCalcul__purpleTitle {
        font-size: 24px;
        white-space: normal;
    }

    .offreNoteCols {
        grid-template-columns: 1fr;
    }

    .offreDateRow__body,
    .offrePayMethod__body {
        padding-left: 0;
    }

    .offreDeblocage__wrap {
        margin: 0 var(--space-5);
    }
}