/* ==========================================================================
   M JEAN COUVREUR — Haute-Garonne (31)
   Feuille de style principale
   Palette : noir + chrome (identité du logo) — monochrome intégral
   ========================================================================== */

:root{
  /* Fonds */
  --noir:#08090C;
  --nuit:#0D0F14;
  --anthracite:#14171E;
  --carbone:#1B1F28;
  --carbone-2:#232833;

  /* Chrome (repris du logo) */
  --chrome-1:#FFFFFF;
  --chrome-2:#DDE4EE;
  --chrome-3:#93A0B4;
  --chrome-4:#5A6577;
  --metal:linear-gradient(177deg,#FFFFFF 0%,#E4EAF3 26%,#8C99AC 49%,#F2F6FB 62%,#C7D0DD 78%,#FFFFFF 100%);
  --metal-line:linear-gradient(90deg,transparent,#8C99AC 18%,#FFFFFF 50%,#8C99AC 82%,transparent);

  /* Accents */
  --bleu:#E9EEF6;          /* accent clair (ex-bleu) */
  --bleu-clair:#FFFFFF;
  --bleu-sombre:#2B3140;
  --brique:#8C99AC;        /* accent gris (ex-brique) */
  --brique-clair:#C7D0DD;
  --acc-txt:#08090C;       /* texte posé sur un aplat clair */

  /* Texte */
  --texte:#D9DFE9;
  --texte-doux:#8C97A9;
  --texte-faible:#66708045;

  /* Structure */
  --max:1240px;
  --gout:22px;
  --r-s:8px;
  --r-m:16px;
  --r-l:26px;
  --ombre:0 24px 60px -28px rgba(0,0,0,.9);
  --ombre-bleu:0 18px 50px -20px rgba(255,255,255,.28);

  --ease:cubic-bezier(.22,.68,.16,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;
  background:var(--noir);
  color:var(--texte);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:4px}
::selection{background:var(--chrome-1);color:var(--acc-txt)}

/* ---------- Typo ---------- */
h1,h2,h3,h4,.display{
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;line-height:.98;letter-spacing:.005em;
  text-transform:uppercase;color:var(--chrome-1);
}
h1{font-size:clamp(2.15rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.85rem,4.6vw,3.35rem)}
h3{font-size:clamp(1.2rem,2.1vw,1.6rem)}
h4{font-size:1.02rem;letter-spacing:.06em}
p{color:var(--texte-doux)}
strong{color:var(--chrome-2);font-weight:800}

.chrome{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}
.bleu{color:var(--bleu-clair);-webkit-text-fill-color:var(--bleu-clair)}
.brique{color:var(--brique-clair);-webkit-text-fill-color:var(--brique-clair)}

.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}

/* Eyebrow / label de section */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brique-clair);margin-bottom:1rem;
}
.eyebrow::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--brique),transparent)}
.eyebrow.b{color:var(--bleu-clair)}
.eyebrow.b::before{background:linear-gradient(90deg,var(--bleu),transparent)}

.lede{font-size:clamp(1rem,1.5vw,1.16rem);max-width:62ch;color:var(--texte-doux)}

/* ---------- Structure ---------- */
.wrap{width:min(100% - 2.4rem,var(--max));margin-inline:auto}
.sect{padding:clamp(3.6rem,8vw,7rem) 0;position:relative}
.sect--nuit{background:var(--nuit)}
.sect--anth{background:var(--anthracite)}
.sect-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sect-head.center{margin-inline:auto;text-align:center}
.sect-head.center .eyebrow{justify-content:center}

.grid{display:grid;gap:var(--gout)}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ---------- Séparateur "ligne de toit" (signature) ---------- */
.toitline{display:block;width:100%;height:26px;color:var(--chrome-4);opacity:.85}
.toitline svg{display:block;width:100%;height:100%}

/* ---------- Barre de progression de lecture ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--bleu),var(--chrome-1),var(--brique));
  box-shadow:0 0 14px rgba(255,255,255,.75);transition:width .1s linear}

/* ---------- Bandeau défilant ---------- */
.marquee{
  position:relative;overflow:hidden;background:var(--carbone);
  border-block:1px solid #ffffff12;padding:.62rem 0;
}
.marquee--top{background:linear-gradient(90deg,#0B0D12,#171B24 40%,#0B0D12);border-top:0}
.marquee__track{display:flex;width:max-content;animation:defile 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;flex:none}
.marquee__item{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-3)}
.marquee__item b{color:var(--chrome-1);font-weight:600}
.marquee__item .dot{width:6px;height:6px;border-radius:50%;background:var(--bleu);box-shadow:0 0 10px var(--bleu)}
.marquee__item .dot--o{background:var(--brique);box-shadow:0 0 10px var(--brique)}
@keyframes defile{to{transform:translateX(-50%)}}

.marquee--geant{background:var(--noir);padding:1.15rem 0;border-block:1px solid #ffffff10}
.marquee--geant .marquee__track{animation-duration:60s}
.marquee--geant .marquee__item{font-family:'Anton',sans-serif;font-size:clamp(1.5rem,3.4vw,2.7rem);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1px var(--chrome-4)}
.marquee--geant .marquee__item.plein{-webkit-text-stroke:0;background:var(--metal);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.marquee--geant .sep{color:var(--brique);font-size:1.4rem;-webkit-text-stroke:0}

/* ---------- En-tête ---------- */
.topbar{background:var(--noir);border-bottom:1px solid #ffffff0d;font-size:.78rem}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.topbar a{color:var(--texte-doux);display:inline-flex;align-items:center;gap:.4rem;transition:color .25s}
.topbar a:hover{color:var(--bleu-clair)}
.topbar__l{display:flex;gap:1.4rem;flex-wrap:wrap}
.topbar__r{display:flex;gap:1.1rem;align-items:center}
.pastille{display:inline-flex;align-items:center;gap:.45rem;color:var(--chrome-2)}
.pastille i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.entete{position:sticky;top:0;z-index:900;background:rgba(8,9,12,.72);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid #ffffff0f;transition:background .35s,box-shadow .35s,padding .35s}
.entete.compact{background:rgba(8,9,12,.94);box-shadow:0 14px 40px -22px #000}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.logo{display:flex;align-items:center;gap:.8rem;flex:none}
.logo img{width:auto;height:62px;mix-blend-mode:screen;transition:transform .5s var(--ease)}
.logo:hover img{transform:scale(1.05)}
.logo__txt{display:none;line-height:1.05}
.logo__txt b{font-family:'Anton',sans-serif;font-size:1.16rem;letter-spacing:.03em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo__txt span{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.24em;color:var(--brique-clair);text-transform:uppercase}
@media(min-width:520px){.logo__txt{display:block}}

/* Navigation */
.nav{display:none;align-items:center;gap:.15rem}
@media(min-width:1080px){.nav{display:flex}}
.nav a{position:relative;padding:.62rem .78rem;font-size:.87rem;font-weight:700;color:var(--texte-doux);
  border-radius:var(--r-s);transition:color .3s,background .3s}
.nav a::after{content:"";position:absolute;left:.78rem;right:.78rem;bottom:.38rem;height:2px;
  background:linear-gradient(90deg,var(--bleu),var(--brique));transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease-out)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--chrome-1);background:#ffffff08}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.nav__drop{position:relative}
.nav__drop>button{background:none;border:0;cursor:pointer;padding:.62rem .78rem;font-size:.87rem;font-weight:700;
  color:var(--texte-doux);display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--r-s);transition:color .3s,background .3s}
.nav__drop>button:hover{color:var(--chrome-1);background:#ffffff08}
.nav__drop>button svg{transition:transform .3s}
.nav__drop[data-open="1"]>button svg{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:290px;background:var(--carbone);
  border:1px solid #ffffff14;border-radius:var(--r-m);padding:.5rem;box-shadow:var(--ombre);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.3s var(--ease-out)}
.nav__drop[data-open="1"] .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{display:block;padding:.55rem .7rem;font-size:.85rem;border-radius:var(--r-s)}
.nav__menu a::after{display:none}
.nav__menu a:hover{background:#ffffff0d;color:var(--bleu-clair);transform:translateX(4px)}
.nav__menu .col2{columns:2;column-gap:.4rem}

/* Boutons */
.btn{
  --bg:var(--metal);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:var(--r-s);border:0;cursor:pointer;
  font-weight:800;font-size:.93rem;letter-spacing:.02em;
  background:var(--bg);color:var(--acc-txt);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s,filter .3s;
  box-shadow:0 10px 26px -14px rgba(255,255,255,.35);
}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,#ffffff5c 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .85s var(--ease-out)}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 38px -14px rgba(255,255,255,.4)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(-1px)}
.btn--tel{background:var(--chrome-1);color:var(--acc-txt);
  box-shadow:0 10px 26px -14px rgba(255,255,255,.55)}
.btn--tel:hover{box-shadow:0 18px 38px -14px rgba(255,255,255,.5)}
.btn--brique{background:transparent;color:var(--chrome-1);border:1px solid #ffffff3a;box-shadow:none}
.btn--brique:hover{background:#ffffff0f;border-color:var(--chrome-2);box-shadow:none}
.btn--ghost{background:transparent;border:1px solid #ffffff2a;color:var(--chrome-2);box-shadow:none}
.btn--ghost:hover{border-color:var(--chrome-3);background:#ffffff0a;box-shadow:none}
.btn--chrome{background:var(--metal);color:#0A0C10;box-shadow:0 12px 30px -16px #fff6}
.btn--lg{padding:1.12rem 2.05rem;font-size:1rem}
.btn--full{width:100%}
.btns{display:flex;gap:.85rem;flex-wrap:wrap}

.burger{display:grid;place-items:center;width:48px;height:48px;background:#ffffff0d;border:1px solid #ffffff1a;
  border-radius:var(--r-s);cursor:pointer}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;width:22px;height:2px;background:var(--chrome-2);position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--chrome-2);transition:.3s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:950;background:rgba(6,7,10,.97);backdrop-filter:blur(8px);
  padding:5.5rem 1.4rem 2rem;overflow-y:auto;opacity:0;visibility:hidden;transition:.35s var(--ease-out)}
.drawer.ouvert{opacity:1;visibility:visible}
.drawer__close{position:absolute;top:1.1rem;right:1.2rem;width:46px;height:46px;border-radius:var(--r-s);
  background:#ffffff0d;border:1px solid #ffffff1a;cursor:pointer;font-size:1.5rem;line-height:1}
.drawer nav{display:grid;gap:.15rem;max-width:520px;margin-inline:auto}
.drawer nav a{padding:.85rem .9rem;border-radius:var(--r-s);font-family:'Anton',sans-serif;font-size:1.24rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--chrome-2);border-bottom:1px solid #ffffff0d;
  transform:translateX(-16px);opacity:0}
.drawer.ouvert nav a{animation:entreeMenu .5s var(--ease-out) forwards}
@keyframes entreeMenu{to{transform:none;opacity:1}}
.drawer nav a:hover{background:#ffffff0d;color:var(--bleu-clair)}
.drawer nav .sous{font-family:'Manrope',sans-serif;font-size:.92rem;text-transform:none;padding-left:1.9rem;font-weight:600}
.drawer__cta{max-width:520px;margin:1.6rem auto 0;display:grid;gap:.7rem}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:clamp(600px,92svh,900px);display:flex;align-items:center;
  overflow:hidden;background:var(--noir);isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-3}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transform:scale(1.1);animation:zoomLent 26s var(--ease) infinite alternate}
@keyframes zoomLent{to{transform:scale(1.24) translate(-2.2%,-2.6%)}}
.hero__bg{will-change:transform}
.hero__voile{position:absolute;inset:-20% -40%;z-index:-2;pointer-events:none;
  background:linear-gradient(102deg,transparent 38%,rgba(255,255,255,.13) 47%,
             rgba(255,255,255,.03) 53%,transparent 62%);
  transform:translateX(-45%);animation:balaye 11s var(--ease) infinite}
@keyframes balaye{0%{transform:translateX(-45%)}55%,100%{transform:translateX(45%)}}
.hero__grain{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(5,7,11,.85) 100%)}
@media(prefers-reduced-motion:reduce){
  .hero__bg img{animation:none;transform:scale(1.04)}
  .hero__voile{animation:none;opacity:.35}
}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(96deg,#05070Bf2 0%,#05070Be0 36%,#05070B9e 60%,#05070B5c 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 85% at 12% 100%,rgba(255,255,255,.22),transparent 58%),
             radial-gradient(90% 70% at 92% 8%,rgba(255,255,255,.2),transparent 60%)}
.hero__in{padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,7vh,5rem)}
.hero__grid{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:center;grid-template-columns:1fr}
@media(min-width:1000px){.hero__grid{grid-template-columns:1.15fr .85fr}}

.hero h1{margin:.4rem 0 1.1rem;text-shadow:0 6px 30px rgba(0,0,0,.7)}
.hero h1 .ligne{display:block;overflow:hidden}
.hero h1 .ligne>span{display:block;transform:translateY(105%);animation:monte .95s var(--ease-out) forwards}
.hero h1 .ligne:nth-child(2)>span{animation-delay:.12s}
.hero h1 .ligne:nth-child(3)>span{animation-delay:.24s}
@keyframes monte{to{transform:none}}
.hero__sub{max-width:56ch;font-size:clamp(1rem,1.6vw,1.18rem);opacity:0;animation:fadeUp .8s .42s var(--ease-out) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero .btns{margin-top:1.9rem;opacity:0;animation:fadeUp .8s .56s var(--ease-out) forwards}
.hero__badges{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.7rem;opacity:0;animation:fadeUp .8s .68s var(--ease-out) forwards}
.badge{display:inline-flex;align-items:center;gap:.42rem;padding:.4rem .82rem;border-radius:100px;
  background:#ffffff0d;border:1px solid #ffffff1c;font-size:.76rem;font-weight:700;color:var(--chrome-2)}
.badge svg{width:14px;height:14px;color:var(--bleu-clair)}

/* Mot qui tourne */
.rotor{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1em}
.rotor span{grid-area:1/1;opacity:0;transform:translateY(60%);transition:.55s var(--ease-out);
  background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rotor span.on{opacity:1;transform:none}
.rotor span.off{opacity:0;transform:translateY(-60%)}

/* Carte flottante du hero */
.hero__carte{background:linear-gradient(160deg,rgba(27,31,40,.9),rgba(11,13,18,.94));
  border:1px solid #ffffff18;border-radius:var(--r-l);padding:1.5rem;box-shadow:var(--ombre);
  backdrop-filter:blur(12px);opacity:0;animation:fadeUp .9s .5s var(--ease-out) forwards;position:relative;overflow:hidden}
.hero__carte::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--metal-line)}
.hero__carte h2{font-size:1.28rem;margin-bottom:.3rem}
.hero__carte .mini{font-size:.82rem;color:var(--texte-doux);margin-bottom:1.1rem}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#ffffff12;
  border:1px solid #ffffff12;border-radius:var(--r-m);overflow:hidden}
@media(min-width:760px){.chiffres{grid-template-columns:repeat(4,1fr)}}
.chiffre{background:var(--nuit);padding:1.5rem 1.1rem;text-align:center;position:relative;transition:background .35s}
.chiffre:hover{background:var(--carbone)}
.chiffre b{display:block;font-family:'Anton',sans-serif;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.chiffre span{display:block;margin-top:.45rem;font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux)}

/* ---------- Cartes services ---------- */
.carte{position:relative;background:var(--carbone);border:1px solid #ffffff12;border-radius:var(--r-m);
  overflow:hidden;transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;display:flex;flex-direction:column}
.carte::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%)}
.carte:hover{transform:translateY(-8px);border-color:#ffffff2e;box-shadow:0 30px 60px -30px #000}
.carte:hover::before{opacity:1}
.carte__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--anthracite)}
.carte__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.carte:hover .carte__img img{transform:scale(1.09)}
.carte__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#12141Af2 4%,#12141A55 40%,transparent 70%)}
.carte__num{position:absolute;top:.85rem;left:.9rem;z-index:2;font-family:'IBM Plex Mono',monospace;font-size:.7rem;
  letter-spacing:.14em;color:var(--chrome-2);background:#08090Cc4;border:1px solid #ffffff1f;
  padding:.28rem .6rem;border-radius:100px;backdrop-filter:blur(6px)}
.carte__corps{padding:1.3rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.carte__corps h3{color:var(--chrome-1)}
.carte__corps p{font-size:.93rem}
.carte__liste{display:grid;gap:.4rem;margin-top:.2rem}
.carte__liste li{position:relative;padding-left:1.25rem;font-size:.87rem;color:var(--texte-doux)}
.carte__liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--brique);transform:rotate(45deg);transition:background .3s,transform .3s}
.carte:hover .carte__liste li::before{background:var(--bleu);transform:rotate(135deg)}
.carte__lien{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.45rem;
  font-weight:800;font-size:.88rem;color:var(--bleu-clair)}
.carte__lien svg{transition:transform .35s var(--ease)}
.carte:hover .carte__lien svg{transform:translateX(6px)}

/* Carte icône */
.icard{background:var(--carbone);border:1px solid #ffffff12;border-radius:var(--r-m);padding:1.5rem 1.35rem;
  transition:transform .4s var(--ease),border-color .4s,background .4s;position:relative;overflow:hidden}
.icard:hover{transform:translateY(-6px);border-color:#ffffff2b;background:var(--carbone-2)}
.icard__ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;margin-bottom:1rem;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.3);
  color:var(--bleu-clair);transition:transform .5s var(--ease)}
.icard:hover .icard__ico{transform:rotate(-8deg) scale(1.08)}
.icard--brique .icard__ico{background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.32);color:var(--brique-clair)}
.icard h3{font-size:1.1rem;margin-bottom:.5rem}
.icard p{font-size:.9rem}

/* ---------- Avant / Après ---------- */
.ap{position:relative;border-radius:var(--r-m);overflow:hidden;border:1px solid #ffffff16;
  aspect-ratio:4/3;user-select:none;touch-action:pan-y;cursor:ew-resize;background:var(--anthracite)}
.ap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap__apres{clip-path:inset(0 0 0 var(--pos,50%))}
.ap__poignee{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;
  background:var(--metal-line);background:linear-gradient(180deg,transparent,#fff 15%,#fff 85%,transparent);
  box-shadow:0 0 20px rgba(255,255,255,.55);z-index:3}
.ap__bouton{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:var(--metal);display:grid;place-items:center;color:#0A0C10;box-shadow:0 8px 24px rgba(0,0,0,.6);
  transition:transform .3s var(--ease)}
.ap:hover .ap__bouton{transform:translate(-50%,-50%) scale(1.12)}
.ap__tag{position:absolute;bottom:.9rem;z-index:4;font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.32rem .7rem;border-radius:100px;
  background:#08090Cd0;border:1px solid #ffffff20;backdrop-filter:blur(6px);color:var(--chrome-2)}
.ap__tag--a{left:.9rem}
.ap__tag--b{right:.9rem;color:var(--acc-txt);background:var(--chrome-1);border-color:transparent}
.ap__legende{padding:.9rem .2rem 0;font-size:.87rem;color:var(--texte-doux)}
.ap__legende b{display:block;color:var(--chrome-1);font-family:'Anton',sans-serif;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:.15rem}

/* ---------- Galerie ---------- */
.filtres{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filtre{padding:.55rem 1.05rem;border-radius:100px;background:#ffffff09;border:1px solid #ffffff18;
  font-size:.83rem;font-weight:700;color:var(--texte-doux);cursor:pointer;transition:.3s}
.filtre:hover{color:var(--chrome-1);border-color:#ffffff33}
.filtre.actif{background:var(--metal);color:#0A0C10;border-color:transparent}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.gitem{position:relative;border-radius:var(--r-s);overflow:hidden;aspect-ratio:3/4;cursor:zoom-in;
  border:1px solid #ffffff0f;background:var(--anthracite);transition:opacity .4s,transform .4s var(--ease)}
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
.gitem:hover img{transform:scale(1.09);filter:brightness(1.08)}
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#08090Ce8,transparent 55%);
  opacity:0;transition:opacity .4s}
.gitem:hover::after{opacity:1}
.gitem figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.85rem;font-size:.8rem;font-weight:700;
  color:var(--chrome-1);transform:translateY(12px);opacity:0;transition:.4s var(--ease)}
.gitem:hover figcaption{transform:none;opacity:1}
.gitem.masque{display:none}
.gitem__cat{display:block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bleu-clair);margin-bottom:.2rem}

.lightbox{position:fixed;inset:0;z-index:990;background:rgba(4,5,8,.96);display:none;place-items:center;padding:1.5rem}
.lightbox.on{display:grid;animation:fondu .3s}
@keyframes fondu{from{opacity:0}}
.lightbox img{max-width:min(96vw,900px);max-height:86vh;border-radius:var(--r-m);box-shadow:0 40px 90px -30px #000}
.lightbox__x,.lightbox__p,.lightbox__n{position:absolute;background:#ffffff10;border:1px solid #ffffff22;
  color:var(--chrome-1);width:52px;height:52px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  font-size:1.4rem;transition:.3s;backdrop-filter:blur(8px)}
.lightbox__x:hover,.lightbox__p:hover,.lightbox__n:hover{background:var(--chrome-1);border-color:var(--chrome-1);color:var(--acc-txt)}
.lightbox__x{top:1.4rem;right:1.4rem}
.lightbox__p{left:1.2rem;top:50%;transform:translateY(-50%)}
.lightbox__n{right:1.2rem;top:50%;transform:translateY(-50%)}
.lightbox__cap{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);font-size:.88rem;
  color:var(--chrome-2);background:#08090Cc0;padding:.5rem 1rem;border-radius:100px;border:1px solid #ffffff18}

/* ---------- Carte des communes (élément signature) ---------- */
.zone{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:940px){.zone{grid-template-columns:1fr 1fr;align-items:center}}
.carte31{position:relative;background:radial-gradient(80% 60% at 50% 40%,#161A22,#0A0C11);
  border:1px solid #ffffff14;border-radius:var(--r-l);padding:1.2rem;box-shadow:var(--ombre)}
.carte31 svg{width:100%;height:auto;display:block;max-height:66vh}
.carte31 .cm{fill:#1C212C;stroke:#2E3644;stroke-width:.8;transition:fill .3s,stroke .3s;cursor:pointer}
.carte31 .cm:hover{fill:#343B49;stroke:var(--bleu-clair)}
.carte31 .cm.actif{fill:#fff;stroke:#08090C;stroke-width:2;filter:drop-shadow(0 0 16px rgba(255,255,255,.85))}
.carte31 .villepoint{fill:var(--brique-clair);stroke:#08090C;stroke-width:1}
.carte31 .villetxt{fill:#C8D2E0;font-size:13px;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;pointer-events:none}
.carte31__legende{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.9rem;font-size:.74rem;color:var(--texte-doux)}
.carte31__legende i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:.35rem;vertical-align:-1px}

.chercheur{background:var(--carbone);border:1px solid #ffffff14;border-radius:var(--r-l);padding:clamp(1.3rem,3vw,2rem);position:relative;overflow:hidden}
.chercheur::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--metal-line)}
.champ{position:relative}
.champ input,.champ select,.champ textarea{
  width:100%;padding:1rem 1.05rem;background:#0B0D12;border:1px solid #ffffff1c;border-radius:var(--r-s);
  color:var(--chrome-1);transition:border-color .3s,box-shadow .3s,background .3s;font-size:.98rem}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;border-color:var(--bleu);
  box-shadow:0 0 0 4px rgba(255,255,255,.16);background:#0D1017}
.champ input::placeholder,.champ textarea::placeholder{color:#5A6577}
.champ label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-doux);margin-bottom:.45rem}
.suggestions{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:30;max-height:270px;overflow-y:auto;
  background:var(--carbone-2);border:1px solid #ffffff1e;border-radius:var(--r-s);box-shadow:var(--ombre);display:none}
.suggestions.on{display:block}
.suggestions li{padding:.65rem .9rem;cursor:pointer;display:flex;justify-content:space-between;gap:.8rem;
  font-size:.9rem;border-bottom:1px solid #ffffff0a;transition:background .2s}
.suggestions li:hover,.suggestions li.surligne{background:var(--chrome-1);color:var(--acc-txt)}
.suggestions li small{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--texte-doux)}
.suggestions li:hover small,.suggestions li.surligne small{color:#E9EEF6}

.resultat{margin-top:1.2rem;padding:1.15rem 1.2rem;border-radius:var(--r-m);border:1px solid #ffffff33;
  background:linear-gradient(140deg,rgba(255,255,255,.10),rgba(255,255,255,.02));display:none}
.resultat.on{display:block;animation:fadeUp .5s var(--ease-out)}
.resultat h4{color:var(--chrome-1);font-size:1.1rem;margin-bottom:.35rem}
.resultat .detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;margin:.9rem 0 1rem}
.resultat .detail div{background:#08090C80;border:1px solid #ffffff12;border-radius:var(--r-s);padding:.6rem .7rem}
.resultat .detail b{display:block;font-family:'Anton',sans-serif;font-size:1.15rem;color:var(--chrome-1)}
.resultat .detail span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texte-doux)}

/* ---------- Météo ---------- */
.meteo{background:linear-gradient(150deg,#151A24,#0A0D13);border:1px solid #ffffff14;border-radius:var(--r-l);
  padding:1.4rem;position:relative;overflow:hidden}
.meteo::after{content:"";position:absolute;width:230px;height:230px;right:-70px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);pointer-events:none}
.meteo__haut{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.meteo__now{display:flex;align-items:center;gap:1rem}
.meteo__ico{font-size:2.8rem;line-height:1;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.meteo__temp{font-family:'Anton',sans-serif;font-size:2.6rem;line-height:1;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.meteo__lieu{font-size:.83rem;color:var(--texte-doux)}
.meteo__jours{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.meteo__jour{background:#ffffff08;border:1px solid #ffffff10;border-radius:var(--r-s);padding:.7rem .3rem;
  text-align:center;transition:.3s}
.meteo__jour:hover{background:#ffffff12;transform:translateY(-3px)}
.meteo__jour b{display:block;font-size:.68rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texte-doux);margin-bottom:.3rem}
.meteo__jour i{font-style:normal;font-size:1.4rem;display:block;margin-bottom:.25rem}
.meteo__jour span{font-size:.82rem;font-weight:700;color:var(--chrome-2)}
.meteo__conseil{margin-top:1rem;padding:.75rem .9rem;border-radius:var(--r-s);font-size:.85rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:var(--chrome-2)}
.meteo__conseil b{color:var(--bleu-clair)}
.meteo select{margin-top:.9rem}

/* ---------- Estimateur ---------- */
.estim__ligne{display:grid;gap:.9rem;grid-template-columns:1fr;margin-bottom:1rem}
@media(min-width:620px){.estim__ligne{grid-template-columns:1fr 1fr}}
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;
  background:linear-gradient(90deg,var(--bleu) var(--p,30%),#232833 var(--p,30%));outline:0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--metal);border:2px solid #0A0C10;cursor:grab;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#E4EAF3;border:2px solid #0A0C10;cursor:grab}
.estim__out{margin-top:1.2rem;padding:1.2rem;border-radius:var(--r-m);text-align:center;
  background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.28)}
.estim__out b{display:block;font-family:'Anton',sans-serif;font-size:clamp(1.7rem,5vw,2.5rem);
  background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.estim__out small{display:block;margin-top:.4rem;font-size:.78rem;color:var(--texte-doux)}

/* ---------- Étapes / process ---------- */
.etapes{position:relative;display:grid;gap:1.1rem}
@media(min-width:860px){.etapes{grid-template-columns:repeat(4,1fr)}
  .etapes::before{content:"";position:absolute;top:34px;left:6%;right:6%;height:2px;
    background:linear-gradient(90deg,var(--bleu),var(--brique));opacity:.35}}
.etape{position:relative;text-align:center;padding:0 .4rem}
.etape__n{width:68px;height:68px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--nuit);border:2px solid #ffffff1f;font-family:'Anton',sans-serif;font-size:1.5rem;
  color:var(--chrome-1);position:relative;z-index:2;transition:.45s var(--ease)}
.etape:hover .etape__n{border-color:var(--bleu);transform:scale(1.1);box-shadow:0 0 0 8px rgba(255,255,255,.1)}
.etape h3{font-size:1.05rem;margin-bottom:.45rem}
.etape p{font-size:.88rem}

/* ---------- Avis ---------- */
.avis-piste{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;
  scrollbar-width:thin;scrollbar-color:#2B3140 transparent}
.avis-piste::-webkit-scrollbar{height:6px}
.avis-piste::-webkit-scrollbar-thumb{background:#2B3140;border-radius:100px}
.avis{flex:0 0 min(370px,84vw);scroll-snap-align:start;background:var(--carbone);border:1px solid #ffffff12;
  border-radius:var(--r-m);padding:1.4rem;transition:.4s var(--ease)}
.avis:hover{border-color:#ffffff2b;transform:translateY(-5px)}
.avis__etoiles{color:var(--chrome-2);letter-spacing:.14em;margin-bottom:.7rem;font-size:.95rem}
.avis p{font-size:.93rem;color:var(--texte);font-style:italic}
.avis__qui{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid #ffffff10}
.avis__ini{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(140deg,#39404F,#1B1F28);border:1px solid #ffffff20;color:var(--chrome-1);flex:none}
.avis__qui b{display:block;font-size:.9rem;color:var(--chrome-1)}
.avis__qui span{font-size:.76rem;color:var(--texte-doux)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:900px;margin-inline:auto}
.faq details{background:var(--carbone);border:1px solid #ffffff12;border-radius:var(--r-m);overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:#ffffff2a}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3.2rem 1.1rem 1.3rem;position:relative;
  font-weight:800;font-size:1rem;color:var(--chrome-1)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);
  font-family:'Anton',sans-serif;font-size:1.5rem;color:var(--bleu-clair);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(135deg)}
.faq summary:hover{background:#ffffff07}
.faq .rep{padding:0 1.3rem 1.25rem;font-size:.93rem;color:var(--texte-doux)}
.faq .rep p+p{margin-top:.7rem}

/* ---------- Formulaire de devis ---------- */
.form{display:grid;gap:1rem}
.form__ligne{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.form__ligne.deux{grid-template-columns:1fr 1fr}}
.form textarea{min-height:130px;resize:vertical}
.chips{display:flex;gap:.55rem;flex-wrap:wrap}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border-radius:100px;cursor:pointer;
  background:#ffffff08;border:1px solid #ffffff1c;font-size:.85rem;font-weight:700;color:var(--texte-doux);transition:.3s}
.chip span:hover{border-color:#ffffff38;color:var(--chrome-1)}
.chip input:checked+span{background:var(--metal);border-color:transparent;color:var(--acc-txt);
  box-shadow:0 8px 20px -10px rgba(255,255,255,.45)}
.chip input:focus-visible+span{outline:3px solid var(--bleu-clair);outline-offset:2px}
.etapes-form{display:flex;gap:.4rem;margin-bottom:1.4rem}
.etapes-form div{flex:1;height:4px;border-radius:100px;background:#242A36;overflow:hidden}
.etapes-form div::after{content:"";display:block;height:100%;width:0;background:linear-gradient(90deg,var(--bleu),var(--brique));
  transition:width .5s var(--ease)}
.etapes-form div.faite::after{width:100%}
.pas{display:none}
.pas.on{display:grid;gap:1rem;animation:fadeUp .45s var(--ease-out)}
.rgpd{font-size:.76rem;color:var(--texte-doux);display:flex;gap:.6rem;align-items:flex-start}
.rgpd input{margin-top:.25rem;accent-color:var(--bleu);width:17px;height:17px;flex:none}

/* ---------- Bloc CTA ---------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-l);padding:clamp(2rem,5vw,3.6rem);
  background:linear-gradient(130deg,#101319,#10161F 45%,#15171C);border:1px solid #ffffff14;text-align:center}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 120% at 15% 0%,rgba(255,255,255,.25),transparent 60%),
             radial-gradient(70% 120% at 88% 100%,rgba(255,255,255,.25),transparent 60%)}
.cta>*{position:relative}
.cta h2{margin-bottom:.8rem}
.cta .btns{justify-content:center;margin-top:1.7rem}

/* ---------- Bandeau image ---------- */
.bandeau-img{padding:clamp(2rem,5vw,3.4rem) 0;background:var(--noir)}
.bandeau-img img{width:min(100% - 2.4rem,1180px);margin-inline:auto;height:auto;display:block;
  border-radius:var(--r-l);border:1px solid #ffffff14;box-shadow:var(--ombre)}
.bandeau-img--plein img{width:min(100% - 2.4rem,1400px)}

/* ---------- Téléphone dans l'en-tête ---------- */
[data-tel-desktop]{display:none !important}
@media(min-width:1280px){[data-tel-desktop]{display:inline-flex !important}}

/* ---------- Carte rapide du hero ---------- */
.rapide{display:grid;gap:.55rem;margin:1.1rem 0 1.2rem}
.rapide a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.72rem .95rem;border-radius:var(--r-s);background:#ffffff08;border:1px solid #ffffff16;
  font-weight:700;font-size:.9rem;color:var(--chrome-2);transition:.3s var(--ease)}
.rapide a:hover{background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
  border-color:var(--bleu);transform:translateX(5px);color:#fff}
.rapide a svg{flex:none;color:var(--bleu-clair);transition:transform .3s}
.rapide a:hover svg{transform:translateX(4px)}
.rapide-note{display:flex;gap:.45rem;align-items:center;font-size:.8rem;color:var(--texte-doux);margin-top:.45rem}
.rapide-note svg{color:var(--chrome-1);flex:none}

/* ---------- Pied de page ---------- */
.pied{background:var(--noir);border-top:1px solid #ffffff10;padding-top:clamp(2.8rem,6vw,4.5rem)}
.pied__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));padding-bottom:2.4rem}
.pied h4{color:var(--chrome-1);margin-bottom:1rem;font-size:.95rem;letter-spacing:.1em}
.pied ul{display:grid;gap:.55rem}
.pied a{font-size:.89rem;color:var(--texte-doux);transition:color .3s,padding-left .3s}
.pied a:hover{color:var(--bleu-clair);padding-left:5px}
.pied .logo img{height:74px}
.pied__desc{font-size:.87rem;margin-top:1rem;max-width:34ch}
.pied__bas{border-top:1px solid #ffffff10;padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;font-size:.8rem;color:var(--texte-doux)}
.pied__bas a:hover{color:var(--bleu-clair)}
.pied__villes{display:flex;flex-wrap:wrap;gap:.35rem .75rem;font-size:.78rem;color:#6B7488;
  border-top:1px solid #ffffff08;padding:1.2rem 0}
.pied__villes a{font-size:.78rem;color:#6B7488}

/* ---------- Actions flottantes ---------- */
.flottant{position:fixed;right:1rem;bottom:5.4rem;z-index:880;display:grid;gap:.6rem}
@media(min-width:860px){.flottant{bottom:1.4rem}}
.fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:0;
  background:var(--carbone-2);border:1px solid #ffffff1c;color:var(--chrome-2);
  box-shadow:0 12px 30px -14px #000;transition:.35s var(--ease)}
.fab:hover{transform:translateY(-4px) scale(1.06);border-color:var(--bleu);color:var(--bleu-clair)}
.fab--haut{opacity:0;visibility:hidden}
.fab--haut.on{opacity:1;visibility:visible}
.fab--devis{background:var(--carbone-2);border-color:#ffffff2a;color:var(--chrome-1)}
.fab--tel{background:var(--chrome-1);border-color:transparent;color:var(--acc-txt);
  animation:sonne 3.4s infinite}
@keyframes sonne{0%,86%,100%{transform:none}88%{transform:rotate(-11deg)}92%{transform:rotate(11deg)}96%{transform:rotate(-7deg)}}

.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:890;display:grid;grid-template-columns:1fr 1fr;
  background:rgba(10,12,17,.96);backdrop-filter:blur(14px);border-top:1px solid #ffffff14}
@media(min-width:860px){.barre-mobile{display:none}}
.barre-mobile a{padding:.95rem .5rem;text-align:center;font-weight:800;font-size:.9rem;display:flex;
  align-items:center;justify-content:center;gap:.45rem}
.barre-mobile a:first-child{background:var(--chrome-1);color:var(--acc-txt)}
.barre-mobile a:last-child{color:var(--chrome-1)}
@media(max-width:859px){body{padding-bottom:56px}}

/* ---------- Fil d'Ariane ---------- */
.ariane{padding:1rem 0;font-size:.79rem;color:var(--texte-doux)}
.ariane ol{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.ariane li::after{content:"›";margin-left:.45rem;color:#4A5364}
.ariane li:last-child::after{display:none}
.ariane a:hover{color:var(--bleu-clair)}

/* ---------- En-tête de page interne ---------- */
.pagehead{position:relative;padding:clamp(2.6rem,7vw,4.6rem) 0 clamp(2.2rem,5vw,3.4rem);overflow:hidden;
  background:linear-gradient(160deg,#0B0E14,#101620)}
.pagehead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 100% at 88% 0%,rgba(255,255,255,.18),transparent 62%),
             radial-gradient(60% 100% at 5% 100%,rgba(255,255,255,.16),transparent 60%)}
.pagehead::after{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,#fff 0 1px,transparent 1px 11px)}
.pagehead>*{position:relative}
.pagehead p{max-width:64ch;margin-top:1rem}

/* ---------- Contenu éditorial ---------- */
.prose{max-width:74ch}
.prose h2{margin:2.4rem 0 .9rem}
.prose h3{margin:1.9rem 0 .7rem;color:var(--chrome-2)}
.prose p{margin-bottom:1rem}
.prose ul{display:grid;gap:.55rem;margin:0 0 1.3rem}
.prose ul li{position:relative;padding-left:1.55rem;color:var(--texte-doux);font-size:.96rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--bleu);
  transform:rotate(45deg)}
.prose a{color:var(--bleu-clair);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--chrome-1)}
.prose table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.8rem;font-size:.92rem}
.prose th,.prose td{padding:.75rem .85rem;border-bottom:1px solid #ffffff14;text-align:left}
.prose th{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brique-clair);background:#ffffff06}
.prose td{color:var(--texte-doux)}
.prose tr:hover td{background:#ffffff05;color:var(--texte)}

.encadre{border-left:3px solid var(--bleu);background:linear-gradient(90deg,rgba(255,255,255,.09),transparent);
  padding:1.1rem 1.3rem;border-radius:0 var(--r-s) var(--r-s) 0;margin:1.6rem 0}
.encadre b{color:var(--bleu-clair)}

/* ---------- Grille villes ---------- */
.villes{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:.7rem}
.ville{display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1rem;border-radius:var(--r-s);
  background:#ffffff07;border:1px solid #ffffff12;transition:.32s var(--ease)}
.ville:hover{background:#ffffff0e;border-color:var(--bleu);transform:translateY(-3px)}
.ville b{font-size:.93rem;color:var(--chrome-1);font-weight:800}
.ville span{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--texte-doux);letter-spacing:.08em}

.liste-communes{columns:2;column-gap:1.4rem;font-size:.84rem;color:var(--texte-doux)}
@media(min-width:640px){.liste-communes{columns:3}}
@media(min-width:980px){.liste-communes{columns:5}}
.liste-communes li{break-inside:avoid;padding:.16rem 0}

/* ---------- Animations au défilement ---------- */
.rev{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rev.vu{opacity:1;transform:none}
.rev-l{opacity:0;transform:translateX(-34px);transition:.85s var(--ease-out)}
.rev-l.vu{opacity:1;transform:none}
.rev-r{opacity:0;transform:translateX(34px);transition:.85s var(--ease-out)}
.rev-r.vu{opacity:1;transform:none}
.rev-z{opacity:0;transform:scale(.94);transition:.8s var(--ease-out)}
.rev-z.vu{opacity:1;transform:none}
[data-retard="1"]{transition-delay:.1s}[data-retard="2"]{transition-delay:.2s}
[data-retard="3"]{transition-delay:.3s}[data-retard="4"]{transition-delay:.4s}
[data-retard="5"]{transition-delay:.5s}[data-retard="6"]{transition-delay:.6s}

/* ---------- Divers ---------- */
.tel-grand{font-family:'Anton',sans-serif;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:.02em;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-block}
.mini-note{font-size:.76rem;color:#5F6878}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.centre{text-align:center}
.mt2{margin-top:2rem}.mt1{margin-top:1rem}.mb1{margin-bottom:1rem}

/* ---------- Accessibilité / mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rev,.rev-l,.rev-r,.rev-z{opacity:1;transform:none}
  .hero h1 .ligne>span{transform:none}
  .hero__sub,.hero .btns,.hero__badges,.hero__carte{opacity:1}
}

/* ---------- Impression ---------- */
@media print{
  .entete,.topbar,.marquee,.flottant,.barre-mobile,.drawer,.hero__bg{display:none !important}
  body{background:#fff;color:#000}
  h1,h2,h3{color:#000;-webkit-text-fill-color:#000}
}

/* ==========================================================================
   AFFICHAGE MOBILE — corrections dédiées
   ========================================================================== */
@media(max-width:859px){

  /* 1. On libère le haut de l'écran : la barre d'infos disparaît
        (le téléphone reste dans l'en-tête, la barre fixe du bas et le pied). */
  .topbar{display:none}

  /* 2. Bandeau défilant plus discret */
  .marquee--top{padding:.42rem 0}
  .marquee--top .marquee__item{font-size:.72rem;letter-spacing:.1em}
  .marquee__group{gap:1.9rem;padding-right:1.9rem}

  /* 3. En-tête compact */
  .entete__in{padding-block:.55rem}
  .logo img{height:44px}
  .logo__txt b{font-size:1.02rem}
  .logo__txt span{font-size:.62rem}

  /* 4. Le hero commence tout de suite */
  .hero{min-height:auto;padding-block:3.2rem 2.6rem}
  .hero h1{font-size:clamp(2.1rem,10.5vw,3.2rem);line-height:.98}
  .hero p.chapo{font-size:1rem}
  .hero__actions{display:grid;gap:.6rem}
  .hero__actions .btn{width:100%}

  /* 5. Lisibilité : plus rien sous 12,5 px */
  .eyebrow{font-size:.78rem;letter-spacing:.14em}
  .badge,.pastille,.mini,.mini-note,.gitem__cat,.carte__num,.ariane{font-size:.8rem}
  .champ label,.form label{font-size:.8rem}
  body{font-size:1rem;line-height:1.65}

  /* 6. Zones tactiles confortables (44 px minimum) */
  .carte__lien,.pied a,.pied li a,.villes a,.ariane a,.nav__drop a,.liste-communes a{
    min-height:44px;display:inline-flex;align-items:center}
  .liste-communes a{padding-block:.35rem}
  .prose ul li a,.prose ol li a{min-height:40px;display:inline-flex;align-items:center}
  p a[href^="tel:"]{min-height:40px;display:inline-flex;align-items:center;font-weight:800}
  .pied__col a{padding-block:.42rem}
  .range{height:44px}
  .range::-webkit-slider-thumb{width:28px;height:28px}
  .range::-moz-range-thumb{width:28px;height:28px}

  /* 7. Grilles : une seule colonne, sans exception */
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:1fr;gap:1.1rem}
  .etapes::before{display:none}

  /* 8. Respiration verticale réduite */
  .sect{padding-block:clamp(2.6rem,9vw,3.6rem)}
  h2{font-size:clamp(1.65rem,7.6vw,2.3rem);line-height:1.05}

  /* 9. La carte du département reste lisible */
  .carte31{min-height:340px}
  .carte31 svg{max-height:62vh}

  /* 10. Comparateurs avant/après : poignée plus grosse au doigt */
  .ap__bouton{width:54px;height:54px}
  .ap__tag{font-size:.68rem;padding:.3rem .6rem}
}

@media(max-width:400px){
  .barre-mobile a{font-size:.85rem}
  .hero h1{font-size:clamp(1.95rem,10vw,2.9rem)}
}

/* ---------- Photos d'ambiance en noir et blanc (identité du logo) ----------
   Pour revenir à la couleur : supprimez les deux règles ci-dessous.        */
.hero__bg img{filter:saturate(1.06) contrast(1.05)}
.bandeau-img img{filter:grayscale(1)}

/* ---------- Icônes du pied de page ---------- */
.pied ul li{margin-bottom:.1rem}
.pied ul li a,.pied ul li span{display:inline-flex;align-items:flex-start;gap:.6rem;line-height:1.45}
.pied .ic{width:17px;height:17px;flex:none;margin-top:.16em;color:var(--chrome-3);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.pied ul li a:hover .ic{color:var(--chrome-1);transform:translateX(2px)}
.pied ul li a:hover{color:var(--chrome-1)}
.pied .tel-grand{line-height:1.1}
.pied ul li a:has(.tel-grand) .ic{width:20px;height:20px;margin-top:.1em}
@media(max-width:859px){.pied .ic{width:16px;height:16px}}