/* Plumber Deboucheur — v4-36 (2026-09-18). Charge apres v4-35.css.
   Pages legales : la mise en page d'origine datait de la charte v3 (page-hero,
   sec-h2, prose). On reprend le vocabulaire actuel : une entete sobre, puis une
   seule colonne de lecture. Les cartes en grille ont ete retirees le 2026-09-18
   (« c'est moche, mets pas ca en grid ») : quatre colonnes cote a cote
   coupaient les raisons sociales sur trois lignes. */

/* ---------- 1. L'entete ---------- */
.ml-tete{padding-block:clamp(48px,5vw,88px)}
.ml-tete .a4-h2,
.ml-tete h1{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-size:clamp(30px,3.7vw,54px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.018em;
  color:#fff;
}
.ml-tete__oeil{
  display:inline-block;
  margin-bottom:14px;
  padding-bottom:7px;
  border-bottom:2px solid var(--orange);
  font-family:"Archivo",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
}
.ml-tete__sous{
  margin:16px 0 0;
  max-width:62ch;
  font-size:var(--t-17);
  line-height:1.6;
  color:var(--on-navy);
}

/* ---------- 2. La colonne de lecture ---------- */
/* La marge haute est ce qui aere le titre de section et le texte : sans elle,
   le H2 et le premier paragraphe se touchaient presque. */
.ml-corps{
  max-width:78ch;
  margin-top:clamp(26px,2.8vw,44px);
}
.ml-corps > *:first-child{margin-top:0}
.ml-corps h3{
  margin:clamp(30px,3vw,46px) 0 10px;
  font-family:"Archivo",sans-serif;
  font-size:var(--t-22);
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.008em;
  color:var(--navy-deep);
}
.ml-corps p{margin:0 0 16px;font-size:var(--t-17);line-height:1.75;color:var(--body)}
.ml-corps p:last-child{margin-bottom:0}
.ml-corps a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:3px}
.ml-corps a:hover{color:var(--orange-dark)}
.ml-intro{
  font-size:var(--t-19)!important;
  line-height:1.7!important;
  color:var(--body-2)!important;
}

/* ---------- 3. Les informations d'identite ---------- */
/* Une seule liste, en pleine largeur : le libelle a gauche, la valeur a droite,
   une ligne de separation entre chaque, comme un extrait d'immatriculation. */
.ml-dl{
  margin:clamp(18px,1.8vw,28px) 0 0;
  display:grid;
  grid-template-columns:minmax(190px,15em) minmax(0,1fr);
  font-size:var(--t-17);
  line-height:1.6;
}
.ml-dl dt{
  padding:12px 20px 12px 0;
  border-top:1px solid var(--line-3);
  font-weight:600;
  color:var(--muted);
}
.ml-dl dd{
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--line-3);
  color:var(--body-2);
}
.ml-dl dt:first-of-type,
.ml-dl dt:first-of-type + dd{border-top:0}
.ml-dl dd strong{color:var(--navy-deep)}
.ml-dl a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- 4. Les memes blocs sur une section foncee ---------- */
.bg-navy .ml-corps h3,
.bg-cream .ml-corps h3{color:#fff}
.bg-navy .ml-corps p,
.bg-cream .ml-corps p,
.bg-navy .ml-intro,
.bg-cream .ml-intro{color:var(--on-navy)!important}
.bg-navy .ml-corps a,
.bg-cream .ml-corps a,
.bg-navy .ml-dl a,
.bg-cream .ml-dl a{color:#9DC8FF}
.bg-navy .ml-dl dt,
.bg-cream .ml-dl dt{color:rgba(255,255,255,.62)}
.bg-navy .ml-dl dd,
.bg-cream .ml-dl dd{color:var(--on-navy)}
.bg-navy .ml-dl dd strong,
.bg-cream .ml-dl dd strong{color:#fff}
.bg-navy .ml-dl dt,.bg-navy .ml-dl dd,
.bg-cream .ml-dl dt,.bg-cream .ml-dl dd{border-top-color:rgba(255,255,255,.16)}

/* ---------- 5. Zone d'intervention : la carte a gauche ---------- */
.ni-carte{
  border-radius:18px;
  overflow:hidden;
  background:var(--cream);
  border:1px solid var(--line-3);
}
.bg-navy .ni-carte,
.bg-cream .ni-carte{background:var(--navy-deep);border-color:rgba(255,255,255,.16)}
/* La carte prend toute la hauteur de la colonne de droite : sans ca, un grand
   vide s'ouvrait sous elle, tres visible sur une section claire. */
.ni-bloc{align-items:stretch}
.ni-bloc .a4-faq__aside{position:static;display:flex}
.ni-bloc .ni-carte{flex:1;display:flex;min-height:clamp(380px,46vw,620px)}
.ni-carte iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  border:0;
}
/* Le bloc de rappel reprend le bandeau d'urgence : fond bleu nuit, texte
   blanc. L'ancien encart etait un aplat tres clair avec un texte gris, donc
   illisible sur une section foncee. */
.ni-note{margin-top:clamp(18px,1.8vw,28px)}

/* ---------- 6. Surcharges responsive (toujours en dernier) ---------- */
@media (max-width:640px){
  .ml-dl{grid-template-columns:minmax(0,1fr)}
  .ml-dl dt{padding:12px 0 0;border-top:1px solid var(--line-3)}
  .ml-dl dd{padding:2px 0 12px;border-top:0}
  .ml-dl dt:first-of-type + dd{border-top:0}
  .bg-navy .ml-dl dd,.bg-cream .ml-dl dd{border-top:0}
}