/* ============================================================
   LADB : Pillar page (vitrerie / serrurerie / miroiterie...)
   Tout est scope sous .ladb-pillar (wrapper de page-service-pillar.php)
   pour ne jamais affecter la home page ou les autres templates.
   Charge uniquement sur le template "Page pilier service" (functions.php).
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   FAQ : reskin visuel du bloc partage ladb/faq
   Structure HTML inchangee (meme JS, meme accordeon) : on passe
   d'un look "carte glassmorphique" a une liste plate a separateurs,
   uniquement sur les pages pilier.
   ───────────────────────────────────────────────────────── */
.ladb-pillar .ladb-faq-section {
  background: var(--blue-stellaire);
}
.ladb-pillar .ladb-faq-section__bg,
.ladb-pillar .ladb-faq-section__overlay {
  display: none;
}
.ladb-pillar .ladb-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  max-width: none;
}
.ladb-pillar .ladb-faq__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
.ladb-pillar .ladb-faq__item.is-open {
  border-color: var(--border);
}
.ladb-pillar .ladb-faq__btn {
  padding: 22px 0;
}
.ladb-pillar .ladb-faq__btn span:first-child {
  font-size: 17px;
}
.ladb-pillar .ladb-faq__plus {
  background: transparent;
  border: 1px solid var(--border-strong);
  width: 24px;
  height: 24px;
}
.ladb-pillar .ladb-faq__item.is-open .ladb-faq__plus {
  background: rgba(217,160,102,.12);
}
.ladb-pillar .ladb-faq__body {
  padding: 0 0 22px;
}
.ladb-pillar .ladb-faq__body p {
  max-width: 700px;
  font-size: 15px;
}

/* ─────────────────────────────────────────────────────────
   Sections editoriales natives (Guide vitrage + Expertise)
   Restent des blocs Gutenberg standards (group/heading/paragraph),
   editables depuis l'admin. On change juste l'habillage visuel :
   fond creme -> fond bleu nuit, coherent avec le reste de la page.
   ───────────────────────────────────────────────────────── */
.ladb-pillar .ladb-editorial {
  background: var(--blue-stellaire);
  color: var(--fg-soft);
}
.ladb-pillar .ladb-editorial h2 {
  color: #fff;
}
.ladb-pillar .ladb-editorial h3 {
  color: var(--fg-soft);
  font-size: clamp(17px, 2vw, 20px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ladb-pillar .ladb-editorial h3::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--copper-light);
  flex-shrink: 0;
  border-radius: 2px;
}
.ladb-pillar .ladb-editorial p {
  color: var(--fg-mute);
}
.ladb-pillar .ladb-editorial a {
  color: var(--copper-light);
}
.ladb-pillar .ladb-editorial a:hover {
  color: var(--copper);
}

/* Bandeau de chiffres cles (expertise) */
.ladb-pillar .ladb-editorial__stats {
  border-top: 1px solid var(--border);
}
.ladb-pillar .ladb-editorial__stat {
  color: #fff !important;
}
.ladb-pillar .ladb-editorial__stat::before {
  color: var(--copper-light);
}

/* Zone CTA en bas du guide vitrage */
.ladb-pillar .ladb-editorial__cta {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: 14px;
  padding: 28px 32px;
  margin-top: 40px;
}
.ladb-pillar .ladb-editorial__cta p {
  color: var(--fg-soft);
}
.ladb-pillar .ladb-editorial__cta .wp-block-button.is-style-outline .wp-block-button__link {
  color: var(--copper-light);
  border-color: var(--copper-light);
}
.ladb-pillar .ladb-editorial__cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(217,160,102,.08);
  color: var(--copper);
}

/* ─────────────────────────────────────────────────────────
   HERO : variante pilier (ladb/hero, context="pillar")
   Fil d'Ariane extrait en barre autonome, H1 une ligne avec
   accent inline, CTA telephone en tete, badge dispo, sans
   marqueurs chiffres (deplaces dans le bloc Garanties/Expertise).
   ───────────────────────────────────────────────────────── */
.ladb-pillar-breadcrumb {
  background: var(--blue-abyssal);
  border-bottom: 1px solid var(--border);
}
.ladb-pillar-breadcrumb__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 12px 0;
  font-size: 12px;
  color: var(--fg-dim);
  list-style: none;
  margin: 0;
}
.ladb-pillar-breadcrumb__row li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ladb-pillar-breadcrumb__row a {
  color: var(--fg-mute);
  transition: color var(--dur) var(--ease-out);
}
.ladb-pillar-breadcrumb__row a:hover {
  color: var(--copper-light);
}
.ladb-pillar-breadcrumb__sep {
  color: var(--fg-dim);
  font-size: 11px;
}
.ladb-pillar-breadcrumb__cur {
  color: var(--copper-light);
  font-weight: 500;
}

/* Bleed edge-to-edge at desktop so the photo column reaches the viewport
   right edge, text stays visually aligned to the normal container via the
   padding-left trick on .ladb-hero__body below. */
@media (min-width: 900px) {
  .ladb-hero--pillar .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}
.ladb-hero--pillar .ladb-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .ladb-hero--pillar .ladb-hero__inner {
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }
}
.ladb-hero--pillar .ladb-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 0 48px;
}
@media (min-width: 900px) {
  .ladb-hero--pillar .ladb-hero__body {
    padding-left: max(32px, calc(-558px + 50vw));
    padding-right: 48px;
  }
}
.ladb-hero--pillar .ladb-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  color: var(--fg-dim);
  margin-bottom: 18px;
}
.ladb-hero--pillar .ladb-hero__kicker .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-dispo);
  flex-shrink: 0;
}
.ladb-hero__title--pillar {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0 0 18px;
}
.ladb-hero__title--pillar .acc {
  background: linear-gradient(115deg,#E6BD8B 0%,#D9A066 22%,#B87333 55%,#8C5524 85%,#D9A066 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ladb-hero--pillar .ladb-hero__lede {
  max-width: 520px;
  font-size: 17px;
  line-height: 1.65;
}
.ladb-hero__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 11px;
  background: var(--gradient-copper);
  color: #2A1A09;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: -.01em;
  box-shadow: var(--shadow-copper);
  transition: filter var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ladb-hero__tel:hover,
.ladb-hero__tel:focus-visible {
  filter: brightness(1.06);
  box-shadow: 0 16px 40px rgba(184,115,51,.45);
  color: #2A1A09;
}
.ladb-hero__tel svg {
  flex-shrink: 0;
}
.ladb-hero__avail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid rgba(31,163,95,.5);
  background: rgba(31,163,95,.08);
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dispo);
  margin-top: 20px;
  align-self: flex-start;
}
.ladb-hero__avail .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-dispo);
}
.ladb-hero__avail svg {
  flex-shrink: 0;
}
.ladb-hero__photo--pillar {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: none;
  background: none;
  box-shadow: none;
}
@media (min-width: 900px) {
  .ladb-hero__photo--pillar { min-height: unset; align-self: stretch; }
}
.ladb-hero__photo--pillar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.ladb-hero__photoOverlay--pillar {
  background: linear-gradient(180deg, rgba(6,13,26,.05) 0%, transparent 30%, transparent 60%, rgba(6,13,26,.7) 100%);
}
@media (min-width: 900px) {
  .ladb-hero__photoOverlay--pillar {
    background: linear-gradient(270deg, transparent 55%, rgba(11,26,51,1) 100%);
  }
}
.ladb-hero--pillar .ladb-hero__photocap {
  position: absolute;
  top: auto;
  bottom: 16px;
  left: 20px;
  right: auto;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: none;
  padding: 0;
}

/* ============================================================
   HERO : variante FORMULAIRE (context="pillar" + heroFormShortcode).
   Page urgence : la colonne droite affiche une carte formulaire
   (devis compact) au lieu de la photo. Le tel reste le CTA dominant.
   Fond bleu nuit eleve + bord cuivre, coherent charte, reutilise les
   champs .ladb-cf7-wrapper (global.css). Cette CSS charge apres global.
   ============================================================ */
.ladb-hero--form .ladb-hero__formcol {
  display: flex;
  align-items: center;
  padding: 4px 0 40px;
}
@media (min-width: 900px) {
  .ladb-hero--form .ladb-hero__formcol {
    padding: 48px max(32px, calc(-558px + 50vw)) 48px 48px;
  }
}
/* Le tel passe en XXL sur la variante form : l'appel prime visuellement. */
.ladb-hero--form .ladb-hero__tel {
  font-size: clamp(22px, 3.4vw, 32px);
  padding: 18px 30px;
}
.ladb-hero__formcard.ladb-cf7-wrapper {
  width: 100%;
  background: linear-gradient(165deg, #16294A 0%, #0F1E39 100%);
  border: 1px solid rgba(217,160,102,.35);
  box-shadow: 0 24px 60px rgba(4,9,20,.55);
  padding: 26px 24px;
}
.ladb-hero__formhead { margin-bottom: 18px; }
.ladb-hero__formkicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper-light);
  margin-bottom: 10px;
}
.ladb-hero__formkicker svg { flex-shrink: 0; }
.ladb-hero__formtitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 6px;
}
.ladb-hero__formintro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-mute);
  margin: 0;
}
.ladb-hero__formcard .wpcf7-form { gap: 12px; }
.ladb-hero__formcard textarea { min-height: 82px; }
/* Champ upload photo (non couvert par les selecteurs texte/email/tel). */
.ladb-hero__formcard input[type="file"] {
  width: 100%;
  font-size: 12.5px;
  color: var(--fg-mute);
  background: #0E1A30;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.ladb-hero__formcard input[type="file"]::file-selector-button {
  background: rgba(217,160,102,.12);
  color: var(--copper-light);
  border: 1px solid rgba(217,160,102,.3);
  border-radius: 7px;
  padding: 6px 12px;
  margin-right: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────
   TRUST-STRIP : variante pilier (ladb/trust-strip, context="pillar")
   Bandeau compact sombre, jusqu'a 5 items texte, au lieu du
   bandeau creme a 2 items larges de la home.
   ───────────────────────────────────────────────────────── */
.ladb-trust--pillar {
  background: var(--blue-stellaire);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.ladb-trust__pillar-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ladb-trust__pillar-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-mute);
  white-space: nowrap;
  padding: 3px 18px;
}
.ladb-trust__pillar-item + .ladb-trust__pillar-item {
  border-left: 1px solid var(--border);
}
.ladb-trust__pillar-item .ic {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--copper-light);
}
.ladb-trust__pillar-item strong {
  color: var(--copper-light);
  font-weight: 700;
}
@media (max-width: 768px) {
  .ladb-trust__pillar-item {
    font-size: 12px;
    padding: 4px 12px;
  }
  .ladb-trust__pillar-item:nth-child(n+4) {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────
   AVIS : variante pilier (ladb/reviews, context="pillar")
   Cartes sombres on-brand (au lieu du look "vraie fiche Google"),
   carrousel swipe en mobile, jusqu'a 4 avis.
   ───────────────────────────────────────────────────────── */
.ladb-review-section--pillar {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
}
.ladb-avis__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}
.ladb-avis__score {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ladb-avis__stars {
  display: flex;
  gap: 3px;
}
.ladb-avis__meta strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--fg);
}
.ladb-avis__meta span {
  display: block;
  font-size: 12px;
  color: var(--fg-mute);
}
.ladb-avis__glink {
  font-size: 12px;
  font-weight: 600;
  color: var(--copper-light);
  display: flex;
  align-items: center;
  gap: 5px;
}
.ladb-avis__glink:hover {
  text-decoration: underline;
  color: var(--copper-light);
}
.ladb-avis__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .ladb-avis__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ladb-avis__grid { grid-template-columns: repeat(4, 1fr); }
}
.ladb-avis__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ladb-avis__card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ladb-avis__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gradient-copper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: #2A1A09;
  flex-shrink: 0;
}
.ladb-avis__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
}
.ladb-avis__when {
  font-size: 11px;
  color: var(--fg-dim);
}
.ladb-avis__card-stars {
  display: flex;
  gap: 2px;
}
.ladb-avis__text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-mute);
  flex: 1;
  margin: 0;
}
.ladb-avis__where {
  font-size: 11px;
  color: var(--fg-dim);
  font-style: italic;
}
.ladb-avis__hint {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

@media (max-width: 639px) {
  .ladb-avis__grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 4px 20px 18px;
    scrollbar-width: none;
  }
  .ladb-avis__grid::-webkit-scrollbar { display: none; }
  .ladb-avis__card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }
  .ladb-avis__hint { display: flex; }
}

/* ─────────────────────────────────────────────────────────
   BLOG : variante pilier (ladb/blog-teaser, context="pillar")
   Cartes plates sans photo (au lieu du visuel photo + overlay
   de la home). Meme requete WP_Query dynamique dans les 2 cas.
   ───────────────────────────────────────────────────────── */

/* Rythme vertical du bloc Ressources sur pilier.
   La base .ladb-blog (global.css) arrivait avec un haut demesure
   (margin-top 80 + padding-top 64 + border) et aucun bas : trou apres
   la FAQ, puis collage au footer. On le ramene sur le meme rythme que
   les sections voisines (.ladb-section : 56px mobile, 88px desktop),
   symetrique haut et bas. La bordure haute (base) est conservee. */
.ladb-pillar .ladb-blog {
  margin-top: 0;
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (min-width: 900px) {
  .ladb-pillar .ladb-blog {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

.ladb-blog--pillar .ladb-blog__grid {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .ladb-blog--pillar .ladb-blog__grid { grid-template-columns: repeat(3, 1fr); }
}
.ladb-blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.ladb-blog-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.ladb-blog-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ladb-blog-card__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.ladb-blog-card__headtext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ladb-blog-card__tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--copper-light);
}
.ladb-blog-card p.ladb-blog-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.ladb-blog-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-mute);
  margin: 0;
  flex: 1;
}
.ladb-blog-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--copper-light);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}
.ladb-blog-card__link::after {
  content: "→";
  transition: transform var(--dur) var(--ease-out);
}
.ladb-blog-card:hover .ladb-blog-card__link::after {
  transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────
   DEVIS : variante pilier (ladb/contact-form, context="pillar")
   Reskin visuel uniquement : le formulaire CF7 reel et la
   sidebar (carte telephone + carte des zones) sont conserves,
   contrairement a la maquette qui les supprimait.
   ───────────────────────────────────────────────────────── */
.ladb-contact-section--pillar {
  background: var(--blue-stellaire);
}
.ladb-contact-section--pillar .ladb-section__head .ladb-eyebrow::before {
  display: none;
}
.ladb-contact-section--pillar .ladb-section__head .ladb-eyebrow {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
}
.ladb-contact-section--pillar .ladb-cf7-wrapper {
  border-radius: 16px;
}

/* ─────────────────────────────────────────────────────────
   HERO PILIER : replication exacte de la maquette standalone.
   Valeurs reprises telles quelles du CSS vp-hero de la maquette.
   Corrige les deux sources de vide heritees des styles de base :
   le padding vertical de .ladb-hero__inner (48px 0 56px) et le
   margin-top: 42px de .ladb-hero__photo, tous deux mis a 0 pour
   que la photo commence au ras du breadcrumb et que la trust bar
   suive immediatement le bas du hero.
   ───────────────────────────────────────────────────────── */
.ladb-hero--pillar {
  padding: 0;
}
/* GOAL-50 : ce raccourci valait `padding: 0`. Il visait le padding VERTICAL
   herite de .ladb-hero__inner (32px 0 40px, et 48px 0 56px au-dessus de
   900px), mais il emportait aussi la GOUTTIERE LATERALE du .container, que
   cet element porte egalement. Resultat sur mobile : kicker, H1 et accroche
   colles au bord gauche a 0px.
   C'etait la vraie cause, et elle explique pourquoi les deux correctifs
   precedents n'ont rien change : ils vivaient dans global.css, alors que
   cette regle est dans pillar-vitrerie.css, charge APRES, a specificite
   egale (0,2,0). Elle gagnait donc systematiquement.
   On ne neutralise plus que le vertical. L'horizontal revient au .container
   (20px sous 768px, 32px au-dessus), et reste a 0 au-dessus de 900px grace a
   la regle full-bleed `.ladb-hero--pillar .container` plus haut dans ce
   fichier, qui reste volontairement prioritaire. */
.ladb-hero--pillar .ladb-hero__inner {
  padding: 0;
}
/* La gouttiere est rendue au CONTENEUR DE TEXTE, pas a .ladb-hero__inner :
   la photo du hero est volontairement full-bleed sur mobile (voir la regle
   .ladb-hero__photo--pillar juste dessous), et l'inserer de 20px casserait
   ce parti pris. Seuls le kicker, le H1 et l'accroche reculent.
   Declaree ici, dans le dernier fichier charge, pour que plus aucune regle
   amont ne puisse la reprendre en silence. */
@media (max-width: 899px) {
  .ladb-hero--pillar .ladb-hero__body {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* Photo full-bleed : aucune marge, collee en haut, a droite et en bas */
.ladb-hero__photo--pillar {
  margin-top: 0;
}
/* Kicker : majuscules comme la maquette (VITRERIE · DÉPANNAGE · POSE) */
.ladb-hero--pillar .ladb-hero__kicker {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 18px;
}
/* Lede : 28px sous le lede, rien d'autre avant les boutons */
.ladb-hero--pillar .ladb-hero__lede {
  margin: 0 0 28px;
}
/* Boutons : aucune marge en haut (l'espace vient des 28px du lede) */
.ladb-hero--pillar .ladb-hero__ctas {
  margin-top: 0;
}
/* Caption photo : bas a droite, discrete, sans pastille opaque */
.ladb-hero--pillar .ladb-hero__photocap {
  left: auto;
  right: 20px;
  letter-spacing: .08em;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}

/* ─────────────────────────────────────────────────────────
   RETOUCHES : compactage vertical supplementaire du hero et
   photo full-bleed rendue bulletproof (marge et arrondi forces
   a zero, priorite sur les styles de base a tous les breakpoints).
   ───────────────────────────────────────────────────────── */
.ladb-hero--pillar .ladb-hero__body {
  padding-top: 32px;
}
.ladb-hero--pillar .ladb-hero__kicker {
  margin-bottom: 12px;
}
.ladb-hero--pillar .ladb-hero__lede {
  margin-bottom: 20px;
}
.ladb-hero--pillar .ladb-hero__avail {
  margin-top: 8px;
}
/* Photo : full-bleed, aucune marge, aucun arrondi, colle haut/droite/bas */
.ladb-hero--pillar .ladb-hero__photo--pillar {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.ladb-hero--pillar .ladb-hero__photo--pillar img {
  border-radius: 0;
}

/* ─────────────────────────────────────────────────────────
   MICRO-RETOUCHES HERO (finales)
   2. Badge Disponible : texte blanc, bordure et fond verts inchanges.
   3. Kicker : suppression du point vert (deja en majuscules).
   4. H1 : police d'affichage Bricolage Grotesque (var(--font-display)),
      la meme que les H2 des autres sections. Le H1 la porte deja via sa
      classe ; on la reaffirme ici (avec l'accent .acc) pour blinder contre
      toute surcharge parente.
   ───────────────────────────────────────────────────────── */
.ladb-hero--pillar .ladb-hero__avail {
  color: #fff;
}
.ladb-hero--pillar .ladb-hero__kicker .dot {
  display: none;
}
.ladb-hero--pillar .ladb-hero__title--pillar,
.ladb-hero--pillar .ladb-hero__title--pillar .acc {
  font-family: var(--font-display);
}

/* ─────────────────────────────────────────────────────────
   GOAL-45 4.1 : reduction supplementaire H1 + sous-titre, pour
   faire remonter le contenu (gain de place, pas de refonte).
   Scope a .ladb-hero--pillar : n'affecte pas la variante form
   (page urgence), deja compactee independamment plus bas.
   ───────────────────────────────────────────────────────── */
.ladb-hero--pillar .ladb-hero__body {
  padding-top: 24px;
}
.ladb-hero--pillar .ladb-hero__title--pillar {
  margin-bottom: 12px;
}
.ladb-hero--pillar .ladb-hero__lede {
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────────────────
   GOAL-45 6.2 : coupure propre du titre pillar (villes + metiers).
   Meme traitement que la variante form (deja plus bas) : le mot-accent
   (avec son deux-points colle, ex. "Lunel :") ne casse jamais au milieu,
   et le fragment de fin ("Depannage et pose de vitrage") passe entier a
   la ligne suivante plutot que de se faire couper n'importe ou selon la
   largeur d'ecran. Necessite aussi de deplacer le deux-points de
   pillarH1After vers la fin de pillarH1Accent dans le contenu.
   ───────────────────────────────────────────────────────── */
.ladb-hero--pillar .ladb-hero__title--pillar .acc {
  white-space: nowrap;
}
.ladb-hero--pillar .ladb-hero__title-after {
  display: block;
}

/* ─────────────────────────────────────────────────────────
   HERO VARIANTE FORMULAIRE (page urgence 4677) : V2, trois retouches.
   1. FOND PREMIUM : image vitrage (vitre-cassee-bg.webp) tres assombrie
      via un overlay bleu nuit (meme approche que la section FAQ), pour la
      texture/le cote premium sans genrer la lecture du texte blanc.
   2. ALIGNEMENT : colonnes top-alignees (kicker gauche cale sur le haut de
      la carte formulaire), memes paddings hauts.
   3. COMPACITE : H1 (2 lignes) et marges resserres pour que kicker + H1 +
      accroche + bouton tel tiennent above-the-fold sur portable (~900px).
      Le deux-points reste colle a "Montpellier" (accent nowrap), "Depannage
      vitrerie 24/7" passe sur sa propre ligne (title-after en block).
   Scope .ladb-hero--form : n'affecte pas les piliers a photo.
   ───────────────────────────────────────────────────────── */
/* 1. Fond image + overlay sombre (image sous l'overlay, texte lisible) */
.ladb-hero--form {
  background-image:
    linear-gradient(180deg, rgba(6,13,26,.90) 0%, rgba(9,18,36,.82) 45%, rgba(6,13,26,.94) 100%),
    url("../images/vitre-cassee-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 2. Haut aligne : colonnes top-alignees, memes paddings hauts */
.ladb-hero--form .ladb-hero__body {
  justify-content: flex-start;
  padding-top: 28px;
  padding-bottom: 32px;
}
.ladb-hero--form .ladb-hero__formcol {
  align-items: flex-start;
}
@media (min-width: 900px) {
  .ladb-hero--form .ladb-hero__formcol {
    padding-top: 28px;
    padding-bottom: 32px;
  }
  /* La hauteur vient du contenu (carte form), plus de min-height force. */
  .ladb-hero--form .ladb-hero__inner {
    min-height: 0;
  }
}
/* 3. Compacite : H1 plus petit et interligne resserre (Bricolage conserve) */
.ladb-hero--form .ladb-hero__title--pillar {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.03;
  margin-bottom: 10px;
}
/* Deux-points colle a "Montpellier", "Depannage vitrerie 24/7" sur sa ligne */
.ladb-hero--form .ladb-hero__title--pillar .acc {
  white-space: nowrap;
}
.ladb-hero--form .ladb-hero__title-after {
  display: block;
}
/* Marges verticales resserrees entre kicker, H1, accroche, tel, badge */
.ladb-hero--form .ladb-hero__kicker {
  margin-bottom: 8px;
}
.ladb-hero--form .ladb-hero__lede {
  font-size: 15.5px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.ladb-hero--form .ladb-hero__avail {
  margin-top: 10px;
}