/* RENAISSANCE 180 — Long-form sales letter (V3)
   - Hero offre-first (programme nommé en H1)
   - Pas de form visible, modal multi-step à la place
   - Layouts mobile distincts (tableau converti en cards mobile)
   - Sticky CTA mobile + topbar
   Reuses tokens.css. */

body {
  background: var(--creme);
  color: var(--anthracite);
  font-size: 17px;
  line-height: 1.65;
}

@media (min-width: 720px) {
  body { font-size: 18px; }
}

/* Reading width — narrower than v1 marketing page.
   65-70 chars at body size. */
:root {
  --read: 36rem;          /* ~580px — body copy column */
  --read-wide: 44rem;     /* ~700px — for grids and special blocks */
  --section-y-v2: clamp(3.5rem, 8vw, 6.5rem);
}

.read {
  width: 100%;
  max-width: var(--read);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.read-wide {
  width: 100%;
  max-width: var(--read-wide);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Body copy default */
.prose p {
  margin: 0 0 1.1em 0;
  text-wrap: pretty;
}
.prose p strong {
  font-weight: 600;
}
.prose p em {
  font-style: italic;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--anthracite);
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.75rem, 3vw + 0.6rem, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
}
h3 {
  font-size: clamp(1.35rem, 1.6vw + 0.7rem, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
}
h4 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Section frame */
.sec {
  padding: var(--section-y-v2) 0;
  position: relative;
}
.sec--sable { background: var(--sable); }
.sec--anth { background: var(--anthracite); color: var(--creme); }
.sec--anth h2, .sec--anth h3, .sec--anth h4 { color: var(--creme); }

/* Section eyebrow + heading */
.sec-head {
  margin-bottom: 2.5rem;
}
.sec-head .num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brun);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.sec-head .num::before {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1px;
  background: var(--brun);
}

/* ============ STICKY TOPBAR ============ */
.topbar-v2 {
  background: var(--anthracite);
  color: var(--creme);
  padding: 0.6rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(245, 239, 228, 0.06);
}
.topbar-v2 .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}
.topbar-v2 .dot {
  width: 7px;
  height: 7px;
  background: var(--ocre);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ============ HERO ============ */
.hero-v2 {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.hero-v2 .crest {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brun);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 2.2rem;
}
.hero-v2 .crest::before,
.hero-v2 .crest::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(62, 52, 42, 0.25);
}
.hero-v2 h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.2vw + 0.4rem, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 1.3rem 0;
  text-wrap: balance;
}
.hero-v2 .sub {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw + 0.6rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--brun);
  margin: 0 0 2.4rem 0;
  text-wrap: balance;
}
.hero-v2 .cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 2.4rem;
}
.hero-v2 .micro {
  font-style: italic;
  color: var(--brun);
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 32rem;
}

/* Sceau in hero — top right corner */
.hero-v2 .seal-corner {
  position: absolute;
  top: clamp(1.5rem, 3vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  transform: rotate(8deg);
  z-index: 2;
}
.hero-v2 .seal-corner .seal {
  width: clamp(80px, 12vw, 120px);
  height: clamp(80px, 12vw, 120px);
}
@media (max-width: 720px) {
  .hero-v2 .seal-corner {
    position: static;
    transform: rotate(0);
    margin-bottom: 1.5rem;
  }
  .hero-v2 .seal-corner .seal { width: 78px; height: 78px; }
}

/* Inline blockquote (testimonial under hero) */
.quote-inline {
  background: var(--sable);
  border-left: 3px solid var(--ocre);
  padding: 1.3rem 1.4rem;
  margin: 0;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--anthracite);
}
.quote-inline cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun);
}

/* ============ TRANSITIONAL ============ */
.transition-q {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw + 0.7rem, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--anthracite);
  padding: 2rem 0;
  text-wrap: balance;
  border-top: 1px solid var(--anthracite-15);
  border-bottom: 1px solid var(--anthracite-15);
  margin: 2.5rem 0;
}

/* ============ VOC TESTIMONIALS ============ */
.voc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 2rem 0 1.5rem;
}
@media (min-width: 760px) {
  .voc-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}
.voc-card {
  background: var(--creme);
  padding: 1.2rem 1.3rem;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  border-left: 2px solid var(--brun-60);
}
.voc-card::before {
  content: "“";
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 0.4;
  color: var(--ocre);
  margin-bottom: 0.5rem;
}

/* ============ MANIFESTE CARDS — industrie ============ */
.manif-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0 0;
}
@media (min-width: 720px) {
  .manif-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .manif-grid { grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
}

.manif-card {
  background: var(--creme);
  border: 1px solid rgba(62, 52, 42, 0.18);
  padding: 1.4rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.manif-card .keyword {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw + 0.5rem, 1.85rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--anthracite);
  background: var(--ocre);
  padding: 0.35em 0.45em 0.42em;
  align-self: flex-start;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.manif-card .body {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--anthracite);
}

/* ============ MECANISME — house diagram ============ */
.house-wrap {
  background: var(--creme);
  border: 1px solid var(--anthracite-15);
  padding: 1.5rem;
  margin: 2.5rem 0;
}
.house-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.pull-quote {
  background: var(--sable);
  border-left: 4px solid var(--ocre);
  padding: 1.7rem 1.6rem;
  margin: 2.5rem 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw + 0.6rem, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pull-quote strong {
  font-style: normal;
  font-weight: 700;
}

/* Hormone pieces — 4 numbered blocks */
.hormone-block {
  margin: 1.8rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--ocre);
}
.hormone-block h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.hormone-block .num-piece {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brun);
  display: block;
  margin-bottom: 0.3rem;
}

/* Mechanism table */
.mech-table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid var(--anthracite-15);
  background: var(--creme);
}
.mech-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.mech-table th, .mech-table td {
  padding: 0.85rem 0.95rem;
  text-align: left;
  border-bottom: 1px solid var(--anthracite-15);
  border-right: 1px solid var(--anthracite-15);
  vertical-align: top;
}
.mech-table th:last-child, .mech-table td:last-child { border-right: 0; }
.mech-table tr:last-child td { border-bottom: 0; }
.mech-table thead th {
  background: var(--sable);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun);
  line-height: 1.3;
}
.mech-table tbody tr td:first-child {
  font-weight: 600;
  background: rgba(62, 52, 42, 0.03);
}

/* Sources block */
.sources {
  background: var(--sable);
  padding: 1.3rem 1.4rem;
  font-size: 0.88rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--brun);
  margin: 2rem 0 1rem;
}
.sources ul {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
}
.sources li { margin-bottom: 0.3rem; }

.disclaimer-pull {
  background: var(--creme);
  border-left: 4px solid var(--ocre);
  padding: 1.3rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 1.5rem 0;
}

/* ============ EMOTIONAL PIVOT ============ */
.pivot-q {
  font-family: var(--display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 3vw + 0.5rem, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pivot-bigword {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
  text-align: center;
  margin: 2.5rem 0;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pivot-bigword span {
  background: var(--ocre);
  padding: 0.1em 0.35em 0.18em;
}

/* ============ PHASES — 4 cards ============ */
.phases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
@media (min-width: 720px) {
  .phases-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
  .phases-grid { grid-template-columns: repeat(4, 1fr); }
}
.phase-card {
  background: var(--sable);
  border-left: 3px solid var(--ocre);
  padding: 1.4rem 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.phase-card .code {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brun);
}
.phase-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 0;
}
.phase-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

/* ============ 8 PILIERS ============ */
.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 2rem 0;
}
@media (min-width: 760px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
}
.pillar {
  background: var(--creme);
  padding: 1.3rem 1.4rem 1.5rem;
  border-top: 1px solid var(--anthracite-15);
}
.pillar .num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--ocre);
  display: block;
  margin-bottom: 0.6rem;
}
.pillar h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-bottom: 0.7rem;
}
.pillar p {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 0.7em;
}
.pillar p:last-child { margin-bottom: 0; }

/* ============ TABLE DU MOIS — large photo ============ */
.table-mois-photo {
  width: 100%;
  height: clamp(280px, 45vw, 480px);
  margin: 2.5rem 0;
}

/* ============ NO-PRICE ============ */
.no-price-list {
  display: grid;
  gap: 1.4rem;
  margin: 2rem 0;
}
.no-price-item h4 {
  margin-bottom: 0.5rem;
}
.benchmark {
  background: var(--sable);
  border-left: 4px solid var(--ocre);
  padding: 1.5rem 1.5rem;
  margin: 2rem 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
}
.benchmark strong { font-weight: 600; }

/* ============ COACH ============ */
.coach-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (min-width: 760px) {
  .coach-grid {
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 2.2rem;
    align-items: start;
  }
}
.coach-photo {
  height: clamp(320px, 45vw, 380px);
}
@media (min-width: 760px) {
  .coach-photo { height: 380px; }
}
.coach-bio {
  font-size: 0.98rem;
  line-height: 1.6;
}
.coach-bio .placeholder-bio {
  background: var(--sable);
  padding: 1.2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-style: normal;
  color: var(--brun);
  margin-bottom: 1.4rem;
  border-left: 2px dashed var(--brun);
  line-height: 1.5;
}

/* ============ TESTIMONIALS — 2 large blocks ============ */
.testi-block {
  background: var(--sable);
  padding: 1.8rem 1.7rem;
  margin: 1.3rem 0;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
}
.testi-block.placeholder {
  background: var(--sable);
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--brun);
  border-left: 2px dashed var(--brun);
  line-height: 1.55;
}
.testi-disclaimer {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun);
  margin-top: 1.2rem;
  font-style: normal;
}

/* ============ DISQUALIFICATION ============ */
.disqual-list {
  display: grid;
  gap: 1.5rem;
  margin: 2rem 0;
}
.disqual-item {
  padding-left: 1.1rem;
  border-left: 2px solid var(--brun);
}
.disqual-item h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  line-height: 1.25;
}
.disqual-item p {
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0;
}

/* ============ METHODOLOGIE — numbered list ============ */
.method-list {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0;
  counter-reset: m;
}
.method-list li {
  counter-increment: m;
  padding: 1rem 0 1rem 3rem;
  position: relative;
  border-bottom: 1px solid var(--anthracite-15);
  font-size: 0.98rem;
  line-height: 1.55;
}
.method-list li:last-child { border-bottom: 0; }
.method-list li::before {
  content: counter(m, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ocre);
}

/* ============ GARANTIE ============ */
.guarantee-frame {
  background: var(--creme);
  border: 1px solid var(--anthracite-15);
  padding: 2rem;
  margin: 2rem 0;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (max-width: 700px) {
  .guarantee-frame { flex-direction: column; gap: 1.2rem; padding: 1.5rem; }
}
.guarantee-frame .seal {
  flex-shrink: 0;
  margin-top: 0.4rem;
}
.guarantee-frame h4 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.guarantee-frame p {
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0 0 0.9em;
}
.guarantee-frame strong { font-weight: 600; }
.guarantee-todo {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--brun);
  background: var(--sable);
  padding: 0.5rem 0.7rem;
  display: inline-block;
  margin-top: 0.7rem;
}

/* ============ FAQ ============ */
.faq {
  margin: 2rem 0;
}
.faq details {
  border-bottom: 1px solid var(--anthracite-15);
  padding: 1rem 0;
}
.faq details:first-child { border-top: 1px solid var(--anthracite-15); }
.faq summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  padding-right: 2rem;
  position: relative;
  letter-spacing: -0.015em;
  color: var(--anthracite);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ocre);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  content: "−";
}
.faq details p {
  margin-top: 0.9rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--anthracite);
}

/* ============ FINAL CLOSE ============ */
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 2rem 0;
}
@media (min-width: 760px) {
  .options-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
.option {
  padding: 1.6rem 1.5rem;
}
.option--1 {
  background: var(--creme);
  border: 1px solid var(--anthracite-15);
}
.option--2 {
  background: var(--sable);
  border-left: 4px solid var(--ocre);
}
.option h4 {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;
}
.option p {
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0;
}
.close-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 2vw + 0.6rem, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  margin: 2.5rem 0;
  text-wrap: balance;
}
.cta-final-wrap {
  text-align: center;
  margin: 2rem 0 1rem;
}
.cta-final-wrap .btn {
  font-size: 0.85rem;
  padding: 1.2rem 1.8rem;
}

/* ============ PS / PPS ============ */
.ps-block {
  background: var(--creme);
  border-left: 2px solid var(--brun);
  padding: 1.4rem 1.5rem;
  margin: 1.3rem 0;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
}
.ps-block strong {
  font-style: normal;
  font-weight: 700;
}

/* ============ FORM ============ */
.form-frame {
  background: var(--creme);
  padding: 2rem 1.7rem 2.2rem;
  border: 1px solid var(--anthracite-15);
  margin: 2rem 0;
}
@media (min-width: 720px) {
  .form-frame { padding: 2.5rem 2.5rem 2.7rem; }
}
.form-frame .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.3rem;
}
.form-frame label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.form-frame label .req { color: var(--ocre); }
.form-frame label .hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--brun);
  margin-left: 0.4rem;
  font-family: var(--body);
  font-style: italic;
}
.form-frame input[type="text"],
.form-frame input[type="email"],
.form-frame input[type="tel"],
.form-frame textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--anthracite-15);
  background: #FFFDF7;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--anthracite);
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}
.form-frame input:focus,
.form-frame textarea:focus {
  outline: none;
  border-color: var(--ocre);
  box-shadow: 0 0 0 3px rgba(232, 184, 58, 0.18);
}
.form-frame textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.form-frame .radios {
  display: grid;
  gap: 0.5rem;
}
.form-frame .radios label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--body);
  font-size: 0.96rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--anthracite);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--anthracite-15);
  background: #FFFDF7;
  cursor: pointer;
  margin-bottom: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form-frame .radios label:hover {
  border-color: var(--ocre);
  background: rgba(232, 184, 58, 0.05);
}
.form-frame .radios input[type="radio"] {
  margin: 0;
  accent-color: var(--ocre);
}
.form-frame .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1.5rem 0 1.7rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--anthracite);
}
.form-frame .consent input {
  margin-top: 0.25rem;
  accent-color: var(--ocre);
  flex-shrink: 0;
}
.form-frame .submit-row {
  text-align: center;
  margin-top: 1rem;
}
.form-frame .submit-row .btn {
  width: 100%;
  justify-content: center;
  font-size: 0.85rem;
  padding: 1.2rem;
}
.form-frame .submit-micro {
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--brun);
}

/* ============ FOOTER ============ */
.footer-v2 {
  background: var(--sable);
  padding: 3rem 0 2.5rem;
  font-size: 0.82rem;
  color: var(--brun);
  line-height: 1.55;
}
.footer-v2 .read { max-width: var(--read-wide); }
.footer-v2 p { margin: 0 0 1em; }
.footer-v2 .small {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-v2 hr {
  border: 0;
  height: 1px;
  background: var(--anthracite-15);
  margin: 1.5rem 0;
}

/* ============ STICKY MOBILE CTA ============ */
.sticky-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ocre);
  color: var(--anthracite);
  padding: 0.95rem 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 -2px 14px rgba(31, 29, 26, 0.12);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticky-mobile.show { transform: translateY(0); }
@media (max-width: 760px) {
  .sticky-mobile { display: flex; }
}

/* H1/H2 leading numbered "Pas à cause de toi." treatment */
.bigline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw + 0.5rem, 2.2rem);
  line-height: 1.1;
  text-align: center;
  margin: 2.5rem 0 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--ocre);
  width: 0%;
  z-index: 70;
  transition: width 0.05s linear;
}

/* Inline section CTA spacer */
.inline-cta {
  text-align: center;
  margin: 2.5rem 0 0;
}

/* When V2 is at top, smooth-anchor for skiplinks */
html { scroll-behavior: smooth; }

/* Better numerals in mono blocks */
.mono, .num { font-variant-numeric: tabular-nums; }


/* ═════════════════════════════════════════════════════════════
   V3 — ADDITIONS
   ═════════════════════════════════════════════════════════════ */

/* ============ HERO V3 — offre-first, 2 colonnes ============ */
.hero-v3 {
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 6.5rem);
  position: relative;
  overflow: hidden;
}
.hero-v3 .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: start;
}
@media (min-width: 920px) {
  .hero-v3 .grid {
    grid-template-columns: 60fr 40fr;
    gap: 3.5rem;
  }
}
.hero-v3 .crest {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brun);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.hero-v3 .crest::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(62, 52, 42, 0.25);
}
.hero-v3 h1.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw + 0.4rem, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 1.3rem 0;
  text-wrap: balance;
}
.hero-v3 .differentiator {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.8vw + 0.7rem, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--brun);
  margin: 0 0 1.8rem 0;
  text-wrap: pretty;
}
.hero-v3 .factual,
.hero-v3 .hormonal-p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 1rem;
  max-width: 32rem;
  color: var(--brun);
}
.hero-v3 .hormonal-p {
  border-left: 1.5px solid rgba(232, 184, 58, 0.55);
  padding-left: 0.85rem;
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
  font-style: italic;
}
.hero-v3 .cta-primary {
  font-size: 0.85rem;
  padding: 1.15rem 1.6rem;
  background: var(--ocre);
  color: var(--anthracite);
  font-weight: 700;
}
.hero-v3 .micro {
  font-style: italic;
  color: var(--brun);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 30rem;
  margin: 1rem 0 0;
}
.hero-v3 .right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.hero-v3 .seal-corner {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2.5rem);
  right: clamp(1.5rem, 4vw, 3rem);
  transform: rotate(8deg);
  z-index: 2;
}
.hero-v3 .seal-corner .seal {
  width: clamp(86px, 11vw, 118px);
  height: clamp(86px, 11vw, 118px);
}
@media (max-width: 920px) {
  .hero-v3 .seal-corner {
    position: static;
    transform: rotate(0);
    margin-bottom: 1.2rem;
    align-self: flex-start;
  }
}
.hero-v3 .right .photo-ph {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 380px;
}
.hero-v3 .quote-inline {
  margin-top: 0;
}
@media (max-width: 920px) {
  .hero-v3 .right .photo-ph { max-width: 100%; aspect-ratio: 4/5; }
  .hero-v3 .cta-primary { width: 100%; justify-content: center; }
  .hero-v3 .right { order: -1; }
}

/* ============ SUMMARY 6 PILIERS — bold-first paragraphs ============ */
.summary6 p {
  font-size: 1.04rem;
  line-height: 1.6;
  margin: 0 0 1.1em;
}
.summary6 p strong {
  font-weight: 700;
}
@media (max-width: 720px) {
  .summary6 .item-card {
    background: #FAF6EE;
    padding: 1.05rem 1.1rem;
    border-radius: 8px;
    margin-bottom: 0.7rem;
  }
  .summary6 .item-card p { margin: 0; font-size: 0.99rem; }
}

/* ============ MOBILE MECH CARDS — replaces table on mobile ============ */
.mech-cards-mobile {
  display: none;
  flex-direction: column;
  gap: 0.9rem;
  margin: 2rem 0;
}
.mech-cards-mobile .mc {
  background: var(--creme);
  border: 1px solid var(--anthracite-15);
  padding: 1.1rem 1.2rem;
}
.mech-cards-mobile .mc h5 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.mech-cards-mobile .mc dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
.mech-cards-mobile .mc dt {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun);
  margin-bottom: 0.1rem;
}
.mech-cards-mobile .mc dd {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .mech-table-wrap { display: none; }
  .mech-cards-mobile { display: flex; }
}

/* ============ STICKY MOBILE CTA — V3 (avec sceau) ============ */
.sticky-mobile-v3 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ocre);
  color: var(--anthracite);
  padding: 0.95rem 1rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 -2px 14px rgba(31, 29, 26, 0.18);
  transform: translateY(110%);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sticky-mobile-v3.show { transform: translateY(0); }
@media (max-width: 760px) { .sticky-mobile-v3 { display: flex; } }

/* ============ TOPBAR V3 (avec lien Réserver desktop) ============ */
.topbar-v3 {
  background: var(--anthracite);
  color: var(--creme);
  padding: 0.55rem 0;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(245, 239, 228, 0.06);
  height: 36px;
  display: flex;
  align-items: center;
}
.topbar-v3 .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}
.topbar-v3 .dot {
  width: 7px;
  height: 7px;
  background: #6BCB77;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
.topbar-v3 .reserve-link {
  color: var(--ocre);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
}
.topbar-v3 .copy-mobile { display: none; }
.topbar-v3 .copy-desktop { display: inline; }
@media (max-width: 760px) {
  .topbar-v3 {
    height: auto;
    padding: 0.7rem 0.9rem;
  }
  .topbar-v3 .row {
    font-size: 0.78rem;
    gap: 0.6rem;
    letter-spacing: 0.02em;
    text-transform: none;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .topbar-v3 .copy-desktop { display: none; }
  .topbar-v3 .copy-mobile {
    display: inline;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--creme);
    font-family: var(--body);
    font-weight: 500;
  }
  .topbar-v3 .dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
  }
  .topbar-v3 .reserve-link {
    display: inline-block;
    font-size: 0.72rem;
    flex-shrink: 0;
    color: var(--anthracite);
    background: var(--ocre);
    text-decoration: none;
    border: none;
    padding: 0.4rem 0.75rem;
    border-radius: 3px;
    font-weight: 600;
    font-family: var(--body);
    letter-spacing: 0;
    text-transform: none;
  }
}

/* ============ MODAL MULTI-STEP ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 29, 26, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.09s linear;
  will-change: opacity;
}
.modal-overlay.open {
  display: flex;
  opacity: 1;
}
.modal {
  background: var(--creme);
  width: 100%;
  max-width: 480px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 6px, 0);
  transition: transform 0.09s linear;
  will-change: transform;
  contain: layout style;
}
.modal-overlay.open .modal { transform: translate3d(0, 0, 0); }

@media (max-width: 600px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}

.modal-close, .modal-back {
  position: absolute;
  top: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--brun);
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-family: var(--body);
  line-height: 1;
}
.modal-close { right: 14px; }
.modal-back { left: 14px; display: none; }
.modal-close:hover, .modal-back:hover { background: var(--anthracite-08); }

@media (max-width: 600px) {
  .modal-close { left: 14px; right: auto; }
  .modal-back { right: 14px; left: auto; }
}

.modal-track {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.modal-steps {
  display: flex;
  width: 200%;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
  height: 100%;
  will-change: transform;
}
.modal-steps.step2 { transform: translateX(-50%); }

.modal-step {
  width: 50%;
  padding: 56px 32px 28px;
  overflow-y: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .modal-step { padding: 56px 24px 100px; }
}

.modal-confirm {
  display: none;
  padding: 56px 32px 28px;
  overflow-y: auto;
  text-align: center;
}
.modal.is-confirm .modal-track { display: none; }
.modal.is-confirm .modal-confirm { display: block; }
.modal.is-confirm .modal-back { display: none !important; }

.modal h3.modal-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 0 0 0.7rem;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.modal .modal-sub {
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--brun);
  margin: 0 0 1.6rem;
}

.modal .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.modal label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun);
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.modal label .req { color: var(--ocre); }
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="tel"],
.modal textarea {
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--anthracite-15);
  background: #FFFDF7;
  font-family: var(--body);
  font-size: 16px;
  color: var(--anthracite);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
.modal input:focus,
.modal textarea:focus {
  outline: none;
  border-color: var(--ocre);
  box-shadow: 0 0 0 3px rgba(232, 184, 58, 0.18);
}
.modal input.error,
.modal textarea.error {
  border-color: #B23A2A;
  box-shadow: 0 0 0 3px rgba(178, 58, 42, 0.12);
}
.modal .err-msg {
  display: none;
  color: #B23A2A;
  font-size: 0.82rem;
  margin-top: 0.3rem;
  font-style: italic;
}
.modal .field.error .err-msg { display: block; }

.modal textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.modal .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.4rem 0 1.4rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--anthracite);
}
.modal .consent input {
  margin-top: 0.18rem;
  accent-color: var(--ocre);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.modal .consent.error label { color: #B23A2A; }

.modal .radios {
  display: grid;
  gap: 0.45rem;
  margin: 0.2rem 0 0;
}
.modal .radios label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--anthracite);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--anthracite-15);
  background: #FFFDF7;
  cursor: pointer;
  margin-bottom: 0;
  border-radius: 4px;
  min-height: 48px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.modal .radios label:hover {
  border-color: var(--ocre);
  background: rgba(232, 184, 58, 0.05);
}
.modal .radios input[type="radio"] {
  margin: 0;
  accent-color: var(--ocre);
  width: 18px;
  height: 18px;
}

.modal .submit-row {
  margin-top: 1.4rem;
}
@media (max-width: 600px) {
  .modal .submit-row {
    position: sticky;
    bottom: 0;
    background: var(--creme);
    margin: 1.4rem -24px 0;
    padding: 1rem 24px 1.2rem;
    border-top: 1px solid var(--anthracite-15);
  }
}
.modal .submit-row .btn {
  width: 100%;
  justify-content: center;
  font-size: 0.82rem;
  padding: 1.1rem;
  min-height: 56px;
}
.modal .submit-micro {
  text-align: center;
  margin: 0.9rem 0 0;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--brun);
}
.modal .skip-link {
  display: block;
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--brun);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  width: 100%;
  padding: 0.5rem;
}

/* Confirmation view */
.modal-confirm { text-align: center; }
.modal-confirm h3.modal-title { text-align: center; margin: 0 0 1.4rem; }
.modal-confirm .confirm-check {
  display: flex;
  justify-content: center;
  margin: 0 0 1.2rem;
  animation: confirm-check-pop 0.42s cubic-bezier(0.2, 0.8, 0.3, 1.4) both;
}
.modal-confirm .confirm-check svg {
  width: 64px;
  height: 64px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(31, 138, 76, 0.28));
}
@keyframes confirm-check-pop {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.modal-confirm .confirm-close-hint {
  margin-top: 1.6rem;
  font-size: 0.85rem;
  color: var(--brun);
  font-style: italic;
  text-align: center;
}
.modal-confirm p {
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.55;
  margin: 0 0 1em;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
body.modal-open { overflow: hidden; }

/* Visual override: ensure scroll progress stays above topbar */
.scroll-progress { z-index: 80; }

/* ============================================================
   V3 RÉVISIONS POST-FEEDBACK CORENTIN (2026-04-27)
   ============================================================ */

/* 1. MARGES DESKTOP ÉLARGIES — feedback "trop centré, marges trop larges"
   On override les variables read pour exploiter plus l'horizontalité. */
:root {
  --read: 44rem;
  --read-wide: 60rem;
}
@media (min-width: 1080px) {
  :root {
    --read: 48rem;
    --read-wide: 64rem;
  }
}

/* 2. HERO MOBILE ORDER — texte AVANT image (feedback critique : "sur mobile on voit l'image avant le texte")
   Le grid V3 sur mobile met les colonnes en stack. On force l'ordre : .left (texte) en 1, .right (photo) en 2. */
.hero-v3 .grid .left { order: 1; }
.hero-v3 .grid .right { order: 2; }

/* Sur mobile, la photo hero est secondaire — on peut la rendre plus discrète voire l'enlever sur très petits écrans */
@media (max-width: 720px) {
  .hero-v3 .grid .right .photo-ph {
    aspect-ratio: 16/9;
    min-height: 180px;
  }
  .hero-v3 .grid .right .quote-inline {
    margin-top: 1rem;
    font-size: 0.95rem;
  }
}

/* 3. ANCIEN SCEAU CORNER — masqué (sera repensé plus tard, feedback "pas convaincu visuellement") */
.hero-v3 .seal-corner,
.hero-v2 .seal-corner {
  display: none !important;
}

/* 4. NOUVEAU FOOTER */
.footer-v2 {
  background: var(--anthracite);
  color: var(--creme);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) 2rem;
  margin-top: 4rem;
}
.footer-v2 .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 76rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 760px) {
  .footer-v2 .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}
.footer-v2 .footer-brand .footer-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--creme);
  margin-bottom: 0.8rem;
}
.footer-v2 .footer-tagline {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(245, 239, 228, 0.85);
  margin: 0 0 1rem;
}
.footer-v2 .footer-by {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245, 239, 228, 0.65);
  margin: 0;
}
.footer-v2 .footer-by strong {
  color: var(--creme);
  font-weight: 600;
}
.footer-v2 .footer-col h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ocre);
  margin: 0 0 1.2rem;
  font-weight: 500;
}
.footer-v2 .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-v2 .footer-col li {
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 0.55em;
  color: rgba(245, 239, 228, 0.85);
}
.footer-v2 .footer-col a {
  color: rgba(245, 239, 228, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 239, 228, 0.15);
  padding-bottom: 1px;
  transition: color 0.15s ease;
}
.footer-v2 .footer-col a:hover {
  color: var(--ocre);
  border-bottom-color: var(--ocre);
}
.footer-v2 .footer-cta {
  background: none;
  border: none;
  color: var(--ocre);
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-v2 .footer-cta:hover {
  color: var(--creme);
}
.footer-v2 .footer-disclaimers {
  max-width: 76rem;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 239, 228, 0.12);
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(245, 239, 228, 0.55);
}
.footer-v2 .footer-disclaimers p {
  margin: 0 0 1em;
}
.footer-v2 .footer-disclaimers strong {
  color: rgba(245, 239, 228, 0.8);
  font-weight: 600;
}
.footer-v2 .footer-copyright {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.4);
}

/* Override anciennes règles footer-v2 qui pourraient gêner */
.footer-v2 .read { max-width: none; padding: 0; }
.footer-v2 hr { display: none; }

/* 5. AJUSTEMENT GLOBAL — éviter les marges trop larges sur sections texte desktop */
@media (min-width: 1080px) {
  .read {
    max-width: var(--read);
  }
  .read-wide {
    max-width: var(--read-wide);
  }
}

/* ============================================================
   FOOTER V3 — version minimaliste légale carrée pro
   ============================================================ */
.footer-v3 {
  background: var(--anthracite);
  color: rgba(245, 239, 228, 0.7);
  padding: 2.5rem 1.5rem 2rem;
  margin-top: 5rem;
}
.footer-v3 .footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
.footer-v3 .footer-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--creme);
  margin-bottom: 1rem;
}
.footer-v3 .footer-disclaimer {
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 0 auto 1.2rem;
  max-width: 42rem;
  color: rgba(245, 239, 228, 0.6);
  font-style: italic;
}
.footer-v3 .footer-mentions {
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0 auto 1.2rem;
  max-width: 50rem;
  color: rgba(245, 239, 228, 0.45);
}
.footer-v3 .footer-links {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.footer-v3 .footer-links a {
  color: rgba(245, 239, 228, 0.7);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-v3 .footer-links a:hover {
  color: var(--ocre);
}
.footer-v3 .footer-links .sep {
  color: rgba(245, 239, 228, 0.25);
  margin: 0 0.6rem;
}
.footer-v3 .footer-copyright {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 239, 228, 0.35);
  margin: 0;
}

/* ============================================================
   SECTION RÉSUMÉ OFFRE — 6 cards icônes (refonte 2026-04-27)
   ============================================================ */
.sec-head--center {
  text-align: center;
  margin-bottom: 2.5rem;
}
.sec-head--center .num {
  margin: 0 auto 0.6rem;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 64rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 720px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (min-width: 1080px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
}

.feature-card {
  background: var(--creme);
  border: 1px solid rgba(62, 52, 42, 0.08);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.feature-card:hover {
  border-color: rgba(232, 184, 58, 0.5);
}
.feature-icon {
  width: 36px;
  height: 36px;
  stroke: var(--brun);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.feature-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.25;
  color: var(--anthracite);
}
.feature-card p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  color: var(--brun);
}

/* ============================================================
   SECTION 06 INDUSTRIE — refonte 2026-04-27
   4 cards en grille 2x2 desktop, équilibrées, aérées
   ============================================================ */
.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 60rem;
  margin: 0 auto 3rem;
}
@media (min-width: 720px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.industry-card {
  background: var(--creme);
  border: 1px solid rgba(62, 52, 42, 0.1);
  padding: 1.8rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  transition: border-color 0.18s ease;
}
.industry-card:hover {
  border-color: rgba(232, 184, 58, 0.5);
}

.industry-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ocre);
  font-weight: 600;
}

.industry-keyword {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2vw + 0.7rem, 2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--anthracite);
  margin: 0;
  position: relative;
  display: inline-block;
}
.industry-keyword::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.05em;
  width: 100%;
  height: 0.45em;
  background: rgba(232, 184, 58, 0.35);
  z-index: -1;
}

.industry-body {
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  color: var(--brun);
}

/* Bloc conclusion en bas — verdict pédagogique sur fond crème */
.industry-conclusion {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--creme);
  border-top: 2px solid var(--ocre);
}
.industry-verdict-intro {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brun);
  margin: 0 0 1.2rem;
}
.industry-verdict-key {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw + 0.5rem, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--anthracite);
  margin: 0 0 1.4rem;
}
.industry-verdict-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--brun);
  margin: 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SECTION TÉMOIGNAGES — refonte 2026-04-27
   Mur d'avant/après, 9 cards en grille 3x3 desktop
   ============================================================ */
.testi-wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 72rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 720px) {
  .testi-wall {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }
}
@media (min-width: 1080px) {
  .testi-wall {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
  }
}

.testi-card {
  background: var(--creme);
  border: 1px solid rgba(62, 52, 42, 0.1);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.testi-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 0.4rem;
}
.testi-photo {
  position: relative;
  aspect-ratio: 1;
  background-color: rgba(62, 52, 42, 0.08);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 10px,
      rgba(62, 52, 42, 0.06) 10px,
      rgba(62, 52, 42, 0.06) 11px
    );
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.5rem;
  border: 1px solid rgba(62, 52, 42, 0.12);
}
.testi-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun);
  background: rgba(245, 239, 228, 0.85);
  padding: 0.15rem 0.5rem;
}

.hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(62, 52, 42, 0.04);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coach-photo-wrap {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(62, 52, 42, 0.04);
}
.coach-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testi-photo-combined {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(62, 52, 42, 0.12);
  margin-bottom: 0.4rem;
  background: rgba(62, 52, 42, 0.04);
}
.testi-photo-combined img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.testi-photo-combined .testi-tag {
  position: absolute;
  bottom: 0.5rem;
}
.testi-tag--avant { left: 0.5rem; }
.testi-tag--apres { right: 0.5rem; }

.testi-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.4rem;
}
.testi-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--anthracite);
}
.testi-city {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brun);
}

.testi-result {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--anthracite);
  border-left: 2px solid var(--ocre);
  padding-left: 0.7rem;
  background: rgba(232, 184, 58, 0.08);
  padding: 0.45rem 0.7rem;
}

.testi-quote {
  font-size: 0.88rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--brun);
  margin: 0;
}

.testi-more {
  text-align: center;
  margin: 0 0 1.5rem;
}
.testi-more-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brun);
  background: var(--creme);
  padding: 0.6rem 1.2rem;
  border: 1px dashed rgba(62, 52, 42, 0.25);
  display: inline-block;
}

.testi-disclaimer {
  max-width: 60rem;
  margin: 1.5rem auto 0.6rem;
  padding: 1rem 1.2rem;
  background: rgba(232, 184, 58, 0.12);
  border-left: 3px solid var(--ocre);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--brun);
}
.testi-disclaimer strong {
  font-weight: 600;
  color: var(--anthracite);
}

.testi-disclaimer-legal {
  max-width: 50rem;
  margin: 1rem auto 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--brun);
  font-style: italic;
  text-align: center;
}

/* ============================================================
   AUDIT MOBILE GLOBAL — fix 2026-04-28
   ============================================================ */

/* Body — taille raisonnable mobile */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .sec { padding: clamp(2.5rem, 6vw, 4rem) 0; }
}

/* Hero mobile — paragraphes plus courts visuellement, image plus discrète */
@media (max-width: 720px) {
  .hero-v3 {
    padding: 1.5rem 0 2rem;
  }
  .hero-v3 h1.wordmark {
    font-size: clamp(2.2rem, 9vw, 3rem);
    margin-bottom: 1rem;
  }
  .hero-v3 .differentiator {
    font-size: 1.15rem;
    margin-bottom: 1rem;
  }
  .hero-v3 .factual,
  .hero-v3 .hormonal-p {
    font-size: 0.92rem;
  }
  .hero-v3 .right .photo-ph {
    aspect-ratio: 4/3;
    min-height: 200px;
    max-height: 280px;
  }
  .hero-v3 .right {
    margin-top: 0.5rem;
  }
  .hero-v3 .grid {
    gap: 1.5rem;
  }
}

/* Section heads — moins d'espace sur mobile */
@media (max-width: 720px) {
  .sec-head { margin-bottom: 1.8rem; }
  h2 {
    font-size: clamp(1.5rem, 5vw, 1.9rem);
  }
}

/* Container padding mobile */
@media (max-width: 720px) {
  .container { padding-left: 1.1rem; padding-right: 1.1rem; }
  .read, .read-wide { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* CTA primary mobile — full width par défaut */
@media (max-width: 720px) {
  .btn--primary {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 1.1rem 1.2rem;
    font-size: 0.78rem;
  }
  .hero-v3 .cta-primary {
    width: 100%;
    max-width: 100%;
  }
}

/* Témoignages mur — espacement mobile + photos plus petites */
@media (max-width: 720px) {
  .testi-card {
    padding: 1.2rem 1.1rem 1.3rem;
  }
  .testi-photos { gap: 3px; }
  .testi-photo {
    aspect-ratio: 1;
  }
  .testi-quote { font-size: 0.85rem; }
}

/* Industry cards mobile */
@media (max-width: 720px) {
  .industry-card {
    padding: 1.4rem 1.2rem 1.3rem;
  }
  .industry-keyword {
    font-size: 1.6rem;
  }
  .industry-conclusion {
    padding: 2rem 1rem;
  }
  .industry-verdict-key {
    font-size: 1.7rem;
  }
}

/* Features grid (résumé offre) mobile */
@media (max-width: 720px) {
  .feature-card {
    padding: 1.3rem 1.2rem;
    gap: 0.7rem;
  }
  .feature-icon { width: 32px; height: 32px; }
  .feature-card h3 { font-size: 1rem; }
  .feature-card p { font-size: 0.88rem; }
}

/* VOC cards mobile */
@media (max-width: 720px) {
  .voc-card {
    padding: 1rem 1.1rem;
    font-size: 0.92rem;
  }
}

/* Modal mobile — full screen confirmé */
@media (max-width: 600px) {
  .modal-overlay.open { padding: 0; }
  .modal {
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-step {
    padding: 1.5rem 1.25rem !important;
  }
}

/* Footer mobile — un peu plus aéré */
@media (max-width: 720px) {
  .footer-v3 .footer-mentions {
    font-size: 0.68rem;
  }
  .footer-v3 .footer-disclaimer {
    font-size: 0.74rem;
  }
}

/* Sticky CTA mobile — toujours bien visible */
@media (max-width: 720px) {
  .sticky-mobile-v3 {
    font-size: 0.78rem !important;
    padding: 1rem 1.2rem !important;
  }
}

/* ====================================================================
   MODAL — UX/UI MOBILE OPTIMIZE + TRUST BAR (28/04/2026)
   ==================================================================== */

/* --- Trust bar en haut du step-1 --- */
.modal .trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  background: linear-gradient(to bottom, rgba(31, 29, 26, 0.04), rgba(31, 29, 26, 0.01));
  margin: -56px -32px 1.4rem -32px;
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--brun);
  border-bottom: 1px solid var(--anthracite-08);
}
.modal .trust-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.modal .trust-item--primary {
  font-weight: 700;
  color: var(--anthracite);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.modal .trust-sep {
  opacity: 0.32;
}

/* --- Mobile : trust-bar masquée pour libérer l'espace haut --- */
@media (max-width: 600px) {
  .modal .trust-bar { display: none; }
}

/* --- Mobile UX : padding compact + typographie + spacing --- */
@media (max-width: 600px) {
  .modal-step { padding: 60px 20px 110px; }
  .modal h3.modal-title { font-size: 1.32rem; line-height: 1.22; margin-top: 0; }
  .modal .modal-sub { margin-bottom: 1.25rem; font-size: 0.92rem; }
  .modal .field { margin-bottom: 0.85rem; }
  .modal label { font-size: 0.62rem; margin-bottom: 0.3rem; }
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="tel"],
  .modal textarea {
    padding: 0.95rem 1rem;
    font-size: 16px;
    min-height: 52px;
    border-radius: 6px;
  }
  .modal textarea { min-height: 110px; }

  /* Submit row sticky bottom + gradient pour visibilite */
  .modal .submit-row {
    position: sticky;
    bottom: 0;
    margin: 1.2rem -20px 0;
    padding: 1rem 20px 1.1rem;
    background: linear-gradient(to top, var(--creme) 78%, rgba(248, 244, 234, 0));
    z-index: 5;
  }
  .modal .submit-row .btn--primary {
    width: 100%;
    min-height: 54px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 6px;
  }

  /* Micro-copy de rassurance plus lisible */
  .modal .submit-micro {
    font-size: 0.78rem;
    line-height: 1.45;
    margin-top: 0.6rem;
  }

  /* Radios plus tactiles (step 2) */
  .modal .radios label {
    padding: 0.85rem 0.95rem;
    min-height: 50px;
    font-size: 0.92rem;
  }

  /* Skip link plus discret mais accessible */
  .skip-link {
    font-size: 0.82rem;
    padding: 0.7rem 0;
    width: 100%;
    text-align: center;
  }
}

/* --- Tres petits ecrans (<360px) : encore plus serre --- */
@media (max-width: 360px) {
  .modal-step { padding: 44px 16px 110px; }
  .modal .trust-bar { margin: -44px -16px 0.95rem -16px; padding: 0.6rem 0.7rem; }
  .modal h3.modal-title { font-size: 1.22rem; }
  .modal .submit-row { margin: 1rem -16px 0; padding: 0.9rem 16px 1rem; }
}

/* ====================================================================
   MODAL — HARDENING CROSS-DEVICE (30/04/2026)
   - 100dvh pour iOS Safari (URL bar dynamique)
   - Safe-area iPhone (notch + home indicator)
   - Hide sticky CTA quand modal ouvert
   - Body scroll lock iOS-proof
   - Flex min-height: 0 pour overflow correct
   - z-index hierarchie clarifiee
   ==================================================================== */

/* z-index hierarchy */
.sticky-mobile-v3 { z-index: 60; }
.topbar-v3 { z-index: 70; }
.scroll-progress { z-index: 80; }
.modal-overlay { z-index: 1000; }

/* Hide sticky CTA quand modal ouvert (sinon il flotte au-dessus du clavier) */
body.modal-open .sticky-mobile-v3 {
  display: none !important;
}

/* Body scroll lock — overflow:hidden uniquement (pas de position:fixed
   qui peut casser le positionnement du modal-overlay sur iOS Safari) */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}
html.modal-open-html {
  overflow: hidden;
  touch-action: none;
}

/* Modal overlay : prevent overscroll bleed sur iOS */
.modal-overlay {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Modal : utiliser dynamic viewport height pour eviter les coupures iOS */
.modal {
  /* Fallback vh pour vieux navigateurs */
  max-height: calc(100vh - 2rem);
  /* Modern browsers : dvh respecte la URL bar dynamique */
  max-height: calc(100dvh - 2rem);
}

@media (max-width: 600px) {
  .modal {
    /* Fallback */
    max-height: 100vh;
    height: 100vh;
    /* Modern */
    max-height: 100dvh;
    height: 100dvh;
  }
  /* L'overlay aussi : pour eviter qu'on voie une bande noire au bas iOS */
  .modal-overlay {
    height: 100vh;
    height: 100dvh;
  }
}

/* CRITIQUE : flex children doivent avoir min-height: 0 pour que overflow-y: auto fonctionne */
.modal-track {
  min-height: 0;
}
.modal-steps {
  min-height: 0;
}
.modal-step {
  min-height: 0;
}

/* iPhone notch + home indicator safe-area
   Patch 02/05/2026 v2 : sur mobile, top des boutons close/back bumpé à
   min 115px pour passer SOUS la barre URL Chrome iOS (~110px de haut).
   Chrome iOS retourne souvent safe-area-inset-top = 0, donc on ne peut PAS
   s'y fier — valeur dure 115px obligatoire. !important pour battre les
   overrides de cascade plus bas dans le fichier. */
@supports (padding: env(safe-area-inset-top)) {
  .modal-close,
  .modal-back {
    top: calc(14px + env(safe-area-inset-top));
  }
  @media (max-width: 600px) {
    .modal-close,
    .modal-back {
      top: max(125px, calc(14px + env(safe-area-inset-top))) !important;
    }
    .modal-step {
      padding-top: calc(72px + env(safe-area-inset-top));
      padding-bottom: calc(110px + env(safe-area-inset-bottom));
    }
    .modal .submit-row {
      padding-bottom: calc(1.1rem + env(safe-area-inset-bottom));
    }
    .modal-confirm {
      padding-top: calc(80px + env(safe-area-inset-top));
      padding-bottom: calc(36px + env(safe-area-inset-bottom));
    }
  }
}
/* Fallback si safe-area pas supporté : bump quand meme sur mobile */
@media (max-width: 600px) {
  .modal-close,
  .modal-back {
    top: 125px !important;
  }
}

/* Sur iOS Safari, dvh peut etre legerement plus grand que la zone visible.
   On force un fallback via svh pour garantir que le modal entre dans la zone visible
   meme quand l'URL bar est affichee.
   Patch 02/05/2026 : bottom:auto pour annuler le inset:0 qui force bottom:0
   du layout viewport (ce qui ferait deborder l'overlay sous l'URL bar Chrome iOS). */
@media (max-width: 600px) {
  .modal {
    max-height: 100svh;
    height: 100svh;
  }
  .modal-overlay {
    height: 100svh;
    bottom: auto;
  }
}

/* Empeche le double-scroll sur iOS quand on touche un radio/input */
.modal-step,
.modal-confirm {
  overscroll-behavior: contain;
}

/* iOS : prevent zoom on focus pour inputs (font-size 16px deja, mais on confirme) */
.modal input,
.modal textarea,
.modal select {
  font-size: 16px !important;
}

/* ====================================================================
   MODAL HEADER FIXE — restructuration (01/05/2026 nuit)
   Le titre + sous-titre sont DANS un header fixé en haut du modal,
   HORS de la zone scrollable. Plus aucun risque de coupure.
   Patch 02/05/2026 : padding-top mobile bumpé à min 100px pour que
   le titre passe SOUS la barre URL Chrome iOS (~92px) + Insta in-app
   browser. Sur desktop on reste à 60px.
   ==================================================================== */
.modal-header {
  flex: 0 0 auto;
  position: relative;
  padding: 60px 1.6rem 1.1rem;
  background: var(--creme);
  border-bottom: 1px solid rgba(31, 29, 26, 0.06);
  box-shadow: 0 4px 14px -8px rgba(31, 29, 26, 0.08);
  z-index: 5;
}
@supports (padding: env(safe-area-inset-top)) {
  .modal-header {
    padding-top: calc(60px + env(safe-area-inset-top));
  }
}
.modal-header-inner {
  padding-right: 0;
  padding-left: 0;
}
.modal-header .modal-title {
  margin: 0 0 0.6rem;
  line-height: 1.22;
}
.modal-header .modal-sub {
  margin: 0;
}
@media (max-width: 600px) {
  .modal-header {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
    /* Mobile : 160px minimum pour passer sous Chrome iOS URL bar étendue (~110px)
       + marge confort. Chrome iOS retourne souvent safe-area-inset-top = 0,
       donc on ne peut PAS s'y fier — valeur dure obligatoire. !important pour
       battre tout override de cascade (cf. blocs CSS dupliqués lignes 2987+). */
    padding-top: 160px !important;
  }
  @supports (padding: env(safe-area-inset-top)) {
    .modal-header {
      padding-top: max(160px, calc(110px + env(safe-area-inset-top))) !important;
    }
  }
  .modal-header .modal-title {
    font-size: 1.18rem;
    margin-bottom: 0.5rem;
  }
  .modal-header .modal-sub {
    font-size: 0.88rem;
    line-height: 1.45;
  }
}
/* Le modal-step n'a plus de padding-top massif (le header gere le top) */
@media (max-width: 600px) {
  .modal-step {
    padding-top: 1.4rem !important;
    padding-bottom: 110px;
  }
  /* CONFIRM mobile : 160px minimum pour passer SOUS la barre URL Chrome iOS
     (~110px) + marge confort, COHÉRENT avec .modal-header. Le check vert ne
     doit JAMAIS être coupé en haut. Patch 02/05/2026c : ancien 1.6rem
     (~26px) collait le check sous la URL bar (cf. screenshot bug 3.jpg). */
  .modal-confirm {
    padding-top: 160px !important;
  }
  @supports (padding: env(safe-area-inset-top)) {
    .modal-confirm {
      padding-top: max(160px, calc(110px + env(safe-area-inset-top))) !important;
    }
  }
  @supports (padding: env(safe-area-inset-bottom)) {
    .modal-step {
      padding-bottom: calc(110px + env(safe-area-inset-bottom));
    }
  }
}
/* Le modal-confirm utilise le header style differently */
.modal.is-confirm .modal-header {
  display: none;
}

/* ====================================================================
   FEATURE CARD --featured (mise en valeur Engagement) — 28/04/2026
   ==================================================================== */
.feature-card.feature-card--featured {
  position: relative;
  background: linear-gradient(135deg, rgba(232, 184, 58, 0.07) 0%, rgba(232, 184, 58, 0.03) 100%);
  border: 2px solid var(--ocre);
  box-shadow: 0 8px 28px rgba(232, 184, 58, 0.12), 0 2px 8px rgba(31, 29, 26, 0.04);
  transform: translateY(-2px);
}
.feature-card.feature-card--featured .feature-icon {
  color: var(--ocre);
  stroke: var(--ocre);
}
.feature-card.feature-card--featured h3 {
  color: var(--anthracite);
}
.feature-card.feature-card--featured strong {
  color: var(--ocre);
  font-weight: 700;
}
.feature-card .feature-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ocre);
  color: #FFFDF7;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(232, 184, 58, 0.32);
}
@media (max-width: 720px) {
  .feature-card.feature-card--featured {
    transform: none;
    margin-top: 0.6rem;
  }
  .feature-card .feature-badge {
    font-size: 0.62rem;
    padding: 0.38rem 0.85rem;
  }
}

/* ====================================================================
   CTA NO-WRAP — fix flèche orpheline sur mobile (28/04/2026)
   ==================================================================== */
.btn--primary,
.cta-primary,
.sticky-mobile-v3 {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .btn--primary,
  .cta-primary,
  .inline-cta .btn--primary {
    font-size: 0.88rem;
    padding: 0.95rem 1.1rem;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 400px) {
  .btn--primary,
  .cta-primary,
  .inline-cta .btn--primary {
    font-size: 0.82rem;
    padding: 0.9rem 0.95rem;
  }
}

@media (max-width: 360px) {
  .btn--primary,
  .cta-primary,
  .inline-cta .btn--primary {
    font-size: 0.78rem;
    padding: 0.85rem 0.85rem;
  }
}

/* Le modal submit garde sa propre logique (tient deja sur 1 ligne) */
.modal .submit-row .btn--primary { white-space: nowrap; }

/* ====================================================================
   FOOTER LINKS — single-line sur mobile (28/04/2026)
   ==================================================================== */
.footer-v3 .footer-links {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}

@media (max-width: 720px) {
  .footer-v3 .footer-links {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }
  .footer-v3 .footer-links .sep {
    margin: 0 0.4rem;
  }
}

@media (max-width: 380px) {
  .footer-v3 .footer-links {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
  }
  .footer-v3 .footer-links .sep {
    margin: 0 0.3rem;
  }
}

@media (max-width: 340px) {
  .footer-v3 .footer-links {
    font-size: 0.56rem;
  }
}

/* Footer links — desktop affiche le label complet, mobile affiche l'abréviation */
.footer-v3 .footer-links a .abbr { display: none; }
@media (max-width: 480px) {
  .footer-v3 .footer-links a .full { display: none; }
  .footer-v3 .footer-links a .abbr { display: inline; }
}

/* ============================================================
   FIXES 28/04 — CTA no-wrap, featured card, hero headline, mobile UX
   ============================================================ */

/* 1. CTA arrow ne wrap jamais — flèche reste collée au texte */
.cta-arrow {
  white-space: nowrap;
  display: inline-block;
}
.btn--primary {
  white-space: normal;
  text-wrap: balance;
}
@media (max-width: 480px) {
  .btn--primary {
    font-size: 0.92rem;
    padding: 1rem 1.1rem;
    text-wrap: balance;
  }
}

/* 2. Hero — nouveau wordmark/headline structure */
.hero-v3 .program-name {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brun);
  margin: 0 0 1.2rem 0;
  font-weight: 600;
}
.hero-v3 h1.hero-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw + 0.4rem, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.4rem 0;
  text-wrap: balance;
  color: var(--anthracite);
}
@media (max-width: 720px) {
  .hero-v3 h1.hero-headline {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  .hero-v3 .program-name {
    font-size: 0.7rem;
  }
}

/* 3. Featured card "Engagement de résultat" — UI plus marquée */
.feature-card.feature-card--featured {
  background: linear-gradient(135deg, rgba(232, 184, 58, 0.18) 0%, rgba(232, 184, 58, 0.05) 100%);
  border: 2px solid var(--ocre);
  position: relative;
  padding-top: 2.4rem;
}
.feature-card.feature-card--featured h3 {
  color: var(--anthracite);
  font-weight: 800;
}
.feature-card.feature-card--featured p strong {
  color: var(--anthracite);
  font-weight: 700;
}
.feature-card.feature-card--featured .feature-icon {
  stroke: var(--anthracite);
  stroke-width: 1.8;
}
.feature-badge {
  position: absolute;
  top: -12px;
  left: 1.2rem;
  background: var(--ocre);
  color: var(--anthracite);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  font-weight: 700;
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(184, 134, 42, 0.2);
}
@media (min-width: 1080px) {
  .feature-card.feature-card--featured {
    grid-column: span 1;
  }
}

/* 4. Modal mobile UX final — full screen propre, padding optimisé */
@media (max-width: 600px) {
  .modal-overlay.open {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal {
    max-width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }
  .modal-step {
    padding: 1.4rem 1.1rem 2rem !important;
  }
  .modal-title {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.6rem !important;
  }
  .modal-sub {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
  }
  .modal .field input,
  .modal .field textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 0.85rem 0.9rem !important;
  }
  .modal .submit-row .btn--primary {
    width: 100%;
    padding: 1.1rem 1rem;
    font-size: 0.95rem;
  }
  .trust-bar {
    flex-wrap: wrap;
    gap: 0.4rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.7rem !important;
  }
  .trust-hide-mobile { display: none !important; }
  /* Patch 02/05/2026 v2 : top:0.6rem retiré pour ne pas écraser le fix
     URL bar Chrome iOS (cf. bloc plus haut "iPhone notch + home indicator
     safe-area" qui place le close à 115px sous le top). On garde juste la
     taille du bouton. */
  .modal-close {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Trust bar style (modal step 1) */
.trust-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: rgba(232, 184, 58, 0.1);
  border: 1px solid rgba(232, 184, 58, 0.3);
  border-radius: 4px;
  margin-bottom: 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--brun);
  flex-wrap: nowrap;
  justify-content: center;
}
.trust-item {
  white-space: nowrap;
}
.trust-item--primary {
  color: var(--anthracite);
  font-weight: 600;
}
.trust-sep {
  color: rgba(62, 52, 42, 0.3);
}

/* 5. Submit micro stylé rassurant */
.submit-micro {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--brun);
  margin: 0.8rem 0 0 0;
  text-align: center;
  font-style: normal;
}

/* ============================================================
   FIX 28/04 — Hero mobile compacté (Option A)
   - Photo + témoignage masqués sur mobile (alourdissent)
   - Fonts secondaires réduites
   - Line-height aérée pour respirer
   - Marges entre paragraphes ajustées
   ============================================================ */

@media (max-width: 720px) {
  /* Masquer la colonne droite (photo + témoignage placeholder) sur mobile.
     Ils sont en placeholder, ils n'apportent rien tant que les vraies photos ne sont pas là.
     Quand le Drive Quentin arrive, on les remet en mode horizontal sous le CTA. */
  .hero-v3 .right { display: none; }

  /* Hero global mobile — moins d'air en haut, plus en bas pour le CTA */
  .hero-v3 {
    padding: 1.2rem 0 2.5rem;
  }

  /* Program name — juste un eyebrow, plus petit */
  .hero-v3 .program-name {
    font-size: 0.62rem !important;
    letter-spacing: 0.16em;
    margin-bottom: 0.7rem;
  }

  /* H1 — plus tendu */
  .hero-v3 h1.hero-headline {
    font-size: clamp(1.85rem, 7.5vw, 2.4rem);
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
  }

  /* Différenciateur — body lead, taille intermédiaire */
  .hero-v3 .differentiator {
    font-size: 1rem !important;
    line-height: 1.45;
    margin-bottom: 1.4rem;
    color: var(--brun);
  }

  /* Paragraphes secondaires (véhicule, mécanisme) — body normal */
  .hero-v3 .factual,
  .hero-v3 .hormonal-p {
    font-size: 0.88rem !important;
    line-height: 1.55;
    margin: 0 0 1.1rem !important;
    padding: 0;
    border-left: none;
    color: var(--brun);
  }

  /* Hormonal-p — garde l'accent jaune mais plus discret */
  .hero-v3 .hormonal-p {
    border-left: 2px solid rgba(232, 184, 58, 0.4);
    padding-left: 0.8rem;
    font-style: italic;
  }

  /* Garantie — un bloc visuel distinct, fond crème + bordure jaune */
  .hero-v3 .guarantee-line {
    margin: 1.2rem 0 1.6rem !important;
    padding: 0.9rem 1rem !important;
    background: rgba(232, 184, 58, 0.1);
    border-left: 3px solid var(--ocre);
    border-radius: 0;
  }
  .hero-v3 .guarantee-line p {
    font-size: 0.88rem !important;
    line-height: 1.5;
    margin: 0;
  }
  .hero-v3 .guarantee-line strong {
    color: var(--anthracite);
    font-weight: 700;
  }
  .hero-v3 .guarantee-label {
    font-size: 0.68rem;
    margin-bottom: 0.45rem;
  }

  /* CTA mobile — full width, bien visible */
  .hero-v3 .cta-primary {
    width: 100%;
    margin-top: 0.6rem;
  }

  /* Micro sous CTA — plus petit, condensé */
  .hero-v3 .micro {
    font-size: 0.78rem !important;
    line-height: 1.45;
    margin-top: 0.7rem;
    text-align: center;
  }
}

/* Sur desktop, la guarantee-line garde aussi un look distinct */
.hero-v3 .guarantee-line {
  margin: 1.3rem 0 1.6rem;
  padding: 1rem 1.2rem;
  background: rgba(232, 184, 58, 0.08);
  border-left: 3px solid var(--ocre);
  color: var(--brun);
}
.hero-v3 .guarantee-line p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}
.hero-v3 .guarantee-line strong {
  color: var(--anthracite);
  font-weight: 700;
}
.hero-v3 .guarantee-label {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocre);
  margin-bottom: 0.55rem;
}
.hero-v3 .guarantee-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: block;
}

/* ============================================================
   HERO QUOTE — Citation Quentin "On ne te redonne pas un régime"
   Refonte 28/04 : passage de paragraphe italique borduré à
   vraie citation attribuée (guillemet géant ocre + signature)
   ============================================================ */
.hero-v3 .hero-quote {
  position: relative;
  margin: 1.5rem 0 1.7rem;
  padding: 0.2rem 0 0 2rem;
  max-width: 32rem;
  border: 0;
}
.hero-v3 .hero-quote::before {
  content: "«";
  position: absolute;
  left: -0.15rem;
  top: -0.85rem;
  font-family: var(--display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ocre);
  opacity: 0.78;
  font-weight: 400;
  pointer-events: none;
}
.hero-v3 .hero-quote-text {
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--anthracite);
  margin: 0 0 0.7rem;
  font-weight: 400;
  font-family: var(--body);
}
.hero-v3 .hero-quote-attr {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
  font-family: var(--body);
}

@media (max-width: 720px) {
  .hero-v3 .hero-quote {
    margin: 1.2rem 0 1.4rem;
    padding-left: 1.6rem;
  }
  .hero-v3 .hero-quote::before {
    font-size: 2.8rem;
    top: -0.7rem;
  }
  .hero-v3 .hero-quote-text {
    font-size: 0.94rem;
    line-height: 1.5;
  }
  .hero-v3 .hero-quote-attr {
    font-size: 0.66rem;
  }
}

/* ============================================================
   FIX 28/04 — Photo rassemblement mensuel intégrée
   ============================================================ */
.rassemblement-photo {
  margin: 0 0 2rem;
  padding: 0;
}
.rassemblement-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 0;
}
.rassemblement-photo figcaption {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--brun);
  opacity: 0.55;
  margin-top: 0.6rem;
  text-align: right;
  font-style: italic;
}
@media (max-width: 720px) {
  .rassemblement-photo img {
    aspect-ratio: 4/5;
  }
  .rassemblement-photo figcaption {
    font-size: 0.6rem;
    text-align: left;
  }
}

/* ============================================================
   SECTION IDENTIFICATION — "Tu te reconnais ?" V4 manifeste typo
   Refonte 28/04/2026 : abandon de la mosaïque grid (bug mobile,
   impact faible) au profit d'un manifeste typographique pleine
   largeur, organisé en 6 actes émotionnels, séparés par un soleil
   ocre stylisé (écho DA Manifeste Solaire).
   ============================================================ */
.reco-sub {
  margin: 1.2rem auto 0;
  max-width: 38rem;
  font-size: clamp(0.95rem, 1.1vw + 0.5rem, 1.05rem);
  color: var(--anthracite);
  opacity: 0.78;
  line-height: 1.55;
  text-wrap: balance;
}

.reco-v4 {
  max-width: 740px;
  margin: 0 auto;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
}

.reco-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 2.6rem auto;
  color: var(--ocre);
}
.reco-divider::before,
.reco-divider::after {
  content: "";
  flex: 0 0 70px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 184, 58, 0.55) 50%, transparent);
}
.reco-sun {
  width: 18px;
  height: 18px;
  color: var(--ocre);
  display: block;
  flex-shrink: 0;
  opacity: 0.85;
}
.reco-divider--strong {
  margin: 3rem auto 2.4rem;
}
.reco-divider--strong::before,
.reco-divider--strong::after {
  flex-basis: 100px;
  background: linear-gradient(to right, transparent, var(--ocre) 50%, transparent);
  height: 1.2px;
}
.reco-divider--strong .reco-sun {
  width: 22px;
  height: 22px;
  opacity: 1;
}

.reco-act {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: center;
}

.reco-line {
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.18rem, 1.4vw + 0.85rem, 1.6rem);
  line-height: 1.42;
  color: var(--anthracite);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Climax — fond ocre subtil, tailles renforcées */
.reco-act--climax {
  background: rgba(232, 184, 58, 0.1);
  padding: 2.4rem 2rem;
  border-radius: 3px;
  margin: 0.5rem 0 0.8rem;
  gap: 1.6rem;
  position: relative;
}
.reco-act--climax::before,
.reco-act--climax::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 1.5px;
  background: var(--ocre);
}
.reco-act--climax::before { top: 0; }
.reco-act--climax::after { bottom: 0; }
.reco-line--climax {
  font-size: clamp(1.32rem, 1.8vw + 0.9rem, 1.9rem);
  font-weight: 400;
  font-style: italic;
  color: var(--anthracite);
  line-height: 1.36;
}

.reco-closing {
  text-align: center;
  max-width: 36rem;
  margin: 3rem auto 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--anthracite);
  text-wrap: balance;
}
.reco-closing strong {
  font-weight: 600;
}

@media (max-width: 720px) {
  .reco-v4 {
    max-width: 100%;
    padding-top: 0.25rem;
  }
  .reco-divider {
    margin: 2rem auto;
    gap: 0.7rem;
  }
  .reco-divider::before,
  .reco-divider::after {
    flex-basis: 38px;
  }
  .reco-divider--strong {
    margin: 2.4rem auto 2rem;
  }
  .reco-divider--strong::before,
  .reco-divider--strong::after {
    flex-basis: 50px;
  }
  .reco-act {
    gap: 1.05rem;
  }
  .reco-act--climax {
    padding: 1.7rem 1.1rem;
    gap: 1.2rem;
  }
  .reco-act--climax::before,
  .reco-act--climax::after {
    width: 28px;
  }
  .reco-sub {
    font-size: 0.92rem;
    padding: 0 0.5rem;
  }
  .reco-closing {
    font-size: 0.97rem;
    padding: 0 0.5rem;
    margin-top: 2.2rem;
  }
}

/* ═════════════════════════════════════════════════════════════
   HERO V3 — variante mono-colonne (sans photo)
   ═════════════════════════════════════════════════════════════ */
.hero-v3--single .hero-single {
  max-width: 50rem;
  margin: 0 auto;
}
.hero-v3--single .hero-headline {
  max-width: 100%;
}
.hero-v3--single .differentiator {
  max-width: 42rem;
}
.hero-v3--single .factual,
.hero-v3--single .hero-quote {
  max-width: 42rem;
}
.hero-v3--single .guarantee-line {
  max-width: 42rem;
}
.hero-v3--single .micro {
  max-width: 42rem;
}
@media (min-width: 920px) {
  .hero-v3--single {
    padding-top: clamp(4rem, 9vw, 7rem);
    padding-bottom: clamp(4.5rem, 10vw, 7.5rem);
  }
}

/* ═════════════════════════════════════════════════════════════
   COACH — variante éditoriale (photo grande + storytelling)
   ═════════════════════════════════════════════════════════════ */
.coach-grid--editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2.5rem 0 1rem;
}
@media (min-width: 800px) {
  .coach-grid--editorial {
    grid-template-columns: minmax(300px, 0.95fr) 1fr;
    gap: 3rem;
    align-items: start;
  }
}

.coach-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.coach-photo-wrap--xl {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 460px;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(62, 52, 42, 0.04);
  box-shadow:
    0 1px 0 rgba(62, 52, 42, 0.08),
    0 18px 40px -28px rgba(20, 14, 6, 0.45);
}
.coach-photo-wrap--xl::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 184, 58, 0.18);
  pointer-events: none;
}
.coach-photo-wrap--xl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
.coach-caption {
  font-family: 'Caveat', var(--display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--brun);
  letter-spacing: 0.005em;
  padding-left: 0.2rem;
  max-width: 460px;
}

.coach-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0 1.2rem;
  margin: 0 0 1.6rem;
  border-bottom: 1px solid rgba(62, 52, 42, 0.18);
}
.coach-stat-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 4.5vw + 0.5rem, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--anthracite);
  display: inline-flex;
  align-items: baseline;
}
.coach-stat-plus {
  font-size: 0.55em;
  color: var(--ocre);
  margin-left: 0.05em;
  font-weight: 700;
  letter-spacing: 0;
}
.coach-stat-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun);
  line-height: 1.45;
  margin-top: 0.25rem;
}

.storytelling-zone {
  background: var(--creme, #FAF6EE);
  border: 1px solid rgba(232, 184, 58, 0.35);
  border-left: 3px solid var(--ocre);
  padding: 1.3rem 1.4rem 1.5rem;
  margin: 0 0 1.8rem;
  position: relative;
}
.storytelling-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.storytelling-placeholder {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--brun);
  margin: 0;
  font-style: normal;
}

/* ═════════════════════════════════════════════════════════════
   MUR VIDÉO TÉMOIGNAGES
   ═════════════════════════════════════════════════════════════ */
.video-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.4rem 1rem;
  margin: 2.4rem auto 1rem;
  max-width: 1100px;
}
@media (min-width: 760px) {
  .video-wall {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem 1.4rem;
  }
}
@media (min-width: 1080px) {
  .video-wall {
    grid-template-columns: repeat(4, 1fr);
  }
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  background: #0d0a06;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(62, 52, 42, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.video-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(20, 14, 6, 0.45);
}
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0d0a06;
}
.video-frame img.video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: opacity 0.3s ease;
}
.video-frame.is-playing img.video-poster {
  opacity: 0;
  pointer-events: none;
}

.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.9rem 0.95rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.video-frame.is-playing .video-overlay {
  opacity: 0;
}
.video-overlay-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  line-height: 1.15;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, 0.7);
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}
.video-play-btn svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: var(--anthracite, #1a1410);
}
.video-frame.is-playing .video-play-btn {
  display: none;
}

.video-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.1rem 0.1rem 0.4rem;
}
.video-meta-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--anthracite);
  line-height: 1.2;
}
.video-meta-result {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ocre);
  font-weight: 600;
}

.video-wall-intro {
  text-align: center;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brun);
  max-width: 38rem;
  margin: 0 auto 0.5rem;
}

/* ═════════════════════════════════════════════════════════════
   GARANTIE — bullets (deux engagements clairs)
   ═════════════════════════════════════════════════════════════ */
.guarantee-bullets {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.guarantee-bullets li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.guarantee-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.8rem;
  height: 0.8rem;
  border: 1.5px solid var(--ocre);
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--ocre) 0 35%, transparent 36%);
}

/* ════════════════════════════════════════════════════════════════════
   FIX MODAL STEP 2 — bouton sticky qui flotte par-dessus le contenu
   (feedback Corentin 03/05/2026 : "À la deuxième étape on est obligé
   de scroller à l'intérieur mais t'as pas tout le popup qui scroll
   t'as que les questions du milieu du coup t'as le bouton qui flotte
   par-dessus. La deuxième étape elle est à peine utilisable.")

   Cause : sur mobile (≤600px), .modal .submit-row était en
   position:sticky bottom:0 avec un gradient transparent, et le
   .skip-link en flow static APRÈS dans le DOM. Résultat : le bouton
   restait en bas, masquait le textarea pourquoi + le skip-link, et
   le skip-link n'était jamais accessible (caché derrière le sticky).

   Fix : sur mobile, on retire la sticky de .submit-row. Le bouton
   scroll naturellement avec le contenu. Plus de chevauchement.
   On garde la sticky uniquement sur desktop (>600px) où la hauteur
   suffit largement, et où il n'y a aucun problème de scroll interne.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal .submit-row {
    position: static !important;
    bottom: auto !important;
    background: transparent !important;
    margin: 1.4rem 0 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    z-index: auto !important;
  }
  .modal .submit-row .btn,
  .modal .submit-row .btn--primary {
    width: 100%;
  }
  /* Padding-bottom du step réduit puisque le bouton ne flotte plus :
     juste un petit padding pour éviter que le micro-copy soit collé au
     bord, + safe-area iPhone home indicator. */
  .modal-step {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Skip-link plus respirant maintenant qu'il est en flow normal */
  .modal .skip-link {
    margin-top: 1.1rem;
    padding: 0.85rem 0.5rem;
  }
}