/* ------------------------------------------------------------------
   AS BAT — la charte appliquée aux éléments WPBakery natifs.

   Les pages sont faites de vc_row / vc_column / vc_custom_heading /
   vc_column_text / vc_single_image / vc_tta_accordion. Ce fichier leur
   donne l'apparence AS BAT, en reprenant les valeurs de theme.css.

   IMPORTANT : mis en file en priorité 999 (inc/setup.php) pour passer
   APRES js_composer.min.css. Sinon WPBakery gagne toutes les égalités de
   spécificité et ses 15px de .vc_column-inner reviennent.
   ------------------------------------------------------------------ */

/* --- Gabarit de section -------------------------------------------
   .asd-section = 4rem 0 ; .asd-wrap = 1280px + 2rem.
   La rangée fait office de wrap ; les colonnes portent 1.25rem de chaque
   côté (gouttière de 2.5rem), la rangée les retire de son propre padding. */
.asd-wpb > .vc_row {
  margin-left: 0;
  margin-right: 0;
  padding: 4rem max(0.25rem, calc((100% - 1280px) / 2 + 0.75rem));
}
.asd-wpb > .vc_row > .vc_column_container { padding-left: 1.25rem; padding-right: 1.25rem; }
/* toutes les gouttières sont portées par .vc_column_container, jamais par
   .vc_column-inner, sinon elles se cumulent */
.asd-wpb .vc_column-inner { padding: 0; }
.asd-wpb .vc_row.vc_inner { margin-left: -1.25rem; margin-right: -1.25rem; }
.asd-wpb .vc_row.vc_inner > .vc_column_container { padding-left: 1.25rem; padding-right: 1.25rem; }
.asd-wpb .wpb_content_element,
.asd-wpb .wpb_text_column { margin-bottom: 0; }
.asd-wpb .vc_column-inner::before,
.asd-wpb .vc_column-inner::after { content: none; }

/* --- Typographie --------------------------------------------------- */
.asd-wpb .wpb_text_column.asd-kicker,
.asd-wpb .wpb_text_column.asd-kicker p {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.asd-wpb .wpb_text_column.asd-kicker--light,
.asd-wpb .wpb_text_column.asd-kicker--light p { color: rgba(255, 255, 255, 0.6); }
.asd-wpb .asd-lead p { font-size: 17px; max-width: 32rem; }
.asd-wpb .asd-section__lead p { max-width: min(100%, 58rem); }
.asd-wpb .asd-n-text p,
.asd-wpb .wpb_text_column p { margin: 0.75rem 0 0; line-height: 1.65; font-weight: 400; color: var(--muted); }
.asd-wpb .wpb_text_column p:first-child { margin-top: 0; }
.asd-wpb .vc_custom_heading { margin: 0; }
.asd-wpb .vc_custom_heading + .wpb_text_column { margin-top: 0.75rem; }
/* un titre qui suit un paragraphe respire, comme .asd-presentation h3 */
.asd-wpb .wpb_text_column + .vc_custom_heading { margin-top: 2rem; }
.asd-wpb .wpb_text_column + .vc_btn3-container { margin-top: 1.75rem; }

/* --- Boutons (vc_btn) ---------------------------------------------- */
.asd-wpb .vc_btn3-container { display: inline-block; margin: 1.75rem 0.75rem 0 0; vertical-align: top; }
.asd-wpb .vc_btn3-container + .vc_btn3-container { margin-left: 0; }
.asd-wpb .vc_btn3 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem !important;
  border-radius: var(--r-md) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.asd-btn-navy .vc_btn3 { background-color: var(--navy) !important; color: #fff !important; }
.asd-btn-navy .vc_btn3:hover { background-color: var(--navy-mid) !important; }
.asd-btn-red .vc_btn3 { background-color: var(--red) !important; color: #fff !important; }
.asd-btn-red .vc_btn3:hover { background-color: var(--red-dark) !important; }
.asd-btn-outline .vc_btn3 {
  background-color: #fff !important;
  color: var(--navy) !important;
  border: 1px solid var(--line) !important;
}
.asd-btn-light .vc_btn3 { background-color: #fff !important; color: var(--navy) !important; }

/* Bouton téléphone : un lien produit par [numero_*] de Department Phone
   Manager, habillé comme un bouton. Le libellé d'un vc_btn est un attribut,
   il ne peut donc pas contenir de shortcode. */
/* le Textblock est un bloc : on le remet en ligne pour qu'il s'aligne
   avec le bouton « Devis en ligne » voisin */
/* mêmes marges que .vc_btn3-container, pour que les deux boutons s'alignent */
.asd-wpb .asd-tel-btn { display: inline-block; vertical-align: top; margin: 1.75rem 0.75rem 0 0; }
.asd-wpb .asd-tel-btn p { margin: 0; }
.asd-wpb .asd-tel-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--r-md);
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.asd-wpb .asd-tel-btn a:hover { background: var(--red-dark); }
.asd-wpb .asd-tel-btn strong { font-weight: 700; }


/* --- Fonds de section ---------------------------------------------- */
.asd-wpb > .vc_row.asd-paper { background: var(--paper); }
.asd-wpb > .vc_row.asd-navy { background: var(--navy); }
.asd-wpb > .vc_row.asd-navy h1,
.asd-wpb > .vc_row.asd-navy h2,
.asd-wpb > .vc_row.asd-navy h3,
.asd-wpb > .vc_row.asd-navy h4 { color: #fff; }
.asd-wpb > .vc_row.asd-navy p,
.asd-wpb > .vc_row.asd-navy li { color: rgba(255, 255, 255, 0.75); }

/* --- Hero ----------------------------------------------------------
   .asd-hero : blanc, 1440px, 0.95fr / 1.05fr, copie 4rem 2rem 4rem 3rem */
.asd-wpb > .vc_row.asd-hero {
  background: #fff;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.asd-wpb > .vc_row.asd-hero > .vc_column_container { padding-left: 0; padding-right: 0; }
.asd-hero .asd-hero-copy { width: 47.5%; }
.asd-hero .asd-hero-media { width: 52.5%; }
.asd-hero .asd-hero-copy > .vc_column-inner { padding: 4rem 2rem 4rem 3rem; }
.asd-hero .asd-hero-media > .vc_column-inner { padding: 0; }
.asd-hero h1 { margin-top: 1rem; max-width: 36rem; }

/* Photo de hero des pages metier : une carte aux angles arrondis, l'image
   dedans, comme les tuiles de la mosaique de l'accueil. */
.asd-wpb > .vc_row.asd-hero > .asd-hero-media { padding: 3rem calc(3rem - 4px) 3rem 1.75rem; }
.asd-hero .asd-hero-media > .vc_column-inner { position: relative; }
.asd-hero-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.asd-hero-photo .vc_figure,
.asd-hero-photo .vc_single_image-wrapper { display: block; height: 100%; }
.asd-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* chauffagiste : la chaufferie est photographiee de loin, on resserre sur
   les chaudieres et le reseau cuivre, en remontant un peu pour garder les
   pieds des appareils */
.asd-metier-chauffagiste .asd-hero-photo img { transform: scale(1.35) translateY(-8%); transform-origin: 48% 45%; }
/* un voile bleu tres leger, pour accorder la photo au bleu du site */
.asd-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 51, 110, 0.12);
  pointer-events: none;
}

@media (max-width: 1023px) {
  .asd-wpb > .vc_row.asd-hero > .asd-hero-media { padding: 0 1.25rem 2.75rem; }
  .asd-hero-photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .asd-hero-photo { aspect-ratio: 16 / 10; }
}

/* mosaïque des 4 métiers : tuiles 2/1, gap 8px, voile plat */
/* gap 8px dans les DEUX sens : le padding vertical manquait */
/* padding plutot que marge negative : meme geometrie (tuiles a x=700,
   358px de large) sans deborder du viewport */
.asd-wpb .vc_row.vc_inner.asd-mosaic { margin: 0; padding: 1rem 0.75rem; }
.asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container { padding: 4px; }
.asd-tile > .vc_column-inner > .wpb_wrapper {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.asd-tile .wpb_single_image { margin: 0; height: 100%; }
.asd-tile .vc_figure, .asd-tile .vc_single_image-wrapper { display: block; height: 100%; }
.asd-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.asd-tile:hover img { transform: scale(1.05); }
/* accueil, tuile chauffagiste : la chaufferie est photographiee de loin,
   on resserre sur les chaudieres (x 1.35, centre legerement au-dessus du
   milieu) ; le survol part de la et grossit d'autant */
.asd-wpb .vc_row.vc_inner.asd-mosaic > .asd-tile:nth-child(3) img { transform: scale(1.35) translateY(-9%); transform-origin: 48% 45%; }
.asd-wpb .vc_row.vc_inner.asd-mosaic > .asd-tile:nth-child(3):hover img { transform: scale(1.42) translateY(-9%); }
/* accueil, tuile electricien : le tableau occupe 94 % de la hauteur de sa
   photo, la tuile 2/1 en coupait le haut et le bas. On garde la photo
   entiere ; les bandes laterales prennent la couleur du mur. */
.asd-wpb .vc_row.vc_inner.asd-mosaic > .asd-tile:nth-child(4) > .vc_column-inner > .wpb_wrapper { background: #eeeae7; }
.asd-wpb .vc_row.vc_inner.asd-mosaic > .asd-tile:nth-child(4) img { object-fit: contain; }
.asd-tile > .vc_column-inner > .wpb_wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  background: rgba(18, 51, 110, 0.5);
  pointer-events: none;
}
/* le libellé hérite sinon de la couleur des paragraphes */
.asd-wpb .asd-tile-label p { color: #fff; margin: 0; font-size: 16px; }
/* pose au-dessus du lien, le libelle avalait le clic : il le laisse passer */
.asd-wpb .asd-tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  pointer-events: none;
  margin: 0;
  padding: 0.6rem 1rem;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}

/* --- Bandeau confiance : papier + filets, pastille ✓ ---------------- */
.asd-wpb > .vc_row.asd-trust {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2rem max(0.875rem, calc((100% - 1280px) / 2 + 1.375rem));
}
.asd-wpb > .vc_row.asd-trust > .vc_column_container { padding-left: 0.625rem; padding-right: 0.625rem; }
.asd-trust-item > .vc_column-inner { display: flex; gap: 0.75rem; }
.asd-trust-item > .vc_column-inner::before {
  content: "✓";
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.asd-trust-item > .vc_column-inner > .wpb_wrapper { flex: 1 1 0; min-width: 0; }
.asd-wpb .asd-trust h3,
.asd-wpb .asd-trust-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}
.asd-wpb .asd-trust p { margin: 0.25rem 0 0; font-size: 13px; }

/* --- Photos de section --------------------------------------------- */
.asd-photo-card {
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(18, 51, 110, 0.08);
  margin: 0;
}
.asd-photo-card img { width: 100%; object-fit: contain; }
/* accueil : l'illustration de la maison porte son propre fond, de la couleur
   de la rangee ; elle se pose a nu, sans carte blanche ni ombre autour */
#about-us .asd-photo-card { background: transparent; box-shadow: none; max-width: 400px; margin: 0 auto; }
@media (max-width: 1023px) {
  #about-us .asd-photo-card { max-width: 320px; }
}
/* La maison suit le defilement, comme la carte devis : elle part du haut du
   texte, reste collee sous l'en-tete pendant qu'on lit, et s'arrete au bas
   de la colonne de droite. Pour que sticky ait de la course, la colonne de
   gauche doit faire toute la hauteur de la rangee, et sa chaine interieure
   aussi : sinon le bloc collant est borne a la hauteur de l'image. */
@media (min-width: 1024px) {
  .asd-wpb > .vc_row#about-us { display: flex; flex-wrap: wrap; align-items: stretch; }
  /* la maison est bornee a 400 px : la colonne texte prend la place, 40/60 */
  .asd-wpb > .vc_row#about-us > .vc_column_container:first-child { width: 40%; }
  .asd-wpb > .vc_row#about-us > .vc_column_container:last-child { width: 60%; }
  .asd-wpb > .vc_row#about-us > .vc_column_container:first-child > .vc_column-inner,
  .asd-wpb > .vc_row#about-us > .vc_column_container:first-child > .vc_column-inner > .wpb_wrapper { height: 100%; }
  /* l'en-tete fait 89 px : la maison garde 28 px d'air sous lui en collant */
  #about-us .asd-photo-card { position: sticky; top: calc(89px + 28px); }
}
.asd-portrait {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(18, 51, 110, 0.1);
  margin: 0;
}
.asd-portrait img { width: 100%; min-height: 420px; object-fit: cover; object-position: top; }
/* Rééquilibrage : à 28/72 la colonne de texte faisait 904px alors que les
   paragraphes sont bridés à 62-68 caractères pour rester lisibles — il restait
   225px de vide à droite. On élargit la photo et on resserre le texte, pour
   que les deux colonnes soient remplies. */
.asd-col-narrow { width: 40%; }
.asd-col-wide { width: 60%; }

/* --- Comment ça se passe -------------------------------------------- */
.asd-wpb .vc_row.vc_inner.asd-steps { margin: 2.5rem -0.625rem 0; }
.asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container { padding-left: 0.625rem; padding-right: 0.625rem; }
.asd-step > .vc_column-inner {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  padding: 1.25rem;
  height: 100%;
}
.asd-wpb .asd-step-num,
.asd-wpb .asd-step-num p {
  margin: 0;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
/* blanc plein : la regle des paragraphes de la rangee rouge (blanc a 80 %)
   l'emportait et le numero ne passait pas le contraste minimal (3,5 pour
   4,5 exige) ; selecteur plus precis pour gagner */
.asd-wpb > .vc_row .asd-step .asd-step-num p,
.asd-wpb .asd-step .asd-step-num p { color: #fff; }
.asd-step .vc_custom_heading { margin-top: 0.5rem; }

/* --- Accordéons : un seul bloc bordé, filets entre les items -------- */
.asd-wpb .vc_tta.vc_general.asd-acc {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
}
.asd-acc .vc_tta-panels,
.asd-acc .vc_tta-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.asd-acc .vc_tta-panel { border-bottom: 1px solid var(--line) !important; }
.asd-acc .vc_tta-panel:last-child { border-bottom: 0 !important; }
.asd-acc .vc_tta-panel-heading { background: transparent !important; border: 0 !important; margin: 0 !important; }
.asd-acc .vc_tta-panel-title > a {
  padding: 1rem 1.5rem !important;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: var(--navy) !important;
}
.asd-acc .vc_tta-panel.vc_active .vc_tta-panel-title > a { color: var(--red) !important; }
.asd-acc .vc_tta-controls-icon::before,
.asd-acc .vc_tta-controls-icon::after { border-color: var(--muted) !important; }
.asd-acc .vc_tta-panel-body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 1.5rem 1.25rem !important;
}
.asd-acc .vc_tta-panel-body p { color: var(--muted); }

/* corps d'une prestation : fond papier, 2fr / 1fr, photo 3/4 */
.asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body {
  background: var(--paper) !important;
  padding: 0 1.5rem 1.5rem !important;
  /* display retire : un panneau ferme doit rester masque */
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .asd-acc-services .vc_tta-panel-body { grid-template-columns: 2fr 1fr; }
}
.asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body .wpb_text_column { order: 1; min-width: 0; }
.asd-acc-services .vc_tta-panel-body .wpb_single_image { order: 2; margin: 0; }
.asd-acc-services .vc_tta-panel-body .wpb_single_image img {
  width: 100%;
  /* meme rayon que les tuiles, la photo de hero et l'accordeon qui la porte */
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 3 / 4;
  position: sticky;
  top: 7rem;
}
.asd-wpb .asd-label {
  margin: 1.5rem 0 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
}
.asd-wpb .asd-checks, .asd-wpb .asd-steps-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.asd-wpb .asd-checks li, .asd-wpb .asd-steps-list li {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
}
.asd-wpb .asd-closing {
  margin-top: 1.5rem;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 1rem;
}
.asd-wpb .asd-closing p { color: var(--ink); font-size: 14px; }

/* --- Pourquoi nous : cartes papier + pastille ----------------------- */
.asd-wpb .asd-why { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.75rem; }
.asd-wpb .asd-why li {
  display: flex;
  gap: 1rem;
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 1rem;
  align-items: flex-start;
}
.asd-wpb .asd-why li::before {
  content: "✓";
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.asd-wpb .asd-why .asd-why__body > strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
}
.asd-wpb .asd-why .asd-why-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* --- Carte devis ---------------------------------------------------- */
.asd-quote > .vc_column-inner {
  position: sticky;
  top: 7rem;
  background: var(--navy);
  border-radius: var(--r-md);
  padding: 1.75rem 1.25rem;
}
.asd-wpb .asd-quote h2,
.asd-wpb .asd-quote h3 { color: #fff; font-family: var(--display); }
.asd-wpb .asd-quote p { color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.asd-wpb .asd-quote-urgent p { text-align: center; font-size: 14px; }
.asd-wpb .asd-quote-urgent a { color: var(--red); font-weight: 700; }

/* Contact Form 7. CF7 applique son propre wpautop : tous les <label>
   atterrissent dans un unique <p> separe par des <br>. La grille porte
   donc sur ce <p>, et .asd-cf7-grid est neutralisee. */
.asd-quote .wpcf7 { margin-top: 1.25rem; }
.asd-quote .wpcf7-form br { display: none; }
.asd-quote .asd-cf7-grid { display: block; }
.asd-quote .asd-cf7-grid > p { display: grid; gap: 1rem; margin: 0; }
@media (min-width: 640px) {
  .asd-quote .asd-cf7-grid > p { grid-template-columns: 1fr 1fr; }
  .asd-quote .asd-cf7-full { grid-column: 1 / -1; }
}
.asd-quote .wpcf7 label {
  display: grid;
  gap: 0.4rem;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}
/* le wrap CF7 est un <span> inline : sans display:block, width:100% n'a
   aucun conteneur de reference */
.asd-quote .wpcf7-form-control-wrap { display: block; width: 100%; }
.asd-quote .wpcf7 input[type="text"],
.asd-quote .wpcf7 input[type="email"],
.asd-quote .wpcf7 input[type="tel"],
.asd-quote .wpcf7 input[type="number"],
.asd-quote .wpcf7 select,
.asd-quote .wpcf7 textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--navy);
  padding: 0 0.75rem;
  font-size: 15px;
  font-family: var(--sans);
}
.asd-quote .wpcf7 textarea { min-height: 112px; padding: 0.75rem; }
.asd-quote .wpcf7-form > p { margin: 1rem 0 0; }
.asd-quote .wpcf7-acceptance { display: block; color: rgba(255, 255, 255, 0.7); font-size: 12px; }
.asd-quote .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.asd-quote .wpcf7-acceptance label {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
}
.asd-quote .wpcf7-acceptance input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.2rem; }
.asd-quote .wpcf7-submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  margin-top: 0.5rem;
}
.asd-quote .wpcf7-submit:hover { background: var(--red-dark); }
.asd-quote .wpcf7-not-valid-tip { color: #ffd0cc; font-size: 12px; }
.asd-quote .wpcf7-response-output {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 0.75rem !important;
}

/* --- Zone d'intervention -------------------------------------------- */
.asd-wpb .asd-map {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 50px rgba(18, 51, 110, 0.08);
}
.asd-wpb .asd-map__head {
  margin: 0;                 /* c'est un h3 : les marges de titre n'ont rien a faire ici */
  line-height: 1.35;
  padding: 0.75rem 1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.asd-wpb .asd-map iframe { width: 100%; height: 380px; border: 0; display: block; }
/* liens de maillage produits par Dynamic Zone Manager */
.asd-wpb .zone-button-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.asd-wpb a.zone-button {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.8rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.asd-wpb a.zone-button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.asd-paper a.zone-button { background: #fff; }

/* --- Tarifs --------------------------------------------------------- */
.asd-card > .vc_column-inner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem;
  height: 100%;
}
#arnaques > .asd-card:first-child > .vc_column-inner { height: auto; }
.asd-card-navy > .vc_column-inner { background: var(--navy); border: 0; }
.asd-wpb .asd-card-navy h2, .asd-wpb .asd-card-navy h3 { color: #fff; }
.asd-wpb .asd-card-navy p { color: rgba(255, 255, 255, 0.7); }
.asd-wpb .asd-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
.asd-wpb .asd-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.asd-wpb .asd-table td:last-child {
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy);
  white-space: nowrap;
}
.asd-wpb .asd-table td > strong { display: block; color: var(--navy); font-family: var(--display); }
.asd-wpb .asd-table .asd-note { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.asd-wpb .asd-notes { list-style: none; padding: 1rem 0 0; margin: 0; font-size: 13px; color: var(--muted); }
.asd-wpb .asd-notes li { margin: 0.25rem 0; padding-left: 0.85rem; position: relative; }
.asd-wpb .asd-notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.asd-wpb .asd-tips { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.asd-wpb .asd-tips .asd-tips__body > strong { display: block; color: #fff; font-family: var(--display); }
.asd-wpb .asd-tips .asd-tip-text {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  margin-top: 0.25rem;
}

/* --- Guides --------------------------------------------------------- */
.asd-wpb .vc_row.vc_inner.asd-guides { margin: 2rem 0.75rem 0; }
.asd-guide > .vc_column-inner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem;
  height: 100%;
}
.asd-wpb .asd-guide h3 { font-size: 1.15rem; }

/* --- Mobile --------------------------------------------------------- */
@media (max-width: 1023px) {
  .asd-wpb > .vc_row { padding-top: 3rem; padding-bottom: 3rem; }
  .asd-hero .asd-hero-copy,
  .asd-hero .asd-hero-media,
  .asd-col-narrow, .asd-col-wide { width: 100%; }
  .asd-hero .asd-hero-copy > .vc_column-inner { padding: 3rem 1.25rem; }
  .asd-portrait img { min-height: 320px; }
  .asd-step > .vc_column-inner,
  .asd-card > .vc_column-inner { margin-bottom: 1.25rem; }
  .asd-quote > .vc_column-inner { position: static; margin-top: 2.5rem; }
}
/* ==================================================================
   Alignement sur la référence React (« as-depannage ma version »).
   Valeurs reprises des classes Tailwind des composants d'origine.
   ================================================================== */

/* --- Boutons en lien HTML (icône lucide impossible dans un vc_btn) --- */
.asd-wpb .asd-actions-block { margin: 0; }
.asd-wpb .asd-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.asd-wpb .asd-actions .asd-btn { margin: 0; }

/* Note Google dans le hero : une ligne sous les boutons, sans le cadre
   du plugin. Logo G, note, etoiles, nombre d'avis, lien discret. */
.asd-wpb .asd-hero-avis { margin: 0; }
/* La note Google du hero : une pastille blanche, logo G, note en gras,
   étoiles un peu plus grandes et le nombre d'avis séparé par un filet.
   Le renvoi « Voir sur Google » n'est plus affiché (plugin, lien="non"). */
.asd-hero .asdav { display: block; margin-top: 1.4rem; }
.asd-hero .asdav-resume {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem 0.7rem; max-width: 100%;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(18, 51, 110, 0.1);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(18, 51, 110, 0.1);
}
.asd-hero .asdav-g svg { width: 22px; height: 22px; }
.asd-hero .asdav-resume__corps { flex: 0 1 auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.7rem; }
.asd-hero .asdav-resume__ligne { gap: 0.45rem; }
.asd-hero .asdav-note { font-size: 20px; font-weight: 800; line-height: 1; color: var(--navy, #12336e); letter-spacing: -0.01em; }
.asd-hero .asdav-etoiles { gap: 2px; }
.asd-hero .asdav-etoile { width: 20px !important; height: 20px !important; }
.asd-hero .asdav-resume__meta {
  margin: 0; padding-left: 0.7rem;
  border-left: 1px solid rgba(18, 51, 110, 0.18);
  font-size: 14px; font-weight: 600; line-height: 1.2; color: #4b5a73; white-space: nowrap;
}
.asd-hero .asdav-cta { width: auto; padding: 0; border: 0; border-radius: 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.asd-hero .asdav-cta:hover { background: transparent; }
.asd-hero .asdav-admin { margin-top: 1rem; font-size: 13px; }

/* --- Bandeau confiance : icône lucide dans un carré marine 44px ------
   REF : size-11 rounded-lg bg-navy, icône size-5, titre 14px, texte 13px */
.asd-wpb > .vc_row.asd-trust {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.asd-wpb .asd-trust-item { display: flex; gap: 0.75rem; }
.asd-wpb .asd-trust-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asd-wpb .asd-trust-ico svg { width: 20px; height: 20px; }
.asd-wpb .asd-trust-body { display: block; min-width: 0; }
.asd-wpb .asd-trust-title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
}
.asd-wpb .asd-trust-text {
  display: block;
  margin-top: 0.125rem;
  font-size: 13px;
  line-height: 1.375;
  color: var(--muted);
}

/* --- Accordéon services : grille 8/4, photo 3/4 collante ------------
   REF : grid gap-6 bg-paper px-5 py-6 sm:px-7 lg:grid-cols-12 */
.asd-acc-services .vc_tta-panel-body {
  background: var(--paper) !important;
  padding: 1.5rem 1.25rem !important;
  /* display retire : un panneau ferme doit rester masque */
  gap: 1.5rem;
}
@media (min-width: 640px) { .asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body { padding: 1.5rem 1.75rem !important; } }
@media (min-width: 1024px) {
  .asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body { grid-template-columns: 8fr 4fr; }
}
.asd-acc-services .vc_tta-panel-body .wpb_text_column { order: 1; min-width: 0; }
.asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body .asd-svc__img { order: 2; margin: 0; }
.asd-acc-services .asd-svc__img img {
  width: 100%;
  /* meme rayon que les tuiles, la photo de hero et l'accordeon qui la porte */
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (min-width: 1024px) {
  .asd-acc-services .asd-svc__img img { aspect-ratio: 3 / 4; position: sticky; top: 7rem; }
  /* chauffe-eau : le ballon prend toute la hauteur de la photo, le 3/4 en
     coupait le socle ; ce panneau garde le format de sa photo */
  .asd-acc-services #plombier-chauffe-eau .asd-svc__img img { aspect-ratio: 9 / 16; }
}
.asd-wpb p.asd-svc__title,
.asd-wpb .asd-svc__title {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.asd-wpb .asd-svc__intro { margin-top: 0.75rem; }
.asd-wpb .asd-svc__intro p { font-size: 15px; line-height: 1.625; color: var(--muted); margin: 0 0 0.75rem; }
.asd-wpb .asd-svc__intro p:last-child { margin-bottom: 0; }
.asd-wpb .asd-svc__label {
  margin: 1.5rem 0 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
}
.asd-wpb .asd-checks,
.asd-wpb .asd-steps-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.asd-wpb .asd-checks li,
.asd-wpb .asd-steps-list li { display: flex; gap: 0.625rem; }
.asd-wpb .asd-checks__t { font-size: 14px; line-height: 1.625; color: var(--ink); }
.asd-wpb .asd-checks__t strong { font-weight: 700; }
/* pastille ✓ : REF size-5 rounded-full bg-navy, icône size-3 strokeWidth 3 */
.asd-wpb .asd-dot {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asd-wpb .asd-dot svg { width: 12px; height: 12px; }
/* numéro d'étape : REF size-6 rounded-full bg-white, 12px bold navy */
.asd-wpb .asd-num {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asd-wpb .asd-closing {
  margin-top: 1.5rem;
  background: #fff;
  border-radius: var(--r-md);
  padding: 1rem;
}
.asd-wpb .asd-closing p { font-size: 14px; line-height: 1.625; color: var(--ink); margin: 0 0 0.75rem; }
.asd-wpb .asd-closing p:last-child { margin-bottom: 0; }

/* --- Pourquoi nous : cartes papier + pastille BadgeCheck ------------
   REF : rounded-xl bg-paper px-4 py-4, icône size-9 rounded-lg bg-navy */
.asd-wpb .asd-why { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.75rem; }
.asd-wpb .asd-why li {
  display: flex;
  gap: 1rem;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 1rem;
  align-items: flex-start;
}
.asd-wpb .asd-why li::before { content: none; }
.asd-wpb .asd-why__ico {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asd-wpb .asd-why__ico svg { width: 16px; height: 16px; }
.asd-wpb .asd-why__body { display: block; min-width: 0; }
.asd-wpb .asd-why .asd-why__body > strong {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: var(--navy);
}
.asd-wpb .asd-why .asd-why-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 14px;
  line-height: 1.625;
  color: var(--muted);
}

/* --- Conseils anti-arnaques : icône dans un carré translucide -------
   REF : size-9 rounded-lg bg-white/10, titre 15px, texte 13px white/70 */
.asd-wpb .asd-tips { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.asd-wpb .asd-tips li { display: flex; gap: 0.75rem; }
.asd-wpb .asd-tips__ico {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.asd-wpb .asd-tips__ico svg { width: 16px; height: 16px; }
.asd-wpb .asd-tips__body { display: block; min-width: 0; }
.asd-wpb .asd-tips .asd-tips__body > strong {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.asd-wpb .asd-tips .asd-tip-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 13px;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Accordéons : mesures de la référence --------------------------- */
.asd-wpb .vc_tta.vc_general.asd-acc .vc_tta-panel-title > a {
  padding: 1rem 1.25rem !important;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
  color: var(--navy) !important;
}
@media (min-width: 640px) { .asd-acc-services .vc_tta-panel-title > a { padding-left: 1.75rem !important; padding-right: 1.75rem !important; } }
.asd-acc .vc_tta-panel-title > a:hover { background: var(--paper); }
.asd-wpb .vc_tta.vc_general.asd-acc--faq .vc_tta-panel-title > a { padding: 1.25rem !important; }
.asd-acc--faq .vc_tta-panel-title > a:hover { background: transparent; color: var(--red) !important; }
.asd-wpb .vc_tta.vc_general.asd-acc--faq .vc_tta-panel-body { padding: 0 1.25rem 1.25rem !important; }
.asd-acc--faq .vc_tta-panel-body p { font-size: 15px; line-height: 1.625; color: var(--muted); }

/* --- Carte : en-tête à icône et note de bas de carte ----------------- */
.asd-wpb .asd-map__head { display: flex; align-items: center; gap: 0.5rem; }
.asd-wpb .asd-map__head svg { width: 16px; height: 16px; color: var(--red); }
/* la regle generique des paragraphes de Textblock l'emportait et decollait
   la note de la carte : on remonte la specificite pour la recoller. */
.asd-wpb .asd-map .asd-map__note {
  margin: 0;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 0.75rem 1rem;
  font-size: 12px;
  line-height: 1.625;
  color: var(--muted);
  margin: 0;
}

/* Le shortcode [numero_*] rend <a class="no-wrap-keyword"><strong>…</strong></a>.
   Dans un texte courant il doit se fondre ; il ne se distingue que là où la
   référence met le numéro en évidence. */
.asd-wpb .wpb_text_column a.no-wrap-keyword,
.asd-wpb .wpb_text_column .no-wrap-keyword {
  color: inherit;
  white-space: nowrap;
}
.asd-wpb .wpb_text_column a.no-wrap-keyword strong { font-weight: 700; }
.asd-wpb .asd-btn a.no-wrap-keyword,
.asd-wpb .asd-btn .no-wrap-keyword { color: inherit; }
.asd-wpb .asd-quote-urgent a.no-wrap-keyword { color: var(--red); font-weight: 700; }

/* Le JS de WPBakery pose un style EN LIGNE « display:block » a l'ouverture,
   qui bat toute regle non-!important. On ne force la grille que sur le
   panneau actif : un panneau ferme garde son display:none en ligne. */
.asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel.vc_active > .vc_tta-panel-body {
  display: grid !important;
}
@media (max-width: 1023px) {
  .asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel.vc_active > .vc_tta-panel-body {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   Hauteurs de colonnes égales.
   Les colonnes WPBakery sont des flottants : sans conteneur flex, un
   height:100% ne s'applique à rien et les cartes restent inégales.
   ================================================================== */

/* Étapes « comment ça se passe » */
.asd-wpb .vc_row.vc_inner.asd-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container { display: flex; }
.asd-wpb .asd-step > .vc_column-inner { height: auto; flex: 1 1 auto; }

/* Guides et cartes tarifs : même traitement */
.asd-wpb .vc_row.vc_inner.asd-guides { display: flex; flex-wrap: wrap; align-items: stretch; }
.asd-wpb .vc_row.vc_inner.asd-guides > .vc_column_container { display: flex; }
.asd-wpb .asd-guide > .vc_column-inner { flex: 1 1 auto; }
.asd-wpb > .vc_row.asd-prices { display: flex; flex-wrap: wrap; align-items: stretch; }
.asd-wpb > .vc_row.asd-prices > .vc_column_container { display: flex; }
.asd-wpb .asd-card > .vc_column-inner { flex: 1 1 auto; }

/* Bloc devis : la carte prend la hauteur de la colonne de gauche */
.asd-wpb > .vc_row.asd-quote-row { display: flex; flex-wrap: wrap; align-items: stretch; }
.asd-wpb > .vc_row.asd-quote-row > .vc_column_container { display: flex; }
.asd-wpb .asd-why-col > .vc_column-inner,
.asd-wpb .asd-quote > .vc_column-inner { flex: 1 1 auto; }
.asd-wpb .asd-quote > .vc_column-inner {
  position: static;
  display: flex;
  flex-direction: column;
}
.asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper { display: flex; flex-direction: column; height: 100%; }
/* la carte est etiree a la hauteur de la colonne gauche : on repartit
   l'espace au lieu de le laisser en bloc. Le nom de classe etait faux
   (asd-quote__urgent au lieu de asd-quote-urgent), la regle ne s'appliquait pas. */
.asd-wpb .asd-quote .asd-quote-urgent { margin-top: auto; padding-top: 1rem; }
.asd-wpb .asd-quote .wpcf7 { margin-top: 1rem; }

@media (max-width: 1023px) {
  .asd-wpb .vc_row.vc_inner.asd-steps,
  .asd-wpb .vc_row.vc_inner.asd-guides,
  .asd-wpb > .vc_row.asd-prices,
  .asd-wpb > .vc_row.asd-quote-row { display: block; }
  .asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container,
  .asd-wpb .vc_row.vc_inner.asd-guides > .vc_column_container,
  .asd-wpb > .vc_row.asd-prices > .vc_column_container,
  .asd-wpb > .vc_row.asd-quote-row > .vc_column_container { display: block; }
}

/* --- Présentation métier : lisibilité ------------------------------
   Le bloc enchaînait six paragraphes serrés avec un sous-titre collé.
   On aère : mesure de ligne limitée, espace avant chaque sous-titre. */
/* La colonne fait désormais la bonne largeur : le texte peut la remplir. */
.asd-wpb .asd-pres-text p { max-width: none; margin-top: 1rem; }
.asd-wpb .asd-pres-text h3 {
  margin-top: 2rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}
.asd-wpb .asd-pres-text h3 + p { margin-top: 0.75rem; }
/* La colonne photo restait figee a 420px pendant que le texte descendait
   bien plus bas : les derniers paragraphes passaient sous la photo. La
   rangee devient flex, et l'image suit la hauteur de la colonne texte. */
.asd-wpb > .vc_row#presentation { display: flex; flex-wrap: wrap; align-items: stretch; }
.asd-wpb > .vc_row#presentation > .vc_column_container { display: flex; }
.asd-wpb #presentation > .vc_column_container > .vc_column-inner,
.asd-wpb #presentation > .vc_column_container > .vc_column-inner > .wpb_wrapper { width: 100%; }
/* la hauteur doit descendre toute la chaîne, sinon l'image reste sur son
   min-height et le texte repart seul vers le bas */
.asd-wpb #presentation > .asd-col-narrow > .vc_column-inner,
.asd-wpb #presentation > .asd-col-narrow > .vc_column-inner > .wpb_wrapper { height: 100%; }
.asd-wpb #presentation .asd-portrait,
.asd-wpb #presentation .asd-portrait > .vc_figure,
.asd-wpb #presentation .asd-portrait .vc_single_image-wrapper { height: 100%; }
.asd-wpb #presentation .asd-portrait img { height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .asd-wpb > .vc_row#presentation { display: block; }
  .asd-wpb #presentation .asd-portrait img { height: auto; }
}

.asd-wpb .asd-pres-lead p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: none;
}

/* ==================================================================
   Zone d'intervention interactive (Dynamic Zone Manager)
   Métiers et départements en boutons ; le panneau s'ouvre dessous.
   ================================================================== */
.asd-wpb .asd-zone { margin-top: 1.5rem; }
/* Grille plutot que flex-wrap : avec 8 departements aux libelles de
   longueurs tres differentes, un retour a la ligne libre donne des lignes
   en escalier. La grille les aligne en colonnes. */
.asd-wpb .asd-zone__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.5rem;
}
/* Libelle au-dessus du compte : « Seine-Saint-Denis 4 communes » ne tient
   pas sur une ligne de 170px, et un retour a la ligne subi donne des
   hauteurs inegales. Empile, tous les boutons font la meme hauteur. */
.asd-wpb .asd-zone__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.6rem 0.9rem;
  text-align: left;
  line-height: 1.3;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.asd-wpb .asd-zone__tab:hover { border-color: var(--navy); }
.asd-wpb .asd-zone__tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.asd-wpb .asd-zone__count {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.asd-wpb .asd-zone__tab.is-active .asd-zone__count { color: rgba(255,255,255,0.92); } /* 0,7 : contraste 3,2 sur le rouge, sous le seuil 4,5 */
/* Second niveau : plus discret, pour qu'on lise la hiérarchie d'un coup d'œil */
.asd-wpb .asd-zone__group--l2 .asd-zone__tabs {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.asd-wpb .asd-zone__group--l2 .asd-zone__tab {
  padding: 0.45rem 0.7rem;
  font-size: 14px;
  background: var(--paper);
  border-color: transparent;
}
.asd-wpb .asd-zone__group--l2 .asd-zone__tab:hover { border-color: var(--navy); }
.asd-wpb .asd-zone__group--l2 .asd-zone__tab.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.asd-wpb .asd-zone__pane { padding-top: 1.25rem; }
/* Le pavé de communes se distingue du niveau qui l'ouvre */
.asd-wpb .asd-zone__group--l2 > .asd-zone__pane {
  margin-top: 0.25rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}
.asd-paper .asd-zone__tab { background: var(--paper); }
.asd-paper .asd-zone__group--l2 .asd-zone__tab { background: #fff; }

.asd-wpb .asd-zone__cities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.asd-wpb .asd-zone__city a,
.asd-wpb .asd-zone__city span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  background: var(--paper);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
/* l'epingle, une seule fois dans la feuille plutot qu'un SVG par commune */
.asd-wpb .asd-zone__city a::before,
.asd-wpb .asd-zone__city span::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--red);
}
.asd-wpb .asd-zone__city a:hover { background: var(--navy); color: #fff; }
.asd-wpb .asd-zone__city a:hover::before { color: #fff; }
/* commune sans page : meme carte, sans lien ni survol */
.asd-wpb .asd-zone__city span { color: var(--muted); font-weight: 600; }
.asd-paper .asd-zone__city a,
.asd-paper .asd-zone__city span { background: #fff; }
.asd-wpb .asd-zone__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  cursor: pointer;
}
.asd-wpb .asd-zone__more:hover { border-color: var(--navy); }
/* display sur une classe l'emporte sur le [hidden] du navigateur : sans cette
   regle, masquer le bouton en JS reste sans effet visible. */
.asd-wpb .asd-zone__more[hidden] { display: none; }
/* Bouton « voir plus » et recherche de commune sur la meme ligne. */
.asd-wpb .asd-zone__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.asd-wpb .asd-zone__tools .asd-zone__more { margin-top: 0; }
.asd-wpb .asd-zone__search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 210px;
  max-width: 300px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
}
.asd-wpb .asd-zone__search:focus-within { border-color: var(--navy); }
.asd-wpb .asd-zone__search svg { flex: 0 0 auto; color: var(--muted); }
.asd-wpb .asd-zone__q {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}
.asd-wpb .asd-zone__q::placeholder { color: var(--muted); font-weight: 400; }
.asd-wpb .asd-zone__q::-webkit-search-cancel-button { cursor: pointer; }
.asd-wpb .asd-zone__none { margin-top: 0.6rem; font-size: 13px; color: var(--muted); }
.asd-wpb .asd-zone__more.is-open svg { transform: rotate(180deg); }
.asd-wpb .asd-zone__more svg { transition: transform .2s ease; }
.asd-wpb .asd-zone__intro { margin: 0 0 0.9rem; font-size: 14px; color: var(--muted); }
.asd-wpb .asd-zone__empty { font-size: 14px; color: var(--muted); }
@media (max-width: 639px) {
  .asd-wpb .asd-zone__cities { grid-template-columns: 1fr; }
}

/* ==================================================================
   Mobile et tablette — reprise des paliers Tailwind de la référence :
   sm 640 · lg 1024 · xl 1280
   ================================================================== */

/* --- < 1024 : une colonne, respirations réduites ------------------- */
@media (max-width: 1023px) {
  .asd-wpb > .vc_row { padding-top: 3rem; padding-bottom: 3rem; }
  .asd-wpb > .vc_row > .vc_column_container { padding-left: 1rem; padding-right: 1rem; }
  .asd-wpb > .vc_row > .vc_column_container + .vc_column_container { margin-top: 2.5rem; }

  /* hero : la photo passe sous le texte */
  .asd-wpb > .vc_row.asd-hero { display: block; }
  .asd-hero .asd-hero-copy > .vc_column-inner { padding: 3rem 1.25rem 2rem; }
  .asd-wpb .asd-hero h1 { max-width: none; }
  /* accueil : a 32 px, le titre a cinq metiers tombait a un mot par ligne
     sur telephone. Une taille fluide (largeur / 15) garde deux ou trois
     mots par ligne de 360 a 639 px : 25 px a 390, 32 px des 480. */
  body.home .asd-wpb .asd-hero h1 { font-size: clamp(20px, 6.5vw, 32px); }
  /* mosaïque : deux tuiles par ligne, marges réduites */
  .asd-wpb .vc_row.vc_inner.asd-mosaic { padding: 0 1rem 1.5rem; }

  /* bandeau confiance : deux colonnes puis une */
  .asd-wpb > .vc_row.asd-trust > .vc_column_container { width: 50%; }
  .asd-wpb > .vc_row.asd-trust > .vc_column_container + .vc_column_container { margin-top: 0; }
  .asd-wpb > .vc_row.asd-trust > .vc_column_container:nth-child(n+3) { margin-top: 1.5rem; }

  /* étapes et guides : deux par ligne */
  .asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container,
  .asd-wpb .vc_row.vc_inner.asd-guides > .vc_column_container { width: 50%; }
  .asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container:nth-child(n+3) > .vc_column-inner,
  .asd-wpb .vc_row.vc_inner.asd-guides > .vc_column_container:nth-child(n+3) > .vc_column-inner { margin-top: 1.25rem; }

  /* accordéon : photo au-dessus, texte dessous */
  .asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel.vc_active > .vc_tta-panel-body {
    grid-template-columns: 1fr;
  }
  .asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body .asd-svc__img { order: 0; }
  /* la regle 3/4 du bureau est plus specifique : on l'egale, sinon la photo
     empilee gardait son format portrait et repoussait le texte tres bas */
  .asd-acc-services .vc_tta-panel-body .wpb_single_image img { aspect-ratio: 16 / 10; position: static; }
  /* Cadrage de quelques photos en 16/10 : les fichiers sont en 3/4, le
     format couche n'en montre que la moitie, et le sujet n'est pas toujours
     au centre. Le pourcentage est la part de la photo qui passe au-dessus
     du cadre : 8 % montre le haut, 90 % le bas. */
  .asd-acc-services #plombier-anti-tartre .asd-svc__img img { object-position: 50% 8%; }
  .asd-acc-services #climatisation-locaux-pro .asd-svc__img img { object-position: 50% 14%; }
  .asd-acc-services #climatisation-installation-clim .asd-svc__img img { object-position: 50% 88%; }
  .asd-acc-services #climatisation-appartement .asd-svc__img img { object-position: 50% 90%; }
  .asd-acc-services #climatisation-multi-split .asd-svc__img img { object-position: 50% 80%; }
  /* schema legende : un cadre carre (pas portrait) suffit a garder les trois
     legendes lisibles en pleine largeur ; en 16/10 il faudrait des bandes
     blanches et un schema minuscule */
  .asd-acc-services #climatisation-raccordement .asd-svc__img img { aspect-ratio: 1 / 1; object-position: 50% 60%; }

  /* carte devis : plus de hauteur imposée */
  .asd-wpb .asd-quote > .vc_column-inner { position: static; margin-top: 2rem; }
  .asd-wpb .asd-quote .asd-quote-urgent { margin-top: 1.25rem; }
}

/* --- < 640 : une seule colonne partout ----------------------------- */
@media (max-width: 639px) {
  .asd-wpb > .vc_row { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .asd-wpb > .vc_row > .vc_column_container { padding-left: 0.25rem; padding-right: 0.25rem; }

  .asd-hero .asd-hero-copy > .vc_column-inner { padding: 2.5rem 1rem 1.5rem; }
  .asd-wpb .asd-actions { gap: 0.6rem; }
  .asd-wpb .asd-actions .asd-btn { width: 100%; }
  /* la pastille Google se centre sous les boutons empiles */
  .asd-hero .asdav { text-align: center; }
  .asd-hero .asdav-resume { padding: 0.55rem 0.9rem 0.55rem 0.8rem; gap: 0.5rem 0.6rem; }
  .asd-hero .asdav-resume__meta { padding-left: 0.6rem; font-size: 13px; }

  .asd-wpb > .vc_row.asd-trust > .vc_column_container { width: 100%; }
  .asd-wpb > .vc_row.asd-trust > .vc_column_container + .vc_column_container { margin-top: 1.25rem; }

  .asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container,
  .asd-wpb .vc_row.vc_inner.asd-guides > .vc_column_container { width: 100%; }
  .asd-wpb .vc_row.vc_inner.asd-steps > .vc_column_container + .vc_column_container > .vc_column-inner,
  .asd-wpb .vc_row.vc_inner.asd-guides > .vc_column_container + .vc_column_container > .vc_column-inner { margin-top: 1rem; }

  .asd-wpb .asd-card > .vc_column-inner { padding: 1.25rem !important; }
  /* La carte de devis empilait trois rembourrages : la gouttière de 24 px,
     16 px ici, puis 20 px sur chaque bloc interne, qui peint lui-même le fond
     navy. Le texte tombait à 60 px du bord quand les autres cartes sont à 44.
     On laisse les blocs internes porter seuls l'écart horizontal. */
  .asd-wpb .asd-quote > .vc_column-inner { padding: 1.25rem 0 !important; }
  .asd-wpb .vc_tta.vc_general.asd-acc-services .vc_tta-panel-body { padding: 1rem !important; }
  .asd-wpb .vc_tta.vc_general.asd-acc .vc_tta-panel-title > a { padding: 0.9rem 1rem !important; font-size: 15px; }

  .asd-wpb .asd-why li { padding: 0.9rem; gap: 0.75rem; }
  .asd-wpb .asd-why__ico { width: 32px; height: 32px; }
  .asd-wpb .asd-tips__ico { width: 32px; height: 32px; }
  .asd-wpb .asd-table td:last-child { font-size: 1rem; }
  .asd-wpb .asd-map iframe { height: 260px; }
  .asd-wpb .asd-zone__tabs,
  .asd-wpb .asd-zone__group--l2 .asd-zone__tabs {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  .asd-wpb .asd-zone__tab { font-size: 14px; padding: 0.5rem 0.75rem; }
  .asd-wpb .asd-zone__group--l2 .asd-zone__tab { font-size: 13px; }
  .asd-wpb .asd-zone__count { display: none; }
}

/* Les rangées internes de WPBakery portent des marges négatives (-1.25rem)
   compensées par le padding des colonnes. Sous 1024px ce padding est réduit :
   la marge négative dépassait alors le viewport. On la neutralise. */
@media (max-width: 1023px) {
  .asd-wpb .vc_row.vc_inner,
  .asd-wpb .vc_row.vc_inner.asd-steps,
  .asd-wpb .vc_row.vc_inner.asd-guides,
  .asd-wpb .vc_row.vc_inner.asd-mosaic { margin-left: 0; margin-right: 0; }
  .asd-wpb .vc_row.vc_inner > .vc_column_container { padding-left: 0.5rem; padding-right: 0.5rem; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container { padding: 4px; }
}

/* --- Boutons de Dynamic Zone Manager -------------------------------
   Sur une page ville, c'est le shortcode [zone_<departement>-<metier>]
   du plugin qui rend la liste. On l'habille aux couleurs du site sans
   toucher au plugin : meme pastille que le reste de l'arborescence. */
.asd-wpb .asd-zone-block .zone-button-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.asd-wpb .asd-zone-block .zone-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.asd-wpb .asd-zone-block .zone-button:hover {
  background: #fff;
  border-color: var(--navy);
  color: var(--navy);
}
.asd-paper .asd-zone-block .zone-button { background: #fff; }
.asd-paper .asd-zone-block .zone-button:hover { background: var(--paper); }

/* La pastille du plugin sort le nom de la ville en texte nu. L'arborescence
   [asd_zones] fait precéder chaque commune d'un map-pin lucide : on rétablit
   la même icône ici, en ::before, pour que la page ville soit identique.
   mask plutôt que background-image : un data-URI ne connaît pas currentColor,
   le masque laisse la couleur au CSS — donc au thème. */
.asd-wpb .asd-zone-block .zone-button::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ==================================================================
   Ajustements du bloc devis et de la rangée « conseils / tarifs »
   ================================================================== */

/* « Urgence ? 01 … » doit sortir de la carte bleue et se poser juste
   dessous. Le fond navy quitte donc la colonne pour aller sur les blocs
   qui composent la carte ; la ligne d'urgence, dernier bloc, reste sur le
   fond de la page. Pas de rangée imbriquée à créer : l'ordre des blocs
   (titre, chapô, formulaire, urgence) est fixé par le générateur. */
.asd-wpb .asd-quote > .vc_column-inner {
  background: none;
  padding: 0;
  border-radius: 0;
}
.asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper > *:not(.asd-quote-urgent) {
  /* flow-root : sans lui, la marge haute du formulaire CF7 s'échappe du bloc
     et ouvre une bande claire au milieu du navy. */
  display: flow-root;
  background: var(--navy);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper > *:first-child {
  padding-top: 1.75rem;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
/* l'avant-dernier bloc ferme la carte et absorbe la hauteur restante */
.asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper > *:nth-last-child(2) {
  padding-bottom: 1rem;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.asd-wpb .asd-quote .asd-quote-urgent { margin-top: 0; padding-top: 0.9rem; }
.asd-wpb .asd-quote .asd-quote-urgent p { color: var(--muted); }

/* « Votre besoin » : CF7 ne pose pas d'attribut rows, le navigateur en
   dessine dix. On ramène le champ à sa hauteur utile minimale. */
.asd-wpb .asd-quote .wpcf7 textarea {
  min-height: 0;
  height: 66px;
  resize: vertical;
}

/* Tarifs et repères : la carte des tarifs s'arrête à la hauteur de son
   texte, sans vide en dessous ; elle n'est pas étirée à la hauteur de la
   carte navy et ne suit pas le défilement. */
.asd-wpb > .vc_row#arnaques { display: flex; flex-wrap: wrap; align-items: flex-start; }
.asd-wpb > .vc_row#arnaques > .vc_column_container { display: block; }
.asd-wpb > .vc_row#arnaques > .vc_column_container:first-child > .vc_column-inner { height: auto; }
@media (max-width: 1023px) {
  .asd-wpb > .vc_row#arnaques,
  .asd-wpb > .vc_row#arnaques > .vc_column_container { display: block; }
}

/* Deux éléments de structure de CF7 6.1 se dessinaient en barres vides dans
   la carte : le <fieldset> qui regroupe les champs cachés porte la bordure
   par défaut du navigateur, et la zone de réponse garde bordure et marge
   alors qu'elle est vide et aria-hidden tant qu'il n'y a rien à annoncer. */
.asd-wpb .asd-quote .wpcf7 fieldset.hidden-fields-container {
  margin: 0;
  padding: 0;
  border: 0;
}
.asd-wpb .asd-quote .wpcf7-response-output[aria-hidden="true"] { display: none; }


/* Le fond navy étant désormais porté par les blocs et non par la colonne,
   la marge de 35px que js_composer pose sous un vc_custom_heading ouvrait
   une couture dans la carte — visible sur l'accueil, où le titre du devis
   ne contient pas de shortcode et sort donc en Heading et non en Textblock.
   On supprime la marge et on rend l'espace en padding, à l'intérieur du fond. */
.asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper > *:not(.asd-quote-urgent) {
  margin: 0;
}
.asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper > .vc_custom_heading + *:not(.asd-quote-urgent) {
  padding-top: 0.75rem;
}

/* Mot-clé de zone mis en avant dans le corps de texte. Pas de couleur propre :
   il doit rester lisible aussi bien sur fond clair que dans une section navy. */
.asd-wpb .asd-kw { font-weight: 700; color: inherit; }

/* La carte devis suit le défilement. Elle démarre au niveau du premier
   encadré de gauche (décalage posé par theme.js), reste collée sous l'en-tête
   pendant qu'on parcourt la liste, et s'arrête en bas de la colonne — donc au
   ras du dernier encadré, « Garantie écrite sur nos interventions ».
   Pour que sticky fonctionne, la carte ne doit PAS être étirée à la hauteur de
   la colonne : on annule le flex posé plus haut pour le bloc devis. */
@media (min-width: 1024px) {
  .asd-wpb > .vc_row.asd-quote-row > .vc_column_container.asd-quote { display: block; }
  .asd-wpb .asd-quote > .vc_column-inner {
    position: sticky;
    top: 5.5rem;
    display: block;
    flex: none;
  }
  .asd-wpb .asd-quote > .vc_column-inner > .wpb_wrapper {
    display: block;
    height: auto;
  }
}

/* ==================================================================
   Hero, « Comment ça se passe », bulles et carte de zone
   ================================================================== */

/* Les tuiles métier touchaient presque le bord droit (16 px) alors que la
   colonne de texte garde 3 rem à gauche. On rend la marge symétrique — les
   tuiles se resserrent d'autant. */
@media (min-width: 1024px) {
  .asd-wpb .vc_row.vc_inner.asd-mosaic { padding: 1rem calc(3rem - 4px) 1rem 0.75rem; }
}

/* « Comment ça se passe » : quatre cartes plates sur fond navy, sans relief
   ni lien entre elles. On donne au numéro une pastille rouge, on relie les
   étapes par un filet, et la carte réagit au survol. */
.asd-step > .vc_column-inner {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border-radius: var(--r-lg);
  padding: 1.5rem 1.25rem 1.35rem;
  height: 100%;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.asd-step > .vc_column-inner:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.asd-wpb .asd-step-num { margin: 0; }
.asd-wpb .asd-step-num p {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}
.asd-step .vc_custom_heading { margin-top: 1rem; }
/* le filet ne relie que les intervalles, à hauteur du centre des pastilles */
@media (min-width: 1024px) {
  .asd-step:not(:last-child) > .vc_column-inner::after {
    content: "";
    position: absolute;
    top: calc(1.5rem + 21px);
    right: -1.25rem;
    width: 1.25rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
  }
}

/* Toutes les bulles « Ce que vous attendez » à la même hauteur : utile sur
   deux colonnes, où l'alignement des rangées se voit. Sur une seule colonne
   la règle n'aligne plus rien et laisse jusqu'à 90 px de vide sous les
   bulles les plus courtes, alors chaque bulle reprend sa hauteur. */
@media (min-width: 1024px) {
  .asd-wpb .asd-why { grid-auto-rows: 1fr; }
  .asd-wpb .asd-why li { height: 100%; }
}

/* Zone d'intervention : la carte s'arrêtait à 380 px et laissait un grand
   vide sous elle. Elle prend maintenant la hauteur de la colonne de gauche. */
.asd-wpb > .vc_row#zone { display: flex; flex-wrap: wrap; align-items: stretch; }
.asd-wpb > .vc_row#zone > .vc_column_container { display: flex; }
.asd-wpb > .vc_row#zone > .vc_column_container > .vc_column-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.asd-wpb > .vc_row#zone > .vc_column_container > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.asd-wpb #zone .wpb_text_column:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
.asd-wpb #zone .wpb_text_column:last-child > .wpb_wrapper { display: flex; flex-direction: column; flex: 1 1 auto; }
.asd-wpb #zone .asd-map { display: flex; flex-direction: column; flex: 1 1 auto; }
.asd-wpb #zone .asd-map iframe { flex: 1 1 auto; height: auto; min-height: 340px; }
@media (max-width: 1023px) {
  .asd-wpb > .vc_row#zone,
  .asd-wpb > .vc_row#zone > .vc_column_container { display: block; }
  .asd-wpb #zone .asd-map iframe { height: 300px; }
}

/* WPBakery avale le premier <p> qui suit un <div> dans un Textblock : le
   chapô de chaque prestation se retrouvait en texte nu, avec l'interligne
   par défaut au milieu de paragraphes correctement composés. On habille donc
   le conteneur lui-même, pour que ce texte orphelin s'aligne sur les autres. */
.asd-wpb .asd-svc__intro {
  font-size: 15px;
  line-height: 1.625;
  font-weight: 400;
  color: var(--muted);
}

/* Filet de sécurité pour le mot-clé : où qu'il tombe, il reste dans le fil du
   texte. Plusieurs conteneurs (bulles, conseils, tableau de prix) mettent
   leurs <strong> en display:block pour poser un titre au-dessus du texte —
   le mot-clé ne doit jamais hériter de ça. */
.asd-wpb .asd-why .asd-kw,
.asd-wpb .asd-tips .asd-kw,
.asd-wpb .asd-table .asd-kw,
.asd-wpb strong.asd-kw {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  color: inherit;
}

/* Les quatre cartes « Comment choisir… » se touchaient d'une rangée à l'autre :
   l'écart horizontal vient du padding des colonnes, mais rien ne séparait les
   lignes. */
.asd-wpb .vc_row.vc_inner.asd-guides { row-gap: 1.5rem; }

/* Libellé des tuiles métier du hero, un cran plus lisible. */
.asd-wpb .asd-tile-label p { font-size: 18px; }

/* L'en-tête est collant : un panneau visé par une ancre doit s'arrêter
   dessous, pas derrière. */
.asd-wpb .vc_tta-panel { scroll-margin-top: 6.5rem; }


/* Ouverture / fermeture des accordéons.
   WPBakery ne fait transiter que le padding (0.2s) : la hauteur, elle, change
   d'un coup. Le panneau restait donc figé 200 ms à la hauteur de son seul
   padding — 48 px — puis sautait à sa taille réelle. C'est ce à-coup qu'on
   ressent comme un saccadement, et non une animation ratée.
   On supprime le temps mort : le panneau s'ouvre franchement. */
.asd-wpb .asd-acc .vc_tta-panel-body { transition: none !important; }

/* Hero en pleine largeur.
   La rangée était plafonnée à 1440px et centrée : au-delà, deux bandes vides
   de part et d'autre, alors que la photo est faite pour filer jusqu'au bord.
   On libère la largeur, et on aligne le texte sur la gouttière des autres
   sections (conteneur de 1280px) au lieu d'un retrait fixe — sans quoi il se
   décalerait des sections suivantes sur les grands écrans. */
.asd-wpb > .vc_row.asd-hero { max-width: none; }
@media (min-width: 1024px) {
  .asd-hero .asd-hero-copy > .vc_column-inner {
    /* + 1.25rem : les autres sections ajoutent le padding de leurs colonnes
       WPBakery. Sans lui le titre du hero se décalait de 20px vers la gauche. */
    padding-left: max(2rem, calc((100vw - 1280px) / 2 + 0.75rem + 1.25rem));
  }
  /* mosaïque de l'accueil : même gouttière à droite, pour rester symétrique */
  .asd-wpb .vc_row.vc_inner.asd-mosaic {
    padding-right: max(calc(3rem - 4px), calc((100vw - 1280px) / 2 + 0.75rem - 4px));
  }
}

/* La photo ne doit pas dicter la hauteur de la rangée.
   Avec 462px de large et un rapport 900×1350, elle réclame 693px de haut :
   c'est ELLE qui étirait la colonne de texte, et non l'inverse — d'où
   l'impression d'une photo plus haute que le texte, avec du vide sous lui.
   On la sort du flux : la rangée prend alors la hauteur du texte, et la photo
   remplit exactement cette hauteur. Sous 1024px les colonnes s'empilent,
   la photo reprend sa place normale avec un format contenu. */
@media (min-width: 1024px) {
  .asd-wpb #presentation > .asd-col-narrow > .vc_column-inner { position: relative; }
  .asd-wpb #presentation .asd-portrait {
    position: absolute;
    inset: 0;
  }
  /* La figure de WPBakery s'ajuste à son contenu : avec une image en
     height:100%, elle se calait sur le ratio (616 ÷ 1,5 = 411px) et laissait
     une bande vide à droite. On impose la largeur sur toute la chaîne. */
  .asd-wpb #presentation .asd-portrait > .vc_figure,
  .asd-wpb #presentation .asd-portrait .vc_single_image-wrapper {
    display: block;
    width: 100%;
    height: 100%;
  }
  .asd-wpb #presentation .asd-portrait img { min-height: 0; width: 100%; height: 100%; }
}
@media (max-width: 1023px) {
  .asd-wpb #presentation .asd-portrait img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* Illustration du metier dans la presentation : un dessin detoure (webp a
   fond transparent) pose a nu sur le gris de la rangee, comme la maison de
   l'accueil. Il garde son format et suit le defilement comme elle : 28 px
   sous l'en-tete (89 px), jusqu'au bas de la colonne de texte. La chaine
   colonne > inner > wrapper est deja a 100 % de hauteur plus haut. */
.asd-wpb #presentation .asd-illustration { margin: 0; width: 100%; }
.asd-wpb #presentation .asd-illustration .vc_figure,
.asd-wpb #presentation .asd-illustration .vc_single_image-wrapper { display: block; }
.asd-wpb #presentation .asd-illustration img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) {
  .asd-wpb #presentation .asd-illustration { position: sticky; top: calc(89px + 28px); }
}
@media (max-width: 1023px) {
  /* la colonne texte apporte deja ses 40 px : pas de marge en plus */
  .asd-wpb #presentation .asd-illustration { max-width: 420px; margin: 0 auto; }
}

/* =====================================================================
   Téléphone et tablette
   ---------------------------------------------------------------------
   Mesuré dans un cadre de 390 px puis vérifié à 768 px. Trois objectifs :
   plus aucun texte sous 14 px, plus aucune cible tactile sous 44 px, et
   16 px sur les champs de saisie, seuil en dessous duquel Safari sur iOS
   zoome tout seul dès qu'on touche un champ.
   ===================================================================== */
@media (max-width: 1023px) {

  /* --- Champs du formulaire de devis ------------------------------- */
  .asd-quote .wpcf7 input[type="text"],
  .asd-quote .wpcf7 input[type="email"],
  .asd-quote .wpcf7 input[type="tel"],
  .asd-quote .wpcf7 input[type="number"],
  .asd-quote .wpcf7 select,
  .asd-quote .wpcf7 textarea { font-size: 16px; }
  .asd-quote .wpcf7 label { font-size: 14px; }
  .asd-quote .wpcf7-acceptance { font-size: 13px; line-height: 1.5; }
  .asd-quote .wpcf7-acceptance input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }
  .asd-quote .wpcf7-acceptance label { align-items: flex-start; gap: 0.6rem; padding: 0.3rem 0; }

  /* --- Petits textes remontés -------------------------------------- */
  .asd-wpb .asd-trust-title { font-size: 15px; }
  .asd-wpb .asd-trust-text,
  .asd-wpb .asd-tip-text,
  .asd-wpb .asd-note,
  .asd-wpb .asd-notes,
  .asd-wpb .asd-zone__intro,
  .asd-wpb .asd-zone__empty,
  .asd-wpb .asd-zone__none,
  .asd-wpb .asd-table { font-size: 14px; }
  .asd-wpb .asd-why-text,
  .asd-wpb .asd-checks__t,
  .asd-wpb .asd-steps-list .asd-checks__t { font-size: 15px; }

  /* --- Zone d'intervention : tout devient tactile ------------------- */
  .asd-wpb .asd-zone__tab {
    min-height: 52px;
    font-size: 14px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
  .asd-wpb .asd-zone__count { font-size: 13px; }
  .asd-wpb .asd-zone__city a {
    min-height: 44px;
    font-size: 14px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
  .asd-wpb .asd-zone__more,
  .asd-wpb .asd-zone__search { min-height: 44px; font-size: 14px; }
  .asd-wpb .asd-zone__q { font-size: 16px; }

  /* --- Kickers, étiquettes et notes : plus rien sous 13 px --------- */
  .asd-wpb .wpb_text_column.asd-kicker p { font-size: 13px; }
  .asd-wpb .asd-zone__label { font-size: 14px; }
  .asd-wpb .asd-table .asd-note { font-size: 13px; }
  .asd-wpb .asd-tips .asd-tip-text { font-size: 14px; }
  .asd-footer__copy p { font-size: 13px; }

  /* --- Pied de page : c'est là que les liens étaient les plus fins -- */
  .asd-footer__cols,
  .asd-footer__trades ul { font-size: 15px; }
  .asd-footer__cols li,
  .asd-footer__trades li { margin: 0; font-size: 15px; }
  .asd-footer__trade { font-size: 16px; min-height: 44px; display: flex; align-items: center; }
  .asd-footer__cols a,
  .asd-footer__trades a,
  .asd-footer__zone a,
  .asd-footer__cities a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.2rem 0;
  }
  .asd-footer__zone { font-size: 15px; }
  .asd-footer__toggle {
    min-height: 44px;
    padding: 0.35rem 0;
    font-size: 15px;
  }
  .asd-footer__more { min-height: 44px; font-size: 14px; }
  .asd-footer__title { font-size: 15px; }
  .asd-footer__cities li { margin-bottom: 0; }
}

/* Téléphone seulement : le pied de page passe sur une colonne, deux
   colonnes de liens à 390 px laissaient des libellés coupés en deux. */
@media (max-width: 599px) {
  .asd-footer__cols { columns: 1; }
}

/* La tuile de l'étanchéité, en tête de mosaïque et pleine largeur, prend la
   forme d'un toit : un pignon découpé au clip-path, dont la pente occupe la
   moitié haute, le libellé restant dans la partie droite du bas. Le coin
   arrondi du bas est conservé, l'overflow le découpe avant le polygone.
   L'ancienne classe .asd-tile--large est gardée pour les pages déjà écrites. */
.asd-tile--large > .vc_column-inner > .wpb_wrapper,
.asd-tile--toit > .vc_column-inner > .wpb_wrapper { aspect-ratio: 3 / 1; }
.asd-tile--toit > .vc_column-inner > .wpb_wrapper {
  /* le trace vit dans un <svg> du pied de page, voir inc/setup.php ; le
     polygone reste en repli si le SVG venait a manquer */
  clip-path: polygon(0 100%, 0 52%, 50% 0, 100% 52%, 100% 100%);
  clip-path: url(#asd-toit-large);
}
.asd-tile--toit > .vc_column-inner > .wpb_wrapper::after {
  /* le voile suit le pignon, sinon ses coins arrondis dépassent du toit */
  border-radius: 0;
}
@media (max-width: 1023px) {
  .asd-tile--large > .vc_column-inner > .wpb_wrapper,
  .asd-tile--toit > .vc_column-inner > .wpb_wrapper { aspect-ratio: 2.4 / 1; }
  .asd-tile--toit > .vc_column-inner > .wpb_wrapper { clip-path: url(#asd-toit-etroit); }
}
/* Sur telephone, WPBakery empile ses demi-colonnes : le toit coiffait alors
   une pile de quatre tuiles, et la maison disparaissait. On garde deux
   colonnes sous le toit ; a 2/1 les tuiles font 85 px de haut, assez pour
   le libelle et pour le doigt. */
@media (max-width: 767px) {
  .asd-wpb .vc_row.vc_inner.asd-mosaic { display: flex; flex-wrap: wrap; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_col-sm-6 { width: 50%; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_col-sm-12 { width: 100%; }
}

/* =====================================================================
   Gouttière horizontale unique sur téléphone et tablette
   ---------------------------------------------------------------------
   Le site en avait cinq différentes selon la section : 0, 8, 16, 24 et
   28 px. Le texte courant tombait à 8 px du bord de l'écran, alors que
   l'en-tête et le pied de page tenaient 24 px. Tout s'aligne désormais
   sur ces 24 px, mesurés au bord du bloc de contenu.
   La règle est posée sur .vc_column_container et le padding de la rangée
   est neutralisé : c'est le seul moyen d'obtenir la même valeur quelle
   que soit la largeur, le padding de rangée reposant sur un calc().
   ===================================================================== */
@media (max-width: 1023px) {
  .asd-wpb > .vc_row { padding-left: 0; padding-right: 0; }
  .asd-wpb > .vc_row > .vc_column_container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  /* le hero ne passe pas par la colonne : sa gouttière vit sur l'intérieur */
  .asd-hero .asd-hero-copy > .vc_column-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  /* les cartes sont des boîtes : leur bord se cale sur la gouttière, et
     leur texte s'inscrit à l'intérieur sans repousser la mise en page */
  .asd-card > .vc_column-inner { padding: 1.5rem; }
  /* les rangées internes ne doivent pas ajouter une seconde gouttière */
  .asd-wpb .vc_row.vc_inner > .vc_column_container { padding-left: 0; padding-right: 0; }
  /* la mosaïque garde ses 4 px d'écart entre tuiles : on retire d'autant
     pour que le bord des tuiles tombe lui aussi sur la gouttière */
  .asd-wpb .vc_row.vc_inner.asd-mosaic { padding-left: 1.25rem; padding-right: 1.25rem; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container { padding: 4px; }
  /* accueil : une fois empilee sous le texte, la maison va d'une gouttiere
     a l'autre, sur les memes 24 px que le texte ; seuls les 8 px entre
     tuiles restent */
  .asd-wpb > .vc_row.asd-hero > .asd-hero-media { padding: 0 1.5rem 2.75rem; }
  /* l'image vient a 24 px sous les boutons, pas a 64 : la marge « colonne
     suivante » de 40 px ne s'applique pas dans le hero */
  .asd-wpb > .vc_row.asd-hero > .asd-hero-copy + .asd-hero-media { margin-top: 0; }
  /* meme pas entre le dernier bouton et l'image qu'entre le chapo et le
     premier bouton : 28 px */
  .asd-wpb > .vc_row.asd-hero > .asd-hero-copy > .vc_column-inner { padding-bottom: 1.75rem; }
  .asd-wpb > .vc_row.asd-hero .vc_row.vc_inner.asd-mosaic { padding: 0; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container:first-child { padding: 0 0 4px; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container:nth-child(2n) { padding-left: 0; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container:nth-child(2n+1):not(:first-child) { padding-right: 0; }
  .asd-wpb .vc_row.vc_inner.asd-mosaic > .vc_column_container:nth-last-child(-n+2) { padding-bottom: 0; }
}

@media (max-width: 639px) {
  /* la règle d'origine ramenait la colonne à 4 px : elle est neutralisée */
  .asd-wpb > .vc_row > .vc_column_container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .asd-hero .asd-hero-copy > .vc_column-inner { padding: 2.5rem 1.5rem 1.5rem; }
}

/* =====================================================================
   Respiration après un titre
   ---------------------------------------------------------------------
   L'écart entre un titre et le texte qui suit valait 0, 8 ou 12 px selon
   la section : WPBakery annule la marge basse du dernier élément d'un
   bloc et la marge haute du premier du bloc suivant, si bien qu'un titre
   placé dans son propre Textblock collait au chapô. Les sélecteurs
   ci-dessous passent par .wpb_wrapper pour l'emporter sur les siens.
   ===================================================================== */
.asd-wpb .wpb_text_column .wpb_wrapper > h1,
.asd-wpb .wpb_text_column .wpb_wrapper > h2 { margin-bottom: 1.25rem; }
.asd-wpb .wpb_text_column .wpb_wrapper > h3,
.asd-wpb .wpb_text_column .wpb_wrapper > h4 { margin-bottom: 0.6rem; }

/* Titre seul dans son bloc : la marge basse est la dernière du bloc, et
   c'est elle que WPBakery remet à zéro. On la rétablit explicitement. */
.asd-wpb .wpb_text_column .wpb_wrapper > h1:last-child,
.asd-wpb .wpb_text_column .wpb_wrapper > h2:last-child { margin-bottom: 1.25rem; }
.asd-wpb .wpb_text_column .wpb_wrapper > h3:last-child,
.asd-wpb .wpb_text_column .wpb_wrapper > h4:last-child { margin-bottom: 0.6rem; }

/* Ces titres ouvrent une carte ou un panneau : l'espace y est déjà donné
   par le rembourrage du bloc, une marge de plus le déséquilibrerait. */
.asd-wpb .asd-svc__title,
.asd-wpb .asd-trust-title,
.asd-wpb .vc_tta-panel-title h4,
.asd-wpb .asd-quote .wpb_wrapper > h3 { margin-bottom: 0 !important; }

/* --- Pages légales ---------------------------------------------------
   Un seul Textblock porte toute la page : sans reprise des marges, les
   sections se touchent et le texte forme un pavé. On les separe nettement,
   la hauteur ne coute rien ici. */
.asd-wpb #mentions,
.asd-wpb #confidentialite { padding-top: 3rem; padding-bottom: 4.5rem; }
.asd-wpb #mentions .wpb_text_column .wpb_wrapper > h1,
.asd-wpb #confidentialite .wpb_text_column .wpb_wrapper > h1 { margin-bottom: 1.5rem; }
.asd-wpb #mentions .wpb_text_column .wpb_wrapper > h2,
.asd-wpb #confidentialite .wpb_text_column .wpb_wrapper > h2 {
  margin-top: 3.5rem;
  margin-bottom: 1.1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
  font-size: 28px;
  line-height: 1.25;
}
.asd-wpb #mentions .wpb_text_column .wpb_wrapper > p,
.asd-wpb #confidentialite .wpb_text_column .wpb_wrapper > p { margin-top: 1.5rem; }
/* un texte de loi se lit lentement : interligne plus ouverte qu'ailleurs */
.asd-wpb #mentions .wpb_text_column p,
.asd-wpb #mentions .wpb_text_column li,
.asd-wpb #confidentialite .wpb_text_column p,
.asd-wpb #confidentialite .wpb_text_column li { line-height: 1.75; }
.asd-wpb #mentions .wpb_text_column .wpb_wrapper > ul,
.asd-wpb #confidentialite .wpb_text_column .wpb_wrapper > ul { margin-top: 1.25rem; }
.asd-wpb #mentions .wpb_text_column ul,
.asd-wpb #confidentialite .wpb_text_column ul { padding-left: 1.35rem; }
.asd-wpb #mentions .wpb_text_column li,
.asd-wpb #confidentialite .wpb_text_column li {
  margin-bottom: 1rem;
  font-weight: 400;
  color: var(--muted);
}
.asd-wpb #mentions .wpb_text_column li strong,
.asd-wpb #confidentialite .wpb_text_column li strong { color: var(--navy); }
/* la ligne longue fatigue autant que le tassement : on borne la mesure */
.asd-wpb #mentions .wpb_text_column .wpb_wrapper,
.asd-wpb #confidentialite .wpb_text_column .wpb_wrapper { max-width: 72ch; margin-inline: auto; }

@media (max-width: 767px) {
  .asd-wpb #mentions,
  .asd-wpb #confidentialite { padding-top: 2rem; padding-bottom: 3rem; }
  .asd-wpb #mentions .wpb_text_column .wpb_wrapper > h2,
  .asd-wpb #confidentialite .wpb_text_column .wpb_wrapper > h2 {
    margin-top: 2.75rem;
    padding-top: 2rem;
    font-size: 24px;
  }
}

/* --- Interventions --------------------------------------------------
   Liste et fiche : ce ne sont plus des pages WPBakery mais des gabarits
   du theme, donc du HTML a nous. Meme gouttiere que les rangees du site. */
.asd-wpb .asd-inter {
  padding: 4rem max(1.5rem, calc((100% - 1280px) / 2 + 2rem));
}
.asd-wpb .asd-inter__kicker {
  margin: 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.asd-wpb .asd-inter__kicker a { color: inherit; text-decoration: none; }
.asd-wpb .asd-inter__kicker a:hover { text-decoration: underline; }
.asd-wpb .asd-inter__titre {
  margin: 0.75rem 0 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  color: var(--navy);
}
.asd-wpb .asd-inter__lead { margin: 1rem 0 0; max-width: 46rem; color: var(--muted); line-height: 1.65; }

.asd-wpb .asd-filtre { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.asd-wpb .asd-filtre__btn {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.asd-wpb .asd-filtre__btn:hover { border-color: var(--navy); }
.asd-wpb .asd-filtre__btn.is-actif { background: var(--navy); border-color: var(--navy); color: #fff; }

/* La grille : une carte ajoutee depuis l'administration trouve sa place
   seule, et une carte masquee par le filtre ne laisse pas de trou. */
.asd-wpb .asd-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.asd-wpb .asd-post {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.asd-wpb .asd-post:hover { border-color: var(--navy); box-shadow: 0 8px 24px rgba(18, 51, 110, 0.08); }
.asd-wpb .asd-post__lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.asd-wpb .asd-post img,
.asd-wpb .asd-post__vide {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  background: var(--paper);
}
.asd-wpb .asd-post__corps { display: block; padding: 1rem 1.1rem 1.15rem; }
.asd-wpb .asd-post__titre {
  display: block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
}
.asd-wpb .asd-post__meta {
  display: block;
  margin-top: 0.5rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
}
.asd-wpb .asd-inter__pied { margin: 2.5rem 0 0; color: var(--muted); line-height: 1.65; }
.asd-wpb .asd-inter__vide { margin: 2rem 0 0; color: var(--muted); }

/* --- La fiche d'une intervention ------------------------------------- */
.asd-wpb .asd-inter--single { max-width: 62rem; margin: 0 auto; }
/* le recit garde sa mesure de lecture, la fiche s'elargit pour les cartes */
.asd-wpb .asd-inter__texte { max-width: 52rem; }
.asd-wpb .asd-inter__meta { margin: 0.75rem 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.asd-wpb .asd-inter__photo { margin: 1.75rem 0 0; }
.asd-wpb .asd-inter__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
}
.asd-wpb .asd-inter__texte { margin-top: 1.75rem; }
.asd-wpb .asd-inter__texte p { margin: 0 0 1.25rem; line-height: 1.75; color: var(--muted); }
/* Les autres photos du chantier, en grille sous le recit */
.asd-wpb .asd-inter__texte .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 0.5rem 0 1.5rem; }
.asd-wpb .asd-inter__texte .gallery-item { margin: 0; }
.asd-wpb .asd-inter__texte .gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); border: 0; }
.asd-wpb .asd-inter__texte .gallery-caption { display: none; }
@media (max-width: 639px) { .asd-wpb .asd-inter__texte .gallery { grid-template-columns: 1fr; } }
/* Les reperes du chantier, sous le recit : ils remplissent la fiche avec ce
   que le visiteur cherche vraiment, sans changer sa mise en page. */
.asd-wpb .asd-inter__reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem 2rem;
  margin: 2.25rem 0 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.asd-wpb .asd-inter__reperes dt {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.asd-wpb .asd-inter__reperes dd {
  margin: 0.3rem 0 0;
  font-weight: 600;
  line-height: 1.5;
  color: var(--navy);
}

/* Trois autres chantiers du meme metier : la fiche ne se termine plus sur
   un cul-de-sac, et la grille est celle de la liste, sans rien de nouveau. */
.asd-wpb .asd-inter__liees { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.asd-wpb .asd-inter__liees h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.25;
  color: var(--navy);
}
/* trois cartes cote a cote : la colonne de la fiche est plus etroite que
   celle de la liste, la grille automatique n'en tenait que deux */
.asd-wpb .asd-inter__liees .asd-posts {
  margin-top: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.asd-wpb .asd-inter__liees .asd-post img { height: 150px; }
.asd-wpb .asd-inter__liees .asd-post__titre { font-size: 15px; }
.asd-wpb .asd-inter__liees .asd-post__corps { padding: 0.9rem 1rem 1rem; }
@media (max-width: 767px) {
  .asd-wpb .asd-inter__liees .asd-posts { grid-template-columns: 1fr; }
}

.asd-wpb .asd-inter__retour { margin: 2rem 0 0; }
.asd-wpb .asd-inter__retour a { font-weight: 700; color: var(--navy); }

/* --- Pagination ------------------------------------------------------- */
.asd-wpb .pagination { margin-top: 2.5rem; }
.asd-wpb .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.asd-wpb .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
}
.asd-wpb .pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }

@media (max-width: 767px) {
  .asd-wpb .asd-inter { padding-top: 2.5rem; padding-bottom: 3rem; }
  .asd-wpb .asd-posts { grid-template-columns: 1fr; gap: 1rem; }
  .asd-wpb .asd-filtre__btn { font-size: 13px; padding: 0.5rem 0.85rem; }
}