/* =========================================================================
   BAUDEAU Successions & Héritiers — feuille de style principale
   Mobile-first : tout est écrit pour le petit écran, les media queries
   n'ajoutent que ce qui devient possible quand la place le permet.
   ========================================================================= */

/* --- Polices locales (aucun appel à Google : RGPD + performance) --------- */
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/cinzel-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/sourcesans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Jetons de conception ------------------------------------------------
   Les ors sont échantillonnés dans le logo du cabinet (#B08010 → #F0C050).
   L'or clair n'a pas un contraste suffisant sur fond blanc : sur papier il
   sert aux filets et aux ornements, jamais au texte courant. Pour du texte
   or sur fond clair, utiliser --or-texte.                                  */
:root {
  --noir:        #000000;   /* identique au fond du logo : raccord invisible */
  --noir-doux:   #14161A;
  --or:          #C9A227;
  --or-clair:    #E8C25A;
  --or-texte:    #8A6A0F;   /* contraste AA sur --papier */
  --encre:       #16181C;
  --encre-douce: #5A5F68;
  --encre-pale:  #868B94;
  --papier:      #FBFBF9;
  --papier-alt:  #F2F2F0;
  --filet:       #E3E2DE;
  --filet-sombre:#2A2C31;
  --blanc:       #FFFFFF;

  --lg-texte:    38rem;     /* ~65 caractères */
  --lg-page:     72rem;
  --marge:       1.25rem;

  --t-xs: 0.78rem;
  --t-sm: 0.9rem;
  --t-md: 1rem;
  --t-lg: 1.15rem;

  --ombre: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --transition: 180ms ease;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--encre); text-decoration-color: var(--or); text-underline-offset: 3px; }
a:hover { color: var(--or-texte); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--or-texte);
  outline-offset: 2px;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }

h1 {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 6.2vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: .012em;
}
h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 2.35rem);
  line-height: 1.2;
}
h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 3.4vw, 1.45rem);
  line-height: 1.28;
}
h4 {
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: var(--t-md);
}

p { margin: 0; }

.bd-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-texte);
}

/* Fleuron repris du logo, en séparateur */
.bd-fleuron {
  display: flex; align-items: center; gap: .6rem;
  color: var(--or); font-size: .7rem;
}
.bd-fleuron::before, .bd-fleuron::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.bd-fleuron span { line-height: 1; }

/* --- Trame de page ------------------------------------------------------- */
.bd-wrap { width: 100%; max-width: var(--lg-page); margin-inline: auto; padding-inline: var(--marge); }
.bd-prose { max-width: var(--lg-texte); display: flex; flex-direction: column; gap: 1rem; }
.bd-prose p { color: var(--encre-douce); }
.bd-prose strong { color: var(--encre); font-weight: 600; }

.bd-section { padding-block: clamp(2.75rem, 8vw, 5rem); }
.bd-section--alt { background: var(--papier-alt); }
.bd-section--sombre { background: var(--noir); color: var(--blanc); }
.bd-section--sombre h2, .bd-section--sombre h3 { color: var(--blanc); }
.bd-section--sombre p { color: #C7CAD1; }
.bd-section--sombre .bd-eyebrow { color: var(--or-clair); }

.bd-stack { display: flex; flex-direction: column; gap: 1.75rem; }
.bd-tete { display: flex; flex-direction: column; gap: .55rem; max-width: var(--lg-texte); }

/* --- Boutons ------------------------------------------------------------- */
.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.5rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bd-btn--or { background: var(--or); color: var(--noir); border-color: var(--or); }
.bd-btn--or:hover { background: var(--or-clair); color: var(--noir); border-color: var(--or-clair); }
.bd-btn--ligne { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.bd-btn--ligne:hover { background: var(--blanc); color: var(--noir); border-color: var(--encre); }
.bd-section--sombre .bd-btn--ligne { background: transparent; color: var(--blanc); border-color: rgba(255,255,255,.45); }
.bd-section--sombre .bd-btn--ligne:hover { background: var(--blanc); color: var(--noir); }
.bd-btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- En-tête ------------------------------------------------------------- */
.bd-header { background: var(--noir); color: var(--blanc); position: sticky; top: 0; z-index: 60; }
.admin-bar .bd-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bd-header { top: 46px; } }

.bd-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 1rem;
  min-height: 4.25rem;
}
/* flex: 0 1 auto et min-width: 0 : sans cela la marque est incompressible dans une
   barre en nowrap, et « Successions & Héritiers » (une seule ligne, letter-spacing
   .2em) pousse le contenu hors du .bd-wrap sous ~375px de large. */
.bd-marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--blanc); flex: 0 1 auto; min-width: 0; }
.bd-marque img { width: 2.75rem; height: 2.75rem; flex: none; }
.bd-marque > span { display: flex; flex-direction: column; min-width: 0; }
.bd-marque__nom {
  font-family: 'Cinzel', Georgia, serif; font-weight: 600;
  font-size: clamp(.95rem, 3.4vw, 1.15rem); letter-spacing: .07em;
  line-height: 1.1; color: var(--blanc);
}
.bd-marque__sous {
  font-family: 'Source Sans 3', sans-serif; font-weight: 400;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or); margin-top: .18rem;
}

.bd-burger {
  display: inline-flex; align-items: center; gap: .5rem;
  flex: 0 0 auto; /* la seule commande d'accès au menu : elle ne rétrécit jamais. */
  background: none; border: 1px solid rgba(255,255,255,.3); color: var(--blanc);
  padding: .5rem .7rem; font: inherit; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.bd-burger__trait { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.bd-burger__trait::before, .bd-burger__trait::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor;
}
.bd-burger__trait::before { top: -5px; } .bd-burger__trait::after { top: 5px; }

.bd-nav { display: none; }
/* Ouvert, le menu est un panneau posé SOUS la barre, pas un item de sa ligne :
   .bd-header__inner est un flex en nowrap, un simple display:block y laisserait la
   nav coincée à droite du burger, écrasée dans les quelques pixels restants.
   Le bloc conteneur est .bd-header, déjà positionné (sticky). */
.bd-nav.est-ouvert {
  display: block;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--noir);
  border-top: 1px solid var(--filet-sombre);
  padding-block: .5rem 1.25rem;
  padding-inline: var(--marge);
  /* Garde-fou si le menu s'allonge : 4.25rem d'en-tête + 3.35rem de barre d'appel. */
  max-height: calc(100vh - 7.6rem);
  max-height: calc(100dvh - 7.6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bd-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bd-nav li { border-bottom: 1px solid var(--filet-sombre); }
.bd-nav li:last-child { border-bottom: 0; }
.bd-nav a {
  display: block; padding: .85rem .25rem; color: var(--blanc); text-decoration: none;
  font-size: var(--t-sm); letter-spacing: .04em; text-transform: uppercase;
}
.bd-nav a:hover, .bd-nav .current-menu-item > a { color: var(--or-clair); }
.bd-nav .sub-menu { padding-left: 1rem; }
.bd-nav .sub-menu a {
  text-transform: none; letter-spacing: 0; color: #C7CAD1; font-size: var(--t-sm);
  text-align: left; padding: .5rem .25rem;
}
.bd-nav .sub-menu a:hover,
.bd-nav .sub-menu a:focus-visible,
.bd-nav .sub-menu .current-menu-item > a { color: var(--or-clair); }

.bd-header__tel { display: none; }

@media (min-width: 62rem) {
  .bd-burger { display: none; }
  .bd-nav { display: block !important; border: 0; padding: 0; flex: 0 1 auto; min-width: 0; }
  /* La classe est-ouvert peut rester posée si l'on élargit la fenêtre menu ouvert :
     on annule ici tout ce qui relève du panneau mobile. */
  .bd-nav.est-ouvert {
    position: static; background: none; border-top: 0;
    padding: 0; max-height: none; overflow: visible;
  }
  .bd-nav ul {
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    gap: clamp(.7rem, 1.55vw, 1.6rem);
  }
  .bd-nav li { border: 0; position: relative; }
  .bd-nav a {
    padding: .4rem 0; white-space: nowrap;
    font-size: clamp(.75rem, 1.02vw, .9rem); letter-spacing: .02em;
  }
  .bd-nav .sub-menu {
    display: none; position: absolute; top: 100%; left: -1rem; min-width: 17rem;
    background: var(--noir-doux); padding: .6rem 1rem; border-top: 2px solid var(--or);
    /* La règle .bd-nav ul plus haut impose align-items:center et un grand gap :
       en colonne, cela centrait les libellés et les espaçait trop. */
    flex-direction: column; align-items: flex-start; gap: .1rem; z-index: 5;
  }
  .bd-nav li:hover > .sub-menu, .bd-nav li:focus-within > .sub-menu { display: flex; }
  .bd-nav .sub-menu a {
    white-space: normal; letter-spacing: 0; text-align: left;
    padding: .3rem 0; transition: color var(--transition);
  }
  .bd-header__tel {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--or); color: var(--blanc); text-decoration: none;
    font-weight: 700; font-size: var(--t-sm); letter-spacing: .01em;
    white-space: nowrap; padding: .5rem .9rem; border: 1px solid var(--or);
    transition: background var(--transition), border-color var(--transition);
  }
  .bd-header__tel:hover { background: var(--or-texte); border-color: var(--or-texte); color: var(--blanc); }
}

/* --- Barre d'appel fixe (mobile) : le téléphone est le premier canal ------ */
.bd-appel {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--noir); border-top: 1px solid var(--filet-sombre);
}
.bd-appel a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .85rem .5rem; text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.bd-appel a:first-child { background: var(--or); color: var(--noir); }
.bd-appel a:last-child { color: var(--blanc); }
body { padding-bottom: 3.35rem; }
@media (min-width: 62rem) {
  .bd-appel { display: none; }
  body { padding-bottom: 0; }
}

/* --- Hero ---------------------------------------------------------------- */
.bd-hero { position: relative; background: var(--noir); color: var(--blanc); overflow: hidden; }

/* Maillage discret : nœuds reliés, évoque le graphe de filiations et le recoupement
   d'indices. Motif SVG répétable, estompé du côté du texte pour ne rien gêner.
   Écarté automatiquement lorsqu'une photo de fond est posée sur le hero. */
.bd-hero:not(:has(.bd-hero__fond))::after,
.bd-pagetete::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(55rem 30rem at 80% 12%, rgba(201,162,39,.16), transparent 68%),
    url('../img/maillage.svg') 0 0 / 360px 360px repeat;
  opacity: .5;
  -webkit-mask-image: radial-gradient(125% 105% at 82% 18%, #000 0%, rgba(0,0,0,.55) 42%, transparent 82%);
          mask-image: radial-gradient(125% 105% at 82% 18%, #000 0%, rgba(0,0,0,.55) 42%, transparent 82%);
}
@media (max-width: 47.9375rem) {
  /* Mobile : le texte occupe toute la largeur, on n'en garde qu'un souffle en haut. */
  .bd-hero:not(:has(.bd-hero__fond))::after,
  .bd-pagetete::after {
    opacity: .34;
    background-size: auto, 260px 260px;
    -webkit-mask-image: radial-gradient(140% 70% at 75% 0%, #000 0%, rgba(0,0,0,.45) 40%, transparent 78%);
            mask-image: radial-gradient(140% 70% at 75% 0%, #000 0%, rgba(0,0,0,.45) 40%, transparent 78%);
  }
}
.bd-hero__fond { position: absolute; inset: 0; }
.bd-hero__fond img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.bd-hero__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.92) 100%);
}
.bd-hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1.25rem;
  padding-block: clamp(3.5rem, 13vw, 7.5rem);
  max-width: 46rem;
}
.bd-hero h1 { color: var(--blanc); }
.bd-hero .bd-eyebrow { color: var(--or-clair); }
.bd-hero__chapeau { color: #D5D8DE; font-size: var(--t-lg); max-width: 34rem; }
.bd-hero .bd-fleuron { max-width: 12rem; }

/* --- Les publics : « Vous êtes… » ---------------------------------------- */
.bd-publics { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
.bd-public {
  background: var(--blanc); padding: 1.5rem 1.35rem;
  display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit;
  transition: background var(--transition);
}
.bd-public:hover { background: var(--papier-alt); }
.bd-public__qui { font-family: 'Cinzel', Georgia, serif; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--or-texte); }
.bd-public h3 { color: var(--encre); }
.bd-public p { color: var(--encre-douce); font-size: var(--t-sm); }
.bd-public__lien { margin-top: auto; padding-top: .5rem; font-size: var(--t-sm); font-weight: 600; color: var(--encre); }
.bd-public__lien::after { content: ' →'; color: var(--or-texte); }
.bd-public:hover .bd-public__lien { color: var(--or-texte); }
@media (min-width: 40rem) { .bd-publics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .bd-publics--4 { grid-template-columns: repeat(4, 1fr); } }

/* --- Parcours / à propos ------------------------------------------------- */
/* minmax(0, 1fr) et non 1fr : le minimum « auto » d'une piste de grille vaut la
   taille min-content de son contenu, soit ici les 800 px intrinsèques de la photo.
   Un max-width en pourcentage ne borne pas ce calcul — sans ce minmax(0, …) la
   colonne reste large de 800 px et déborde de la div sur mobile. */
.bd-parcours { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
/* Mobile-first : le titre et le texte d'abord, la photo en dessous. Le PHP sort le
   media avant le corps (pour la mise en page desktop) ; on le renvoie donc dessous
   ici, l'ordre des colonnes étant rétabli à partir de 52rem. */
.bd-parcours__corps { order: 1; }
.bd-parcours__media { order: 2; position: relative; isolation: isolate; min-width: 0; max-width: 100%; }
.bd-parcours__media img { width: 100%; max-width: 100%; height: auto; }
.bd-parcours__media::after {
  content: ''; position: absolute; inset: .6rem -.35rem -.35rem .6rem;
  border: 1px solid var(--or); z-index: -1;
}
.bd-parcours__corps { display: flex; flex-direction: column; gap: 1rem; }
.bd-chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem 2.25rem; margin-top: .5rem; max-width: 52rem;
}
.bd-chiffre { display: flex; flex-direction: column; gap: .15rem; border-top: 2px solid var(--or); padding-top: .6rem; }
.bd-chiffre__n {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: clamp(1.75rem, 5vw, 2.35rem); line-height: 1.05; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.bd-section--sombre .bd-chiffre__n { color: var(--blanc); }
.bd-chiffre__l { font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--encre-douce); }
.bd-section--sombre .bd-chiffre__l { color: var(--encre-pale); }
@media (min-width: 52rem) {
  /* minmax(0, …) pour la même raison qu'en mobile : sinon la colonne de la photo
     ne peut pas descendre sous ses 800 px intrinsèques et déborde entre 52 et 64rem. */
  .bd-parcours { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 3rem; }
  /* Aucune image renseignée : le corps reprend toute la largeur, sinon les libellés
     des chiffres se retrouvent à l'étroit et se touchent. Titre et texte restent
     bornés à --lg-texte par .bd-tete / .bd-prose, la longueur de ligne ne bouge pas. */
  .bd-parcours:not(:has(.bd-parcours__media)) { grid-template-columns: 1fr; }
  /* Photo à droite : largeur bornée, pour que la colonne de texte reste la plus
     large et que les libellés des chiffres continuent de respirer. */
  .bd-parcours--inverse { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); }
  .bd-parcours--inverse .bd-parcours__media { order: 2; }
  /* À partir de 52rem, retour à l'ordre du DOM : photo à gauche, corps à droite. */
  .bd-parcours:not(.bd-parcours--inverse) .bd-parcours__media { order: 1; }
  .bd-parcours:not(.bd-parcours--inverse) .bd-parcours__corps { order: 2; }
  .bd-parcours__media::after { inset: .6rem -.6rem -.6rem .6rem; }
}

/* --- « Le cabinet » : portrait au maximum ----------------------------------
   Objectif : la photo la plus grande possible, sans déformation, sans
   débordement en largeur.
   • Hauteur — align-self: stretch : la photo occupe toute la hauteur du bloc,
     bords haut et bas alignés sur la colonne de texte. On ne peut pas monter
     plus haut sans casser l'alignement de la grille.
   • Largeur — 1.4fr / 1fr au lieu de minmax(16rem, 22rem) : la photo passe
     d'environ 352 à 443 px (+26 %) et il reste 620 px au texte, soit plus que
     les 38rem (608 px) où .bd-tete et .bd-prose sont de toute façon bornés.
     La colonne de texte ne bouge donc pas d'une ligne. En fr plutôt qu'en rem,
     la photo se réduit avec la fenêtre entre 52rem et 72rem au lieu d'écraser
     le texte.
   • Aucun débordement possible : la piste de grille borne la largeur et
     object-fit: cover absorbe le surplus de hauteur par un recadrage des
     côtés, jamais par un étirement.
   Limité à .page-id-15 : l'accueil utilise le même bloc en position droite et
   doit garder son cadrage actuel. */
@media (min-width: 52rem) {
  .page-id-15 .bd-parcours--inverse {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
  .page-id-15 .bd-parcours--inverse .bd-parcours__media {
    align-self: stretch;
    max-height: 90vh; /* garde-fou : jamais plus haut qu'un écran */
  }
  .page-id-15 .bd-parcours--inverse .bd-parcours__media img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* --- Étapes de la méthode ------------------------------------------------ */
.bd-etapes { display: grid; grid-template-columns: 1fr; gap: 0; }
.bd-etape {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding: 1.35rem 0; border-top: 1px solid var(--filet-sombre);
}
.bd-etape:last-child { border-bottom: 1px solid var(--filet-sombre); }
.bd-etape__n {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 1.6rem; line-height: 1; color: var(--or);
  font-variant-numeric: tabular-nums; min-width: 2.2rem;
}
.bd-etape__c { display: flex; flex-direction: column; gap: .3rem; }
@media (min-width: 56rem) {
  .bd-etapes { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  /* Numéro, titre et texte partagent les mêmes rangées d'une colonne à l'autre
     (subgrid) : les titres sur deux lignes ne décalent plus le paragraphe voisin. */
  .bd-etape {
    grid-template-columns: 1fr; grid-row: span 3; grid-template-rows: subgrid;
    row-gap: .35rem; align-content: start;
    border-top: 1px solid var(--or); border-bottom: 0 !important;
    padding: 1.1rem 0 0;
  }
  .bd-etape__c { display: contents; }
  .bd-etape:last-child { border-bottom: 0; }
}

/* --- Prestations --------------------------------------------------------- */
.bd-prestations { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.bd-presta {
  background: var(--blanc); border: 1px solid var(--filet); padding: 1.5rem 1.35rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.bd-section--alt .bd-presta { background: var(--blanc); }
.bd-presta h3 { color: var(--encre); }
.bd-presta ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bd-presta li {
  position: relative; padding-left: 1.15rem;
  font-size: var(--t-sm); color: var(--encre-douce);
}
.bd-presta li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--or); transform: rotate(45deg);
}
@media (min-width: 46rem) { .bd-prestations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .bd-prestations--3 { grid-template-columns: repeat(3, 1fr); } }

/* --- Garanties / engagements --------------------------------------------- */
.bd-garanties { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--filet); }
.bd-garantie {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: 1.1rem 0; border-bottom: 1px solid var(--filet);
}
.bd-garantie__marque { width: .95rem; height: .95rem; margin-top: .45rem; border: 1px solid var(--or); transform: rotate(45deg); flex: none; }
.bd-garantie__c { display: flex; flex-direction: column; gap: .2rem; }
.bd-garantie h4 { color: var(--encre); }
.bd-garantie p { color: var(--encre-douce); font-size: var(--t-sm); }
@media (min-width: 52rem) { .bd-garanties { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }

/* --- Bande d'appel à l'action -------------------------------------------- */
.bd-cta { background: var(--noir); color: var(--blanc); }
.bd-cta__inner {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding-block: clamp(2.25rem, 7vw, 3.5rem);
}
.bd-cta h2 { color: var(--blanc); }
.bd-cta p { color: #C7CAD1; max-width: var(--lg-texte); }
@media (min-width: 56rem) {
  .bd-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
  .bd-cta__txt { max-width: 40rem; display: flex; flex-direction: column; gap: .6rem; }
}

/* --- FAQ ----------------------------------------------------------------- */
.bd-faq { display: flex; flex-direction: column; border-top: 1px solid var(--filet); max-width: 48rem; }
.bd-faq__item { border-bottom: 1px solid var(--filet); }
.bd-faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0; text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 1.2rem; line-height: 1.3; color: var(--encre);
}
.bd-faq__q:hover { color: var(--or-texte); }
.bd-faq__signe { flex: none; width: 1rem; height: 1rem; position: relative; margin-top: .35rem; }
.bd-faq__signe::before, .bd-faq__signe::after {
  content: ''; position: absolute; background: var(--or); transition: transform var(--transition);
}
.bd-faq__signe::before { top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -.75px; }
.bd-faq__signe::after  { left: 50%; top: 0; height: 100%; width: 1.5px; margin-left: -.75px; }
.bd-faq__q[aria-expanded="true"] .bd-faq__signe::after { transform: scaleY(0); }
.bd-faq__r { display: none; padding-bottom: 1.15rem; }
.bd-faq__r.est-ouvert { display: block; }
.bd-faq__r p { color: var(--encre-douce); max-width: var(--lg-texte); }

/* --- Contact ------------------------------------------------------------- */
.bd-contact { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
.bd-coords { display: flex; flex-direction: column; gap: 1.1rem; }
.bd-coord { display: flex; flex-direction: column; gap: .1rem; border-left: 2px solid var(--or); padding-left: .9rem; }
.bd-coord__l { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-pale); }
.bd-coord__v { font-size: var(--t-lg); color: var(--encre); }
.bd-coord__v a { text-decoration: none; }
@media (min-width: 56rem) { .bd-contact { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; } }

/* --- Formulaire (Contact Form 7) ----------------------------------------- */
.bd-form .cf7-champ { display: flex; flex-direction: column; gap: .35rem; margin-block: 0 1rem; }
.bd-form label { font-size: var(--t-sm); font-weight: 600; color: var(--encre); }
.bd-form .req { color: var(--or-texte); }
.bd-form input[type="text"], .bd-form input[type="email"], .bd-form input[type="tel"],
.bd-form select, .bd-form textarea {
  width: 100%; font: inherit; font-size: var(--t-md);
  padding: .7rem .85rem; border: 1px solid var(--filet); background: var(--blanc); color: var(--encre);
  border-radius: 0;
}
.bd-form textarea { resize: vertical; min-height: 8rem; }
.bd-form input:focus, .bd-form select:focus, .bd-form textarea:focus { border-color: var(--or); }
.bd-form .cf7-consentement { font-size: var(--t-sm); color: var(--encre-douce); margin-block: 0 1rem; }
.bd-form .wpcf7-list-item { margin: 0; }
.bd-form input[type="submit"] {
  font-family: 'Source Sans 3', sans-serif; font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .85rem 1.75rem; background: var(--or); color: var(--noir);
  border: 1px solid var(--or); cursor: pointer; border-radius: 0;
  transition: background var(--transition);
}
.bd-form input[type="submit"]:hover { background: var(--or-clair); }
.bd-form .wpcf7-not-valid-tip { color: #B3261E; font-size: var(--t-sm); }
.bd-form .wpcf7-response-output {
  margin: 1rem 0 0; padding: .85rem 1rem; border: 1px solid var(--filet);
  font-size: var(--t-sm);
}

/* --- Prise de rendez-vous ------------------------------------------------
   Avant le clic, un bloc sobre ; après, le calendrier Google. La hauteur est
   donnée en vh sur mobile pour que le calendrier tienne dans l'écran sans
   double barre de défilement.                                             */
.bd-rdv { display: flex; flex-direction: column; gap: 1rem; }
.bd-rdv__invite {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  text-align: center;
  padding: clamp(1.5rem, 6vw, 2.5rem);
  background: var(--blanc);
  border: 1px solid var(--filet);
}
.bd-section--alt .bd-rdv__invite { background: var(--papier); }
.bd-section--sombre .bd-rdv__invite { background: var(--noir-doux); border-color: var(--filet-sombre); }
.bd-rdv__note {
  max-width: 46ch; margin: 0;
  font-size: var(--t-sm); color: var(--encre-douce);
}
.bd-rdv__cadre { border: 1px solid var(--filet); background: var(--blanc); overflow: hidden; }
.bd-rdv__cadre iframe {
  display: block; width: 100%; border: 0;
  height: 78vh; min-height: 32rem;
}
@media (min-width: 46rem) { .bd-rdv__cadre iframe { height: 44rem; } }
.bd-rdv__alt { margin: 0; text-align: center; font-size: var(--t-sm); color: var(--encre-douce); }
.bd-section--sombre .bd-rdv__alt { color: var(--encre-pale); }

/* --- Contenu éditorial libre (pages montées hors WPBakery) --------------- */
.bd-contenu { max-width: var(--lg-texte); display: flex; flex-direction: column; gap: 1.1rem; }
.bd-contenu > * { margin: 0; }
.bd-contenu h2, .bd-contenu h3 { margin-top: .9rem; }
.bd-contenu ul, .bd-contenu ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .45rem; color: var(--encre-douce); }
.bd-contenu blockquote {
  border-left: 2px solid var(--or); padding-left: 1.1rem; margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.3rem; color: var(--encre);
}
.bd-contenu table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.bd-contenu th, .bd-contenu td { border: 1px solid var(--filet); padding: .55rem .7rem; text-align: left; }
.bd-tableau-scroll { overflow-x: auto; }

/* --- Fil d'Ariane -------------------------------------------------------- */
.bd-ariane { font-size: var(--t-xs); color: var(--encre-pale); padding-block: .9rem; }
.bd-ariane a { color: var(--encre-douce); text-decoration: none; }
.bd-ariane a:hover { color: var(--or-texte); }

/* --- En-tête de page interne --------------------------------------------- */
.bd-pagetete { background: var(--noir); color: var(--blanc); position: relative; overflow: hidden; }
.bd-pagetete::after { background-size: auto, 300px 300px; }
.bd-pagetete > .bd-wrap { position: relative; z-index: 2; }
.bd-pagetete__inner { display: flex; flex-direction: column; gap: .6rem; padding-block: clamp(2.25rem, 8vw, 3.75rem); max-width: 46rem; }
.bd-pagetete h1 { color: var(--blanc); font-size: clamp(1.6rem, 5.4vw, 2.6rem); }
.bd-pagetete .bd-eyebrow { color: var(--or-clair); }
.bd-pagetete p { color: #C7CAD1; }
.bd-pagetete .bd-ariane { color: rgba(255,255,255,.55); padding-bottom: 0; }
.bd-pagetete .bd-ariane a { color: rgba(255,255,255,.75); }

/* --- Pied de page -------------------------------------------------------- */
.bd-footer { background: var(--noir); color: #C7CAD1; }
.bd-footer__haut { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(2.5rem, 8vw, 4rem); }
.bd-footer__marque { display: flex; flex-direction: column; gap: 1rem; max-width: 22rem; }
.bd-footer__marque img { width: 8.5rem; }
.bd-footer__slogan { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; color: var(--or-clair); }
.bd-footer h4 {
  font-family: 'Cinzel', Georgia, serif; font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--blanc); margin-bottom: .85rem;
}
.bd-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.bd-footer a { color: #C7CAD1; text-decoration: none; font-size: var(--t-sm); }
.bd-footer a:hover { color: var(--or-clair); }
.bd-footer__bas {
  border-top: 1px solid var(--filet-sombre);
  padding-block: 1.15rem;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: var(--t-xs); color: var(--encre-pale);
}
.bd-footer__legal { flex-direction: row !important; flex-wrap: wrap; gap: .4rem 1.1rem; }
@media (min-width: 48rem) {
  .bd-footer__haut { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
  .bd-footer__bas { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- Accessibilité ------------------------------------------------------- */
.bd-saut {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--or); color: var(--noir); padding: .7rem 1.1rem; font-weight: 600;
}
.bd-saut:focus { left: 0; }
.ecran-lecteur {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

/* --- Correctifs WPBakery -------------------------------------------------
   WPBakery pose ses propres marges de ligne ; on les neutralise pour que
   l'espacement vienne des sections du thème et pas de deux systèmes
   concurrents (source classique de doubles marges).                       */
.wpb_row, .vc_row { margin-left: 0; margin-right: 0; }
.wpb_content_element, .vc_row .wpb_column > .vc_column-inner > .wpb_wrapper > *:last-child { margin-bottom: 0; }
.vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }