/* Finitions de rythme : un même écart entre chaque sur-titre et son titre. */
:root { --eyebrow-gap: 1.65rem; }
.eyebrow { margin-bottom: var(--eyebrow-gap); }

/* Hero : visuel fourni en plein fond, avec la zone claire réservée au message. */
.hero {
  background-color: var(--cream);
  background-image:
    linear-gradient(
      90deg,
      rgba(247, 247, 243, .98) 0%,
      rgba(247, 247, 243, .94) 28%,
      rgba(247, 247, 243, .72) 43%,
      rgba(247, 247, 243, .22) 58%,
      rgba(247, 247, 243, 0) 70%
    ),
    url("assets/hero-background.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero-art { visibility: hidden; }

/* Dans les têtes de section, le gap évite toute ambiguïté de marge. */
.section-heading > div { display: flex; flex-direction: column; gap: var(--eyebrow-gap); }
.section-heading > div > .eyebrow { margin-bottom: 0; }

/* Liste des livrables : les flèches n'étaient pas des actions. */
.deliverable-list article { grid-template-columns: 48px 1fr; }

/* Tarifs : même action sur les trois offres et prix d'appel sans ambiguïté. */
.price-starting-label {
  display: table;
  width: max-content;
  margin: 0 0 .65rem;
  padding: .38rem .55rem;
  background: rgba(245, 197, 66, .24);
  border-left: 3px solid #bd8d00;
  color: #715300;
  font: 800 .68rem/1 Montserrat, sans-serif;
  letter-spacing: .1em;
}
.price-card-button {
  background: var(--navy);
  color: #fff;
}
.price-card-button:hover,
.price-card-button:focus-visible {
  background: var(--navy-2);
}

/* Des cartes de problème plus denses, sans le grand vide sous le numéro. */
.pain-grid article { min-height: 0; padding: 1.7rem 2rem; }
.pain h3 { margin-top: 1.35rem; }

/* Portrait */
.about-visual { padding: 0; position: relative; overflow: hidden; display: block; }
.about-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 14, 29, .82) 100%); pointer-events: none; }
.about-visual p { position: absolute; z-index: 1; left: 1.5rem; bottom: 1.3rem; margin: 0; }
.about-visual small { color: #d2dbe5; }

/* Pied de page et mentions légales */
.footer-links { display: flex; gap: 1rem; }
.footer-links a { color: #fff; border-bottom: 1px solid var(--gold); }

/* Logos fournis : version complète pour la signature, monogramme pour l’icône. */
.brand-image { display: block; line-height: 0; }
.brand-image img { display: block; width: 190px; height: auto; mix-blend-mode: multiply; }
.brand-image-footer { background: transparent; padding: 0; }
.brand-image-footer img {
  width: 160px;
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}
.legal-hero { padding: 5.5rem 0 4rem; background: var(--navy); color: #fff; }
.legal-hero h1 { margin: 0; font: 700 clamp(2.6rem, 5vw, 4.8rem)/1 Montserrat, sans-serif; letter-spacing: -.07em; }
.legal-hero p:not(.eyebrow) { max-width: 58ch; color: #bfccdb; margin: 1.4rem 0 0; }
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content article { padding: 2rem 0; border-bottom: 1px solid var(--line); }
.legal-content h2 { margin: 0 0 1rem; color: var(--navy); font: 700 1.25rem Montserrat, sans-serif; letter-spacing: -.05em; }
.legal-content h3 { margin: 1.5rem 0 .45rem; color: var(--navy); font: 700 .88rem Montserrat, sans-serif; }
.legal-content p, .legal-content li { color: #596779; font-size: .88rem; }
.legal-content ul { padding-left: 1.2rem; }
.legal-content a { color: var(--navy); font-weight: 700; border-bottom: 1px solid var(--gold); }


/* Mesurer avant d'investir : réponse visible et honnête à la question du ROI. */
.value-test { background: #fff; }
.value-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 7rem; align-items: start; }
.value-copy h2 { color: var(--navy); margin-bottom: 1.5rem; }
.value-copy h2 em { color: #bd8d00; }
.value-copy > p:last-child { max-width: 55ch; color: #5e6b7c; }
.value-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.value-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.value-steps li > span { color: #bd8d00; font: 700 .68rem Montserrat, sans-serif; letter-spacing: .08em; padding-top: .25rem; }
.value-steps strong { display: block; color: var(--navy); font: 700 1rem Montserrat, sans-serif; letter-spacing: -.04em; }
.value-steps p { margin: .25rem 0 0; color: #637082; font-size: .84rem; }

/* Aperçu tangible, explicitement présenté comme un modèle et non comme un cas client. */
.deliverable-preview { overflow: hidden; background: #fff; border: 1px solid #cfd4d7; box-shadow: 0 20px 45px rgba(16, 35, 63, .08); }
.preview-toolbar { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: var(--navy); color: #fff; }
.preview-toolbar span { font: 700 .58rem Montserrat, sans-serif; letter-spacing: .1em; }
.preview-toolbar small { color: #bdc9d6; font-size: .58rem; }
.preview-body { display: grid; grid-template-columns: 1.35fr .65fr; min-height: 250px; }
.preview-ranking { padding: 1.2rem; border-right: 1px solid var(--line); }
.preview-ranking > p, .preview-decision > p { margin: 0 0 1rem; color: #6c7988; font: 700 .55rem Montserrat, sans-serif; letter-spacing: .1em; }
.rank-row { display: grid; grid-template-columns: 28px 1fr auto; gap: .65rem; align-items: center; margin-bottom: .55rem; padding: .8rem; background: #f2f4f5; border-left: 3px solid transparent; }
.rank-row.selected { background: #fff7dc; border-left-color: var(--gold); }
.rank-row span { color: #9a7a17; font: 700 .6rem Montserrat, sans-serif; }
.rank-row strong { color: var(--navy); font: 700 .72rem Montserrat, sans-serif; letter-spacing: -.03em; }
.rank-row b { color: #657080; font: 700 .48rem Montserrat, sans-serif; letter-spacing: .06em; }
.rank-row.selected b { color: #795d00; }
.preview-decision { padding: 1.2rem; background: #f7f8f8; display: flex; flex-direction: column; }
.preview-decision > strong { color: var(--navy); font: 800 1.55rem Montserrat, sans-serif; letter-spacing: -.06em; }
.preview-decision > span { margin-top: .7rem; color: #637082; font-size: .72rem; line-height: 1.5; }
.decision-meter { height: 5px; margin-top: auto; background: #dce1e5; }
.decision-meter i { display: block; width: 68%; height: 100%; background: var(--gold); }
.preview-footer { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.preview-footer span { padding: .65rem; border-right: 1px solid var(--line); color: #6c7988; text-align: center; font: 700 .5rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
.preview-footer span:last-child { border-right: 0; }
.preview-caption { margin: .85rem 0 2rem; color: #6d7885; font-size: .68rem; line-height: 1.5; }

.roadmap-download { display: grid; grid-template-columns: .78fr 1.22fr; background: #fff; border: 1px solid #cfd4d7; box-shadow: 0 20px 45px rgba(16, 35, 63, .08); }
.roadmap-cover { min-height: 330px; padding: 1.6rem; background: var(--navy); color: #fff; display: flex; flex-direction: column; }
.roadmap-cover > span { color: var(--gold); font: 700 .52rem Montserrat, sans-serif; letter-spacing: .1em; }
.roadmap-cover > strong { margin: auto 0 1rem; font: 700 1.8rem/1.05 Montserrat, sans-serif; letter-spacing: -.07em; }
.roadmap-cover > p { margin: 0; color: #c2cfdd; font-size: .62rem; }
.roadmap-summary { padding: 1.6rem; display: flex; flex-direction: column; align-items: flex-start; }
.roadmap-summary h3 { margin: 1.2rem 0 .8rem; color: var(--navy); font: 700 1.2rem/1.2 Montserrat, sans-serif; letter-spacing: -.05em; }
.roadmap-summary ul { margin: 0 0 1.4rem; padding: 0; list-style: none; color: #596779; font-size: .72rem; line-height: 1.85; }
.roadmap-summary li::before { content: "✓"; color: #bd8d00; font-weight: 800; margin-right: .5rem; }
.roadmap-summary .button { margin-top: auto; }

/* Preuve de réalisation : une démo honnête à la place d'une fausse preuve sociale. */
.proof { background: var(--navy); color: #fff; }
.proof-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 6rem; align-items: start; }
.proof-heading h2 { color: #fff; }
.proof-heading h2 em { color: var(--gold); }
.proof-heading > p:last-child { color: #b9c5d3; font-size: .84rem; }
.proof-stack { display: grid; gap: 1.2rem; }
.proof-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: var(--ink); }
.proof-demo { padding: 1.4rem; background: #eaf0f8; }
.demo-question, .demo-answer { padding: 1rem; background: #fff; box-shadow: 0 8px 24px rgba(16, 35, 63, .08); }
.demo-question small { display: block; color: #7b8795; font: 700 .5rem Montserrat, sans-serif; letter-spacing: .08em; }
.demo-question strong { display: block; margin-top: .5rem; color: var(--navy); font: 700 .82rem/1.4 Montserrat, sans-serif; }
.demo-answer { margin-top: .8rem; border-left: 3px solid var(--gold); }
.demo-answer > span { color: #7d650f; font: 700 .5rem Montserrat, sans-serif; letter-spacing: .08em; }
.demo-answer p { color: #566477; font-size: .72rem; line-height: 1.5; }
.demo-answer div { display: flex; align-items: center; gap: .45rem; color: #647082; }
.demo-answer i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.demo-answer small { font-size: .55rem; }
.proof-copy { padding: 1.6rem; }
.proof-tag { display: inline-block; padding: .35rem .45rem; background: #fff4cc; color: #725800; font: 700 .52rem Montserrat, sans-serif; letter-spacing: .07em; }
.proof-copy h3 { margin: 1.3rem 0 .7rem; color: var(--navy); font: 700 1.25rem Montserrat, sans-serif; letter-spacing: -.05em; }
.proof-copy p { color: #637082; font-size: .78rem; }
.proof-copy ul { margin: 1.2rem 0 0; padding: 0; list-style: none; color: #506076; font-size: .68rem; line-height: 1.9; }
.proof-copy li::before { content: "✓"; color: #bd8d00; font-weight: 800; margin-right: .5rem; }

/* Parcours secondaire pour les visiteurs qui ne sont pas encore prêts à réserver. */
.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  width: 100%;
}
.hero-actions .button {
  min-width: 0;
  width: 100%;
  padding: .95rem .65rem;
  gap: .4rem;
  font-size: .58rem;
  letter-spacing: .045em;
  white-space: nowrap;
}
.button-secondary {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(16, 35, 63, .38);
}
.button-secondary:hover {
  background: #fff;
  border-color: var(--navy);
}
.button-secondary span {
  color: #a97d00;
  font-size: 1rem;
}
.hero-choice-note {
  max-width: 58ch;
  margin: .85rem 0 0;
  color: #6b7684;
  font-size: .73rem;
}
.final-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.final-diagnostic-link {
  color: #fff;
  font: 700 .74rem Montserrat, sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  padding-bottom: .3rem;
}
.final-diagnostic-link:hover {
  border-color: var(--gold);
}
.final-diagnostic-link span {
  color: var(--gold);
  margin-left: .35rem;
}

/* L'encart conclut la méthode, il suit donc le même axe gauche que les étapes. */
.method-aside { margin: 3.5rem 0 0; }

@media (max-width: 540px) {
  .hero {
    background-image: linear-gradient(rgba(247, 247, 243, .78), rgba(247, 247, 243, .78)), url("assets/hero-background.png");
    background-position: 43% center;
  }
  .brand-image img { width: 155px; }
  .brand-image-footer img { width: 140px; }
  .deliverable-list article { grid-template-columns: 35px 1fr; }
  .footer-links { flex-wrap: wrap; }
  .preview-toolbar { flex-direction: column; }
  .preview-body, .proof-card { grid-template-columns: 1fr; }
  .roadmap-download { grid-template-columns: 1fr; }
  .roadmap-cover { min-height: 250px; }
  .preview-ranking { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-decision { min-height: 190px; }
  .rank-row { grid-template-columns: 25px 1fr; }
  .rank-row b { grid-column: 2; }
  .preview-footer { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { grid-template-columns: 1fr; gap: .8rem; }
  .hero-actions .button { width: 100%; font-size: .68rem; }
  .hero-choice-note { margin-top: .2rem; }
}

@media (max-width: 850px) {
  .hero { padding-bottom: 3.5rem; }
  .hero-art { display: none; }
  .value-layout, .proof-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}