/* =============================================================
   OMES Avocats — Base + composants partagés
   ============================================================= */

/* ---------- Reset / base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* La navigation est collante : on décale les ancres pour que le
     titre visé ne se retrouve pas caché dessous. */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Lien d'évitement pour la navigation clavier / lecteur d'écran */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-5); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--space-5); }
.section { padding: var(--space-9) var(--space-5); }

.section-head { max-width: 640px; margin: 0 auto var(--space-7); text-align: center; }
.section-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.01em;
  margin: 0 0 14px; color: var(--ink); line-height: 1.15;
}
.section-head p { color: var(--grey); font-size: 15.5px; margin: 0; }

.eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta);
  margin-bottom: 14px;
}

/* ---------- Boutons --------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 15px 28px; border-radius: 12px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: var(--terracotta); }

.btn-brand { background: var(--brand); color: var(--white); }
.btn-brand:hover { background: var(--brand-deep); }

.btn-emerald { background: var(--emerald); color: var(--white); }
.btn-emerald:hover { background: var(--emerald-deep); }

.btn-secondary {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.btn-secondary:hover { border-color: var(--white); }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--hairline-2);
}
.btn-ghost:hover { border-color: var(--ink); }

/* Troisième action de la fiche de diagnostic, sur fond sombre : le
   corail de la marque, mais en contour plutôt qu'en aplat. On lit tout
   de suite un bouton, sans ajouter une troisième couleur pleine à la
   rangée — s'informer n'est ni prendre rendez-vous ni payer.

   Le trait est un box-shadow intérieur et non une bordure : une
   bordure ajouterait trois pixels de hauteur et ce bouton dépasserait
   ses deux voisins. Là, il reste exactement à leur taille. */
.btn-brand-outline {
  background: transparent; color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.btn-brand-outline:hover { background: var(--brand); color: var(--white); }

.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Navigation ------------------------------------ */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 241, 234, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .badge {
  width: 36px; height: 36px; border-radius: 10px; background: var(--brand);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.brand .badge svg { width: 19px; }

/* Lockup du wordmark : « Omes » puis « Avocats » dessous, conformément
   à la charte (Garamond italique corail, ~58 % de la taille du nom). */
.brand-text { display: flex; flex-direction: column; }
.brand-word {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--ink); line-height: 1.05;
}
.brand-sub {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  font-size: 11.5px; color: var(--brand); line-height: 1.2; letter-spacing: 0.02em;
}

/* Les liens ne se coupent jamais en deux lignes, et l'écart entre eux
   se resserre avant que la barre ne déborde. En dessous de 980 px, il
   n'y a plus la place pour cinq liens : on bascule sur le menu. */
.nav-links { display: none; gap: clamp(16px, 2.2vw, 32px); font-size: 14.5px; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--ink); opacity: 0.75; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
@media (min-width: 980px) { .nav-links { display: flex; } }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cta {
  background: var(--ink); color: var(--white); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: 10px; white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.nav-cta:hover { background: var(--terracotta); }

.menu-btn { display: flex; flex-direction: column; background: none; border: none; padding: 8px; cursor: pointer; }
@media (min-width: 980px) { .menu-btn { display: none; } }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 3px 0; border-radius: 2px; }

.mobile-menu { display: none; flex-direction: column; padding: 6px var(--space-5) 18px; }
.mobile-menu.open { display: flex; }
.mobile-menu a {
  text-decoration: none; color: var(--ink); font-size: 15px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
}
@media (min-width: 980px) { .mobile-menu { display: none !important; } }

/* ---------- Hero ------------------------------------------ */
.hero {
  background: var(--brand); color: var(--white);
  padding: var(--space-8) var(--space-5) 76px;
  position: relative; overflow: hidden;
}
.hero-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-mark { width: 100px; height: 100px; margin-bottom: 28px; }
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.85); font-size: 14px; letter-spacing: 0.26em;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 800; color: var(--white);
  font-size: clamp(32px, 6vw, 58px); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 820px; margin: 0 0 22px;
}
.hero p.lede {
  font-size: clamp(15px, 2vw, 18px); color: rgba(255, 255, 255, 0.88);
  max-width: 560px; margin: 0 0 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Bandeau citation ------------------------------ */
.quote-strip { background: var(--ink); color: var(--cream); padding: 44px var(--space-5); }
.quote-strip .wrap { text-align: center; }
.quote-strip blockquote { margin: 0; }
.quote-strip p {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.6vw, 26px); max-width: 680px; margin: 0 auto; color: var(--brand);
  line-height: 1.45;
}
.quote-strip cite {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 241, 234, 0.5);
}
/* L'arche prend la couleur du texte voisin via currentColor : si le
   corail de marque change dans tokens.css, elle suit sans retouche. */
/* En fin de phrase : dimensionnée en em, donc toujours à l'échelle du
   texte, et colorée par currentColor, donc toujours à sa couleur. */
.quote-strip .quote-mark {
  display: inline-block; width: 1.3em; height: 1.3em;
  vertical-align: -0.3em; margin-left: 0.15em;
  color: var(--brand);
}

/* Le second membre de la devise : exactement la même écriture que le
   premier — Garamond italique corail, même taille —, pour que les deux
   lignes se lisent d'une traite. */
.quote-strip .quote-answer {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.6vw, 26px); line-height: 1.45; color: var(--brand);
  margin: 12px auto 0; max-width: 680px;
}

/* ---------- Bandeau diagnostic (accroche) ----------------- */
.diag-band { background: var(--white); }
.diag-band .wrap {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center;
}
@media (min-width: 900px) {
  .diag-band .wrap { grid-template-columns: 1fr 0.85fr; gap: var(--space-8); }
}
.diag-band h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.01em; margin: 0 0 16px; line-height: 1.15;
}
.diag-band p { color: var(--grey); font-size: 16px; margin: 0 0 20px; }
/* Le titre est suivi directement de la liste : on rétablit l'air que
   le paragraphe d'introduction apportait auparavant. */
.diag-band h2 { margin-bottom: 24px; }
.diag-points { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.diag-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.diag-points .tick {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-wash); color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  margin-top: 1px;
}
/* Décollée du bouton pour qu'elle se lise comme une note de bas de bloc
   et non comme un sous-titre du bouton d'action.
   Sélecteur à deux classes : sinon `.diag-band p` ci-dessus, plus
   spécifique, écraserait la marge. */
.diag-band .diag-note {
  font-size: 13px; color: var(--grey); line-height: 1.65;
  margin: 30px 0 0; max-width: 46em;
}
.diag-band .diag-note a { color: var(--brand-deep); font-weight: 600; }

/* carte d'illustration du diagnostic */
.diag-preview {
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: var(--space-5);
  box-shadow: var(--shadow-lg);
}
.diag-preview .pv-progress {
  height: 5px; border-radius: 3px; background: var(--hairline-2); overflow: hidden; margin-bottom: 20px;
}
/* La barre suit l'étape affichée ci-dessous : 6e question sur 7. */
.diag-preview .pv-progress span { display: block; height: 100%; width: 72%; background: var(--brand); border-radius: 3px; }
.diag-preview .pv-step {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px;
}
.diag-preview .pv-q {
  font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 10px; line-height: 1.35;
}
/* Reprend la phrase d'aide du vrai diagnostic, en plus discret. */
.diag-preview .pv-help {
  font-size: 12.5px; line-height: 1.55; color: var(--grey); margin: 0 0 18px;
}
.diag-preview .pv-opt {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 9px;
}
.diag-preview .pv-opt.sel { border-color: var(--brand); background: var(--brand-wash-2); font-weight: 600; }

/* ---------- Fondateur ------------------------------------- */
.founder-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
  max-width: 900px; margin: 0 auto; align-items: center;
}
@media (min-width: 760px) { .founder-grid { grid-template-columns: 200px 1fr; gap: var(--space-7); } }
.founder-portrait {
  width: 200px; height: 200px; border-radius: var(--radius-xl); background: var(--cream);
  border: 1px solid rgba(28, 24, 21, 0.08);
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
  overflow: hidden;
}
.founder-portrait svg { width: 70px; }
/* Le fichier est déjà recadré au carré sur le visage (voir README),
   il n'y a donc pas de recadrage à faire ici. */
.founder-portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.founder-text h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 28px);
  margin: 6px 0 8px; color: var(--ink);
}
.founder-text p { font-size: 14.5px; color: var(--grey); line-height: 1.75; margin: 0; }
/* Placé après `.founder-text p` : cette règle est moins spécifique,
   elle doit donc venir ensuite pour que sa marge basse s'applique. */
.founder-text .founder-lede {
  font-family: var(--font-serif); font-style: italic; font-weight: 600;
  color: var(--brand-deep); font-size: 18px; line-height: 1.45; margin: 0 0 16px;
}
/* Même traitement que les autres surtitres de section (Outfit, capitales,
   interlettré), mais centré au-dessus du bloc de texte. */
.founder-text .eyebrow { text-align: center; }
@media (max-width: 759px) {
  .founder-text { text-align: center; }
  .founder-text .eyebrow { text-align: center; }
}

/* ---------- Prise de rendez-vous -------------------------- */
.rdv-shell { max-width: 900px; margin: 0 auto; }

.rdv-formats { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: var(--space-5); }
@media (min-width: 620px) { .rdv-formats { grid-template-columns: 1fr 1fr; } }
.rdv-formats[hidden] { display: none; }

.rdv-format {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  background: var(--white); border: 1.5px solid var(--hairline);
  border-radius: var(--radius-md); padding: 18px 20px; cursor: pointer;
  font-family: var(--font-body); color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rdv-format:hover { border-color: var(--brand); }
.rdv-format.is-active { border-color: var(--brand); background: var(--brand-wash-2); }
.rdv-format[hidden] { display: none; }
.rf-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-wash); color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center;
}
.rf-icon svg { width: 20px; height: 20px; }
.rf-titre { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; }
.rf-sous { display: block; font-size: 13px; color: var(--grey); margin-top: 3px; line-height: 1.5; }

/* Conteneur de l'agenda intégré */
.rdv-cal {
  min-height: 620px; width: 100%; overflow: auto;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.rdv-cal[hidden] { display: none; }

.rdv-repli {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5); text-align: center;
}
.rdv-repli[hidden] { display: none; }
.rdv-repli h3 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3vw, 26px);
  margin: 0 0 12px; color: var(--ink);
}
.rdv-repli p { color: var(--grey); font-size: 15px; max-width: 480px; margin: 0 auto var(--space-5); line-height: 1.7; }

.rdv-note { font-size: 13px; color: var(--grey); text-align: center; margin: var(--space-5) 0 0; line-height: 1.7; }
.rdv-note a { color: var(--brand-deep); font-weight: 600; }

/* Mention d'offre sous une prestation payante : on garde le prix
   affiché, pour que la gratuité se lise comme une faveur passagère
   et non comme le tarif habituel. */
.pc-offre {
  display: block; font-style: normal; font-family: var(--font-display);
  font-weight: 600; font-size: 12.5px; color: var(--emerald-deep);
  margin-top: 3px;
}

/* ---------- Invitation à réserver sur Cal.com ------------- */
/* Le site ne charge aucun agenda : il invite, et la réservation se
   déroule ailleurs. Cette carte remplace donc l'agenda intégré. */
.rdv-invite {
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5);
  text-align: center;
}
.rdv-invite h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 3.4vw, 28px); margin: 0 0 12px; line-height: 1.25;
}
.rdv-invite > p {
  font-size: 15.5px; color: var(--ink); line-height: 1.7;
  max-width: 560px; margin: 0 auto var(--space-5);
}
.rdv-offre {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--emerald-deep); background: rgba(27, 122, 90, 0.10);
  padding: 7px 15px; border-radius: 999px; margin: 0 0 var(--space-4);
}
.rdv-tiers {
  font-size: 13px; color: var(--grey); line-height: 1.7;
  max-width: 520px; margin: var(--space-5) auto 0;
}

/* ---------- Avis Google ----------------------------------- */
.reviews { max-width: 900px; margin: var(--space-8) auto 0; }
.reviews[hidden] { display: none; }

.reviews-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: var(--space-5);
}
.reviews-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rs-note {
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1;
}
.rs-stars { letter-spacing: 0.06em; }
.rs-stars .star, .rc-stars .star { color: var(--hairline-2); font-size: 15px; }
.rs-stars .star.on, .rc-stars .star.on { color: var(--brand); }
.rs-count { font-size: 13.5px; color: var(--grey); }

.reviews-actions { display: flex; align-items: center; gap: 8px; }
.rev-arrow {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--white); border: 1px solid var(--hairline-2); color: var(--ink);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rev-arrow:hover { border-color: var(--brand); background: var(--brand-wash-2); }
.rev-arrow[hidden] { display: none; }
.reviews-link {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--brand-deep); text-decoration: none; margin-left: 6px; white-space: nowrap;
}
.reviews-link:hover { text-decoration: underline; }
.reviews-link[hidden] { display: none; }

/* Piste défilante : scroll natif + accroche, donc utilisable au
   doigt, à la molette et au clavier même si le script est absent. */
.reviews-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: none; -ms-overflow-style: none;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 clamp(260px, 78vw, 320px); scroll-snap-align: start;
  background: var(--white); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: 24px 22px;
  display: flex; flex-direction: column;
}
.rc-stars { margin-bottom: 12px; letter-spacing: 0.06em; }
/* Les avis les plus longs sont tronqués visuellement — le texte
   intégral reste dans la page, et la fiche Google donne la version
   complète. Aucun avis n'est réécrit ni raccourci à la source. */
.rc-text {
  font-size: 14px; color: var(--ink); line-height: 1.7; margin: 0 0 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9;
  overflow: hidden;
}
.rc-meta { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rc-author { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.rc-date { font-size: 12px; color: var(--grey); }

/* ---------- Cartes / services ----------------------------- */
/* Six cartes en 3 × 2 sur grand écran. En dessous de 1000 px, trois
   colonnes rendraient les cartes trop étroites : on repasse à deux,
   puis à une seule sur mobile. */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 680px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  background: var(--white); border-radius: var(--radius-md); padding: 32px 26px;
  border: 1px solid var(--hairline);
  display: flex; flex-direction: column;
}
/* Filet de sécurité sous la grille : personne ne doit rester sans porte. */
.grid-note {
  max-width: 1080px; margin: 26px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.65; color: var(--grey);
}
.grid-note a {
  color: var(--brand-deep); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(180, 87, 60, 0.32); white-space: nowrap;
}
.grid-note a:hover { border-bottom-color: var(--brand-deep); }
.case-num {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 14px;
}
.service-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 16.5px;
  margin: 0 0 10px; color: var(--ink); line-height: 1.4;
}
.service-card p { font-size: 13.5px; color: var(--grey); margin: 0 0 16px; line-height: 1.65; }
.service-card .card-link {
  margin-top: auto; font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--brand-deep); text-decoration: none;
}
.service-card .card-link:hover { text-decoration: underline; }

/* ---------- Honoraires ------------------------------------ */
.pricing { background: var(--white); }
.pricing-intro { max-width: 720px; margin: 0 auto var(--space-7); text-align: center; }
.pricing-intro p { color: var(--grey); font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.pricing-intro p:last-child { margin-bottom: 0; }
.pricing-intro strong { color: var(--ink); font-weight: 600; }

.pricing-card {
  max-width: 640px; margin: 0 auto;
  background: var(--cream); border: 1px solid var(--hairline);
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-lg);
}

.pc-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding-bottom: var(--space-5); border-bottom: 1px solid var(--hairline-2);
}
.pc-kicker {
  font-family: var(--font-display); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: 8px;
}
.pc-head h3 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 28px);
  margin: 0; color: var(--ink); letter-spacing: -0.01em;
}
/* L'arche referme le titre du forfait, comme elle referme la citation
   du bandeau : même traitement, à la taille de la ligne. */
.pc-head .pc-mark {
  display: inline-block; width: 1.15em; height: 1.15em;
  vertical-align: -0.24em; margin-left: 0.18em;
  color: var(--brand);
}
.pc-price { display: flex; align-items: baseline; gap: 7px; }
.pc-amount {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 5vw, 40px);
  color: var(--ink); letter-spacing: -0.02em; line-height: 1;
}
.pc-ttc { font-size: 12.5px; font-weight: 600; color: var(--grey); }

.pc-list { list-style: none; padding: 0; margin: 0; }
.pc-list li { border-bottom: 1px solid var(--hairline); }
.pc-list li:last-child { border-bottom: none; }

.pc-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; font-size: 14.5px; line-height: 1.5;
}
.pc-label { flex: 1; color: var(--ink); }
.pc-tag {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  color: var(--grey); white-space: nowrap;
}
.pc-cost { color: var(--ink); font-size: 14px; }

/* pastille des prestations incluses */
.pc-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.pc-check.is-fixed { background: var(--brand); color: var(--white); }

.pc-included { padding-top: var(--space-3); }

/* Les prestations optionnelles sont purement informatives : pas de
   sélection, seulement le prix qui s'ajouterait le cas échéant. */
.pc-optional .pc-label { color: var(--grey); }
.pc-optional .pc-cost { color: var(--brand-deep); }

.pc-extras { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--hairline-2); }
.pc-extras h4 {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  margin: 0 0 6px; color: var(--ink);
}
.pc-extras-note { font-size: 13px; color: var(--grey); margin: 0 0 var(--space-3); }

/* Une majoration qui ne dépend pas du déroulement de la procédure, mais
   du titre demandé. Elle ne pouvait pas rejoindre les prestations
   supplémentaires, dont la note promet qu'elles ne sont facturées
   qu'avec l'accord du client : celle-ci ne se refuse pas. D'où un bloc
   à part, sobre, ouvert par un « Si » pour que le lecteur non concerné
   s'arrête à la première ligne. */
.pc-cas {
  margin-top: var(--space-4); padding: 14px 16px;
  background: var(--cream); border-radius: var(--radius-sm);
}
.pc-cas p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--grey); }
.pc-cas strong { color: var(--ink); font-weight: 600; }

/* Le lien du forfait majoré : sur sa propre ligne, à la couleur du
   cabinet, mais sans l'allure d'un bouton — l'action principale de la
   carte reste le forfait de base. */
.pc-cas a {
  display: inline-block; margin-top: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--brand-deep); text-decoration: none;
  border-bottom: 1px solid rgba(227, 130, 104, 0.4); padding-bottom: 1px;
}
.pc-cas a:hover { border-bottom-color: var(--brand-deep); }

/* Deux actions de même poids, centrées sous la carte. Elles s'empilent
   d'elles-mêmes quand la largeur ne permet plus de les mettre côte à côte. */
.pc-actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: var(--space-6);
}
.pc-actions .btn { flex: 1 1 220px; max-width: 280px; padding-left: 16px; padding-right: 16px; }
.pc-note { font-size: 12.5px; color: var(--grey); text-align: center; margin: 14px 0 0; }

/* ---------- Comment ça marche ----------------------------- */
.how { background: var(--white); }
.how-grid { display: grid; grid-template-columns: 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; align-items: center; }
@media (min-width: 900px) { .how-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.steps { display: flex; flex-direction: column; gap: 28px; }
.step { display: flex; gap: 18px; }
.step .num {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--brand-deep); background: var(--brand-wash);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0 0 5px; }
.step p { font-size: 14px; color: var(--grey); margin: 0; }

/* Étapes annoncées mais pas encore ouvertes. Pastille et mention portent
   le même vert que le bouton « Commencer une procédure » : c'est vers
   cette action que les deux étapes conduiront une fois ouvertes, et la
   couleur le dit avant les mots.
   À retirer, avec les deux « step-a-venir » du HTML et les mentions
   qu'ils portent, le jour où l'application ouvre. */
.step-a-venir .num { background: var(--emerald); color: var(--white); }
.step-soon {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--emerald); white-space: nowrap;
}

/* maquette plateforme */
.mockup {
  background: var(--cream); border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(28, 24, 21, 0.08); box-shadow: var(--shadow-lg);
}
.mockup-top {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  background: var(--white); border-bottom: 1px solid var(--hairline);
}
.mockup-top .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(28, 24, 21, 0.15); }
.mockup-body { padding: 22px; }
.mockup-row {
  background: var(--white); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; font-size: 12.5px;
}
.mockup-row:last-child { margin-bottom: 0; }
.mockup-main { flex: 1; min-width: 0; }
/* La colonne prend toute la hauteur de la ligne : la pastille reste
   en haut et le pourcentage descend au niveau de la barre
   d'avancement, sur laquelle il se cale visuellement. */
.mockup-side {
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 6px;
  flex-shrink: 0; align-self: stretch;
}
.mockup-row .status {
  font-size: 10px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--brand-wash); color: var(--brand-deep); white-space: nowrap;
}
.mockup-title { font-weight: 600; margin-bottom: 2px; }
.mockup-sub { font-size: 11px; color: var(--grey); }

/* Avancement du dossier : barre fine sous le libellé, pourcentage
   aligné à droite avec la pastille de statut. */
.mockup-progress {
  height: 4px; border-radius: 2px; background: var(--hairline-2);
  overflow: hidden; margin-top: 9px;
}
.mockup-progress span { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
/* Dossier abouti : la barre et la pastille passent au vert de validation. */
.mockup-progress span.is-done { background: var(--success); }
.mockup-row .status.is-done { background: var(--success-wash); color: var(--success); }
.mockup-pct {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
  /* Calé sur l'axe de la barre d'avancement, qui se termine 2 px
     au-dessus du bas du bloc : on redescend le chiffre d'autant. */
  line-height: 1; transform: translateY(3px);
}

/* ---------- CTA ------------------------------------------- */
.cta { background: var(--brand); text-align: center; }
.cta h2 {
  font-family: var(--font-display); font-weight: 800; color: var(--white);
  font-size: clamp(26px, 4vw, 38px); margin: 0 0 16px; letter-spacing: -0.01em; line-height: 1.15;
}
.cta p { color: rgba(255, 255, 255, 0.85); max-width: 520px; margin: 0 auto 30px; font-size: 15.5px; }
.cta .hero-actions { justify-content: center; }
/* Sélecteur qualifié par « .cta » : sans cela, la règle « .cta p »
   ci-dessus l'emporte et la ligne reprend le corps du chapô. */
.cta p.cta-adresse {
  margin: 22px auto 0; font-size: 14.5px; color: rgba(255, 255, 255, 0.78);
}
.cta p.cta-adresse a {
  color: var(--white); text-decoration: underline; text-underline-offset: 3px;
}
/* Le formulaire est une carte encre posée sur le corail : il reprend
   telles quelles les règles « .lead-form », seule sa largeur est
   contrainte pour rester lisible au centre de la bande. */
.cta-form { max-width: 640px; margin-left: auto; margin-right: auto; text-align: left; }

/* ---------- Formulaire de contact ------------------------- */
.lead-form {
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); margin-top: var(--space-6);
}
.lead-form h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3vw, 26px);
  color: var(--white); margin: 0 0 10px; line-height: 1.25;
}
.lead-form > p { font-size: 14.5px; color: rgba(244, 241, 234, 0.72); margin: 0 0 var(--space-5); }

.field-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: rgba(244, 241, 234, 0.85); }
.field .req { color: var(--brand); }
.field input, .field textarea, .field select {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--white); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 13px 14px; width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); }
.field .err { font-size: 12.5px; color: #FFC5B2; min-height: 0; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #FFC5B2; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: var(--space-5) 0 var(--space-4); }
.consent input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--brand); }
.consent label { font-size: 13px; color: rgba(244, 241, 234, 0.78); line-height: 1.6; }
.consent a { color: var(--brand); }

/* Bouton centré : c'est l'action unique du bloc, elle mérite l'axe. */
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }

/* La seconde rangée de la fiche de diagnostic : s'informer du prix, ou
   engager directement la procédure. Volontairement plus petite et
   détachée — le rendez-vous reste au-dessus, seul et en grand, parce
   que c'est le chemin que le cabinet veut voir emprunter. */
.form-actions-secondaires { margin-top: 14px; gap: 10px; }
.form-actions-secondaires .btn { font-size: 14px; padding: 12px 22px; }
.form-status { font-size: 13.5px; margin: var(--space-4) 0 0; line-height: 1.7; }
.form-status.ok { color: #A8E6B8; }
.form-status.ko { color: #FFC5B2; }

/* Le lien vers l'agenda, dans le message de confirmation. Souligné et
   plus clair que le message qui le porte : c'est l'étape suivante, pas
   une note de bas de page. */
.form-status-lien {
  color: var(--white); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Note sous les boutons de la fiche. Même teinte que le chapeau du
   formulaire, pour rester lisible sur le fond sombre. */
.form-note {
  font-size: 13.5px; line-height: 1.6; margin: 12px 0 0;
  color: rgba(244, 241, 234, 0.72); text-align: center;
}

/* Les deux notes qui suivent les boutons sont centrées, comme eux :
   c'est le même axe que l'action à laquelle elles se rapportent. Le
   filet qui les distinguait passe donc au-dessus, court et centré —
   un trait vertical à gauche contredirait un texte centré. */
.form-note-frais, .form-note-majoration {
  max-width: 560px; margin: 32px auto 0; text-align: center;
  padding-top: 16px; position: relative;
}
.form-note-frais::before, .form-note-majoration::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 2px; border-radius: 1px;
}

/* Les frais irrépétibles : une bonne nouvelle, donc le vert du
   formulaire — le même que celui des messages de réussite. L'écart
   avec les boutons est volontairement large : la note se lit après
   avoir choisi, pas pendant. */
.form-note-frais::before { background: #A8E6B8; }

/* Le forfait majoré : ce n'est pas une bonne nouvelle comme les frais
   irrépétibles, mais une information due avant le clic. D'où le filet
   de la couleur du cabinet, et non le vert. */
.form-note-majoration::before { background: var(--brand); }

/* ⚠️ La règle « .lead-form > p » plus haut est plus précise que les
   classes ci-dessus : sans ces trois lignes, elle leur impose sa
   propre marge et les notes restent collées aux boutons. */
.lead-form > .form-note { margin: 12px 0 0; }
.lead-form > .form-note-majoration { margin: 32px auto 0; }
.lead-form > .form-note-frais { margin: 24px auto 0; }

/* ---------- Footer ---------------------------------------- */
footer { background: var(--ink); color: rgba(244, 241, 234, 0.6); padding: var(--space-7) var(--space-5) var(--space-6); }
.footer-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 720px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-brand .badge {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.footer-brand .badge svg { width: 16px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: var(--cream); font-size: 15px; }
.footer-links { display: flex; gap: 40px; flex-wrap: wrap; font-size: 13.5px; }
.footer-col h5 {
  font-family: var(--font-display); font-weight: 600; color: var(--cream); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px;
}
.footer-col a { display: block; text-decoration: none; color: rgba(244, 241, 234, 0.6); margin-bottom: 8px; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  max-width: var(--wrap); margin: var(--space-6) auto 0; padding-top: var(--space-5);
  border-top: 1px solid rgba(244, 241, 234, 0.1); font-size: 12px; text-align: center;
}
/* Portée du cabinet, en dernière ligne. Discrète par sa place et sa
   largeur, pas par sa couleur : elle reprend celle du pied de page,
   sans quoi 12 px passeraient sous le seuil de contraste lisible. */
.footer-portee {
  max-width: 720px; margin: 12px auto 0; padding: 0 var(--space-5);
  font-size: 12px; line-height: 1.7; text-align: center;
}
.footer-portee strong { font-weight: 600; color: rgba(244, 241, 234, 0.85); }

/* ---------- Apparition au défilement ---------------------- */
/* Apparition au défilement — enrichissement, jamais condition.
   Le contenu est visible par défaut ; il n'est masqué que si le
   script a pu confirmer que l'animation fonctionnera (classe posée
   sur <html>). Sans JavaScript, ou si l'observateur ne répond pas,
   la page reste entièrement lisible. */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js-reveal .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
}

/* ---------- Bandeau d'installation PWA -------------------- */
.install-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 14px;
  background: var(--ink); color: var(--cream);
  padding: 14px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-width: 520px; margin: 0 auto;
}
.install-bar.show { display: flex; }
.install-bar p { margin: 0; font-size: 13.5px; flex: 1; }
.install-bar .btn { padding: 10px 18px; font-size: 13.5px; }
.install-bar .close {
  background: none; border: none; color: rgba(244, 241, 234, 0.6);
  font-size: 20px; cursor: pointer; line-height: 1; padding: 4px 8px;
}