/* ==========================================================================
   MERVEILLES v2 — Correspondance 1:1 avec la maquette complète validée.
   Ajoute : décor (cœurs semés, traits manuscrits), cartes centrées très
   douces avec cœur, panneau « Qui est Mélanie », piliers, guide, footer riche.
   Chargé APRÈS charte.css → surcharge maîtrisée.
   ========================================================================== */

/* --- Décor : cœurs semés & traits manuscrits ------------------------------ */
.dheart { display: inline-block; line-height: 0; color: var(--anis); }
.dheart svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.dheart--anis { color: var(--anis); }
.dheart--rose { color: var(--rose); }
.dheart--violet { color: var(--violet); }
.dheart--white { color: #fff; }
.deco { position: absolute; pointer-events: none; z-index: 3; }

.squiggle { display: inline-block; color: var(--anis); width: 118px; height: 12px; }
.squiggle svg { width: 100%; height: 100%; }

/* Titre de section : aligné à gauche, trait manuscrit dessous + petit cœur */
.sec-title { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sec-title .dheart { width: 22px; height: 22px; }
.sec-title-wrap { margin-bottom: 40px; }
.sec-title-wrap .squiggle { margin-left: 4px; }

/* --- HERO : cœurs décoratifs ---------------------------------------------- */
.hero__panel { position: relative; }
.hero .deco-h1 { top: 8%; left: 46%; width: 26px; height: 26px; }
.hero .deco-h2 { top: 20%; left: 40%; width: 18px; height: 18px; }
.hero .deco-h3 { top: 40%; left: 51%; width: 20px; height: 20px; }
.hero__content h1 .dheart { width: 26px; height: 26px; vertical-align: middle; margin-left: 6px; }

/* --- LES 3 PORTES : centrées, très douces, cœur en bas -------------------- */
.portes { position: relative; }
.porte {
  text-align: center; align-items: center; border: none;
  background: var(--blanc); padding: 36px 28px 28px;
}
.porte--rose { background: #FCE9F2; }
.porte--violet { background: #F0EAFB; }
.porte--vert { background: #E4F4EE; }
.porte .pastille { margin: 0 auto 8px; width: 68px; height: 68px; }
.porte__title { letter-spacing: 0.1em; }
.porte h3 { font-size: 1.55rem; margin-top: 2px; }
.porte p { margin: 4px auto 0; color: var(--encre-2); max-width: 30ch; }
.porte__heart { margin-top: 16px; width: 20px; height: 20px; }
.porte:hover { transform: translateY(-3px); }

/* --- QUI EST MÉLANIE : panneau blanc arrondi + portrait carré ------------- */
.melanie-panel {
  position: relative; overflow: hidden;
  background: var(--blanc); border-radius: var(--r-lg);
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 56px);
  align-items: center; padding: clamp(20px, 3vw, 40px);
}
.melanie-panel .portrait { border-radius: var(--r-lg); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.melanie-panel h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.melanie-panel .deco-m1 { top: 26%; right: 8%; width: 18px; height: 18px; }
.melanie-panel .deco-m2 { top: 54%; right: 4%; width: 26px; height: 26px; }
.melanie-panel .deco-m3 { bottom: 12%; right: 12%; width: 20px; height: 20px; }

/* --- L'APPROCHE : 4 piliers doux, centrés, cœur en bas -------------------- */
.piliers { position: relative; }
.pilier { text-align: center; align-items: center; border: none; padding: 32px 22px 24px; }
.pilier .pastille { margin: 0 auto 6px; width: 60px; height: 60px; }
.pilier--rose { background: #FCE9F2; }
.pilier--violet { background: #F0EAFB; }
.pilier--anis { background: #F6FADF; }
.pilier--vert { background: #E4F4EE; }
.pilier__title { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; }
.pilier--rose .pilier__title { color: var(--rose); }
.pilier--violet .pilier__title { color: #7d5bbe; }
.pilier--anis .pilier__title { color: #8a9a1e; }
.pilier--vert .pilier__title { color: var(--vert); }
.pilier p { font-size: 0.9rem; color: var(--encre-2); margin-top: 6px; }
.pilier__heart { margin-top: 14px; width: 18px; height: 18px; }

/* --- TÉMOIGNAGES : cartes violet clair, guillemet, cœur ------------------- */
.temoignage { background: #F0EAFB; position: relative; padding: 32px 28px; }
.temoignage .quote-mark { font-size: 2.6rem; color: var(--violet); opacity: .5; margin-bottom: -8px; }
.temoignage blockquote { font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; line-height: 1.6; color: var(--encre); font-style: normal; }
.temoignage .signature { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: var(--encre-2); margin-top: 16px; }
.temoignage .dheart { position: absolute; right: 22px; bottom: 20px; width: 18px; height: 18px; color: var(--rose); }

/* --- GUIDE OFFERT : panneau anis clair + image cosy ---------------------- */
.guide { background: #F3F7DA; align-items: center; }
.guide h2 { color: #6f7d18; }
.guide .eyebrow { color: #8a9a1e; }
.guide .guide-kicker { font-family: var(--font-title); font-size: 1.4rem; color: var(--encre); line-height: 1.15; margin-bottom: 4px; }
.guide__cover img { aspect-ratio: 4 / 3; }
.guide .btn--primary { }

/* --- PIED DE PAGE : colonnes + cercles sociaux + tel ---------------------- */
/* 4 colonnes UNIQUEMENT en bureau : hors media, cette règle (fichier chargé
   après charte.css) écraserait les règles responsive 2col/1col de charte. */
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 1.6fr 1fr 0.8fr 1.1fr; }
}
.site-footer__socials { gap: 10px; margin-top: 18px; }
.site-footer__socials a {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.4); color: var(--encre);
  display: grid; place-items: center; transition: background var(--t-fast) var(--ease);
}
.site-footer__socials a:hover { background: rgba(255,255,255,0.75); }
.site-footer__socials svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer h4 { color: var(--encre); opacity: .85; }
.site-footer__bottom { align-items: center; }

/* --- Espace vertical un poil plus serré entre sous-sections --------------- */
@media (min-width: 1024px) {
  .section { padding-block: 64px; }
  .hero { padding-top: 28px; }
}

/* --- Responsive spécifiques v2 ------------------------------------------- */
@media (max-width: 860px) {
  .melanie-panel { grid-template-columns: 1fr; }
  .melanie-panel .portrait { aspect-ratio: 4 / 3; }
  .piliers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .piliers { grid-template-columns: 1fr; }
}

/* ==========================================================================
   23. PLEINE LARGEUR (edge-to-edge) — header, footer, bandeaux CTA
   Le contenu HTML est bridé ~1140px par Elementor ; on force ces blocs à
   occuper toute la fenêtre (le contenu interne reste centré via .container).
   body { overflow-x:hidden } (charte.css) neutralise le débordement du 100vw.
   ========================================================================== */
.site-header,
.site-footer,
.cdm-band {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.cdm-band { position: relative; }
.cdm-band--guide { background: #F3F7DA; padding-block: clamp(40px, 6vw, 72px); }
.cdm-band--guide .guide { background: transparent; padding: 0; border-radius: 0; }

/* ==========================================================================
   24. ICÔNES 3D (Meshy) — remplacent les pastilles plates dans portes/piliers
   ========================================================================== */
.cdm-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 10px;
  flex: none;              /* évite le piège img max-width:100% en flex */
  object-fit: contain;
  transition: transform var(--t-fast) var(--ease);
}
.cdm-icon--sm { width: 72px; height: 72px; }
.porte:hover .cdm-icon,
.pilier:hover .cdm-icon { transform: translateY(-2px) rotate(-3deg); }

/* ==========================================================================
   25. PAGE OFFRE (gabarit segment) — hero, étapes, infos, prix, CTA plein
   ========================================================================== */
.offer-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); align-items: center; }
.offer-hero .badge { margin-bottom: 16px; }
.offer-hero h1 { max-width: 16ch; }
.offer-hero .lead { margin-top: 16px; }
.offer-hero__media img { border-radius: var(--r-lg); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.step-card { background: #FCE9F2; border-radius: var(--r-lg); padding: 30px 22px 26px; text-align: center; display: flex; flex-direction: column; gap: 8px; transition: transform var(--t-fast) var(--ease); }
.step-card:hover { transform: translateY(-3px); }
.step-num { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--rose); color: #fff; font-family: var(--font-title); font-size: 1.4rem; display: grid; place-items: center; margin: 0 auto 4px; }
.step-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.step-card p { font-size: 0.9rem; color: var(--encre-2); }

.infos-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.info-block { background: var(--blanc); border: none; border-radius: var(--r-lg); padding: 26px 22px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.info-block .ib-pastille { width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center; margin: 0 auto 6px; color: #fff; }
.info-block .k { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--encre-2); }
.info-block .v { font-family: var(--font-title); font-size: 1.35rem; }
.info-block--rose { background: #FCE9F2; } .info-block--violet { background: #F0EAFB; } .info-block--vert { background: #E4F4EE; }

.price-box { background: #FCE9F2; border-radius: var(--r-lg); padding: clamp(24px,3vw,36px); display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.price-box .amount { font-family: var(--font-title); font-size: clamp(2rem,4vw,2.8rem); color: var(--rose); }
.price-box .note { color: var(--encre-2); font-size: 1rem; }

.faq { max-width: 780px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--trait); }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 1.06rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .chev { transition: transform var(--t-open) var(--ease); color: var(--vert); flex: none; }
.faq__item[open] .faq__q .chev { transform: rotate(180deg); }
.faq__a { color: var(--encre-2); padding-bottom: 20px; }

.cdm-band--cta { padding-block: clamp(48px, 7vw, 84px); text-align: center; }
.cdm-band--cta-rose { background: #FCE9F2; }
.cdm-band--cta h2 { margin-bottom: 20px; }
.cdm-band--cta .lead { max-width: 44ch; margin: 0 auto 24px; color: var(--encre-2); }

@media (max-width: 860px) {
  .offer-hero__grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .infos-line { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   26. VARIANTES DE SEGMENT (gabarit offre : rose / violet / vert)
   ========================================================================== */
.step-card--rose{background:#FCE9F2} .step-num--rose{background:var(--rose);color:#fff}
.step-card--violet{background:#F0EAFB} .step-num--violet{background:var(--violet);color:var(--encre)}
.step-card--vert{background:#E4F4EE} .step-num--vert{background:var(--vert);color:#fff}
.price-box--rose{background:#FCE9F2} .price-box--rose .amount{color:var(--rose)}
.price-box--violet{background:#F0EAFB} .price-box--violet .amount{color:#7d5bbe}
.price-box--vert{background:#E4F4EE} .price-box--vert .amount{color:var(--vert)}
.cdm-band--cta-violet{background:#F0EAFB} .cdm-band--cta-vert{background:#E4F4EE}

/* ==========================================================================
   27. CARTES OFFRE (parcours) + VALEURS + CONTACT + JOURNAL
   ========================================================================== */
.offer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.offer-cards--2{grid-template-columns:repeat(2,1fr)}
.offer-card{background:var(--blanc);border-radius:var(--r-lg);padding:32px 26px 26px;text-align:center;display:flex;flex-direction:column;gap:8px;transition:transform var(--t-fast) var(--ease)}
.offer-card:hover{transform:translateY(-3px)}
.offer-card--rose{background:#FCE9F2}.offer-card--violet{background:#F0EAFB}.offer-card--vert{background:#E4F4EE}.offer-card--anis{background:#F6FADF}
.offer-card h3{font-size:1.4rem;margin-top:2px}
.offer-card p{color:var(--encre-2);font-size:0.95rem;margin:2px auto 0;max-width:32ch}
.offer-card .btn--ghost{margin-top:auto;align-self:center;font-weight:600}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.value-card{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);padding:28px 24px;text-align:center;display:flex;flex-direction:column;gap:8px}
.value-card .v-emoji{font-size:2rem;line-height:1}
.value-card h3{font-family:var(--font-title);font-size:1.5rem}
.value-card p{color:var(--encre-2);font-size:0.95rem}

.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:var(--s-6);align-items:start}
.contact-card{background:var(--violet-050);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.contact-card .ci-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.contact-card .ci-ico{width:44px;height:44px;border-radius:var(--r-pill);background:var(--violet);color:#fff;display:grid;place-items:center;flex:none}
.contact-form{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.cercle-hero{background:linear-gradient(180deg,#F0EAFB,transparent)}
.cercle-highlight{background:var(--violet-050);border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);text-align:center}

.page-hero-simple{text-align:center;max-width:760px;margin-inline:auto}
.page-hero-simple .badge{margin-bottom:16px}
.legal-body{max-width:780px;margin-inline:auto}
.legal-body h2{font-size:1.7rem;margin-top:36px;margin-bottom:10px}
.legal-body p{margin-bottom:14px;color:var(--encre-2)}

@media (max-width:860px){
  .offer-cards,.offer-cards--2{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* ==========================================================================
   28. CONTENU ENRICHI — intro, bénéfices, deux colonnes, listes
   ========================================================================== */
.intro-narrow{max-width:760px;margin-inline:auto;text-align:center}
.intro-lead{font-size:1.16rem;line-height:1.7;color:var(--encre)}
.bnf-heart{display:block;margin-bottom:8px}
.offer-card .bnf-heart{margin-inline:auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center}
.check-list{display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:1.05rem}
.check-list .dheart{flex:none}
.pq-note .intro-lead{text-align:left}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}

/* ==========================================================================
   30. HOME v3 — ARBORESCENCE : nav discrète, portes Famille/Structure/Cercle,
   cartes offres/journal, bandeau lead magnet (toutes pages)
   ========================================================================== */
.nav-discret{opacity:.72;font-weight:600}
.nav-discret::after{background:var(--rose)!important}

.porte--cercle{background:#FBEFF3}
.porte--cercle .porte__title{color:var(--rose)}
.porte--discret{position:relative}
.porte--discret::before{content:"Sur invitation";position:absolute;top:14px;right:14px;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rose);background:#fff;padding:4px 10px;border-radius:var(--r-pill)}

.offers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.offers-grid--3{grid-template-columns:repeat(3,1fr)}
.offer-mini{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t-fast) var(--ease);color:inherit}
.offer-mini:hover{transform:translateY(-3px)}
.offer-mini__media{display:block;aspect-ratio:3/2;overflow:hidden}
.offer-mini__media img{width:100%;height:100%;object-fit:cover}
.offer-mini__media--tint{display:grid;place-items:center}
.offer-mini__media--rose{background:#FCE9F2}
.offer-mini__media--violet{background:#F0EAFB}
.offer-mini__media--vert{background:#E4F4EE}
.offer-mini__media--anis{background:#F6FADF}
.offer-mini__body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.offer-mini .badge{align-self:flex-start}
.offer-mini__title{font-family:var(--font-title);font-size:1.35rem;line-height:1.1;color:var(--encre)}
.offer-mini__txt{color:var(--encre-2);font-size:.95rem}

.lead-strip{background:var(--anis);width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.lead-strip .container{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;flex-wrap:wrap}
.lead-strip__txt{display:flex;align-items:center;gap:14px;color:var(--encre)}
.lead-strip__txt .dheart{flex:none;color:#fff}
.lead-strip__txt .muted{color:var(--encre);opacity:.75}
.lead-strip__form{display:flex;gap:10px;flex:1;max-width:460px;min-width:260px}
.lead-strip__form input{flex:1;min-height:48px;padding:10px 18px;border-radius:var(--r-pill);border:1.5px solid rgba(43,42,51,.22);background:#fff}
@media(max-width:1023px){.offers-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.offers-grid--3{grid-template-columns:1fr}.lead-strip .container{flex-direction:column;align-items:stretch}}
@media(max-width:560px){.offers-grid{grid-template-columns:1fr}}

/* ==========================================================================
   29. NAVIGATION — sous-menus déroulants (arborescence)
   ========================================================================== */
.primary-menu{gap:22px}
.primary-menu > li{position:relative}
.primary-menu > li > a{font-size:.95rem}

/* Chevron : neutralise ENTIÈREMENT le soulignement charte (même ::after),
   sinon position:absolute + fond anis fuient → pastilles sous les entrées. */
.main-nav .has-sub > a{display:inline-flex;align-items:center}
.main-nav .has-sub > a::after{
  content:"";
  position:static;            /* annule position:absolute (charte) */
  left:auto;right:auto;bottom:auto;
  display:inline-block;
  width:7px;height:7px;       /* annule height:3px (charte) */
  background:transparent;     /* annule le fond anis (charte) */
  border-radius:0;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  margin-left:8px;
  transform:rotate(45deg) translate(-1px,-2px);
  transform-origin:center;
  opacity:.45;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.main-nav .has-sub:hover > a::after{opacity:.85;transform:rotate(45deg) translate(-1px,0)}

/* Déroulant : surclasse .main-nav ul (gap 32px + centrage) de charte.css */
.main-nav .sub-menu{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:238px;background:#fff;border:1px solid var(--trait);
  border-radius:var(--r-md);padding:8px;
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  text-align:left;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  z-index:130;box-shadow:0 12px 34px rgba(43,42,51,.10);
}
.main-nav .has-sub:hover > .sub-menu,
.main-nav .has-sub:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.main-nav .sub-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.main-nav .sub-menu li{width:100%}
.main-nav .sub-menu li a{display:block;padding:10px 14px;border-radius:12px;font-weight:600;font-size:.94rem;color:var(--encre);white-space:nowrap;text-align:left}
.main-nav .sub-menu li a::after{display:none!important;content:none!important}
.main-nav .sub-menu li a:hover{background:var(--violet-050);color:var(--encre)}

/* Rupture menu mobile relevée à 1080px (6 entrées + sous-menus) */
@media (max-width:1080px){
  .nav-toggle{display:grid;place-items:center}
  .main-nav{position:fixed;inset:var(--header-h) 0 auto 0;background:var(--creme);border-bottom:1px solid var(--trait);padding:16px 20px 28px;transform:translateY(-125%);transition:transform var(--t-open) var(--ease);z-index:90;max-height:calc(100vh - var(--header-h));overflow:auto}
  .main-nav.is-open{transform:translateY(0)}
  .main-nav ul.primary-menu{flex-direction:column;align-items:stretch;gap:4px}
  .primary-menu > li{width:100%}
  .main-nav .has-sub > a{display:flex;justify-content:space-between;width:100%}
  .main-nav .has-sub > a::after{margin-left:12px;transform:rotate(45deg) translate(0,2px)}
  .main-nav .sub-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:none;background:transparent;padding:2px 0 10px 16px;min-width:0}
  .main-nav .sub-menu li a{padding:8px 10px;white-space:normal}
}
@media (min-width:1081px){ .nav-toggle{display:none} .main-nav{position:static;transform:none} }

/* Témoignages regroupés (page Ils en parlent) */
.temoignages--wrap{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .temoignages--wrap{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .temoignages--wrap{grid-template-columns:1fr} }

/* Cœurs décoratifs flottants : masqués quand le hero est empilé (ils
   retombent sur le texte en dessous de la rupture). */
@media (max-width:1080px){ .deco{display:none} }

/* ==========================================================================
   30. BLOCS OFFRES v3 (Architecture des offres) — déroulé, formules, pills…
   ========================================================================== */
/* Déroulé « timeline » vertical */
.flow{list-style:none;max-width:780px;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:16px}
.flow-step{display:flex;gap:20px;align-items:flex-start;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);padding:22px 24px}
.flow-num{flex:none;width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;font-family:var(--font-title);font-size:1.4rem;color:#fff;background:var(--violet)}
.flow-step--rose .flow-num{background:var(--rose)}
.flow-step--vert .flow-num{background:var(--vert)}
.flow-step--violet .flow-num{background:var(--violet);color:var(--encre)}
.flow-step--anis .flow-num{background:var(--anis);color:var(--encre)}
.flow-step h3{font-family:var(--font-title);font-size:1.3rem;margin-bottom:4px}
.flow-step p{color:var(--encre-2);margin:0}

/* Cartes exemples */
.ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.ex-card{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:6px}
.ex-card h3{font-family:var(--font-title);font-size:1.28rem}
.ex-card p{color:var(--encre-2);font-size:.96rem;margin:0}
.ex-card .btn--ghost{margin-top:8px}
.ex-card--rose{border-top:4px solid var(--rose)}
.ex-card--vert{border-top:4px solid var(--vert)}
.ex-card--violet{border-top:4px solid var(--violet)}
.ex-card--anis{border-top:4px solid var(--anis)}
@media(max-width:900px){.ex-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ex-grid{grid-template-columns:1fr}}

/* Formules (tarifs multiples) */
.formules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.formule-card{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);padding:28px 24px;display:flex;flex-direction:column;gap:4px}
.formule-card--violet{border-top:5px solid var(--violet)}
.formule-card--rose{border-top:5px solid var(--rose)}
.formule-card--vert{border-top:5px solid var(--vert)}
.fm-title{font-family:var(--font-title);font-size:1.5rem;color:var(--encre)}
.fm-meta{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-2)}
.fm-price{font-family:var(--font-title);font-size:2rem;color:var(--vert);margin-top:6px}
.formule-card--violet .fm-price{color:#7d5bbe}
.formule-card--rose .fm-price{color:var(--rose)}
.fm-desc{color:var(--encre-2);font-size:.96rem;margin-top:4px}
@media(max-width:900px){.formules-grid{grid-template-columns:1fr}}

/* Pills / tags */
.pill-group{margin-bottom:22px}
.pill-group:last-child{margin-bottom:0}
.pill-group__label{display:block;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2);margin-bottom:10px}
.pill-wrap{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-block;padding:8px 16px;border-radius:var(--r-pill);font-weight:600;font-size:.92rem;background:#fff;border:1px solid var(--trait);color:var(--encre)}
.pill--rose{background:var(--rose-050)}
.pill--vert{background:var(--vert-050)}
.pill--violet{background:var(--violet-050)}
.pill--anis{background:var(--anis-050)}

/* Ce que ce n'est pas */
.notthis{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--trait);border-left:5px solid var(--rose);border-radius:var(--r-md);padding:24px 28px}
.notthis--vert{border-left-color:var(--vert)}
.notthis--violet{border-left-color:var(--violet)}
.notthis h3{font-family:var(--font-title);font-size:1.4rem;margin-bottom:12px}
.notthis ul{display:flex;flex-direction:column;gap:8px}
.notthis li{position:relative;padding-left:28px;color:var(--encre-2)}
.notthis li::before{content:"\2715";position:absolute;left:0;top:0;color:var(--rose);font-weight:700}
.notthis--vert li::before{color:var(--vert)}
.notthis--violet li::before{color:var(--violet)}

/* Liste inclusions (2 colonnes) */
.incl-list{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.incl-list li{display:flex;align-items:center;gap:12px;font-weight:600}
.incl-list .dheart{flex:none}
@media(max-width:600px){.incl-list{grid-template-columns:1fr}}

/* ============================================================
   §31 — Confirmation d'envoi de formulaire (toast)
   ============================================================ */
.form-toast{position:fixed;left:50%;bottom:24px;z-index:9999;
  transform:translate(-50%,140%);opacity:0;
  max-width:min(520px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px;
  padding:16px 22px;border-radius:var(--r-pill);
  background:var(--vert);color:#fff;
  font-family:var(--font-body);font-weight:600;line-height:1.4;
  box-shadow:0 12px 32px rgba(43,42,51,.18);
  cursor:pointer;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.form-toast::before{content:"\2713";font-weight:700;font-size:1.1em;flex:none}
.form-toast.is-in{transform:translate(-50%,0);opacity:1}
.form-toast--err{background:var(--rose)}
.form-toast--err::before{content:"\0021"}
@media(prefers-reduced-motion:reduce){
  .form-toast{transition:opacity .3s linear;transform:translate(-50%,0)}
  .form-toast.is-in{transform:translate(-50%,0)}
}