/* ==========================================================================
   Gabarit d'article de blog — design « Blog Prix Debouchage Avis Honnete ».
   Chargee uniquement sur single.php. Prefixe .ba- (blog article) pour ne
   jamais entrer en conflit avec la charte des pages de service.
   Aucun style en ligne dans le HTML : tout passe par ces classes.
   ========================================================================== */

:root{
  --ba-ink:#14243A;
  --ba-blue:#0E5BB0;
  --ba-blue-d:#0B4A91;
  --ba-orange:#C96F12;
  --ba-orange-d:#A65A0C;
  --ba-body:#3B424B;
  --ba-body-2:#4A525C;
  /* Gris assombri : le #6B7B8C du design tombe a 4,3:1 sur blanc, sous le seuil. */
  --ba-muted:#5A6875;
  --ba-line:#EFE7DA;
  --ba-blue-bg:#F0F6FC;
  --ba-blue-line:#D8E6F5;
  --ba-orange-bg:#FDF0E2;
  --ba-orange-line:#E8B98A;
  --ba-green:#2E7A4F;
  --ba-green-bg:#EAF6EE;
  --ba-green-line:#D5EADB;
  --ba-green-fort:#4C9A6A;
  --ba-sand:#FFD9A8;
}

/* --- Banniere de l'article ------------------------------------------------ */
.ba-hero{position:relative;overflow:hidden;background:var(--ba-ink)}
.ba-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.ba-hero__voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,36,58,.72) 0%,rgba(14,60,110,.86) 60%,rgba(14,36,61,.94) 100%)}
.ba-hero__in{position:relative;max-width:780px;margin:0 auto;padding:56px 24px 48px;display:flex;flex-direction:column;gap:22px}

.ba-fil{display:flex;align-items:center;gap:10px;font-size:14px;color:#B9C8D8;flex-wrap:wrap}
.ba-fil a{color:#B9C8D8;text-decoration:none}
.ba-fil a:hover{color:var(--ba-sand);text-decoration:none}
.ba-fil__ici{color:#fff;font-weight:600}

.ba-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Fond assombri d'un cran : blanc sur l'orange de marque tombe a 3,6:1. */
.ba-cat{padding:6px 14px;background:var(--ba-orange-d);color:#fff;font-family:"Archivo",sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:20px}
.ba-date{font-size:15px;color:#C5D3E2}

.ba-h1{font-family:"Archivo",sans-serif;font-size:clamp(29px,4.4vw,44px);line-height:1.13;font-weight:800;letter-spacing:-.02em;color:#fff;text-wrap:balance;margin:0}

.ba-auteur{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22)}
.ba-auteur img{flex:none;width:52px;height:52px;object-fit:cover;object-position:58% 22%;border-radius:50%;display:block}
.ba-auteur__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ba-auteur__nom{font-family:"Archivo",sans-serif;font-size:16.5px;font-weight:700;color:#fff}
.ba-auteur__role{font-size:15px;color:#C5D3E2}

/* --- Colonne de lecture --------------------------------------------------- */
.ba-corps{max-width:780px;margin:0 auto;padding:40px 24px 80px;display:flex;flex-direction:column;gap:28px}
.ba-corps>p{font-size:19px;line-height:1.72;color:var(--ba-body-2);margin:0}
.ba-corps>p.ba-chapo{font-size:20.5px;color:var(--ba-body)}
.ba-corps>p.ba-fort{color:var(--ba-body)}
.ba-corps>h2{font-family:"Archivo",sans-serif;font-size:clamp(25px,3.1vw,32px);line-height:1.18;font-weight:800;color:var(--ba-ink);letter-spacing:-.015em;padding-top:12px;margin:0}
.ba-corps strong{font-weight:700;color:var(--ba-blue)}
.ba-note{font-size:15px;line-height:1.5;color:#7C8794;margin:0}

/* Liens simples du corps (sources, FAQ) : l'orange de marque passe a 3,6:1
   sur blanc. Le :not([class]) evite d'atteindre les liens deja stylises. */
.ba-corps a:not([class]){color:var(--ba-orange-d);font-weight:600}

/* Lien de maillage sortant, avec sa fleche. */
/* Pas de white-space:nowrap ici : un libelle long deborderait l'ecran sur
   mobile au lieu de passer a la ligne. */
.ba-lien{color:var(--ba-orange-d);font-weight:600;border-bottom:2px solid var(--ba-orange-line);text-decoration:none}
.ba-lien:hover{color:var(--ba-orange-d);border-color:var(--ba-orange);text-decoration:none}
.ba-lien__fl{font-size:.85em}

/* --- Encart « les infos essentielles » ------------------------------------ */
.ba-cle{padding:30px 28px;background:var(--ba-blue-bg);border:1px solid var(--ba-blue-line);border-radius:16px;display:flex;flex-direction:column;gap:18px}
.ba-cle>h2{font-family:"Archivo",sans-serif;font-size:25px;line-height:1.2;font-weight:800;color:var(--ba-ink);letter-spacing:-.01em;padding-top:0;margin:0}
.ba-cle>p{font-size:18px;line-height:1.7;color:var(--ba-body-2);margin:0}
.ba-cle>p.ba-cle__lead{font-size:19px;color:var(--ba-body)}

.ba-barres{display:flex;flex-direction:column;gap:12px;padding:20px;background:#fff;border-radius:12px}
.ba-barre{display:flex;flex-direction:column;gap:6px}
.ba-barre__tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ba-barre__nom{font-family:"Archivo",sans-serif;font-size:16.5px;font-weight:700;color:var(--ba-ink)}
.ba-barre__val{flex:none;font-family:"Archivo",sans-serif;font-size:16px;font-weight:800;color:var(--ba-muted);white-space:nowrap}
.ba-barre__val--fort{color:var(--ba-orange-d)}
.ba-barre__rail{height:12px;background:#EDF3F9;border-radius:6px;overflow:hidden}
.ba-barre__jauge{display:block;height:100%;border-radius:6px}
.ba-barre__jauge--a{width:25%;background:#8FBBE4}
.ba-barre__jauge--b{width:42%;background:#5B9AD1}
.ba-barre__jauge--c{width:67%;background:var(--ba-blue)}
.ba-barre__jauge--d{width:100%;background:var(--ba-orange)}

/* --- Tableaux -------------------------------------------------------------- */
.ba-tab{overflow-x:auto;border:1px solid var(--ba-line);border-radius:14px;-webkit-overflow-scrolling:touch}
.ba-tab table{width:100%;min-width:560px;border-collapse:collapse;background:#fff}
.ba-tab thead tr{background:var(--ba-ink)}
.ba-tab th{padding:15px 18px;text-align:left;font-family:"Archivo",sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.ba-tab td{padding:16px 18px;border-bottom:1px solid var(--ba-line);font-size:16.5px;line-height:1.45;color:var(--ba-muted)}
.ba-tab tbody tr:last-child td{border-bottom:0}
.ba-tab .ba-d{text-align:right;white-space:nowrap}
.ba-tab td.ba-obj{font-family:"Archivo",sans-serif;font-size:17.5px;font-weight:700;color:var(--ba-ink)}
.ba-tab td.ba-bas{font-family:"Archivo",sans-serif;font-size:17px;font-weight:800;color:var(--ba-blue)}
.ba-tab td.ba-haut{font-family:"Archivo",sans-serif;font-size:17px;font-weight:800;color:var(--ba-orange-d)}

.ba-tab--duo table{min-width:460px}
.ba-tab--duo thead tr{background:transparent}
.ba-tab--duo th{font-size:15px;letter-spacing:0;text-transform:none}
.ba-tab--duo th.ba-inclus{background:var(--ba-green-bg);border-bottom:2px solid var(--ba-green-fort);color:var(--ba-green)}
.ba-tab--duo th.ba-sup{background:var(--ba-orange-bg);border-bottom:2px solid var(--ba-orange);color:var(--ba-orange-d)}
.ba-tab--duo td{font-size:17.5px;color:var(--ba-body);vertical-align:top}
.ba-tab--duo ul{list-style:none;margin:0;padding:0}
.ba-tab--duo li{position:relative;padding:10px 0 10px 20px;border-bottom:1px solid var(--ba-line);line-height:1.45}
.ba-tab--duo li:last-child{border-bottom:0;padding-bottom:0}
.ba-tab--duo li:first-child{padding-top:0}
.ba-tab--duo li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--ba-orange)}
.ba-tab--duo li:first-child::before{top:.42em}

/* --- Encarts d'aparte ------------------------------------------------------ */
.ba-bloc{padding:26px 28px;border-radius:0 14px 14px 0;display:flex;flex-direction:column;gap:10px}
.ba-bloc__eti{font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ba-bloc p{margin:0}
.ba-bloc--info{background:var(--ba-blue-bg);border-left:4px solid var(--ba-blue)}
.ba-bloc--info .ba-bloc__eti{color:var(--ba-blue)}
.ba-bloc--info p{font-size:18.5px;line-height:1.7;color:var(--ba-body)}
.ba-bloc--avis{padding:28px;background:var(--ba-orange-bg);border-left:4px solid var(--ba-orange)}
.ba-bloc--avis .ba-bloc__eti{color:var(--ba-orange-d)}
.ba-bloc--avis p{font-family:"Archivo",sans-serif;font-size:19.5px;line-height:1.65;font-weight:500;color:var(--ba-body)}
.ba-bloc--piege{background:#FFF8E3;border-left:4px solid #B8860B}
.ba-bloc--piege .ba-bloc__eti{color:#8A6508}
.ba-bloc--piege p{font-size:18.5px;line-height:1.7;color:var(--ba-body)}
.ba-bloc--alerte{background:#FDEDEC;border-left:4px solid #C0392B}
.ba-bloc--alerte .ba-bloc__eti{color:#9C2B1F}
.ba-bloc--alerte p{font-size:18.5px;line-height:1.7;color:var(--ba-body)}

/* --- Video mise en avant ---------------------------------------------------
   Video verticale 9:16 auto-hebergee, en lecture au clic : avec preload="none"
   le MP4 n'est telecharge que si le visiteur lance la lecture, la page ne
   supporte donc que le poids de l'affiche. Pas de object-fit:cover, qui
   rognerait le format vertical. */
.ba-video{margin:0;display:flex;flex-direction:column;gap:14px;align-items:center;padding:26px 24px;background:var(--ba-blue-bg);border:1px solid var(--ba-blue-line);border-radius:16px}
.ba-video__eti{align-self:flex-start;font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ba-blue)}
.ba-video__cadre{position:relative;width:min(320px,100%);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--ba-ink);border:1px solid var(--ba-line)}
.ba-video__lecteur{position:absolute;inset:0;width:100%;height:100%;display:block;background:transparent}
.ba-video__legende{margin:0;font-size:16.5px;line-height:1.55;color:var(--ba-body-2);text-align:center;max-width:52ch}
.ba-video__legende a{color:var(--ba-orange-d);font-weight:600}

/* --- Photos de chantier ----------------------------------------------------
   Jamais de legende : l'image se suffit. Le cadrage est cale image par image
   sur le visage ou sur l'outil, pour qu'aucun recadrage ne coupe une tete. */
.ba-photo{margin:6px 0;border-radius:16px;overflow:hidden;background:#e7edf3;aspect-ratio:16/10}
.ba-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Ahmed devant le fourgon : tete au tiers haut du cadre */
.ba-photo--camion img{object-position:50% 28%}
/* Genou a terre sur un regard ouvert : tete + tampon dans le cadre */
.ba-photo--regard img{object-position:50% 35%}
/* Meme scene mais cadree plus serre : en 16/10 le trou du regard sortait du
   cadre, il faut un rapport plus haut pour garder la tete ET le regard. */
.ba-photo--regard-serre{aspect-ratio:4/3}
.ba-photo--regard-serre img{object-position:50% 35%}
/* Fourgon seul sur le parking : le vehicule occupe la bande centrale */
.ba-photo--parking img{object-position:50% 55%}
/* Contre-plongee depuis le fond du regard : casque en haut de cadre */
.ba-photo--puits img{object-position:50% 34%}
/* Lance haute pression en action : tete + gerbe d'eau */
.ba-photo--jet{aspect-ratio:4/3}
.ba-photo--jet img{object-position:50% 44%}
/* Tete de camera allumee + ecran de controle : les deux doivent tenir */
.ba-photo--camera{aspect-ratio:4/3}
.ba-photo--camera img{object-position:50% 42%}
/* Sous un evier : la tete est tout en haut de l'image, on cadre au ras */
.ba-photo--interieur{aspect-ratio:4/3}
.ba-photo--interieur img{object-position:50% 0%}

/* Photo ajoutee depuis le site par le client : elle deborde la colonne de
   lecture pour occuper toute la largeur de l'article. Aucun recadrage ici,
   le rapport d'origine est conserve : impossible de couper un visage. */
/* Photo ajoutee depuis le site : elle prend toute la largeur du texte, et sa
   hauteur est bornee pour qu'une photo portrait n'occupe pas tout l'ecran.
   Le point de mire est place au tiers haut, la ou se trouvent les visages. */
.ba-photo--pleine{width:100%;max-width:100%;aspect-ratio:auto;background:transparent}
.ba-photo--pleine img{display:block;width:100%;height:auto;max-height:min(460px,62vh);object-fit:cover;object-position:50% 30%}

/* --- Listes en cartes ------------------------------------------------------ */
.ba-liste{display:flex;flex-direction:column;gap:12px}
.ba-item{display:flex;gap:16px;padding:20px 22px;background:#fff;border:1px solid var(--ba-line);border-radius:14px;align-items:flex-start}
.ba-item__ico{flex:none;font-size:26px;line-height:1.1}
.ba-item p{font-size:18px;line-height:1.65;color:var(--ba-body-2);margin:0}
.ba-item--ok{gap:14px;border-color:var(--ba-green-line)}
.ba-item--ok .ba-item__ico{font-family:"Archivo",sans-serif;font-size:19px;font-weight:800;color:var(--ba-green);line-height:1.4}

/* --- Deroule numerote ------------------------------------------------------ */
.ba-etapes{list-style:none;margin:0;padding:0;counter-reset:ba-etape;display:flex;flex-direction:column;gap:12px}
.ba-etapes li{counter-increment:ba-etape;position:relative;padding:18px 22px 18px 62px;background:#fff;border:1px solid var(--ba-line);border-radius:14px;font-size:18px;line-height:1.6;color:var(--ba-body-2)}
.ba-etapes li::before{content:counter(ba-etape);position:absolute;left:20px;top:17px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--ba-blue);color:#fff;font-family:"Archivo",sans-serif;font-size:15px;font-weight:800;border-radius:50%}

/* --- Comparatif deux cartes ------------------------------------------------ */
.ba-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.ba-duo__carte{padding:26px;background:#fff;border:1px solid var(--ba-line);border-radius:14px;display:flex;flex-direction:column;gap:12px}
.ba-duo__ico{font-size:30px;line-height:1}
.ba-duo__carte h3{font-family:"Archivo",sans-serif;font-size:20px;line-height:1.25;font-weight:700;color:var(--ba-ink);margin:0}
.ba-duo__prix{font-family:"Archivo",sans-serif;font-size:24px;font-weight:800;color:var(--ba-blue)}
.ba-duo__prix--orange{color:var(--ba-orange-d)}
.ba-duo__carte p{font-size:17.5px;line-height:1.6;color:var(--ba-body-2);margin:0}

/* --- FAQ ------------------------------------------------------------------- */
.ba-faq{display:flex;flex-direction:column;gap:12px}
.ba-faq details{background:#fff;border:1px solid var(--ba-line);border-radius:14px}
.ba-faq summary{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;font-family:"Archivo",sans-serif;font-size:19px;line-height:1.35;font-weight:700;color:var(--ba-ink);list-style:none;cursor:pointer;outline:none!important;border:0!important;box-shadow:none!important}
.ba-faq summary::-webkit-details-marker{display:none}
.ba-faq summary::marker{content:""}
.ba-faq summary:focus,.ba-faq summary:focus-visible{outline:none!important}
.ba-faq__plus{margin-left:auto;flex:none;font-size:24px;line-height:1;color:var(--ba-orange-d);transition:transform .18s ease}
.ba-faq details[open] .ba-faq__plus{transform:rotate(45deg)}
.ba-faq details p{padding:0 24px 24px;font-size:18px;line-height:1.7;color:var(--ba-body-2);margin:0}

/* --- Appel a l'action ------------------------------------------------------ */
.ba-cta{display:flex;flex-direction:column;gap:18px;padding:32px 28px;background:var(--ba-ink);border-radius:16px}
.ba-cta p{font-size:19px;line-height:1.7;color:#C5D3E2;margin:0}
.ba-cta strong{color:#fff}
.ba-cta__lien{color:var(--ba-sand);font-weight:600;border-bottom:2px solid rgba(255,217,168,.5);white-space:nowrap;text-decoration:none}
.ba-cta__lien:hover{color:#fff;border-color:#fff;text-decoration:none}
/* Relief plein plutot qu'une ombre portee (charte : pas de box-shadow). */
.ba-cta__tel{display:block;text-align:center;background:var(--ba-orange);color:#fff;padding:19px 24px 16px;border-bottom:3px solid #8F4E0A;border-radius:10px;font-family:"Archivo",sans-serif;font-weight:800;font-size:22px;text-decoration:none}
.ba-cta__tel:hover{background:#B4620F;color:#fff;text-decoration:none}

/* --- Carte auteur et sources ----------------------------------------------- */
.ba-bio{display:flex;gap:20px;padding:26px 28px;background:#fff;border:1px solid var(--ba-line);border-radius:16px;flex-wrap:wrap;align-items:flex-start}
.ba-bio img{flex:none;width:74px;height:74px;object-fit:cover;object-position:58% 22%;border-radius:50%;display:block}
.ba-bio__txt{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.ba-bio__eti{font-family:"Archivo",sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ba-orange-d)}
.ba-bio p{font-size:18px;line-height:1.7;color:var(--ba-body-2);margin:0}

.ba-sources{padding-top:24px;border-top:1px solid var(--ba-line);display:flex;flex-direction:column;gap:12px}
.ba-sources>h2{font-family:"Archivo",sans-serif;font-size:22px;line-height:1.25;font-weight:700;color:var(--ba-ink);padding-top:0;margin:0}
.ba-sources p{font-size:17px;line-height:1.65;color:#66727F;margin:0}

/* --- Suite du blog --------------------------------------------------------- */
.ba-suite{max-width:1180px;margin:0 auto;padding:0 24px 80px;display:flex;flex-direction:column;gap:22px}
.ba-suite>h2{font-family:"Archivo",sans-serif;font-size:clamp(23px,2.4vw,28px);line-height:1.2;font-weight:800;color:var(--ba-ink);margin:0}

/* --- Responsive : en dernier, sinon les regles de base l'emportent --------- */
@media (max-width:640px){
  .ba-hero__in{padding:40px 20px 34px;gap:18px}
  .ba-corps{padding:32px 20px 56px;gap:24px}
  .ba-cle{padding:24px 20px}
  .ba-bloc{padding:22px 20px}
  .ba-bloc--avis{padding:22px 20px}
  .ba-cta{padding:26px 20px}
  .ba-bio{padding:22px 20px;gap:16px}
  .ba-duo__carte{padding:22px}
  .ba-item{padding:17px 18px;gap:13px}
  .ba-faq summary{padding:18px 20px;font-size:17.5px;gap:12px}
  .ba-faq details p{padding:0 20px 20px}
  .ba-suite{padding:0 20px 56px}
  /* Une bande 16/10 devient trop mince sur telephone : on allonge le cadre. */
  .ba-photo:not(.ba-photo--pleine),.ba-photo--jet,.ba-photo--camera,.ba-photo--interieur,.ba-photo--regard-serre{aspect-ratio:4/3;border-radius:12px}
  .ba-photo--pleine img{max-height:min(340px,52vh)}

  /* ------------------------------------------------------------------------
     Tableaux sur mobile : aucune barre de defilement horizontale.
     Chaque ligne devient une carte, chaque cellule affiche son intitule de
     colonne via data-label. Les <td> doivent donc porter cet attribut.
     ---------------------------------------------------------------------- */
  .ba-tab{overflow-x:visible;border:0;border-radius:0}
  .ba-tab table{min-width:0;display:block;background:transparent}
  .ba-tab thead{display:none}
  .ba-tab tbody{display:flex;flex-direction:column;gap:12px}
  .ba-tab tr{display:block;background:#fff;border:1px solid var(--ba-line);border-radius:14px;overflow:hidden}
  .ba-tab td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 16px;border-bottom:1px solid var(--ba-line);text-align:left;white-space:normal}
  .ba-tab tr td:last-child{border-bottom:0}
  .ba-tab td::before{content:attr(data-label);flex:none;font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ba-muted);line-height:1.5}

  /* La premiere colonne fait office de titre de carte. */
  .ba-tab td.ba-obj{justify-content:flex-start;background:var(--ba-ink);color:#fff;font-size:17px;padding:13px 16px;border-bottom:0}
  .ba-tab td.ba-obj::before{content:none}
  .ba-tab td.ba-bas,.ba-tab td.ba-haut{font-size:18px}

  /* Comparatif inclus / supplement : deux blocs empiles, chacun avec sa liste. */
  .ba-tab--duo tbody{gap:14px}
  .ba-tab--duo tr{display:flex;flex-direction:column;gap:14px;border:0;background:transparent;overflow:visible;border-radius:0}
  .ba-tab--duo td,.ba-tab--duo tr td:last-child{display:block;padding:0;border:1px solid var(--ba-line);border-radius:14px;background:#fff;overflow:hidden}
  .ba-tab--duo td::before{display:block;padding:12px 16px;font-size:14px;letter-spacing:0;text-transform:none;background:var(--ba-green-bg);color:var(--ba-green);border-bottom:2px solid var(--ba-green-fort)}
  .ba-tab--duo td+td::before{background:var(--ba-orange-bg);color:var(--ba-orange-d);border-bottom-color:var(--ba-orange)}
  .ba-tab--duo td ul{padding:14px 16px}
}