/* =========================================================
   ANGELO PLOMBIER — Saint-Étienne (42)
   Feuille de styles principale — rouge & blanc
   ========================================================= */

/* ---------- 1. Variables ---------- */
:root{
  --rouge:#C1121F;
  --rouge-fonce:#8A0C16;
  --rouge-clair:#E8434C;
  --rouge-pale:#FDECEE;
  --rouge-pale-2:#FBE0E3;
  --encre:#17151A;
  --encre-2:#3D3A42;
  --gris:#6B6670;
  --gris-clair:#F6F4F5;
  --bordure:#E8E3E5;
  --blanc:#FFFFFF;
  --succes:#1B7F4B;
  --ombre-s:0 2px 8px rgba(23,21,26,.06);
  --ombre-m:0 10px 30px rgba(23,21,26,.09);
  --ombre-l:0 22px 60px rgba(23,21,26,.14);
  --ombre-rouge:0 12px 30px rgba(193,18,31,.28);
  --r-s:10px; --r-m:16px; --r-l:26px; --r-xl:34px;
  --max:1200px;
  --pol:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --trans:.28s cubic-bezier(.4,0,.2,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--pol);color:var(--encre-2);background:var(--blanc);
  font-size:17px;line-height:1.75;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--rouge);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--rouge-fonce)}
h1,h2,h3,h4,h5{color:var(--encre);line-height:1.22;margin:0 0 .6em;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.6vw,3.15rem)}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h4{font-size:1.1rem;font-weight:700}
p{margin:0 0 1.15em}
ul,ol{padding-left:1.3em}
li{margin-bottom:.5em}
strong{color:var(--encre);font-weight:700}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:4px}
section{position:relative}
.section{padding:clamp(56px,7vw,96px) 0}
.section--gris{background:var(--gris-clair)}
.section--pale{background:linear-gradient(180deg,var(--rouge-pale) 0%,#fff 100%)}

/* ---------- 3. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:15px 30px;border-radius:60px;font-weight:800;font-size:1.02rem;
  border:2px solid transparent;cursor:pointer;text-align:center;line-height:1.2;
  transition:transform var(--trans),box-shadow var(--trans),background var(--trans),color var(--trans);
}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.btn--primaire{background:var(--rouge);color:#fff;box-shadow:var(--ombre-rouge)}
.btn--primaire:hover{background:var(--rouge-fonce);color:#fff;transform:translateY(-3px);box-shadow:0 18px 38px rgba(193,18,31,.34)}
.btn--secondaire{background:#fff;color:var(--rouge);border-color:var(--rouge-pale-2);box-shadow:var(--ombre-s)}
.btn--secondaire:hover{border-color:var(--rouge);transform:translateY(-3px);color:var(--rouge-fonce)}
.btn--fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--fantome:hover{background:#fff;color:var(--rouge);transform:translateY(-3px)}
.btn--large{padding:18px 40px;font-size:1.12rem}
.btn--bloc{width:100%}

/* ---------- 4. Bandeau d'urgence ---------- */
.topbar{background:var(--encre);color:#EDEAEE;font-size:.86rem;padding:9px 0}
.topbar__in{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between}
.topbar a{color:#fff;font-weight:700}
.topbar a:hover{color:var(--rouge-clair)}
.topbar__items{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.topbar__item{display:inline-flex;align-items:center;gap:7px}
.topbar__item svg{width:15px;height:15px;fill:var(--rouge-clair)}
.pastille-urgence{display:inline-flex;align-items:center;gap:8px;background:var(--rouge);color:#fff;padding:3px 14px;border-radius:40px;font-weight:800;letter-spacing:.03em}
.pastille-urgence::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* ---------- 5. En-tête ---------- */
.entete{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--bordure);transition:box-shadow var(--trans)}
.entete.est-fixe{box-shadow:var(--ombre-m)}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--encre);letter-spacing:-.03em}
.logo:hover{color:var(--encre)}
.logo__icone{width:46px;height:46px;flex:0 0 auto}
.logo__txt{display:flex;flex-direction:column;line-height:1}
.logo__nom{font-size:1.42rem;color:var(--encre)}
.logo__sous{font-size:.7rem;font-weight:700;color:var(--rouge);letter-spacing:.19em;text-transform:uppercase;margin-top:4px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--encre-2);font-weight:600;font-size:.97rem;padding:10px 14px;border-radius:var(--r-s);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--rouge);background:var(--rouge-pale)}
.nav__item{position:relative}
.nav__sous{
  position:absolute;top:calc(100% + 10px);left:0;min-width:274px;background:#fff;border:1px solid var(--bordure);
  border-radius:var(--r-m);box-shadow:var(--ombre-l);padding:10px;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:all var(--trans);list-style:none;margin:0;z-index:20;
}
.nav__item:hover .nav__sous,.nav__item:focus-within .nav__sous{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sous li{margin:0}
.nav__sous a{display:block;padding:10px 14px;font-size:.94rem}
.entete__cta{display:flex;align-items:center;gap:12px}
.tel-entete{display:inline-flex;align-items:center;gap:10px;font-weight:900;color:var(--rouge);font-size:1.16rem;white-space:nowrap}
.tel-entete svg{width:34px;height:34px;padding:7px;background:var(--rouge);fill:#fff;border-radius:50%}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:var(--encre);border-radius:3px;transition:var(--trans)}
.burger span+span{margin-top:6px}
.burger.est-ouvert span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger.est-ouvert span:nth-child(2){opacity:0}
.burger.est-ouvert span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.nav__fermer{display:none;position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--rouge-pale);cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav__fermer svg{width:22px;height:22px;fill:var(--rouge)}
.nav__fermer:hover{background:var(--rouge);}
.nav__fermer:hover svg{fill:#fff}

/* ---------- 6. Héros ---------- */
.heros{position:relative;background:linear-gradient(135deg,#8A0C16 0%,#C1121F 55%,#D8323C 100%);color:#fff;overflow:hidden;padding:clamp(52px,7vw,92px) 0}
.heros::after{content:"";position:absolute;inset:0;background:
   radial-gradient(circle at 82% 18%,rgba(255,255,255,.16),transparent 46%),
   radial-gradient(circle at 8% 92%,rgba(0,0,0,.22),transparent 52%);pointer-events:none}
.heros__grille{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,64px);align-items:center}
.heros h1{color:#fff;margin-bottom:.45em}
.heros h1 em{font-style:normal;color:#FFD9DC;display:block}
.heros__accroche{font-size:1.16rem;color:rgba(255,255,255,.94);max-width:56ch;margin-bottom:1.6em}
.heros__badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.32);
  padding:8px 18px;border-radius:40px;font-size:.87rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:22px}
.heros__badge svg{width:16px;height:16px;fill:#fff}
.heros__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.heros__actions .btn--primaire{background:#fff;color:var(--rouge);box-shadow:0 14px 34px rgba(0,0,0,.24)}
.heros__actions .btn--primaire:hover{background:#FFE9EB;color:var(--rouge-fonce)}
.heros__preuves{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:.93rem;font-weight:600}
.heros__preuve{display:flex;align-items:center;gap:9px}
.heros__preuve svg{width:19px;height:19px;fill:#FFD9DC;flex:0 0 auto}
.heros__media{position:relative}
.heros__media img{border-radius:var(--r-xl);box-shadow:0 32px 70px rgba(0,0,0,.34);width:100%;aspect-ratio:4/3.2;object-fit:cover}
.heros__vignette{
  position:absolute;bottom:-26px;left:-24px;background:#fff;color:var(--encre);border-radius:var(--r-m);
  padding:16px 22px;box-shadow:var(--ombre-l);display:flex;align-items:center;gap:14px;max-width:290px;
}
.heros__vignette svg{width:42px;height:42px;fill:var(--rouge);flex:0 0 auto}
.heros__vignette b{display:block;font-size:1.36rem;color:var(--rouge);line-height:1.1}
.heros__vignette span{font-size:.83rem;color:var(--gris);font-weight:600}

/* ---------- 7. Fil d'ariane ---------- */
.ariane{background:var(--gris-clair);border-bottom:1px solid var(--bordure);font-size:.85rem;padding:12px 0}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;color:var(--gris)}
.ariane li{margin:0;display:flex;align-items:center;gap:8px}
.ariane li+li::before{content:"›";color:var(--rouge);font-weight:800}
.ariane a{color:var(--gris);font-weight:600}
.ariane a:hover{color:var(--rouge)}
.ariane [aria-current]{color:var(--encre);font-weight:700}

/* ---------- 8. En-tête de page intérieure ---------- */
.entete-page{background:linear-gradient(130deg,#8A0C16,#C1121F 62%,#D5303A);color:#fff;padding:clamp(48px,6vw,78px) 0;position:relative;overflow:hidden}
.entete-page::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 12%,rgba(255,255,255,.15),transparent 45%)}
.entete-page__in{position:relative;z-index:2;max-width:840px}
.entete-page h1{color:#fff}
.entete-page p{font-size:1.1rem;color:rgba(255,255,255,.93);margin-bottom:0;max-width:64ch}
.entete-page__sur{display:inline-block;font-size:.82rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:#FFD1D5;border-left:3px solid #fff;padding-left:12px;margin-bottom:16px}

/* ---------- 9. Titres de section ---------- */
.titre-sec{max-width:760px;margin:0 auto clamp(38px,4.5vw,58px);text-align:center}
.titre-sec--gauche{text-align:left;margin-inline:0}
.sur-titre{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge);
  background:var(--rouge-pale);padding:7px 16px;border-radius:40px;margin-bottom:16px}
.titre-sec p{color:var(--gris);font-size:1.06rem;margin-bottom:0}

/* ---------- 10. Cartes services ---------- */
.grille{display:grid;gap:26px}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
.carte{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--ombre-s);transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans);display:flex;flex-direction:column}
.carte:hover{transform:translateY(-7px);box-shadow:var(--ombre-m);border-color:var(--rouge-pale-2)}
.carte__img{aspect-ratio:16/10;overflow:hidden;background:var(--gris-clair)}
.carte__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.carte:hover .carte__img img{transform:scale(1.07)}
.carte__corps{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.carte__corps h3{margin-bottom:.45em}
.carte__corps p{color:var(--gris);font-size:.97rem;flex:1}
.carte__lien{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--rouge);margin-top:14px}
.carte__lien svg{width:16px;height:16px;fill:currentColor;transition:transform var(--trans)}
.carte:hover .carte__lien svg{transform:translateX(5px)}
.carte__icone{width:60px;height:60px;border-radius:18px;background:var(--rouge-pale);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.carte__icone svg{width:30px;height:30px;fill:var(--rouge)}
.carte__tag{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:var(--rouge);background:var(--rouge-pale);padding:5px 12px;border-radius:30px;margin-bottom:12px;align-self:flex-start}

/* ---------- 11. Atouts ---------- */
.atout{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--bordure);
  border-radius:var(--r-m);padding:24px;box-shadow:var(--ombre-s);transition:var(--trans)}
.atout:hover{border-color:var(--rouge-pale-2);box-shadow:var(--ombre-m);transform:translateY(-4px)}
.atout__icone{width:52px;height:52px;flex:0 0 auto;border-radius:15px;background:var(--rouge);display:flex;align-items:center;justify-content:center}
.atout__icone svg{width:26px;height:26px;fill:#fff}
.atout h3{font-size:1.1rem;margin-bottom:.35em}
.atout p{font-size:.94rem;color:var(--gris);margin:0}

/* ---------- 12. Chiffres clés ---------- */
.chiffres{background:var(--encre);color:#fff;padding:clamp(44px,5vw,68px) 0}
.chiffres .grille{gap:20px}
.chiffre{text-align:center;padding:18px 12px;border-radius:var(--r-m);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.chiffre b{display:block;font-size:clamp(2rem,4vw,2.9rem);color:var(--rouge-clair);font-weight:900;line-height:1}
.chiffre>span{display:block;font-size:.9rem;color:#CFC9D2;font-weight:600;margin-top:6px}
.chiffre b span{font-size:inherit;color:inherit;font-weight:inherit;margin:0}

/* ---------- 13. Contenu rédactionnel ---------- */
.redac{max-width:820px}
.redac--large{max-width:100%}
.redac h2{margin-top:1.9em}
.redac h2:first-child{margin-top:0}
.redac h3{margin-top:1.5em;color:var(--rouge-fonce)}
.redac h4{margin-top:1.3em;color:var(--encre)}
.redac ul{list-style:none;padding-left:0}
.redac ul li{position:relative;padding-left:32px}
.redac ul li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:16px;border-radius:50%;
  background:var(--rouge-pale);box-shadow:inset 0 0 0 4px var(--rouge)}
.redac ol{padding-left:1.3em}
.redac ol li::marker{color:var(--rouge);font-weight:800}
.redac img{border-radius:var(--r-m);box-shadow:var(--ombre-m);margin:1.6em 0}
.redac figure{margin:2em 0}
.redac figcaption{font-size:.86rem;color:var(--gris);text-align:center;margin-top:10px;font-style:italic}
.redac table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.95rem;box-shadow:var(--ombre-s);border-radius:var(--r-s);overflow:hidden}
.redac th{background:var(--rouge);color:#fff;text-align:left;padding:14px 16px;font-weight:800;font-size:.92rem}
.redac td{padding:13px 16px;border-bottom:1px solid var(--bordure);vertical-align:top}
.redac tbody tr:nth-child(even){background:var(--gris-clair)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

.mise-en-avant{background:var(--rouge-pale);border-left:5px solid var(--rouge);border-radius:0 var(--r-m) var(--r-m) 0;
  padding:24px 28px;margin:2em 0}
.mise-en-avant p:last-child{margin-bottom:0}
.mise-en-avant strong{color:var(--rouge-fonce)}
.encadre-info{background:var(--gris-clair);border:1px solid var(--bordure);border-radius:var(--r-m);padding:24px 28px;margin:2em 0}
.encadre-info h3,.encadre-info h4{margin-top:0}
.encadre-info p:last-child,.encadre-info ul:last-child{margin-bottom:0}

.sommaire{background:#fff;border:2px solid var(--rouge-pale-2);border-radius:var(--r-m);padding:24px 28px;margin:0 0 2.4em}
.sommaire h2{font-size:1.06rem;margin:0 0 14px;text-transform:uppercase;letter-spacing:.11em;color:var(--rouge)}
.sommaire ol{margin:0;padding-left:1.2em;columns:2;column-gap:34px}
.sommaire li{margin-bottom:8px;font-size:.95rem;break-inside:avoid}
.sommaire a{color:var(--encre-2);font-weight:600}
.sommaire a:hover{color:var(--rouge)}

/* ---------- 14. Mise en page 2 colonnes ---------- */
.deux-col{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,4.5vw,62px);align-items:start}
.aside{position:sticky;top:104px;display:flex;flex-direction:column;gap:22px}
.bloc-aside{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-l);padding:26px;box-shadow:var(--ombre-s)}
.bloc-aside h3{font-size:1.12rem;margin-bottom:.7em}
.bloc-aside ul{list-style:none;padding:0;margin:0}
.bloc-aside li{margin-bottom:2px}
.bloc-aside li a{display:block;padding:9px 12px;border-radius:var(--r-s);color:var(--encre-2);font-size:.94rem;font-weight:600}
.bloc-aside li a:hover{background:var(--rouge-pale);color:var(--rouge)}
.bloc-aside--rouge{background:linear-gradient(140deg,var(--rouge-fonce),var(--rouge));border:0;color:#fff;text-align:center}
.bloc-aside--rouge h3{color:#fff}
.bloc-aside--rouge p{color:rgba(255,255,255,.9);font-size:.94rem}
.bloc-aside--rouge .tel-gros{display:block;font-size:1.5rem;font-weight:900;color:#fff;margin:10px 0 16px}

/* ---------- 15. Bloc téléphone / CTA ---------- */
.cta-bande{background:linear-gradient(130deg,var(--rouge-fonce),var(--rouge) 60%,var(--rouge-clair));color:#fff;
  padding:clamp(48px,6vw,80px) 0;position:relative;overflow:hidden}
.cta-bande::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.16),transparent 45%)}
.cta-bande__in{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.cta-bande h2{color:#fff;margin-bottom:.3em}
.cta-bande p{color:rgba(255,255,255,.93);margin:0;max-width:56ch}
.cta-bande__actions{display:flex;flex-wrap:wrap;gap:14px}
.cta-bande .btn--primaire{background:#fff;color:var(--rouge)}
.cta-bande .btn--primaire:hover{background:#FFE4E6;color:var(--rouge-fonce)}

/* ---------- 16. FAQ ---------- */
.faq{max-width:880px;margin-inline:auto}
.faq__item{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-m);margin-bottom:14px;overflow:hidden;transition:var(--trans)}
.faq__item[open]{border-color:var(--rouge);box-shadow:var(--ombre-m)}
.faq__item summary{cursor:pointer;padding:20px 58px 20px 24px;font-weight:800;color:var(--encre);position:relative;list-style:none;font-size:1.03rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.6rem;font-weight:400;color:var(--rouge);transition:var(--trans);line-height:1}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__item summary:hover{color:var(--rouge)}
.faq__rep{padding:0 24px 22px;color:var(--gris);font-size:.98rem}
.faq__rep p:last-child{margin-bottom:0}

/* ---------- 17. Avis ---------- */
.avis{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-l);padding:28px;box-shadow:var(--ombre-s);display:flex;flex-direction:column}
.avis__etoiles{display:flex;gap:3px;margin-bottom:14px}
.avis__etoiles svg{width:19px;height:19px;fill:#F5A623}
.avis p{font-style:italic;color:var(--encre-2);flex:1}
.avis__auteur{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--bordure)}
.avis__initiale{width:44px;height:44px;border-radius:50%;background:var(--rouge);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 auto}
.avis__auteur b{display:block;font-size:.96rem;color:var(--encre)}
.avis__auteur span{font-size:.83rem;color:var(--gris)}

/* ---------- 18. Zones d'intervention ---------- */
.zones-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.zones-liste li{margin:0}
.zones-liste a{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-m);
  padding:14px 18px;color:var(--encre-2);font-weight:700;font-size:.95rem;transition:var(--trans);box-shadow:var(--ombre-s)}
.zones-liste a:hover{border-color:var(--rouge);color:var(--rouge);transform:translateY(-3px);box-shadow:var(--ombre-m)}
.zones-liste svg{width:17px;height:17px;fill:var(--rouge);flex:0 0 auto}
.zones-liste small{display:block;font-weight:600;color:var(--gris);font-size:.78rem}

.carte-ville{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--ombre-m);border:1px solid var(--bordure)}
.carte-ville img{width:100%}

/* ---------- 19. Étapes ---------- */
.etapes{counter-reset:etape;display:grid;gap:22px}
.etape{position:relative;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-m);padding:28px 26px 26px;box-shadow:var(--ombre-s)}
.etape::before{counter-increment:etape;content:"0" counter(etape);position:absolute;top:-18px;left:26px;
  background:var(--rouge);color:#fff;font-weight:900;font-size:.95rem;padding:7px 14px;border-radius:30px;box-shadow:var(--ombre-rouge)}
.etape h3{font-size:1.08rem;margin:.5em 0 .4em}
.etape p{font-size:.94rem;color:var(--gris);margin:0}

/* ---------- 20. Tarifs ---------- */
.tarifs{display:grid;gap:22px}
.tarif{background:#fff;border:2px solid var(--bordure);border-radius:var(--r-l);padding:30px 26px;text-align:center;transition:var(--trans)}
.tarif:hover{border-color:var(--rouge);transform:translateY(-6px);box-shadow:var(--ombre-m)}
.tarif h3{font-size:1.14rem}
.tarif__prix{font-size:2.1rem;font-weight:900;color:var(--rouge);line-height:1;margin:10px 0 4px}
.tarif__prix small{font-size:.9rem;font-weight:700;color:var(--gris)}
.tarif ul{text-align:left;list-style:none;padding:0;margin:18px 0 0}
.tarif li{position:relative;padding-left:28px;font-size:.93rem;color:var(--gris)}
.tarif li::before{content:"✓";position:absolute;left:0;color:var(--rouge);font-weight:900}

/* ---------- 21. Blog ---------- */
.article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.86rem;color:var(--gris);margin-bottom:1.6em;align-items:center}
.article-meta span{display:inline-flex;align-items:center;gap:7px}
.article-meta svg{width:15px;height:15px;fill:var(--rouge)}
.article-hero{border-radius:var(--r-l);box-shadow:var(--ombre-m);margin-bottom:2em;width:100%;aspect-ratio:16/8;object-fit:cover}
.partage{display:flex;align-items:center;gap:12px;margin:2.5em 0;padding:20px 0;border-top:1px solid var(--bordure);border-bottom:1px solid var(--bordure)}
.partage b{font-size:.92rem}
.partage a{width:40px;height:40px;border-radius:50%;background:var(--rouge-pale);display:flex;align-items:center;justify-content:center;transition:var(--trans)}
.partage a:hover{background:var(--rouge);transform:translateY(-3px)}
.partage svg{width:18px;height:18px;fill:var(--rouge);transition:var(--trans)}
.partage a:hover svg{fill:#fff}
.auteur-bloc{display:flex;gap:18px;align-items:center;background:var(--gris-clair);border-radius:var(--r-l);padding:24px;margin:2.4em 0}
.auteur-bloc img{width:78px;height:78px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.auteur-bloc b{display:block;color:var(--encre)}
.auteur-bloc p{font-size:.92rem;color:var(--gris);margin:.4em 0 0}

/* ---------- 22. Formulaire ---------- */
.form-bloc{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-xl);padding:clamp(26px,3.6vw,44px);box-shadow:var(--ombre-m)}
.champ{margin-bottom:20px}
.champ label{display:block;font-weight:700;font-size:.93rem;color:var(--encre);margin-bottom:8px}
.champ label .req{color:var(--rouge)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:14px 16px;border:2px solid var(--bordure);border-radius:var(--r-s);font-family:inherit;font-size:1rem;
  color:var(--encre);background:#fff;transition:var(--trans)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--rouge);box-shadow:0 0 0 4px var(--rouge-pale)}
.champ textarea{min-height:150px;resize:vertical}
.champ--erreur input,.champ--erreur select,.champ--erreur textarea{border-color:var(--rouge);background:#FFF7F8}
.champ__erreur{display:none;color:var(--rouge);font-size:.85rem;font-weight:700;margin-top:6px}
.champ--erreur .champ__erreur{display:block}
.champ-ligne{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:var(--gris);line-height:1.55}
.case input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--rouge)}
.pot-de-miel{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.alerte{padding:16px 20px;border-radius:var(--r-s);margin-bottom:22px;font-weight:600;font-size:.95rem;display:flex;gap:12px;align-items:flex-start}
.alerte svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.alerte--ok{background:#E8F6EE;color:#125E37;border:1px solid #B6E2C9}
.alerte--ok svg{fill:#1B7F4B}
.alerte--ko{background:#FDECEE;color:#8A0C16;border:1px solid #F4C3C8}
.alerte--ko svg{fill:var(--rouge)}
.coord-bloc{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-m);padding:22px;box-shadow:var(--ombre-s)}
.coord-bloc__icone{width:48px;height:48px;flex:0 0 auto;border-radius:14px;background:var(--rouge-pale);display:flex;align-items:center;justify-content:center}
.coord-bloc__icone svg{width:23px;height:23px;fill:var(--rouge)}
.coord-bloc h3{font-size:1.02rem;margin-bottom:.25em}
.coord-bloc p{margin:0;font-size:.95rem;color:var(--gris)}
.coord-bloc a{font-weight:700}

/* ---------- 23. Pied de page ---------- */
.pied{background:var(--encre);color:#B8B2BC;padding-top:clamp(52px,6vw,78px);font-size:.94rem}
.pied h3{color:#fff;font-size:1.02rem;margin-bottom:1.1em;text-transform:uppercase;letter-spacing:.11em}
.pied a{color:#D6D1D9}
.pied strong,.pied b{color:#fff}
.pied__contact a strong{color:#fff;font-size:1.06rem;letter-spacing:.01em}
.pied__contact a:hover strong{color:var(--rouge-clair)}
.pied a:hover{color:var(--rouge-clair)}
.pied__grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:38px;padding-bottom:44px}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:9px}
.pied__logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.pied__logo svg{width:44px;height:44px}
.pied__logo b{color:#fff;font-size:1.24rem;font-weight:900;letter-spacing:-.03em;display:block;line-height:1.1}
.pied__logo span{font-size:.7rem;letter-spacing:.19em;color:var(--rouge-clair);font-weight:700;text-transform:uppercase}
.pied__contact li{display:flex;gap:11px;align-items:flex-start}
.pied__contact svg{width:17px;height:17px;fill:var(--rouge-clair);flex:0 0 auto;margin-top:4px}
.pied__carte{border-radius:var(--r-l);overflow:hidden;border:3px solid rgba(255,255,255,.1);box-shadow:0 18px 44px rgba(0,0,0,.45);
  position:relative;background:#221F26}
.pied__carte iframe{display:block;width:100%;height:290px;border:0;filter:grayscale(.35) contrast(1.06)}
.pied__carte-legende{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(120deg,var(--rouge-fonce),var(--rouge));color:#fff;font-size:.86rem;font-weight:700}
.pied__carte-legende span{display:inline-flex;align-items:center;gap:8px;min-width:0}
.pied__carte-legende svg{width:16px;height:16px;flex:0 0 auto;fill:#fff}
.pied__carte-legende a{color:#fff;text-decoration:underline}
.pied__bas{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;flex-wrap:wrap;gap:12px 26px;
  align-items:center;justify-content:space-between;font-size:.85rem}
.pied__bas ul{display:flex;flex-wrap:wrap;gap:8px 20px}
.pied__villes{padding:26px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;line-height:2}
.pied__villes b{color:#fff;display:block;margin-bottom:6px}
.pied__villes a{color:#9F99A4}
.pied__villes a:hover{color:var(--rouge-clair)}

/* ---------- 24. Barre mobile + retour haut ---------- */
.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;background:#fff;border-top:1px solid var(--bordure);
  box-shadow:0 -6px 24px rgba(0,0,0,.12);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:10px}
.barre-mobile a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:var(--r-s);
  font-size:.74rem;font-weight:800;color:var(--encre-2)}
.barre-mobile a svg{width:21px;height:21px;fill:var(--rouge)}
.barre-mobile a.est-primaire{background:var(--rouge);color:#fff}
.barre-mobile a.est-primaire svg{fill:#fff}
.haut{position:fixed;right:20px;bottom:24px;z-index:870;width:48px;height:48px;border-radius:50%;background:var(--rouge);
  border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--ombre-rouge);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:var(--trans)}
.haut.est-visible{opacity:1;visibility:visible;transform:translateY(0)}
.haut svg{width:20px;height:20px;fill:#fff}

/* ---------- 25. Animations ---------- */
.js .anim{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .anim.est-visible{opacity:1;transform:none}

/* ---------- 26. Responsive ---------- */
@media(max-width:1080px){
  .pied__grille{grid-template-columns:1fr 1fr;gap:32px}
  .grille--4{grid-template-columns:repeat(2,1fr)}
  .deux-col{grid-template-columns:1fr}
  .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .bloc-aside{flex:1 1 300px}
}
@media(max-width:960px){
  .burger{display:block}
  /* backdrop-filter fait de l'en-tête le bloc conteneur des éléments
     position:fixed : le panneau de navigation restait enfermé dans
     la hauteur du header. On le neutralise en dessous de 960 px. */
  .entete{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .nav{position:fixed;inset:0 0 0 auto;width:min(88vw,340px);background:#fff;flex-direction:column;align-items:stretch;
    padding:96px 20px 40px;box-shadow:-18px 0 50px rgba(0,0,0,.2);transform:translateX(100%);transition:transform var(--trans);
    overflow-y:auto;z-index:940;gap:2px}
  .nav.est-ouvert{transform:translateX(0)}
  .nav__fermer{display:flex}
  .nav a{padding:13px 14px;font-size:1.02rem;border-bottom:1px solid var(--bordure);border-radius:0}
  .nav__sous{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0}
  .nav__sous a{font-size:.94rem;color:var(--gris)}
  .voile{position:fixed;inset:0;background:rgba(23,21,26,.55);z-index:890;opacity:0;visibility:hidden;transition:var(--trans)}
  .voile.est-visible{opacity:1;visibility:visible}
  .entete__cta .tel-entete span{display:none}
  .heros__grille{grid-template-columns:1fr}
  .heros__media{order:-1}
  .heros__vignette{left:12px;bottom:-18px}
  .grille--3{grid-template-columns:repeat(2,1fr)}
  body{padding-bottom:72px}
  .barre-mobile{display:flex}
  .haut{bottom:88px;right:14px}
}
@media(max-width:760px){
  .topbar{font-size:.8rem;padding:7px 0}
  .topbar__in{justify-content:center;gap:6px 14px}
  .topbar__items:first-child .topbar__item:first-child{display:none}
  .logo__nom{font-size:1.22rem}
  .logo__sous{font-size:.6rem;letter-spacing:.13em;white-space:nowrap}
  .logo__icone{width:40px;height:40px}
  .entete__in{min-height:70px;gap:10px}
  .heros__media img{aspect-ratio:16/10}
  .heros{padding-top:34px}
  .heros__grille{gap:26px}
}
@media(max-width:680px){
  body{font-size:16.5px}
  .grille--2,.grille--3,.grille--4{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr}
  .champ-ligne{grid-template-columns:1fr}
  .sommaire ol{columns:1}
  .cta-bande__in{flex-direction:column;text-align:center}
  .cta-bande__actions{justify-content:center;width:100%}
  .btn{width:100%}
  .heros__actions{flex-direction:column}
  .container{padding-inline:18px}
  .heros__vignette{position:static;margin-top:16px;max-width:100%}
  .auteur-bloc{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .anim{opacity:1;transform:none}
}
@media print{
  .entete,.topbar,.barre-mobile,.haut,.cta-bande,.pied__carte{display:none!important}
  body{font-size:12pt;color:#000}
}