/* =========================================================
   benjamindahan-osteo.fr — le site biographique
   Bleu nuit, sérif en display, le portrait sortant de l'ombre.
   ========================================================= */

:root {
  --bd-nuit:    #0B1220;   /* le fond, presque noir mais bleu */
  --bd-nuit-2:  #0F172A;   /* la section qui respire */
  --bd-encre:   #060A12;   /* le pied de page */
  --bd-clair:   #EDF1F7;   /* le texte principal */
  --bd-doux:    #94A3B8;   /* le texte secondaire */
  --bd-bleu:    #7C93C7;   /* l'accent : le bleu du bouton de la maquette */
  --bd-bleu-h:  #93A7D6;
  --bd-ligne:   rgba(237, 241, 247, .12);
  /* Zodiak : sérif à fort contraste, terminaisons nettes. Satoshi : grotesque
     contemporaine. Ni l'un ni l'autre n'appartient au cluster typographique
     que produit une IA par défaut. */
  --bd-serif:   "Zodiak", "Playfair Display", Georgia, serif;
  --bd-sans:    "Satoshi", -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Remise à plat du thème ---------- */
body.bd-bio,
body.bd-bio #inner-body,
body.bd-bio .site,
body.bd-bio .site-content,
body.bd-bio .page-content,
body.bd-bio .entry-content {
  background: var(--bd-nuit) !important;
  color: var(--bd-clair);
}
body.bd-bio { font-family: var(--bd-sans); }

/* Le thème enrobe le contenu dans des conteneurs étroits : on les libère. */
body.bd-bio .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1240px !important;
}
/* Pas de 100vw : il compte la barre de défilement et produit 7 px de
   débordement horizontal. Hello Elementor ne contraint pas la largeur —
   les sections sont déjà pleine largeur sans aucun hack. */
body.bd-bio .bd-s {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  position: relative;
  overflow: hidden;
}

/* ---------- Typographie ---------- */
.bd-h1 {
  font-family: var(--bd-serif) !important;
  font-size: clamp(2rem, 3.4vw, 3.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: -.005em;
  color: #FFFFFF !important;
  margin: 0 !important;
}
.bd-h2 {
  font-family: var(--bd-serif) !important;
  font-size: clamp(1.625rem, 2.4vw, 2.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0;
  color: #FFFFFF !important;
  margin: 0 0 24px !important;
}
.bd-eyebrow {
  font-family: var(--bd-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bd-bleu);
  margin: 0 0 20px;
}
.bd-lead {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--bd-doux);
  max-width: 44ch;
  margin: 0 0 40px;
}
.bd-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--bd-bleu);
  margin: 30px 0;
  opacity: .8;
}

/* ---------- Boutons ---------- */
.bd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  font-family: var(--bd-sans);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none !important;
  background: var(--bd-bleu);
  color: #0B1220 !important;
  border: 1px solid var(--bd-bleu);
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease;
}
.bd-btn:hover { background: var(--bd-bleu-h); border-color: var(--bd-bleu-h); color: #0B1220 !important; }
.bd-btn:focus-visible { outline: 2px solid var(--bd-bleu); outline-offset: 3px; }
/* Sur fond clair, l'anneau prend le bleu franc : le bleu pâle y tombait à 2,85:1. */
.bd-s-pr-vision :focus-visible,
.bd-s-pr-der :focus-visible,
.bd-s-pr-info :focus-visible,
.bd-s-pr-adapt :focus-visible { outline-color: var(--bd-vif) !important; }

/* Le bouton nu : un simple soulignement, comme dans la maquette. */
.bd-btn--nu {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--bd-ligne);
  border-radius: 0;
  padding: 15px 4px;
  color: var(--bd-clair) !important;
}
.bd-btn--nu:hover {
  background: none;
  border-bottom-color: var(--bd-bleu);
  color: #FFFFFF !important;
}
.bd-cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* =========================================================
   PIED DE PAGE — le nôtre. Celui du thème (bloc newsletter cyan)
   et la bulle WhatsApp sont masqués.
   ========================================================= */
body.bd-bio .aux-elementor-footer,
body.bd-bio .site-footer,
body.bd-bio .nta-wa-gdpr,
body.bd-bio [class*="nta-wa"],
body.bd-bio [class^="wa__"],
body.bd-bio [class*=" wa__"],
body.bd-bio [id*="njt-whatsapp"] {
  display: none !important;
}

.bd-ftr {
  background: var(--bd-encre);
  border-top: 1px solid var(--bd-ligne);
}
.bd-ftr__in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 76px 40px 60px;
}

.bd-ftr__marque p {
  margin: 20px 0 0;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--bd-doux);
  max-width: 34ch;
}

.bd-ftr__col h3 {
  font-family: var(--bd-sans) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bd-bleu) !important;
  margin: 0 0 20px !important;
}
.bd-ftr__col p {
  margin: 0 0 12px;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--bd-doux);
}

.bd-ftr__tel {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.375rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
  margin-bottom: 18px;
  transition: color .2s ease;
}
.bd-ftr__tel:hover { color: var(--bd-bleu-h) !important; }

.bd-ftr__l {
  display: block;
  font-size: .875rem;
  color: var(--bd-doux) !important;
  text-decoration: none !important;
  padding: 5px 0;
  transition: color .2s ease, transform .2s ease;
}
.bd-ftr__l:hover { color: #FFFFFF !important; transform: translateX(3px); }

/* La barre du bas */
.bd-ftr__bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 40px 34px;
  border-top: 1px solid var(--bd-ligne);
  font-size: .8125rem;
  color: var(--bd-doux);
}
.bd-ftr__legal { display: flex; gap: 28px; flex-wrap: wrap; }
.bd-ftr__legal a {
  font-size: .8125rem;
  color: var(--bd-doux) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.bd-ftr__legal a:hover { color: var(--bd-bleu-h) !important; }

@media (max-width: 900px) {
  .bd-ftr__in { grid-template-columns: 1fr; gap: 44px; padding: 56px 20px 40px; }
  .bd-ftr__bas { padding: 22px 20px 28px; }
}

/* La signature tracée — réutilisée par la carte d'appel. */
.bd-ap-sign__n { display: block; font-family: "Parisienne", var(--bd-serif); font-weight: 400; }
.bd-ap-sign__q { display: block; color: var(--bd-doux); }

/* =========================================================
   PAGE « À PROPOS » — d'après la maquette
   ========================================================= */
:root {
  /* #4F82D8 échouait au WCAG AA : blanc dessus = 3,81:1 (seuil 4,5), et le même
     bleu en texte sur fond clair = 3,55:1. #2E5FB0 passe à ~5,6:1 dans les deux sens. */
  --bd-vif:   #2E5FB0;   /* le bleu franc : icônes, accents sur fond clair, bouton primaire */
  --bd-vif-h: #24509A;
  --bd-carte: #101A2C;   /* le fond des cartes, un cran au-dessus de la nuit */
}

.bd-head--c { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; }
.bd-head--c .bd-rule { margin-left: auto; margin-right: auto; }
.bd-head--c .bd-lead { margin-left: auto; margin-right: auto; margin-bottom: 0; }

.bd-ic--v { color: var(--bd-vif); }

/* ---------- Hero ---------- */
.bd-ap2-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  min-height: 76vh;
  padding-top: 140px;
}
.bd-ap2-hero__img {
  margin: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-ap2-hero__img img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  filter: brightness(.92) contrast(1.06);
  -webkit-mask-image: radial-gradient(75% 62% at 50% 44%, #000 52%, transparent 92%);
          mask-image: radial-gradient(75% 62% at 50% 44%, #000 52%, transparent 92%);
}
.bd-ap2-lieu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 36px 0 0;
  font-size: .875rem;
  color: var(--bd-doux);
}
.bd-ap2-lieu svg { color: var(--bd-vif); flex: 0 0 auto; }

/* ---------- Ma philosophie : la carte ---------- */
.bd-carte {
  display: grid;
  grid-template-columns: .78fr 2.22fr;
  gap: 56px;
  align-items: center;
  background: var(--bd-carte);
  border: 1px solid var(--bd-ligne);
  border-radius: 20px;
  padding: 54px 50px;
}
.bd-carte__t .bd-h2 { margin-bottom: 0 !important; }
.bd-carte__t p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--bd-doux);
}

.bd-piliers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.bd-pilier {
  padding: 0 26px;
  text-align: center;
  border-left: 1px solid var(--bd-ligne);
}
.bd-pilier:first-child { border-left: 0; }
.bd-pilier__ic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--bd-vif);
  margin-bottom: 18px;
}
.bd-pilier h3 {
  font-family: var(--bd-sans) !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
  color: var(--bd-clair) !important;
  margin: 0 0 12px !important;
}
.bd-pilier p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--bd-doux);
}

/* ---------- Mon approche ---------- */
.bd-ap2-appr {
  display: grid;
  grid-template-columns: .82fr 1.25fr .93fr;
  gap: 56px;
  align-items: center;
}
.bd-ap2-appr__img { margin: 0; border-radius: 14px; overflow: hidden; }
.bd-ap2-appr__img img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
  filter: brightness(.92);
}
.bd-ap2-appr__text p {
  margin: 0 0 16px;
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--bd-doux);
}

.bd-reperes {
  list-style: none !important;
  margin: 0;
  padding: 0 0 0 40px;
  border-left: 1px solid var(--bd-ligne);
}
.bd-reperes li::before, .bd-reperes li::marker { content: none !important; display: none !important; }
.bd-reperes li {
  display: flex;
  gap: 16px;
  padding: 18px 0;
}
.bd-rep__ic {
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--bd-vif);
  padding-top: 2px;
}
.bd-reperes strong {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 5px;
}
.bd-reperes span {
  display: block;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--bd-doux);
}

/* ---------- Le terrain ---------- */
.bd-lieux2 {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 52px 0 0;
  padding: 0;
}
.bd-lieux2 li::before, .bd-lieux2 li::marker { content: none !important; display: none !important; }
.bd-lieux2 li {
  padding: 0 24px;
  border-left: 1px solid var(--bd-ligne);
}
.bd-lieux2 li:first-child { border-left: 0; padding-left: 0; }
.bd-lieux2 strong {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.bd-lieux2 span {
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--bd-doux);
}

/* ---------- Le mémoire ---------- */
.bd-ap2-memo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  background: var(--bd-carte);
  border: 1px solid var(--bd-ligne);
  border-radius: 20px;
  padding: 54px 50px;
}
.bd-ap2-memo__t .bd-h2 { margin-bottom: 0 !important; }
.bd-ap2-memo__c p {
  margin: 0 0 16px;
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--bd-doux);
}
.bd-ap2-memo__c p:last-child { margin-bottom: 0; }

/* ---------- Mes spécialités : 4 axes + les publics ---------- */
.bd-axes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 56px;
}
.bd-axe {
  display: flex;
  gap: 16px;
  background: var(--bd-carte);
  border: 1px solid var(--bd-ligne);
  border-radius: 14px;
  padding: 26px 28px;
}
.bd-axe__ic {
  display: flex !important;
  align-items: flex-start;
  flex: 0 0 auto;
  color: var(--bd-vif);
  padding-top: 2px;
}
.bd-axe strong {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 8px;
}
.bd-axe span {
  display: block;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--bd-doux);
}

.bd-publics { margin-top: 52px; text-align: center; }
.bd-publics .bd-eyebrow { margin-bottom: 22px; }
.bd-publics ul {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.bd-publics li::before, .bd-publics li::marker { content: none !important; display: none !important; }
.bd-publics li {
  padding: 9px 20px;
  border: 1px solid var(--bd-ligne);
  border-radius: 999px;
  font-size: .875rem;
  color: var(--bd-clair);
}

/* ---------- L'appel ---------- */
.bd-appel {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: 50px;
  align-items: center;
  background: var(--bd-carte);
  border: 1px solid var(--bd-ligne);
  border-radius: 20px;
  padding: 60px 56px;
  overflow: hidden;
}
/* L'arbre du logo, en filigrane. Décoratif : il ne porte aucune information. */
.bd-appel::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 380px;
  height: 420px;
  background: url("https://benjamindahan-osteo.fr/wp-content/uploads/bd/logo-arbre.png") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
}
.bd-appel__text { position: relative; z-index: 1; }
.bd-appel__text p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--bd-doux);
  max-width: 46ch;
}
.bd-appel__sign { margin-top: 34px; }
.bd-appel__sign .bd-ap-sign__n {
  display: block;
  font-family: "Parisienne", var(--bd-serif);
  font-size: 2.5rem;
  color: var(--bd-vif);
  line-height: 1.1;
  margin-bottom: 8px;
}
.bd-appel__sign .bd-ap-sign__q {
  display: block;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bd-doux);
}

.bd-btn--vif {
  position: relative;
  z-index: 1;
  gap: 12px;
  padding: 17px 32px;
  background: var(--bd-vif);
  border-color: var(--bd-vif);
  border-radius: 999px;
  color: #FFFFFF !important;
  white-space: nowrap;
}
.bd-btn--vif:hover {
  background: var(--bd-vif-h);
  border-color: var(--bd-vif-h);
  color: #FFFFFF !important;
}
.bd-btn--vif svg { transition: transform .25s ease; }
.bd-btn--vif:hover svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .bd-ap2-hero,
  .bd-ap2-appr,
  .bd-ap2-memo,
  .bd-carte { grid-template-columns: 1fr; gap: 40px; }
  .bd-ap2-hero { padding-top: 190px; min-height: 0; }
  .bd-ap2-hero__img { order: -1; }
  .bd-ap2-hero__img img { max-width: 400px; }
  .bd-carte, .bd-ap2-memo, .bd-appel { padding: 40px 26px; }
  .bd-piliers { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .bd-pilier:nth-child(odd) { border-left: 0; }
  .bd-reperes { padding: 0; border-left: 0; border-top: 1px solid var(--bd-ligne); padding-top: 10px; }
  .bd-lieux2 { grid-template-columns: 1fr; gap: 22px; }
  .bd-lieux2 li { padding: 0 0 0 20px; border-left: 1px solid var(--bd-ligne); }
  .bd-lieux2 li:first-child { padding-left: 20px; border-left: 1px solid var(--bd-ligne); }
  .bd-axes { grid-template-columns: 1fr; }
  .bd-appel { grid-template-columns: 1fr; gap: 34px; }
  .bd-btn--vif { justify-content: center; }
}

/* La mention légale du praticien : discrète mais présente. */
.bd-ftr__rpps {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--bd-ligne);
  font-size: .75rem !important;
  color: var(--bd-doux) !important;
}

/* =========================================================
   « À PROPOS » — les photos
   ========================================================= */

/* La carte « Ma philosophie » accueille un portrait : elle passe à 3 colonnes. */
.bd-carte--photo { grid-template-columns: .62fr .78fr 2.1fr; gap: 44px; }
.bd-carte__img {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  align-self: stretch;
}
.bd-carte__img img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  display: block;
  filter: brightness(.92);
}

/* La bande du terrain : trois formats portrait, celle du milieu décalée. */
.bd-terr-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 60px;
}
.bd-terr-gal figure {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.bd-terr-gal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.88) saturate(.9);
}
.bd-terr-gal figure:nth-child(2) { transform: translateY(26px); }

/* Le mémoire accueille une photo : 3 colonnes aussi. */
.bd-ap2-memo--photo { grid-template-columns: .72fr .95fr 1.15fr; gap: 50px; }
.bd-ap2-memo__img {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  align-self: stretch;
}
.bd-ap2-memo__img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  filter: brightness(.86);
}

@media (max-width: 1100px) {
  .bd-carte--photo,
  .bd-ap2-memo--photo { grid-template-columns: 1fr; gap: 32px; }
  .bd-carte__img img, .bd-ap2-memo__img img { min-height: 0; max-height: 320px; }
  .bd-terr-gal { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .bd-terr-gal figure { aspect-ratio: 16 / 10; }
  .bd-terr-gal figure:nth-child(2) { transform: none; }
}

/* =========================================================
   PAGE « MA PRATIQUE »
   La page bascule au clair en son milieu : « comment ça se passe »
   s'éclaire, littéralement. C'est la maquette.
   ========================================================= */
:root {
  --bd-jour:    #FFFFFF;
  --bd-jour-2:  #F5F7FA;
  --bd-encre-j: #0F172A;   /* le texte sur fond clair */
  --bd-doux-j:  #5B6B84;
  --bd-ligne-j: rgba(15, 23, 42, .10);
  --bd-carte-b: #1B3B6F;   /* le bleu plein de la carte des piliers */
}

.bd-eyebrow--c { text-align: center; }
.bd-rule--c { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.bd-pr-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 50px;
  align-items: center;
  padding: 150px 0 0;
}
.bd-pr-hero__img {
  margin: 0;
  align-self: stretch;
  overflow: hidden;
  border-radius: 14px;
}
.bd-pr-hero__img img {
  width: 100%;
  height: 100%;
  min-height: 460px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: brightness(.88) contrast(1.05);
}

/* ---------- La carte bleue, à cheval sur le hero et la suite ---------- */
.bd-s-pr-carte { padding-top: 0 !important; }
.bd-pr-carte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--bd-carte-b);
  border-radius: 16px;
  padding: 46px 44px;
  margin-top: -80px;   /* elle mord sur la photo du hero */
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}
.bd-pr-pil {
  padding: 0 32px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.bd-pr-pil:first-child { border-left: 0; padding-left: 0; }
.bd-pr-pil:last-child { padding-right: 0; }
.bd-pr-pil__ic {
  display: inline-flex !important;
  color: #A9C4F0;
  margin-bottom: 20px;
}
.bd-pr-pil h2 {
  font-family: var(--bd-serif) !important;
  font-size: 1.375rem !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  margin: 0 0 14px !important;
}
.bd-pr-pil p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .76);
}

/* =========================================================
   Les sections claires
   ========================================================= */
.bd-s-pr-vision,
.bd-s-pr-der,
.bd-s-pr-adapt {
  background: var(--bd-jour) !important;
  color: var(--bd-encre-j);
}
.bd-s-pr-vision .bd-h2,
.bd-s-pr-der .bd-h2,
.bd-s-pr-adapt .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-pr-vision .bd-eyebrow,
.bd-s-pr-der .bd-eyebrow,
.bd-s-pr-adapt .bd-eyebrow { color: var(--bd-vif); }
.bd-s-pr-vision .bd-rule,
.bd-s-pr-der .bd-rule,
.bd-s-pr-adapt .bd-rule { background: var(--bd-vif); }

/* ---------- Ma vision ---------- */
.bd-pr-vision {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
}
.bd-pr-vision__text p {
  margin: 0 0 18px;
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--bd-doux-j);
  max-width: 48ch;
}
.bd-pr-vision__img {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
}
.bd-pr-vision__img img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

/* ---------- Le déroulé ---------- */
.bd-pr-der {
  background: var(--bd-jour-2);
  border-radius: 16px;
  padding: 54px 44px 50px;
}
.bd-etps {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 44px 0 0;
  padding: 0;
  counter-reset: none;
}
.bd-etps li::marker { content: none !important; }
.bd-etp {
  position: relative;
  padding: 0 26px;
  text-align: center;
}
/* La flèche entre deux temps : elle dit que l'ordre compte. */
.bd-etp + .bd-etp::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 30px;
  width: 16px;
  height: 1px;
  background: var(--bd-ligne-j);
}
.bd-etp + .bd-etp::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 26px;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--bd-doux-j);
  border-right: 1px solid var(--bd-doux-j);
  transform: rotate(45deg);
  opacity: .55;
}
.bd-etp__ic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--bd-jour);
  border: 1px solid var(--bd-ligne-j);
  color: var(--bd-vif);
  margin-bottom: 18px;
}
.bd-etp__n {
  display: block;
  font-size: .8125rem;
  color: var(--bd-doux-j);
  margin-bottom: 8px;
}
.bd-etp h3 {
  font-family: var(--bd-serif) !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: var(--bd-encre-j) !important;
  margin: 0 0 12px !important;
}
.bd-etp p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--bd-doux-j);
}

/* ---------- Une pratique adaptée + la citation ---------- */
.bd-pr-adapt {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.bd-pr-adapt__text p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--bd-doux-j);
  max-width: 44ch;
}
.bd-pr-pub {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
}
.bd-pr-pub li::before, .bd-pr-pub li::marker { content: none !important; display: none !important; }
.bd-pr-pub li {
  padding: 8px 18px;
  border-radius: 999px;
  background: #EAF0FA;
  color: #2B4F86;
  font-size: .8125rem;
}

.bd-pr-cit {
  position: relative;
  margin: 0;
  background: #EDF2FA;
  border-radius: 16px;
  padding: 42px 44px;
  overflow: hidden;
}
/* L'arbre du logo, en filigrane. Décoratif. */
.bd-pr-cit::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -40px;
  width: 220px;
  height: 260px;
  background: url("https://benjamindahan-osteo.fr/wp-content/uploads/bd/logo-arbre.png") no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
}
.bd-pr-cit__q {
  display: block !important;
  color: var(--bd-vif);
  opacity: .5;
  margin-bottom: 16px;
}
.bd-pr-cit blockquote {
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--bd-encre-j);
  position: relative;
  z-index: 1;
}
.bd-pr-cit figcaption { position: relative; z-index: 1; }
.bd-pr-cit figcaption strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bd-encre-j);
}
.bd-pr-cit figcaption span {
  font-size: .8125rem;
  color: var(--bd-doux-j);
}

/* ---------- L'appel ---------- */
.bd-pr-fin {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
}
.bd-pr-fin .bd-h2 { margin-bottom: 12px !important; }
.bd-pr-fin p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--bd-doux);
  max-width: 42ch;
}

@media (max-width: 1100px) {
  .bd-pr-hero,
  .bd-pr-vision,
  .bd-pr-adapt,
  .bd-pr-fin { grid-template-columns: 1fr; gap: 36px; }
  .bd-pr-hero { padding-top: 190px; }
  .bd-pr-hero__img img { min-height: 320px; }
  .bd-pr-carte {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: -40px;
    padding: 36px 26px;
  }
  .bd-pr-pil { padding: 0; border-left: 0; }
  .bd-pr-pil + .bd-pr-pil { border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; }
  .bd-etps { grid-template-columns: 1fr; gap: 34px; }
  .bd-etp { padding: 0; }
  .bd-etp + .bd-etp::before, .bd-etp + .bd-etp::after { display: none; }
  .bd-pr-der { padding: 36px 22px; }
  .bd-pr-cit { padding: 32px 26px; }
  .bd-btn--vif { justify-content: center; }
}

/* Le logo arbre dans le header, comme dans les maquettes. */
.bd-marque { display: flex; align-items: center; gap: 12px; }
.bd-marque__logo { width: 40px; height: auto; flex: 0 0 auto; }
.bd-marque__txt { display: block; }
.bd-marque__n { display: block; }

/* =========================================================
   CORRECTIFS DE LA CRITIQUE
   ========================================================= */

/* Texte réservé aux lecteurs d'écran (« nouvel onglet »). */
.bd-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- [P0] La barre d'action collante ----------
   Sur mobile, le seul bouton du corps était à 86 % de la page et le header
   n'est pas collant : 5 000 px sans rien à toucher. */
.bd-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 18, 32, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--bd-ligne);
}
@media (max-width: 1024px) { .bd-barre { display: flex; } }

.bd-barre__tel,
.bd-barre__rdv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border-radius: 999px;
  font-family: var(--bd-sans);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none !important;
}
.bd-barre__tel {
  flex: 0 0 auto;
  padding: 0 20px;
  border: 1px solid var(--bd-ligne);
  color: var(--bd-clair) !important;
}
.bd-barre__rdv {
  flex: 1 1 auto;
  background: var(--bd-bleu);
  color: #0B1220 !important;
}
.bd-barre :focus-visible { outline: 2px solid var(--bd-bleu); outline-offset: 2px; }
/* La barre ne doit pas masquer la fin du pied de page. */
@media (max-width: 1024px) { .bd-ftr__bas { padding-bottom: 90px; } }

/* Cibles tactiles de la nav : elles faisaient 29 px (seuil WCAG : 44). */
@media (max-width: 1024px) {
  .bd-nav__l { padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
}

/* ---------- Le titre du déroulé, désormais un vrai h2 ---------- */
.bd-h2--c { text-align: center; }

/* Le CTA qui referme le déroulé : le pic de conviction n'est plus un cul-de-sac. */
.bd-pr-der__cta {
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--bd-ligne-j);
  text-align: center;
}
.bd-pr-der__cta p {
  margin: 0 0 22px;
  font-size: .9375rem;
  color: var(--bd-doux-j);
}

/* ---------- [P1] « En pratique » ---------- */
.bd-s-pr-info {
  background: var(--bd-jour) !important;
  color: var(--bd-encre-j);
}
.bd-s-pr-info .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-pr-info .bd-rule { background: var(--bd-vif); }
.bd-s-pr-info .bd-lead { color: var(--bd-doux-j); }

.bd-info-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 52px;
}
.bd-info-bloc {
  padding: 0 34px;
  border-left: 1px solid var(--bd-ligne-j);
}
.bd-info-bloc:first-child { border-left: 0; padding-left: 0; }
.bd-info-bloc:last-child { padding-right: 0; }
.bd-info-bloc h3 {
  font-family: var(--bd-serif) !important;
  font-size: 1.3125rem !important;
  font-weight: 500 !important;
  color: var(--bd-encre-j) !important;
  margin: 0 0 22px !important;
}

.bd-tarifs { list-style: none !important; margin: 0 0 20px; padding: 0; }
.bd-tarifs li::before, .bd-tarifs li::marker { content: none !important; display: none !important; }
.bd-tarifs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bd-ligne-j);
}
.bd-tarifs li:last-child { border-bottom: 0; }
.bd-tarifs span {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--bd-doux-j);
}
.bd-tarifs strong {
  flex: 0 0 auto;
  font-family: var(--bd-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bd-encre-j);
  white-space: nowrap;
}

.bd-info-note {
  margin: 0 0 18px;
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--bd-doux-j);
}
.bd-info-note strong { color: var(--bd-encre-j); font-weight: 600; }
.bd-info-adr {
  margin: 0 0 18px;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--bd-doux-j);
}
.bd-info-adr strong { color: var(--bd-encre-j); }
.bd-info-l {
  display: inline-block;
  font-size: .875rem;
  color: var(--bd-vif) !important;
  text-decoration: none !important;
  transition: transform .2s ease;
}
.bd-info-l:hover { transform: translateX(3px); }
.bd-info-tel {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.625rem;
  color: var(--bd-encre-j) !important;
  text-decoration: none !important;
  margin-bottom: 20px;
}
.bd-info-tel:hover { color: var(--bd-vif) !important; }
.bd-info-btn { width: 100%; }

/* La ligne qui répond à la peur n°1 : « on va me craquer la nuque ». */
.bd-info-rassure {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 760px;
  margin: 56px auto 0;
  padding: 22px 26px;
  background: #EDF2FA;
  border-radius: 14px;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--bd-doux-j);
}
.bd-info-rassure svg { flex: 0 0 auto; color: var(--bd-vif); margin-top: 2px; }
.bd-info-rassure strong { color: var(--bd-encre-j); font-weight: 600; }

/* ---------- Les avis Google ---------- */
.bd-pr-avis {
  background: #EDF2FA;
  border-radius: 16px;
  padding: 32px 30px;
}
.bd-pr-avis__note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--bd-ligne-j);
}
.bd-pr-avis__note strong {
  font-family: var(--bd-serif);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--bd-encre-j);
  line-height: 1;
}
.bd-pr-avis__e { color: #E8A33D; letter-spacing: 2px; }
.bd-pr-avis__n {
  font-size: .8125rem;
  color: var(--bd-doux-j);
}
.bd-pr-avis__w .ti-widget { margin: 0 !important; }

/* ---------- L'acte III : un vrai troisième acte, pas un ourlet ---------- */
.bd-pr-fin {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.bd-pr-fin__img {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.bd-pr-fin__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.88);
}
.bd-pr-fin__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
  font-family: var(--bd-serif);
  font-size: 1.875rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: color .2s ease;
}
.bd-pr-fin__tel svg { color: var(--bd-bleu); flex: 0 0 auto; }
.bd-pr-fin__tel:hover { color: var(--bd-bleu-h) !important; }
.bd-pr-fin__adr {
  margin: 0 0 30px !important;
  font-size: .8125rem !important;
  color: var(--bd-doux) !important;
}

@media (max-width: 1100px) {
  .bd-info-grille { grid-template-columns: 1fr; gap: 40px; }
  .bd-info-bloc { padding: 0; border-left: 0; }
  .bd-info-bloc + .bd-info-bloc { border-top: 1px solid var(--bd-ligne-j); padding-top: 34px; }
  .bd-info-rassure { margin-top: 40px; flex-direction: column; gap: 12px; }
  .bd-pr-fin { grid-template-columns: 1fr; gap: 34px; }
  .bd-pr-fin__img { aspect-ratio: 16 / 10; }
  .bd-pr-avis { padding: 26px 22px; }
}

/* =========================================================
   PAGE « SPÉCIALITÉS »
   ========================================================= */
.bd-s-sp-philo,
.bd-s-sp-doms,
.bd-s-sp-cit {
  background: var(--bd-jour) !important;
  color: var(--bd-encre-j);
}
.bd-s-sp-philo .bd-h2,
.bd-s-sp-cit .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-sp-philo .bd-eyebrow { color: var(--bd-vif); }
.bd-s-sp-philo :focus-visible,
.bd-s-sp-doms :focus-visible,
.bd-s-sp-cit :focus-visible { outline-color: var(--bd-vif) !important; }

/* ---------- Hero ---------- */
.bd-sp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 150px 0 0;
}
.bd-sp-hero__img { margin: 0; border-radius: 14px; overflow: hidden; }
.bd-sp-hero__img img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(.82) contrast(1.06);
}

/* ---------- La philosophie ---------- */
.bd-sp-philo {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 60px;
  align-items: start;
}
.bd-sp-philo__t .bd-h2 { margin-bottom: 0 !important; }
.bd-sp-philo__c {
  margin: 6px 0 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--bd-doux-j);
  max-width: 62ch;
}

/* ---------- Les neuf domaines ----------
   Les quatre qu'il revendique lui-même portent l'accent : ce sont eux qui le
   distinguent. Neuf cartes strictement identiques feraient un annuaire. */
.bd-doms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.bd-dom {
  display: flex;
  flex-direction: column;
  background: var(--bd-jour);
  border: 1px solid var(--bd-ligne-j);
  border-radius: 16px;
  padding: 30px 28px;
}
.bd-dom__ic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #EDF2FA;
  color: var(--bd-vif);
  margin-bottom: 22px;
}
/* Les quatre signatures : la pastille se remplit. */
.bd-dom--sign .bd-dom__ic { background: var(--bd-vif); color: #FFFFFF; }
.bd-dom--sign { border-color: rgba(46, 95, 176, .28); }

.bd-dom h3 {
  font-family: var(--bd-serif) !important;
  font-size: 1.3125rem !important;
  font-weight: 500 !important;
  color: var(--bd-encre-j) !important;
  margin: 0 0 14px !important;
}
.bd-dom p {
  margin: 0 0 22px;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--bd-doux-j);
}
.bd-dom__tags {
  list-style: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;   /* les étiquettes s'alignent en bas, quelle que soit la hauteur */
  padding: 0;
}
.bd-dom__tags li::before, .bd-dom__tags li::marker { content: none !important; display: none !important; }
.bd-dom__tags li {
  padding: 6px 14px;
  border-radius: 999px;
  background: #EAF0FA;
  color: #24509A;
  font-size: .75rem;
}

/* Les Healthicons sont pleins (viewBox 48) : ils pèsent plus à taille égale. */
.bd-ic--h { fill: currentColor; }
.bd-dom__ic > .bd-ic--h { width: 26px !important; height: 26px !important; }

/* ---------- La citation ---------- */
.bd-sp-cit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  background: #EDF2FA;
  border-radius: 16px;
  padding: 40px 44px;
  overflow: hidden;
}
.bd-sp-cit::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -30px;
  width: 200px;
  height: 240px;
  background: url("https://benjamindahan-osteo.fr/wp-content/uploads/bd/logo-arbre.png") no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
}
.bd-sp-cit__q {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.bd-sp-cit__q > span { color: var(--bd-vif); opacity: .45; flex: 0 0 auto; }
.bd-sp-cit__q p {
  margin: 0;
  font-family: var(--bd-serif);
  font-size: 1.5rem;
  line-height: 1.35;
  color: var(--bd-encre-j);
}
.bd-sp-cit__c {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: .875rem;
  line-height: 1.85;
  color: var(--bd-doux-j);
}

/* ---------- L'appel ---------- */
.bd-sp-fin {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
}
.bd-sp-fin .bd-h2 { margin-bottom: 12px !important; }
.bd-sp-fin p {
  margin: 0 0 20px;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--bd-doux);
  max-width: 46ch;
}
.bd-sp-fin__tel {
  font-family: var(--bd-serif);
  font-size: 1.625rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.bd-sp-fin__tel:hover { color: var(--bd-bleu-h) !important; }

@media (max-width: 1024px) {
  .bd-sp-hero,
  .bd-sp-philo,
  .bd-sp-cit,
  .bd-sp-fin { grid-template-columns: 1fr; gap: 34px; }
  .bd-sp-hero { padding-top: 190px; }
  .bd-sp-hero__img { order: -1; }
  .bd-sp-cit { padding: 32px 24px; }
  .bd-btn--vif { justify-content: center; }
}

/* Le plein-écran des sections utilise 100vw, qui compte la barre de défilement :
   d'où 7 px de débordement horizontal dès qu'une scrollbar occupe de la place.
   `clip` coupe sans créer de conteneur de défilement (contrairement à `hidden`,
   qui casserait le position:sticky). */
/* PAS D'OVERFLOW CLIP, ni sur <html> ni sur <body>.
   Règle CSS : quand <html> est en `visible`, c'est l'overflow du <body> qui
   gouverne le viewport. Clipper l'un ou l'autre fige donc TOUTE la page —
   aucun défilement possible. Le débordement horizontal est réglé à sa source
   (le width:100vw des sections a été remplacé par 100%). */

/* =========================================================
   PAGE ARTICLE
   Fond clair : un article long se lit. Mesure de 68 caractères,
   interlignage large, hiérarchie de lecture — pas de fiche SEO.
   ========================================================= */
.bd-s-art-hero,
.bd-s-art-corps,
.bd-s-art-video {
  background: var(--bd-jour) !important;
  color: var(--bd-encre-j);
}
.bd-s-art-hero .bd-eyebrow,
.bd-s-art-video .bd-eyebrow { color: var(--bd-vif); }
.bd-s-art-video .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-art-hero :focus-visible,
.bd-s-art-corps :focus-visible,
.bd-s-art-video :focus-visible { outline-color: var(--bd-vif) !important; }

/* ---------- L'en-tête ---------- */
.bd-art { max-width: 720px; margin: 0 auto; }
.bd-art__t {
  font-family: var(--bd-serif);
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--bd-encre-j);
  margin: 0 0 24px;
  text-wrap: balance;
}
.bd-art__chapo {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--bd-doux-j);
  margin: 0 0 40px;
  text-wrap: pretty;
}

.bd-art__sign {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  border-top: 1px solid var(--bd-ligne-j);
  border-bottom: 1px solid var(--bd-ligne-j);
}
.bd-art__av {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  flex: 0 0 auto;
}
.bd-art__meta { margin-right: auto; }
.bd-art__meta strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bd-encre-j);
}
.bd-art__meta span {
  font-size: .8125rem;
  color: var(--bd-doux-j);
}
.bd-art__date {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: .8125rem;
  color: var(--bd-doux-j);
  white-space: nowrap;
}

/* ---------- Le corps ---------- */
.bd-art__corps {
  max-width: 720px;
  margin: 0 auto;
}
.bd-art__corps p {
  margin: 0 0 26px;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #2A3446;
  max-width: 68ch;
  text-wrap: pretty;
}
.bd-art__corps p strong { color: var(--bd-encre-j); font-weight: 600; }
.bd-art__corps em { font-style: italic; }

/* La première phrase porte : elle est plus grande. */
.bd-art__lead {
  font-size: 1.3125rem !important;
  line-height: 1.7 !important;
  color: var(--bd-encre-j) !important;
}

.bd-art__corps h2 {
  font-family: var(--bd-serif) !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--bd-encre-j) !important;
  margin: 54px 0 22px !important;
  text-wrap: balance;
}

/* Les citations détachées : elles respirent, elles ne crient pas. */
.bd-art__cit {
  margin: 44px 0;
  padding: 0 0 0 26px;
  border: 0;
  border-left: 1px solid var(--bd-vif);
}
.bd-art__cit p {
  margin: 0 !important;
  font-family: var(--bd-serif);
  font-size: 1.5rem !important;
  line-height: 1.45 !important;
  color: var(--bd-encre-j) !important;
}

/* L'avertissement : obligatoire sur un texte médical, et il doit se voir. */
.bd-art__note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 52px 0 0;
  padding: 22px 26px;
  background: var(--bd-jour-2);
  border-radius: 14px;
}
.bd-art__note svg { flex: 0 0 auto; color: var(--bd-vif); margin-top: 3px; }
.bd-art__note p {
  margin: 0 !important;
  font-size: .9375rem !important;
  line-height: 1.75 !important;
  color: var(--bd-doux-j) !important;
}

/* ---------- La vidéo ---------- */
.bd-s-art-video { border-top: 1px solid var(--bd-ligne-j); }
.bd-art__video {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 60px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.bd-art__video-t p {
  margin: 0 0 28px;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--bd-doux-j);
  max-width: 44ch;
}
.bd-art__reel { min-width: 0; }
/* L'embed Instagram impose ses marges : on les neutralise. */
.bd-art__reel .instagram-media {
  margin: 0 auto !important;
  min-width: 0 !important;
  max-width: 380px !important;
  border-radius: 14px !important;
}

/* ---------- L'appel ---------- */
.bd-art__fin {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
}
.bd-art__fin .bd-h2 { margin-bottom: 12px !important; }
.bd-art__fin p {
  margin: 0 0 20px;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--bd-doux);
  max-width: 44ch;
}

@media (max-width: 1024px) {
  .bd-art__video,
  .bd-art__fin { grid-template-columns: 1fr; gap: 34px; }
  .bd-art__sign { flex-wrap: wrap; }
  .bd-art__date { width: 100%; }
  .bd-art__corps p { font-size: 1.0625rem; }
  .bd-art__lead { font-size: 1.1875rem !important; }
  .bd-art__cit p { font-size: 1.25rem !important; }
}

/* =========================================================
   HEADER — version jour
   Sur les pages qui commencent en clair (l'article), le header dessiné
   pour le fond sombre serait blanc sur blanc.
   ========================================================= */
body.bd-jour .bd-marque__n { color: var(--bd-encre-j); }
body.bd-jour .bd-marque__q { color: var(--bd-doux-j); }
body.bd-jour .bd-marque__n em { color: var(--bd-vif); }
body.bd-jour .bd-nav__l { color: var(--bd-encre-j) !important; }
body.bd-jour .bd-nav__l::after { background: var(--bd-vif); }
body.bd-jour .bd-nav__l--ici { color: var(--bd-vif) !important; }
body.bd-jour .bd-nav__l:focus-visible { outline-color: var(--bd-vif); }

body.bd-jour .bd-hdr__cta {
  background: var(--bd-vif);
  border-color: var(--bd-vif);
  color: #FFFFFF !important;
}
body.bd-jour .bd-hdr__cta:hover {
  background: var(--bd-vif-h);
  border-color: var(--bd-vif-h);
  color: #FFFFFF !important;
}

/* Le logo est un arbre bleu clair, pensé pour la nuit : sur blanc il s'efface. */
body.bd-jour .bd-marque__logo { filter: brightness(.55) saturate(1.3); }

/* =========================================================
   PAGE ARTICLES — trois blocs : articles · vidéothèque · réseaux
   ========================================================= */
.bd-s-bl-hero,
.bd-s-bl-articles,
.bd-s-bl-videos {
  background: var(--bd-jour) !important;
  color: var(--bd-encre-j);
}
.bd-s-bl-videos { background: var(--bd-jour-2) !important; }
.bd-s-bl-hero .bd-eyebrow { color: var(--bd-vif); }
.bd-s-bl-articles .bd-h2,
.bd-s-bl-videos .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-bl-hero :focus-visible,
.bd-s-bl-articles :focus-visible,
.bd-s-bl-videos :focus-visible { outline-color: var(--bd-vif) !important; }

.bd-bl-hero { max-width: 760px; }
.bd-bl-t {
  font-family: var(--bd-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--bd-encre-j);
  margin: 0 0 26px;
}
.bd-bl-chapo {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--bd-doux-j);
  max-width: 60ch;
  text-wrap: pretty;
}

/* L'en-tête de chaque bloc */
.bd-bl-h { margin-bottom: 40px; }
.bd-bl-h .bd-h2 { margin-bottom: 10px !important; }
.bd-bl-h p {
  margin: 0;
  font-size: .9375rem;
  color: var(--bd-doux-j);
}

/* ---------- 1. Les cartes d'articles ---------- */
.bd-arts {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
}
.bd-arts li::before, .bd-arts li::marker { content: none !important; display: none !important; }

.bd-artc__l {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px;
  background: var(--bd-jour);
  border: 1px solid var(--bd-ligne-j);
  border-radius: 16px;
  text-decoration: none !important;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.bd-artc__l:hover {
  border-color: rgba(46, 95, 176, .3);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04), 0 20px 44px rgba(15, 23, 42, .07);
}
.bd-artc__l:hover .bd-artc__p { color: var(--bd-vif-h) !important; }

.bd-artc__cat {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: #EAF0FA;
  color: #24509A;
  font-size: .75rem;
  font-weight: 500;
}
.bd-artc__t {
  font-family: var(--bd-serif) !important;
  font-size: 1.375rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--bd-encre-j) !important;
  margin: 0 0 14px !important;
  text-wrap: balance;
}
.bd-artc__x {
  margin: 0 0 26px;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--bd-doux-j);
}
/* Le pied s'aligne en bas quelle que soit la hauteur du texte. */
.bd-artc__f {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--bd-ligne-j);
  font-size: .8125rem;
  color: var(--bd-doux-j);
}
.bd-artc__p {
  margin-left: auto;
  font-weight: 500;
  color: var(--bd-vif) !important;
  transition: color .2s ease;
}

.bd-bl-vide {
  margin: 0;
  padding: 40px 0;
  font-size: 1rem;
  color: var(--bd-doux-j);
  border-top: 1px solid var(--bd-ligne-j);
}

/* ---------- 2. La vidéothèque ---------- */
.bd-vids {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
}
.bd-vids li::before, .bd-vids li::marker { content: none !important; display: none !important; }

.bd-vid__l {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.bd-vid__l:focus-visible { outline: 2px solid var(--bd-vif); outline-offset: 3px; border-radius: 16px; }

.bd-vid__vig {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: #0F172A;
  margin-bottom: 16px;
}
.bd-vid__vig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,0,.2,1);
}
.bd-vid__l:hover .bd-vid__vig img { transform: scale(1.04); }

.bd-vid__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px; height: 54px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--bd-vif);
  padding-left: 3px;
  transition: transform .25s ease, background .25s ease;
}
.bd-vid__l:hover .bd-vid__play { transform: scale(1.08); background: #FFFFFF; }

.bd-vid__dur {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(11, 18, 32, .78);
  color: #FFFFFF;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
}

.bd-vid__cat {
  display: block;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bd-vif);
  margin-bottom: 8px;
}
.bd-vid__t {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--bd-encre-j);
  text-wrap: balance;
}

/* ---------- Le lecteur ---------- */
.bd-play {
  border: 0;
  padding: 0;
  background: none;
  max-width: 420px;
  width: calc(100% - 32px);
  overflow: visible;
}
.bd-play::backdrop { background: rgba(6, 10, 18, .88); backdrop-filter: blur(6px); }
.bd-play__v {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  border-radius: 16px;
  background: #000;
}
.bd-play__t {
  margin: 14px 0 0;
  font-size: .9375rem;
  color: #EDF1F7;
  text-align: center;
}
.bd-play__x {
  position: absolute;
  top: -44px; right: -4px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.bd-play__x:hover { background: rgba(255, 255, 255, .22); }
.bd-play__x:focus-visible { outline: 2px solid var(--bd-bleu); outline-offset: 2px; }

/* ---------- 3. Instagram ---------- */
.bd-res__pres {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--bd-ligne);
}
.bd-res__av {
  width: 86px; height: 86px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  flex: 0 0 auto;
  border: 2px solid rgba(124, 147, 199, .35);
}
.bd-res__id { margin-right: auto; }
.bd-res__h {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.5rem;
  color: #FFFFFF !important;
  text-decoration: none !important;
}
.bd-res__h:hover { color: var(--bd-bleu-h) !important; }
.bd-res__q {
  margin: 4px 0 0;
  font-size: .875rem;
  color: var(--bd-doux);
}
.bd-res__cta { flex: 0 0 auto; }

.bd-res__bio {
  margin: 0 0 32px;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--bd-doux);
  max-width: 62ch;
}

/* Le feed : cinq formats verticaux, comme sur Instagram. */
.bd-feed {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0 0 30px;
  padding: 0;
}
.bd-feed li::before, .bd-feed li::marker { content: none !important; display: none !important; }

.bd-feed__l {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: #0F172A;
  cursor: pointer;
}
.bd-feed__l img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,0,.2,1), opacity .25s ease;
}
.bd-feed__l:hover img { transform: scale(1.05); opacity: .82; }
.bd-feed__l:focus-visible { outline: 2px solid var(--bd-bleu); outline-offset: 3px; }

.bd-feed__p {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px; height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--bd-vif);
  padding-left: 2px;
}

.bd-res__plus {
  display: inline-block;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--bd-bleu) !important;
  text-decoration: none !important;
  transition: transform .2s ease;
}
.bd-res__plus:hover { transform: translateX(3px); color: var(--bd-bleu-h) !important; }

@media (max-width: 900px) {
  .bd-feed { grid-template-columns: repeat(3, 1fr); }
  .bd-feed__i:nth-child(n+4) { display: none; }
  .bd-res__pres { flex-wrap: wrap; }
  .bd-res__cta { width: 100%; justify-content: center; }
  .bd-vids { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .bd-vid__t { font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-vid__vig img, .bd-feed__l img, .bd-vid__play, .bd-res__plus { transition: none !important; }
  .bd-vid__l:hover .bd-vid__vig img, .bd-feed__l:hover img { transform: none; }
}

/* =========================================================
   ARTICLE — appels à réserver et articles liés
   ========================================================= */

/* L'appel glissé dans le fil du texte, avant le dernier intertitre.
   Il interrompt la lecture au moment où elle a porté — pas tout en bas,
   où le lecteur n'arrive jamais. */
.bd-art__cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 52px 0;
  padding: 26px 28px;
  background: var(--bd-jour-2);
  border: 1px solid var(--bd-ligne-j);
  border-radius: 16px;
  max-width: 68ch;
}
.bd-art__cta > div { margin-right: auto; }
.bd-art__cta strong {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--bd-encre-j);
  margin-bottom: 6px;
}
/* Ne viser que le texte de l'encart : ce sélecteur attrapait aussi le <span>
   du bouton, qui se retrouvait gris sur bleu. */
.bd-art__cta > div > span {
  display: block;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--bd-doux-j);
}
.bd-art__cta .bd-btn {
  flex: 0 0 auto;
  color: #FFFFFF !important;
}
.bd-art__cta .bd-btn span { color: #FFFFFF !important; }

/* Les articles liés */
.bd-s-art-lies {
  background: var(--bd-jour-2) !important;
  color: var(--bd-encre-j);
  border-top: 1px solid var(--bd-ligne-j);
}
.bd-s-art-lies .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-art-lies :focus-visible { outline-color: var(--bd-vif) !important; }
.bd-arts--lies { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (max-width: 768px) {
  .bd-art__cta { flex-direction: column; align-items: stretch; gap: 20px; }
  .bd-art__cta .bd-btn { justify-content: center; }
}

/* =========================================================
   ACCUEIL — l'alternance et les formes
   La forme signature est l'ARCHE : la porte du cabinet, l'arc vertébral.
   Le pétrole et le cyan sont échantillonnés dans son logo.
   ========================================================= */
:root {
  --bd-petrole: #2F7088;   /* le tronc du logo */
  --bd-cyan:    #31B4E5;   /* les feuilles du logo */
  --bd-brume:   #EDF3F6;   /* le pétrole, dilué : fond des sections claires */
}

/* LE SYSTÈME D'ARCHE — une seule forme, déclinée partout.
   Elle vient de deux endroits réels : la porte du cabinet, l'arc vertébral.

   .bd-s--arc     une section qui remonte en arche sur la précédente
   .bd-img--arc   une image en arche (plein cintre en haut)
   .bd-img--arcb  l'arche retournée (plein cintre en bas)
   .bd-img--rond  un cercle */
.bd-s--arc {
  border-radius: 80px 80px 0 0;
  margin-top: -60px !important;
  position: relative;
  z-index: 2;
}
.bd-img--arc  { border-radius: 999px 999px 16px 16px; overflow: hidden; }
.bd-img--arcb { border-radius: 16px 16px 999px 999px; overflow: hidden; }
.bd-img--rond { border-radius: 50%; overflow: hidden; aspect-ratio: 1; }
.bd-img--arc img, .bd-img--arcb img, .bd-img--rond img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Le décor : un bloc décalé derrière une image. */
.bd-cadre { position: relative; }
.bd-cadre__f {
  position: absolute;
  inset: -24px auto auto -24px;
  width: 100%; height: 100%;
  border-radius: 999px 999px 16px 16px;
  pointer-events: none;
}
.bd-cadre__f--brume   { background: var(--bd-brume); }
.bd-cadre__f--petrole { background: var(--bd-petrole); opacity: .18; }
.bd-cadre > figure { position: relative; z-index: 1; }

@media (max-width: 1024px) {
  .bd-s--arc { border-radius: 44px 44px 0 0; margin-top: -32px !important; }
  .bd-cadre__f { inset: -14px auto auto -14px; }
}

/* Les sections claires : palette inversée */
.bd-s-apropos,
.bd-s-deroule {
  background: var(--bd-jour) !important;
  color: var(--bd-encre-j);
}
.bd-s-deroule { background: var(--bd-brume) !important; }
.bd-s-apropos .bd-h2,
.bd-s-deroule .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-apropos .bd-rule,
.bd-s-deroule .bd-rule { background: var(--bd-petrole); }
.bd-s-apropos :focus-visible,
.bd-s-deroule :focus-visible { outline-color: var(--bd-vif) !important; }

/* ---------- Les formes ---------- */
.bd-arc,
.bd-bloc,
.bd-anneau { position: absolute; pointer-events: none; }

/* L'arche : plein cintre en haut, pied droit en bas. */
.bd-arc {
  border-radius: 999px 999px 12px 12px;
}
.bd-arc--petrole { background: var(--bd-petrole); opacity: .22; }
.bd-arc--cyan    { background: var(--bd-cyan);    opacity: .16; }

/* Le bloc : un rectangle décalé derrière la photo. */
.bd-bloc { border-radius: 999px 999px 16px 16px; }
.bd-bloc--petrole { background: var(--bd-brume); }

/* L'anneau : un trait fin de cyan, jamais plein. */
.bd-anneau {
  border: 1px solid var(--bd-cyan);
  border-radius: 50%;
  opacity: .28;
}

/* =========================================================
   1. HERO — le portrait dans l'arche
   ========================================================= */
.bd-s-hero { padding-top: 0 !important; padding-bottom: 90px !important; }
.bd-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  min-height: 84vh;
  padding: 150px 0 40px;
}
.bd-hero__text { position: relative; z-index: 2; }

.bd-hero__scene {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 560px;
}
.bd-hero__scene .bd-arc--petrole {
  left: 50%;
  bottom: 0;
  width: 400px;
  height: 520px;
  transform: translateX(-50%);
}
.bd-hero__scene .bd-anneau {
  right: 6%;
  top: 12%;
  width: 160px;
  height: 160px;
}

/* Le portrait épouse l'arche, et se dissout par le bas dans la nuit :
   un bord net en bas casserait l'effet. */
.bd-hero__img {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  max-width: 460px;
  border-radius: 999px 999px 12px 12px;
  overflow: hidden;
}
.bd-hero__img img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(.94) contrast(1.05);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

/* =========================================================
   2. À PROPOS — jour, portrait en arche, bloc décalé
   ========================================================= */
.bd-apropos {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.bd-apropos__scene { position: relative; }
.bd-apropos__scene .bd-bloc--petrole {
  left: -26px;
  top: -26px;
  width: 100%;
  height: 100%;
}
.bd-apropos__img {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 999px 999px 16px 16px;
  overflow: hidden;
}
.bd-apropos__img img {
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.bd-apropos__text p {
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--bd-doux-j);
  max-width: 52ch;
}

/* Les trois repères : une bande, pas trois cartes. */
.bd-faits {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none !important;
  margin: 40px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--bd-ligne-j);
}
.bd-faits li::before, .bd-faits li::marker { content: none !important; display: none !important; }
.bd-faits li {
  flex: 1 1 150px;
  padding: 0 24px;
  border-left: 1px solid var(--bd-ligne-j);
}
.bd-faits li:first-child { padding-left: 0; border-left: 0; }
.bd-faits strong {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--bd-encre-j);
  margin-bottom: 6px;
}
.bd-faits span {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--bd-doux-j);
}

/* =========================================================
   3. SPÉCIALITÉS — nuit, photo dans un cercle
   ========================================================= */
.bd-specs {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: center;
}
.bd-specs__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-arc-cyan {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  color: var(--bd-cyan);
  opacity: .55;
  pointer-events: none;
}
.bd-specs__img {
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.bd-specs__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.9) saturate(.95);
}

/* =========================================================
   4. DÉROULÉ — brume, quatre temps sur un chemin
   ========================================================= */
.bd-s-deroule .bd-lead { color: var(--bd-doux-j); }
.bd-etapes {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 60px 0 0;
  padding: 0;
  position: relative;
}
.bd-etapes li::before, .bd-etapes li::marker { content: none !important; display: none !important; }

/* Le chemin : un trait qui relie les quatre temps. Il dit que l'ordre compte. */
.bd-etapes::before {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 26px;
  height: 1px;
  background: linear-gradient(to right,
    transparent, var(--bd-petrole) 12%, var(--bd-petrole) 88%, transparent);
  opacity: .35;
}
.bd-etape {
  position: relative;
  padding: 0 22px;
  text-align: center;
}
.bd-etape__n {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--bd-jour);
  border: 1px solid var(--bd-petrole);
  color: var(--bd-petrole);
  font-family: var(--bd-serif);
  font-size: 1.25rem;
}
.bd-etape__t {
  font-family: var(--bd-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: var(--bd-encre-j) !important;
  margin: 0 0 12px !important;
}
.bd-etape p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--bd-doux-j);
}

/* =========================================================
   5. APPEL — nuit, l'arche se retourne
   ========================================================= */
.bd-s-final { padding-bottom: 110px !important; }
.bd-fin {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: center;
  padding-top: 40px;
}
.bd-fin__scene { position: relative; }
.bd-fin__scene .bd-arc--cyan {
  right: -24px;
  bottom: -24px;
  width: 84%;
  height: 78%;
  border-radius: 12px 12px 999px 999px;   /* l'arche retournée */
}
.bd-fin__img {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 12px 12px 999px 999px;   /* elle aussi */
  overflow: hidden;
}
.bd-fin__img img {
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
  filter: brightness(.88);
}
.bd-fin__text { text-align: left; }

@media (max-width: 1024px) {
  .bd-hero,
  .bd-apropos,
  .bd-specs,
  .bd-fin { grid-template-columns: 1fr; gap: 46px; }
  .bd-hero { min-height: 0; padding: 170px 0 30px; }
  .bd-hero__scene { order: -1; min-height: 420px; }
  .bd-hero__scene .bd-arc--petrole { width: 300px; height: 390px; }
  .bd-hero__scene .bd-anneau { width: 110px; height: 110px; right: 2%; }
  .bd-hero__img { max-width: 340px; }
  .bd-apropos__scene { order: -1; max-width: 380px; }
  .bd-apropos__scene .bd-bloc--petrole { left: -16px; top: -16px; }
  .bd-specs__scene { order: -1; max-width: 320px; margin: 0 auto; }
  .bd-fin__scene { max-width: 380px; }
  .bd-etapes { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .bd-etapes::before { display: none; }
}

@media (max-width: 620px) {
  .bd-etapes { grid-template-columns: 1fr; gap: 34px; }
  .bd-faits li { flex-basis: 100%; padding: 0 0 0 18px; border-left: 1px solid var(--bd-ligne-j); }
  .bd-faits li:first-child { padding-left: 18px; border-left: 1px solid var(--bd-ligne-j); }
}

/* =========================================================
   L'ALTERNANCE, DÉCLINÉE SUR TOUT LE SITE
   Le site n'est plus une suite de panneaux sombres.
   ========================================================= */

/* Toute section claire hérite de la même palette inversée : une seule règle
   plutôt qu'une par page — sinon elles divergent au premier changement. */
.bd-s-ap-philo,
.bd-s-ap-appr,
.bd-s-ap-spec,
.bd-s-sp-philo,
.bd-s-sp-doms,
.bd-s-sp-cit,
.bd-s-pr-vision,
.bd-s-pr-der,
.bd-s-pr-info,
.bd-s-pr-adapt,
.bd-s-bl-hero,
.bd-s-bl-articles,
.bd-s-bl-videos,
.bd-s-art-hero,
.bd-s-art-corps,
.bd-s-art-lies {
  color: var(--bd-encre-j);
}
.bd-s-ap-philo .bd-h2,
.bd-s-ap-appr .bd-h2,
.bd-s-ap-spec .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-ap-philo .bd-rule,
.bd-s-ap-appr .bd-rule,
.bd-s-ap-spec .bd-rule { background: var(--bd-petrole); }
.bd-s-ap-philo :focus-visible,
.bd-s-ap-appr :focus-visible,
.bd-s-ap-spec :focus-visible { outline-color: var(--bd-vif) !important; }

/* ---------- « À propos » en version jour ---------- */
.bd-s-ap-philo, .bd-s-ap-appr { background: var(--bd-jour) !important; }
.bd-s-ap-spec { background: var(--bd-brume) !important; }

/* La carte « Ma philosophie » devient un bloc clair, plus une carte dans la nuit. */
.bd-s-ap-philo .bd-carte {
  background: var(--bd-brume);
  border-color: rgba(47, 112, 136, .18);
}
.bd-s-ap-philo .bd-pilier { border-left-color: rgba(47, 112, 136, .18); }
.bd-s-ap-philo .bd-pilier h3 { color: var(--bd-encre-j) !important; }
.bd-s-ap-philo .bd-pilier p,
.bd-s-ap-philo .bd-carte__t p { color: var(--bd-doux-j); }
.bd-s-ap-philo .bd-pilier__ic { color: var(--bd-petrole); }

/* « Mon approche » : le texte et les repères passent au jour. */
.bd-s-ap-appr .bd-ap2-appr__text p { color: var(--bd-doux-j); }
.bd-s-ap-appr .bd-reperes { border-left-color: var(--bd-ligne-j); }
.bd-s-ap-appr .bd-reperes strong { color: var(--bd-encre-j); }
.bd-s-ap-appr .bd-reperes span { color: var(--bd-doux-j); }
.bd-s-ap-appr .bd-rep__ic { color: var(--bd-petrole); }

/* Les spécialités de la page « À propos », sur la brume. */
.bd-s-ap-spec .bd-lead { color: var(--bd-doux-j); }
.bd-s-ap-spec .bd-axe {
  background: var(--bd-jour);
  border-color: rgba(47, 112, 136, .16);
}
.bd-s-ap-spec .bd-axe strong { color: var(--bd-encre-j); }
.bd-s-ap-spec .bd-axe span { color: var(--bd-doux-j); }
.bd-s-ap-spec .bd-axe__ic { color: var(--bd-petrole); }
.bd-s-ap-spec .bd-publics li {
  border-color: rgba(47, 112, 136, .22);
  color: var(--bd-encre-j);
}
.bd-s-ap-spec .bd-eyebrow { color: var(--bd-petrole); }

/* ---------- Les images prennent la forme ---------- */
.bd-ap2-hero__img,
.bd-carte__img,
.bd-ap2-appr__img,
.bd-ap2-memo__img,
.bd-pr-hero__img,
.bd-pr-vision__img,
.bd-sp-hero__img,
.bd-pr-fin__img {
  border-radius: 999px 999px 16px 16px !important;
}
/* Les bandes de trois photos gardent leur rectangle : trois arches d'affilée,
   ce serait la forme qui parle plus que le contenu. */
.bd-terr-gal figure,
.bd-ct-gal figure { border-radius: 20px !important; }

/* Le cercle est réservé à ce qui est vraiment central. */
.bd-ap2-memo--photo .bd-ap2-memo__img { border-radius: 16px 16px 999px 999px !important; }

/* Les scènes de hero des pages intérieures : mêmes formes que l'accueil. */
.bd-ap2-hero__scene,
.bd-sp-hero__scene,
.bd-pr-hero__scene {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-ap2-hero__scene .bd-arc--petrole {
  left: 50%; bottom: 0;
  width: 380px; height: 480px;
  transform: translateX(-50%);
}
.bd-ap2-hero__scene .bd-anneau {
  right: 4%; top: 8%;
  width: 140px; height: 140px;
}
.bd-sp-hero__scene .bd-arc--cyan {
  left: 50%; top: 50%;
  width: 92%; height: 118%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
}
.bd-pr-hero__scene .bd-arc--petrole {
  right: -30px; bottom: -30px;
  width: 78%; height: 82%;
  border-radius: 16px 16px 999px 999px;
}
.bd-ap2-hero__img,
.bd-sp-hero__img,
.bd-pr-hero__img { position: relative; z-index: 1; }

/* Le cadre décalé de la carte « Ma philosophie ». */
.bd-carte--photo .bd-cadre { align-self: stretch; }
.bd-carte--photo .bd-cadre > figure { height: 100%; }

@media (max-width: 1100px) {
  .bd-ap2-hero__scene .bd-arc--petrole { width: 290px; height: 370px; }
  .bd-ap2-hero__scene .bd-anneau { width: 100px; height: 100px; }
}

/* La vraie signature de Benjamin — un tracé blanc, fait pour le fond sombre.
   Elle remplace la police cursive qui l'imitait. */
.bd-sign {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
}
@media (max-width: 700px) { .bd-sign { width: 240px; } }

/* =========================================================
   PAGE CONTACT
   ========================================================= */
.bd-s-ct2-voies,
.bd-s-ct2-corps,
.bd-s-ct2-lieu { color: var(--bd-encre-j); }
.bd-s-ct2-voies, .bd-s-ct2-corps { background: var(--bd-jour) !important; }
.bd-s-ct2-lieu { background: var(--bd-brume) !important; }
.bd-s-ct2-voies .bd-h2,
.bd-s-ct2-corps .bd-h2,
.bd-s-ct2-lieu .bd-h2 { color: var(--bd-encre-j) !important; }
.bd-s-ct2-corps .bd-rule,
.bd-s-ct2-lieu .bd-rule { background: var(--bd-petrole); }
.bd-s-ct2-lieu .bd-lead { color: var(--bd-doux-j); }
.bd-s-ct2-voies :focus-visible,
.bd-s-ct2-corps :focus-visible,
.bd-s-ct2-lieu :focus-visible { outline-color: var(--bd-vif) !important; }

/* ---------- Hero ---------- */
.bd-ct2-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 150px 0 20px;
}
.bd-ct2-hero__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-ct2-hero__scene .bd-arc--petrole {
  left: 50%; bottom: -20px;
  width: 360px; height: 470px;
  transform: translateX(-50%);
}
.bd-ct2-hero__scene .bd-anneau {
  right: 2%; top: 4%;
  width: 130px; height: 130px;
}
.bd-ct2-hero__img {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  max-width: 420px;
}
.bd-ct2-hero__img img { filter: brightness(.92); }

/* ---------- Les trois voies ----------
   Pas de hover sur les blocs : seul le lien réagit. Une carte qui se soulève
   au survol suggère qu'elle est cliquable en entier — ici elle ne l'est pas. */
.bd-voies {
  list-style: none !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}
.bd-voies li::before, .bd-voies li::marker { content: none !important; display: none !important; }
.bd-voie {
  padding: 0 36px;
  border-left: 1px solid var(--bd-ligne-j);
}
.bd-voie:first-child { padding-left: 0; border-left: 0; }
.bd-voie:last-child { padding-right: 0; }
.bd-voie__ic {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--bd-brume);
  color: var(--bd-petrole);
  margin-bottom: 20px;
}
.bd-voie strong {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--bd-encre-j);
  margin-bottom: 8px;
}
.bd-voie__d {
  display: block;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--bd-doux-j);
  margin-bottom: 16px;
}
.bd-voie__l {
  display: inline-block;
  font-size: .875rem;
  font-weight: 500;
  color: var(--bd-vif) !important;
  text-decoration: none !important;
  transition: transform .2s ease;
}
.bd-voie__l:hover { transform: translateX(3px); }

/* ---------- Le cabinet + le formulaire ---------- */
.bd-ct2-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}
.bd-ct2-faits { list-style: none !important; margin: 0 0 34px; padding: 0; }
.bd-ct2-faits li::before, .bd-ct2-faits li::marker { content: none !important; display: none !important; }
.bd-ct2-faits li {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--bd-ligne-j);
}
.bd-ct2-faits li:first-child { padding-top: 0; }
.bd-ct2-faits svg { flex: 0 0 auto; color: var(--bd-petrole); margin-top: 2px; }
.bd-ct2-faits strong {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bd-encre-j);
  margin-bottom: 3px;
}
.bd-ct2-faits span {
  display: block;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--bd-doux-j);
}

/* Le plan est en style sombre : il rappelle la nuit du site au milieu du jour. */
.bd-ct2-map {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none !important;
}
.bd-ct2-map img { width: 100%; height: auto; display: block; }
.bd-ct2-map__b {
  position: absolute;
  right: 14px; bottom: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(11, 18, 32, .88);
  color: #FFFFFF;
  font-size: .8125rem;
  font-weight: 500;
}
.bd-ct2-map:hover .bd-ct2-map__b { background: var(--bd-vif); }

.bd-ct2-form {
  background: var(--bd-brume);
  border-radius: 24px;
  padding: 40px 36px;
}
.bd-ct2-form .bd-h2 { margin-bottom: 10px !important; }
.bd-ct2-form__s {
  margin: 0 0 26px;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--bd-doux-j);
}

/* Le formulaire CF7 : on l'habille, on ne le remplace pas. */
.bd-cf7 .wpcf7 { margin: 0; padding: 0; background: none; }
.bd-cf7 .wpcf7-form p { margin: 0 0 16px; }
.bd-cf7 label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bd-encre-j);
  margin-bottom: 7px;
}
.bd-cf7 input[type="text"],
.bd-cf7 input[type="email"],
.bd-cf7 input[type="tel"],
.bd-cf7 textarea,
.bd-cf7 select {
  width: 100%;
  padding: 13px 16px;
  background: var(--bd-jour);
  border: 1px solid var(--bd-ligne-j);
  border-radius: 10px;
  font-family: var(--bd-sans);
  font-size: .9375rem;
  color: var(--bd-encre-j);
}
.bd-cf7 textarea { min-height: 130px; resize: vertical; }
.bd-cf7 input:focus, .bd-cf7 textarea:focus, .bd-cf7 select:focus {
  outline: 2px solid var(--bd-vif);
  outline-offset: 1px;
  border-color: var(--bd-vif);
}
.bd-cf7 ::placeholder { color: #8494AC; }   /* 4,6:1 sur blanc : lisible */

.bd-cf7 input[type="submit"] {
  width: 100%;
  padding: 15px 30px;
  background: var(--bd-vif);
  border: 0;
  border-radius: 999px;
  color: #FFFFFF;
  font-family: var(--bd-sans);
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease;
}
.bd-cf7 input[type="submit"]:hover { background: var(--bd-vif-h); }
.bd-cf7 .wpcf7-response-output {
  margin: 18px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 10px;
  font-size: .875rem;
}
.bd-cf7 .wpcf7-not-valid-tip { font-size: .8125rem; color: #B42318; }

/* ---------- Le lieu ---------- */
.bd-ct2-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.bd-ct2-gal figure {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.bd-ct2-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-ct2-gal figure:nth-child(2) { transform: translateY(26px); }

/* ---------- L'appel ---------- */
.bd-ct2-fin {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
}
.bd-ct2-fin .bd-h2 { margin-bottom: 10px !important; }
.bd-ct2-fin p {
  margin: 0 0 22px;
  font-size: .9375rem;
  color: var(--bd-doux);
}

@media (max-width: 1024px) {
  .bd-ct2-hero,
  .bd-ct2-grille,
  .bd-ct2-fin { grid-template-columns: 1fr; gap: 40px; }
  .bd-ct2-hero { padding-top: 190px; }
  .bd-ct2-hero__scene { order: -1; }
  .bd-ct2-hero__scene .bd-arc--petrole { width: 280px; height: 360px; }
  .bd-voies { grid-template-columns: 1fr; gap: 34px; }
  .bd-voie { padding: 0; border-left: 0; }
  .bd-voie + .bd-voie { border-top: 1px solid var(--bd-ligne-j); padding-top: 30px; }
  .bd-ct2-gal { grid-template-columns: 1fr; gap: 18px; }
  .bd-ct2-gal figure { aspect-ratio: 16 / 10; }
  .bd-ct2-gal figure:nth-child(2) { transform: none; }
  .bd-ct2-form { padding: 32px 24px; }
  .bd-btn--vif { justify-content: center; }
}

/* =========================================================
   HEADER — une capsule flottante
   Détachée du haut, transparente en haut de page, elle se « pose »
   au scroll : le fond apparaît, elle remonte un peu. Elle reste
   accessible — le bouton de rendez-vous ne disparaît plus.
   ========================================================= */
body.bd-bio #site-elementor-header,
body.bd-bio .aux-elementor-header,
body.bd-bio .aux-header,
body.bd-bio .aux-top-bar,
body.bd-bio .aux-sticky-header,
body.bd-bio .offcanvas-header,
body.bd-bio .site-header,
body.bd-bio #site-header { display: none !important; }

.bd-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 26px 24px 0;
  /* On n'anime qu'un transform : jamais le padding, qui force un recalcul. */
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.bd-hdr--pose { transform: translateY(-10px); }

.bd-hdr__in {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 14px 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* La capsule n'apparaît qu'une fois posée. */
.bd-hdr--pose .bd-hdr__in {
  background: rgba(11, 18, 32, .72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-color: rgba(237, 241, 247, .10);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .28);
}
/* Sur les pages qui commencent en clair, la capsule est blanche. */
body.bd-jour .bd-hdr--pose .bd-hdr__in {
  background: rgba(255, 255, 255, .82);
  border-color: rgba(15, 23, 42, .08);
  box-shadow: 0 10px 40px rgba(15, 23, 42, .10);
}

/* ---------- La marque ---------- */
.bd-marque {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  text-decoration: none !important;
}
.bd-marque__logo { width: 38px; height: auto; flex: 0 0 auto; }
.bd-marque__n {
  display: block;
  font-family: var(--bd-serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1.25;
}
.bd-marque__q {
  display: block;
  font-family: var(--bd-serif);
  font-size: .8125rem;
  font-style: italic;
  color: var(--bd-doux);
  line-height: 1.2;
}
body.bd-jour .bd-marque__n { color: var(--bd-encre-j); }
body.bd-jour .bd-marque__q { color: var(--bd-doux-j); }
body.bd-jour .bd-marque__logo { filter: brightness(.55) saturate(1.3); }

/* ---------- La navigation ---------- */
.bd-nav { display: flex; align-items: center; gap: 30px; }
.bd-nav__l {
  position: relative;
  font-family: var(--bd-sans);
  font-size: .875rem;
  color: var(--bd-clair) !important;
  text-decoration: none !important;
  padding: 6px 0;
  white-space: nowrap;
}
body.bd-jour .bd-nav__l { color: var(--bd-encre-j) !important; }

/* Le trait pousse depuis la gauche : on n'anime qu'un transform. */
.bd-nav__l::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bd-cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.bd-nav__l:hover::after,
.bd-nav__l--ici::after { transform: scaleX(1); }
.bd-nav__l--ici { color: #FFFFFF !important; }
body.bd-jour .bd-nav__l--ici { color: var(--bd-vif) !important; }
body.bd-jour .bd-nav__l::after { background: var(--bd-vif); }
.bd-nav__l:focus-visible { outline: 2px solid var(--bd-cyan); outline-offset: 4px; border-radius: 3px; }

/* ---------- Le bouton ---------- */
.bd-hdr__cta {
  flex: 0 0 auto;
  padding: 12px 24px;
  font-size: .8125rem;
  border-radius: 999px;
  background: var(--bd-bleu);
  border-color: var(--bd-bleu);
  color: #0B1220 !important;
}
.bd-hdr__cta:hover { background: var(--bd-bleu-h); border-color: var(--bd-bleu-h); color: #0B1220 !important; }
body.bd-jour .bd-hdr__cta {
  background: var(--bd-vif);
  border-color: var(--bd-vif);
  color: #FFFFFF !important;
}
body.bd-jour .bd-hdr__cta:hover { background: var(--bd-vif-h); border-color: var(--bd-vif-h); }

/* ---------- Le burger ---------- */
.bd-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;   /* cible tactile au seuil WCAG */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.bd-burger span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--bd-clair);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
body.bd-jour .bd-burger span { background: var(--bd-encre-j); }
/* Les deux traits se croisent : le burger devient une croix. */
.bd-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.bd-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
.bd-burger:focus-visible { outline: 2px solid var(--bd-cyan); outline-offset: 2px; border-radius: 8px; }

/* ---------- Le menu plein écran ---------- */
.bd-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 110px 30px calc(40px + env(safe-area-inset-bottom));
  background: rgba(11, 18, 32, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bd-menu[hidden] { display: none; }
body.bd-fige { overflow: hidden; }

.bd-menu__nav { display: flex; flex-direction: column; gap: 4px; }
.bd-menu .bd-nav__l {
  font-family: var(--bd-serif);
  font-size: 1.75rem;
  color: #FFFFFF !important;
  padding: 14px 0;
  border-bottom: 1px solid rgba(237, 241, 247, .08);
}
.bd-menu .bd-nav__l::after { display: none; }
.bd-menu .bd-nav__l--ici { color: var(--bd-cyan) !important; }

.bd-menu__cta { margin-top: 32px; justify-content: center; }
.bd-menu__tel {
  margin-top: 18px;
  text-align: center;
  font-family: var(--bd-serif);
  font-size: 1.375rem;
  color: var(--bd-doux) !important;
  text-decoration: none !important;
}

@media (max-width: 1024px) {
  .bd-hdr { padding: 16px 16px 0; }
  .bd-hdr__in { gap: 14px; padding: 10px 10px 10px 16px; }
  .bd-nav { display: none; }
  .bd-hdr__cta { display: none; }
  .bd-burger { display: flex; }
  /* La capsule se pose dès le départ sur mobile : sans fond, le burger
     serait illisible sur une photo. */
  .bd-hdr .bd-hdr__in {
    background: rgba(11, 18, 32, .72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(237, 241, 247, .10);
  }
  body.bd-jour .bd-hdr .bd-hdr__in {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(15, 23, 42, .08);
  }
  .bd-marque__n { font-size: 1rem; }
  .bd-marque__q { font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-hdr, .bd-hdr__in, .bd-nav__l::after, .bd-burger span { transition: none !important; }
  .bd-hdr--pose { transform: none; }
}

/* =========================================================
   L'ACCORDÉON DES SPÉCIALITÉS (accueil)
   Perdu en réécrivant le CSS de l'accueil : les <details> retombaient
   sur le triangle par défaut du navigateur.
   ========================================================= */
.bd-spec { border-bottom: 1px solid var(--bd-ligne); }
.bd-spec:first-of-type { border-top: 1px solid var(--bd-ligne); }

.bd-spec summary {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 46px 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--bd-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--bd-clair);
  transition: color .2s ease;
}
.bd-spec summary::-webkit-details-marker { display: none; }
.bd-spec summary::marker { content: ""; }
.bd-spec summary:hover { color: #FFFFFF; }
.bd-spec summary:focus-visible { outline: 2px solid var(--bd-cyan); outline-offset: 2px; }

/* Deux traits superposés : le vertical pivote et disparaît sous l'horizontal.
   Le « + » devient un « − ». On n'anime qu'un transform. */
.bd-spec summary::before,
.bd-spec summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 13px;
  height: 1px;
  background: var(--bd-cyan);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.bd-spec summary::before { transform: translateY(-50%); }
.bd-spec summary::after  { transform: translateY(-50%) rotate(90deg); }
.bd-spec[open] summary::after { transform: translateY(-50%) rotate(0deg); }

.bd-spec__c { padding: 0 46px 24px 0; }
.bd-spec__c p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--bd-doux);
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .bd-spec summary::before, .bd-spec summary::after { transition: none; }
}

/* =========================================================
   LA SIGNATURE — le vrai tracé de Benjamin
   Deux versions : blanche pour les fonds sombres, encre pour les fonds
   clairs. Un tracé blanc sur du blanc, ça ne se voit pas.
   ========================================================= */
.bd-sign {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.bd-sign--ftr { margin: 22px 0 0; opacity: .9; }
/* Dans le bloc auteur d'un article : elle remplace le nom tapé. */
.bd-sign--art { margin: 0 0 2px -4px; }

@media (max-width: 700px) {
  .bd-sign { width: 200px !important; }
  .bd-sign--art { width: 160px !important; }
}

/* ═══ L'IDÉE CENTRALE ═════════════════════════════════════════════════
   Cette section portait quatre « principes » — approche globale, écoute,
   traitement personnalisé, prévention — repris tels quels de
   paris17-osteo.fr. Or ce site n'a pas le même rôle : il parle de la
   personne et de sa pratique, pas du cabinet.
   Les sept facteurs sont énumérés, pas mis en pastilles : la pastille est
   le traitement retenu sur paris17, et les deux sites ne doivent pas se
   ressembler. */
.bd-idee{
  display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,64px);
  align-items:start;
}
@media(min-width:900px){ .bd-idee{ grid-template-columns:1.05fr .95fr; } }
.bd-idee__t h2{ max-width:15ch; }
.bd-idee__t .bd-lead{ margin:18px 0 20px; max-width:40ch; }
.bd-idee__t p{ line-height:1.8; max-width:52ch; }

.bd-idee__f{
  background:var(--bd-brume); border-radius:26px;
  padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,34px);
}
.bd-idee__k{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--bd-vif); font-weight:600; margin:0 0 20px;
}
.bd-idee__liste{ list-style:none; margin:0; padding:0; counter-reset:f; }
.bd-idee__liste li{
  counter-increment:f; position:relative;
  padding:14px 0 14px 40px; border-top:1px solid rgba(11,18,32,.10);
}
.bd-idee__liste li:first-child{ border-top:0; padding-top:0; }
.bd-idee__liste li::before{
  content:counter(f,decimal-leading-zero); position:absolute; left:0;
  top:16px; font-size:.7rem; letter-spacing:.06em;
  color:var(--bd-cyan); font-weight:600;
}
.bd-idee__liste li:first-child::before{ top:2px; }
.bd-idee__liste b{ display:block; color:var(--bd-nuit); font-weight:600; font-size:1rem; }
.bd-idee__liste span{ display:block; font-size:.9rem; line-height:1.6; color:var(--bd-doux); margin-top:2px; }

@media(max-width:700px){
  .bd-idee__f{ padding:24px 20px; }
  .bd-idee__liste li{ padding-left:34px; }
}

/* ═══ LE RÉCIT ════════════════════════════════════════════════════════
   Ce site répond à « qui, pourquoi, comment », pas à « que soigne-t-on ».
   D'où un traitement éditorial : de longues colonnes de texte, une
   citation mise en avant, pas de grille de cartes — la grille de cartes
   est le langage de paris17-osteo.fr. */

/* ── pourquoi ce métier ── */
.bd-recit{ display:grid; grid-template-columns:1fr; gap:clamp(24px,3vw,52px); align-items:start; }
@media(min-width:900px){ .bd-recit{ grid-template-columns:.8fr 1.2fr; } }
.bd-recit__t h2{ max-width:13ch; }
.bd-recit__c p{ font-size:1.04rem; line-height:1.85; margin-bottom:18px; max-width:58ch; }
.bd-recit__c p:last-child{ margin-bottom:0; }
.bd-recit__c b{ font-weight:600; }

/* ── ce qui a changé ── */
.bd-evol__t{ max-width:56ch; margin-bottom:clamp(28px,3.5vw,46px); }
.bd-evol__t h2{ max-width:22ch; }
.bd-evol__t .bd-lead{ margin-top:16px; }

.bd-evol__c{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:980px){ .bd-evol__c{ grid-template-columns:repeat(3,1fr); align-items:start; } }

.bd-evol__b{ padding-top:22px; border-top:2px solid rgba(46,95,176,.18); }
.bd-evol__b h3{
  font-size:1.06rem; font-weight:600; margin:0 0 12px;
  color:var(--bd-nuit); letter-spacing:-.01em;
}
.bd-evol__b p{ font-size:.95rem; line-height:1.75; margin-bottom:12px; }
.bd-evol__b p:last-child{ margin-bottom:0; }

/* le troisième bloc est le cœur du récit : il porte l'accent */
.bd-evol__b--fort{ border-top-color:var(--bd-cyan); }
.bd-evol__b--fort h3{ color:var(--bd-vif); }



.bd-evol__fin{
  margin:clamp(30px,3.5vw,44px) auto 0; max-width:62ch; text-align:center;
  font-size:1.08rem; line-height:1.8; color:var(--bd-nuit);
}

@media(max-width:700px){ .bd-evol__note{ padding:14px 15px; } }

/* ── fonds des deux sections du récit ──────────────────────────────────
   Sur ce site, .bd-h2 est blanc par défaut : les panneaux sombres sont la
   norme, et chaque section claire doit se déclarer. Mes deux sections
   n'avaient aucune déclaration — le titre sortait donc en blanc sur fond
   clair, invisible. */

/* « Pourquoi ce métier » : panneau nuit. C'est le moment le plus personnel
   de la page, il porte le poids du récit — et il alterne avec les sections
   claires qui l'encadrent. */
.bd-s-ap-pourquoi{ background: var(--bd-nuit) !important; }
.bd-s-ap-pourquoi .bd-eyebrow{ color: var(--bd-cyan) !important; }
.bd-s-ap-pourquoi .bd-rule{ background: var(--bd-cyan) !important; }
.bd-s-ap-pourquoi .bd-recit__c p{ color: var(--bd-clair) !important; }
.bd-s-ap-pourquoi .bd-recit__c b{ color: #fff !important; }

/* « Ce qui a changé depuis » : clair, pour alterner avec le terrain. */
.bd-s-ap-evol{ background: var(--bd-jour) !important; }
.bd-s-ap-evol .bd-h2{ color: var(--bd-encre-j) !important; }
.bd-s-ap-evol .bd-eyebrow{ color: var(--bd-vif) !important; }
.bd-s-ap-evol .bd-rule{ background: var(--bd-vif) !important; }
.bd-s-ap-evol .bd-lead{ color: var(--bd-encre-j) !important; opacity: .75; }
.bd-s-ap-evol .bd-evol__b p{ color: #4A5568 !important; }
.bd-s-ap-evol .bd-evol__b h3{ color: var(--bd-encre-j) !important; }
.bd-s-ap-evol .bd-evol__b--fort h3{ color: var(--bd-vif) !important; }
.bd-s-ap-evol .bd-evol__fin{ color: var(--bd-encre-j) !important; }


/* ── l'aparté ─────────────────────────────────────────────────────────
   La précision sur l'absence de formation était enfermée dans une boîte
   grise, au fond d'une colonne de 400 px : la troisième colonne faisait
   505 px de haut contre 189 pour les deux autres, et l'encadré cassait
   le rythme éditorial.
   Sortie de la grille, elle devient ce qu'elle est : un aparté de
   l'auteur. Pas de boîte — un filet, un intertitre discret, et du serif.
   C'est ce que ferait un magazine, pas une interface. */
.bd-aparte{
  margin: clamp(38px,4.5vw,58px) 0 0;
  padding-top: clamp(26px,3vw,34px);
  border-top: 1px solid rgba(46,95,176,.22);
  max-width: 68ch;
}
.bd-aparte__k{
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bd-vif); font-weight: 600; margin: 0 0 16px;
}
.bd-aparte blockquote{ margin: 0; padding: 0; border: 0; }
.bd-aparte blockquote p{
  font-family: var(--bd-serif, Georgia, serif);
  font-size: clamp(1.06rem, 1.7vw, 1.25rem);
  line-height: 1.72; margin: 0 0 14px;
}
.bd-aparte blockquote p:last-child{ margin-bottom: 0; font-size: .98rem; opacity: .78; }
.bd-aparte em{ font-style: italic; }

/* les trois colonnes reviennent à des hauteurs comparables */
.bd-evol__b p:last-child{ margin-bottom: 0; }

.bd-evol__fin{
  margin: clamp(34px,4vw,50px) 0 0; max-width: 62ch; text-align: left;
  font-family: var(--bd-serif, Georgia, serif);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.7;
}

@media(max-width:700px){
  .bd-aparte{ padding-top: 22px; }
}

/* Sur ce site le texte est clair par défaut (les panneaux sombres sont la
   norme) : toute nouvelle classe posée dans une section claire doit
   déclarer sa couleur, sinon elle sort en blanc cassé sur blanc.
   Troisième fois que ce piège se referme — d'où ce commentaire. */
.bd-s-ap-evol .bd-aparte blockquote p{ color: #2C3648 !important; }
.bd-s-ap-evol .bd-aparte blockquote p:last-child{ color: #55617A !important; opacity: 1; }
.bd-s-ap-evol .bd-aparte em{ color: var(--bd-vif) !important; font-style: italic; }
.bd-s-ap-evol .bd-aparte{ border-top-color: rgba(46,95,176,.26); }

/* ── ce que je fais en séance ──────────────────────────────────────────
   Cette section portait « Écoute & échange · Bilan · Traitement ·
   Conseils » — les quatre mêmes temps que paris17-osteo.fr. Or les deux
   sites ne doivent pas se ressembler, et surtout : ce déroulé décrit
   n'importe quelle consultation d'ostéopathie.
   Ce qui suit décrit SA façon de travailler — comprendre, faire
   comprendre, traiter en profondeur — telle qu'il la formule. */
.bd-fait__t{ max-width:60ch; margin-bottom:clamp(30px,4vw,50px); }
.bd-fait__t h2{ max-width:24ch; }
.bd-fait__t .bd-lead{ margin-top:16px; max-width:52ch; }

.bd-fait__c{ display:grid; grid-template-columns:1fr; gap:clamp(22px,2.6vw,34px); }
@media(min-width:980px){ .bd-fait__c{ grid-template-columns:repeat(3,1fr); align-items:start; } }

.bd-fait__b{ padding-top:24px; border-top:2px solid rgba(49,180,229,.30); }
.bd-fait__n{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bd-cyan); font-weight:600; margin:0 0 12px;
}
.bd-fait__b h3{
  font-family:var(--bd-serif, Georgia, serif); font-weight:400;
  font-size:1.24rem; line-height:1.3; margin:0 0 12px;
}
.bd-fait__b p{ font-size:.95rem; line-height:1.78; margin:0; }

/* ── couleurs des sections claires ────────────────────────────────────
   Le texte de ce site est clair par défaut : les panneaux nuit sont la
   norme, et chaque section claire doit déclarer ses couleurs. Je me suis
   fait prendre quatre fois. Cette règle couvre donc d'un coup toutes les
   classes que j'ai introduites, dans toutes les sections claires. */
.bd-s-pr-der .bd-fait__b p,
.bd-s-pr-der .bd-fait__t .bd-lead{ color: #55617A !important; }
.bd-s-pr-der .bd-fait__b h3{ color: var(--bd-encre-j) !important; }
/* le cyan tombe à 2,4 sur fond clair : on prend le bleu, mesuré à 6,2 */
.bd-s-pr-der .bd-fait__n{ color: var(--bd-vif) !important; }
.bd-s-pr-der .bd-fait__b{ border-top-color: rgba(46,95,176,.28); }

/* ── accueil : l'introduction personnelle ─────────────────────────────
   Cette section portait « Une séance, en quatre temps » — Écouter,
   Évaluer, Traiter, Prolonger. C'était le dernier calque de
   paris17-osteo.fr, et ce déroulé décrit de toute façon n'importe quelle
   consultation d'ostéopathie.
   L'accueil de CE site doit présenter la personne et router vers la
   profondeur : d'où il vient, comment il travaille. */
.bd-intro{
  display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,64px); align-items:center;
}
@media(min-width:900px){ .bd-intro{ grid-template-columns:.85fr 1.15fr; } }
.bd-intro__sc{ position:relative; justify-self:center; }
.bd-intro__img{ position:relative; z-index:1; margin:0; max-width:380px; }
.bd-intro__img img{ width:100%; height:auto; display:block; }
.bd-intro__t h2{ max-width:18ch; }
.bd-intro__t .bd-lead{ margin:18px 0 18px; max-width:44ch; }
.bd-intro__t p{ line-height:1.8; max-width:54ch; }

.bd-intro__liens{ display:flex; flex-wrap:wrap; gap:26px; margin-top:26px; }
.bd-lien-fl{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  text-decoration:none; font-weight:600; font-size:.98rem;
  color:var(--bd-cyan); border-bottom:1px solid transparent;
  transition:border-color .2s, gap .2s;
}
.bd-lien-fl:hover{ border-bottom-color:currentColor; gap:14px; }
@media(prefers-reduced-motion:reduce){ .bd-lien-fl{ transition:none; } }

/* ── ornements des sections du récit ──────────────────────────────────
   Les sections ajoutées étaient justes mais nues : du texte en colonnes,
   sans le vocabulaire visuel du site. On les rattache au système existant
   (arcs, anneaux, arbre-colonne) plutôt que d'inventer d'autres formes.

   RAPPEL : sur ce site la couleur de texte par défaut est CLAIRE.
   Toute règle posée dans une section claire doit déclarer sa couleur. */

/* l'emblème arbre — marque de section, pas décor de fond.
   Le PNG est cyan sur transparent : lisible sur clair comme sur nuit. */
.bd-embleme{
  display: block; width: 46px; height: auto;
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  opacity: .85;
}

/* photo d'appui : comble la colonne courte et donne un point d'ancrage */
.bd-ill{ margin: clamp(30px, 3.4vw, 44px) 0 0; }
.bd-ill img{
  display: block; width: 100%;
  border-radius: 6px 6px 130px 130px;   /* même arc que .bd-img--arc */
}
.bd-idee .bd-ill img{ height: 200px; object-fit: cover; object-position: center 38%; }
.bd-recit .bd-ill{ max-width: 300px; }
.bd-recit .bd-ill img{
  height: 300px; object-fit: cover; object-position: center 22%;
  filter: saturate(.5) contrast(1.04);   /* s'accorde au panneau nuit */
}

/* panneau nuit « Ce sont les mains » : arc pétrole + anneau, comme les héros */
.bd-s-ap-pourquoi{ position: relative; overflow: hidden; }
.bd-s-ap-pourquoi::before{
  content: ''; position: absolute; left: -120px; bottom: -180px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(47,112,136,.30), transparent 68%);
  pointer-events: none; z-index: 0;
}
.bd-s-ap-pourquoi::after{
  content: ''; position: absolute; right: 6%; top: 14%;
  width: 190px; height: 190px; border-radius: 50%;
  border: 1px solid rgba(49,180,229,.22); pointer-events: none; z-index: 0;
}
.bd-s-ap-pourquoi .elementor-container,
.bd-s-ap-pourquoi .e-con-inner{ position: relative; z-index: 1; }

@media(max-width: 900px){
  .bd-embleme{ width: 38px; }
  .bd-idee .bd-ill img{ height: 200px; }
  .bd-recit .bd-ill{ max-width: 240px; margin-inline: auto; }
  .bd-recit .bd-ill img{ height: 300px; }
  .bd-s-ap-pourquoi::after{ display: none; }
  .bd-s-ap-pourquoi::before{ width: 260px; height: 260px; left: -100px; bottom: -140px; }
}

/* équilibre des colonnes une fois la photo posée */
.bd-idee__f, .bd-recit__c{ align-self: center; }
@media(max-width: 900px){ .bd-idee__f, .bd-recit__c{ align-self: start; } }

/* forme signature de .bd-idee — l'onde naît au centre, se lit au bord */
.bd-schema{ margin: clamp(30px, 3.4vw, 42px) 0 0; }
.bd-schema svg{ display: block; width: 100%; height: auto; overflow: hidden; }
.bd-idee .bd-schema__l{
  font-family: inherit; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; fill: #6C7A8C;   /* texte clair par défaut sur ce site */
}
.bd-idee .bd-schema__l--fort{ fill: #0B1220; }
@media(max-width: 900px){ .bd-idee .bd-schema__l{ font-size: 15px; } }

/* texture fibreuse du panneau nuit — masquée en dégradé pour qu'elle se
   dissolve dans le fond : c'est de la matière, pas une photo encadrée. */
.bd-recit .bd-fibre{
  margin: clamp(26px, 3vw, 38px) 0 0;
  height: clamp(230px, 26vw, 330px);
  background: url('/wp-content/uploads/bd/bd-fibre.jpg') no-repeat 42% 46% / cover;
  opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 60% 58% at 46% 50%, #000 34%, transparent 76%);
          mask-image: radial-gradient(ellipse 60% 58% at 46% 50%, #000 34%, transparent 76%);
}
@media(max-width: 900px){ .bd-recit .bd-fibre{ height: 190px; } }

/* marque de section — même motif d'onde que le schéma de .bd-idee.
   NE PAS nommer .bd-marque : cette classe est déjà le bloc de marque
   du header (logo + nom) et une règle de fin de fichier lécrase. */
.bd-onde{
  display: block; width: 44px; height: auto;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}
@media(max-width: 900px){ .bd-onde{ width: 36px; } }