/* ==========================================================================
   ND COUVERTURE — feuille de style unique
   Direction : « Ardoise & Tuffeau » — le noir bleuté de l'ardoise d'Angers,
   le bleu du logo, la craie chaude du tuffeau du Val de Loire.
   ========================================================================== */

/* ---------- polices auto-hébergées (aucun appel externe, aucun cookie) ---- */
@font-face{font-family:Saira;src:url(../fonts/saira-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Saira;src:url(../fonts/saira-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Saira;src:url(../fonts/saira-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap;font-style:normal}
@font-face{font-family:Saira;src:url(../fonts/saira-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap;font-style:normal}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Manrope;src:url(../fonts/manrope-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Caveat;src:url(../fonts/caveat-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Caveat;src:url(../fonts/caveat-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}

/* ---------------------------------------------------------------- tokens */
:root{
  --nuit:#060B16;
  --ardoise:#0A1424;
  --ardoise-2:#0F1E36;
  --ardoise-3:#16294A;
  --bleu:#1450C8;
  --bleu-v:#3B86FF;
  --bleu-p:#8FBAFF;
  --tuffeau:#E7DCC3;
  --tuffeau-s:#B9AA88;
  --blanc:#F3F7FF;
  --txt:#AEBFD8;
  --txt-2:#7C8FAC;
  --ligne:rgba(143,186,255,.16);
  --ligne-2:rgba(143,186,255,.30);
  --verre:rgba(16,32,58,.62);
  --ombre:0 24px 60px -22px rgba(0,0,0,.85);
  --halo:0 0 0 1px rgba(59,134,255,.30), 0 18px 46px -18px rgba(20,80,200,.75);
  --r:16px;
  --r-l:26px;
  --wrap:1280px;
  --pad:clamp(18px,4.4vw,34px);
  --sec:clamp(64px,8.5vw,124px);
  --dsp:Saira,'Arial Narrow',system-ui,sans-serif;
  --txtf:Manrope,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --script:Caveat,'Segoe Script',cursive;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
img{height:auto}                        /* filet global : jamais d'image écrasée */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--txtf);font-size:clamp(15.5px,1.06vw,17px);line-height:1.72;
  color:var(--txt);background:var(--nuit);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,picture{display:block;max-width:100%}
picture{display:block}
svg{width:20px;height:20px;flex:none}
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-v);outline-offset:3px;border-radius:6px}
::selection{background:var(--bleu);color:#fff}

h1,h2,h3,h4,.dsp{font-family:var(--dsp);font-weight:800;line-height:1.04;letter-spacing:-.015em;color:var(--blanc)}
h1{font-size:clamp(2.05rem,5.6vw,4.35rem);letter-spacing:-.028em}
h2{font-size:clamp(1.68rem,3.7vw,3.05rem);letter-spacing:-.022em}
h3{font-size:clamp(1.16rem,1.7vw,1.5rem);letter-spacing:-.012em}
h4{font-size:1.02rem;letter-spacing:.01em}
p{text-wrap:pretty}
strong,b{color:var(--blanc);font-weight:700}

/* le dégradé « zinc » — à poser sur le span le plus interne, jamais sur un parent */
.zinc{background:linear-gradient(96deg,#fff 4%,#CFE0FF 28%,#5E9BFF 52%,#fff 74%,#9BC0FF 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:zinc 9s linear infinite}
@keyframes zinc{to{background-position:220% 0}}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-top:var(--sec);padding-bottom:var(--sec);position:relative}
.sec--court{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.centre{text-align:center}
.duo,.grille,.deux,.trio{display:grid;gap:clamp(20px,2.4vw,34px)}
.duo,.duo>*,.grille>*,.deux>*,.trio>*,.form,.form>*,.zone>*,.sticky>*{min-width:0}

/* ---------------------------------------------------------------- écailles */
/* motif de pose losangée — la signature graphique du toit du logo */
.ecailles{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(135deg,rgba(143,186,255,.055) 25%,transparent 25%),
    linear-gradient(225deg,rgba(143,186,255,.055) 25%,transparent 25%),
    linear-gradient(45deg,rgba(143,186,255,.055) 25%,transparent 25%),
    linear-gradient(315deg,rgba(143,186,255,.055) 25%,transparent 25%);
  background-size:34px 34px;background-position:0 0,17px 0,17px -17px,0 17px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 72%)}
.ecailles--bas{-webkit-mask-image:radial-gradient(120% 90% at 50% 100%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 90% at 50% 100%,#000 0%,transparent 72%)}

/* faîtage : filet lumineux en haut de section */
.faitage{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ligne-2) 18%,rgba(59,134,255,.75) 50%,var(--ligne-2) 82%,transparent)}

/* ---------------------------------------------------------------- eyebrow */
.oeil{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--mono);font-weight:700;
  font-size:.705rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tuffeau);
  padding:7px 14px 7px 12px;border:1px solid rgba(231,220,195,.26);border-radius:999px;
  background:rgba(231,220,195,.05);margin-bottom:20px}
.oeil::before{content:"";width:7px;height:7px;margin-top:.42em;border-radius:2px;background:var(--bleu-v);
  box-shadow:0 0 0 3px rgba(59,134,255,.22);animation:puls 2.6s ease-in-out infinite;flex:none}
@keyframes puls{50%{box-shadow:0 0 0 8px rgba(59,134,255,0)}}
.oeil--c{margin-inline:auto}

.chapo{font-size:clamp(1rem,1.28vw,1.16rem);max-width:66ch;color:var(--txt)}
.chapo--c{margin-inline:auto}
.sec__tete{margin-bottom:clamp(34px,4.2vw,60px)}

/* ---------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--dsp);font-weight:800;font-size:.94rem;letter-spacing:.055em;
  text-transform:uppercase;padding:16px 26px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;position:relative;overflow:hidden;white-space:nowrap;
  transition:transform .28s cubic-bezier(.2,.9,.25,1),box-shadow .28s,background .28s,color .28s,border-color .28s}
.btn svg{width:19px;height:19px}
.btn--p{background:linear-gradient(135deg,var(--bleu-v),var(--bleu) 62%,#0C3A99);color:#fff;
  box-shadow:var(--halo)}
.btn--p::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);width:55%}
.btn--p:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 1px rgba(59,134,255,.5),0 26px 54px -16px rgba(20,80,200,.95)}
.btn--p:hover::after{animation:lueur .85s ease}
@keyframes lueur{to{transform:translateX(320%) skewX(-18deg)}}
.btn--f{background:rgba(143,186,255,.07);border-color:var(--ligne-2);color:var(--blanc);backdrop-filter:blur(6px)}
.btn--f:hover{background:rgba(143,186,255,.15);border-color:var(--bleu-v);transform:translateY(-3px)}
.btn--t{background:var(--tuffeau);color:#20180B;border-color:var(--tuffeau)}
.btn--t:hover{background:#fff;transform:translateY(-3px);box-shadow:0 20px 44px -18px rgba(231,220,195,.7)}
.btn--l{padding:19px 34px;font-size:1.02rem}
.btn--bloc{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btns--c{justify-content:center}

/* lien fléché */
.lien-f{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--bleu-p);
  font-size:.94rem;transition:gap .25s,color .25s}
.lien-f svg{width:17px;height:17px;transition:transform .25s}
.lien-f:hover{gap:14px;color:#fff}
.lien-f:hover svg{transform:translateX(3px)}

/* ---------------------------------------------------------------- topbar */
.topbar{background:linear-gradient(90deg,#08111F,#123056 52%,#08111F);
  border-bottom:1px solid var(--ligne);font-size:.79rem;position:relative;z-index:60}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:38px;flex-wrap:nowrap}
.topbar__g{display:flex;align-items:center;gap:18px;min-width:0}
.topbar__d{display:flex;align-items:center;gap:16px;flex:none}
.topbar a,.topbar span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--txt)}
.topbar svg{width:14px;height:14px;color:var(--bleu-v)}
.topbar a:hover{color:#fff}
.topbar__acc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-2)}
.topbar__tel{font-family:var(--mono);font-weight:700;color:#fff!important;letter-spacing:.02em}

/* ---------------------------------------------------------------- header */
.entete{position:sticky;top:0;z-index:70;background:rgba(6,11,22,.72);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--ligne);transition:background .3s,box-shadow .3s,border-color .3s}
.entete--fixe{background:rgba(6,11,22,.95);box-shadow:0 18px 44px -26px #000}
.nav{display:flex;align-items:center;gap:20px;min-height:74px}
.marque{display:flex;align-items:center;gap:12px;flex:none;margin-right:auto;padding-right:20px}
.marque__pl{background:linear-gradient(180deg,#fff,#E8EFFA);border-radius:12px;padding:7px 12px;flex:none;
  display:flex;align-items:center;box-shadow:0 8px 22px -12px rgba(0,0,0,.9);transition:transform .3s}
.marque:hover .marque__pl{transform:translateY(-2px) rotate(-.6deg)}
.marque__pl img{width:112px;height:auto}
.marque__txt{display:none;flex-direction:column;line-height:1.1;flex:none}
@media(min-width:640px) and (max-width:1199px){.marque__txt{display:flex}}
.marque__n{font-family:var(--dsp);font-weight:900;font-size:1.02rem;color:var(--blanc);letter-spacing:.03em;white-space:nowrap}
.marque__b{font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;color:var(--tuffeau-s);text-transform:uppercase;white-space:nowrap}

.menu{display:none;align-items:center;gap:3px}
.menu>li{position:relative}
.menu a{display:block;padding:10px 13px;font-weight:600;font-size:.885rem;color:var(--txt);
  border-radius:9px;white-space:nowrap;position:relative;transition:color .22s,background .22s}
.menu a:hover,.menu a[aria-current]{color:#fff;background:rgba(143,186,255,.08)}
.menu a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;
  background:linear-gradient(90deg,var(--bleu-v),var(--tuffeau));transform:scaleX(0);
  transform-origin:left;transition:transform .3s cubic-bezier(.2,.9,.25,1);border-radius:2px}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1)}
.menu a.menu__b{display:flex;align-items:center;gap:6px;white-space:nowrap;flex-wrap:nowrap}
.menu__b svg{width:13px;height:13px;transition:transform .3s}
li:hover>.menu__b svg{transform:rotate(180deg)}
.sous{position:absolute;top:calc(100% + 10px);left:0;min-width:296px;padding:10px;
  background:rgba(11,21,38,.97);backdrop-filter:blur(20px);border:1px solid var(--ligne-2);
  border-radius:var(--r);box-shadow:var(--ombre);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .26s,transform .26s,visibility .26s}
li:hover>.sous,li:focus-within>.sous{opacity:1;visibility:visible;transform:translateY(0)}
.sous a{display:flex;align-items:center;gap:12px;padding:11px 12px;font-size:.87rem}
.sous a::after{display:none}
.sous a:hover{background:rgba(59,134,255,.14);transform:translateX(3px)}
.sous i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,rgba(59,134,255,.24),rgba(59,134,255,.06));
  border:1px solid var(--ligne)}
.sous i svg{width:17px;height:17px;color:var(--bleu-p)}
.sous small{display:block;font-size:.72rem;color:var(--txt-2);font-weight:500;letter-spacing:0}
.nav__cta{display:none;flex:none}
.nav__tel{display:none;align-items:center;gap:9px;flex:none;font-family:var(--mono);
  font-weight:700;font-size:.9rem;letter-spacing:.01em;color:var(--blanc);padding:11px 15px;
  border-radius:11px;border:1px solid var(--ligne-2);background:rgba(143,186,255,.06);
  white-space:nowrap;transition:border-color .25s,background .25s,transform .25s}
.nav__tel svg{width:17px;height:17px;color:var(--bleu-v)}
.nav__tel:hover{border-color:var(--bleu-v);background:rgba(59,134,255,.14);transform:translateY(-2px)}
@media(min-width:1500px){.nav__tel{display:inline-flex}}
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:11px;flex:none;
  background:rgba(143,186,255,.08);border:1px solid var(--ligne-2)}
.burger span{display:block;width:20px;height:2px;background:var(--blanc);border-radius:2px;
  transition:transform .3s,opacity .2s}
.burger span+span{margin-top:5px}
.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)}

/* menu mobile */
.mob{position:fixed;inset:0;z-index:69;background:rgba(6,11,22,.98);backdrop-filter:blur(14px);
  padding:88px var(--pad) 96px;overflow-y:auto;transform:translateY(-100%);
  transition:transform .42s cubic-bezier(.5,0,.2,1);visibility:hidden}
.mob[data-ouvert]{transform:translateY(0);visibility:visible}
.mob[data-ouvert]~.flottant{display:none}
.mob ul{display:flex;flex-direction:column;gap:0}
.mob li{min-width:0}
.mob a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 2px;
  font-family:var(--dsp);font-weight:700;font-size:1.08rem;color:var(--blanc);
  border-bottom:1px solid var(--ligne);min-width:0}
.mob a svg{width:17px;height:17px;flex:none;color:var(--bleu-v)}
.mob__n{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.mob a small{font-family:var(--txtf);font-weight:500;font-size:.73rem;line-height:1.35;
  letter-spacing:0;color:var(--txt-2);text-transform:none}
.mob__sous{font-size:.95rem;font-weight:600;padding-left:20px;position:relative}
.mob__sous::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:2px;
  border-radius:2px;background:var(--ligne-2)}
.mob__sous:hover::before{background:var(--bleu-v)}
.mob__sous .mob__n{color:var(--txt)}
.mob__sous:hover .mob__n{color:#fff}
.mob .btns{margin-top:26px}
.mob .btns a.btn{justify-content:center;border-bottom:0;font-size:.92rem;padding:16px 18px}
.mob .btns a.btn svg{color:currentColor}

/* ---------------------------------------------------------------- héros */
.hero{position:relative;overflow:hidden;isolation:isolate;background:var(--nuit);
  padding-top:clamp(46px,6vw,86px);padding-bottom:clamp(56px,7vw,104px)}
.ciel{position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(110% 80% at 78% -10%,rgba(59,134,255,.34),transparent 62%),
    radial-gradient(80% 60% at 8% 4%,rgba(231,220,195,.10),transparent 60%),
    linear-gradient(178deg,#0B1B33 0%,#081326 46%,#060B16 100%)}
.ciel::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 55% at 50% 100%,rgba(6,11,22,.9),transparent 70%)}
/* nuages qui dérivent */
.nuage{position:absolute;z-index:-2;border-radius:50%;filter:blur(38px);opacity:.5;
  background:radial-gradient(circle,rgba(180,206,255,.5),transparent 68%);pointer-events:none}
.nuage--1{width:46vw;height:16vw;top:6%;left:-18%;animation:derive 58s linear infinite}
.nuage--2{width:34vw;height:12vw;top:26%;left:-30%;opacity:.32;animation:derive 84s linear infinite 8s}
.nuage--3{width:26vw;height:9vw;top:2%;left:-24%;opacity:.24;animation:derive 110s linear infinite 22s}
@keyframes derive{to{transform:translateX(150vw)}}
/* rayon rasant */
.rayon{position:absolute;z-index:-2;top:-40%;left:38%;width:34%;height:190%;
  background:linear-gradient(102deg,transparent,rgba(190,215,255,.13) 44%,transparent 60%);
  transform:rotate(9deg);animation:rayonp 13s ease-in-out infinite}
@keyframes rayonp{0%,100%{opacity:.32}50%{opacity:.85}}

.hero__in{display:grid;gap:clamp(30px,4vw,54px);align-items:center}
.hero__txt{position:relative;z-index:2}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l>span{display:block;transform:translateY(104%);animation:monte .95s cubic-bezier(.16,.9,.2,1) forwards}
.hero h1 .l:nth-child(2)>span{animation-delay:.11s}
.hero h1 .l:nth-child(3)>span{animation-delay:.22s}
@keyframes monte{to{transform:translateY(0)}}
.hero__sig{font-family:var(--script);font-size:clamp(1.5rem,2.5vw,2.1rem);color:var(--tuffeau);
  transform:rotate(-2deg);display:inline-block;margin-top:6px}
.hero__ch{margin:22px 0 30px;font-size:clamp(1.02rem,1.3vw,1.2rem);max-width:56ch;
  opacity:0;animation:apparait .8s ease .42s forwards}
@keyframes apparait{to{opacity:1}}
.hero .btns{opacity:0;animation:apparait .8s ease .56s forwards}
.hero__pts{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;opacity:0;
  animation:apparait .8s ease .68s forwards}
.hero__pts li{display:inline-flex;align-items:center;gap:8px;font-size:.795rem;font-weight:600;
  padding:8px 13px;border-radius:999px;background:rgba(143,186,255,.07);border:1px solid var(--ligne);
  color:var(--blanc);transition:border-color .25s,transform .25s,background .25s}
.hero__pts li:hover{border-color:var(--bleu-v);transform:translateY(-2px);background:rgba(59,134,255,.14)}
.hero__pts svg{width:15px;height:15px;color:var(--bleu-v)}

/* visuel du héros : photo + cadre chanfreiné + scan */
.hero__vis{position:relative;z-index:1}
.cadre{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--ligne-2);
  box-shadow:var(--ombre);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,34px 100%,0 calc(100% - 34px));
  background:var(--ardoise)}
.cadre img{width:100%;aspect-ratio:16/11;object-fit:cover;
  animation:zoomlent 26s ease-in-out infinite alternate}
@keyframes zoomlent{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.cadre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,transparent 40%,rgba(6,11,22,.82))}
.scan{position:absolute;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(120,175,255,.9),transparent);
  box-shadow:0 0 22px 5px rgba(59,134,255,.45);animation:scanv 6.5s ease-in-out infinite}
@keyframes scanv{0%,100%{top:4%;opacity:0}12%{opacity:1}88%{opacity:1}50%{top:96%}}
.cadre__lg{position:absolute;left:20px;right:20px;bottom:18px;z-index:4;display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cadre__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tuffeau)}
.cadre__n{font-family:var(--dsp);font-weight:800;color:#fff;font-size:1.05rem}

/* pastille flottante « devis gratuit » */
.pastille{position:absolute;right:-14px;top:-20px;z-index:5;width:116px;height:116px;
  border-radius:50%;display:grid;place-items:center;text-align:center;line-height:1.15;
  background:linear-gradient(140deg,var(--bleu-v),var(--bleu) 70%);color:#fff;
  font-family:var(--dsp);font-weight:900;font-size:.83rem;letter-spacing:.06em;
  box-shadow:0 20px 44px -14px rgba(20,80,200,.9);animation:flotte 5.5s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-11px) rotate(4deg)}}
.pastille span{display:block;font-size:1.35rem}

/* ---------------------------------------------------------------- bandeau défilant */
.bandeau{background:linear-gradient(90deg,#0C1F3C,#154CB3 50%,#0C1F3C);
  border-block:1px solid var(--ligne-2);overflow:hidden;position:relative;z-index:2}
.bandeau__p{display:flex;width:max-content;animation:defile 42s linear infinite}
.bandeau:hover .bandeau__p{animation-play-state:paused}
.bandeau__g{display:flex;align-items:center;gap:34px;padding:14px 17px}
.bandeau__g span{display:inline-flex;align-items:center;gap:11px;font-family:var(--dsp);
  font-weight:700;font-size:.87rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  white-space:nowrap}
.bandeau__g svg{width:16px;height:16px;color:var(--tuffeau)}
.bandeau__g i{width:6px;height:6px;border-radius:50%;background:var(--tuffeau);opacity:.75;flex:none}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- cartes */
.carte{position:relative;border-radius:var(--r);border:1px solid var(--ligne);
  background:linear-gradient(160deg,rgba(22,41,74,.66),rgba(10,20,36,.9));
  padding:clamp(22px,2.4vw,32px);overflow:hidden;
  transition:transform .38s cubic-bezier(.2,.9,.25,1),border-color .38s,box-shadow .38s}
.carte::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .38s;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),rgba(59,134,255,.20),transparent 70%)}
.carte:hover{transform:translateY(-7px);border-color:var(--ligne-2);box-shadow:var(--ombre)}
.carte:hover::before{opacity:1}
.carte>*{position:relative}
.carte h3{margin-bottom:10px}
.carte p{font-size:.945rem}

/* carte prestation */
.svc{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden}
.svc__im{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--ardoise-2)}
.svc__im img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:saturate(1.05) brightness(1.08);transition:transform .8s cubic-bezier(.2,.9,.25,1)}
.svc:hover .svc__im img{transform:scale(1.09)}
.svc__im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,11,22,0) 42%,rgba(10,20,36,.9))}
.svc__ic{position:absolute;left:18px;bottom:14px;z-index:2;width:48px;height:48px;border-radius:13px;
  display:grid;place-items:center;background:linear-gradient(140deg,var(--bleu-v),var(--bleu));
  box-shadow:0 12px 30px -10px rgba(20,80,200,.9);transition:transform .4s}
.svc__ic svg{width:24px;height:24px;color:#fff}
.svc:hover .svc__ic{transform:translateY(-4px) rotate(-6deg)}
.svc__n{position:absolute;right:16px;bottom:16px;z-index:2;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.18em;color:var(--tuffeau);text-transform:uppercase}
.svc__c{padding:22px clamp(20px,2.2vw,26px) 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.svc__c p{flex:1}
.svc__l{display:flex;flex-wrap:wrap;gap:7px}
.svc__l li{font-size:.735rem;font-weight:600;padding:5px 10px;border-radius:7px;
  background:rgba(143,186,255,.08);border:1px solid var(--ligne);color:var(--bleu-p)}

/* carte prestation « appel » pour combler la grille */
.svc--cta{background:linear-gradient(150deg,var(--bleu) 0%,#0B2E77 55%,#08172F 100%);
  border-color:rgba(143,186,255,.42);justify-content:center;text-align:center;
  padding:clamp(26px,3vw,38px)}
.svc--cta h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.svc--cta p{color:rgba(255,255,255,.86);margin:10px 0 20px}
.svc--cta .btn{width:100%}

/* ---------------------------------------------------------------- grilles */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,282px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.g-svc{grid-template-columns:repeat(auto-fit,minmax(min(100%,296px),1fr))}
@media(min-width:1200px){.g-svc{grid-template-columns:repeat(4,1fr)}}

/* ---------------------------------------------------------------- chiffres */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr));
  gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r);overflow:hidden}
.chiffre{background:linear-gradient(160deg,rgba(22,41,74,.6),rgba(8,16,30,.94));
  padding:clamp(20px,2.4vw,30px) 18px;text-align:center;transition:background .35s}
.chiffre:hover{background:linear-gradient(160deg,rgba(30,60,110,.8),rgba(12,24,44,.96))}
.chiffre__v{font-family:var(--dsp);font-weight:900;font-size:clamp(2rem,3.6vw,3.05rem);
  line-height:1;color:var(--blanc);font-variant-numeric:tabular-nums}
.chiffre__v em{font-style:normal;color:var(--bleu-v);font-size:.62em}
.chiffre__l{font-family:var(--mono);font-size:.665rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-2);margin-top:9px;line-height:1.5}

/* ---------------------------------------------------------------- étapes */
.etapes{counter-reset:e;display:grid;gap:0;position:relative}
.etape{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px dashed var(--ligne);position:relative}
.etape:last-child{border-bottom:0}
.etape__n{counter-increment:e;width:56px;height:56px;border-radius:14px;flex:none;display:grid;
  place-items:center;font-family:var(--mono);font-weight:700;font-size:1.02rem;color:var(--bleu-p);
  background:linear-gradient(140deg,rgba(59,134,255,.22),rgba(59,134,255,.04));
  border:1px solid var(--ligne-2);transition:transform .35s,background .35s,color .35s}
.etape__n::before{content:"0" counter(e)}
.etape:hover .etape__n{transform:scale(1.07) rotate(-4deg);color:#fff;
  background:linear-gradient(140deg,var(--bleu-v),var(--bleu))}
.etape h3{margin-bottom:7px}
.etape p{font-size:.945rem;max-width:62ch}

/* ---------------------------------------------------------------- carte SVG */
.zone{display:grid;gap:clamp(24px,3vw,44px);align-items:start}
@media(min-width:1024px){.zone{grid-template-columns:1.05fr .95fr}}
.carte37{position:relative;border-radius:var(--r-l);border:1px solid var(--ligne);
  background:radial-gradient(85% 70% at 50% 12%,rgba(20,52,104,.6),rgba(7,13,26,.96));
  padding:clamp(14px,2vw,24px);overflow:hidden}
.carte37 svg{width:100%;height:auto;overflow:visible;display:block}
.carte37 .cm{fill:rgba(143,186,255,.055);stroke:rgba(143,186,255,.20);stroke-width:.7;
  transition:fill .35s,stroke .35s,filter .35s;cursor:pointer}
.carte37.on .cm{animation:allume .55s ease forwards;animation-delay:var(--d)}
@keyframes allume{
  0%{fill:rgba(143,186,255,.055);stroke:rgba(143,186,255,.2)}
  45%{fill:rgba(90,160,255,.55);stroke:rgba(160,205,255,.95)}
  100%{fill:rgba(46,100,190,.20);stroke:rgba(143,186,255,.42)}}
.carte37 .cm:hover{fill:rgba(90,160,255,.72);stroke:#fff;stroke-width:1.1;
  filter:drop-shadow(0 0 9px rgba(59,134,255,.9))}
.carte37 .cm.sel{fill:var(--tuffeau);stroke:#fff;stroke-width:1.3;
  filter:drop-shadow(0 0 14px rgba(231,220,195,.95))}
.carte37 .base{fill:var(--tuffeau);stroke:#fff;stroke-width:1.6}
.bulle{position:absolute;z-index:9;pointer-events:none;padding:9px 13px;border-radius:10px;
  background:rgba(6,12,24,.97);border:1px solid var(--ligne-2);box-shadow:var(--ombre);
  font-size:.79rem;opacity:0;transform:translate(-50%,-136%);transition:opacity .18s;white-space:nowrap}
.bulle[data-on]{opacity:1}
.bulle b{display:block;font-family:var(--dsp);font-size:.94rem;color:#fff;letter-spacing:.01em}
.bulle small{font-family:var(--mono);font-size:.68rem;color:var(--bleu-p)}
.carte37__lg{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:.75rem;color:var(--txt-2)}
.carte37__lg span{display:inline-flex;align-items:center;gap:7px}
.carte37__lg i{width:11px;height:11px;border-radius:3px;flex:none}

/* vérificateur de zone */
.verif{position:relative}
.verif__ch{position:relative}
.verif input{width:100%;padding:17px 52px 17px 18px;border-radius:13px;font-size:1rem;
  background:rgba(8,16,30,.88);border:1px solid var(--ligne-2);color:#fff;transition:border-color .25s,box-shadow .25s}
.verif input:focus{outline:none;border-color:var(--bleu-v);box-shadow:0 0 0 4px rgba(59,134,255,.16)}
.verif input::placeholder{color:var(--txt-2)}
.verif__ic{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--bleu-v)}
.sugg{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;max-height:290px;overflow-y:auto;
  background:rgba(9,18,34,.99);border:1px solid var(--ligne-2);border-radius:13px;box-shadow:var(--ombre);
  display:none}
.sugg[data-on]{display:block}
.sugg li{padding:12px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;
  align-items:center;border-bottom:1px solid var(--ligne);transition:background .18s}
.sugg li:last-child{border-bottom:0}
.sugg li:hover,.sugg li[data-actif]{background:rgba(59,134,255,.18)}
.sugg b{font-weight:700;color:var(--blanc)}
.sugg small{font-family:var(--mono);font-size:.7rem;color:var(--txt-2)}
.res{margin-top:16px;padding:20px;border-radius:14px;border:1px solid var(--ligne-2);
  background:linear-gradient(150deg,rgba(20,80,200,.20),rgba(10,20,36,.85));display:none;
  animation:pop .4s cubic-bezier(.2,.9,.25,1)}
.res[data-on]{display:block}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.res__t{display:flex;align-items:center;gap:11px;font-family:var(--dsp);font-weight:800;
  font-size:1.1rem;color:#fff;margin-bottom:8px}
.res__t svg{width:22px;height:22px;color:#5BE39A}
.res__m{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 16px}
.res__m span{font-family:var(--mono);font-size:.72rem;padding:6px 11px;border-radius:8px;
  background:rgba(143,186,255,.10);border:1px solid var(--ligne);color:var(--bleu-p)}

/* ---------------------------------------------------------------- météo */
.meteo{border-radius:var(--r);border:1px solid var(--ligne);overflow:hidden;
  background:linear-gradient(160deg,rgba(22,41,74,.7),rgba(8,16,30,.95))}
.meteo__h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.meteo__h h3{font-size:1.02rem}
.meteo__h small{font-family:var(--mono);font-size:.67rem;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2)}
.meteo__j{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--ligne)}
.mj{background:rgba(8,16,30,.9);padding:14px 5px;text-align:center;transition:background .3s}
.mj:hover{background:rgba(30,60,110,.75)}
.mj__d{font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.mj__i{margin:8px auto;width:28px;height:28px;color:var(--bleu-p)}
.mj__t{font-family:var(--dsp);font-weight:800;font-size:1rem;color:var(--blanc)}
.mj__p{font-family:var(--mono);font-size:.62rem;color:var(--bleu-v);margin-top:3px}
.mj[data-bon]{background:rgba(20,80,200,.22)}
.meteo__v{padding:15px 20px;font-size:.87rem;display:flex;align-items:center;gap:11px;
  border-top:1px solid var(--ligne);background:rgba(231,220,195,.05)}
.meteo__v svg{width:19px;height:19px;color:var(--tuffeau)}

/* ---------------------------------------------------------------- galerie */
.gal{columns:2;column-gap:14px}
@media(min-width:760px){.gal{columns:3}}
@media(min-width:1150px){.gal{columns:4}}
.gal figure{break-inside:avoid;margin-bottom:14px;position:relative;border-radius:14px;
  overflow:hidden;border:1px solid var(--ligne);cursor:zoom-in;background:var(--ardoise-2)}
.gal img{width:100%;transition:transform .7s cubic-bezier(.2,.9,.25,1),filter .5s}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;font-size:.79rem;
  color:#fff;background:linear-gradient(transparent,rgba(6,11,22,.94));
  transform:translateY(100%);opacity:0;transition:transform .35s,opacity .35s}
.gal figure:hover figcaption{transform:translateY(0);opacity:1}

/* visionneuse */
.vis{position:fixed;inset:0;z-index:200;background:rgba(4,8,16,.97);display:none;
  place-items:center;padding:26px}
.vis[data-on]{display:grid}
.vis img{max-width:min(96vw,1180px);max-height:86vh;border-radius:12px;box-shadow:var(--ombre);
  animation:pop .35s cubic-bezier(.2,.9,.25,1)}
.vis__f{position:absolute;top:20px;right:20px;width:48px;height:48px;border-radius:50%;
  background:rgba(143,186,255,.12);border:1px solid var(--ligne-2);display:grid;place-items:center}
.vis__f svg{width:22px;height:22px;color:#fff}
.vis__n{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:.85rem;
  color:var(--txt);text-align:center;max-width:80vw}

/* ---------------------------------------------------------------- avant/après */
.ba{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);
  aspect-ratio:var(--rr,3/2);touch-action:pan-y;user-select:none;background:var(--ardoise-2)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  -webkit-user-drag:none}
.ba__ap{clip-path:inset(0 0 0 var(--p,50%))}
.ba__h{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.7);z-index:3}
.ba__h::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 0 0 8px rgba(255,255,255,.18),0 10px 26px rgba(0,0,0,.5);transition:transform .25s}
.ba--tire .ba__h::after{transform:translate(-50%,-50%) scale(1.12)}
.ba__e{position:absolute;top:14px;z-index:4;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:7px;
  background:rgba(6,11,22,.82);border:1px solid var(--ligne-2);color:#fff}
.ba__e--a{left:14px}
.ba__e--b{right:14px}
.ba__lg{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:34px 16px 14px;
  pointer-events:none;background:linear-gradient(transparent,rgba(6,11,22,.5) 42%,rgba(6,11,22,.94));
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.ba__lg a{pointer-events:auto}

/* ---------------------------------------------------------------- formulaire */
.form{display:grid;gap:15px}
.champ{display:flex;flex-direction:column;gap:7px;min-width:0}
.champ label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2)}
.champ input,.champ select,.champ textarea{width:100%;min-width:0;padding:14px 16px;border-radius:12px;
  background:rgba(8,16,30,.85);border:1px solid var(--ligne-2);color:#fff;font-size:.97rem;
  transition:border-color .22s,box-shadow .22s,background .22s}
.champ textarea{min-height:132px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu-v);
  box-shadow:0 0 0 4px rgba(59,134,255,.15);background:rgba(12,24,44,.95)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--txt-2)}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FBAFF' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:44px}
.champ--2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:15px}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:9px}
.cases>*{min-width:0}
.case{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;
  border:1px solid var(--ligne-2);background:rgba(8,16,30,.7);cursor:pointer;font-size:.855rem;
  transition:border-color .22s,background .22s,transform .22s}
.case:hover{border-color:var(--bleu-v);transform:translateY(-2px)}
.case input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0}
.case i{width:19px;height:19px;border-radius:6px;border:1.6px solid var(--ligne-2);flex:none;
  display:grid;place-items:center;transition:background .22s,border-color .22s}
.case i::after{content:"";width:9px;height:9px;border-radius:3px;background:#fff;transform:scale(0);
  transition:transform .22s cubic-bezier(.2,1.5,.4,1)}
.case input:checked~i{background:var(--bleu-v);border-color:var(--bleu-v)}
.case input:checked~i::after{transform:scale(1)}
.case input:focus-visible~i{outline:3px solid var(--bleu-v);outline-offset:2px}
.case:has(input:checked){border-color:var(--bleu-v);background:rgba(59,134,255,.13)}
.rgpd{display:flex;gap:11px;align-items:flex-start;font-size:.8rem;color:var(--txt-2);line-height:1.6}
.rgpd input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--bleu-v)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{padding:15px 18px;border-radius:12px;font-size:.9rem;display:none;align-items:center;gap:11px}
.msg[data-on]{display:flex;animation:pop .35s ease}
.msg--ok{background:rgba(30,170,110,.15);border:1px solid rgba(60,220,150,.4);color:#9BF3CB}
.msg--ko{background:rgba(210,60,60,.15);border:1px solid rgba(255,120,120,.4);color:#FFC2C2}
.msg svg{width:19px;height:19px;flex:none}

/* ---------------------------------------------------------------- FAQ */
.faq{display:grid;gap:11px}
.q{border:1px solid var(--ligne);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(22,41,74,.42),rgba(9,17,32,.9));transition:border-color .3s}
.q[open]{border-color:var(--ligne-2)}
.q summary{list-style:none;cursor:pointer;padding:19px 22px;display:flex;align-items:center;gap:16px;
  font-family:var(--dsp);font-weight:700;font-size:1.02rem;color:var(--blanc);transition:background .25s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{background:rgba(59,134,255,.09)}
.q summary::after{content:"";margin-left:auto;width:11px;height:11px;flex:none;
  border-right:2.2px solid var(--bleu-v);border-bottom:2.2px solid var(--bleu-v);
  transform:rotate(45deg) translateY(-3px);transition:transform .3s}
.q[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.q__i{width:8px;height:8px;border-radius:2px;background:var(--tuffeau);flex:none}
.q__c{padding:0 22px 21px 46px;font-size:.945rem;max-width:82ch}

/* ---------------------------------------------------------------- avis */
.piste-w{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.piste{display:flex;gap:18px;width:max-content;padding:4px}
.avis{width:min(86vw,368px);flex:none;border-radius:var(--r);border:1px solid var(--ligne);
  background:linear-gradient(160deg,rgba(22,41,74,.6),rgba(9,17,32,.92));padding:24px;
  display:flex;flex-direction:column;gap:13px;transition:border-color .3s,transform .3s}
.avis:hover{border-color:var(--ligne-2);transform:translateY(-4px)}
.etoiles{display:inline-flex;gap:3px}
.etoiles svg{width:16px;height:16px}
.avis p{font-size:.925rem;flex:1}
.avis__q{font-family:var(--dsp);font-size:2.6rem;line-height:.6;color:var(--ligne-2)}
.avis__a{display:flex;align-items:center;gap:11px;padding-top:11px;border-top:1px solid var(--ligne)}
.avis__av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,var(--bleu-v),var(--bleu));font-family:var(--dsp);font-weight:800;
  color:#fff;font-size:.9rem}
.avis__n{font-weight:700;color:var(--blanc);font-size:.9rem}
.avis__d{font-family:var(--mono);font-size:.67rem;color:var(--txt-2)}
.note{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.note__x{display:flex;align-items:center;gap:9px}
.note__v{font-family:var(--dsp);font-weight:900;font-size:2rem;color:#fff}

/* ---------------------------------------------------------------- listes */
.puces li{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:.95rem}
.puces svg{width:20px;height:20px;color:var(--bleu-v);flex:none;margin-top:2px}
.puces--t svg{color:var(--tuffeau)}

.cols{columns:2;column-gap:26px}
@media(max-width:640px){.cols{columns:1}}

/* liste de communes */
.communes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr));gap:8px}
.communes>*{min-width:0;overflow-wrap:anywhere}
.communes a{display:flex;align-items:baseline;justify-content:space-between;gap:9px;
  padding:10px 13px;border-radius:10px;border:1px solid var(--ligne);font-size:.85rem;
  background:rgba(12,24,44,.5);transition:border-color .25s,transform .25s,background .25s,color .25s}
.communes a:hover{border-color:var(--bleu-v);transform:translateY(-2px);background:rgba(59,134,255,.14);color:#fff}
.communes small{font-family:var(--mono);font-size:.66rem;color:var(--txt-2)}

/* ---------------------------------------------------------------- visuel client */
.visuel{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--ligne-2);
  box-shadow:var(--ombre);background:#0A1424}
.visuel img{width:100%;transition:transform 1.1s cubic-bezier(.2,.9,.25,1)}
.visuel:hover img{transform:scale(1.026)}
.visuel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--bleu),var(--bleu-v) 45%,var(--tuffeau))}

/* ---------------------------------------------------------------- ariane */
.ariane{font-size:.775rem;color:var(--txt-2);padding-top:18px}
.ariane ol{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ariane li{display:flex;align-items:center;gap:7px}
.ariane li+li::before{content:"›";color:var(--ligne-2)}
.ariane a:hover{color:var(--bleu-p)}

/* ---------------------------------------------------------------- CTA bande */
.bande{position:relative;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--ligne-2);
  background:linear-gradient(135deg,#123A8E 0%,#0D2757 45%,#08152C 100%);
  padding:clamp(30px,4.2vw,58px);text-align:center}
.bande::before{content:"";position:absolute;inset:0;opacity:.4;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(143,186,255,.07) 22px 24px)}
.bande>*{position:relative}
.bande h2{margin-bottom:14px}
.bande p{max-width:60ch;margin-inline:auto;margin-bottom:26px}
.bande__tel{font-family:var(--dsp);font-weight:900;font-size:clamp(1.7rem,3.7vw,2.9rem);
  color:#fff;letter-spacing:.02em;display:inline-flex;align-items:center;gap:15px;
  transition:transform .3s,text-shadow .3s}
.bande__tel svg{width:1em;height:1em;color:var(--bleu-p)}
.bande__tel:hover{transform:scale(1.03);text-shadow:0 0 34px rgba(120,175,255,.75)}

/* ---------------------------------------------------------------- pied */
.pied{background:linear-gradient(180deg,#070D1A,#04070F);border-top:1px solid var(--ligne);
  padding-top:clamp(44px,5.4vw,76px);position:relative;overflow:hidden}
.pied__g{display:grid;gap:clamp(26px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr))}
.pied__m img{width:min(200px,72vw);height:auto}
.pied__m .marque__pl{display:inline-flex;margin-bottom:16px}
.pied h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--tuffeau);margin-bottom:16px}
.pied ul{display:grid;gap:9px}
.pied li a,.pied li span{display:flex;align-items:flex-start;gap:9px;font-size:.865rem;color:var(--txt);
  transition:color .22s,transform .22s}
.pied li a:hover{color:#fff;transform:translateX(3px)}
.pied li svg{width:15px;height:15px;color:var(--bleu-v);flex:none;margin-top:3px}
.pied__bas{margin-top:clamp(32px,3.6vw,52px);padding:22px 0;border-top:1px solid var(--ligne);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:.775rem;color:var(--txt-2)}
.pied__bas nav{display:flex;flex-wrap:wrap;gap:16px}
.pied__bas a:hover{color:var(--bleu-p)}
.pied__sig{font-family:var(--script);font-size:1.35rem;color:var(--tuffeau);transform:rotate(-1.5deg)}

/* ---------------------------------------------------------------- flottants */
.flottant{position:fixed;right:16px;bottom:88px;z-index:80;display:grid;gap:11px;justify-items:end}
@media(min-width:900px){.flottant{bottom:24px}}
#haut{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(11,21,38,.9);border:1px solid var(--ligne-2);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s}
#haut[data-on]{opacity:1;visibility:visible;transform:translateY(0)}
#haut svg{width:20px;height:20px;color:var(--blanc)}
#haut:hover{background:var(--bleu);border-color:var(--bleu-v)}
.appel-f{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:linear-gradient(140deg,var(--bleu-v),var(--bleu));box-shadow:0 16px 38px -12px rgba(20,80,200,.95)}
.appel-f svg{width:26px;height:26px;color:#fff}
.appel-f::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--bleu-v);
  animation:onde 2.4s ease-out infinite}
@keyframes onde{to{transform:scale(1.7);opacity:0}}
.appel-f:hover{transform:scale(1.07)}
/* sur mobile, la barre d'actions du bas fait déjà le travail : pas de doublon flottant */
@media(max-width:899px){.appel-f{display:none}}

/* barre d'actions mobile */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:78;display:grid;grid-template-columns:1fr 1fr 1fr;
  background:rgba(7,13,26,.97);backdrop-filter:blur(14px);border-top:1px solid var(--ligne-2)}
@media(min-width:900px){.barre{display:none}}
.barre a{padding:11px 6px 13px;text-align:center;display:grid;gap:4px;justify-items:center;
  font-size:.665rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--txt)}
.barre svg{width:20px;height:20px;color:var(--bleu-v)}
.barre a:first-child{background:linear-gradient(140deg,var(--bleu-v),var(--bleu));color:#fff}
.barre a:first-child svg{color:#fff}
@media(max-width:899px){body{padding-bottom:66px}}

/* ---------------------------------------------------------------- révélations */
[data-rev]{opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.9,.25,1),transform .75s cubic-bezier(.2,.9,.25,1)}
[data-rev="z"]{transform:scale(.955)}
[data-rev].vu{opacity:1;transform:none}
@media(min-width:1024px){
  [data-rev="g"]{transform:translateX(-34px)}
  [data-rev="d"]{transform:translateX(34px)}
}

/* ---------------------------------------------------------------- utilitaires */
.mt{margin-top:clamp(28px,3.4vw,48px)}
.mt-s{margin-top:18px}
.mb{margin-bottom:clamp(28px,3.4vw,48px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--mono)}
.tuf{color:var(--tuffeau)}
.bl{color:var(--bleu-p)}
.encart{border-left:3px solid var(--bleu-v);padding:16px 20px;border-radius:0 12px 12px 0;
  background:rgba(59,134,255,.08);font-size:.92rem}
.encart--t{border-left-color:var(--tuffeau);background:rgba(231,220,195,.07)}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.67rem;
  letter-spacing:.15em;text-transform:uppercase;padding:6px 11px;border-radius:7px;
  background:rgba(143,186,255,.09);border:1px solid var(--ligne);color:var(--bleu-p)}

.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--ligne)}
.tbl th{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tuffeau)}
.tbl tr:hover td{background:rgba(59,134,255,.06)}
.tbl td:nth-child(2){font-family:var(--mono);font-weight:700;color:var(--blanc);white-space:nowrap}
.tbl-w{overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--r)}

/* ---------------------------------------------------------------- responsive */
@media(min-width:760px){
  .hero__pts li{font-size:.83rem}
}
@media(min-width:1024px){
  .hero__in{grid-template-columns:1.06fr .94fr}
  .duo{grid-template-columns:1fr 1fr}
}
@media(min-width:1200px){
  .menu{display:flex}
  .nav__cta{display:inline-flex}
  .burger{display:none}
  .mob{display:none}
}
@media(max-width:899px){
  .topbar span.topbar__acc{display:none}
}
@media(max-width:760px){
  .topbar__g a[data-mail]{display:none}
  .marque__pl img{width:94px}
  .nav{min-height:64px}
  .pastille{width:92px;height:92px;font-size:.7rem;right:-6px;top:-14px}
  .pastille span{font-size:1.1rem}
  .btn{white-space:normal;text-align:center}
  .meteo__j{grid-template-columns:repeat(4,1fr)}
  .mj:nth-child(n+5){display:none}
}
@media(max-width:420px){
  .cases{grid-template-columns:1fr}
  .communes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:400px){
  .marque__pl{padding:6px 9px}
  .marque__pl img{width:82px}
  .nav{gap:12px}
}

/* ---------------------------------------------------------------- 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}
  [data-rev]{opacity:1;transform:none}
  .cadre img{animation:none}
  .bandeau__p{animation:none}
}

/* ---------------------------------------------------------------- impression */
@media print{
  .entete,.topbar,.barre,.flottant,.bandeau,.mob,.vis{display:none!important}
  body{background:#fff;color:#111}
  h1,h2,h3,h4{color:#000}
  .carte,.q,.chiffre{border-color:#ccc;background:#fff}
}

/* ---------------------------------------------------------------- panorama animé */
.pano{position:relative;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--ligne-2);
  box-shadow:var(--ombre);background:#0A1424}
.pano svg{width:100%;height:auto;display:block}
.pano__lg{padding:16px clamp(16px,2vw,22px) 20px;font-size:.86rem;line-height:1.6;
  border-top:1px solid var(--ligne);background:linear-gradient(160deg,rgba(22,41,74,.55),rgba(8,16,30,.9))}
.pano__lg b{display:block;margin-top:8px}
.pano__cr{display:block;margin-top:10px;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.08em;color:var(--txt-2)}

/* ── vue aérienne « inspection » ── */
.pano__im{position:relative;overflow:hidden;aspect-ratio:12/5;background:#0A1424}
.pano__im picture{position:absolute;inset:0;display:block}
@media(max-width:760px){.pano__im{aspect-ratio:2/1}}
.pano__im img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  animation:panoZoom 30s ease-in-out infinite alternate}
@keyframes panoZoom{from{transform:scale(1.01)}to{transform:scale(1.09) translate3d(-1.5%,-1%,0)}}
.pano__im::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(178deg,rgba(6,11,22,.22),transparent 34%,rgba(10,20,36,.62))}
/* grille de relevé */
.pano__grille{position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(143,186,255,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,186,255,.28) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 50%,#000,transparent 76%);
  mask-image:radial-gradient(78% 78% at 50% 50%,#000,transparent 76%)}
/* ligne de scan qui balaie la vue */
.pano__scan{position:absolute;top:0;bottom:0;left:-16%;width:14%;min-width:70px;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,175,255,.28) 42%,rgba(200,226,255,.85) 50%,rgba(120,175,255,.28) 58%,transparent);
  animation:panoScan 8.5s ease-in-out infinite}
@keyframes panoScan{0%{left:-16%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:104%;opacity:0}}
/* points de relevé qui pulsent */
.pano__pt{position:absolute;z-index:4;width:12px;height:12px;border-radius:50%;
  background:rgba(143,186,255,.95);box-shadow:0 0 0 0 rgba(59,134,255,.55);
  animation:panoPt 3.4s ease-out infinite}
.pano__pt--1{left:44%;top:38%}
.pano__pt--2{left:63%;top:31%;animation-delay:1.1s}
.pano__pt--3{left:33%;top:58%;animation-delay:2.2s}
@keyframes panoPt{0%{box-shadow:0 0 0 0 rgba(59,134,255,.6);opacity:1}
  70%{box-shadow:0 0 0 22px rgba(59,134,255,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(59,134,255,0);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .pano__im img{animation:none}
  .pano__scan{display:none}
  .pano__pt{animation:none}
}
.svc--cta .btn{white-space:normal;line-height:1.3;font-size:.86rem;padding-inline:16px}

/* ---------------------------------------------------------------- comparateurs avant/après */
.cmp{border-radius:var(--r);overflow:hidden;border:1px solid var(--ligne);
  background:linear-gradient(160deg,rgba(22,41,74,.55),rgba(9,17,32,.92));
  transition:border-color .3s,transform .3s}
.cmp:hover{border-color:var(--ligne-2);transform:translateY(-4px)}
.cmp .ba{border:0;border-radius:0}
.cmp figcaption{padding:20px clamp(18px,2vw,24px) 24px}
.cmp figcaption p{font-size:.925rem}

/* ---------------------------------------------------------------- diaporama du héros */
.cadre--diapo{aspect-ratio:16/11;padding:0}
.cadre--diapo::after{z-index:2}
.dia{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none;
  transition:opacity 1.05s ease}
.dia[data-on]{opacity:1;pointer-events:auto}
.dia img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:none}
.dia[data-on] img{animation:zoomlent 22s ease-in-out infinite alternate}
.dia__lg{position:absolute;left:20px;right:20px;bottom:46px;z-index:4;display:flex;
  align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dia__pts{position:absolute;left:0;right:0;bottom:16px;z-index:5;display:flex;
  justify-content:center;gap:8px}
.dia__pts button{width:26px;height:5px;border-radius:99px;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.28);transition:background .3s,width .3s}
.dia__pts button:hover{background:rgba(255,255,255,.55)}
.dia__pts button[data-on]{width:42px;background:linear-gradient(90deg,var(--bleu-v),var(--tuffeau))}
.hero__leg{margin-top:14px;text-align:center;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--txt-2)}
@media(max-width:520px){
  .dia__lg{left:14px;right:14px;bottom:42px}
  .dia__lg .cadre__n{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){
  .dia{transition:none}
  .dia[data-on] img{animation:none}
}
/* sur mobile, les photos passent tout en haut, juste sous l'en-tête */
@media(max-width:1023px){
  .hero__in{display:flex;flex-direction:column}
  .hero__vis{order:-1;width:100%;margin-bottom:6px}
  .hero__leg{margin-bottom:10px}
}