/* Plumber Deboucheur — v4-35 (2026-09-18). Charge apres v4-34.css.

   Simulateur « qui doit payer ». Refonte du 2026-09-18 : l'ancien rendu etait
   une grande carte bleu nuit qui affichait les quatre a sept questions les unes
   sous les autres, soit un pave impressionnant avant meme d'avoir clique. On
   passe a une carte claire, plus etroite, qui ne montre qu'une question a la
   fois avec une barre de progression. Le reste (assurance, boutons d'appel)
   n'apparait qu'une fois le verdict affiche.

   Sans JavaScript, rien n'est masque : toutes les questions et tous les
   verdicts restent lus et indexes. C'est la classe .is-vif, posee par le
   script, qui declenche le mode pas a pas. */

/* ---------- Le bloc entier : photo a gauche, tout le texte a droite ----------
   La photo occupe sa propre colonne, a cote du titre de section, du
   sous-titre, du simulateur et du rappel assurance.

   Les deux colonnes sont proches en largeur (44 / 56) et la photo monte sur
   toute la hauteur de la rangee : elle grandit donc avec le texte, y compris
   quand le verdict fait s'allonger la carte. En 340 px fixes a cote d'une
   colonne de texte deux fois plus large, l'ensemble penchait d'un cote. */
.pdbq-duo{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(24px,2.8vw,48px);
  align-items:stretch;
}
.pdbq-duo__img{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--navy-deep);
  min-height:clamp(380px,40vw,620px);
}
/* La photo est posee en couche : la cellule prend la hauteur de la rangee,
   l'image la remplit sans se deformer. */
.pdbq-duo__img img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.pdbq-duo__txt{min-width:0}

/* ---------- La carte du simulateur ---------- */
.pdbq{
  margin:clamp(20px,2vw,30px) 0 0;
  padding:clamp(22px,2.2vw,32px);
  background:#fff;
  border:1px solid var(--line-3);
  border-radius:20px;
  box-shadow:0 24px 50px -38px rgba(11,37,69,.55);
  display:flex;
  flex-direction:column;
  gap:clamp(16px,1.6vw,22px);
  color:var(--body);
}

/* ---------- L'amorce ----------
   La carte n'a plus de titre propre : le H2 de la section porte deja la
   question, et la repeter a 30 pixels d'ecart faisait doublon. Il ne reste que
   la ligne qui annonce le nombre de questions. */
.pdbq__intro{margin:0;font-size:var(--t-16);line-height:1.6;color:var(--muted)}

/* ---------- La progression ---------- */
/* Elle n'a de sens qu'en mode pas a pas : sans script, toutes les questions
   sont la, il n'y a pas d'etape courante a annoncer. */
.pdbq__avance{display:none;flex-direction:column;gap:8px}
.pdbq.is-vif .pdbq__avance{display:flex}
.pdbq__compteur{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.pdbq__barre{
  height:5px;
  border-radius:999px;
  background:var(--cream);
  overflow:hidden;
}
.pdbq__jauge{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--orange);
  transition:width .3s ease;
}
.pdbq.a-repondu .pdbq__jauge{background:var(--navy)}

/* ---------- Les questions ---------- */
.pdbq__form{display:flex;flex-direction:column;gap:clamp(16px,1.6vw,24px);margin:0}
.pdbq__q{border:0;margin:0;padding:0;min-width:0}
/* Pas a pas : une seule question a l'ecran. */
.pdbq.is-vif .pdbq__q{display:none}
.pdbq.is-vif .pdbq__q.est-actif{display:block;animation:pdbq-entree .28s ease}
@keyframes pdbq-entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pdbq__q legend{
  padding:0 0 12px;
  font-family:"Archivo",sans-serif;
  font-size:var(--t-19);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.008em;
  color:var(--navy-deep);
  text-wrap:balance;
}
.pdbq__choix{display:flex;flex-direction:column;gap:9px}
.pdbq__opt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border:1px solid var(--line-3);
  border-radius:12px;
  background:#fff;
  font-size:var(--t-16);
  line-height:1.4;
  color:var(--body-2);
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.pdbq__opt:hover{border-color:var(--navy);background:var(--cream)}
/* La pastille est dessinee par la case elle-meme, sans habillage ajoute. */
.pdbq__opt input{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:19px;
  height:19px;
  margin:0;
  border:2px solid var(--line-3);
  border-radius:50%;
  background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.pdbq__opt:hover input{border-color:var(--navy)}
.pdbq__opt input:checked{
  border-color:var(--orange);
  box-shadow:inset 0 0 0 4px var(--orange);
}
.pdbq__opt:has(input:checked){
  border-color:var(--navy-deep);
  background:var(--navy-deep);
  color:#fff;
}
.pdbq__opt:has(input:checked) input{border-color:#fff;box-shadow:inset 0 0 0 4px var(--orange)}
.pdbq__opt:focus-within{outline:2px solid var(--navy);outline-offset:2px}

/* ---------- Revenir en arriere, recommencer ---------- */
.pdbq__nav{display:none;gap:14px;align-items:center;flex-wrap:wrap}
.pdbq.is-vif .pdbq__nav{display:flex}
.pdbq__retour,
.pdbq__refaire{
  margin:0;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:var(--t-16);
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.pdbq__retour:hover,
.pdbq__refaire:hover{color:var(--navy-deep)}
.pdbq__retour[hidden],
.pdbq__refaire[hidden]{display:none}

/* ---------- Le verdict ---------- */
.pdbq__reponses{display:flex;flex-direction:column;gap:10px}
.pdbq__r{
  margin:0;
  padding:16px 18px 16px 20px;
  border-radius:0 14px 14px 0;
  border-left:4px solid var(--orange);
  background:var(--cream);
  color:var(--body);
  font-size:var(--t-16);
  line-height:1.65;
}
.pdbq__r b{color:var(--navy-deep)}
.pdbq.is-vif .pdbq__r{display:none}
.pdbq.is-vif .pdbq__r.est-actif{display:block;animation:pdbq-entree .3s ease}

/* Tant qu'on n'a pas fini, on ne montre ni la ligne d'assurance ni les
   boutons : c'est ce qui rendait le bloc si lourd a l'ouverture. */
.pdbq.is-vif:not(.a-repondu) .pdbq__assur,
.pdbq.is-vif:not(.a-repondu) .pdbq__cta{display:none}

.pdbq__assur{
  margin:0;
  padding-top:clamp(12px,1.2vw,18px);
  border-top:1px solid var(--line-3);
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
}
.pdbq__assur b{color:var(--navy-deep)}

.pdbq__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pdbq__cta .btn--ghost{border-color:var(--line-3);color:var(--navy-deep)}
.pdbq__cta .btn--ghost:hover{background:var(--cream);color:var(--navy-deep)}

/* ---------- Le meme bloc sur une section bleu nuit ---------- */
/* La carte reste blanche : c'est elle qui doit ressortir du fond, pas se
   fondre dedans. Seuls le filet et l'ombre s'adaptent. */
.bg-navy .pdbq,
.bg-cream .pdbq{border-color:rgba(255,255,255,.18);box-shadow:0 26px 54px -34px rgba(0,0,0,.6)}

/* ---------- Le lien vers les autres videos, sous la grille ---------- */
.pdb-tt-plus{
  margin:clamp(20px,2vw,32px) 0 0;
  text-align:center;
}
/* Sur une section claire, le bouton fantome a besoin d'un filet visible. */
.section:not(.bg-navy):not(.bg-cream) .pdb-tt-plus .btn--ghost{
  border-color:var(--line-3);
  color:var(--navy-deep);
}
.section:not(.bg-navy):not(.bg-cream) .pdb-tt-plus .btn--ghost:hover{
  background:var(--cream);
  color:var(--navy-deep);
}

/* ---------- « Qu'est-ce qui vous arrive » : sept motifs ----------
   A trois colonnes, le septieme se retrouvait seul sur une troisieme rangee.
   Quatre colonnes en grand ecran donnent quatre puis trois, ce qui se lit. */
@media (min-width:1081px){
  .a4-cas__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Video TikTok en chargement differe ----------
   La vignette est une photo du site : tant qu'on ne clique pas, aucune requete
   ne part chez TikTok. */
.pdb-tt{position:relative;width:100%}
.pdb-tt__ouvrir{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:var(--navy-deep);
  cursor:pointer;
  aspect-ratio:9/16;
  transition:transform .25s ease;
}
.pdb-tt__ouvrir:hover{transform:translateY(-3px)}
.pdb-tt__ouvrir:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.pdb-tt__ouvrir img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
}
.pdb-tt__voile{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(11,37,69,.86) 0%,rgba(11,37,69,.28) 52%,rgba(11,37,69,.42) 100%);
}
.pdb-tt__lecture{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:clamp(58px,5vw,76px);
  height:clamp(58px,5vw,76px);
  border-radius:50%;
  background:var(--orange);
  color:#fff;
  display:grid;
  place-items:center;
  transition:transform .25s ease;
}
.pdb-tt__ouvrir:hover .pdb-tt__lecture{transform:translate(-50%,-50%) scale(1.07)}
.pdb-tt__lecture svg{width:46%;height:46%;margin-left:8%}
.pdb-tt__txt{
  position:absolute;
  left:clamp(16px,1.6vw,24px);
  right:clamp(16px,1.6vw,24px);
  bottom:clamp(16px,1.6vw,24px);
  display:flex;
  flex-direction:column;
  gap:5px;
  font-family:"Archivo",sans-serif;
  font-size:var(--t-17);
  font-weight:800;
  line-height:1.25;
  color:#fff;
  text-align:left;
}
.pdb-tt__txt small{
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:13.5px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--on-navy-2);
}
/* Une fois ouvert, le lecteur prend exactement la place de la vignette. */
.pdb-tt.est-ouvert{display:block}
.pdb-tt__cadre{
  display:block;
  width:100%;
  aspect-ratio:9/16;
  border:0;
  border-radius:18px;
  overflow:hidden;
  background:var(--navy-deep);
}
.a4-hero__photo--video .pdb-tt__cadre,
.a4-video--photo .pdb-tt__cadre{aspect-ratio:9/16}
/* Plusieurs videos cote a cote. */
/* Les cartes sont plafonnees en largeur et centrees : la grille reste juste
   qu'il y ait deux, trois ou quatre videos. */
/* Les cartes se rangent d'elles-memes : cinq videos tiennent sur une ligne en
   grand ecran, trois en dessous, puis deux, puis une. Ajouter une video ne
   demande aucune retouche ici. */
.pdb-tt-grille{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
  justify-content:center;
  gap:clamp(12px,1.2vw,20px);
  margin-top:clamp(22px,2.2vw,38px);
}
@media (max-width:1080px){.pdb-tt-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.pdb-tt-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .pdb-tt-grille{grid-template-columns:minmax(min(260px,100%),340px)}
}
/* Dans la banniere, la video ne doit pas devenir une colonne interminable. */
.a4-hero__photo--video{height:auto;min-height:0;aspect-ratio:auto}
.a4-hero__photo--video .pdb-tt{width:min(100%,360px);margin-inline:auto}
.a4-video--photo .pdb-tt__ouvrir{aspect-ratio:3/4}
.pdb-tt__lien{margin:12px 0 0;font-size:var(--t-16)}

@media (prefers-reduced-motion:reduce){
  .pdb-tt__ouvrir,.pdb-tt__lecture{transition:none}
  .pdb-tt__ouvrir:hover{transform:none}
}

/* ---------- Liste numerotee « les N raisons » ----------
   Le grand chiffre en Anton fait le travail : on lit la serie d'un coup d'oeil,
   et le texte est visible sans clic, contrairement aux accordeons. */
.a4-raisons{
  list-style:none;
  margin:clamp(22px,2.2vw,38px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(min(280px,100%),1fr));
  gap:clamp(14px,1.4vw,24px);
  counter-reset:none;
}
.a4-raison{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(22px,2vw,32px);
  background:#fff;
  border:1px solid var(--line-3);
  border-radius:18px;
  overflow:hidden;
}
.a4-raison__n{
  font-family:"Anton","Archivo",sans-serif;
  font-weight:400;
  font-size:clamp(44px,3.6vw,64px);
  line-height:.9;
  letter-spacing:.01em;
  color:var(--navy);
}
.a4-raison__n::after{
  content:"";
  display:block;
  width:38px;
  height:3px;
  margin-top:12px;
  border-radius:2px;
  background:var(--orange);
}
.a4-raisons .a4-raison__t{
  margin:0;
  font-family:"Archivo",sans-serif;
  font-size:var(--t-20);
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--navy-deep);
  text-wrap:balance;
}
.a4-raisons .a4-raison__p{
  margin:0;
  font-size:var(--t-16);
  line-height:1.6;
  color:var(--body);
}

/* Sur une section bleu nuit, les cartes restent blanches et le chiffre passe
   a l'orange pour ne pas se confondre avec le fond. */
.bg-navy .a4-raison,
.bg-cream .a4-raison{border-color:rgba(255,255,255,.16)}

/* ---------- Liste des communes sur une section foncee ----------
   v4-9 fixe le texte de ces puces en gris sombre. Sur les sections passees en
   bleu nuit, seuls les mots en gras restaient lisibles, le reste disparaissait
   dans le fond. */
.bg-navy .a4-texte .a4-communes li,
.bg-cream .a4-texte .a4-communes li{color:var(--on-navy)}
.bg-navy .a4-texte .a4-communes strong,
.bg-cream .a4-texte .a4-communes strong{color:#fff}

/* ---------- Surcharges responsive (toujours en dernier) ---------- */
@media (max-width:1080px){
  .a4-raisons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .a4-raisons{grid-template-columns:minmax(0,1fr)}
}
/* Sous 900 px, deux colonnes etranglent les reponses : la photo passe
   au-dessus, en bandeau, et ne colle plus. */
@media (max-width:900px){
  .pdbq-duo{grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,28px)}
  .pdbq-duo__img{min-height:0;height:clamp(160px,30vw,240px)}
}
@media (max-width:560px){
  .pdbq{border-radius:16px;padding:20px 18px}
  .pdbq__cta .btn{width:100%}
}