/* ==========================================================================
   LBD06 — feuille de style unique.
   Implémentation du design Claude Design « Design web LBD06 artisan ».

   Système : surtitre ambre en petites capitales espacées, titres 46 px,
   FILETS à la place des cartes, chiffres tabulaires surdimensionnés,
   filet navy 2 px pour ouvrir tableaux et grilles.
   Trois fonds seulement : blanc, gris #F4F6F8, navy pleine largeur.
   Flexbox + grid uniquement. Aucun JS. Polices système (zéro requête réseau).
   ========================================================================== */

:root {
  /* Fonds */
  --navy: #0A2A47;
  --navy-filet: #1B3F62;
  --gris: #F4F6F8;
  --blanc: #fff;

  /* Accent */
  --ambre: #D96B0B;
  --ambre-clair: #F5A64B;

  /* Texte */
  --encre: #16232E;
  --texte: #3D4C5A;
  --texte-doux: #4A5966;
  --texte-gris: #5A6A78;
  --sourdine: #6B7885;
  --surtitre: #5E6B78;
  --sur-navy: #A9BED0;
  --sur-navy-doux: #9DB2C4;

  /* Filets */
  --filet: #DCE3E9;
  --filet-clair: #E4E9ED;
  --filet-entete: #E6EBEF;

  /* Panneau local (ambre) */
  --local-fond: #FFF3E6;
  --local-bord: #E8C79A;
  --local-bord-doux: #EFDCC2;
  --local-surtitre: #8A6237;

  /* Divers */
  --lien: #1D5B8F;
  --vert: #2E7D53;
  --badge-fond: #E7EEF4;
  --badge-texte: #0E3557;

  --largeur: 1200px;
  --police: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--lien); text-decoration: none; }
a:hover { color: var(--ambre); }

.lbd-conteneur {
  width: min(100% - 48px, var(--largeur));
  margin-inline: auto;
}

.lbd-skip {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lbd-skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
  background: #fff; padding: .75rem 1rem; border: 2px solid var(--navy);
}

/* ---------- Surtitre : filet ambre + petites capitales espacées ---------- */
.lbd-surtitre {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--surtitre);
}
.lbd-surtitre::before {
  content: ""; width: 26px; height: 2px; background: var(--ambre); flex: none;
}

/* ========================== EN-TÊTE ========================== */
.lbd-entete { background: var(--blanc); border-bottom: 1px solid var(--filet-entete); }
.lbd-entete__inner {
  display: flex; align-items: center; gap: 36px; padding: 16px 0;
}
.lbd-entete__marque { display: flex; align-items: center; gap: 10px; flex: none; }
.lbd-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -.01em;
}
.lbd-logo::before {
  content: "06"; width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: var(--navy); color: var(--ambre-clair);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.lbd-entete .custom-logo-link img { max-height: 40px; width: auto; }

.lbd-nav__liste {
  display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0;
  font-size: 15px; font-weight: 600;
}
.lbd-nav__liste a { color: var(--encre); white-space: nowrap; }
.lbd-nav__liste a:hover { color: var(--ambre); }

.lbd-entete__cta {
  margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none;
}
.lbd-entete__joindre {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2;
}
.lbd-entete__dispo {
  display: block; font-size: 12px; font-weight: 700; color: var(--vert);
}
.lbd-tel--entete {
  font-size: 23px; font-weight: 800; color: var(--navy);
  letter-spacing: -.01em; white-space: nowrap;
}

.lbd-bouton {
  display: inline-block; padding: 12px 20px; border-radius: 8px;
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.lbd-bouton--tel { background: var(--ambre); color: #fff; }
.lbd-bouton--tel:hover { background: #c25f09; color: #fff; }

/* ========================== HERO ========================== */
.lbd-hero {
  background: linear-gradient(180deg, #F6F9FB 0%, #fff 100%);
  border-bottom: 1px solid var(--filet-entete);
  padding: 56px 0 60px;
}
.lbd-hero__badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--badge-fond); color: var(--badge-texte);
  font-size: 13px; font-weight: 700;
}
.lbd-hero h1 {
  margin: 18px 0 0; font-size: 46px; line-height: 1.1; letter-spacing: -.02em;
  font-weight: 800; color: var(--navy); text-wrap: pretty;
}
.lbd-hero__accroche {
  margin: 18px 0 0; font-size: 19px; line-height: 1.6;
  color: var(--texte); max-width: 560px;
}
.lbd-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; align-items: center;
}
.lbd-hero .lbd-bouton--tel { padding: 16px 26px; border-radius: 9px; font-size: 19px; font-weight: 800; }
.lbd-hero__dispo { font-size: 15px; color: var(--texte-gris); }

/* ========================== SECTIONS ========================== */
.lbd-section { padding: 72px 0; }
.lbd-section--gris { background: var(--gris); }
.lbd-section--navy { background: var(--navy); color: #fff; }
.lbd-section--navy .lbd-surtitre { color: var(--sur-navy-doux); }
.lbd-section--navy h2 { color: #fff; }
.lbd-section--navy a { color: var(--ambre-clair); }

.lbd-section h2,
.lbd-page__entete h1 {
  margin: 0; font-size: 46px; line-height: 1.04; letter-spacing: -.03em;
  font-weight: 800; color: var(--navy); text-wrap: pretty;
}

/* Chiffres clés (S01) */
.lbd-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); }
.lbd-chiffres > div { padding: 0 32px; }
.lbd-chiffres > div + div { border-left: 1px solid var(--navy-filet); }
.lbd-chiffres strong {
  display: block; font-size: 64px; line-height: 1; font-weight: 800;
  letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums;
}
.lbd-chiffres span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--sur-navy); }

/* Marques (S12) */
.lbd-marques { display: flex; align-items: center; gap: 56px; }
.lbd-marques__liste { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); list-style: none; margin: 0; padding: 0; }
.lbd-marques__liste li { padding: 18px 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .06em; }
.lbd-marques__liste li + li { border-left: 1px solid var(--filet); }
.lbd-marques__liste a { color: var(--texte-gris); }

/* ========================== PAGE ========================== */
.lbd-fil { font-size: 14px; color: var(--sourdine); padding: 20px 0 0; }
.lbd-fil a { color: var(--sourdine); }

.lbd-page__entete { padding: 40px 0 0; }
.lbd-page__entete h1 { font-size: 46px; }
.lbd-page__accroche {
  margin: 20px 0 0; font-size: 19px; line-height: 1.65;
  color: var(--texte-doux); max-width: 720px;
}
.lbd-page__actions {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: 28px 0 48px;
}
.lbd-page__actions .lbd-bouton--tel { padding: 16px 26px; border-radius: 9px; font-size: 19px; font-weight: 800; }
.lbd-page__delai { font-size: 15px; color: var(--texte-gris); }

/* ---------- Corps de texte (the_content) ---------- */
.lbd-page__contenu { max-width: 760px; padding-bottom: 24px; }
.lbd-page__contenu > *:first-child { margin-top: 0; }

.lbd-chapo {
  font-size: 19px; line-height: 1.65; color: var(--texte-doux);
  padding-bottom: 28px; border-bottom: 2px solid var(--navy); margin: 0 0 36px;
}
.lbd-page__contenu h2 {
  margin: 56px 0 20px; font-size: 32px; line-height: 1.12; letter-spacing: -.02em;
  font-weight: 800; color: var(--navy); text-wrap: pretty;
}
.lbd-page__contenu h3 {
  margin: 36px 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--encre);
}
.lbd-page__contenu p { margin: 0 0 18px; color: var(--texte-gris); }
.lbd-page__contenu strong { color: var(--encre); }
.lbd-page__contenu ul, .lbd-page__contenu ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.lbd-page__contenu ol { counter-reset: etape; }
.lbd-page__contenu li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--texte-gris); }
.lbd-page__contenu ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 10px; height: 10px; background: var(--ambre);
}
.lbd-page__contenu ol li { padding-left: 40px; }
.lbd-page__contenu ol li::before {
  counter-increment: etape; content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-size: 15px; font-weight: 800; color: var(--ambre);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tableau de tarifs (S05) ---------- */
.lbd-page__contenu table {
  width: 100%; border-collapse: collapse; margin: 12px 0 32px;
  border-top: 2px solid var(--navy);
}
.lbd-page__contenu th {
  text-align: left; padding: 12px 0; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--surtitre);
  border-bottom: 1px solid var(--filet);
}
.lbd-page__contenu table[data-tarifs] th:last-child,
.lbd-page__contenu table[data-tarifs] td:last-child { text-align: right; }
.lbd-page__contenu td {
  padding: 20px 0; border-bottom: 1px solid var(--filet);
  font-size: 19px; letter-spacing: -.01em; color: var(--encre);
}
.lbd-page__contenu table[data-tarifs] td:last-child {
  font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Tableaux de données : la dernière colonne est une phrase, elle se replie. */
.lbd-page__contenu table:not([data-tarifs]) td { overflow-wrap: anywhere; }

/* ---------- Encart local, page ville (S08) ---------- */
.lbd-page__local {
  background: var(--local-fond); border: 1.5px solid var(--local-bord);
  border-radius: 16px; padding: 44px 48px; margin: 8px 0 48px;
}
.lbd-page__local h2 {
  margin: 0 0 24px; font-size: 38px; line-height: 1.08; letter-spacing: -.03em;
  font-weight: 800; color: var(--navy);
}
.lbd-local__chiffres { display: flex; flex-wrap: wrap; gap: 48px; padding-top: 24px; border-top: 1px solid var(--local-bord); }
.lbd-local__etiquette {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--local-surtitre);
}
.lbd-local__valeur {
  margin-top: 8px; font-size: 34px; font-weight: 800;
  letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.lbd-quartiers { margin-top: 28px; }
.lbd-quartiers .lbd-local__etiquette { margin-bottom: 12px; display: block; }
.lbd-quartiers ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lbd-quartiers li {
  padding: 8px 14px; border: 1px solid var(--local-bord); border-radius: 999px;
  background: #fff; font-size: 15px;
}
.lbd-temoignage {
  margin: 28px 0 0; background: #fff; border: 1px solid var(--local-bord-doux);
  border-radius: 12px; padding: 32px;
}
.lbd-temoignage::before { content: "★★★★★"; font-size: 16px; color: var(--ambre); letter-spacing: .08em; }
.lbd-temoignage blockquote {
  margin: 16px 0 0; font-size: 21px; line-height: 1.5;
  letter-spacing: -.01em; color: #1B2B38;
}

/* ---------- Maillage interne (S14) ---------- */
.lbd-maillages {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--navy); margin: 56px 0 72px;
}
.lbd-maillage { padding: 28px 28px 8px 0; }
.lbd-maillage + .lbd-maillage { border-left: 1px solid var(--filet); padding-left: 28px; }
.lbd-maillage__titre {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--surtitre); margin: 0 0 16px;
}
.lbd-maillage__liste { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.lbd-maillage__liste a {
  display: block; padding: 9px 0; border-bottom: 1px solid var(--filet-clair);
  font-size: 15px;
}

/* ---------- Bandeau d'appel (S07) ---------- */
.lbd-appel { background: var(--navy); padding: 60px 0; }
.lbd-appel__grille { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.lbd-appel h2 {
  margin: 0; font-size: 42px; line-height: 1.04; letter-spacing: -.03em;
  font-weight: 800; color: #fff; text-wrap: pretty;
}
.lbd-appel__args { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; font-size: 16px; color: var(--sur-navy); }
.lbd-appel__droite { text-align: right; }
.lbd-appel__etiquette {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sur-navy-doux);
}
.lbd-appel .lbd-tel {
  display: block; margin-top: 10px; font-size: 46px; font-weight: 800;
  letter-spacing: -.02em; color: #fff; white-space: nowrap;
}
.lbd-appel .lbd-bouton--tel { margin-top: 18px; padding: 16px 28px; border-radius: 9px; font-size: 18px; font-weight: 800; }

/* ---------- Cartes (guides S13, métiers) ---------- */
.lbd-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lbd-carte {
  display: block; padding: 32px; border: 1px solid var(--filet);
  border-radius: 14px; color: var(--encre);
}
.lbd-carte:hover { border-color: var(--ambre); color: var(--encre); }
.lbd-carte h3 { margin: 0 0 12px; font-size: 23px; line-height: 1.25; letter-spacing: -.01em; color: var(--navy); }
.lbd-carte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-gris); }
.lbd-section--navy .lbd-carte { border-color: var(--navy-filet); color: #fff; }
.lbd-section--navy .lbd-carte h3 { color: #fff; }
.lbd-section--navy .lbd-carte p { color: var(--sur-navy); }

/* Liste de guides / zones */
.lbd-liste-guides, .lbd-zones__liste {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px;
  list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--navy);
}
.lbd-liste-guides li, .lbd-zones__liste li { border-bottom: 1px solid var(--filet); }
.lbd-liste-guides a, .lbd-zones__liste a { display: block; padding: 16px 0; font-size: 18px; }

/* Réassurance */
.lbd-reassurance {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 40px 0 0; padding: 0;
  border-top: 2px solid var(--navy);
}
.lbd-reassurance li {
  flex: 1 1 200px; padding: 20px 24px 20px 0; font-size: 16px; color: var(--texte-gris);
  border-bottom: 1px solid var(--filet);
}
.lbd-reassurance li + li { border-left: 1px solid var(--filet); padding-left: 24px; }
.lbd-reassurance strong { color: var(--navy); }

/* Archives */
.lbd-archive__entete { padding: 32px 0 24px; }
.lbd-archive__entete h1 { margin: 0; font-size: 42px; line-height: 1.06; letter-spacing: -.03em; font-weight: 800; color: var(--navy); }
.lbd-liste { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--navy); }
.lbd-liste__item { padding: 22px 0; border-bottom: 1px solid var(--filet); }
.lbd-liste__item a { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.lbd-liste__item p { margin: 6px 0 0; color: var(--texte-gris); font-size: 16px; }

/* ========================== PIED DE PAGE ========================== */
.lbd-pied { margin-top: 0; background: var(--navy); color: var(--sur-navy); padding: 72px 0 28px; }
.lbd-pied a { color: var(--sur-navy); }
.lbd-pied a:hover { color: var(--ambre-clair); }
.lbd-pied h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sur-navy-doux); margin: 0 0 16px;
}
.lbd-pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 56px; border-top: 2px solid var(--navy-filet); padding-top: 40px; }
.lbd-pied ul { list-style: none; margin: 0; padding: 0; }
.lbd-pied li { margin-bottom: 10px; font-size: 15px; }
.lbd-pied address { font-style: normal; line-height: 1.7; font-size: 16px; }
.lbd-pied__nap .lbd-tel { display: block; margin: 14px 0 6px; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.lbd-pied__dispo { font-size: 15px; color: var(--sur-navy-doux); }
.lbd-pied__villes { columns: 2; column-gap: 24px; }
.lbd-pied__bas {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--navy-filet);
  font-size: 14px; color: var(--sur-navy-doux);
}

/* ========================== MOBILE (S15) ========================== */
@media (max-width: 1080px) {
  .lbd-maillages { grid-template-columns: repeat(2, 1fr); }
  .lbd-maillage:nth-child(3) { border-left: 0; padding-left: 0; }
  .lbd-chiffres { grid-template-columns: repeat(2, 1fr); }
  .lbd-marques__liste { grid-template-columns: repeat(4, 1fr); }
  .lbd-pied__grille { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .lbd-conteneur { width: calc(100% - 36px); }

  /* En-tête : marque + téléphone, navigation en dessous */
  .lbd-entete__inner { flex-wrap: wrap; gap: 12px 20px; padding: 14px 0; }
  .lbd-entete__cta { gap: 12px; }
  .lbd-tel--entete { font-size: 19px; }
  .lbd-nav { order: 3; width: 100%; overflow-x: auto; }
  .lbd-nav__liste { flex-wrap: nowrap; gap: 16px; padding-bottom: 4px; font-size: 14px; }

  /* Hero */
  .lbd-hero { padding: 32px 0 36px; }
  .lbd-hero h1 { font-size: 30px; line-height: 1.14; letter-spacing: -.02em; }
  .lbd-hero__accroche { font-size: 17px; }
  .lbd-hero__actions { gap: 10px; }
  .lbd-hero .lbd-bouton--tel { width: 100%; text-align: center; font-size: 17px; padding: 15px 20px; }

  /* Sections et titres */
  .lbd-section { padding: 44px 0; }
  .lbd-section h2 { font-size: 27px; line-height: 1.1; letter-spacing: -.02em; }
  .lbd-page__entete h1 { font-size: 29px; line-height: 1.12; }
  .lbd-page__accroche { font-size: 17px; }
  .lbd-page__contenu h2 { font-size: 24px; margin-top: 40px; }
  .lbd-page__contenu h3 { font-size: 19px; }
  .lbd-chapo { font-size: 17px; }

  /* Une seule colonne partout */
  .lbd-chiffres { grid-template-columns: 1fr 1fr; }
  .lbd-chiffres > div { padding: 16px 0; }
  .lbd-chiffres > div:nth-child(odd) { border-left: 0; }
  .lbd-chiffres > div:nth-child(even) { border-left: 1px solid var(--navy-filet); padding-left: 16px; }
  .lbd-chiffres > div:nth-child(n+3) { border-top: 1px solid var(--navy-filet); }
  .lbd-chiffres strong { font-size: 38px; }

  .lbd-cartes, .lbd-liste-guides, .lbd-zones__liste { grid-template-columns: 1fr; gap: 16px; }
  .lbd-liste-guides, .lbd-zones__liste { gap: 0; }

  .lbd-marques { flex-direction: column; align-items: flex-start; gap: 20px; }
  .lbd-marques__liste { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .lbd-marques__liste li { text-align: left; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--filet); }
  .lbd-marques__liste li:nth-child(even) { border-left: 1px solid var(--filet); padding-left: 16px; }

  /* Maillage : une colonne, filets horizontaux */
  .lbd-maillages { grid-template-columns: 1fr; margin: 40px 0 48px; }
  .lbd-maillage, .lbd-maillage + .lbd-maillage { border-left: 0; padding: 24px 0 4px; }
  .lbd-maillage + .lbd-maillage { border-top: 1px solid var(--filet); }

  /* Encart local */
  .lbd-page__local { padding: 26px 20px; border-radius: 12px; }
  .lbd-page__local h2 { font-size: 24px; }
  .lbd-local__chiffres { gap: 28px; }
  .lbd-local__valeur { font-size: 26px; }
  .lbd-temoignage { padding: 20px; }
  .lbd-temoignage blockquote { font-size: 17px; }

  /* Bandeau d'appel */
  .lbd-appel { padding: 36px 0; }
  .lbd-appel__grille { grid-template-columns: 1fr; gap: 24px; }
  .lbd-appel h2 { font-size: 27px; line-height: 1.12; }
  .lbd-appel__droite { text-align: left; }
  .lbd-appel .lbd-tel { font-size: 30px; }
  .lbd-appel .lbd-bouton--tel { display: block; text-align: center; }
  .lbd-appel__args { gap: 6px 20px; font-size: 15px; }

  /* Tableaux : on garde la lisibilité en empilant */
  .lbd-page__contenu table, .lbd-page__contenu tbody, .lbd-page__contenu tr, .lbd-page__contenu td { display: block; width: 100%; }
  .lbd-page__contenu thead { display: none; }
  .lbd-page__contenu tr { padding: 14px 0; border-bottom: 1px solid var(--filet); }
  .lbd-page__contenu td { border: 0; padding: 0; font-size: 16px; }
  .lbd-page__contenu td:last-child { text-align: left; margin-top: 4px; font-size: 18px; white-space: normal; }
  .lbd-page__contenu table:not([data-tarifs]) th:last-child,
  .lbd-page__contenu table:not([data-tarifs]) td:last-child { text-align: left; }

  .lbd-reassurance li, .lbd-reassurance li + li { border-left: 0; padding-left: 0; flex-basis: 100%; }

  .lbd-pied { padding: 44px 0 24px; }
  .lbd-pied__grille { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; }
  .lbd-pied__villes { columns: 2; }
}

@media print {
  .lbd-entete__cta, .lbd-nav, .lbd-maillages, .lbd-appel { display: none; }
}

/* ---------- Avis clients (S04) ---------- */
.lbd-avis { background: var(--gris); padding: 64px 0; margin-top: 56px; }
.lbd-avis__grille { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.lbd-avis__vedette {
  margin: 0; font-size: 27px; line-height: 1.35; letter-spacing: -.01em;
  color: var(--navy); text-wrap: pretty;
}
.lbd-avis__auteur {
  margin: 20px 0 0; font-size: 16px; color: var(--texte-gris);
  padding-left: 52px; position: relative;
}
.lbd-avis__auteur::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: 40px; height: 1px; background: var(--filet);
}
.lbd-avis__note {
  display: flex; align-items: baseline; gap: 14px;
  padding-bottom: 20px; border-bottom: 2px solid var(--navy);
}
.lbd-avis__chiffre {
  font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -.04em;
  color: var(--navy); font-variant-numeric: tabular-nums;
}
.lbd-avis__etoiles { display: block; font-size: 17px; color: var(--ambre); letter-spacing: .08em; }
.lbd-avis__nombre { display: block; font-size: 15px; color: var(--sourdine); margin-top: 4px; }
.lbd-avis__court { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--filet); }
.lbd-avis__court p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-gris); }
.lbd-avis__court footer { margin-top: 8px; font-size: 15px; color: var(--sourdine); }

@media (max-width: 860px) {
  .lbd-avis { padding: 36px 0; margin-top: 32px; }
  .lbd-avis__grille { grid-template-columns: 1fr; gap: 28px; }
  .lbd-avis__vedette { font-size: 19px; }
  .lbd-avis__chiffre { font-size: 40px; }
}

/* ---------- Visuels ---------- */
.lbd-page__visuel {
  margin: 0 0 40px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--filet); background: var(--gris);
}
.lbd-page__visuel img { display: block; width: 100%; height: 380px; object-fit: cover; }

.lbd-carte { overflow: hidden; padding: 0; }
.lbd-carte__image { display: block; }
.lbd-carte__image img { display: block; width: 100%; height: 190px; object-fit: cover; }
.lbd-carte h3 { margin: 24px 28px 12px; }
.lbd-carte p { margin: 0 28px 28px; }
.lbd-carte:not(:has(.lbd-carte__image)) h3 { margin-top: 32px; }

@media (max-width: 860px) {
  .lbd-page__visuel img { height: 220px; }
  .lbd-carte__image img { height: 160px; }
}

/* ---------- Hero à deux colonnes (photo réelle) ---------- */
.lbd-hero__grille {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.lbd-hero__visuel {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--filet); background: var(--gris);
}
.lbd-hero__visuel img { display: block; width: 100%; height: 340px; object-fit: cover; }

@media (max-width: 900px) {
  .lbd-hero__grille { grid-template-columns: 1fr; gap: 28px; }
  .lbd-hero__visuel { order: -1; }
  .lbd-hero__visuel img { height: 200px; }
}


/* ==========================================================================
   REPRISE — corrections de rendu, identité, mise en page longue, interactions.
   Cette section est volontairement en fin de fichier : elle prend le pas sur
   les règles ci-dessus sans qu'il faille les réécrire.
   ========================================================================== */

/* --- BUG : la grille de maillage sortait du gabarit -----------------------
   `.lbd-maillages` porte à la fois .lbd-conteneur (qui centre avec
   margin-inline:auto) et son propre `margin: 56px 0 72px`. Le raccourci
   remettait les marges latérales à 0 : le bloc se collait au bord gauche de
   la fenêtre pendant que le reste de la page restait centré.
   On rétablit le centrage, et on borne les colonnes : sans minmax(0,1fr),
   des libellés longs empêchent les pistes de se réduire et débordent. */
.lbd-maillages {
  margin-inline: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) { .lbd-maillages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .lbd-maillages { grid-template-columns: minmax(0, 1fr); margin-inline: auto; } }
.lbd-maillage__liste a { transition: color .15s, padding-left .15s; }
.lbd-maillage__liste a:hover { padding-left: 6px; }

/* --- Identité : l'écusson réel remplace la pastille « 06 » --------------- */
.lbd-logo::before { content: none; }
.lbd-logo { gap: 12px; }
.lbd-logo__ecusson { display: block; height: 46px; width: auto; flex: none; }
.lbd-logo__texte { display: flex; flex-direction: column; line-height: 1.08; }
.lbd-logo__nom { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.lbd-logo__baseline {
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sourdine); margin-top: 3px;
}

/* --- Navigation : bouton menu sur mobile -------------------------------- */
.lbd-burger {
  display: none; align-items: center; gap: 8px; flex: none;
  padding: 9px 13px; border: 1px solid var(--filet); border-radius: 8px;
  background: #fff; color: var(--navy); font: inherit; font-size: 14px;
  font-weight: 700; cursor: pointer;
}
.lbd-burger__trait {
  display: block; position: relative; width: 16px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.lbd-burger__trait::before, .lbd-burger__trait::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .18s;
}
.lbd-burger__trait::before { top: -5px; }
.lbd-burger__trait::after  { top: 5px; }
.lbd-burger[aria-expanded="true"] .lbd-burger__trait { background: transparent; }
.lbd-burger[aria-expanded="true"] .lbd-burger__trait::before { transform: translateY(5px) rotate(45deg); }
.lbd-burger[aria-expanded="true"] .lbd-burger__trait::after  { transform: translateY(-5px) rotate(-45deg); }
.lbd-nav__liste a { position: relative; padding-bottom: 3px; }
.lbd-nav__liste a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--ambre); transition: right .18s ease;
}
.lbd-nav__liste a:hover::after, .lbd-nav__liste .current-menu-item > a::after { right: 0; }

/* --- Bandeau marques : les vrais logos ---------------------------------- */
.lbd-marques__liste { gap: 0; }
.lbd-marques__liste li { display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.lbd-marques__liste a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 62px; padding: 6px 10px;
}
.lbd-marque__logo {
  max-height: 34px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .2s, opacity .2s, transform .2s;
}
.lbd-marques__liste a:hover .lbd-marque__logo { filter: none; opacity: 1; transform: scale(1.06); }
.lbd-marque__nom { font-weight: 700; letter-spacing: .04em; color: var(--texte-gris); }

/* --- Cartes métiers : image obligatoire, repli maîtrisé ------------------ */
.lbd-carte { position: relative; transition: border-color .18s, transform .18s, box-shadow .18s; }
.lbd-carte:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10,42,71,.09); }
.lbd-carte__image { overflow: hidden; }
.lbd-carte__image img { transition: transform .35s ease; }
.lbd-carte:hover .lbd-carte__image img { transform: scale(1.045); }
.lbd-carte__repli {
  display: flex; align-items: flex-end; height: 190px; padding: 20px 24px;
  background: linear-gradient(150deg, var(--navy) 0%, #123a5e 100%);
  color: var(--ambre-clair); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.lbd-carte__fleche {
  position: absolute; right: 24px; bottom: 26px; font-size: 20px;
  color: var(--ambre); opacity: 0; transform: translateX(-6px);
  transition: opacity .18s, transform .18s;
}
.lbd-carte:hover .lbd-carte__fleche { opacity: 1; transform: none; }
.lbd-carte p { margin-bottom: 46px; }

/* --- Chiffres : compteur animé (sans JS, le chiffre est déjà juste) ------ */
.lbd-chiffres strong { font-variant-numeric: tabular-nums; }

/* --- Pages longues : colonne de lecture + sommaire collant -------------- */
.lbd-corps { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
.lbd-corps .lbd-page__contenu { max-width: 720px; }
.lbd-sommaire { position: sticky; top: 24px; font-size: 14px; }
.lbd-sommaire__titre {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--surtitre); margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.lbd-sommaire ol { list-style: none; margin: 0; padding: 0; counter-reset: som; }
.lbd-sommaire li { counter-increment: som; }
.lbd-sommaire a {
  display: block; padding: 8px 0 8px 26px; position: relative;
  color: var(--texte-gris); line-height: 1.35; border-bottom: 1px solid var(--filet-clair);
}
.lbd-sommaire a::before {
  content: counter(som, decimal-leading-zero); position: absolute; left: 0; top: 8px;
  font-size: 11px; font-weight: 700; color: var(--sourdine); font-variant-numeric: tabular-nums;
}
.lbd-sommaire a:hover { color: var(--ambre); }
.lbd-sommaire a[aria-current="true"] { color: var(--navy); font-weight: 700; }
.lbd-sommaire a[aria-current="true"]::before { color: var(--ambre); }
.lbd-sommaire__appel {
  margin-top: 20px; padding: 18px; border-radius: 10px;
  background: var(--local-fond); border: 1px solid var(--local-bord-doux);
}
.lbd-sommaire__appel span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--local-surtitre); margin-bottom: 6px;
}
.lbd-sommaire__appel .lbd-tel { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.lbd-sommaire__appel em { display: block; font-style: normal; font-size: 13px; color: var(--texte-gris); margin-top: 4px; }
@media (max-width: 1080px) {
  .lbd-corps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lbd-sommaire { position: static; margin-bottom: 36px; }
  .lbd-sommaire ol { columns: 2; column-gap: 32px; }
}
@media (max-width: 620px) { .lbd-sommaire ol { columns: 1; } }

/* --- FAQ dépliable (élément natif <details>, aucune dépendance) --------- */
.lbd-faq { margin: 0 0 20px; border-top: 2px solid var(--navy); }
.lbd-faq__item { border-bottom: 1px solid var(--filet); }
.lbd-faq__item > summary {
  display: flex; align-items: flex-start; gap: 14px; justify-content: space-between;
  padding: 17px 0; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em; color: var(--navy);
}
.lbd-faq__item > summary::-webkit-details-marker { display: none; }
.lbd-faq__item > summary::after {
  content: "+"; flex: none; font-size: 22px; font-weight: 400; line-height: 1;
  color: var(--ambre); transition: transform .2s;
}
.lbd-faq__item[open] > summary::after { content: "−"; transform: rotate(180deg); }
.lbd-faq__item > summary:hover { color: var(--ambre); }
.lbd-faq__reponse { padding: 0 40px 20px 0; }
.lbd-faq__reponse p { margin: 0 0 12px; color: var(--texte-gris); }
.lbd-faq__reponse p:last-child { margin-bottom: 0; }

/* --- Zones d'intervention : plus qu'une liste de liens ------------------ */
.lbd-zones__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 2px solid var(--navy); }
.lbd-zone {
  display: block; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--filet);
  transition: background .18s;
}
.lbd-zone:nth-child(3n+2), .lbd-zone:nth-child(3n) { padding-left: 24px; border-left: 1px solid var(--filet); }
.lbd-zone:hover { background: var(--gris); }
.lbd-zone__nom { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.lbd-zone:hover .lbd-zone__nom { color: var(--ambre); }
.lbd-zone__detail { display: block; margin-top: 5px; font-size: 14px; color: var(--sourdine); }
@media (max-width: 860px) {
  .lbd-zones__grille { grid-template-columns: 1fr; }
  .lbd-zone, .lbd-zone:nth-child(3n+2), .lbd-zone:nth-child(3n) { padding: 16px 0; border-left: 0; }
}

/* --- Avis : rééquilibrage des deux colonnes ----------------------------- */
.lbd-avis__grille { grid-template-columns: 1fr 1fr; gap: 56px; }
.lbd-avis__court p { font-size: 16.5px; }

/* --- En-tête mobile ----------------------------------------------------- */
@media (max-width: 860px) {
  .lbd-logo__ecusson { height: 40px; }
  .lbd-logo__nom { font-size: 18px; }
  .lbd-logo__baseline { display: none; }
  .lbd-burger { display: inline-flex; order: 2; margin-left: auto; }
  .lbd-entete__cta { order: 3; margin-left: 0; }
  .lbd-entete__joindre { align-items: flex-start; }
  .lbd-nav { order: 4; width: 100%; overflow: visible; }
  .lbd-nav[hidden] { display: none; }
  .lbd-nav__liste {
    flex-direction: column; flex-wrap: nowrap; gap: 0; width: 100%;
    padding-top: 6px; border-top: 1px solid var(--filet);
  }
  .lbd-nav__liste li { border-bottom: 1px solid var(--filet-clair); }
  .lbd-nav__liste a { display: block; padding: 13px 0; font-size: 16px; }
  .lbd-nav__liste a::after { content: none; }
  .lbd-marques__liste { grid-template-columns: repeat(3, 1fr); }
  .lbd-marques__liste li { border: 0; border-bottom: 1px solid var(--filet); }
  .lbd-marques__liste li:nth-child(3n+2), .lbd-marques__liste li:nth-child(3n) { border-left: 1px solid var(--filet); padding-left: 0; }
  .lbd-carte__repli { height: 150px; }
}

/* --- Le JS ne fait qu'améliorer : sans lui, tout reste lisible ---------- */
.js .lbd-nav[data-repliable] { display: none; }
.js .lbd-nav[data-repliable][data-ouvert="1"] { display: block; }
@media (min-width: 861px) { .js .lbd-nav[data-repliable] { display: block; } }

/* Chapô de section : une phrase d'orientation sous le titre. */
.lbd-section__chapo {
  max-width: 620px; margin: 14px 0 0;
  font-size: 18px; line-height: 1.55; color: var(--texte-gris);
}

/* ==========================================================================
   Finitions après relecture à l'écran.
   ========================================================================== */

/* Le menu passait sur deux lignes : l'écusson et le pavé téléphone laissent
   moins de place qu'avec l'ancienne pastille. On resserre la navigation et
   on retire la baseline sous 1240 px. */
.lbd-nav__liste { gap: 17px; font-size: 14.5px; }
@media (max-width: 1240px) {
  .lbd-logo__baseline { display: none; }
  .lbd-nav__liste { gap: 14px; font-size: 14px; }
  .lbd-tel--entete { font-size: 21px; }
}

/* Bandeau marques : les logos étaient écrasés dans une colonne résiduelle.
   Ils passent sur toute la largeur, sur une ligne dédiée, à hauteur optique
   comparable — les sept logos n'ont pas du tout les mêmes proportions. */
.lbd-marques { display: block; }
.lbd-marques__intro { max-width: 560px; margin-bottom: 26px; }
.lbd-marques__intro p { margin: 0; font-size: 19px; line-height: 1.45; letter-spacing: -.01em; }
.lbd-marques__liste {
  /* auto-fit : la bande s'adapte au nombre de marques déclarées. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
}
.lbd-marques__liste li { padding: 0; }
.lbd-marques__liste li + li { border-left: 1px solid var(--filet); }
.lbd-marques__liste a { min-height: 92px; padding: 18px 14px; }
.lbd-marque__logo { max-height: 40px; }
.lbd-marques__note { margin: 14px 0 0; font-size: 13.5px; color: var(--sourdine); }
@media (max-width: 860px) {
  .lbd-marques__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .lbd-marques__liste li + li { border-left: 0; }
  .lbd-marques__liste li { border-bottom: 1px solid var(--filet); }
  .lbd-marques__liste li:nth-child(even) { border-left: 1px solid var(--filet); }
  .lbd-marques__liste a { min-height: 78px; }
}

/* Zones : le détail sous le nom porte les métiers réellement couverts. */
.lbd-zone__detail { line-height: 1.4; }

/* Pied de page : les noms de communes ne doivent pas se couper. */
.lbd-pied__villes { columns: 2; column-gap: 24px; }
.lbd-pied__villes li { break-inside: avoid; }
.lbd-pied__villes a, .lbd-pied__bloc a { white-space: nowrap; }
@media (max-width: 860px) { .lbd-pied__villes { columns: 1; } }

/* Le menu tenait sur deux lignes : la baseline du logo mangeait 175 px à
   elle seule. On la resserre et on compacte la navigation — mesuré à
   1200 px de gabarit, il reste alors une marge confortable. */
.lbd-logo__baseline { font-size: 9px; letter-spacing: .08em; }
.lbd-nav__liste { gap: 14px; font-size: 14px; }
@media (max-width: 1180px) {
  .lbd-logo__baseline { display: none; }
  .lbd-nav__liste { gap: 12px; font-size: 13.5px; }
}

/* Colonne de lecture un peu plus large, sommaire idem : la grille laissait
   160 px inutilisés à droite. */
.lbd-corps { grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; }
.lbd-corps .lbd-page__contenu { max-width: 760px; }

/* Les logos de marques n'ont pas les mêmes proportions : les écussons
   carrés (Nice, BFT) paraissaient deux fois plus petits que les logotypes
   larges à hauteur égale. On les laisse monter. */
.lbd-marque__logo[data-forme="carre"] { max-height: 56px; }

/* Archive de commune : le paragraphe qui suit les cartes de prestations. */
.lbd-zone__complement {
  max-width: 720px; margin: 32px 0 0;
  font-size: 17px; line-height: 1.6; color: var(--texte-gris);
}
.lbd-page--zone .lbd-page__contenu { max-width: 760px; }

/* Le développement propre à la commune vient après les cartes : il lui faut
   une respiration franche, sinon il se lit comme la suite du paragraphe. */
.lbd-zone__detail {
  margin-top: 56px; padding-top: 48px;
  border-top: 1px solid var(--filet);
}
.lbd-zone__detail > h2:first-child { margin-top: 0; }

@media (max-width: 760px) {
  .lbd-zone__detail { margin-top: 40px; padding-top: 32px; }
}

/* La baseline occupait 160 px pour un logotype de 65 : à ce prix, elle
   poussait « Climatisation » sur une deuxième ligne. Le menu dit déjà ce
   que fait l'entreprise — on garde l'écusson et le logotype seuls. */
.lbd-logo__baseline { display: none; }
.lbd-nav__liste { gap: 16px; font-size: 14.5px; }
@media (max-width: 1080px) { .lbd-nav__liste { gap: 13px; font-size: 14px; } }

/* CORRECTION — ordre de cascade.
   La règle deux colonnes ajoutée plus haut passait après sa propre requête
   média : sur mobile, le sommaire gardait ses 280 px et la colonne de
   lecture tombait à une soixantaine de pixels. On redéclare le repli une
   colonne après elle. */
@media (max-width: 1080px) {
  .lbd-corps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lbd-corps .lbd-page__contenu { max-width: none; }
  .lbd-sommaire { position: static; margin-bottom: 36px; }
  .lbd-sommaire ol { columns: 2; column-gap: 32px; }
}
@media (max-width: 620px) { .lbd-sommaire ol { columns: 1; } }

/* ==========================================================================
   Sections du design restées sur l'étagère : S02, S03, S09, S11.
   ========================================================================== */

/* S02 — Déroulé de l'intervention */
.lbd-deroule { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; }
.lbd-deroule__intro h2 { margin: 0 0 14px; }
.lbd-deroule__intro p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texte-gris); }
.lbd-etapes { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.lbd-etape {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px;
  padding: 22px 0; border-bottom: 1px solid var(--filet);
}
.lbd-etape__num {
  font-size: 40px; line-height: .9; font-weight: 800; letter-spacing: -.03em;
  color: var(--filet); font-variant-numeric: tabular-nums;
}
.lbd-etape h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.lbd-etape p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-gris); }
.lbd-etape:hover .lbd-etape__num { color: var(--ambre-clair); }

/* S03 — Engagements */
.lbd-engagements {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--navy);
}
.lbd-engagement { padding: 26px 28px 26px 0; border-bottom: 1px solid var(--filet); position: relative; }
.lbd-engagement:nth-child(3n+2), .lbd-engagement:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--filet); }
.lbd-engagement h3 {
  margin: 0 0 8px; padding-top: 14px; font-size: 20px; font-weight: 700;
  letter-spacing: -.01em; color: var(--navy);
}
.lbd-engagement h3::before {
  content: ""; position: absolute; top: 26px; width: 26px; height: 3px; background: var(--ambre);
}
.lbd-engagement p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--texte-gris); }

/* S09 — Notre atelier */
.lbd-atelier { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border-top: 2px solid var(--navy); }
.lbd-atelier__photo { grid-column: 1 / -1; margin: 0; }
.lbd-atelier__photo img { display: block; width: 100%; height: 300px; object-fit: cover; }
.lbd-atelier__infos { display: contents; }
.lbd-atelier__nap { padding: 30px 40px 30px 0; border-right: 1px solid var(--filet); }
.lbd-atelier__nom { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.lbd-atelier__nap address { font-style: normal; font-size: 17px; line-height: 1.55; color: var(--texte-gris); }
.lbd-atelier__lignes { margin: 22px 0 0; display: grid; grid-template-columns: 108px minmax(0, 1fr); row-gap: 14px; }
.lbd-atelier__lignes dt {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--surtitre); padding-top: 4px;
}
.lbd-atelier__lignes dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--encre); }
.lbd-atelier__lignes dd span { color: var(--sourdine); font-size: 15px; }
.lbd-tel--atelier { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.lbd-atelier__actions { margin: 26px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lbd-lien-fleche { font-size: 15px; font-weight: 700; color: var(--lien); }
.lbd-lien-fleche:hover { color: var(--ambre); }

/* Carte : le cadre est réservé avant tout chargement, donc aucun décalage. */
.lbd-geo { position: relative; min-height: 340px; background: var(--gris); }
.lbd-geo iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.lbd-geo__voile {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(10,42,71,.035) 14px 28px),
    var(--gris);
}
.lbd-geo__adresse { margin: 0; font-size: 17px; font-weight: 700; color: var(--navy); }
.lbd-geo__bouton {
  padding: 12px 22px; border: 0; border-radius: 8px; background: var(--navy); color: #fff;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.lbd-geo__bouton:hover { background: #123a5e; }
.lbd-geo__note { margin: 0; max-width: 300px; font-size: 13px; line-height: 1.45; color: var(--sourdine); }

/* S11 — Distances depuis l'atelier */
.lbd-distances {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px;
  border-top: 2px solid var(--navy);
}
.lbd-distances a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 0; border-bottom: 1px solid var(--filet); transition: padding-left .15s;
}
.lbd-distances a:hover { padding-left: 8px; }
.lbd-distances .lbd-zone__nom { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.lbd-distances a:hover .lbd-zone__nom { color: var(--ambre); }
.lbd-distances .lbd-zone__km { font-size: 15px; color: var(--sourdine); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1080px) {
  .lbd-deroule { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lbd-engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lbd-engagement:nth-child(3n+2), .lbd-engagement:nth-child(3n) { padding-left: 0; border-left: 0; }
  .lbd-engagement:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--filet); }
}
@media (max-width: 860px) {
  .lbd-engagements, .lbd-distances { grid-template-columns: minmax(0, 1fr); }
  .lbd-engagement, .lbd-engagement:nth-child(even) { padding: 22px 0; border-left: 0; }
  .lbd-atelier { grid-template-columns: minmax(0, 1fr); }
  .lbd-atelier__nap { padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--filet); }
  .lbd-atelier__lignes { grid-template-columns: 96px minmax(0, 1fr); }
  .lbd-atelier__photo img { height: 220px; }
  .lbd-geo, .lbd-geo iframe { min-height: 280px; }
  .lbd-etape { grid-template-columns: 52px minmax(0, 1fr); }
  .lbd-etape__num { font-size: 30px; }
}

/* S09 — correction : la photo de l'atelier est un portrait (369×1024).
   En bandeau pleine largeur écrasé à 300 px, il n'en restait qu'une bande
   inexploitable. Le design la voulait « pleine hauteur » : on la remet en
   colonne, à côté du NAP et de la carte. */
.lbd-atelier { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); }
.lbd-atelier__photo { grid-column: auto; grid-row: 1; height: 100%; border-right: 1px solid var(--filet); }
.lbd-atelier__photo img { height: 100%; min-height: 440px; object-fit: cover; }
.lbd-atelier__nap { padding: 30px 36px; }
@media (max-width: 1080px) {
  .lbd-atelier { grid-template-columns: 240px minmax(0, 1fr); }
  .lbd-atelier__photo { grid-row: 1 / span 2; }
  .lbd-atelier__nap { border-right: 0; border-bottom: 1px solid var(--filet); }
}
@media (max-width: 860px) {
  .lbd-atelier { grid-template-columns: minmax(0, 1fr); }
  .lbd-atelier__photo { grid-row: auto; border-right: 0; }
  .lbd-atelier__photo img { min-height: 0; height: 240px; }
  .lbd-atelier__nap { padding: 26px 0; }
}

/* ==========================================================================
   Page de dépôt de photos — pensée pouce en main, sur un écran de téléphone.
   ========================================================================== */
.lbd-depot-page { background: var(--gris); }
.lbd-depot { width: min(100% - 32px, 620px); margin: 0 auto; padding: 24px 0 60px; }
.lbd-depot__entete { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.lbd-depot__logo { height: 46px; width: auto; }
.lbd-depot__entete strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.lbd-depot__entete span { display: block; font-size: 13px; color: var(--sourdine); }
.lbd-depot h1 { margin: 0 0 12px; font-size: 32px; line-height: 1.1; letter-spacing: -.03em; color: var(--navy); }
.lbd-depot__chapo { margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--texte-gris); }

.lbd-depot__form { background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: 22px; }
.lbd-depot__champ { display: block; margin-bottom: 18px; }
.lbd-depot__champ > span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--navy); }
.lbd-depot__champ em { font-style: normal; font-weight: 400; color: var(--sourdine); }
.lbd-depot__champ input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--filet); border-radius: 9px;
  font: inherit; font-size: 16px; color: var(--encre); background: #fff;
}
.lbd-depot__champ input:focus { outline: 2px solid var(--ambre); outline-offset: 1px; border-color: transparent; }

/* La zone est un <label> : sur mobile, un appui ouvre directement le
   sélecteur système (appareil photo ou galerie). */
.lbd-depot__zone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; border: 2px dashed var(--local-bord); border-radius: 12px;
  background: var(--local-fond); text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lbd-depot__zone:hover, .lbd-depot__zone:focus-within { border-color: var(--ambre); background: #FFEBD6; }
.lbd-depot__icone {
  width: 52px; height: 52px; border-radius: 50%; background: var(--ambre); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 400; line-height: 1; margin-bottom: 6px;
}
.lbd-depot__zone strong { font-size: 19px; font-weight: 700; color: var(--navy); }
.lbd-depot__zone em { font-style: normal; font-size: 14px; color: var(--local-surtitre); }
#lbd-depot-fichiers { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lbd-depot__aide { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sourdine); }

.lbd-depot__etat { margin: 20px 0 0; font-size: 16px; font-weight: 700; color: var(--navy); min-height: 24px; }
.lbd-depot__etat.est-ok { color: var(--vert); }
.lbd-depot__etat.est-ko { color: #B4341F; }

.lbd-depot__liste {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px;
}
.lbd-depot__liste li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.lbd-depot__liste img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbd-depot__badge {
  position: absolute; right: 6px; bottom: 6px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 12px; background: rgba(10,42,71,.82); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700;
}
.lbd-depot__badge.est-ok { background: var(--vert); }
.lbd-depot__badge.est-ko { background: #B4341F; }

.lbd-depot__pied { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--filet); }
.lbd-depot__pied p { margin: 0 0 6px; font-size: 15px; color: var(--texte-gris); }
.lbd-depot__tel { font-size: 20px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.lbd-depot__mention { font-size: 13px; color: var(--sourdine); }
.lbd-depot__bloque { background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: 28px; }
.lbd-depot__bloque h1 { font-size: 26px; }
.lbd-depot__bloque p { margin: 0; color: var(--texte-gris); line-height: 1.6; }

/* S09 — la photo de l'atelier est un portrait très haut : laissée dans le
   flux, elle imposait 830 px à toute la rangée et creusait un vide blanc à
   côté du NAP. Sortie du flux, elle remplit la hauteur décidée par les deux
   autres colonnes au lieu de la dicter. */
.lbd-atelier__photo { position: relative; min-height: 400px; overflow: hidden; }
.lbd-atelier__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; min-height: 0; object-fit: cover;
}
@media (max-width: 860px) {
  .lbd-atelier__photo { min-height: 0; height: 240px; }
}

/* ==========================================================================
   Menu à deux niveaux, barre d'urgence collante, nom de l'entreprise.
   ========================================================================== */

/* Le logotype porte désormais le nom complet : « Les Bons Dépanneurs ».
   LBD06 reste le raccourci d'usage, il vit dans l'écusson et le pied. */
.lbd-logo__nom { font-size: 17px; line-height: 1.15; white-space: nowrap; }

/* --- Sous-menus ---------------------------------------------------------- */
.lbd-nav__liste > li { position: relative; padding-bottom: 12px; margin-bottom: -12px; }
.lbd-nav__liste .menu-item-has-children > a { padding-right: 14px; }
.lbd-nav__liste .menu-item-has-children > a::before {
  content: ""; position: absolute; right: 0; top: 50%; margin-top: -1px;
  width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-60%) rotate(45deg); opacity: .55;
}
.lbd-nav__liste .sub-menu {
  display: none; position: absolute; top: 100%; left: -16px; z-index: 60;
  min-width: 236px; margin: 0; padding: 8px 0; list-style: none;
  background: #fff; border: 1px solid var(--filet); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(10, 42, 71, .13);
}
.lbd-nav__liste > li:hover > .sub-menu,
.lbd-nav__liste > li:focus-within > .sub-menu { display: block; }
.lbd-nav__liste .sub-menu li { padding: 0; }
.lbd-nav__liste .sub-menu a {
  display: block; padding: 10px 18px; font-size: 14.5px; font-weight: 600;
  color: var(--texte-gris); white-space: nowrap;
}
.lbd-nav__liste .sub-menu a::after { content: none; }
.lbd-nav__liste .sub-menu a:hover { background: var(--gris); color: var(--navy); }
.lbd-sousmenu__bascule { display: none; }

/* --- Barre d'urgence collante (mobile) ----------------------------------- */
.lbd-urgence { display: none; }

@media (max-width: 860px) {
  .lbd-urgence {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--filet);
    box-shadow: 0 -6px 22px rgba(10, 42, 71, .1);
  }
  .lbd-urgence__accroche {
    flex: 1; margin: 0; font-size: 13px; line-height: 1.3; color: var(--texte-gris);
  }
  .lbd-urgence__accroche strong { display: block; color: var(--navy); font-size: 13.5px; }
  .lbd-urgence__bouton {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 18px; border-radius: 10px;
    background: var(--ambre); color: #fff;
    font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
  }
  .lbd-urgence__bouton:hover, .lbd-urgence__bouton:active { background: #c25f09; color: #fff; }
  .lbd-urgence__icone { flex: none; }

  /* La barre ne doit jamais masquer la fin du pied de page. */
  body { padding-bottom: 78px; }

  /* Sous-menus dépliables dans le menu burger. */
  .lbd-nav__liste > li { padding-bottom: 0; margin-bottom: 0; }
  .lbd-nav__liste .menu-item-has-children > a::before { content: none; }
  .lbd-nav__liste .sub-menu {
    position: static; min-width: 0; border: 0; border-radius: 0;
    box-shadow: none; padding: 0 0 8px 14px; background: transparent;
  }
  .lbd-nav__liste > li:hover > .sub-menu { display: none; }
  .lbd-nav__liste > li[data-ouvert] > .sub-menu { display: block; }
  .lbd-nav__liste .sub-menu a { padding: 10px 0; font-size: 15px; }
  .lbd-nav__liste .sub-menu li + li { border-top: 1px solid var(--filet-clair); }

  .lbd-nav__liste .menu-item-has-children { display: grid; grid-template-columns: 1fr 46px; }
  .lbd-nav__liste .menu-item-has-children > a { grid-column: 1; }
  .lbd-sousmenu__bascule {
    grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--navy); font: inherit; font-size: 22px;
    cursor: pointer; padding: 0;
  }
  .lbd-nav__liste .sub-menu { grid-column: 1 / -1; }
  .lbd-entete__cta { order: 3; margin-left: 0; }
}

/* Sur un écran tactile large (tablette), on garde le survol mais on ouvre
   aussi au focus clavier : le sous-menu ne doit pas être inatteignable. */
@media (hover: none) and (min-width: 861px) {
  .lbd-nav__liste > li:focus-within > .sub-menu { display: block; }
}

/* La ligne de gauche de la barre d'urgence tenait sur trois lignes : on la
   resserre pour garder la barre basse et le bouton bien dégagé. */
@media (max-width: 860px) {
  .lbd-urgence__accroche { font-size: 12.5px; line-height: 1.25; }
  .lbd-urgence__accroche strong { font-size: 14px; margin-top: 1px; }
}
@media (max-width: 360px) {
  .lbd-urgence__accroche { display: none; }
  .lbd-urgence__bouton { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Gabarits « page service » et « page sous-service » (planches 3a et 3b).
   ========================================================================== */

/* S17 — Repères chiffrés du métier, sur fond clair (variante de S01). */
.lbd-reperes {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 8px 0 4px; border-top: 2px solid var(--navy); border-bottom: 1px solid var(--filet);
}
.lbd-reperes > div { padding: 24px 24px 24px 0; }
.lbd-reperes > div + div { border-left: 1px solid var(--filet); padding-left: 24px; }
.lbd-reperes strong {
  display: block; font-size: 44px; line-height: 1; font-weight: 800;
  letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.lbd-reperes span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--texte-gris); }

/* S20 — Trois repères de conversion en tête de sous-service. */
.lbd-cles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 0 4px; border: 1px solid var(--local-bord-doux); border-radius: 14px;
  background: var(--local-fond); overflow: hidden;
}
.lbd-cles > div { padding: 22px 26px; }
.lbd-cles > div + div { border-left: 1px solid var(--local-bord-doux); }
.lbd-cle__etiquette {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--local-surtitre); margin-bottom: 8px;
}
.lbd-cles strong {
  display: block; font-size: 34px; line-height: 1; font-weight: 800;
  letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums;
}
.lbd-cles > div > span:last-child { display: block; margin-top: 7px; font-size: 14px; color: var(--texte-gris); }

/* S18 — Grille des prestations d'un métier. */
.lbd-prestations {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin-top: 36px; border-top: 2px solid var(--navy);
}
.lbd-prestation {
  display: flex; flex-direction: column; padding: 26px 28px 24px 0;
  border-bottom: 1px solid var(--filet); transition: background .18s;
}
.lbd-prestation:nth-child(3n+2), .lbd-prestation:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--filet); }
.lbd-prestation:hover { background: var(--gris); }
.lbd-prestation h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--navy); }
.lbd-prestation:hover h3 { color: var(--ambre); }
.lbd-prestation p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--texte-gris); }
.lbd-prestation__pied {
  margin-top: auto; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--filet-clair);
}
.lbd-prestation__prix {
  font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.lbd-prestation__duree { font-size: 13.5px; color: var(--sourdine); }

/* S21 — Ce que comprend la prestation. */
.lbd-inclus { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; }
.lbd-inclus__intro h2 { margin: 0 0 14px; }
.lbd-inclus__intro p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--texte-gris); }
.lbd-inclus__appel {
  padding: 20px; border-radius: 12px; background: #fff; border: 1px solid var(--filet);
}
.lbd-inclus__appel em {
  display: block; margin-top: 6px; font-style: normal; font-size: 14.5px;
  line-height: 1.5; color: var(--texte-gris);
}
.lbd-inclus__liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.lbd-inclus__liste li {
  position: relative; padding: 14px 0 14px 34px;
  border-bottom: 1px solid var(--filet); font-size: 16.5px; line-height: 1.5; color: var(--encre);
}
.lbd-inclus__liste li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 12px; height: 7px; border-left: 2.5px solid var(--ambre); border-bottom: 2.5px solid var(--ambre);
  transform: rotate(-45deg);
}

@media (max-width: 1080px) {
  .lbd-prestations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lbd-prestation:nth-child(3n+2), .lbd-prestation:nth-child(3n) { padding-left: 0; border-left: 0; }
  .lbd-prestation:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--filet); }
  .lbd-inclus { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
  .lbd-reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lbd-reperes > div { padding: 18px 16px 18px 0; }
  .lbd-reperes > div:nth-child(odd) { border-left: 0; }
  .lbd-reperes > div:nth-child(even) { border-left: 1px solid var(--filet); padding-left: 16px; }
  .lbd-reperes > div:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .lbd-reperes strong { font-size: 32px; }

  .lbd-cles { grid-template-columns: minmax(0, 1fr); }
  .lbd-cles > div + div { border-left: 0; border-top: 1px solid var(--local-bord-doux); }
  .lbd-cles > div { padding: 18px 20px; }
  .lbd-cles strong { font-size: 28px; }

  .lbd-prestations { grid-template-columns: minmax(0, 1fr); }
  .lbd-prestation, .lbd-prestation:nth-child(even) { padding: 22px 0; border-left: 0; }
}

/* Les titres des colonnes étroites (déroulé, inclus) sont calibrés pour une
   pleine largeur : à 340-380 px, « Comment se passe une intervention portail
   électrique » tombait sur cinq lignes. On les descend d'un cran. */
.lbd-deroule__intro h2, .lbd-inclus__intro h2 {
  font-size: 33px; line-height: 1.12; letter-spacing: -.025em;
}
@media (max-width: 1080px) {
  .lbd-deroule__intro h2, .lbd-inclus__intro h2 { font-size: 30px; }
}

/* Le bandeau de conversion passe à trois ou quatre repères selon que la
   prestation pose du matériel neuf (garantie constructeur) ou non. */
.lbd-cles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (max-width: 1080px) { .lbd-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .lbd-cles { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Saisie des tarifs — même habillage que le dépôt de photos, en plus large.
   ========================================================================== */
.lbd-depot--large { width: min(100% - 32px, 860px); }

.lbd-tarifs__barre {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 26px 0 8px; padding: 14px 0;
  background: var(--gris); border-bottom: 1px solid var(--filet);
}
.lbd-tarifs__barre--bas { position: static; border-bottom: 0; border-top: 1px solid var(--filet); margin-top: 22px; }
.lbd-tarifs__etat { font-size: 14.5px; font-weight: 700; color: var(--texte-gris); }
.lbd-tarifs__etat.est-ok { color: var(--vert); }
.lbd-tarifs__etat.est-ko { color: #B4341F; }

.lbd-tarifs__page {
  background: #fff; border: 1px solid var(--filet); border-radius: 14px;
  padding: 6px 22px 14px; margin-bottom: 18px;
}
.lbd-tarifs__page h2 {
  margin: 18px 0 6px; font-size: 20px; font-weight: 800;
  letter-spacing: -.01em; color: var(--navy);
}
.lbd-tarifs__parent {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sourdine); margin-bottom: 4px;
}
.lbd-tarifs__page h2 a { font-size: 13px; font-weight: 600; white-space: nowrap; margin-left: 8px; }

.lbd-tarif {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-top: 1px solid var(--filet-clair);
}
.lbd-tarif__libelle { flex: 1; font-size: 15.5px; line-height: 1.4; color: var(--encre); }
.lbd-tarif__libelle em {
  display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--sourdine);
}
.lbd-tarif__saisie { flex: none; display: flex; align-items: center; gap: 7px; }
.lbd-tarif__saisie input {
  width: 110px; padding: 11px 12px; border: 1px solid var(--filet); border-radius: 9px;
  font: inherit; font-size: 17px; font-weight: 700; text-align: right;
  color: var(--navy); font-variant-numeric: tabular-nums; background: #fff;
}
.lbd-tarif__saisie input:focus { outline: 2px solid var(--ambre); outline-offset: 1px; border-color: transparent; }
.lbd-tarif__saisie > span { font-size: 17px; font-weight: 700; color: var(--sourdine); }

.lbd-tarif--plancher { background: var(--local-fond); margin: 0 -22px; padding: 14px 22px; border-top: 0; }
.lbd-tarif.est-modifie .lbd-tarif__saisie input { border-color: var(--ambre); background: #FFF8F0; }
.lbd-tarif.est-enregistre .lbd-tarif__libelle::after {
  content: " ✓"; color: var(--vert); font-weight: 700;
}

@media (max-width: 620px) {
  .lbd-tarif { flex-direction: column; align-items: stretch; gap: 8px; }
  .lbd-tarif__saisie input { width: 100%; text-align: left; }
  .lbd-tarifs__page { padding: 6px 16px 14px; }
  .lbd-tarif--plancher { margin: 0 -16px; padding: 14px 16px; }
}


/* ==========================================================================
   Saisie des tarifs : progression, étapes, validation en un geste.
   ========================================================================== */
.lbd-progres { margin: 22px 0 4px; }
.lbd-progres__barre {
  height: 10px; border-radius: 6px; background: #E3E8ED; overflow: hidden;
}
.lbd-progres__barre span {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--ambre) 0%, var(--ambre-clair) 100%);
  transition: width .35s ease;
}
.lbd-progres__texte { margin: 10px 0 0; font-size: 15px; color: var(--texte-gris); }
.lbd-progres__texte strong {
  font-size: 20px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums;
}

/* Étapes : une par métier, la première inachevée s'ouvre d'elle-même. */
.lbd-tarifs__etape {
  background: #fff; border: 1px solid var(--filet); border-radius: 14px;
  margin-bottom: 14px; overflow: hidden;
}
.lbd-tarifs__etape > summary {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  cursor: pointer; list-style: none;
}
.lbd-tarifs__etape > summary::-webkit-details-marker { display: none; }
.lbd-tarifs__num {
  flex: none; font-size: 15px; font-weight: 800; color: var(--filet);
  font-variant-numeric: tabular-nums;
}
.lbd-tarifs__titre { flex: 1; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.lbd-tarifs__compte {
  flex: none; padding: 5px 12px; border-radius: 20px; background: var(--gris);
  font-size: 13.5px; font-weight: 700; color: var(--texte-gris);
  font-variant-numeric: tabular-nums;
}
.lbd-tarifs__etape.est-finie { border-color: #BFE0CC; }
.lbd-tarifs__etape.est-finie .lbd-tarifs__titre::after { content: " ✓"; color: var(--vert); }
.lbd-tarifs__etape.est-finie .lbd-tarifs__compte { background: #E4F3EA; color: var(--vert); }
.lbd-tarifs__etape > summary:hover .lbd-tarifs__titre { color: var(--ambre); }

.lbd-tarifs__etape .lbd-tarifs__page {
  border: 0; border-top: 1px solid var(--filet); border-radius: 0;
  margin: 0; padding: 4px 22px 16px;
}

/* Bouton de validation : le geste par défaut. */
.lbd-valider {
  flex: none; width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--filet); background: #fff; color: #C3CCD4;
  font-size: 19px; line-height: 1; font-weight: 700; transition: all .15s;
}
.lbd-valider:hover { border-color: var(--vert); color: var(--vert); }
.lbd-tarif.est-valide .lbd-valider { background: var(--vert); border-color: var(--vert); color: #fff; }
.lbd-tarif.est-valide .lbd-tarif__libelle { color: var(--sourdine); }
.lbd-tarif.est-valide .lbd-tarif__saisie input { border-color: #CFE3D7; }
.lbd-tarif.est-modifie .lbd-tarif__saisie input { border-color: var(--ambre); background: #FFF8F0; color: var(--navy); }
.lbd-tarif.est-enregistre .lbd-tarif__libelle::after { content: none; }

.lbd-tarifs__tout { margin: 14px 0 0; }
.lbd-tout-valider {
  padding: 9px 15px; border: 1px solid var(--filet); border-radius: 9px;
  background: #fff; font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--texte-gris); cursor: pointer;
}
.lbd-tout-valider:hover { border-color: var(--vert); color: var(--vert); }

@media (max-width: 620px) {
  .lbd-tarifs__etape > summary { padding: 15px 16px; gap: 10px; }
  .lbd-tarifs__titre { font-size: 17px; }
  .lbd-tarifs__etape .lbd-tarifs__page { padding: 4px 16px 14px; }
  .lbd-tarif { flex-direction: row; align-items: center; gap: 12px; }
  .lbd-tarif__libelle { font-size: 15px; }
  .lbd-tarif__saisie input { width: 78px; text-align: right; }
  .lbd-tarif--plancher { margin: 0 -16px; padding: 14px 16px; }
}

/* Les étapes arrivent repliées : sans repère, rien ne dit qu'elles s'ouvrent. */
.lbd-tarifs__chevron {
  flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid #B9C4CE; border-bottom: 2px solid #B9C4CE;
  transform: translateY(-2px) rotate(45deg); transition: transform .18s, border-color .18s;
}
.lbd-tarifs__etape[open] .lbd-tarifs__chevron { transform: translateY(2px) rotate(-135deg); }
.lbd-tarifs__etape > summary:hover .lbd-tarifs__chevron { border-color: var(--ambre); }
.lbd-tarifs__etape.est-finie .lbd-tarifs__chevron { border-color: #8FC0A3; }

/* Huit métiers, dont six au premier niveau du menu : il faut resserrer
   encore d'un cran. Mesuré à 1200 px de gabarit, la barre repasse sur une
   seule ligne avec de la marge. */
.lbd-nav__liste { gap: 13px; font-size: 14px; }
@media (max-width: 1180px) { .lbd-nav__liste { gap: 11px; font-size: 13.5px; } }

/* ==========================================================================
   Huit métiers : le menu déroulant ne tient plus sur une ligne en dessous de
   1280 px. Plutôt que de rogner la typographie jusqu'à deux pixels de marge,
   on passe au menu bouton dès 1280 px. C'est robuste : aucun rendu de police
   ne peut le casser.
   ========================================================================== */
@media (max-width: 1280px) {
  .lbd-burger { display: inline-flex; order: 2; margin-left: auto; }
  .lbd-entete__cta { order: 3; margin-left: 0; }
  .lbd-entete__inner { flex-wrap: wrap; gap: 12px 20px; }
  .lbd-nav { order: 4; width: 100%; overflow: visible; }
  .lbd-nav[hidden] { display: none; }

  .lbd-nav__liste {
    flex-direction: column; flex-wrap: nowrap; gap: 0; width: 100%;
    padding-top: 6px; border-top: 1px solid var(--filet); font-size: 15px;
  }
  .lbd-nav__liste li { border-bottom: 1px solid var(--filet-clair); }
  .lbd-nav__liste a { display: block; padding: 13px 0; }
  .lbd-nav__liste a::after { content: none; }

  .lbd-nav__liste > li { position: static; padding-bottom: 0; margin-bottom: 0; }
  .lbd-nav__liste .menu-item-has-children > a::before { content: none; }
  .lbd-nav__liste .menu-item-has-children { display: grid; grid-template-columns: 1fr 46px; }
  .lbd-nav__liste .menu-item-has-children > a { grid-column: 1; }
  .lbd-sousmenu__bascule { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; }
  .lbd-nav__liste .sub-menu {
    grid-column: 1 / -1; position: static; min-width: 0; border: 0;
    border-radius: 0; box-shadow: none; padding: 0 0 8px 14px; background: transparent;
  }
  .lbd-nav__liste > li:hover > .sub-menu { display: none; }
  .lbd-nav__liste > li[data-ouvert] > .sub-menu { display: block; }
  .lbd-nav__liste .sub-menu a { padding: 10px 0; font-size: 14.5px; }
  .lbd-nav__liste .sub-menu li + li { border-top: 1px solid var(--filet-clair); }

  .js .lbd-nav[data-repliable] { display: none; }
  .js .lbd-nav[data-repliable][data-ouvert="1"] { display: block; }
}

/* Au-dessus de 1280 px, la barre reste horizontale : on rétablit la règle
   que la requête « min-width: 861px » posait pour le menu déroulant. */
@media (min-width: 1281px) {
  .js .lbd-nav[data-repliable] { display: block; }
  .lbd-burger { display: none; }
  .lbd-nav__liste { gap: 14px; font-size: 14.5px; }
}

/* ==========================================================================
   En-tête sur une seule ligne, à toutes les largeurs.

   Sous 560 px, le bloc « Ouvert 24h/24 · numéro » ne tenait plus à côté du
   logo et du bouton Menu : il basculait sur une deuxième ligne et l'en-tête
   doublait de hauteur. Il fait de toute façon doublon avec la barre d'appel
   collante en bas d'écran, qui porte le même numéro en plus visible.
   ========================================================================== */
@media (max-width: 560px) {
  .lbd-entete__inner { flex-wrap: nowrap; gap: 12px; }
  .lbd-entete__cta { display: none; }
  .lbd-burger { margin-left: auto; }
  .lbd-nav { order: 4; }

  /* Le menu déplié doit revenir sur sa propre ligne, en pleine largeur. */
  .lbd-entete__inner { flex-wrap: wrap; }
  .lbd-entete__marque, .lbd-burger { flex: none; }
  .lbd-nav { flex: 1 0 100%; }
}

/* Sous 400 px — iPhone SE et assimilés — « Les Bons Dépanneurs » et le bouton
   « Menu » ne tiennent plus côte à côte. On réduit la marque et on garde le
   seul pictogramme du bouton : le mot n'apporte rien, l'icône est comprise. */
@media (max-width: 400px) {
  .lbd-logo { gap: 9px; }
  .lbd-logo__ecusson { height: 34px; }
  .lbd-logo__nom { font-size: 15.5px; letter-spacing: -.025em; }
  .lbd-burger { padding: 9px 11px; font-size: 0; gap: 0; }
  .lbd-burger__trait { width: 18px; }
  .lbd-burger__trait::before, .lbd-burger__trait::after { width: 18px; }
  .lbd-conteneur { width: calc(100% - 28px); }
}

/* CORRECTION — ordre de cascade, même piège que pour la colonne de lecture.
   Le rééquilibrage du bloc avis en deux colonnes a été ajouté après sa propre
   requête média : sur mobile, la grille restait à deux colonnes et débordait
   l'écran sous 360 px. On redéclare le repli après lui. */
.lbd-avis__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .lbd-avis__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ==========================================================================
   Hero des pages métier et prestation : texte à gauche, photo à droite,
   comme sur les planches 3a et 3b. Les pages villes, guides et pages
   éditoriales gardent l'en-tête pleine largeur.
   ========================================================================== */
.lbd-page__hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center; margin-bottom: 8px;
}
.lbd-page__hero .lbd-page__entete { margin-bottom: 0; }
.lbd-page__hero .lbd-page__visuel { margin: 0; }
.lbd-page__hero .lbd-page__visuel img {
  display: block; width: 100%; height: 380px; object-fit: cover; border-radius: 14px;
}
.lbd-page__hero .lbd-surtitre { margin-bottom: 14px; }

@media (max-width: 980px) {
  .lbd-page__hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* La photo passe au-dessus du texte, comme sur la déclinaison mobile. */
  .lbd-page__hero .lbd-page__visuel { order: -1; }
  .lbd-page__hero .lbd-page__visuel img { height: 240px; }
}

/* ==========================================================================
   Visuels dans le corps de texte.
   Les pages villes font désormais 1 600 mots : sans respiration, c'est un mur.
   ========================================================================== */
.lbd-page__contenu figure.lbd-illus {
  margin: 34px 0; padding: 0;
}
.lbd-page__contenu figure.lbd-illus img {
  display: block; width: 100%; height: 320px; object-fit: cover;
  border-radius: 12px; background: var(--gris);
}
.lbd-page__contenu figure.lbd-illus figcaption {
  margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--ambre);
  font-size: 14px; line-height: 1.45; color: var(--sourdine);
}
/* Deux visuels côte à côte, quand la section s'y prête. */
.lbd-page__contenu .lbd-illus--duo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 34px 0;
}
.lbd-page__contenu .lbd-illus--duo figure { margin: 0; }
.lbd-page__contenu .lbd-illus--duo img { height: 230px; }
@media (max-width: 860px) {
  .lbd-page__contenu figure.lbd-illus img { height: 220px; }
  .lbd-page__contenu .lbd-illus--duo { grid-template-columns: minmax(0, 1fr); }
  .lbd-page__contenu .lbd-illus--duo img { height: 200px; }
}

/* ---------- Mention légale sous les tarifs ---------- */
.lbd-mention-tarifs {
  max-width: 720px; margin: 12px 0 28px;
  font-size: 13px; line-height: 1.55; color: var(--texte-gris);
}
.lbd-section .lbd-mention-tarifs { margin: 20px 0 0; }

/* ---------- Formulaire de contact ---------- */
.lbd-contact {
  margin: 8px 0 48px; padding: 36px 40px 28px;
  background: var(--blanc); border: 1.5px solid var(--filet); border-radius: 16px;
}
.lbd-contact h2 { margin-top: 0; }
.lbd-contact__intro { margin: 0 0 24px; color: var(--texte-gris); }
.lbd-contact__form { margin: 0; }
.lbd-contact__urgence {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; border: 0;
}
.lbd-contact__urgence legend {
  width: 100%; margin-bottom: 10px; padding: 0;
  font-size: 14px; font-weight: 700; color: var(--encre);
}
.lbd-contact__urgence label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border: 1.5px solid var(--filet); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--encre);
}
.lbd-contact__urgence label:has(input:checked) { border-color: var(--ambre); background: #FFF8F0; }
.lbd-contact__urgence input { accent-color: var(--ambre); margin: 0; }
.lbd-contact__grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px;
}
/* Spécificité relevée : la marge des paragraphes de page (.lbd-page__contenu p)
   s'ajoutait à l'espacement de la grille et écartait trop les champs. */
.lbd-contact .lbd-contact__champ,
.lbd-contact .lbd-contact__envoi,
.lbd-contact .lbd-contact__intro,
.lbd-contact .lbd-contact__rgpd { margin-bottom: 0; }
.lbd-contact__champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lbd-contact__champ--large { grid-column: 1 / -1; }
.lbd-contact__champ label { font-size: 14px; font-weight: 700; color: var(--encre); }
.lbd-contact__champ label span { font-weight: 400; color: var(--sourdine); margin-left: 4px; }
.lbd-contact__champ input,
.lbd-contact__champ select,
.lbd-contact__champ textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--encre);
  padding: 12px 14px; border: 1.5px solid var(--filet); border-radius: 10px; background: var(--blanc);
}
.lbd-contact__champ textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.lbd-contact__champ :is(input, select, textarea):focus {
  outline: 2px solid var(--ambre); outline-offset: 1px; border-color: transparent;
}
.lbd-contact__champ [aria-invalid="true"] { border-color: #B32D2E; background: #FFF6F6; }
.lbd-contact__piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lbd-contact__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 24px 0 0; }
.lbd-contact__envoi .lbd-bouton { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.lbd-contact__envoi .lbd-bouton:disabled { opacity: .6; cursor: wait; }
.lbd-contact__etat { font-size: 15px; color: var(--texte-gris); }
.lbd-contact__etat.est-erreur { color: #B32D2E; font-weight: 600; }
.lbd-contact__rgpd { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--sourdine); }
.lbd-contact__retour {
  margin: 0 0 20px; padding: 16px 18px; border-radius: 10px; font-size: 16px; line-height: 1.5;
}
.lbd-contact__retour--ok { background: #EAF5EE; border: 1.5px solid #B9DCC6; color: var(--encre); }
.lbd-contact__retour--erreur { background: #FFF6F6; border: 1.5px solid #E7B9B9; color: #7A1F1F; }
.lbd-contact__retour:focus { outline: none; }
.lbd-contact__retour a[href^="tel:"] { white-space: nowrap; font-weight: 700; }
.lbd-contact .lbd-contact__intro { margin-bottom: 24px; }
.lbd-contact .lbd-contact__envoi { margin-top: 24px; }
.lbd-contact .lbd-contact__rgpd { margin-top: 18px; }

@media (max-width: 640px) {
  .lbd-contact { padding: 24px 18px 20px; border-radius: 12px; }
  .lbd-contact__grille { grid-template-columns: minmax(0, 1fr); }
  .lbd-contact__urgence label { flex: 1 1 100%; }
  .lbd-contact__envoi .lbd-bouton { width: 100%; text-align: center; }
}

/* ---------- Page 404 ---------- */
.lbd-introuvable__entete { padding: 56px 0 8px; max-width: 760px; }
.lbd-introuvable__ecrire { font-weight: 700; color: var(--lien); text-decoration: none; }
.lbd-introuvable__ecrire:hover { text-decoration: underline; }

/* ---------- Bandeau cookies ---------- */
/* Accepter et Refuser ont exactement le même poids visuel (exigence CNIL). */
.lbd-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding: 18px 20px; background: var(--blanc);
  border: 1.5px solid var(--filet); border-radius: 14px;
  box-shadow: 0 12px 36px rgba(10, 42, 71, .18);
}
.lbd-cookies[hidden] { display: none; } /* sinon display:flex l'emporte sur l'attribut hidden */
.lbd-cookies__texte { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--texte); }
.lbd-cookies__texte a { color: var(--lien); }
.lbd-cookies__actions { display: flex; gap: 10px; flex: 0 0 auto; }
.lbd-cookies__bouton {
  min-width: 112px; padding: 11px 18px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--navy);
  background: var(--blanc); border: 1.5px solid var(--navy); border-radius: 10px;
}
.lbd-cookies__bouton:hover { background: var(--navy); color: var(--blanc); }
.lbd-cookies__bouton:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
.lbd-pied__cookies {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: inherit; color: inherit; text-decoration: underline;
}
@media (max-width: 860px) {
  /* Au-dessus de la barre d'urgence mobile, jamais par-dessus. */
  .lbd-cookies { left: 10px; right: 10px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); padding: 14px 16px; }
  .lbd-cookies__actions { width: 100%; }
  .lbd-cookies__bouton { flex: 1; }
}

/* ---------- Menu « Autres services » : trois métiers groupés ----------
   Le menu est limité à deux niveaux (au-delà, la barre passe sur deux
   lignes et le mobile devient illisible) : les métiers servent de titres
   de groupe, leurs prestations sont décalées dessous. */
.lbd-nav__liste .sub-menu .lbd-nav__groupe > a { font-weight: 700; color: var(--navy); }
.lbd-nav__liste .sub-menu .lbd-nav__groupe:not(:first-child) { border-top: 1px solid var(--filet); margin-top: 4px; padding-top: 4px; }
.lbd-nav__liste .sub-menu .lbd-nav__enfant > a { padding-left: 28px; font-size: 14px; }
@media (max-width: 1280px) {
  .lbd-nav__liste .sub-menu .lbd-nav__enfant > a { padding-left: 16px; }
  /* Le filet entre éléments existe déjà en mobile : pas de second trait. */
  .lbd-nav__liste .sub-menu .lbd-nav__groupe:not(:first-child) { margin-top: 0; padding-top: 0; }
}