/* Plumber Deboucheur v4 : accueil (2026-09-16).
   v4-9 : point de recadrage reglable carte par carte (le sujet d'une photo
   n'est pas toujours au centre du fichier). */

/* ---------- 1. Palette ---------- */
:root{
  --navy:#1173D4;--navy-dark:#0D5FB3;--navy-deep:#0B2545;
  --orange:#F26B1D;--orange-dark:#DB5A0E;--orange-deep:#B9480A;--orange-txt:#B9480A;
  --cream:#EEF5FC;--line:#DCE6F2;--line-2:#DCE6F2;--line-3:#D2DEEC;
  --ink:#16222E;--body:#3D4A58;--body-2:#2F3B48;--muted:#5C6B7B;--nav:#2F3B48;
  --sand:#FFB47F;--on-navy:#E3EEFB;--on-navy-2:#C8DBF3;--on-navy-3:#AFC9EA;
}
.h2,.h3{color:var(--navy-deep)}
.bg-navy,.hero{background:var(--navy-deep)}
.bg-cream{border-top:0;border-bottom:0}
.ftr{background:var(--navy-deep)}
.btn--cta,.btn--accent{background:var(--navy);border-bottom:0;color:#fff}
.btn--cta:hover,.btn--accent:hover{background:var(--navy-dark);color:#fff}
.btn--cta[href^="tel:"],.btn--accent[href^="tel:"]{background:var(--orange)}
.btn--cta[href^="tel:"]:hover,.btn--accent[href^="tel:"]:hover{background:var(--orange-dark)}
.quiz__opt.is-choisi,.ftr__social:hover{background:var(--navy);border-color:var(--navy)}

/* ---------- 2. Bandeau du haut ---------- */
.topbar{background:var(--navy-deep)}
.topbar .topbar__grid{display:flex;align-items:center;gap:clamp(12px,2vw,32px);min-height:40px;padding-block:8px;font-size:14px;line-height:1.35}
.topbar__nom{color:#fff}
.topbar__nom b{font-weight:700}
.topbar__adr{color:var(--on-navy-2)}
.topbar__tel{margin-left:auto;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.topbar__tel:hover{text-decoration:underline}

/* ---------- 3. Bases ---------- */
.a4-h2{font-size:clamp(28px,3.1vw,52px);line-height:1.08;font-weight:800;letter-spacing:-.015em;color:var(--navy-deep);text-wrap:balance;max-width:24ch;margin:0}
.bg-navy .a4-h2{color:#fff}
.a4-texte{display:flex;flex-direction:column;gap:clamp(14px,1.3vw,22px);min-width:0}
.a4-texte p{margin:0;font-size:var(--t-18);line-height:1.65;color:var(--body)}
.a4-texte strong{color:var(--ink)}
.a4-texte a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.a4-texte a.btn,.a4-texte a.btn:hover{color:#fff;text-decoration:none}
.a4-texte p.a4-cle{font-size:var(--t-20);line-height:1.5;color:var(--ink)}
.bg-navy .a4-texte p{color:var(--on-navy)}
.bg-navy .a4-texte strong{color:#fff}
.a4-sstitre{margin:10px 0 0;font-size:var(--t-19);line-height:1.6;color:var(--body);max-width:62ch}
.bg-navy .a4-sstitre{color:var(--on-navy)}
.a4-sstitre strong{color:var(--navy-deep)}
.bg-navy .a4-sstitre strong{color:#fff}

/* Une carte blanche posee sur un fond sombre garde SON texte sombre. */
.bg-navy .a4-texte .a4-etapes li p,
.bg-navy .a4-etapes li p{color:var(--body)}
.bg-navy .a4-texte .a4-etapes li strong,
.bg-navy .a4-etapes li strong{color:var(--ink)}

/* ---------- 4. Banniere ---------- */
.a4-hero{background:var(--navy-deep);color:#fff;overflow:hidden}
.a4-hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(26px,3.4vw,72px);align-items:stretch;padding-block:clamp(36px,4vw,76px)}
.a4-hero__txt{display:flex;flex-direction:column;justify-content:center;gap:clamp(13px,1.1vw,20px);min-width:0}
.a4-hero__h1{margin:0;font-size:var(--t-17);line-height:1.3;font-weight:700;letter-spacing:0;color:var(--on-navy-2)}
.a4-hero__dispo{display:inline-flex;align-items:center;gap:9px;margin-left:10px;padding:6px 13px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-family:"Archivo",sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.a4-hero__pastille{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#3DDC84}
.a4-hero__pastille::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(61,220,132,.35);animation:pdbDispo 1.8s ease-out infinite}
@keyframes pdbDispo{0%{transform:scale(.55);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.a4-hero__cri{margin:0;font-family:"Archivo",sans-serif;font-size:clamp(34px,4.7vw,84px);line-height:1.02;font-weight:800;letter-spacing:-.028em;color:#fff;text-wrap:balance}
.a4-hero__cri span{display:block;margin-top:.14em;color:var(--orange)}
.a4-hero__lead{margin:0;max-width:50ch;font-size:var(--t-19);line-height:1.55;color:var(--on-navy)}
.a4-hero__lead strong{color:#fff}
.a4-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.a4-hero__mini{margin:2px 0 0;font-size:15.5px;line-height:1.5;color:var(--on-navy-3)}
.a4-hero__photo{position:relative;align-self:stretch;min-height:clamp(300px,30vw,540px)}
.a4-hero .trust{z-index:2}

/* Recadrage force : aucune photo ne laisse de bande, quel que soit son format. */
.a4-cas__img img,.a4-real img,.a4-hero__photo img,.a4-faq__photo img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;object-fit:cover!important;object-position:center!important;display:block!important}
.a4-hero__photo img{border-radius:18px}
/* Sujet decentre dans le fichier : on deplace le point de recadrage. */
.a4-cas__img--droite img{object-position:78% 50%!important}
.a4-cas__img--gauche img{object-position:22% 50%!important}
.a4-cas__img--haut img{object-position:50% 22%!important}
.a4-cas__img--bas img{object-position:50% 78%!important}

/* ---------- 5. Services ---------- */
.a4-cas__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,24px);margin-top:clamp(24px,2.4vw,40px)}
.a4-cas__carte{position:relative;display:block;aspect-ratio:4/3;border:0;border-radius:16px;overflow:hidden;color:#fff;text-decoration:none;background:var(--navy-deep)}
.a4-cas__img{position:absolute;inset:0;display:block;overflow:hidden;background:var(--navy-deep)}
.a4-cas__img img{transition:transform .5s ease}
.a4-cas__carte:hover .a4-cas__img img{transform:scale(1.05)}
.a4-cas__pied{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;gap:12px;padding:clamp(16px,1.6vw,24px);background:linear-gradient(to top,rgba(9,29,55,.95) 0%,rgba(9,29,55,.8) 45%,rgba(9,29,55,.2) 80%,rgba(9,29,55,0) 100%)}
.a4-cas__t{margin:0;font-family:"Archivo",sans-serif;font-size:clamp(18px,1.4vw,23px);line-height:1.2;font-weight:800;color:#fff;text-wrap:balance}
.a4-cas__fleche{flex:none;margin-left:auto;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-size:20px;transition:background-color .15s ease}
.a4-cas__carte:hover .a4-cas__fleche{background:var(--orange)}
.a4-urgence{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(16px,1.6vw,26px);padding:clamp(18px,1.8vw,26px);border-radius:16px;background:var(--cream)}
.a4-urgence p{margin:0;font-size:var(--t-18);line-height:1.5;color:var(--body-2);max-width:56ch}
.a4-urgence strong{color:var(--navy-deep)}
.a4-urgence .btn{margin-left:auto;text-decoration:none}

/* ---------- 6. Deroule : etapes reliees, video a la meme hauteur ---------- */
.a4-split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,3.6vw,72px);align-items:stretch}
.a4-split .a4-texte{justify-content:center}
.a4-etapes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px}
.a4-etapes li{position:relative;display:flex;align-items:flex-start;gap:16px;background:#fff;border-radius:14px;padding:18px 22px}
.a4-etapes li:not(:last-child)::after{content:"";position:absolute;left:40px;top:100%;width:0;height:16px;border-left:2px dotted rgba(255,255,255,.55)}
.a4-etapes__n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:"Archivo",sans-serif;font-size:17px;font-weight:800}
.a4-etapes li p{margin:0;font-size:var(--t-17);line-height:1.55}

.a4-video{position:relative;align-self:stretch;justify-self:center;width:min(100%,460px);min-height:clamp(320px,32vw,600px);border-radius:18px;overflow:hidden;background:#061a33}
.a4-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);display:block}
.a4-video__live{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(11,37,69,.82);color:#fff;font-family:"Archivo",sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.a4-video__point{position:relative;flex:none;width:9px;height:9px;border-radius:50%;background:#FF3B30;animation:pdbClignote 1.1s steps(1,end) infinite}
.a4-video__point::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(255,59,48,.38);animation:pdbOnde 1.7s ease-out infinite}
@keyframes pdbClignote{0%,62%{opacity:1}63%,100%{opacity:.28}}
@keyframes pdbOnde{0%{transform:scale(.55);opacity:.75}100%{transform:scale(1.55);opacity:0}}

/* ---------- 7. Realisations ---------- */
.a4-real{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);margin-top:clamp(20px,2vw,34px)}
.a4-real figure{position:relative;margin:0;overflow:hidden;border-radius:14px;aspect-ratio:1/1;background:#fff}

/* ---------- 8. Tarifs ---------- */
.a4-tarifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,24px);margin-top:clamp(22px,2.2vw,38px);align-items:stretch}
.a4-tarif{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.a4-tarif--vedette{background:var(--navy-deep);border-color:var(--navy-deep)}
.a4-tarif__tete{padding:13px 22px;background:var(--cream);color:var(--navy);font-family:"Archivo",sans-serif;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.a4-tarif--vedette .a4-tarif__tete{background:rgba(255,255,255,.12);color:#fff}
.a4-tarif__corps{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,1.9vw,30px);height:100%}
.a4-tarif h3{margin:0;font-family:"Archivo",sans-serif;font-size:var(--t-20);line-height:1.25;color:var(--navy-deep)}
.a4-tarif--vedette h3{color:#fff}
.a4-tarif__prix{display:flex;align-items:baseline;gap:10px;font-family:"Archivo",sans-serif;font-size:clamp(36px,3.1vw,50px);font-weight:800;line-height:1;color:var(--navy-deep)}
.a4-tarif__prix small{font-family:"Source Sans 3",sans-serif;font-size:15px;font-weight:400;color:var(--muted)}
.a4-tarif--vedette .a4-tarif__prix{color:var(--sand)}
.a4-tarif--vedette .a4-tarif__prix small{color:var(--on-navy-2)}
.a4-tarif ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.a4-tarif li{position:relative;padding-left:26px;font-size:var(--t-16);line-height:1.5;color:var(--body)}
.a4-tarif--vedette li{color:var(--on-navy)}
.a4-tarif li::before{content:"";position:absolute;left:0;top:.42em;width:15px;height:15px;border-radius:50%;background:var(--cream)}
.a4-tarif--vedette li::before{background:rgba(255,255,255,.16)}
.a4-tarif li::after{content:"";position:absolute;left:4px;top:.68em;width:7px;height:4px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.a4-tarif--vedette li::after{border-color:var(--sand)}
.a4-tarif__pied{margin-top:auto;padding-top:4px;font-size:15px;line-height:1.5;color:var(--muted)}
.a4-tarif--vedette .a4-tarif__pied{color:var(--on-navy-2)}
.a4-fixe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(18px,1.8vw,28px);padding:clamp(16px,1.6vw,24px);border-radius:14px;background:#fff;border:1px solid var(--line)}
.a4-fixe p{margin:0;font-size:var(--t-17);line-height:1.55;color:var(--body-2);max-width:60ch}
.a4-fixe strong{color:var(--navy-deep)}
.a4-fixe a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.a4-fixe .btn{margin-left:auto;text-decoration:none}

/* ---------- 9. Qui paie ---------- */
.a4-payeurs{list-style:none;margin:clamp(20px,2vw,34px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.a4-payeurs li{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(16px,1.6vw,24px)}
.a4-payeurs__ico{width:42px;height:42px;border-radius:11px;background:var(--cream);color:var(--navy);display:grid;place-items:center}
.a4-payeurs__ico svg{width:22px;height:22px}
.a4-payeurs b{font-family:"Archivo",sans-serif;font-size:var(--t-18);color:var(--navy-deep)}
.a4-payeurs span{font-size:var(--t-16);line-height:1.5;color:var(--body)}
.a4-assur{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(16px,1.6vw,26px);padding:clamp(16px,1.6vw,24px);border-radius:14px;background:var(--cream)}
.a4-assur p{margin:0;font-size:var(--t-17);line-height:1.55;color:var(--body-2);max-width:62ch}
.a4-assur strong{color:var(--navy-deep)}

/* ---------- 10. Avis, zone, FAQ ---------- */
.a4-avis__tete{display:flex;flex-direction:column;gap:18px}
.a4-avis__actions{margin-top:clamp(24px,2.4vw,40px)}
.a4-zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,88px);align-items:center}
.a4-zone .map-zone{display:block;width:100%;height:clamp(340px,32vw,600px);border:0;border-radius:18px}
.a4-communes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.a4-texte .a4-communes li{position:relative;padding-left:22px;font-size:var(--t-17);line-height:1.55;color:var(--body)}
.a4-communes li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--orange)}

.a4-faq{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(26px,3vw,60px);align-items:start}
.a4-faq__aside{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}
.a4-faq__photo{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:3/4}
.a4-faq__carte{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(16px,1.6vw,24px)}
.a4-faq__carte b{display:block;font-family:"Archivo",sans-serif;font-size:var(--t-18);color:var(--navy-deep);margin-bottom:8px}
.a4-faq__carte p{margin:0;font-size:var(--t-16);line-height:1.6;color:var(--body)}
.a4-faq .faq details p+p{padding-top:0}
.a4-faq .faq a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ---------- 11. Blog et devis ---------- */
.home .art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,24px);margin-top:clamp(24px,2.4vw,40px)}
.a4-devis{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,4vw,88px);align-items:start}
.pdb2-form .form{grid-template-columns:repeat(2,minmax(0,1fr))}
.pdb2-form .field.full{grid-column:1/-1}
.pdb2-form__rgpd{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.pdb2-form__rgpd a{color:var(--navy);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .a4-cas__img img,.a4-cas__fleche{transition:none}
  .a4-video__point,.a4-video__point::after,.a4-hero__pastille::after{animation:none}
}

/* ---------- 12. Surcharges responsive (toujours en dernier) ---------- */
@media (max-width:1080px){
  .a4-cas__grid,.a4-payeurs,.a4-real{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a4-tarifs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .a4-hero__grid,.a4-split,.a4-zone,.a4-faq,.a4-devis,.home .art-grid{grid-template-columns:minmax(0,1fr)!important}
  .a4-hero__photo,.a4-video,.a4-zone .map-zone,.a4-faq__aside{order:-1!important}
  .a4-hero__photo{height:auto;min-height:0;aspect-ratio:16/11}
  .a4-faq__aside{position:static}
  .a4-faq__photo{aspect-ratio:16/10}
  .a4-video{width:min(100%,380px);min-height:0;aspect-ratio:3/4}
  .a4-h2{max-width:none}
  .a4-urgence .btn,.a4-fixe .btn{margin-left:0}
}
@media (max-width:760px){
  .topbar{display:block!important}
  .topbar .topbar__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;font-size:13px}
  .topbar__adr{grid-column:1/-1;grid-row:2}
  .topbar__tel{margin-left:0}
}
@media (max-width:560px){
  .a4-cas__grid,.a4-payeurs,.a4-real,.pdb2-form .form{grid-template-columns:minmax(0,1fr)}
  .a4-cas__carte{aspect-ratio:16/10}
  .a4-hero__actions .btn,.a4-urgence .btn,.a4-fixe .btn{width:100%}
  .a4-video__live{top:10px;left:10px;font-size:11.5px;padding:7px 12px}
}