/* OVERFRAME — design system
   Palette : blanc cassé, noir profond, bleu signature.
   Typo : Anton (display condensé) + Archivo (texte).
   Signature : coins de viseur + diagonale bleue. */

:root {
  --bg: #FAFAF8;
  --bg-alt: #F1F1ED;
  --ink: #101113;
  --ink-soft: #4D4F54;
  --blue: #1B4DFF;
  --blue-dark: #1238BF;
  --line: #E2E2DC;
  --ok: #0E7A4E;
  --ko: #C0312B;
  --radius: 10px;
  /* Largeur utile du site : suit l'écran, avec un plafond pour rester lisible. */
  --max: min(1280px, 92vw);
  /* Largeur de lecture : au-delà, l'œil perd la ligne suivante. */
  --lecture: 74ch;
  --display: 'Anton', sans-serif;
  --body: 'Archivo', sans-serif;
  --hand: 'Caveat', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.accent-stroke { stroke: var(--blue); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 14px clamp(20px, 5vw, 56px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo-mark { width: 30px; height: 30px; }
.logo-text { font-family: var(--display); font-size: 18px; letter-spacing: 3px; }
/* Signature « by overads » : manuscrite, sous le nom, décalée vers la droite */
.logo-lockup { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.logo-lockup .logo-text { line-height: 1; }
.logo-by {
  display: block; font-family: var(--hand); font-weight: 600; font-size: 15px;
  letter-spacing: 0; text-transform: none; color: var(--blue);
  margin-top: -1px; margin-right: -10px; transform: rotate(-3deg);
}
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav .nav-cta { color: #fff; }
.btn-header { margin-left: 4px; }

/* Bouton burger : masqué sur grand écran, seul point d'entrée du menu sur mobile. */
.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 40px; padding: 0;
  background: transparent; border: 1.5px solid var(--line); border-radius: 8px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-burger, .nav-burger::before, .nav-burger::after {
  display: block; width: 18px; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-burger { position: relative; }
.nav-burger::before, .nav-burger::after { content: ''; position: absolute; left: 0; }
.nav-burger::before { top: -6px; }
.nav-burger::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-burger::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  padding: 13px 26px; border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-solid { background: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--blue-dark); }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-header { padding: 9px 18px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: clamp(64px, 12vh, 130px) 20px clamp(48px, 8vh, 90px);
  max-width: 980px; margin: 0 auto;
}
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 22px;
}
.hero-title {
  font-family: var(--display);
  /* Taille pilotée par la largeur de l'écran : la première ligne tient d'un seul
     tenant, du mobile au grand écran, sans jamais se couper. */
  font-size: min(7vw, 72px);
  line-height: 1.04; letter-spacing: .5px;
  text-transform: uppercase; font-weight: 400;
}
/* Les deux coins du viseur encadrent le titre entier : le bleu en haut à droite
   de la première ligne, le noir en bas à gauche de la seconde. */
.hero-title .coin-haut, .hero-title .coin-bas {
  position: relative; display: inline-block; padding: 0 .18em;
}
.hero-title .coin-haut { white-space: nowrap; }
.hero-title .coin-haut::after, .hero-title .coin-bas::after {
  content: ''; position: absolute; width: .42em; height: .42em; pointer-events: none;
  border: 4px solid var(--blue);
}
.hero-title .coin-haut::after { top: -.08em; right: -.14em; border-left: 0; border-bottom: 0; }
.hero-title .coin-bas::after {
  bottom: -.08em; left: -.14em; border-right: 0; border-top: 0; border-color: var(--ink);
}
.hero-sub {
  font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-soft);
  max-width: 560px; margin: 26px auto 34px;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* Sans sous-titre, les boutons suivent directement le titre : on leur redonne de l'air. */
.hero-title + .hero-actions { margin-top: clamp(38px, 6vw, 60px); }
/* Les deux portes d'entrée gratuites, visibles dès le premier écran. */
.hero-gratuit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 22px; font-size: 14.5px; color: var(--ink-soft); }
.hero-gratuit span { flex-basis: 100%; text-align: center; }
.hero-gratuit-lien {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1.5px solid var(--blue); color: var(--blue); font-weight: 600; text-decoration: none; background: #fff;
}
.hero-gratuit-lien::before { content: 'Offert'; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; background: var(--blue); color: #fff; padding: 2px 7px; border-radius: 999px; }
.hero-gratuit-lien:hover { background: var(--blue); color: #fff; }
.hero-gratuit-lien:hover::before { background: #fff; color: var(--blue); }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  max-width: 760px; margin: 0 auto;
}
.stat { text-align: center; padding: 26px 12px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat strong { font-family: var(--display); font-size: clamp(26px, 4vw, 38px); font-weight: 400; display: block; }
.stat span { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Sections ---------- */
.section { padding: clamp(56px, 9vh, 100px) clamp(20px, 5vw, 56px); max-width: var(--max); margin: 0 auto; }
.section-alt { background: var(--bg-alt); max-width: none; }
.section-alt > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 4.5vw, 44px);
  text-transform: uppercase; letter-spacing: .5px;
  text-align: center; line-height: 1.15;
}
.section-sub { text-align: center; color: var(--ink-soft); max-width: 540px; margin: 14px auto 0; }
/* En tête de section, l'eyebrow accompagne le titre : il se centre comme lui. */
.section > .eyebrow { text-align: center; }

/* ---------- Le terrain de jeu, en chiffres ---------- */
/* Deux lignes de trois : la grille reste pleine, sans carte orpheline. */
.chiffres {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 44px;
}
.chiffre {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; text-align: center;
}
.chiffre strong {
  display: block; font-family: var(--display); font-weight: 400; line-height: 1;
  font-size: clamp(32px, 4.6vw, 46px); letter-spacing: .5px;
}
.chiffre span {
  display: block; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-soft);
}
/* Les deux taux de match se répondent : c'est l'écart qui parle, on le montre. */
.chiffre-homme { border-color: var(--ink); }
.chiffre-homme strong { color: var(--ink); }
.chiffre-femme { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, #fff); }
.chiffre-femme strong { color: var(--blue); }
.chiffres-source {
  max-width: 780px; margin: 30px auto 0; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); text-align: center;
}

/* Relance sous les cartes du problème, avec son lien vers les conseils. */
/* Assez large pour que chacune des deux lignes tienne d'un seul tenant. */
.probleme-relance {
  max-width: 800px; margin: 34px auto 0; text-align: center;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.probleme-relance a, .section-lien-intro a {
  color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-weight: 500;
}
.probleme-relance a:hover, .section-lien-intro a:hover { color: var(--blue-dark); }

/* ---------- Cartes problème ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Coins de viseur (signature) ---------- */
.corners { position: relative; }
.corners::before, .corners::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.corners::before { top: -7px; right: -7px; border-top: 3.5px solid var(--blue); border-right: 3.5px solid var(--blue); }
.corners::after { bottom: -7px; left: -7px; border-bottom: 3.5px solid var(--ink); border-left: 3.5px solid var(--ink); }

/* ---------- Manifeste (l'âme) ---------- */
.manifeste { text-align: center; }
.manifeste .eyebrow { margin-bottom: 16px; }
.manifeste-text { max-width: 620px; font-size: clamp(15px, 2vw, 17px); }
.promesse {
  position: relative; max-width: 680px; margin: 38px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px clamp(22px, 4vw, 36px);
  font-size: clamp(16px, 2.2vw, 19px); font-weight: 500; line-height: 1.5;
  font-style: normal; color: var(--ink);
}

/* ---------- Bande preuves (pourquoi la photo compte) ---------- */
.preuves { background: var(--ink); color: var(--bg); padding: clamp(56px, 9vh, 100px) clamp(20px, 5vw, 56px); }
.preuves-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.preuves-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 4.2vw, 42px); line-height: 1.15; letter-spacing: .5px;
}
.preuves-sub { max-width: 600px; margin: 16px auto 0; font-size: 15.5px; color: color-mix(in srgb, var(--bg) 72%, transparent); }
.preuves-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 820px; margin: 46px auto 0; }
.preuve strong {
  display: block; font-family: var(--display); font-weight: 400; line-height: 1;
  font-size: clamp(40px, 7vw, 64px); color: color-mix(in srgb, var(--blue) 60%, #fff);
}
.preuve span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--bg) 68%, transparent); }
.preuves-source { max-width: 660px; margin: 38px auto 0; font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--bg) 52%, transparent); }

/* ---------- Avant / après ---------- */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px; margin-top: 46px; }
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.case-img { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #E7E7E2; }
.case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--bg); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
.tag-accent { background: var(--blue); color: #fff; }

/* ---------- Étapes ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; margin-top: 42px; }
.step { text-align: center; padding: 0 8px; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-family: var(--display); font-size: 20px;
  border: 2px solid var(--ink); margin-bottom: 14px;
}
.step:nth-child(2) .step-num { border-color: var(--blue); color: var(--blue); }
.step p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Offre limitée ---------- */
.offer {
  margin: 34px auto 0; max-width: 620px;
  border: 1.5px solid var(--blue); border-radius: var(--radius);
  background: color-mix(in srgb, var(--blue) 6%, #fff);
  padding: 18px 22px; text-align: center;
}
.offer-title { font-weight: 600; color: var(--blue-dark); font-size: 15px; letter-spacing: .3px; text-transform: uppercase; }
.offer-text { font-size: 14.5px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Tarifs ---------- */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; margin-top: 40px; max-width: 760px; margin-left: auto; margin-right: auto; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 14px;
}
.price-card h3 { font-size: 17px; font-weight: 600; }
.price { font-family: var(--display); font-size: 42px; font-weight: 400; }
.price-list { list-style: none; flex: 1; }
.price-list li { font-size: 14.5px; color: var(--ink-soft); padding: 7px 0 7px 24px; position: relative; border-bottom: 1px dashed var(--line); }
.price-list li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.price-card-featured { border: 1.5px solid var(--ink); }
/* Une seule carte : l'accompagnement, centré */
.pricing-solo { grid-template-columns: 1fr; max-width: 480px; }
/* Trois cartes côte à côte : ebook, audit, shooting. */
.pricing-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; align-items: stretch; }
.badge.badge-clair { background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--blue); }
.badge {
  align-self: flex-start; background: var(--blue); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 6px;
}

/* ---------- FAQ ---------- */
.faq { max-width: 680px; margin: 36px auto 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 15.5px;
  padding: 18px 4px; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; color: var(--blue); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 4px 18px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Formulaire ---------- */
.section-contact { max-width: 640px; }
.form { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.optional { color: var(--ink-soft); font-weight: 400; }
.form input, .form select, .form textarea {
  font-family: var(--body); font-size: 15px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-status { text-align: center; font-size: 14.5px; min-height: 22px; }
.form-status.ok { color: #0E7A4E; }
.form-status.err { color: #C0312B; }
.form-legal { text-align: center; font-size: 12.5px; color: var(--ink-soft); }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--ink-soft); line-height: 1.4; }
/* Case plus grande : sur téléphone, 13 px se rate au doigt. */
.form-consent input { width: 20px; height: 20px; margin-top: 0; flex-shrink: 0; accent-color: var(--blue); }
/* `.form label` empile ses enfants : la case de consentement, elle, reste en ligne. */
.form .form-consent { flex-direction: row; gap: 10px; font-size: 13px; font-weight: 400; }
.form-consent a { color: var(--blue); }

/* ---------- Section gratuite (audit + guide) ---------- */
.bonus { text-align: center; }
.bonus-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 880px; margin: 40px auto 0; }
.bonus-card { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; text-align: left; }
.bonus-card h3 { font-size: 18px; font-weight: 600; }
.bonus-card p { font-size: 14.5px; color: var(--ink-soft); flex: 1; }
.bonus-card .audit-points { margin: 0; flex: 1; }
.bonus-card .audit-points li { font-size: 14.5px; }
.guide-form { display: flex; flex-direction: column; gap: 10px; }
.guide-form input[type="text"], .guide-form input[type="email"] {
  font-family: var(--body); font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%;
}
.guide-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent); }
.guide-form .form-consent { font-size: 12.5px; text-align: left; }

/* ---------- Ebook : page d'atterrissage + encart de renvoi ---------- */
.ebook-landing { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(22px, 4vw, 40px); align-items: start; margin: 26px 0 10px; }
/* Couverture dessinée en CSS : les coins de viseur, comme sur le PDF. */
.ebook-cover {
  aspect-ratio: 210 / 297; max-width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 18px 40px -22px rgba(16, 17, 19, .45);
  display: flex; flex-direction: column; padding: 22% 14% 12%; gap: 10px;
}
.ebook-cover-titre { font-family: var(--display); text-transform: uppercase; font-size: clamp(26px, 4vw, 34px); line-height: .95; letter-spacing: .5px; }
.ebook-cover-sous { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.ebook-cover-marque { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--display); letter-spacing: 2px; font-size: 13px; }
.ebook-cover-marque .logo-by { font-size: 14px; margin: -2px 0 0 26px; }
.ebook-offre .liste-check { margin-top: 0; }
.ebook-offre .guide-form { max-width: 420px; }
.ebook-sommaire { padding-left: 1.4em; }
.article-body .ebook-sommaire li { padding: 4px 0 4px 4px; }
.article-body .ebook-sommaire li::before { content: none; }
.ebook-sommaire li::marker { color: var(--blue); font-weight: 600; }
.ebook-cta .guide-form { width: 100%; max-width: 420px; text-align: left; }
.ebook-cta-titre { font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; font-size: clamp(20px, 3vw, 24px); }
@media (max-width: 620px) {
  .ebook-landing { grid-template-columns: 1fr; }
  .ebook-cover { width: 180px; margin: 0 auto; }
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  text-align: center; padding: 44px 20px 36px;
}
.footer .logo-mark { width: 34px; height: 34px; margin-bottom: 10px; }
.footer-brand { font-family: var(--display); letter-spacing: 3px; font-size: 16px; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.footer-brand .logo-by { font-size: 16px; margin-top: 0; }
.footer-sign { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.footer-meta { color: var(--ink-soft); font-size: 12.5px; margin-top: 14px; }
.footer-meta a { color: var(--ink-soft); }
.footer-legal { margin-top: 10px; font-size: 13px; }
.footer-legal a { color: var(--ink-soft); }
.footer-zones { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); }
.footer-zones a { color: var(--ink-soft); }
.footer-pages { margin-top: 16px; font-size: 13px; line-height: 2; }
.footer-pages a { color: var(--ink-soft); text-decoration: none; }
.footer-pages a:hover { color: var(--blue); text-decoration: underline; }

/* ---------- Blog : liste ---------- */
.blog-head { text-align: center; padding-bottom: 8px; }
.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 10px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .15s ease; }
.post-card:hover { transform: translateY(-3px); }
.post-card-link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 26px 24px; text-decoration: none; color: var(--ink); }
.post-date { font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.post-title { font-size: 19px; font-weight: 600; line-height: 1.25; }
.post-resume { font-size: 14.5px; color: var(--ink-soft); flex: 1; }
.post-more { font-size: 14px; font-weight: 600; color: var(--ink); }
.post-card:hover .post-more { color: var(--blue); }
.post-empty { text-align: center; color: var(--ink-soft); }

/* ---------- Pages de contenu et articles ----------
   Le conteneur occupe toute la largeur utile ; seul le texte courant reste à une
   largeur de lecture confortable. Grilles, images et encarts prennent tout l'espace. */
.article { max-width: var(--max); }
.article > .crumbs,
.article > .article-date,
.article > .article-title,
.article > .article-lead,
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > h2,
.article-body > h3,
.article-body > blockquote { max-width: var(--lecture); }
/* Ce qui doit respirer sur toute la largeur. */
.article-body > .do-dont,
.article-body > .scenes,
.article-body > .gallery-grid,
.article > .article-suite,
.article > .article-cta { max-width: none; }
.article-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; margin-bottom: 22px; }
.article-back:hover { color: var(--blue); }
.article-date { margin-bottom: 12px; }
.article-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 5vw, 46px); line-height: 1.1; letter-spacing: .5px; }
.article-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-soft); margin-top: 18px; line-height: 1.5; }
.article-body { margin-top: 30px; }
.article-body h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 600; margin: 34px 0 12px; }
.article-body p { font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.article-body ul { list-style: none; margin: 0 0 16px; }
.article-body li { position: relative; font-size: 16px; line-height: 1.6; padding: 6px 0 6px 26px; }
.article-body li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 9px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
/* Les boutons gardent leurs propres couleurs : sans le :not(), un bouton plein devenait bleu sur bleu. */
.article-body a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 46px; padding: 30px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; }
.article-cta-text { max-width: 460px; font-size: clamp(16px, 2.2vw, 18px); font-weight: 500; }

/* ---------- Galerie ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); display: block; background: #E7E7E2; }
.gallery-item figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Ligne de réassurance sous le hero ---------- */
.hero-rassurance {
  margin-top: 22px; font-size: 13.5px; color: var(--ink-soft);
  letter-spacing: .3px;
}

/* ---------- Lien de fin de section ---------- */
.section-lien { text-align: center; margin-top: 36px; }
.section-lien-intro { display: block; margin-bottom: 14px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Scènes « vu de l'autre côté » ---------- */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.scene {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 16px;
}
.scene-tete { display: flex; align-items: center; gap: 13px; }
.scene-portrait {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--bg-alt); display: block;
}
/* Pas de portrait ? L'initiale tient la place, la scène reste lisible. */
.scene-mono {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 22px; color: var(--blue);
  border: 1px solid var(--line);
}
.scene-qui b { display: block; font-size: 15px; font-weight: 600; }
.scene-qui span {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 2px;
}
.scene-dit { margin: 0; padding-left: 16px; border-left: 3px solid var(--blue); flex: 1; }
.scene-titre { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.scene-dit p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.scene-corrige {
  background: var(--bg-alt); border-radius: 8px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.scene-corrige b {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--blue-dark);
}
.scene-corrige span { font-size: 13.5px; line-height: 1.5; }

/* Ces scènes sont des illustrations, pas de vrais avis : la mention le dit,
   discrètement, comme une note éditoriale. */
.mention-illustration {
  max-width: 720px; margin: 22px auto 0;
  font-size: 12.5px; line-height: 1.5; font-style: italic;
  color: color-mix(in srgb, var(--ink-soft) 78%, transparent);
  text-align: center;
}
.article-body .mention-illustration { text-align: left; margin: 20px 0 0; }

/* ---------- Les doutes, pris de face ---------- */
.doutes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.doute {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
/* Tous les doutes tiennent sur une seule ligne : c'est ce qui leur donne leur
   force, et ça garde les six cartes parfaitement alignées. Les garder courts
   (30 caractères maximum) est une contrainte de rédaction, pas de mise en page. */
.doute-dit {
  font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink);
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doute-rep { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }

/* ---------- Ce que je sais faire (autorité) ---------- */
/* Deux colonnes plutôt que quatre : les titres tiennent sur une ligne et les
   textes restent lisibles au lieu d'être compressés en colonnes étroites. */
.savoirs {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-top: 42px; counter-reset: savoir;
}
.savoir {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.savoir h3 {
  font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 10px;
  display: flex; gap: 10px; align-items: baseline;
}
.savoir h3::before {
  counter-increment: savoir; content: counter(savoir, decimal-leading-zero);
  font-family: var(--display); font-size: 15px; color: var(--blue); flex-shrink: 0;
}
.savoir p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; }
.savoirs-note {
  max-width: 620px; margin: 30px auto 0; text-align: center;
  font-size: 14px; color: var(--ink-soft); font-style: italic;
}

/* ---------- Qui parle ---------- */
/* Sans portrait : une colonne centrée. Avec portrait : photo à gauche, texte à droite. */
.fondateur { max-width: 680px; margin: 0 auto; text-align: center; }
.fondateur .liste-check { display: inline-block; text-align: left; }
.fondateur:has(.fondateur-photo) {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: start; max-width: none; text-align: left;
}
.fondateur:has(.fondateur-photo) .liste-check { display: block; }
.fondateur-photo { position: relative; }
.fondateur-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius); display: block; background: var(--bg-alt);
}
.fondateur-titre {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 3.6vw, 34px); line-height: 1.12; letter-spacing: .5px;
  margin-bottom: 18px;
}
.fondateur-texte p { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; text-align: justify; hyphens: auto; }
.fondateur-texte .eyebrow { margin-bottom: 14px; }
/* Le petit titre est un <p> : sans ça, la justification des paragraphes le cale à gauche. */
.fondateur:not(:has(.fondateur-photo)) .fondateur-texte .eyebrow { text-align: center; }

/* Liste à coches, réutilisable */
.liste-check { list-style: none; margin: 22px 0; }
.liste-check li {
  position: relative; font-size: 14.5px; line-height: 1.55;
  padding: 8px 0 8px 26px; border-bottom: 1px dashed var(--line);
}
.liste-check li::before {
  content: ''; position: absolute; left: 2px; top: 16px; width: 9px; height: 5px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}

/* ---------- Cartes sur table (garantie honnête) ---------- */
.cartes-table { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 42px; }
.cartes-table > article {
  background: #fff; border: 1px solid var(--line); border-top-width: 4px;
  border-radius: var(--radius); padding: 26px 24px;
}
.carte-oui { border-top-color: var(--ok); }
.carte-non { border-top-color: var(--ko); }
.cartes-table h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; margin-bottom: 16px;
}
.carte-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  font-size: 13px; color: #fff;
}
.carte-oui .carte-pastille { background: var(--ok); }
.carte-non .carte-pastille { background: var(--ko); }
.cartes-table ul { list-style: none; }
.cartes-table li {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
  padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.cartes-table li:last-child { border-bottom: 0; }
.cartes-note {
  max-width: 660px; margin: 28px auto 0; text-align: center;
  font-size: 14px; color: var(--ink-soft);
}

/* ---------- L'accompagnement en 4 temps ---------- */
.temps {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px; margin-top: 44px; counter-reset: temps;
}
.temps-etape {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 46px 22px 24px;
}
.temps-etape::before {
  counter-increment: temps; content: counter(temps);
  position: absolute; top: 20px; left: 22px;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 16px;
  border: 2px solid var(--ink); color: var(--ink);
}
/* Le point à 30 jours est ce qui distingue un accompagnement d'une prestation. */
.temps-bonus { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 4%, #fff); }
.temps-bonus::before { border-color: var(--blue); color: var(--blue); }
.temps-quand {
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 8px;
}
.temps-etape h3 { font-size: 16px; font-weight: 600; line-height: 1.35; margin-bottom: 10px; }
.temps-etape p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.temps-note {
  max-width: 620px; margin: 30px auto 0; text-align: center;
  font-size: 14.5px; font-weight: 500;
}

/* ---------- Accessibilité ---------- */
/* Lien d'évitement : invisible jusqu'à ce qu'on l'atteigne au clavier. */
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 100;
  background: var(--ink); color: var(--bg); text-decoration: none;
  padding: 10px 18px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Un contour net et visible partout où le clavier passe. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px;
}

/* ---------- Fil d'Ariane ---------- */
.crumbs { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; display: inline-block; padding: 8px 0; }
.crumbs a:hover { color: var(--blue); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); font-weight: 500; }
.crumb-sep { margin: 0 8px; color: var(--line); }
.blog-head .crumbs { text-align: center; }

/* ---------- À faire / à éviter ---------- */
/* Les deux camps l'un sous l'autre, chacun en grille de 3 photos. */
.do-dont { display: grid; grid-template-columns: 1fr; gap: clamp(34px, 5vw, 56px); margin-top: 40px; }
.dd-col { min-width: 0; }
.dd-head { text-align: center; margin-bottom: 18px; }
.dd-badge {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 16px; border-radius: 20px; color: #fff;
}
.dd-do .dd-badge { background: var(--ok); }
.dd-dont .dd-badge { background: var(--ko); }
/* 3 photos par ligne, à la taille réduite (grille resserrée et centrée) : avec 6 photos
   par camp, deux lignes pleines, donc le même nombre de photos sur chaque ligne. */
.dd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 18px); max-width: 880px; margin-inline: auto; }
.dd-item {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-top: 4px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.dd-do .dd-item { border-top-color: var(--ok); }
.dd-dont .dd-item { border-top-color: var(--ko); }
.dd-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #E7E7E2; }
.dd-item figcaption { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.dd-item figcaption b { font-size: 14px; font-weight: 600; line-height: 1.35; }
.dd-item figcaption span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.dd-empty { color: var(--ink-soft); font-size: 14.5px; text-align: center; padding: 20px 0; }
.dd-more { text-align: center; margin-top: 36px; }
/* Sur la page dédiée, les colonnes sont plus denses. */
.article-body .do-dont { margin: 34px 0 40px; }
.article-body .dd-item figcaption b { margin: 0; }

/* ---------- Maillage interne ---------- */
.article-suite {
  margin-top: 46px; padding: 26px 28px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.article-suite h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.suite-list { list-style: none; margin: 0; }
.suite-list li { padding: 7px 0 7px 22px; position: relative; border-bottom: 1px dashed var(--line); }
.suite-list li::before {
  content: ''; position: absolute; left: 2px; top: 15px; width: 8px; height: 5px;
  border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg);
}
.suite-list a { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.suite-list a:hover { color: var(--blue); }
.suite-more { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.suite-more a, .blog-more a, .gallery-more a, .ville-liens a { color: var(--blue); }
.blog-more, .gallery-more { text-align: center; margin-top: 34px; font-size: 14.5px; color: var(--ink-soft); }
.ville-liens { font-size: 15px; color: var(--ink-soft); margin-top: 16px; }

/* ---------- Retour en haut ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  border: none; cursor: pointer; font-size: 19px; line-height: 1;
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.to-top.show { opacity: 1; transform: none; }
.to-top:hover { background: var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  /* Le menu se déploie sous l'en-tête, en pleine largeur. */
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 12px clamp(20px, 5vw, 56px) 20px;
    box-shadow: 0 18px 30px -22px rgba(16, 17, 19, .45);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav .nav-cta { margin-top: 12px; text-align: center; border-bottom: 0; }
}

/* --- Tablette : on passe de trois ou quatre colonnes à deux --- */
@media (max-width: 1040px) {
  .cards, .doutes, .scenes, .chiffres, .temps { grid-template-columns: repeat(2, 1fr); }
  .savoirs { grid-template-columns: 1fr; }
}

/* --- Tablette en portrait : le portrait du fondateur passe au-dessus --- */
@media (max-width: 820px) {
  .fondateur:has(.fondateur-photo) { grid-template-columns: 1fr; }
  .fondateur-photo { max-width: 260px; margin: 0 auto 10px; }
}

/* --- Mobile : tout s'empile --- */
@media (max-width: 720px) {
  .cards, .doutes, .scenes, .temps,
  .preuves-grid, .bonus-cards, .do-dont, .cartes-table, .pricing {
    grid-template-columns: 1fr;
  }
  /* Ce qui est court tient à deux par ligne : la page reste moins longue à faire défiler. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .chiffre { padding: 20px 12px; }
  .chiffre span { font-size: 13px; }
  .cards { gap: 12px; }
  .card { padding: 20px 18px; }
  .form-row { grid-template-columns: 1fr; }
  .case { gap: 12px; }
  .preuves-grid { gap: 30px; }
  .do-dont { gap: 34px; }
  .dd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .to-top { right: 14px; bottom: 14px; }
  /* Sur mobile la largeur de lecture n'a plus lieu d'être : on prend tout. */
  .article > *, .article-body > * { max-width: none; }
}

/* ---------- Pages de vente (les codes des applis) ----------
   Des blocs courts qui s'enchaînent, pensés d'abord pour le téléphone.
   Les sélecteurs passent par .article-body pour neutraliser le style « article »
   (coches devant les listes, largeur de lecture, titres d'article). */
.article-body .m-page { display: grid; gap: clamp(44px, 8vw, 80px); max-width: 920px; }
.article-body .m-page > * { max-width: none; min-width: 0; }
.c-onglets, .c-tablist { min-width: 0; max-width: 100%; }
.article-body .m-bloc h2, .article-body .m-final h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px;
  font-size: clamp(24px, 4.6vw, 34px); line-height: 1.08; margin: 0 0 22px; text-wrap: balance;
}
.article-body .m-hero .article-lead { margin-top: 0; }
.m-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.m-reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.m-repere { text-align: center; padding: 18px 6px; }
.m-repere + .m-repere { border-left: 1px solid var(--line); }
.m-repere strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 5vw, 36px); line-height: 1.1; }
.m-repere span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.35; margin-top: 4px; }

/* Les étapes : une frise verticale, numérotée (c'est un vrai déroulé dans le temps). */
.article-body .m-etapes { list-style: none; margin: 0; padding: 0; }
.article-body .m-etapes li { padding: 0 0 28px; font-size: inherit; }
.article-body .m-etapes li::before { content: none; }
.m-etape { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; position: relative; }
.m-etape:not(:last-child)::after { content: ''; position: absolute; left: 21px; top: 50px; bottom: 6px; width: 2px; background: var(--line); }
.m-etape-num { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 20px; }
.article-body .m-etape-quand { font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); font-weight: 600; margin: 2px 0 2px; }
.article-body .m-etape h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.article-body .m-etape-corps p:last-child { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.m-inclus { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 38px); }
.article-body .m-inclus .liste-check { margin: 0 0 22px; }

.m-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.m-photos figure { margin: 0; }
.m-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; display: block; background: var(--bg-alt); }
.m-photos figcaption { font-size: 13px; line-height: 1.35; color: var(--ink-soft); margin-top: 6px; }
.article-body .m-lien { margin: 16px 0 0; font-size: 15px; }

.article-body .m-pas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.article-body .m-pas li { background: var(--bg-alt); border-radius: var(--radius); padding: 16px 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.article-body .m-pas li::before { content: none; }
.m-pas li b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

.m-final { background: var(--ink); color: #fff; border-radius: var(--radius); padding: clamp(30px, 6vw, 52px) clamp(20px, 5vw, 48px); text-align: center; }
.article-body .m-final h2 { color: #fff; }
.article-body .m-final p { color: rgba(255, 255, 255, .78); max-width: 520px; margin: 0 auto; }
.m-final .m-actions { justify-content: center; }
.btn-ghost-clair { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-ghost-clair:hover { background: #fff; color: var(--ink); }

/* Barre « Réserver » collée en bas de l'écran, sur téléphone seulement,
   affichée quand les boutons du haut ne sont plus visibles (public/script.js). */
.m-sticky { display: none; }
@media (max-width: 720px) {
  .m-sticky:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .m-sticky .btn { display: block; width: 100%; text-align: center; }
  body.sticky-on .to-top { bottom: 86px; }
  .m-actions .btn { flex: 1 1 100%; text-align: center; }
  .article-body .m-pas { grid-template-columns: 1fr; }
  .m-photos { gap: 8px; }
  .m-photos figcaption { font-size: 12.5px; }
}

/* Page de vente centrée (classe « page-vente » posée par sendPage). */
.page-vente > .crumbs, .page-vente > .article-title { text-align: center; }
.page-vente .article-title { text-wrap: balance; }
.page-vente .article-body .m-page { margin-inline: auto; }
.page-vente .m-hero, .page-vente .m-bloc > h2 { text-align: center; }
.page-vente .m-hero .article-lead { max-width: 640px; margin-inline: auto; }
.page-vente .m-actions { justify-content: center; }

/* Les codes : règles communes en cartes */
.c-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.c-carte { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.article-body .c-carte h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.article-body .c-carte p { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* Onglets par appli (public/script.js) ; sans JavaScript, tous les panneaux restent visibles. */
.c-tablist { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.c-tablist button {
  font: inherit; font-weight: 600; font-size: 15px; padding: 10px 20px; min-height: 44px;
  border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
}
.c-tablist button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.c-tablist button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.c-onglets:not(.js-onglets) .c-tablist { display: none; }
.c-panneau { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 34px); max-width: 760px; margin: 0 auto 14px; }
.js-onglets .c-panneau-titre { display: none; }
.article-body .c-panneau-titre { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 22px; margin: 0 0 8px; }
.article-body .c-accroche { font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0 0 16px; }
.article-body .c-panneau .liste-check { margin: 0 0 16px; }
.article-body .c-erreur { margin: 0; padding: 12px 16px; border-left: 3px solid var(--ko); background: color-mix(in srgb, var(--ko) 7%, #fff); border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.5; }
.c-erreur b { display: block; color: var(--ko); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2px; }

/* L'ordre des photos : un vrai ordre, donc numéroté. */
.article-body .c-ordre { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.article-body .c-ordre li { padding: 18px; font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.article-body .c-ordre li::before { content: none; }
.c-ordre-num { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 18px; }
.c-ordre-item b { display: block; font-size: 16px; margin-top: 8px; }
.article-body .c-ordre-item p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* Les erreurs : croix rouges au lieu des coches. */
.article-body .c-erreurs { list-style: none; margin: 0 0 18px; padding: 0; }
.article-body .c-erreurs li { padding: 10px 0 10px 30px; border-bottom: 1px dashed var(--line); font-size: 15.5px; line-height: 1.5; }
.article-body .c-erreurs li::before { content: '✕'; border: 0; transform: none; width: auto; height: auto; top: 10px; left: 2px; color: var(--ko); font-weight: 700; }
.article-body .c-erreurs-suite { margin: 0; font-size: 15px; }

@media (max-width: 720px) {
  .c-cartes, .article-body .c-ordre { grid-template-columns: 1fr; }
  .c-tablist { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .c-tablist button { flex: 0 0 auto; }
}

@media (max-width: 960px) {
  .pricing-trio { grid-template-columns: 1fr; max-width: 520px; }
}

/* Section « Les tarifs » : n'existe que si data/offres.json a « afficher » à true. */
.price small { font-family: var(--body); font-size: 15px; color: var(--ink-soft); margin-left: 4px; }
.price-accroche { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.paliers { width: 100%; border-collapse: collapse; font-size: 14px; }
.paliers td { padding: 8px 4px; border-bottom: 1px dashed var(--line); }
.paliers td:last-child { text-align: right; color: var(--blue); font-weight: 600; }