/* ============================================================
   JOANNA DEMEURE - Conversion sections
   TrustStrip · Process · Testimonials · Pricing · About
   ============================================================ */

.section-lead{ margin-top: 16px; font-size: clamp(15px,1.2vw,17px); color: var(--ink-soft); max-width: 56ch; margin-inline: 0; line-height: 1.6; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ padding: 30px 0 6px; }
.trust-inner{ display: flex; align-items: center; gap: clamp(16px,3vw,40px); flex-wrap: wrap; justify-content: center; padding-bottom: 8px; }
.trust-label{ font-family: var(--hand); font-weight: 600; font-size: clamp(19px,1.9vw,24px); color: var(--coral); white-space: nowrap; transform: rotate(-2deg); }
.trust-brands{ display: flex; align-items: center; gap: clamp(8px,1.4vw,14px); flex-wrap: wrap; justify-content: center; }
.trust-chip{ font-family: var(--serif); font-size: clamp(13px,1.25vw,17px); font-weight: 500; color: var(--ink-soft); letter-spacing: .01em; transition: color .3s; }
.trust-chip:not(:last-child)::after{ content: "·"; margin-left: clamp(8px,1.4vw,14px); color: var(--line); }
.trust-chip:hover{ color: var(--coral); }

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid{
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3vw,40px);
}
.pstep{ position: relative; }
.pstep-media{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-warm); }
.pstep-media image-slot{ width: 100%; height: 100%; display: block; transition: transform .7s var(--ease); }
.pstep:hover .pstep-media image-slot{ transform: scale(1.05); }
.pstep-media .pstep-num{
  position: absolute; left: 14px; bottom: 6px; z-index: 2;
  font-family: var(--sans); font-weight: 800; font-size: clamp(40px,4.6vw,60px); line-height: 1;
  color: #fff; mix-blend-mode: difference; letter-spacing: -.02em;
}
.pstep-body{ padding-top: 20px; }
.pstep-ico{ width: 40px; height: 40px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); margin-bottom: 16px; transition: background .35s, color .35s; }
.pstep:hover .pstep-ico{ background: var(--ink); color: #fff; }
.pstep-ico svg{ width: 19px; height: 19px; }
.pstep h3{ font-family: var(--sans); font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.pstep p{ color: var(--ink-soft); font-size: 15px; margin-top: 10px; line-height: 1.6; max-width: 38ch; }
@media (max-width: 760px){
  .process-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi{ background: var(--bg-warm); }
.testi-stars{ display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; }
.tstar{ color: var(--coral); display: inline-flex; }
.tstar svg{ width: 18px; height: 18px; }
.testi-stars-txt{ font-size: 13.5px; color: var(--ink-soft); margin-left: 10px; }
.testi-grid{ margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.4vw,28px); }
.tcard{
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 30px 28px 26px; display: flex; flex-direction: column;
  box-shadow: 0 30px 60px -50px rgba(0,0,0,.5);
}
.tcard-quote{ position: absolute; top: 22px; right: 24px; color: var(--coral-tint); }
.tcard-quote svg{ width: 42px; height: 42px; }
.tcard-result{
  align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--coral-deep);
  background: var(--coral-tint); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px;
}
.tcard blockquote{ font-family: var(--serif); font-size: clamp(17px,1.5vw,19px); line-height: 1.5; color: var(--ink); letter-spacing: -.005em; flex: 1; }
.tcard figcaption{ display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.tcard-avatar{ width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; background: var(--coral-tint); }
.tcard-avatar image-slot{ width: 100%; height: 100%; }
.tcard-id{ display: flex; flex-direction: column; line-height: 1.3; }
.tcard-id b{ font-size: 15px; font-weight: 700; }
.tcard-id small{ font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 880px){ .testi-grid{ grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ============================================================
   PRICING
   ============================================================ */
.price-grid{
  margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px,2vw,24px); align-items: stretch;
}
.pcard{
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 34px 30px 32px; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.pcard:hover{ transform: translateY(-4px); box-shadow: 0 36px 70px -46px rgba(0,0,0,.45); }
.pcard.pop{
  border-color: var(--coral); box-shadow: 0 40px 80px -42px var(--coral-glow);
  background: linear-gradient(180deg, var(--coral-tint) 0%, #fff 30%);
}
.pcard.pop:hover{ transform: translateY(-8px); }
.pcard-badge{
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--coral); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 16px; border-radius: 999px; box-shadow: 0 10px 22px -10px var(--coral); white-space: nowrap;
}
.pcard-head h3{ font-family: var(--sans); font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.pcard-tag{ font-size: 14px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; min-height: 2.8em; }
.pcard-price{ margin: 22px 0; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.pc-amount{ font-family: var(--serif); font-size: 46px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.pc-unit{ font-size: 18px; color: var(--ink-soft); margin-left: 4px; font-family: var(--sans); font-weight: 600; }
.pc-note{ display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }
.pc-engage{ display: flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 11px 14px;
  background: var(--bg-warm); border: 1px solid var(--line-soft); border-radius: 11px;
  font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.pc-engage svg{ width: 16px; height: 16px; flex: none; color: var(--coral); }
.pcard.pop .pc-engage{ background: #fff; border-color: var(--coral-tint); }
.pcard-feats{ list-style: none; display: flex; flex-direction: column; gap: 13px; }
.pcard-feats li{ display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.pcard-feats li span{ flex: 1; min-width: 0; }
.pcard-feats li svg{ width: 18px; height: 18px; flex: none; color: var(--coral); margin-top: 1px; }
.pcard-meta{ margin: 22px 0 24px; padding: 16px 0; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 16px; }
.pcm-row{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcm-k{ display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; line-height: 1.4; }
.pcm-k svg{ width: 15px; height: 15px; color: var(--coral); }
.pcm-v{ font-size: 14px; color: var(--ink); text-align: left; font-weight: 500; line-height: 1.4; }
.pcard .btn{ margin-top: auto; width: 100%; }

/* Prix « Sur devis » (offre signature : pas de montant chiffré) */
.pc-amount-text{ font-size: 30px; color: var(--ink); }

/* Pastille (offre signature, ex. « 1 journée/semaine dans vos locaux ») */
.pcard-pill{
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 4px; padding: 8px 14px; border-radius: 999px;
  background: var(--coral-tint); color: var(--coral-deep);
  font-size: 12.5px; font-weight: 600; line-height: 1.3;
}
.pcard-pill svg{ width: 15px; height: 15px; flex: none; color: var(--coral); }

/* Offre « signature » (3e carte) : contour + ombre + fond dégradé + légère
   élévation. L'élévation est portée par .is-in pour ne pas casser l'animation
   d'apparition (qui pilote déjà `transform`). */
.price-grid .pcard.sig{
  border-color: var(--coral);
  background: linear-gradient(180deg, var(--coral-tint) 0%, #fff 22%);
  box-shadow: 0 46px 92px -46px var(--coral-glow);
}
.price-grid .pcard.sig.is-in{ transform: translateY(-10px); }
.price-grid .pcard.sig.is-in:hover{ transform: translateY(-16px); box-shadow: 0 56px 112px -42px var(--coral-glow); }
/* Badge premium (sombre, pastille étoilée) de l'offre signature */
.pcard-badge-sig{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(0,0,0,.5);
}
.pcard-badge-sig svg{ width: 13px; height: 13px; color: var(--coral); }

@media (max-width: 920px){
  .price-grid{ grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .pcard-tag{ min-height: 0; }
}

/* ============================================================
   OFFRES - parcours vertical en deux étapes (créer → développer) + à la carte
   ============================================================ */
/* Empilement vertical : deux cartes larges, l'une sous l'autre, transition entre les deux. */
.offer-stack{ max-width: 940px; margin: clamp(30px,3.4vw,46px) auto 0; display: flex; flex-direction: column; }

/* Carte large en trois zones : identité (gauche) · contenu (centre) · prix (droite). */
.ocard{
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: clamp(26px,3vw,38px) clamp(26px,3.2vw,42px);
  box-shadow: 0 34px 70px -52px rgba(0,0,0,.4);
  display: grid; align-items: center;
  grid-template-columns: minmax(206px,0.82fr) minmax(0,1.3fr) minmax(222px,0.9fr);
  gap: clamp(22px,2.6vw,40px);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.ocard:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--coral) 40%, var(--line));
  box-shadow: 0 46px 88px -48px rgba(0,0,0,.45);
}

/* Zone 1 : identité (badge d'étape, icône, sur-titre, titre, sous-titre, volume). */
.ocard-step{ display: inline-block; margin-bottom: clamp(14px,1.6vw,18px); padding: 4px 11px; border-radius: 999px; background: var(--coral-tint); color: var(--coral-deep); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ocard-top{ display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px,1.5vw,16px); }
.ocard-ico{
  width: clamp(52px,5vw,64px); height: clamp(52px,5vw,64px); flex: none;
  border-radius: 16px; background: var(--coral-tint); color: var(--coral-deep);
  display: grid; place-items: center;
}
.ocard-ico svg{ width: 46%; height: 46%; }
.ocard-kicker{ display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.ocard-head h3{ font-family: var(--sans); font-size: clamp(19px,1.9vw,23px); font-weight: 700; letter-spacing: -.02em; line-height: 1.16; margin-top: 6px; }
.ocard-tag{ margin-top: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.5; }
/* Volume horaire de l'offre pilotage : information (pas un CTA), pastille vert clair + icône agenda. */
.ocard-volume{ display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--coral-tint); color: var(--coral-deep); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.ocard-volume svg{ width: 15px; height: 15px; flex: none; }

/* Zone 2 : contenu (liste sur deux colonnes, coche cerclée). */
.ocard-feats{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 22px; }
.ocard-feats li{ display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.feat-ck{ display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--coral-tint); color: var(--coral-deep); margin-top: 1px; }
.feat-ck svg{ width: 12px; height: 12px; }
/* Livrable inclus (audit de démarrage) : pastille vert clair, même langage que le badge de volume. */
.ocard-included{ display: inline-flex; align-items: center; gap: 7px; margin: clamp(16px,1.8vw,20px) 0 0; padding: 6px 13px; border-radius: 999px; background: var(--coral-tint); color: var(--coral-deep); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.ocard-included svg{ width: 14px; height: 14px; flex: none; }
.ocard-note{ margin: clamp(14px,1.6vw,18px) 0 0; padding-top: clamp(14px,1.6vw,18px); border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Zone 3 : prix (même traitement pour les deux offres) + justification. */
.ocard-foot{ display: flex; flex-direction: column; gap: 14px; }
.ocard-price{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; line-height: 1; }
.ocard-price .pc-prefix{ width: 100%; margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ocard-price .pc-amount{ font-family: var(--serif); font-size: clamp(38px,4.2vw,52px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.ocard-price .pc-cur{ font-family: var(--serif); font-size: .5em; font-weight: 600; margin-left: 3px; }
.ocard-price .pc-per{ font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.ocard-engage{ display: block; width: 100%; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
/* Délai de mise en ligne (offre création) : différenciant mis en avant, sous le prix. */
.ocard-delay{ margin: 0; }
.ocard-delay-line{ display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; font-weight: 700; color: var(--coral-deep); }
.ocard-delay-line svg{ width: 16px; height: 16px; flex: none; }
.ocard-delay-note{ margin: 5px 0 0; font-size: 11.5px; color: var(--ink-faint); }
/* « Pourquoi cette formule ? » : phrase chiffrée en tête + puces (lecture en 3 secondes). */
.ocard-why{ padding: 14px 16px; border-radius: 13px; background: var(--bg-warm); }
.ocard-why-t{ margin: 0 0 7px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ocard-why-lead{ margin: 0 0 11px; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.ocard-why ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ocard-why li{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.ocard-why li svg{ width: 14px; height: 14px; flex: none; color: var(--coral-deep); }

/* Transition entre les deux cartes : filet vertical + flèche vers le bas + phrase. */
.offer-sep{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(16px,2.2vw,26px) 0; }
.offer-sep::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 1px dashed var(--line); z-index: 0; }
.offer-sep-chev{ position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--coral); color: #fff; box-shadow: 0 0 0 6px var(--coral-tint); }
.offer-sep-chev svg{ width: 18px; height: 18px; transform: rotate(90deg); }
.offer-sep-txt{ position: relative; z-index: 1; max-width: 34ch; text-align: center; font-size: 12.5px; line-height: 1.45; font-weight: 600; color: var(--ink); background: var(--bg); padding: 6px 10px; }

/* Empilement des zones sur écran étroit. */
@media (max-width: 860px){
  .ocard{ grid-template-columns: 1fr; gap: clamp(20px,3.2vw,26px); }
  .ocard-body, .ocard-foot{ padding-top: clamp(18px,3vw,22px); border-top: 1px solid var(--line-soft); }
}
@media (max-width: 460px){
  .ocard-feats{ grid-template-columns: 1fr; }
}

/* Pop-up détail d'une offre */
.offer-modal{ position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.offer-modal[hidden]{ display: none; }
.offer-modal-scrim{
  position: absolute; inset: 0; background: rgba(17,17,17,.5); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .25s var(--ease);
}
.offer-modal.is-open .offer-modal-scrim{ opacity: 1; }
.offer-modal-card{
  position: relative; z-index: 1; width: min(520px,100%); max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 22px; padding: clamp(26px,4vw,38px);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.5);
  transform: translateY(16px) scale(.98); opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.offer-modal.is-open .offer-modal-card{ transform: none; opacity: 1; }
.offer-modal-x{
  position: absolute; top: 15px; right: 15px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .2s, color .2s;
}
.offer-modal-x:hover{ background: var(--bg-warm); color: var(--ink); }
.offer-modal-card .ocard-ico{ margin-bottom: 18px; }
.om-kicker{ font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }
.offer-modal-card h3{ font-family: var(--sans); font-size: clamp(22px,2.6vw,30px); font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.om-price{ margin: 14px 0 4px; }
.om-price .pc-amount{ font-family: var(--serif); font-size: 29px; font-weight: 500; letter-spacing: -.02em; }
.om-price .pc-unit{ font-size: 14px; color: var(--ink-soft); font-family: var(--sans); font-weight: 600; }
.om-featnote{ margin-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.om-feats{ list-style: none; margin: 12px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.om-feats li{ display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.om-feats li svg{ width: 18px; height: 18px; flex: none; color: var(--coral); margin-top: 1px; }
.om-actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.om-actions .btn{ flex: 1; min-width: 160px; }
html.offer-lock{ overflow: hidden; }

/* Packs à la carte (cartes icône + libellé) */
/* Mention de disponibilité limitée (rareté assumée), sous les deux offres. */
.offer-availability{ margin: clamp(24px,2.8vw,34px) auto 0; max-width: 58ch; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
/* À la carte : hiérarchie plus discrète que les deux offres principales (cartes plus petites, plus d'air au-dessus). */
.offer-packs{ margin-top: clamp(40px,4.6vw,64px); text-align: center; }
.op-eyebrow{ font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.offer-packs h3{ font-family: var(--sans); font-size: clamp(20px,2.3vw,27px); font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.offer-packs h3 .accent{ color: var(--coral); font-style: italic; }
.op-intro{ margin: 10px auto 0; max-width: 58ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.op-grid{
  list-style: none; margin: clamp(24px,3vw,34px) auto 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px,1fr)); gap: 14px;
}
.op-card{
  display: flex; align-items: stretch; gap: 11px; text-align: left;
  padding: 13px 15px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.op-card:hover{
  border-color: color-mix(in srgb, var(--coral) 45%, var(--line));
  transform: translateY(-3px); box-shadow: 0 26px 50px -40px rgba(0,0,0,.4);
}
.op-ico{ align-self: flex-start; display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--coral-tint); color: var(--coral-deep); }
.op-ico svg{ width: 19px; height: 19px; }
.op-txt{ flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.op-name{ font-size: 14.5px; font-weight: 700; color: var(--ink); }
.op-sub{ font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
/* Prix collé en bas de chaque carte → tous alignés sur une même ligne. */
.op-price{ margin-top: auto; padding-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--coral); }
/* Mention légale (franchise en base de TVA). */
.price-legal{ margin: clamp(28px,3vw,42px) 0 0; text-align: center; font-size: 11.5px; letter-spacing: .01em; color: var(--ink-faint); }
.op-note{ margin: clamp(22px,2.6vw,30px) auto 0; max-width: 60ch; font-size: 14px; color: var(--ink-soft); }

.price-reassure{
  margin-top: 44px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: 18px; padding: 26px 32px;
}
.price-reassure .pr-ico{ width: 48px; height: 48px; flex: none; border-radius: 13px; background: rgba(255,255,255,.1); display: grid; place-items: center; color: #fff; }
.price-reassure .pr-ico svg{ width: 24px; height: 24px; }
.pr-txt{ flex: 1; min-width: 220px; }
.pr-title{ display: block; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 5px; }
.price-reassure p{ margin: 0; font-size: 15.5px; color: rgba(255,255,255,.82); line-height: 1.5; }
.price-reassure p b{ color: #fff; }
.price-reassure .btn-primary{ background: #fff; color: var(--ink); white-space: nowrap; }
.price-reassure .btn-primary:hover{ background: var(--coral-tint); }
@media (max-width: 620px){ .price-reassure{ flex-direction: column; align-items: flex-start; } .price-reassure .btn{ width: 100%; } }

/* ============================================================
   ABOUT / PARCOURS
   ============================================================ */
.about{ position: relative; }
.about-spark{ position: absolute; top: 8%; right: 6%; width: 44px; height: 44px; color: var(--gold); opacity: .8; }
.about-wrap{ display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px,6vw,90px); align-items: center; }
.about-media{ position: relative; padding-bottom: 30px; }
.about-photo{
  position: relative; aspect-ratio: 4/5; border-radius: 20px 20px 20px 60px; overflow: hidden;
  background: var(--coral-tint); box-shadow: 0 50px 100px -50px rgba(0,0,0,.5);
  transform: rotate(-1.5deg);
}
.about-photo image-slot{ width: 100%; height: 100%; }
.about-photo-tag{
  position: absolute; top: 16px; left: -14px; z-index: 3;
  background: var(--coral); color: #fff; font-size: clamp(17px,1.8vw,21px);
  padding: 6px 16px 8px; border-radius: 999px; transform: rotate(-3deg);
  box-shadow: 0 16px 30px -16px var(--coral);
}
.about-ambiance{
  position: absolute; right: -22px; bottom: 44px; z-index: 2;
  width: 46%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden;
  border: 5px solid #fff; box-shadow: 0 30px 60px -34px rgba(0,0,0,.55);
  transform: rotate(3deg);
}
.about-ambiance image-slot{ width: 100%; height: 100%; }
.about-facts{
  position: absolute; left: -16px; bottom: -6px; z-index: 3; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.5); transform: rotate(-1deg);
}
.afact{ display: flex; align-items: baseline; gap: 10px; }
.afact-n{ font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--coral); line-height: 1; min-width: 64px; }
.afact-l{ font-size: 12px; color: var(--ink-soft); line-height: 1.3; max-width: 15ch; }
@media (max-width: 520px){
  .about-ambiance{ display: none; }
  .about-facts{ position: static; margin-top: 22px; flex-direction: row; flex-wrap: wrap; transform: none; }
}

.eyebrow-hand .eh-star{ width: 22px; height: 22px; color: var(--gold); }
.about-title{ font-family: var(--sans); font-weight: 800; font-size: clamp(30px,3.8vw,50px); line-height: 1.0; letter-spacing: -.035em; margin: 16px 0 8px; text-wrap: balance; }
.about-title .accent{ color: var(--coral); font-style: italic; }
.about-title .mark-underline .mark-ink{ color: var(--coral); }
.about-text{ margin-top: 22px; }
.about-text p{ font-size: 16px; color: var(--ink-soft); line-height: 1.7; max-width: 54ch; }
.about-text p + p{ margin-top: 14px; }
.about-text b{ color: var(--ink); font-weight: 600; }
/* Intertitres qui aèrent le parcours (petit label vert, filet léger au-dessus). */
.about-subhead{ margin: clamp(24px,3vw,34px) 0 12px; padding-top: clamp(14px,1.8vw,20px); border-top: 1px solid var(--line-soft); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--coral); }
.about-subhead:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.about-quote{
  position: relative; margin: 28px 0 4px; padding: 4px 0 4px 26px;
  border-left: 3px solid var(--coral);
  font-family: var(--serif); font-style: italic; font-size: clamp(18px,1.7vw,22px);
  line-height: 1.45; color: var(--ink); max-width: 50ch;
}
.about-quote .aq-mark{ position: absolute; left: 10px; top: -10px; font-family: var(--serif); font-size: 40px; color: var(--coral-tint); }
.about-quote .mark-underline2 .mark-ink{ color: var(--gold); }
.about-values{ margin-top: 30px; display: flex; flex-direction: column; gap: 18px; }
.aval{ display: flex; gap: 14px; align-items: flex-start; }
.aval-ico{ width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--coral-tint); color: var(--coral-deep); display: grid; place-items: center; }
.aval-ico svg{ width: 21px; height: 21px; }
.aval b{ font-size: 15.5px; font-weight: 700; }
.aval p{ font-size: 14px; color: var(--ink-soft); margin-top: 3px; line-height: 1.5; }
.about-sign{ margin-top: 34px; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.about-sign-role{ font-size: clamp(17px,1.7vw,20px); color: var(--ink-soft); transform: rotate(-2deg); }
.about-cta{ margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.about-cta .btn-ghost{ gap: .5em; }
.about-cta .btn-ghost svg{ width: 18px; height: 18px; }
@media (max-width: 860px){
  .about-wrap{ grid-template-columns: 1fr; gap: 60px; }
  .about-media{ max-width: 440px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background: var(--bg-warm); }
.faq-wrap{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(34px,5vw,72px); align-items: start; }
.faq-head{ text-align: left; max-width: none; margin: 0; position: sticky; top: 100px; }
.faq-lead{ margin-top: 16px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; max-width: 34ch; }
.faq-cta{ margin-top: 24px; }
.faq-list{ display: flex; flex-direction: column; gap: 12px; }
.faq-item{ background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .4s, box-shadow .4s; }
.faq-item.open{ border-color: var(--coral); box-shadow: 0 24px 50px -40px var(--coral-glow); }
.faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; text-align: left; font-family: var(--sans); font-size: clamp(17px,1.6vw,21px); font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.faq-sign{ position: relative; width: 18px; height: 18px; flex: none; }
.faq-sign::before, .faq-sign::after{ content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--coral); transition: transform .35s var(--ease); }
.faq-sign::before{ width: 16px; height: 2px; }
.faq-sign::after{ width: 2px; height: 16px; }
.faq-item.open .faq-sign::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-a p{ padding: 0 26px 24px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; max-width: 60ch; }
@media (max-width: 860px){
  .faq-wrap{ grid-template-columns: 1fr; gap: 34px; }
  .faq-head{ position: static; }
}