/* ============================================================
   PORTES MR SOLUTIONS · palette « Acier nocturne »
   charbon profond + bleu acier électrique + blanc cassé
   ============================================================ */
:root{
  --ink:#0B0D11;
  --ink-2:#0F1217;
  --steel-1:#1A1F27;
  --steel-2:#141821;
  --steel-3:#10131A;
  --line:#262C36;
  --line-soft:rgba(214,224,240,.09);

  --blue:#2E6BFF;
  --blue-hi:#5A8CFF;
  --blue-lo:#1B4FD6;
  --blue-glow:rgba(46,107,255,.32);
  --steel:#8A8F98;
  --steel-lo:#5E636B;
  --steel-soft:#EEF2F8;
  --steel-tint:rgba(138,143,152,.13);
  --steel-line:rgba(138,143,152,.5);

  --paper:#EEF2F8;
  --paper-dim:#A9B3C4;
  --paper-mute:#6E7787;

  --card-grad:linear-gradient(180deg,var(--steel-1) 0%,var(--steel-2) 100%);
  --card-grad-hi:linear-gradient(180deg,#212733 0%,#171C26 100%);
  --card-edge:inset 0 1px 0 rgba(214,224,240,.06);
  --card-shadow:0 1px 0 rgba(214,224,240,.04),0 18px 40px -22px rgba(0,0,0,.8);
  --card-shadow-hover:0 1px 0 rgba(214,224,240,.08),0 28px 60px -22px rgba(0,0,0,.9);

  --blue-grad:linear-gradient(180deg,var(--blue-hi) 0%,var(--blue) 45%,var(--blue-lo) 100%);
  --blue-btn-shadow:0 2px 0 #15399E,0 14px 30px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.28);

  /* relief des ecritures bold : ombre nette + diffuse, dosee (ressenti, pas spectaculaire) */
  --title-shadow:0 1px 0 rgba(0,0,0,.4),0 3px 18px rgba(0,0,0,.45);
  --num-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 20px rgba(0,0,0,.5);

  /* couleurs de marque sociale (hover) */
  --ig-grad:linear-gradient(135deg,#F58529 0%,#DD2A7B 50%,#8134AF 90%);
  --fb-blue:#1877F2;

  --font-display:'Saira Condensed','DejaVu Sans Condensed',sans-serif;
  --font-body:'Inter','DejaVu Sans',sans-serif;

  --nav-h:74px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
.wrap{width:min(1240px,92vw);margin:0 auto}

.eyebrow{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.32em;text-transform:uppercase;color:var(--blue-hi);display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--blue),transparent)}

h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:.98;letter-spacing:-.005em;text-transform:uppercase}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:rgba(11,13,17,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(11,13,17,.92)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:min(1240px,94vw)}
.brand{display:flex;align-items:center;gap:13px}
.brand-logo{height:46px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.brand-txt{display:flex;flex-direction:column;line-height:1;transform:translateY(5px)}
.brand-txt b{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:.04em;color:var(--paper)}
.brand-txt b{white-space:nowrap}
.brand-txt span{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:500;font-size:11.5px;color:var(--paper-mute);margin-top:4px}
.brand-txt span i{font-style:normal}
.nav-links{display:flex;align-items:center;gap:30px;flex-shrink:0}
.nav-links a{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);position:relative;padding:6px 0;transition:color .2s;white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--blue);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--paper)}
.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:18px;flex-shrink:0}
.nav-soc-group{display:flex;align-items:center;gap:9px}
.nav-soc-group a{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--paper-dim);background:var(--card-grad);box-shadow:var(--card-edge);border:1px solid var(--line-soft);transition:transform .25s var(--ease),box-shadow .3s,color .3s,border-color .3s,background .3s}
.nav-soc-group a svg{width:18px;height:18px}
.nav-soc-ig:hover{color:#fff;border-color:transparent;background:var(--ig-grad);transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(221,42,123,.6)}
.nav-soc-fb:hover{color:#fff;border-color:transparent;background:var(--fb-blue);transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(24,119,242,.6)}
.nav-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:12px 20px;border-radius:10px;background:linear-gradient(180deg,#4A7CE8 0%,#3060CC 55%,#2249A4 100%);box-shadow:0 2px 0 #1B3C86,inset 0 1px 0 rgba(255,255,255,.2);transition:transform .15s,box-shadow .25s;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{transform:translateY(-2px);background:linear-gradient(180deg,#5A8AF0 0%,#3A6BD8 55%,#2A54B4 100%);box-shadow:0 4px 0 #1B3C86,0 14px 28px -14px rgba(46,107,255,.6),inset 0 1px 0 rgba(255,255,255,.26)}
.nav-cta svg{width:17px;height:17px}
.nav-cta .pulse{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
.nav-quote{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:10.5px 18px;border-radius:10px;background:linear-gradient(180deg,#1A2028 0%,#12161D 100%);border:1.5px solid var(--steel-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .15s,box-shadow .25s,background .25s,border-color .2s;white-space:nowrap;flex-shrink:0}
.nav-quote:hover{transform:translateY(-2px);background:linear-gradient(180deg,#242B35 0%,#1A2028 100%);border-color:var(--steel);box-shadow:0 8px 22px -10px rgba(138,143,152,.45),inset 0 1px 0 rgba(255,255,255,.09)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.nav-mobile{display:none;align-items:center;gap:10px}
.nav-soc,.nav-tel{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px}
.nav-soc{border:1px solid var(--line-soft);color:var(--paper-dim);background:rgba(214,224,240,.04)}
.nav-tel{background:linear-gradient(180deg,#4A7CE8 0%,#3060CC 55%,#2249A4 100%);color:#fff;box-shadow:0 2px 0 #1B3C86,inset 0 1px 0 rgba(255,255,255,.2)}
.nav-soc svg,.nav-tel svg{width:18px;height:18px}
.burger{position:relative;z-index:121;width:42px;height:42px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(214,224,240,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--blue);transition:transform .35s var(--ease),opacity .2s,width .35s}
.burger span:nth-child(1){width:19px}
.burger span:nth-child(2){width:13px;transform:translateX(-3px)}
.burger span:nth-child(3){width:16px;transform:translateX(2px)}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);width:20px}
.burger.open span:nth-child(2){opacity:0;transform:translateX(-12px)}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);width:20px}
.mnav{position:fixed;inset:0;z-index:119;background:rgba(8,10,14,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;padding:104px 9vw 44px;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .35s ease}
.mnav.open{opacity:1;pointer-events:auto;visibility:visible}
.mn-link{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,6.5vw,2.3rem);color:var(--paper);text-transform:uppercase;letter-spacing:.02em;padding:15px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-soft);transform:translateY(22px);opacity:0;transition:transform .5s var(--ease),opacity .5s,color .2s}
.mn-link svg{width:22px;height:22px;color:var(--blue);flex-shrink:0}
.mn-link:active{color:var(--blue-hi)}
.mnav.open .mn-link{transform:none;opacity:1}
.mnav.open .mn-link:nth-child(1){transition-delay:.06s}
.mnav.open .mn-link:nth-child(2){transition-delay:.12s}
.mnav.open .mn-link:nth-child(3){transition-delay:.18s}
.mnav.open .mn-link:nth-child(4){transition-delay:.24s}
.mnav.open .mn-link:nth-child(5){transition-delay:.30s}
.mn-link:nth-child(6){transition-delay:.36s}
.mn-link:nth-child(7){transition-delay:.42s}
.mn-cta{margin-top:30px;display:flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,#4A7CE8 0%,#3060CC 55%,#2249A4 100%);color:#fff;font-family:var(--font-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:16px 18px;border-radius:12px;transform:translateY(22px);opacity:0;transition:transform .5s .3s var(--ease),opacity .5s .3s;box-shadow:0 2px 0 #1B3C86,0 10px 26px -10px rgba(46,107,255,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.mn-cta svg{flex-shrink:0;width:24px;height:24px}
.mn-cta-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:4px}
.mn-cta-sub{font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.82)}
.mn-cta-num{font-size:23px;letter-spacing:.02em}
.mnav.open .mn-cta{transform:none;opacity:1}
.mn-tag{margin-top:22px;text-align:center;font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-mute);opacity:0;transition:opacity .5s .4s}
.mnav.open .mn-tag{opacity:1}
.mn-close{position:absolute;top:22px;right:9vw;z-index:5;width:46px;height:46px;border-radius:12px;border:1px solid var(--line-soft);background:rgba(214,224,240,.05);color:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,color .2s}
.mn-close svg{width:24px;height:24px}
.mn-close:hover{transform:rotate(90deg);border-color:rgba(214,224,240,.4);color:var(--paper);background:rgba(214,224,240,.08)}
.mn-soc{display:flex;justify-content:center;gap:16px;margin-top:30px;opacity:0;transition:opacity .5s .42s}
.mnav.open .mn-soc{opacity:1}
.mn-soc a{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--paper);background:var(--card-grad);box-shadow:var(--card-edge),0 8px 20px -10px rgba(0,0,0,.7);border:1px solid var(--line-soft);transition:transform .25s var(--ease),box-shadow .3s,color .3s,border-color .3s,background .3s}
.mn-soc a svg{width:25px;height:25px;position:relative;z-index:1}
.mn-soc-ig:active,.mn-soc-ig:hover{color:#fff;border-color:transparent;background:var(--ig-grad);transform:translateY(-3px);box-shadow:0 12px 28px -8px rgba(221,42,123,.6)}
.mn-soc-fb:active,.mn-soc-fb:hover{color:#fff;border-color:transparent;background:var(--fb-blue);transform:translateY(-3px);box-shadow:0 12px 28px -8px rgba(24,119,242,.6)}
body.menu-open{overflow:hidden}

/* ===== HERO UNIFIE ===== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;background:var(--ink);padding:calc(var(--nav-h) + 32px) 6vw 44px}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 100% at 50% 40%,transparent 30%,rgba(11,13,17,.55) 100%),linear-gradient(180deg,rgba(11,13,17,.4) 0%,transparent 30%,transparent 65%,rgba(11,13,17,.75) 100%)}
.hero-inner{position:relative;z-index:2;max-width:880px;display:flex;flex-direction:column;align-items:center;flex:1 1 auto;justify-content:center}
.hero-inner .eyebrow{margin-bottom:24px}
.hero h1{font-size:clamp(2.6rem,5.6vw,5rem);line-height:.98;letter-spacing:-.015em;color:var(--paper);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:var(--blue-hi)}
.hero-sub{max-width:620px;margin:24px auto 0;color:var(--paper);font-size:clamp(16px,1.6vw,19px);line-height:1.6;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:stretch;margin-top:38px}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase;padding:18px 32px;border-radius:13px;transition:transform .15s,box-shadow .25s,gap .25s,background .25s}
.btn-primary{background:linear-gradient(180deg,#4A7CE8 0%,#3060CC 55%,#2249A4 100%);color:#fff;box-shadow:0 2px 0 #1B3C86,0 12px 26px -14px rgba(46,107,255,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-primary:hover{transform:translateY(-2px);gap:15px;background:linear-gradient(180deg,#5A8AF0 0%,#3A6BD8 55%,#2A54B4 100%);box-shadow:0 4px 0 #1B3C86,0 18px 34px -16px rgba(46,107,255,.6),inset 0 1px 0 rgba(255,255,255,.26)}
.btn-ghost{background:linear-gradient(180deg,#1A2028 0%,#12161D 100%);color:var(--steel-soft);border:1.5px solid var(--steel-line);padding:16.5px 30.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.btn-ghost:hover{transform:translateY(-2px);gap:15px;background:linear-gradient(180deg,#242B35 0%,#1A2028 100%);border-color:var(--steel);box-shadow:0 10px 26px -12px rgba(138,143,152,.45),inset 0 1px 0 rgba(255,255,255,.07)}
.btn-primary svg,.btn-ghost svg{width:20px;height:20px}
.btn-primary{padding-top:13px;padding-bottom:13px}
.btn-primary svg{flex-shrink:0}
.btn-stack{display:flex;flex-direction:column;align-items:center;line-height:1;gap:4px}
.btn-main{font-size:19px;letter-spacing:.06em}
.btn-sub{font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.btn-primary .btn-sub{color:rgba(255,255,255,.8)}
.btn-ghost .btn-stack{justify-content:center}
.hero-rating{margin-top:34px;display:inline-flex;align-items:center;gap:11px;font-size:14.5px;color:var(--paper);background:rgba(11,13,17,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 16px 9px 19px;border-radius:50px;border:1.5px solid rgba(255,194,71,.5);box-shadow:0 0 0 1px rgba(255,194,71,.06),0 6px 22px -7px rgba(255,194,71,.4);text-shadow:0 1px 8px rgba(0,0,0,.5);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .3s,border-color .2s,background .3s}
.hero-rating:hover,.hero-rating:active{transform:translateY(-2px);border-color:#FFC247;background:rgba(11,13,17,.6);box-shadow:0 0 0 1px rgba(255,194,71,.16),0 10px 28px -6px rgba(255,194,71,.55)}
.hero-rating .hr-arrow{width:14px;height:14px;color:#FFD98A;flex-shrink:0;transition:transform .25s var(--ease)}
.hero-rating:hover .hr-arrow,.hero-rating:active .hr-arrow{transform:translateX(3px)}
.hero-rating .stars{display:inline-flex;gap:2px}
.hero-rating .stars svg{width:16px;height:16px;color:#FFC247}
.hero-rating b{color:#fff;font-weight:600}
.br-mobile{display:none}

/* ===== BANDE 2 CHEMINS (sous le hero) ===== */
.paths{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(34px,5vw,56px) 0}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.path-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3vw,40px);border-radius:18px;background:var(--card-grad);box-shadow:var(--card-edge),var(--card-shadow);overflow:hidden;transition:transform .4s var(--ease),box-shadow .3s,background .3s}
.path-card::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;transition:width .3s}
.path-urgence::before{background:var(--blue-grad)}
.path-projet::before{background:linear-gradient(180deg,var(--steel),var(--steel-lo))}
.path-card:hover,.path-card:active{transform:translateY(-5px);background:var(--card-grad-hi);box-shadow:var(--card-edge),var(--card-shadow-hover)}
.path-card:hover::before,.path-card:active::before{width:6px}
.path-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 13px;border-radius:50px;margin-bottom:18px}
.path-urgence .path-tag{background:rgba(46,107,255,.14);border:1px solid rgba(46,107,255,.45);color:var(--blue-hi)}
.path-projet .path-tag{background:rgba(138,143,152,.14);border:1px solid rgba(138,143,152,.4);color:#D6E0F0}
.path-tag .dot{width:7px;height:7px;border-radius:50%}
.path-urgence .path-tag .dot{background:var(--blue)}
.path-projet .path-tag .dot{background:var(--steel)}
@keyframes pulse-acier{0%{box-shadow:0 0 0 0 rgba(138,143,152,.6)}70%{box-shadow:0 0 0 7px rgba(138,143,152,0)}100%{box-shadow:0 0 0 0 rgba(138,143,152,0)}}
.path-card h2{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--paper);line-height:1;letter-spacing:-.01em}
.path-card h2 em{font-style:normal}
.path-urgence h2 em{color:var(--blue-hi)}
.path-projet h2 em{color:#A9B3C4}
.path-card p{margin-top:12px;color:var(--paper-dim);font-size:15.5px;line-height:1.55}
.path-link{margin-top:20px;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;transition:gap .25s}
.path-urgence .path-link{color:var(--blue-hi)}
.path-projet .path-link{color:#A9B3C4}
.path-card:hover .path-link,.path-card:active .path-link{gap:14px}
.path-link svg{width:18px;height:18px}

@media(max-width:760px){
  .paths-grid{grid-template-columns:1fr;gap:16px}
  .hero{min-height:auto}
  .hero-inner{flex:initial}
  .hero-cta{flex-direction:column;width:100%;max-width:340px;align-items:stretch}
  .btn-primary,.btn-ghost{justify-content:center;width:100%}
  .btn-stack{align-items:center}
  .hero-rating .br-mobile{display:block}
  .hero-rating .rating-sep{display:none}
}

/* ===== SECTIONS ===== */
section{position:relative}
.sec{padding:clamp(60px,7vw,96px) 0}
.sec-head{max-width:660px;margin-bottom:clamp(38px,5vw,58px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-top:18px;color:var(--paper);text-shadow:var(--title-shadow)}
.sec-head h2 em{font-style:normal;color:var(--blue)}
.sec-head p{margin-top:18px;color:var(--paper-dim);font-size:17px}

/* Douze colonnes : la reparation d'urgence et l'installation portent le
   commerce, les quatre autres l'accompagnent. Six boites identiques
   disaient le contraire. */
.svc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.svc:nth-child(1){grid-column:span 7}
.svc:nth-child(2){grid-column:span 5}
.svc:nth-child(n+3){grid-column:span 3}
.svc:nth-child(1) h3{font-size:clamp(1.5rem,2.3vw,2rem)}
.svc:nth-child(1) p,.svc:nth-child(2) p{font-size:16.5px}
.svc:nth-child(n+3){padding:28px 24px 26px}
.svc:nth-child(n+3) h3{font-size:1.15rem}
.svc:nth-child(n+3) p{font-size:14.5px}
@media(max-width:1080px){
  .svc:nth-child(1),.svc:nth-child(2){grid-column:span 6}
  .svc:nth-child(n+3){grid-column:span 6}
}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr}
  .svc:nth-child(n){grid-column:auto}
}
.svc{position:relative;background:var(--card-grad);border-radius:16px;padding:34px 30px 30px;box-shadow:var(--card-edge),var(--card-shadow);overflow:hidden;transition:background .3s,transform .4s var(--ease),box-shadow .3s}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),transparent);opacity:0;transition:opacity .3s}
.svc:hover,.svc:active{background:var(--card-grad-hi);transform:translateY(-6px);box-shadow:var(--card-edge),var(--card-shadow-hover)}
.svc:hover::before,.svc:active::before{opacity:1}
.svc-ico{width:54px;height:54px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,rgba(46,107,255,.2),rgba(46,107,255,.05));border:1px solid rgba(46,107,255,.28);margin-bottom:22px;transition:transform .4s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.svc-ico svg{width:27px;height:27px;color:var(--blue-hi);transition:transform .4s var(--ease)}
.svc:hover .svc-ico,.svc:active .svc-ico{transform:translateY(-2px) scale(1.06);background:linear-gradient(160deg,rgba(46,107,255,.35),rgba(46,107,255,.12));border-color:rgba(90,140,255,.55);box-shadow:0 8px 20px -8px rgba(46,107,255,.5)}
.svc:hover .svc-ico svg,.svc:active .svc-ico svg{transform:scale(1.08)}
.svc h3{font-size:1.55rem;color:var(--paper);letter-spacing:0;text-shadow:var(--title-shadow)}
.svc p{margin-top:11px;color:var(--paper-dim);font-size:15.5px;line-height:1.55}
.svc .tag-urg{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#D6E0F0;background:rgba(138,143,152,.14);border:1px solid rgba(138,143,152,.4);padding:5px 11px 5px 10px;border-radius:50px}
.tag-urg-dot{width:7px;height:7px;border-radius:50%;background:#A9B3C4;box-shadow:0 0 6px 1px rgba(169,179,196,.9);animation:urg-blink 1.6s ease-in-out infinite}
@keyframes urg-blink{0%,100%{opacity:1;box-shadow:0 0 7px 2px rgba(169,179,196,.95)}50%{opacity:.35;box-shadow:0 0 3px 0 rgba(169,179,196,.4)}}
@keyframes urg-glow{0%,100%{border-color:rgba(138,143,152,.4);box-shadow:0 0 0 0 rgba(138,143,152,0)}50%{border-color:rgba(138,143,152,.7);box-shadow:0 0 12px -2px rgba(138,143,152,.5)}}

.compare-sec{background:var(--ink-2);border-top:1px solid var(--line)}
.compare-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,5vw,72px);align-items:center}
.compare-copy h2{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-top:18px;color:var(--paper);text-shadow:var(--title-shadow)}
.compare-copy h2 em{font-style:normal;color:var(--blue)}
.compare-copy p{margin-top:20px;color:var(--paper-dim);font-size:16.5px;line-height:1.65;max-width:430px}
.compare-hint{margin-top:26px;display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.compare-hint svg{width:19px;height:19px;color:var(--blue-hi);flex-shrink:0}
.compare{position:relative;width:100%;max-width:560px;margin:0;justify-self:end;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),var(--card-edge);border:1px solid var(--line-soft);user-select:none;aspect-ratio:4/3;background:#0d1016}
.compare-layer{position:absolute;inset:0;background-size:cover;background-position:center}
.compare-after{z-index:1}
.compare-before{z-index:2;width:25%;border-right:3px solid var(--paper);overflow:hidden}
.compare-before .compare-img{position:absolute;inset:0;background-size:cover;background-position:center;width:var(--cmp-w,560px);max-width:none;height:100%}
.compare-label{position:absolute;bottom:18px;z-index:4;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;padding:8px 16px;border-radius:50px;color:#fff;background:linear-gradient(180deg,rgba(28,33,43,.9),rgba(11,13,17,.86));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px -10px rgba(0,0,0,.85);transition:opacity .12s linear}
.compare-label .cl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.compare-label.l-before{left:18px}
.compare-label.l-before .cl-dot{background:var(--paper-dim);box-shadow:0 0 0 3px rgba(169,179,196,.18),0 0 8px rgba(169,179,196,.5)}
.compare-label.l-after{right:18px}
.compare-label.l-after .cl-dot{background:var(--blue-hi);box-shadow:0 0 0 3px rgba(46,107,255,.22),0 0 8px rgba(46,107,255,.7)}
.compare-handle{position:absolute;top:0;bottom:0;z-index:5;width:44px;left:25%;transform:translateX(-50%);cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.compare-handle .bar{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:3px;background:var(--cmp-bar,rgba(255,255,255,.9));box-shadow:0 0 0 .5px rgba(0,0,0,.25),0 0 12px var(--cmp-glow,rgba(255,255,255,.3))}
.compare-handle .knob{position:relative;width:40px;height:40px;border-radius:50%;background:rgba(13,16,22,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid var(--cmp-bar,rgba(255,255,255,.9));box-shadow:0 8px 22px -8px rgba(0,0,0,.75),0 0 14px -2px var(--cmp-glow,transparent);display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .2s var(--ease),background .2s}
.compare-handle .knob:hover{transform:scale(1.06);background:rgba(13,16,22,.7)}
.compare-handle .knob svg{width:17px;height:17px}

.why{background:var(--ink)}
.why-grid{display:grid;grid-template-columns:1.15fr .85fr;column-gap:clamp(40px,5vw,72px);row-gap:0;align-items:center;grid-template-areas:"head visual" "list visual"}.why-head{grid-area:head}.why-list{grid-area:list}.why-visual{grid-area:visual}
.why-list{display:flex;flex-direction:column;gap:2px;margin-top:30px}
.why-intro{color:var(--paper-dim);font-size:16.5px;line-height:1.65;margin-top:22px;max-width:520px;border-left:2px solid var(--blue);padding-left:18px}
.why-row{display:flex;align-items:flex-start;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.why-row:last-child{border-bottom:0}
.why-num{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--blue-hi);letter-spacing:.03em;flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card-grad);border:1px solid var(--line-soft);box-shadow:var(--card-edge),0 8px 20px -12px rgba(0,0,0,.7);position:relative;transition:transform .45s var(--ease),background .35s,box-shadow .35s,color .35s,border-color .35s}
.why-row h3{font-size:1.3rem;color:var(--paper);letter-spacing:0;text-transform:none;font-weight:700;font-family:var(--font-display);text-shadow:var(--title-shadow)}
.why-row p{color:var(--paper-dim);font-size:15px;margin-top:4px;line-height:1.55}
.why-visual{position:relative;border-radius:20px;overflow:hidden;width:100%;max-width:420px;aspect-ratio:3/4;justify-self:end;box-shadow:var(--card-edge),0 30px 70px -30px rgba(0,0,0,.9);border:1px solid var(--line-soft);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.why-visual:hover{transform:translateY(-6px);box-shadow:var(--card-edge),0 42px 90px -32px rgba(0,0,0,.95),0 0 0 1px rgba(46,107,255,.18)}
.why-visual .vimg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.why-visual:hover .vimg{transform:scale(1.04)}
.vimg-marc{background-position:center 8%!important}
.why-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,17,.10) 0%,transparent 26%,rgba(11,13,17,.30) 56%,rgba(11,13,17,.97) 100%)}
.why-person{position:absolute;left:24px;bottom:24px;z-index:2}
.why-person b{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.2rem);color:#fff;line-height:1;display:block;text-shadow:var(--num-shadow)}
.why-person span{color:var(--blue-hi);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-display);font-weight:700;margin-top:5px;display:block;text-shadow:0 1px 10px rgba(0,0,0,.9)}

.zones{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zones-grid-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,72px);align-items:center}
.zones-regions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.zones-note{margin:16px 0 0;font-size:13px;color:var(--paper-dim);letter-spacing:.01em}.zones-note-m{display:none}.zones-note a{color:var(--blue-hi);text-decoration:underline;text-underline-offset:2px;transition:color .2s}.zones-note a:hover,.zones-note a:active{color:var(--paper)}
.zone-region{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--paper);padding:6px 12px;border-radius:50px;background:var(--card-grad);box-shadow:var(--card-edge),var(--card-shadow);border:1px solid var(--line-soft);transition:color .25s,border-color .25s,transform .45s var(--ease),box-shadow .3s,background .3s,opacity .45s var(--ease)}
.zone-region::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px rgba(46,107,255,.16);flex-shrink:0;transition:box-shadow .3s,background .3s}
.zone-region:hover,.zone-region:active{transform:translateY(-3px);border-color:rgba(46,107,255,.45);background:var(--card-grad-hi);box-shadow:var(--card-edge),0 14px 30px -14px rgba(0,0,0,.8)}
.zone-region:hover::before,.zone-region:active::before{background:var(--blue-hi);box-shadow:0 0 0 4px rgba(46,107,255,.24),0 0 10px rgba(46,107,255,.6)}@media(max-width:600px){.zones-regions{display:none}.zones-note:not(.zones-note-m){display:none}.zones-note-m{display:block;margin-top:20px}}
/* carte territoire : vrai embed Google Maps, stylise pour le theme sombre */
.zones-map{position:relative;aspect-ratio:1/1;max-width:460px;width:100%;margin:0 auto;border-radius:20px;background:var(--card-grad);box-shadow:var(--card-edge),0 24px 60px -30px rgba(0,0,0,.85);border:1px solid var(--line-soft);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s ease,filter .3s ease}.zones-map:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--card-edge),0 40px 90px -28px rgba(0,0,0,.95),0 0 60px -12px rgba(46,107,255,.45);filter:brightness(1.14) saturate(1.12)}.zones-map:active{transform:scale(.985);box-shadow:var(--card-edge),0 16px 40px -18px rgba(0,0,0,.9),0 0 42px -14px rgba(46,107,255,.42);filter:brightness(1.1)}


.zones-map-tag{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:12px;background:rgba(11,13,17,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:11px 17px;border-radius:14px;border:1px solid var(--line-soft);box-shadow:0 10px 28px -12px rgba(0,0,0,.8);pointer-events:none}
.zmt-pin{color:var(--blue-hi);display:flex;filter:drop-shadow(0 4px 10px rgba(46,107,255,.5))}.zones-map-svg{width:100%;height:100%;display:block}.tm-fill{fill:url(#tmFill)}.tm-mrc path{fill:none;stroke:#83A8FF;stroke-width:.9;opacity:.34}.tm-halo{fill:rgba(125,169,255,.2)}.tm-dot{fill:#7DA9FF;filter:drop-shadow(0 0 5px rgba(125,169,255,.85))}.tm-label{fill:var(--paper);font-family:var(--font-body);font-size:18px;font-weight:600;paint-order:stroke;stroke:rgba(11,13,17,.72);stroke-width:3.2px;stroke-linejoin:round}.tm-base-ring{fill:none;stroke:#7DA9FF}.tm-base-core{fill:#fff;filter:drop-shadow(0 0 7px rgba(90,140,255,.95))}.tm-pulse{fill:none;stroke:#7DA9FF;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:tmPulse 2.6s ease-out infinite}.tm-pulse2{animation-delay:1.3s}@keyframes tmPulse{0%{transform:scale(.6);opacity:.6}80%{opacity:0}100%{transform:scale(2.1);opacity:0}}.tm-eyebrow{fill:#7DA9FF;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.22em;paint-order:stroke;stroke:rgba(11,13,17,.6);stroke-width:2.5px;stroke-linejoin:round}.tm-base-label{fill:var(--paper);font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:.01em;paint-order:stroke;stroke:rgba(11,13,17,.78);stroke-width:3.6px;stroke-linejoin:round}@media(prefers-reduced-motion:reduce){.tm-pulse{animation:none;opacity:.25}}
.zmt-pin svg{width:26px;height:26px}
.zones-map-tag b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--paper);display:block;line-height:1.1;letter-spacing:.02em}
.zones-map-tag span{font-size:12.5px;color:var(--paper-dim);letter-spacing:.02em}
.reviews{background:var(--ink)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{position:relative;background:var(--card-grad);border-radius:16px;padding:30px 28px;box-shadow:var(--card-edge),var(--card-shadow);display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .3s,background .3s}
.rev::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FFC247,transparent);opacity:0;transition:opacity .3s}
.rev:hover,.rev:active{transform:translateY(-6px);background:var(--card-grad-hi);box-shadow:var(--card-edge),var(--card-shadow-hover)}
.rev:hover::before,.rev:active::before{opacity:1}
.rev-stars{display:flex;gap:2px;margin-bottom:16px}
.rev-stars svg{width:18px;height:18px;color:#FFC247}
.rev p{color:var(--paper);font-size:16px;line-height:1.6;flex:1}
.rev-by{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.rev-av{width:42px;height:42px;border-radius:50%;background:var(--blue-grad);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;flex-shrink:0;transition:transform .4s var(--ease),box-shadow .3s}
.rev:hover .rev-av,.rev:active .rev-av{transform:scale(1.08);box-shadow:0 6px 16px -6px rgba(46,107,255,.6)}
.rev-by b{font-size:15px;color:var(--paper);display:block;font-weight:600}
.rev-by span{font-size:12.5px;color:var(--paper-mute);display:flex;align-items:center;gap:5px}
.rev-by span svg{width:13px;height:13px}.rev-by .rev-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1;letter-spacing:.01em;color:#fff;background:var(--blue-grad);box-shadow:0 2px 0 var(--blue-lo),0 8px 18px -6px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.10);text-shadow:0 1px 1px rgba(11,13,17,.28)}
.rev-rating{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:15px;color:var(--paper-mute)}
.rev-rating-stars{display:inline-flex;gap:2px}
.rev-rating-stars svg{width:17px;height:17px;color:#FFC247}
.rev-rating b{color:#fff;font-weight:700;font-size:17px}
.rev-cta{display:flex;justify-content:center;margin-top:clamp(36px,4vw,48px)}
.rev-all{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--paper);padding:12px 22px;border-radius:50px;background:rgba(11,13,17,.4);border:1.5px solid rgba(255,194,71,.5);box-shadow:0 0 0 1px rgba(255,194,71,.06),0 7px 24px -7px rgba(255,194,71,.45);text-decoration:none;transition:transform .15s,box-shadow .3s,background .3s,border-color .2s}
.rev-all .g-logo{width:18px;height:18px;flex-shrink:0}
.rev-all .ar{width:15px;height:15px;color:#FFD98A;flex-shrink:0;transition:transform .25s var(--ease)}
.rev-all:hover,.rev-all:active{transform:translateY(-2px);background:rgba(11,13,17,.55);border-color:#FFC247;box-shadow:0 0 0 1px rgba(255,194,71,.16),0 11px 30px -6px rgba(255,194,71,.62)}
.rev-all:hover .ar,.rev-all:active .ar{transform:translateX(3px)}

.contact{position:relative;background:var(--ink-2);overflow:hidden;border-top:1px solid var(--line)}
.contact::before{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(46,107,255,.13),transparent 65%);pointer-events:none}
.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,70px);align-items:start}
.contact-left h2{font-size:clamp(2.3rem,4.6vw,3.7rem);color:var(--paper)}
.contact-left h2 em{font-style:normal;color:var(--blue)}
.contact-left p{margin-top:20px;color:var(--paper-dim);font-size:17px;max-width:440px}
.contact-perks{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.contact-perk{display:flex;align-items:center;gap:13px;color:var(--paper);font-size:16px}
.contact-perk svg{width:22px;height:22px;color:var(--blue);flex-shrink:0}
.contact-phone{margin-top:34px;display:inline-flex;align-items:center;gap:14px;padding:18px 26px;border-radius:14px;background:var(--card-grad);box-shadow:var(--card-edge),var(--card-shadow);border:1px solid var(--line-soft);transition:transform .4s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.contact-phone:hover,.contact-phone:active{transform:translateY(-4px);background:var(--card-grad-hi);border-color:rgba(138,143,152,.35);box-shadow:var(--card-edge),0 24px 48px -18px rgba(0,0,0,.85),0 0 0 1px rgba(138,143,152,.1)}
.contact-phone .cp-ico{width:48px;height:48px;border-radius:11px;background:linear-gradient(180deg,#4A7CE8 0%,#3060CC 55%,#2249A4 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 0 #1B3C86,0 8px 20px -10px rgba(46,107,255,.5),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .4s var(--ease),box-shadow .3s}
.contact-phone:hover .cp-ico,.contact-phone:active .cp-ico{transform:scale(1.07) translateY(-1px);box-shadow:0 2px 0 #1B3C86,0 12px 28px -12px rgba(46,107,255,.6),inset 0 1px 0 rgba(255,255,255,.24)}
.contact-phone .cp-ico svg{width:23px;height:23px;color:#fff;transition:transform .4s var(--ease)}
.contact-phone:hover .cp-ico svg,.contact-phone:active .cp-ico svg{transform:scale(1.08)}
.contact-phone .cp-txt span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute);font-family:var(--font-display);font-weight:600}
.contact-phone .cp-txt b{font-family:var(--font-display);font-weight:800;font-size:27px;color:var(--paper);display:block;line-height:1;letter-spacing:.01em}

.form-card{background:var(--card-grad);border-radius:20px;padding:clamp(28px,3vw,40px);box-shadow:var(--card-edge),0 30px 70px -30px rgba(0,0,0,.9);border:1px solid var(--line-soft)}
.form-card h3{font-size:1.6rem;color:var(--paper);letter-spacing:0;margin-bottom:6px}
.form-card .fsub{color:var(--paper-dim);font-size:14.5px;margin-bottom:24px}
.ffield{margin-bottom:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ffield label{display:block;font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute);margin-bottom:8px}
.ffield input,.ffield textarea,.ffield select{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:11px;padding:14px 16px;color:var(--paper);font-family:var(--font-body);font-size:15.5px;transition:border-color .2s,box-shadow .2s}
.ffield textarea{resize:vertical;min-height:96px}
.ffield input:focus,.ffield textarea:focus,.ffield select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,255,.16)}
.ffield input::placeholder,.ffield textarea::placeholder{color:var(--paper-mute)}
.ffield select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7787' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.fbtn{width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:18px;border:none;border-radius:13px;background:var(--blue-grad);box-shadow:var(--blue-btn-shadow);cursor:pointer;transition:transform .15s,box-shadow .25s}
.fbtn:hover{transform:translateY(-2px);box-shadow:0 4px 0 #15399E,0 20px 38px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.32)}
.fbtn svg{width:20px;height:20px}
.fnote{text-align:center;margin-top:14px;font-size:12.5px;color:var(--paper-mute)}
.consent{margin-top:18px;display:grid;gap:12px}
.consent-item{display:flex;gap:10px;align-items:flex-start;background:var(--steel-3);border:1px solid var(--line);border-radius:11px;padding:12px 13px;transition:border-color .2s}
.consent-item:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,107,255,.16)}
.consent-item input[type=checkbox]{flex:0 0 auto;width:17px;height:17px;margin-top:1px;accent-color:var(--blue);cursor:pointer}
.consent-item label{font-size:11.6px;line-height:1.5;color:var(--paper-dim);cursor:pointer;font-family:var(--font-body);letter-spacing:0;text-transform:none;font-weight:400}
.consent-item label b{color:var(--paper);font-weight:600}
.consent-item label i{font-style:normal;color:var(--paper-mute)}
.consent-opt{display:block;margin-top:4px;font-size:10.5px;color:var(--paper-mute)}
.hp{position:absolute;left:-9999px}
.form-success{display:none;text-align:center;padding:30px 10px}
.form-success.show{display:block}
.form-success .fs-ico{width:64px;height:64px;border-radius:50%;background:rgba(46,107,255,.16);border:1px solid rgba(46,107,255,.4);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success .fs-ico svg{width:32px;height:32px;color:var(--blue-hi)}
.form-success h3{margin-bottom:8px}
.form-success p{color:var(--paper-dim);font-size:15px}

.footer{background:var(--ink);border-top:1px solid var(--line);padding:64px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:46px;padding-bottom:44px;border-bottom:1px solid var(--line-soft)}
.foot-brand .brand{margin-bottom:18px}
.foot-brand p{color:var(--paper-dim);font-size:15px;max-width:320px;line-height:1.6}
.foot-soc{display:flex;gap:11px;margin-top:22px}
.foot-soc a{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--paper-dim);transition:color .2s,border-color .2s,transform .2s}
.foot-soc a:hover{color:var(--blue-hi);border-color:rgba(46,107,255,.4);transform:translateY(-2px)}
.foot-soc a svg{width:19px;height:19px}
.foot-col h4{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;color:var(--paper-dim);font-size:15px;margin-bottom:12px;transition:color .2s}
.foot-col a:hover{color:var(--blue-hi)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding-top:26px;align-items:center;text-align:center}
.foot-bot p{color:var(--paper-mute);font-size:13px}
.foot-bot .credit{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;position:relative;padding-left:23px}
.foot-bot .credit::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--line)}
.foot-bot .credit a{color:var(--paper-dim);transition:color .2s}
.foot-bot .credit a:hover{color:var(--blue-hi)}
.foot-bot .credit b{font-weight:700}

/* ===== CONFIDENTIALITE (Loi 25) ===== */
.privacy{background:var(--ink);border-top:1px solid var(--line-soft);padding:clamp(40px,5vw,60px) 0}
.privacy .wrap{width:min(880px,92vw)}
.privacy details+details{margin-top:12px}
.privacy details{background:var(--card-grad);border:1px solid var(--line-soft);border-radius:16px;box-shadow:var(--card-edge),var(--card-shadow);overflow:hidden;transition:box-shadow .3s}
.privacy details[open]{box-shadow:var(--card-edge),var(--card-shadow-hover)}
.privacy summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;font-family:var(--font-display);font-weight:700;font-size:clamp(.9rem,1.4vw,1.02rem);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-dim);transition:color .2s}
.privacy summary::-webkit-details-marker{display:none}
.privacy summary .chev{flex-shrink:0;width:18px;height:18px;color:var(--paper-mute);transition:transform .35s var(--ease),color .2s}
.privacy details[open] summary .chev{transform:rotate(180deg)}
.privacy summary:hover,.privacy summary:hover .chev{color:var(--blue-hi)}
.privacy .pbody{padding:2px 22px 26px;color:var(--paper-dim);font-size:14.5px;line-height:1.7}
.privacy .pbody h4{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin:22px 0 7px}
.privacy .pbody h4:first-of-type{margin-top:6px}
.privacy .pbody p{margin-bottom:6px}
.privacy .pbody a{color:var(--blue-hi);transition:color .2s}
.privacy .pbody a:hover{color:var(--blue)}
.privacy .pbody ul{list-style:none;margin:6px 0 2px}
.privacy .pbody li{position:relative;padding-left:18px;margin-bottom:5px}
.privacy .pbody li::before{content:"·";position:absolute;left:6px;top:-1px;color:var(--blue);font-weight:700}
.privacy .pupdated{margin-top:20px;font-size:12.5px;color:var(--paper-mute);letter-spacing:.03em}
.foot-priv{color:var(--paper-mute);font-size:13px;transition:color .2s}
.foot-priv:hover{color:var(--blue-hi)}
.fnote a{color:var(--paper-dim);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.fnote a:hover{color:var(--blue-hi)}

.mobile-cta-bar{display:none}
@media(max-width:760px){
  .mobile-cta-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(11,13,17,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);box-shadow:0 -8px 30px rgba(0,0,0,.45);transform:translateY(115%);transition:transform .4s var(--ease)}
  .mobile-cta-bar.show{transform:none}
  .mcb-call,.mcb-quote{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase;padding:15px 10px;border-radius:12px;transition:transform .12s}
  .mcb-call{background:linear-gradient(180deg,#4A7CE8 0%,#3060CC 55%,#2249A4 100%);color:#fff;box-shadow:0 2px 0 #1B3C86,inset 0 1px 0 rgba(255,255,255,.2)}
  .mcb-quote{background:rgba(26,31,39,.92);color:var(--paper);border:1.5px solid rgba(214,224,240,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);padding:13.5px 8.5px}
  .mcb-call svg,.mcb-quote svg{width:18px;height:18px;flex-shrink:0}
  .mcb-call:active,.mcb-quote:active{transform:scale(.96)}
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

@media(max-width:1150px) and (min-width:901px){
  .nav .wrap{width:96vw}
  .nav-links{gap:22px}
  .nav-links a{font-size:14.5px;letter-spacing:.05em}
  .nav-right{gap:12px}
  .nav-soc-group{gap:7px}
  .nav-soc-group a{width:34px;height:34px}
  .nav-cta{padding:11px 15px;font-size:14px;letter-spacing:.06em}
  .nav-quote{padding:9.5px 13.5px;font-size:14px;letter-spacing:.06em}
  .brand-txt b{font-size:16px}
}
@media(max-width:1080px){
  .svc-grid,.rev-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid,.contact-grid,.zones-grid-wrap,.compare-grid{grid-template-columns:1fr;gap:44px}.why-grid{grid-template-areas:"head" "visual" "list"}.why-list{margin-top:0}
  .why-visual{aspect-ratio:3/4;max-width:380px;margin:0 auto}
  .compare{max-width:600px;margin:0 auto;justify-self:auto}
  .compare-copy{text-align:center}
  .compare-copy .eyebrow{justify-content:center}
  .compare-copy p{margin-left:auto;margin-right:auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:900px){
  .nav-links,.nav-cta,.nav-soc-group,.nav-quote{display:none}
  .nav-mobile{display:flex}
  :root{--nav-h:66px}
}
@media(max-width:600px){
  .svc-grid,.rev-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .hero h1{font-size:clamp(2.1rem,9.5vw,3.2rem)}
}
/* ============================================================
   PASSE DYNAMISME · micro-interactions premium (dosees, ciblees)
   ============================================================ */
.js .hero-anim{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.hero.hero-in .hero-anim{opacity:1;transform:none}
.hero.hero-in .hero-anim:nth-child(1){transition-delay:.06s}
.hero.hero-in .hero-anim:nth-child(2){transition-delay:.14s}
.hero.hero-in .hero-anim:nth-child(3){transition-delay:.24s}
.hero.hero-in .hero-anim:nth-child(4){transition-delay:.34s}
.hero.hero-in .hero-anim:nth-child(5){transition-delay:.44s}
.hero.hero-in .hero-anim:nth-child(6){transition-delay:.54s}

/* trait d'eyebrow qui se trace au reveal */
.eyebrow::before{transition:width .7s .15s var(--ease)}
.reveal .eyebrow::before{width:0}
.reveal.in .eyebrow::before{width:30px}

/* pastilles process : medaillon + cascade + activation au hover */
.why-num::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--blue);opacity:0;transform:scale(.78);transition:opacity .45s,transform .45s var(--ease)}
.why-row h3{transition:color .3s}
.why-row:hover .why-num,.why-num.lit{background:var(--blue-grad);color:#fff;border-color:transparent;transform:translateY(-3px) scale(1.08);box-shadow:0 12px 28px -8px var(--blue-glow),inset 0 1px 0 rgba(255,255,255,.32)}
.why-row:hover .why-num::after,.why-num.lit::after{opacity:.55;transform:scale(1)}
.why-row:hover h3{color:var(--blue-hi)}

/* chips de zones : apparition en stagger */
.js .zones-regions .zone-region{opacity:0;transform:translateY(14px) scale(.97)}
.js .zones-regions.lit .zone-region{opacity:1;transform:none}

/* compteur hero : evite le saut de largeur pendant le comptage */
.hero-appui b{font-variant-numeric:tabular-nums}

/* bouton retour en haut */
.to-top{position:fixed;right:26px;bottom:26px;z-index:80;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--paper);background:var(--card-grad);border:1px solid var(--line-soft);box-shadow:var(--card-edge),0 14px 30px -12px rgba(0,0,0,.8);cursor:pointer;opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;transition:opacity .35s,transform .4s var(--ease),background .3s,border-color .3s,color .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{color:#fff;background:var(--card-grad-hi);border-color:rgba(46,107,255,.45);transform:translateY(-4px);box-shadow:var(--card-edge),0 20px 42px -14px rgba(46,107,255,.42)}
.to-top svg{width:22px;height:22px}
@media(max-width:760px){.to-top{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .hero-anim,.zone-region{opacity:1!important;transform:none!important}
}
#top{scroll-margin-top:var(--nav-h)}
#services,#realisations,#pourquoi,#zones,#avis,#soumission,#confidentialite,#conditions{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* === Bandeau CTA (après réalisations) === */
.cta-band{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 14% 50%,rgba(46,107,255,.15),transparent 60%);pointer-events:none}
.cta-band .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta-band-txt{flex:1 1 400px;min-width:0}
.cta-band-txt h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--paper);line-height:1.1;margin:0}
.cta-band-txt h2 em{font-style:normal;color:var(--blue-hi)}
.cta-band-txt p{color:var(--paper-mute);margin:14px 0 0;font-size:clamp(15px,1.5vw,17px);line-height:1.5;max-width:540px}
.cta-band-act{display:flex;flex-direction:column;gap:12px;flex-shrink:0;align-items:stretch}
@media(max-width:760px){.cta-band .wrap{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:22px}.cta-band-txt{flex:0 0 auto}.cta-band-act{width:100%}}
@media(max-width:600px){.cta-band-txt .br-mobile{display:block}}

/* === Aperçu blogue (avant le formulaire) === */
.bt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.bt-head>div{max-width:600px}
.bt-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.6vw,3rem);color:var(--paper);line-height:1.05;margin:16px 0 0}
.bt-head h2 em{font-style:normal;color:var(--blue)}
.bt-head p{color:var(--paper-mute);margin:14px 0 0;font-size:16px;line-height:1.55}
.bt-all{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-hi);white-space:nowrap;transition:gap .25s}
.bt-all svg{width:18px;height:18px}
.bt-all:hover{gap:13px}
.bt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(244px,1fr));gap:22px}
.bt-card{display:flex;flex-direction:column;background:var(--card-grad);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.bt-card:hover{transform:translateY(-5px);box-shadow:var(--card-shadow-hover);border-color:rgba(46,107,255,.22)}
.bt-thumb{position:relative;display:block;aspect-ratio:16/10;background-size:cover;background-position:center}
.bt-cat{position:absolute;top:12px;left:12px;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:rgba(11,13,17,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 11px;border-radius:50px;border:1px solid var(--line-soft)}
.bt-body{display:flex;flex-direction:column;gap:9px;padding:16px 18px 20px}
.bt-meta{font-size:12.5px;color:var(--paper-mute);font-family:var(--font-display);font-weight:600;letter-spacing:.03em}
.bt-title{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.26;color:var(--paper);transition:color .25s}
.bt-card:hover .bt-title{color:var(--blue-hi)}
@media(max-width:840px){.bt-card:nth-child(3){display:none}}
.gd-door{transform:translateY(0)}
.brand-logo .gd-door{animation:gdDoor 5.6s .4s 1 both}
@keyframes gdDoor{
  0%{transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  46.43%{transform:translateY(-112px);animation-timing-function:linear}
  48.21%{transform:translateY(-112px);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:translateY(0)}
}
.brand.gd-ready .gd-door{transition:transform .9s cubic-bezier(.45,0,.55,1)}
@media(hover:hover){.brand.gd-ready:hover .gd-door{transform:translateY(-112px)}}
@media (prefers-reduced-motion:reduce){.brand-logo .gd-door{animation:none}}

/* ===== Palier grand écran (iMac 27 5K ~2560px) : agrandit le hero seulement ===== */

.faq{scroll-margin-top:var(--nav-h)}.faq-intro{color:var(--paper-dim);margin-top:14px;max-width:52ch}.faq-list{display:grid;gap:12px;max-width:860px}.faq-item{background:var(--card-grad);border:1px solid var(--line);border-radius:16px;box-shadow:var(--card-edge),var(--card-shadow);overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}.faq-item:hover{border-color:rgba(46,107,255,.42);box-shadow:var(--card-edge),0 1px 0 rgba(214,224,240,.04),0 22px 44px -24px rgba(0,0,0,.85),0 0 0 1px rgba(46,107,255,.06)}.faq-item:has(.faq-q[aria-expanded="true"]){border-color:rgba(46,107,255,.5)}.faq-q{width:100%;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;background:none;border:0;cursor:pointer;text-align:left;color:var(--paper);font-family:var(--font-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.12rem);letter-spacing:.005em;line-height:1.3;transition:color .25s var(--ease)}.faq-q:hover{color:var(--blue-hi)}.faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:-3px;border-radius:16px}.faq-icon{flex:none;width:20px;height:20px;color:var(--blue);transition:transform .38s var(--ease),color .25s var(--ease)}.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(135deg);color:var(--blue-hi)}.faq-a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}.faq-a p{margin:0;padding:0 22px 20px;color:var(--paper-dim);line-height:1.68;max-width:66ch}.faq-foot{margin-top:30px;color:var(--paper-mute);font-size:.95rem}.faq-foot a{color:var(--blue-hi);font-weight:600;text-decoration:underline;text-underline-offset:3px}@media(max-width:600px){.faq-q{padding:16px 18px;gap:14px}.faq-a p{padding:0 18px 18px}}@media(prefers-reduced-motion:reduce){.faq-icon,.faq-a{transition:none}}

/* Crédit DS Média · surligneur jaune #FED619 au survol (lisible sur fond clair comme sombre) */
a.dsm-link{padding:0 .16em;margin:0 -.16em;border-radius:2px;white-space:nowrap;
  background-image:linear-gradient(#FED619,#FED619);background-repeat:no-repeat;background-position:0 50%;background-size:0% 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .38s cubic-bezier(.2,.7,.2,1),color .2s ease}
a.dsm-link:hover,a.dsm-link:focus-visible{background-size:100% 100%!important;color:#111!important;text-shadow:none!important;opacity:1!important}
a.dsm-link:hover *,a.dsm-link:focus-visible *{color:#111!important;text-shadow:none!important}
a.dsm-link:focus-visible{outline:2px solid #FED619;outline-offset:2px}
@media (prefers-reduced-motion:reduce){a.dsm-link{transition:none}}

/* polices auto-hebergees, sous-ensemble latin */
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/saira-condensed-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/saira-condensed-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/saira-condensed-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/saira-condensed-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/saira-condensed-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Saira Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/saira-condensed-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700-normal.woff2') format('woff2')}

/* Desktop : remonter le bouton retour-en-haut au-dessus de la bulle de clavardage */
@media(min-width:761px){.to-top{bottom:100px}}
/* Mobile : masquer le widget, la barre d'action fixe occupe deja le bas de l'ecran */
@media(max-width:767px){
  chat-widget,#chat-widget,.chat-widget,#lc_text-widget,
  div[id^="lc_text-widget"],iframe[src*="leadconnectorhq.com/chat-widget"]{
    display:none!important;visibility:hidden!important;pointer-events:none!important
  }
}

/* ═══════════════ LE HERO ═══════════════ */

/* Deux colonnes a partir de 1000 px : le texte a gauche, la porte a
   droite. Sous ce seuil la porte redevient une bande en haut qui se fond
   vers le bas, et le texte reprend sa pile centree sur fond franc : une
   photo pleine page derriere du texte oblige a tellement l'assombrir
   qu'elle disparait. */
@media(min-width:1000px){
  .hero{align-items:stretch;text-align:left;padding:calc(var(--nav-h) + 20px) 0 38px}
  .hero-inner{max-width:none;width:min(1340px,92vw);margin:0 auto;align-items:flex-start;
    display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.68fr);
    gap:0 clamp(32px,4vw,72px);align-content:center}
  .hero-inner .eyebrow{margin-bottom:18px}
  .hero-sub{margin:20px 0 0;max-width:34em}
  .hero-cta{margin-top:44px}
  .hero-rating{margin-top:20px}
  .hero-appui{margin-top:12px}
  .hero-inner>*{grid-column:1;justify-self:start}
  .hero-inner .eyebrow{margin-bottom:20px}
  .hero-sub{margin:18px 0 0;max-width:34em}
  .hero-cta{justify-content:flex-start;margin-top:28px}
  .hero-rating{margin-top:22px}
  .hero h1{text-shadow:0 6px 44px rgba(0,0,0,.6)}
}

/* La porte deborde du bord droit et du bas : c'est ce debordement qui la
   fait lire comme une architecture plutot que comme une vignette. */
@media(min-width:1000px){}
/* Le bleu de la marque eclaire l'arete gauche du battant, celle qui
   s'avance vers le lecteur. */
/* La barre de lumiere descend le long des cinq sections, marque un temps
   en bas, puis recommence. 11 s au total : assez lent pour qu'on la
   remarque sans qu'elle reclame l'attention. */
/* Le reflet pose le battant sur un sol au lieu de le laisser flotter. */

/* Le voile d'origine partait du centre : il est refait pour tenir la
   moitie gauche lisible pendant que la droite garde son image. */
@media(min-width:1000px){
  .hero::after{background:
    linear-gradient(90deg,rgba(11,13,17,.92) 0,rgba(11,13,17,.66) 40%,
      rgba(11,13,17,.12) 56%,rgba(11,13,17,0) 70%),
    radial-gradient(70% 90% at 16% 44%,rgba(46,107,255,.16),transparent 68%),
    linear-gradient(180deg,rgba(11,13,17,.5) 0,transparent 24%,transparent 70%,rgba(11,13,17,.85) 100%)}
}
/* Un grain tres fin : sans lui le bleu nuit reste un aplat numerique. */
.hero::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23b)'/></svg>");
  background-size:140px 140px}

/* La ligne d'appui remplace la bande de quatre cases : les deux chiffres
   qui restaient se lisent a cote de la note Google, la ou se trouve deja
   la preuve. */
.hero-appui{position:relative;z-index:2;margin-top:14px;font-size:14px;
  color:var(--paper-dim);letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(0,0,0,.65)}
.hero-appui b{font-family:var(--font-display);font-weight:700;
  font-size:17px;color:var(--steel-soft);letter-spacing:.02em}
.hero-appui span{color:var(--steel-lo);margin:0 4px}

/* Sous 1000 px : bande d'image en haut, qui se fond vers le bas, puis le
   texte sur fond franc. */
@media(max-width:999px){
  .hero{padding-top:0;min-height:auto}
  /* .hero est une colonne flex centree : sans align-self la bande se
     retrecissait a la largeur de son contenu au lieu de border a bord. */
  /* meme etalonnage que la porte du bureau : acier bleute, pas gris vert */
  .hero-inner{padding-top:26px}
}
@media(min-width:1000px){}

@media(prefers-reduced-motion:reduce){
}

/* ═══════════════ LA PORTE, CONSTRUITE ═══════════════
   Une porte de garage sectionnelle, c'est cinq panneaux de tole pris
   entre deux montants, sous un linteau. Chaque joint est un creux : une
   ligne sombre en haut, une arete claire en dessous. C'est ce couple de
   deux lignes qui fait lire du metal plutot qu'un aplat, et c'est lui
   qui accroche la lumiere quand elle passe. */

/* La porte etait accrochee au bord de l'ecran pendant que le texte
   restait dans une colonne plafonnee : a 2560 px, 444 px les separaient.
   Elle prend la deuxieme colonne de la grille, et align-self cale son
   centre sur celui du texte. */
.hero-porte{position:relative;z-index:1;pointer-events:none;display:none;
  perspective:2200px}
@media(min-width:1000px){
  /* pile verticale : le sol se range sous le seuil tout seul, sans
     calcul de position, a toutes les tailles de porte. */
  .hero-porte{display:flex;flex-direction:column;align-items:center;
    justify-content:center;grid-column:2;grid-row:1/span 20;
    align-self:center;justify-self:stretch;width:auto}
}

/* Elle deborde en haut et en bas : une facade, pas une vignette. */
/* Le chambranle : un cadre d'acier autour de l'ouverture, son arete
   claire en haut, sa retombee dans le mur, puis l'ombre portee vers le
   bas a droite puisque la lumiere vient d'en haut a gauche. Le contour
   d'un pixel en noir sur fond noir ne se voyait pas, et la porte avait
   l'air collee sur l'image. */
.porte{position:relative;margin:0 auto;width:min(100%,560px);
  aspect-ratio:1.32/1;transform:rotateY(-4deg);
  transform-origin:right center;
  display:flex;flex-direction:column;
  box-shadow:
    0 0 0 1px rgba(8,11,16,.95),
    0 0 0 11px #303A48,
    0 0 0 12px rgba(206,226,255,.2),
    0 0 0 13px rgba(10,13,18,.9),
    0 0 0 28px rgba(16,20,27,.86),
    -4px 2px 0 28px rgba(206,226,255,.045),
    -26px 42px 92px -30px rgba(0,0,0,.96),
    0 26px 48px -26px rgba(0,0,0,.9)}

.porte-linteau{display:block;height:5.4%;flex:0 0 auto;position:relative;
  background:linear-gradient(180deg,#4E5B6D 0%,#303A47 46%,#1A212B 100%);
  box-shadow:inset 0 1px 0 rgba(210,228,255,.32),
             0 7px 20px -6px rgba(0,0,0,.95)}

.porte-tablier{position:relative;flex:1 1 auto;display:flex;
  flex-direction:column;overflow:hidden;
  background:linear-gradient(104deg,#3A4759 0%,#2B3542 38%,#1F2733 66%,#171E27 100%)}

/* Le panneau : une face legerement bombee, un creux en haut, une arete
   claire juste dessous. */
.pan{position:relative;flex:1 1 0;display:block;
  background:linear-gradient(180deg,
    rgba(6,9,14,.9) 0,
    rgba(6,9,14,.5) 1.5%,
    rgba(216,232,255,.17) 4.5%,
    rgba(216,232,255,.1) 26%,
    rgba(216,232,255,.03) 54%,
    rgba(6,9,14,.22) 82%,
    rgba(6,9,14,.52) 97%,
    rgba(6,9,14,.78) 100%)}
.pan::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(180deg,rgba(4,6,10,.95),rgba(4,6,10,.45))}
.pan::after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;
  background:linear-gradient(90deg,rgba(150,180,230,.1),rgba(198,222,255,.5) 18%,
    rgba(198,222,255,.38) 78%,rgba(150,180,230,.08))}
.pan:first-child::before{opacity:.5}
.pan:first-child::after{opacity:.6}

/* Le brossage vertical de la tole : invisible seul, decisif sous la
   lumiere rasante, parce que c'est lui qui la fait grener. */
.porte-brosse{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,
    rgba(214,228,252,.016) 0 1px,transparent 1px 3px)}

/* La lumiere rasante. Elle traverse en diagonale, s'arrete longuement,
   et repart : le rythme de phares qui passent, pas celui d'un scanner. */
.porte-rasante{position:absolute;top:-34%;bottom:-34%;width:66%;
  left:-80%;pointer-events:none;mix-blend-mode:screen;
  transform:skewX(-13deg);
  background:linear-gradient(90deg,transparent 0,
    rgba(120,160,230,.03) 14%,
    rgba(176,204,250,.11) 36%,
    rgba(214,232,255,.2) 50%,
    rgba(176,204,250,.1) 64%,
    rgba(120,160,230,.025) 86%,transparent 100%);
  filter:blur(9px);
  animation:porte-rasante 15s cubic-bezier(.45,0,.55,1) infinite}
@keyframes porte-rasante{
  0%{left:-80%;opacity:0}
  4%{opacity:1}
  56%{left:130%;opacity:1}
  62%{left:130%;opacity:0}
  100%{left:130%;opacity:0}
}

/* Les montants encadrent le tablier et portent le rail. */
.porte-montant{position:absolute;top:0;bottom:0;width:clamp(16px,1.9vw,32px);
  background:linear-gradient(90deg,#4A5768 0%,#2E3845 40%,#1C232E 78%,#141A23 100%);
  box-shadow:inset 1px 0 0 rgba(206,226,255,.26),
             4px 0 14px -6px rgba(0,0,0,.9)}
.porte-montant.g{left:0}
.porte-montant.d{right:0;transform:scaleX(-1)}

/* La poignee centrale : un vrai detail de porte, et le seul endroit ou
   le bleu de la marque touche le metal. */
.porte-poignee{position:absolute;left:50%;bottom:14.5%;
  width:clamp(44px,5vw,78px);height:clamp(7px,.8vw,11px);
  transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(180deg,#3B4556 0%,#222935 60%,#171D26 100%);
  box-shadow:0 1px 0 rgba(200,220,255,.16),0 6px 14px -5px rgba(0,0,0,.9),
             0 0 16px -2px rgba(46,107,255,.42)}

/* ══ LE SOL ══
   La porte reposait sur rien : la lumiere qui sort sous le seuil tombait
   dans le noir, et le cadre se terminait sur du vide. Ancien reglage :
   pose en absolu a 50 % de hauteur du conteneur, donc cache derriere le
   bas de la porte et depassant de 23 px. Il est maintenant le second
   element de la pile, donc toujours exactement sous le seuil.

   Trois couches : la dalle qui s'eclaire pres de la porte et s'eteint
   vers nous, la flaque qui sort de sous le tablier, l'ombre de contact
   au pied. */
.porte-sol{position:relative;display:block;width:min(126%,1180px);
  height:clamp(70px,6.8vw,132px);pointer-events:none;
  /* uniquement des radiales : un degrade vertical laisse deux aretes
     franches sur les cotes, et le sol se lisait comme un rectangle colle
     sous la porte. Le masque lateral acheve de les effacer. */
  background:
    radial-gradient(52% 104% at 50% 0,rgba(182,210,255,.19) 0,
      rgba(96,140,215,.07) 34%,transparent 72%),
    radial-gradient(80% 70% at 50% 0,rgba(46,107,255,.11),transparent 68%),
    radial-gradient(66% 100% at 50% 0,rgba(13,19,30,.72),transparent 76%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
/* la flaque : ce qui passe sous le tablier eclaire la dalle devant */
.porte-sol::before{content:"";position:absolute;left:14%;right:14%;top:-3px;height:64%;
  background:radial-gradient(50% 100% at 50% 0,rgba(214,232,255,.46) 0,
    rgba(140,180,245,.16) 28%,transparent 74%);
  filter:blur(8px)}
/* l'ombre de contact : serree, sombre, juste sous le seuil */
.porte-sol::after{content:"";position:absolute;left:7%;right:7%;top:-7px;height:20px;
  background:radial-gradient(52% 100% at 50% 50%,rgba(2,4,8,.9),transparent 78%);
  filter:blur(5px)}

/* Une nappe bleue derriere la porte : elle est eclairee, pas collee. */
.hero-porte::before{content:"";position:absolute;inset:-6% -14% -6% -24%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at 62% 42%,rgba(46,107,255,.22),transparent 72%);
  filter:blur(28px)}

/* Le voile tient la moitie gauche lisible et s'ouvre sur la porte. */
@media(min-width:1000px){
  .hero::after{background:
    linear-gradient(90deg,rgba(11,13,17,.95) 0,rgba(11,13,17,.82) 34%,
      rgba(11,13,17,.3) 50%,rgba(11,13,17,0) 62%),
    radial-gradient(64% 86% at 14% 42%,rgba(46,107,255,.17),transparent 68%),
    linear-gradient(180deg,rgba(11,13,17,.52) 0,transparent 22%,transparent 72%,rgba(11,13,17,.8) 100%)}
}

/* Sous 1000 px la porte devient une bande en haut, bord a bord, qui se
   fond vers le texte pose sur fond franc. */
@media(max-width:999px){
  .hero{padding-top:0;min-height:auto}
  .hero-bande{position:relative;z-index:2;align-self:stretch;width:auto;
    margin:22px -6vw 4px;height:34vh;min-height:200px;max-height:280px;
    overflow:hidden;display:block}
  /* le hero reprend son rembourrage haut : le titre est redevenu le
     premier element de la page */
  .hero{padding-top:calc(var(--nav-h) + 26px)}
  .hero-inner{padding-top:0}
  .hero-sub{margin-top:20px}
  .hero-bande .porte{position:absolute;inset:-10% 0 4px 0;
    width:auto;aspect-ratio:auto;transform:none;
    box-shadow:0 0 0 1px rgba(8,11,16,.9)}
  .hero-bande .porte-montant{width:16px}
  .hero-bande .porte-sol{display:none}
  .hero-bande::after{content:"";position:absolute;inset:0;z-index:3;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(11,13,17,.72) 0,rgba(11,13,17,.06) 26%,
      rgba(11,13,17,0) 58%,rgba(11,13,17,.42) 86%,var(--ink) 100%)}
  /* la lumiere sous la porte, reprise a l'echelle de la bande */
  .hero-bande .porte-fente{box-shadow:0 0 8px 1px rgba(200,222,255,.4),
    0 2px 18px 2px rgba(120,165,235,.26)}
}
@media(min-width:1000px){.hero-bande{display:none}}

/* La fente de lumiere sous le tablier. Elle respire sur 9 s : c'est le
   signe qu'il y a quelqu'un derriere, et c'est ce que vend une
   entreprise qui repond la nuit. */
.porte-fente{position:absolute;left:2.5%;right:2.5%;bottom:0;height:3px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(206,224,252,.06),rgba(236,245,255,.8) 18%,
    rgba(236,245,255,.8) 82%,rgba(206,224,252,.06));
  box-shadow:0 0 10px 1px rgba(200,222,255,.42),0 2px 22px 2px rgba(120,165,235,.28);
  animation:porte-respire 9s ease-in-out infinite}
@keyframes porte-respire{
  0%,100%{opacity:.76}
  50%{opacity:1}
}

/* le palier grand ecran, pose apres la regle de base pour qu'il gagne */
@media(min-width:2000px){.hero-porte .porte{width:min(100%,760px)}}

@media(prefers-reduced-motion:reduce){
  .porte-rasante{animation:none;opacity:0}
  .porte-fente{animation:none}
}

/* ══ LES PASTILLES PILOTENT LA CARTE ══
   Elles etaient des etiquettes decoratives posees a cote d'une carte qui
   portait les memes villes, sans lien entre les deux. Survol ou focus
   allume le marqueur, clic amene au formulaire avec la ville remplie. */
button.zone-region{font:inherit;cursor:pointer;border:1px solid var(--line);
  background:var(--steel-tint);color:inherit;
  transition:background .25s,border-color .25s,color .25s,transform .2s}
button.zone-region:hover,button.zone-region:focus-visible,
button.zone-region.vise{background:rgba(46,107,255,.16);
  border-color:rgba(46,107,255,.6);color:var(--steel-soft);transform:translateY(-1px)}
button.zone-region:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px}

.tm-ville{transition:opacity .3s}
.zones-grid-wrap.pointe .tm-ville{opacity:.3}
.zones-grid-wrap.pointe .tm-ville.vise{opacity:1}
.tm-ville.vise .tm-dot{r:7;fill:#DCE8FF}
.tm-ville.vise .tm-halo{r:15;fill:rgba(90,140,255,.42)}
.tm-ville.vise .tm-label{fill:#F2F6FF;font-weight:700}
.tm-ville .tm-dot,.tm-ville .tm-halo{transition:r .3s,fill .3s}
.tm-ville .tm-label{transition:fill .3s}
@media(prefers-reduced-motion:reduce){
  .tm-ville,.tm-ville .tm-dot,.tm-ville .tm-halo,.tm-ville .tm-label{transition:none}
}

    /* ══ classes reprises d attributs style poses dans le balisage ══ */
    .fond-hero{background-image:url('/images/hero.jpg')}
    .fond-apres{background-image:url('/images/apres.jpg')}
    .fond-avant{background-image:url('/images/avant.jpg')}
    .titre-avis{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-top:18px;color:var(--paper)}
    .mot-accent{font-style:normal;color:var(--blue)}
    .fond-marc{background-image:url('/images/marc.jpg')}
    .titre-zones{font-size:clamp(2rem,4vw,3rem);margin:18px 0 18px;color:var(--paper)}
    .centre-h{justify-content:center}
    .fond-automne{background-image:url('/blog/images/automne.jpg')}
    .fond-commercial{background-image:url('/blog/images/commercial.jpg')}
    .fond-porte-bruit{background-image:url('/blog/images/porte-bruit.jpg')}

/* ══ PALIER GRAND ECRAN ══ pose en dernier pour avoir le dernier mot.
   Mesure a 2560 : la composition occupait 46 % de la hauteur du hero et
   70 % de sa largeur. Tout grandit d'un cran, et la porte reprend de la
   place dans la grille, sinon la colonne de droite reste a moitie vide. */
@media (min-width:2000px){
  .hero-inner{max-width:none;width:min(2120px,88vw);
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
    gap:0 clamp(48px,3.4vw,88px)}
  .hero-inner .eyebrow{font-size:16px;letter-spacing:.34em;margin-bottom:26px}
  .hero h1{font-size:clamp(6rem,5vw,7.5rem)}
  .hero-sub{max-width:40em;font-size:26px;margin-top:28px}
  .hero-cta{margin-top:54px;gap:22px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{font-size:24px;padding:23px 44px}
  .hero-cta .btn-primary{padding-top:18px;padding-bottom:18px}
  .hero-cta .btn-main{font-size:24px}
  .hero-cta .btn-sub{font-size:13px}
  .hero-cta .btn-primary svg,.hero-cta .btn-ghost svg{width:25px;height:25px}
  .hero-rating{margin-top:30px;font-size:17px;padding:12px 20px 12px 24px}
  .hero-rating .stars svg{width:19px;height:19px}
  .hero-rating .hr-arrow{width:17px;height:17px}
  .hero-appui{margin-top:18px;font-size:17px}
  .hero-appui b{font-size:21px}
  .hero-porte .porte{width:min(100%,880px)}
}

/* ══ ETAGE INTERMEDIAIRE (1500 a 2000 px) ══
   Mesure : `.hero-inner` plafonne a 1340 px, donc a partir de 1457 px de
   fenetre la composition se fige et tout l'ecran gagne devient de la
   marge. A 1920, la porte faisait toujours 454 px avec 290 px de vide a
   sa droite. Cet etage reprend la montee entre le rendu portable et le
   palier 27 pouces, qui existait deja a partir de 2000. Pose en fin de
   feuille pour gagner sur les regles ecrites plus haut. */
@media (min-width:1500px) and (max-width:1999.98px){
  .hero-inner{width:min(1640px,93vw);
    grid-template-columns:minmax(0,1.16fr) minmax(0,.78fr);
    gap:0 clamp(40px,3.4vw,76px)}
  .hero-inner .eyebrow{font-size:15px;margin-bottom:22px}
  .hero h1{font-size:clamp(5rem,5.2vw,6.1rem)}
  .hero-sub{max-width:37em;font-size:21px;margin-top:24px}
  .hero-cta{margin-top:48px;gap:18px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{font-size:21px;padding:20px 36px}
  .hero-cta .btn-main{font-size:21px}
  .hero-rating{margin-top:24px;font-size:16px}
  .hero-appui{margin-top:15px;font-size:16px}
  .hero-appui b{font-size:19px}
  .hero-porte .porte{width:min(100%,780px)}
}