/* ==========================================================================
   RENE COUVERTURE — Couvreur Zingueur Étanchéité — Bouches-du-Rhône (13)
   Feuille de style principale
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --noir:#08090B;
  --noir-2:#0C0E11;
  --surface:#121519;
  --surface-2:#181C21;
  --ligne:#252A31;
  --ligne-clair:#333941;

  --orange:#FF6A00;
  --orange-2:#FF9A3C;
  --orange-3:#FFC178;
  --orange-glow:rgba(255,106,0,.45);

  --chrome:#C9D0D8;
  --chrome-2:#8E979F;
  --blanc:#F4F7FA;
  --gris:#8C959F;
  --gris-2:#5E666E;

  --ok:#3FD07F;
  --alerte:#FFC53D;

  --display:"Archivo","Arial Black",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;

  --max:1280px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --r:14px;
  --r-lg:22px;

  --t-fast:.22s cubic-bezier(.22,1,.36,1);
  --t:.42s cubic-bezier(.22,1,.36,1);
  --t-slow:.9s cubic-bezier(.22,1,.36,1);

  --ombre:0 24px 60px -20px rgba(0,0,0,.85);
  --ombre-orange:0 18px 50px -18px rgba(255,106,0,.55);
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--noir);
  color:var(--blanc);
  line-height:1.65;
  font-size:clamp(15.5px,.35vw + 14.6px,17px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

/* ---------- 3. Typographie ---------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  font-stretch:112%;
  line-height:1.03;
  letter-spacing:-.022em;
  text-transform:uppercase;
}
h1{font-size:clamp(2.5rem,6.6vw,5.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.6rem);letter-spacing:-.01em}
h4{font-size:1.05rem;font-stretch:105%}
p{color:#C4CBD3}
strong{color:var(--blanc);font-weight:600}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";width:34px;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange));
}
.eyebrow--centre{justify-content:center}
.eyebrow--centre::after{
  content:"";width:34px;height:2px;
  background:linear-gradient(90deg,var(--orange),transparent);
}

.chrome{
  background:linear-gradient(175deg,#fff 4%,#C9D0D8 32%,#6E767E 52%,#E6ECF2 68%,#9AA3AB 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.feu{
  background:linear-gradient(178deg,#FFD9A8 2%,var(--orange-2) 26%,var(--orange) 60%,#C93F00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap{width:min(100% - var(--pad)*2,var(--max));margin-inline:auto}
.section{padding-block:clamp(4.5rem,9vw,8.5rem);position:relative}
.section--serre{padding-block:clamp(3rem,5vw,4.5rem)}
.tete{max-width:62ch;margin-bottom:clamp(2.5rem,4vw,4rem)}
.tete--centre{margin-inline:auto;text-align:center}
.tete p{margin-top:1.1rem;font-size:1.06rem}
.tete h2{margin-top:1rem}

/* fond sections alternées */
.fond-surface{background:linear-gradient(180deg,var(--noir) 0%,var(--noir-2) 50%,var(--noir) 100%)}
.fond-tuile{position:relative;isolation:isolate}
.fond-tuile::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.022) 46px 47px),
    repeating-linear-gradient(65deg,transparent 0 46px,rgba(255,255,255,.018) 46px 47px);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}

/* rayons orange ambiants */
.lueur{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.lueur--o{background:radial-gradient(circle,rgba(255,106,0,.28),transparent 70%)}
.lueur--c{background:radial-gradient(circle,rgba(180,200,220,.10),transparent 70%)}

/* ---------- 5. Boutons --------------------------------------------------- */
.btn{
  --bg:var(--orange);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.05rem 1.9rem;border-radius:60px;
  font-family:var(--display);font-weight:800;font-stretch:108%;
  font-size:.94rem;letter-spacing:.04em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast),box-shadow var(--t-fast),color var(--t-fast);
  will-change:transform;
}
.btn svg{width:19px;height:19px;flex:none}
.btn--feu{
  background:linear-gradient(135deg,var(--orange-2),var(--orange) 55%,#D94F00);
  color:#160800;box-shadow:var(--ombre-orange);
}
.btn--feu::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,#FFD9A8,var(--orange-2));
  opacity:0;transition:opacity var(--t-fast);
}
.btn--feu:hover::after{opacity:1}
.btn--feu:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 26px 60px -16px rgba(255,106,0,.75)}

.btn--chrome{
  background:linear-gradient(160deg,#EDF1F5,#B8C1C9 45%,#8A939B 55%,#DDE4EA);
  color:#0B0D10;
}
.btn--chrome:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 22px 50px -18px rgba(200,215,230,.5)}

.btn--fantome{
  border:1.5px solid var(--ligne-clair);color:var(--blanc);
  background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
}
.btn--fantome::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);
  transform:translateY(101%);transition:transform var(--t);
}
.btn--fantome:hover{color:#160800;border-color:var(--orange)}
.btn--fantome:hover::after{transform:translateY(0)}

.btn--sm{padding:.72rem 1.3rem;font-size:.82rem}
.btn--bloc{width:100%}

/* pulsation du bouton d'appel */
.pulse{position:relative}
.pulse::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:2px solid var(--orange);animation:pulse 2.6s ease-out infinite;pointer-events:none;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(1.18);opacity:0}
  100%{opacity:0}
}

/* ---------- 6. Barre de progression ------------------------------------- */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--orange),var(--orange-3));
  box-shadow:0 0 14px var(--orange-glow);transition:width .1s linear;
}

/* ---------- 7. Bandeau défilant ----------------------------------------- */
.bandeau{
  background:linear-gradient(90deg,#160800,#2A1000 20%,#160800 50%,#2A1000 80%,#160800);
  border-bottom:1px solid rgba(255,106,0,.28);
  overflow:hidden;position:relative;z-index:60;
}
.bandeau__piste{display:flex;width:max-content;animation:defile 34s linear infinite}
.bandeau:hover .bandeau__piste{animation-play-state:paused}
.bandeau__grp{display:flex;align-items:center;flex:none}
.bandeau__item{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem 1.6rem;white-space:nowrap;
  font-family:var(--mono);font-size:.73rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#FFD3AC;
}
.bandeau__item svg{width:15px;height:15px;color:var(--orange)}
.bandeau__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);margin-left:1.1rem}
@keyframes defile{to{transform:translateX(-50%)}}

/* bande partenaires / garanties */
.bande-garanties{
  border-block:1px solid var(--ligne);background:var(--noir-2);
  overflow:hidden;padding-block:1.4rem;
}
.bande-garanties__piste{display:flex;width:max-content;animation:defile 46s linear infinite}
.bande-garanties__item{
  display:flex;align-items:center;gap:.85rem;padding-inline:2.6rem;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-stretch:106%;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.02em;color:var(--chrome-2);
  transition:color var(--t-fast);
}
.bande-garanties__item:hover{color:var(--orange)}
.bande-garanties__item svg{width:26px;height:26px;color:var(--orange);flex:none}

/* ---------- 8. En-tête --------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:100;
  transition:background var(--t),border-color var(--t),backdrop-filter var(--t);
  border-bottom:1px solid transparent;
}
.entete.colle{
  background:rgba(8,9,11,.86);backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--ligne);
}
.entete__in{display:flex;align-items:center;gap:1.6rem;padding-block:.85rem}
.logo{display:flex;align-items:center;flex:none;transition:transform var(--t-fast)}
.logo:hover{transform:scale(1.035)}
.logo img{height:clamp(46px,5.2vw,64px);width:auto;filter:drop-shadow(0 4px 18px rgba(255,106,0,.28))}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{
  position:relative;padding:.7rem .95rem;border-radius:9px;
  font-size:.87rem;font-weight:600;letter-spacing:.01em;color:#B7BFC7;
  transition:color var(--t-fast),background var(--t-fast);
}
.nav a::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.42rem;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-3));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
.nav a:hover,.nav a.actif{color:var(--blanc);background:rgba(255,255,255,.045)}
.nav a:hover::after,.nav a.actif::after{transform:scaleX(1)}

.entete__actions{display:flex;align-items:center;gap:.6rem;flex:none}
.tel-entete{
  display:flex;align-items:center;gap:.7rem;padding:.55rem .95rem;border-radius:12px;
  border:1px solid var(--ligne);transition:border-color var(--t-fast),background var(--t-fast);
}
.tel-entete:hover{border-color:var(--orange);background:rgba(255,106,0,.08)}
.tel-entete svg{width:20px;height:20px;color:var(--orange)}
.tel-entete b{font-family:var(--mono);font-size:.92rem;letter-spacing:.02em;display:block}
.tel-entete span{font-size:.68rem;color:var(--gris);letter-spacing:.06em;text-transform:uppercase}

.burger{display:none;width:46px;height:46px;border:1px solid var(--ligne);border-radius:12px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:20px;height:2px;background:var(--blanc);transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 9. Hero ------------------------------------------------------ */
.hero{position:relative;min-height:min(100svh,880px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__diapos{position:absolute;inset:0;z-index:-2}
.hero__diapo{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transition:opacity 1.6s ease;
  animation:kenburns 16s ease-in-out infinite alternate;
}
.hero__diapo.on{opacity:1}
@keyframes kenburns{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.19) translate3d(-1.6%,-1.4%,0)}}
.hero__voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,9,11,.93) 0%,rgba(8,9,11,.74) 40%,rgba(8,9,11,.24) 70%,rgba(8,9,11,.55) 100%),
    linear-gradient(180deg,rgba(8,9,11,.82) 0%,transparent 34%,rgba(8,9,11,.92) 100%),
    repeating-linear-gradient(115deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px);
}
.hero__in{padding-block:clamp(4rem,10vw,7rem);width:100%;position:relative;z-index:2}
.hero__contenu{max-width:44rem}
.hero h1{margin:1.4rem 0 0}
.hero h1 .ligne{display:block;overflow:hidden}
.hero h1 .ligne>span{display:block;transform:translateY(105%);opacity:0;animation:monte .95s cubic-bezier(.22,1,.36,1) forwards}
.hero h1 .ligne:nth-child(1)>span{animation-delay:.15s}
.hero h1 .ligne:nth-child(2)>span{animation-delay:.28s}
.hero h1 .ligne:nth-child(3)>span{animation-delay:.41s}
@keyframes monte{to{transform:translateY(0);opacity:1}}

.hero__accroche{
  margin-top:1.5rem;font-size:clamp(1.02rem,1.2vw,1.18rem);max-width:38rem;color:#CBD2DA;
  opacity:0;animation:fade .8s .62s forwards;
}
@keyframes fade{to{opacity:1}}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem;opacity:0;animation:fade .8s .76s forwards}
.hero__confiance{
  display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;margin-top:2.4rem;
  padding-top:1.7rem;border-top:1px solid var(--ligne);
  opacity:0;animation:fade .8s .9s forwards;
}
.hero__confiance li{display:flex;align-items:center;gap:.55rem;font-size:.83rem;color:#AEB6BE;font-weight:500}
.hero__confiance svg{width:17px;height:17px;color:var(--orange);flex:none}

.hero__scroll{
  position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-2);
}
.hero__souris{width:24px;height:38px;border:1.5px solid var(--ligne-clair);border-radius:14px;position:relative}
.hero__souris::after{
  content:"";position:absolute;left:50%;top:7px;translate:-50% 0;
  width:3px;height:7px;border-radius:2px;background:var(--orange);
  animation:molette 1.9s ease-in-out infinite;
}
@keyframes molette{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(13px);opacity:.15}}

/* points de progression du hero */
.hero__points{position:absolute;right:var(--pad);bottom:2.2rem;z-index:3;display:flex;flex-direction:column;gap:.7rem}
.hero__points button{
  width:3px;height:30px;border-radius:3px;background:rgba(255,255,255,.2);
  transition:background var(--t-fast),height var(--t-fast);
}
.hero__points button[aria-current="true"]{background:var(--orange);height:46px;box-shadow:0 0 14px var(--orange-glow)}

/* météo flottante dans le hero */
.meteo-mini{
  position:absolute;right:var(--pad);top:clamp(6rem,14vh,9rem);z-index:3;
  width:min(280px,80vw);padding:1.1rem 1.25rem;border-radius:var(--r-lg);
  background:rgba(18,21,25,.72);backdrop-filter:blur(20px);
  border:1px solid var(--ligne);box-shadow:var(--ombre);
  opacity:0;animation:fade .9s 1.1s forwards;
}
.meteo-mini__tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.meteo-mini__tete span{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.meteo-mini__temp{font-family:var(--display);font-size:2.4rem;font-weight:800;line-height:1}
.meteo-mini__corps{display:flex;align-items:center;gap:.9rem}
.meteo-mini__icone{width:46px;height:46px;color:var(--orange);flex:none}
.meteo-mini__desc{font-size:.8rem;color:#B7BFC7}
.meteo-mini__verdict{
  margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--ligne);
  display:flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:600;
}
.pastille{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 10px currentColor}
.pastille--ok{background:var(--ok);color:var(--ok)}
.pastille--moyen{background:var(--alerte);color:var(--alerte)}
.pastille--non{background:#FF5A47;color:#FF5A47}

/* ---------- 10. Stats ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);border-block:1px solid var(--ligne)}
.stat{background:var(--noir);padding:clamp(1.8rem,3vw,2.8rem) 1.4rem;text-align:center;position:relative;overflow:hidden;transition:background var(--t)}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform var(--t)}
.stat:hover{background:var(--surface)}
.stat:hover::after{transform:scaleX(1)}
.stat__n{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;line-height:1;display:block}
.stat__l{margin-top:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

/* ---------- 11. Cartes services ------------------------------------------ */
.grille-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.service{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  border:1px solid var(--ligne);background:var(--surface);
  min-height:min(30rem,62vh);display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
  will-change:transform;
}
.service__img{position:absolute;inset:0;z-index:-2;object-fit:cover;width:100%;height:100%;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter var(--t);filter:grayscale(.4) brightness(.68)}
.service::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,9,11,.15) 0%,rgba(8,9,11,.7) 45%,rgba(8,9,11,.97) 100%);
}
.service::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity var(--t);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,106,0,.22),transparent 65%);
}
.service:hover{transform:translateY(-8px);border-color:rgba(255,106,0,.55);box-shadow:0 34px 70px -28px rgba(255,106,0,.4)}
.service:hover::after{opacity:1}
.service:hover .service__img{transform:scale(1.09);filter:grayscale(0) brightness(.85)}
.service__corps{padding:clamp(1.5rem,2.4vw,2.1rem);position:relative}
.service__num{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--orange);
  display:block;margin-bottom:.9rem;
}
.service h3{margin-bottom:.8rem}
.service p{font-size:.92rem;color:#B7BFC7}
.service__liste{margin-top:1.2rem;display:grid;gap:.45rem;
  max-height:0;overflow:hidden;opacity:0;transition:max-height var(--t-slow),opacity var(--t),margin var(--t)}
.service:hover .service__liste,.service:focus-within .service__liste{max-height:22rem;opacity:1}
.service__liste li{display:flex;gap:.6rem;font-size:.85rem;color:#AEB6BE}
.service__liste svg{width:15px;height:15px;color:var(--orange);flex:none;margin-top:.35rem}
.service__lien{
  margin-top:1.4rem;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--orange);
}
.service__lien svg{width:17px;height:17px;transition:transform var(--t-fast)}
.service:hover .service__lien svg{transform:translateX(6px)}
.service__lien::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* prestations secondaires */
.grille-plus{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1px;background:var(--ligne);
  border:1px solid var(--ligne);border-radius:var(--r-lg);overflow:hidden;margin-top:1.3rem}
.plus{background:var(--surface);padding:1.6rem 1.5rem;transition:background var(--t-fast);position:relative}
.plus:hover{background:var(--surface-2)}
.plus svg{width:26px;height:26px;color:var(--orange);margin-bottom:.9rem;transition:transform var(--t)}
.plus:hover svg{transform:translateY(-4px) rotate(-6deg)}
.plus h4{margin-bottom:.35rem}
.plus p{font-size:.85rem}

/* ---------- 12. Avant / Après -------------------------------------------- */
.aa{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ligne);
  aspect-ratio:16/10;max-height:min(72vh,620px);cursor:ew-resize;user-select:none;touch-action:pan-y;background:var(--surface)}
.aa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.aa__apres{clip-path:inset(0 0 0 50%)}
.aa__poignee{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--orange);
  box-shadow:0 0 24px var(--orange-glow);z-index:3;pointer-events:none}
.aa__bouton{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));
  display:grid;place-items:center;color:#160800;
  box-shadow:0 0 0 5px rgba(8,9,11,.6),0 12px 34px -8px rgba(255,106,0,.8);
}
.aa__bouton svg{width:24px;height:24px}
.aa__etiq{
  position:absolute;top:1rem;z-index:2;padding:.4rem .9rem;border-radius:60px;
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(8,9,11,.78);backdrop-filter:blur(8px);border:1px solid var(--ligne);
}
.aa__etiq--a{left:1rem;color:var(--chrome)}
.aa__etiq--b{right:1rem;color:var(--orange);border-color:rgba(255,106,0,.4)}

.aa-bloc{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.aa-onglets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.aa-onglets button{
  padding:.6rem 1.15rem;border-radius:60px;border:1px solid var(--ligne);
  font-size:.83rem;font-weight:600;color:#AEB6BE;transition:all var(--t-fast);
}
.aa-onglets button:hover{border-color:var(--orange);color:var(--blanc)}
.aa-onglets button[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:#160800}

/* ---------- 13. Bandeau urgence ------------------------------------------ */
.urgence{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid rgba(255,106,0,.35);
  background:linear-gradient(120deg,#1A0A00,#2B1200 45%,#12060A);
  padding:clamp(2rem,4vw,3.2rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
}
.urgence::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent 0 22px,rgba(255,106,0,.045) 22px 44px);
  animation:rayures 2.4s linear infinite;
}
@keyframes rayures{to{transform:translateX(44px)}}
.urgence>*{position:relative}
.urgence__ping{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.9rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#FF9A3C;
}
.urgence__ping i{width:9px;height:9px;border-radius:50%;background:#FF3B2F;animation:clignote 1.3s ease-in-out infinite}
@keyframes clignote{50%{opacity:.2;transform:scale(.75)}}
.urgence h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.urgence p{margin-top:.7rem;max-width:46ch}

/* ---------- 14. Galerie -------------------------------------------------- */
.filtres{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filtres button{
  padding:.6rem 1.2rem;border-radius:60px;border:1px solid var(--ligne);
  font-size:.83rem;font-weight:600;color:#AEB6BE;transition:all var(--t-fast);
}
.filtres button:hover{border-color:var(--orange);color:var(--blanc);transform:translateY(-2px)}
.filtres button[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#160800}

.galerie{columns:3;column-gap:1rem}
.galerie figure{
  break-inside:avoid;margin-bottom:1rem;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--ligne);cursor:zoom-in;
  transition:transform var(--t),border-color var(--t),opacity .35s,filter .35s;
}
.galerie figure img{width:100%;transition:transform 1s cubic-bezier(.22,1,.36,1),filter var(--t);filter:brightness(.82)}
.galerie figure:hover{transform:translateY(-5px);border-color:rgba(255,106,0,.55)}
.galerie figure:hover img{transform:scale(1.07);filter:brightness(1)}
.galerie figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.6rem 1rem .9rem;
  background:linear-gradient(transparent,rgba(8,9,11,.94));
  font-size:.82rem;font-weight:500;
  transform:translateY(12px);opacity:0;transition:all var(--t);
}
.galerie figure:hover figcaption{transform:none;opacity:1}
.galerie figure.cache{display:none}
.galerie__cat{
  position:absolute;top:.7rem;left:.7rem;padding:.28rem .7rem;border-radius:60px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,106,0,.9);color:#160800;font-weight:700;
  opacity:0;transform:translateY(-8px);transition:all var(--t);
}
.galerie figure:hover .galerie__cat{opacity:1;transform:none}

.galerie-plus{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin-top:2.4rem}
.galerie-plus .btn svg{transition:transform var(--t)}
.galerie-plus .btn.replie svg{transform:rotate(180deg)}
.galerie-compte{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-2);
}

/* carte de renvoi vers la fiche Google */
.avis--google{
  background:linear-gradient(160deg,#1B0A00,#241000 60%,#140704);
  border-color:rgba(255,106,0,.35);align-items:flex-start;
}
.avis--google blockquote{color:#D6DCE3}
.avis-piste--vide{justify-content:center}
.avis-piste--vide .avis{flex:0 0 min(30rem,90vw)}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(4,5,6,.96);backdrop-filter:blur(14px);padding:var(--pad);
}
.lightbox.on{display:grid;animation:fade .3s}
.lightbox img{max-width:min(94vw,1200px);max-height:82vh;border-radius:var(--r);box-shadow:var(--ombre)}
.lightbox__leg{margin-top:1rem;text-align:center;font-size:.9rem;color:#B7BFC7}
.lightbox__x,.lightbox__nav{
  position:absolute;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--ligne);background:rgba(18,21,25,.8);
  display:grid;place-items:center;transition:all var(--t-fast);
}
.lightbox__x:hover,.lightbox__nav:hover{background:var(--orange);color:#160800;border-color:var(--orange)}
.lightbox__x{top:1.4rem;right:1.4rem}
.lightbox__nav svg,.lightbox__x svg{width:22px;height:22px}
.lightbox__nav--p{left:1.4rem;top:50%;translate:0 -50%}
.lightbox__nav--s{right:1.4rem;top:50%;translate:0 -50%}

/* ---------- 15. Carte du 13 (élément signature) -------------------------- */
.zone{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.carte13{position:relative}
.carte13 svg{width:100%;height:auto;overflow:visible}
.carte13__dep{
  fill:rgba(255,106,0,.055);
  stroke:var(--orange);stroke-width:2.4;stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(255,106,0,.55));
}
.carte13__trace{
  fill:none;stroke:var(--orange-3);stroke-width:2.4;
  stroke-dasharray:2600;stroke-dashoffset:2600;
}
.vu .carte13__trace{animation:trace 3.4s cubic-bezier(.65,0,.35,1) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.carte13__berre{fill:#0B1218;stroke:rgba(255,106,0,.5);stroke-width:1.6}
.carte13__grille{stroke:rgba(255,255,255,.05);stroke-width:1}

.ville{cursor:pointer}
.ville circle.pt{fill:var(--orange);transition:r var(--t-fast),fill var(--t-fast)}
.ville circle.halo{fill:var(--orange);opacity:.28;transform-origin:center;animation:onde 3s ease-out infinite}
.ville:nth-child(2n) circle.halo{animation-delay:.6s}
.ville:nth-child(3n) circle.halo{animation-delay:1.2s}
@keyframes onde{0%{transform:scale(.6);opacity:.45}100%{transform:scale(3.4);opacity:0}}
.ville text{
  fill:var(--chrome);font-family:var(--mono);font-size:16px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;transition:fill var(--t-fast);
  paint-order:stroke;stroke:rgba(8,9,11,.85);stroke-width:5px;stroke-linejoin:round;
}
.ville:hover circle.pt{r:11;fill:#fff}
.ville:hover text{fill:#fff}
.ville--base circle.pt{fill:#fff;r:9}
.ville--base text{fill:#fff;font-size:17px}

.carte13__legende{
  position:absolute;left:0;bottom:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.carte13__legende i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.45rem}

/* vérificateur */
.verif{
  border:1px solid var(--ligne);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(1.6rem,3vw,2.4rem);position:relative;overflow:hidden;
}
.verif::before{
  content:"";position:absolute;top:-60%;right:-30%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,0,.18),transparent 70%);pointer-events:none;
}
.verif__champ{position:relative;margin-top:1.4rem}
.verif__champ input{
  width:100%;padding:1.15rem 3.6rem 1.15rem 1.25rem;border-radius:14px;
  background:var(--noir);border:1.5px solid var(--ligne);color:var(--blanc);
  font-family:var(--mono);font-size:1rem;letter-spacing:.04em;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.verif__champ input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,106,0,.14)}
.verif__champ input::placeholder{color:var(--gris-2);letter-spacing:.02em}
.verif__champ button{
  position:absolute;right:.5rem;top:50%;translate:0 -50%;
  width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:var(--orange);color:#160800;transition:transform var(--t-fast),background var(--t-fast);
}
.verif__champ button:hover{transform:scale(1.06);background:var(--orange-2)}
.verif__champ button svg{width:20px;height:20px}

.suggest{
  position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:20;
  background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;
  max-height:15rem;overflow:auto;box-shadow:var(--ombre);
}
.suggest:empty{display:none}
.suggest li{padding:.7rem 1.1rem;cursor:pointer;font-size:.9rem;display:flex;justify-content:space-between;gap:1rem;
  transition:background var(--t-fast)}
.suggest li:hover,.suggest li.sel{background:rgba(255,106,0,.13);color:var(--blanc)}
.suggest li span{font-family:var(--mono);font-size:.78rem;color:var(--gris)}

.verif__res{
  margin-top:1.2rem;padding:1.15rem 1.3rem;border-radius:14px;border:1px solid var(--ligne);
  background:var(--noir);display:none;gap:.9rem;align-items:flex-start;
}
.verif__res.on{display:flex;animation:monteDoux .45s cubic-bezier(.22,1,.36,1)}
@keyframes monteDoux{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.verif__res svg{width:26px;height:26px;flex:none;margin-top:.15rem}
.verif__res.ok{border-color:rgba(63,208,127,.45)}
.verif__res.ok svg{color:var(--ok)}
.verif__res.non{border-color:rgba(255,197,61,.45)}
.verif__res.non svg{color:var(--alerte)}
.verif__res b{display:block;margin-bottom:.2rem}
.verif__res p{font-size:.87rem}
.verif__res a{color:var(--orange);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- 16. Estimateur ----------------------------------------------- */
.estim{
  border:1px solid var(--ligne);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1.1fr .9fr;
}
.estim__form{padding:clamp(1.6rem,3vw,2.6rem);background:var(--surface)}
.estim__res{
  padding:clamp(1.6rem,3vw,2.6rem);
  background:linear-gradient(160deg,#1B0A00,#2A1000 55%,#140704);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;
}
.estim__res::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 40px,rgba(255,106,0,.05) 40px 41px);
}
.estim__res>*{position:relative}
.champ{margin-bottom:1.3rem}
.champ label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.6rem}
.puces{display:flex;flex-wrap:wrap;gap:.5rem}
.puces input{position:absolute;opacity:0;width:0;height:0}
.puces label{
  padding:.62rem 1.05rem;border-radius:60px;border:1px solid var(--ligne);cursor:pointer;
  font-family:var(--body);font-size:.84rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:#AEB6BE;margin:0;transition:all var(--t-fast);
}
.puces label:hover{border-color:var(--orange);color:var(--blanc);transform:translateY(-2px)}
.puces input:checked+label{background:var(--orange);border-color:var(--orange);color:#160800}
.puces input:focus-visible+label{outline:3px solid var(--orange);outline-offset:3px}

.slider-l{display:flex;align-items:center;gap:1rem}
.slider-l input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--orange) var(--p,30%),var(--ligne) var(--p,30%));
}
.slider-l input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));cursor:grab;
  box-shadow:0 4px 16px rgba(255,106,0,.6),0 0 0 4px rgba(8,9,11,.8);
}
.slider-l input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border:0;border-radius:50%;
  background:linear-gradient(135deg,var(--orange-2),var(--orange));cursor:grab;
  box-shadow:0 4px 16px rgba(255,106,0,.6),0 0 0 4px rgba(8,9,11,.8);
}
.slider-l output{
  font-family:var(--mono);font-weight:700;font-size:1rem;min-width:5.5rem;text-align:right;color:var(--orange);
}
.estim__prix{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:800;line-height:1.05}
.estim__note{font-size:.78rem;color:#9AA3AB;margin-top:1rem;line-height:1.55}

/* ---------- 17. Process -------------------------------------------------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;position:relative}
.etapes::before{
  content:"";position:absolute;top:34px;left:6%;right:6%;height:2px;
  background:linear-gradient(90deg,var(--orange),rgba(255,106,0,.15));
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.65,0,.35,1);
}
.etapes.vu::before{transform:scaleX(1)}
.etape{position:relative;text-align:center;padding-top:.4rem}
.etape__pastille{
  width:68px;height:68px;margin-inline:auto;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:var(--noir);border:2px solid var(--ligne);
  font-family:var(--display);font-size:1.35rem;font-weight:800;
  transition:all var(--t);
}
.etape:hover .etape__pastille{border-color:var(--orange);background:var(--orange);color:#160800;
  transform:scale(1.1) rotate(-6deg);box-shadow:0 0 34px var(--orange-glow)}
.etape h4{margin:1.2rem 0 .5rem}
.etape p{font-size:.87rem}

/* ---------- 18. Météo 7 jours -------------------------------------------- */
.meteo7{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--ligne);
  border:1px solid var(--ligne);border-radius:var(--r-lg);overflow:hidden}
.jour{background:var(--surface);padding:1.3rem .8rem;text-align:center;transition:background var(--t-fast)}
.jour:hover{background:var(--surface-2)}
.jour__d{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.jour svg{width:34px;height:34px;margin:.85rem auto;color:var(--orange)}
.jour__t{font-family:var(--display);font-size:1.25rem;font-weight:800}
.jour__t small{font-size:.78rem;color:var(--gris);font-weight:400;margin-left:.3rem}
.jour__i{margin-top:.75rem;font-size:.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;gap:.35rem}

/* ---------- 19. Avis ----------------------------------------------------- */
.avis-piste{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;scrollbar-width:none;cursor:grab}
.avis-piste::-webkit-scrollbar{display:none}
.avis-piste.drag{cursor:grabbing;scroll-snap-type:none}
.avis{
  flex:0 0 min(24rem,84vw);scroll-snap-align:center;
  border:1px solid var(--ligne);border-radius:var(--r-lg);background:var(--surface);
  padding:1.8rem;display:flex;flex-direction:column;gap:1rem;
  transition:border-color var(--t),transform var(--t),background var(--t);
}
.avis:hover{border-color:rgba(255,106,0,.5);transform:translateY(-5px);background:var(--surface-2)}
.etoiles{display:flex;gap:.15rem;color:var(--orange)}
.etoiles svg{width:17px;height:17px}
.avis blockquote{font-size:.94rem;color:#C4CBD3;flex:1}
.avis__auteur{display:flex;align-items:center;gap:.85rem;padding-top:1rem;border-top:1px solid var(--ligne)}
.avis__init{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),#B94E00);color:#160800;
  font-family:var(--display);font-weight:800;font-size:.95rem;
}
.avis__auteur b{display:block;font-size:.9rem}
.avis__auteur span{font-size:.76rem;color:var(--gris)}
.avis-nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.avis-nav button{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ligne);
  display:grid;place-items:center;transition:all var(--t-fast);
}
.avis-nav button:hover{background:var(--orange);color:#160800;border-color:var(--orange);transform:scale(1.06)}
.avis-nav svg{width:19px;height:19px}

/* ---------- 20. FAQ ------------------------------------------------------ */
.faq{border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:800;font-stretch:106%;
  text-transform:uppercase;letter-spacing:-.005em;transition:color var(--t-fast),padding-left var(--t-fast);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange);padding-left:.7rem}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;translate:0 -50%;
  width:26px;height:26px;
  background:
    linear-gradient(var(--orange),var(--orange)) center/2px 13px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/13px 2px no-repeat;
  transition:transform var(--t);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq__rep{padding:0 3rem 1.7rem 0;animation:monteDoux .38s ease}
.faq__rep p+p{margin-top:.8rem}

/* ---------- 21. Contact / formulaire ------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.form{
  border:1px solid var(--ligne);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(1.6rem,3vw,2.6rem);position:relative;overflow:hidden;
}
.form::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-3),transparent);
}
.form__grille{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form__grille .large{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris);margin-bottom:.5rem}
.form input,.form select,.form textarea{
  width:100%;padding:.92rem 1.05rem;border-radius:12px;
  background:var(--noir);border:1.5px solid var(--ligne);color:var(--blanc);font-size:.94rem;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form textarea{min-height:7.5rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,106,0,.13);
}
.form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--orange) 50%),linear-gradient(135deg,var(--orange) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.rgpd{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.1rem;font-size:.79rem;color:#9AA3AB}
.rgpd input{width:19px;height:19px;flex:none;accent-color:var(--orange);margin-top:.15rem}
.form__msg{margin-top:1rem;padding:.9rem 1.1rem;border-radius:12px;font-size:.87rem;display:none}
.form__msg.ok{display:block;background:rgba(63,208,127,.12);border:1px solid rgba(63,208,127,.4);color:#8FE7B8}
.form__msg.ko{display:block;background:rgba(255,90,71,.12);border:1px solid rgba(255,90,71,.4);color:#FFB3A8}

.coord{display:grid;gap:1px;background:var(--ligne);border:1px solid var(--ligne);
  border-radius:var(--r-lg);overflow:hidden;margin-top:1.6rem}
.coord a,.coord div{background:var(--surface);padding:1.3rem 1.4rem;display:flex;gap:1rem;align-items:center;
  transition:background var(--t-fast)}
.coord a:hover{background:var(--surface-2)}
.coord svg{width:22px;height:22px;color:var(--orange);flex:none}
.coord b{display:block;font-size:.95rem}
.coord span{font-size:.79rem;color:var(--gris)}

.plan{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ligne);margin-top:1.6rem;filter:grayscale(.4) contrast(1.1)}
.plan iframe{width:100%;height:300px;border:0;display:block}

/* ---------- 22. Pied de page --------------------------------------------- */
.pied{border-top:1px solid var(--ligne);background:var(--noir-2);padding-block:clamp(3rem,5vw,4.5rem) 0}
.pied__haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem}
.pied h4{font-size:.82rem;letter-spacing:.14em;color:var(--orange);font-family:var(--mono);
  font-weight:700;text-transform:uppercase;margin-bottom:1.2rem;font-stretch:normal}
.pied ul{display:grid;gap:.55rem}
.pied a{font-size:.87rem;color:#A5AEB6;transition:color var(--t-fast),padding-left var(--t-fast)}
.pied a:hover{color:var(--orange);padding-left:.35rem}
.pied img{height:64px;width:auto;margin-bottom:1.2rem}
.pied p{font-size:.87rem}
.villes-seo{display:flex;flex-wrap:wrap;gap:.4rem .55rem;margin-top:2.8rem;padding-top:2rem;border-top:1px solid var(--ligne)}
.villes-seo a{
  font-size:.76rem;color:#7C858D;padding:.3rem .7rem;border-radius:60px;border:1px solid var(--ligne);
  transition:all var(--t-fast);
}
.villes-seo a:hover{color:var(--orange);border-color:rgba(255,106,0,.5);padding-left:.7rem}
.pied__bas{
  margin-top:2.5rem;padding-block:1.5rem;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-size:.79rem;color:var(--gris-2);
}
.pied__bas nav{display:flex;gap:1.3rem;flex-wrap:wrap}

/* ---------- 23. Barre mobile & retour haut ------------------------------- */
.barre-mob{
  position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);
  border-top:1px solid var(--ligne);
}
.barre-mob a{
  padding:.95rem;display:flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
}
.barre-mob svg{width:18px;height:18px}
.barre-mob .m-tel{background:var(--orange);color:#160800}
.barre-mob .m-devis{background:var(--surface);color:var(--blanc)}

.haut{
  position:fixed;right:1.3rem;bottom:1.6rem;z-index:105;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--ligne);
  opacity:0;pointer-events:none;transition:all var(--t);
}
.haut.on{opacity:1;pointer-events:auto}
.haut:hover{background:var(--orange);color:#160800;border-color:var(--orange);transform:translateY(-4px)}
.haut svg{width:20px;height:20px}

/* ---------- 24. Révélations au scroll ------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
[data-reveal].vu{opacity:1;transform:none}
[data-reveal="gauche"]{transform:translateX(-40px)}
[data-reveal="droite"]{transform:translateX(40px)}
[data-reveal="zoom"]{transform:scale(.94)}
[data-reveal].vu{transform:none}

/* ---------- 25. Responsive ----------------------------------------------- */
@media (max-width:1100px){
  .grille-services{grid-template-columns:1fr 1fr}
  .service:first-child{grid-column:1/-1;min-height:24rem}
  .zone,.estim,.contact,.aa-bloc{grid-template-columns:1fr}
  .meteo7{grid-template-columns:repeat(4,1fr)}
  .jour:nth-child(n+5){border-top:1px solid var(--ligne)}
  .pied__haut{grid-template-columns:1fr 1fr}
  .galerie{columns:2}
  .carte13__legende{position:static;margin-top:1.2rem}
}
@media (max-width:900px){
  html,body{overflow-x:clip}
  .entete__in{gap:.6rem}
  .entete__actions .btn--feu{display:none}   /* doublon de la barre fixe du bas */
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(22rem,86vw);
    background:var(--noir-2);border-left:1px solid var(--ligne);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:6.5rem 1.5rem 2rem;gap:.3rem;
    transform:translateX(101%);transition:transform var(--t);
    box-shadow:-30px 0 70px rgba(0,0,0,.6);
  }
  .nav.on{transform:none}
  .nav a{padding:1rem;font-size:1rem;border-bottom:1px solid var(--ligne);border-radius:0}
  .nav a::after{display:none}
  .burger{display:flex}
  .tel-entete span{display:none}
  .tel-entete{padding:.5rem .8rem;gap:.5rem}
  .tel-entete b{font-size:.86rem}
  .stats{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .etapes::before{display:none}
  .urgence{grid-template-columns:1fr}
  .meteo-mini{position:static;width:100%;margin-top:2.2rem}
  .barre-mob{display:grid}
  body{padding-bottom:56px}
  .haut{bottom:5rem}
  .hero__points{display:none}
}
@media (max-width:640px){
  .logo img{height:44px}
  .tel-entete b{display:none}                /* icône seule, plus de débordement */
  .tel-entete{padding:.6rem}
  .grille-services{grid-template-columns:1fr}
  .service:first-child{grid-column:auto}
  .galerie{columns:1}
  .form__grille{grid-template-columns:1fr}
  .meteo7{grid-template-columns:repeat(2,1fr)}
  .jour:nth-child(n+3){border-top:1px solid var(--ligne)}
  .pied__haut{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .hero__confiance{gap:.5rem 1rem}
  h1{font-size:clamp(2.2rem,9vw,3rem)}
}

/* ---------- 26. Accessibilité / mouvement réduit ------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .hero__diapo{animation:none}
  .bandeau__piste,.bande-garanties__piste{animation:none}
}
.saut{position:absolute;left:-9999px;top:0;z-index:300;padding:1rem 1.6rem;background:var(--orange);color:#160800;font-weight:700}
.saut:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}