/* ============================================================
   Webiaprod 2026 — UI custom (header / menu / méga-menu / orbe / loader)
   Surcouche de main.css. Responsive & accessible. Breakpoint menu : 1024px.
   ============================================================ */

/* ---- Logo ---- */
.logo-img{height:30px;width:auto;display:block}
.hd .logo{display:inline-flex;align-items:center}
.hd .logo svg{height:26px;width:auto;display:block}
/* Logo SVG inline du footer */
.foot .logo{display:inline-flex;align-items:center}
.foot .logo svg{height:34px;width:auto;display:block;max-width:210px}
.foot .logo .logo-img{height:34px}
/* Hero H1 — révélation lettre par lettre */
.h1-ch{display:inline-block;will-change:transform}
/* Hero — contenu SEO (titre long), ligne de preuve, zoom vidéo, traînée incandescente */
.hero-h1{font-size:clamp(1.1rem,4.6vw,4rem);line-height:1.08;max-width:none;letter-spacing:-.02em;text-transform:uppercase}
.hero-h1 .h1-l{display:block;white-space:nowrap}
.hero .hero-proof{margin-top:1.05rem;font-size:.98rem;color:rgba(243,239,236,.82)}
.hero .hero-proof strong{color:#fff;font-weight:700}
.hero .bgv{animation:wia-kenburns 26s ease-in-out infinite alternate}
@keyframes wia-kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
.wia-ember{position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:99997;transform:translate(-50%,-50%);background:radial-gradient(circle,#FFD9CE,#E8323C 50%,#E8323C);box-shadow:0 0 8px 2px rgba(255,96,76,.55);mix-blend-mode:screen;will-change:transform,opacity}
/* Constellation IA (canvas du hero) */
.wia-netfx{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Bloc avis Google (Trustindex) dans le hero */
.hero-reviews{margin-top:1.1rem;width:100%;max-width:min(94vw,560px);margin-inline:auto}
/* ===== Dock contact fixe (bas droite) ===== */
.wia-dock{position:fixed;right:max(16px,2vw);bottom:max(16px,2vw);z-index:90;display:flex;flex-direction:column;gap:10px;align-items:flex-end;transition:opacity .3s}
.wia-dock__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(243,239,236,.14);background:rgba(20,16,16,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F3EFEC;cursor:pointer;box-shadow:0 10px 26px -10px rgba(0,0,0,.7);transition:transform .25s,opacity .3s;text-decoration:none}
.wia-dock__btn:hover{transform:translateY(-3px)}
.wia-dock__btn svg{width:23px;height:23px;fill:currentColor;flex:none}
.wia-dock .dk-wa{background:#25D366;border-color:transparent;color:#fff}
/* glyphe WhatsApp remplacé par le tracé standard centré (retour JM « icône cassée ») — plus de nudge */
.wia-dock .dk-phone{background:linear-gradient(120deg,#E8323C,#FF4D6D);border-color:transparent;color:#fff}
.wia-dock__lbl{font-weight:700;font-size:.92rem;white-space:nowrap}
.wia-dock .dk-top{opacity:0;pointer-events:none;transform:translateY(10px)}
.wia-dock.scrolled .dk-top{opacity:1;pointer-events:auto;transform:none}
body.nav-open .wia-dock{opacity:0;pointer-events:none}
@media (min-width:1025px){.wia-dock .dk-phone{width:auto;padding:0 20px;border-radius:26px}}
@media (max-width:1024px){.wia-dock__lbl{display:none}.wia-dock__btn{width:48px;height:48px}}
/* ===== Réseaux sociaux fixes (rail gauche, desktop) ===== */
.wia-social{position:fixed;right:max(10px,1.2vw);top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:13px}
.wia-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:rgba(243,239,236,.66);border:1px solid rgba(243,239,236,.14);transition:color .25s,border-color .25s,transform .25s;text-decoration:none}
.wia-social a:hover{color:#fff;border-color:rgba(243,239,236,.5);transform:translateY(-2px)}
.wia-social svg{width:17px;height:17px;fill:currentColor}
@media (max-width:1024px){.wia-social{display:none}}
/* ===== Badge certification (hero) ===== */
.wia-cert{position:fixed;left:max(16px,2vw);bottom:max(16px,2vw);z-index:91;display:inline-flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:50%;border:1px solid rgba(252,91,73,.55);background:rgba(18,14,14,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -10px rgba(0,0,0,.7),0 0 0 5px rgba(252,91,73,.08);text-decoration:none;transition:opacity .3s,transform .3s,border-color .3s,box-shadow .3s}
.wia-cert:hover{transform:translateY(-3px);border-color:rgba(252,91,73,.95);box-shadow:0 14px 30px -10px rgba(0,0,0,.78),0 0 0 6px rgba(252,91,73,.14)}
.wia-cert:active{transform:scale(.97)}
body.nav-open .wia-cert{opacity:0;pointer-events:none}
.wia-cert__core{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:6px}
.wia-cert__core svg{width:20px;height:20px}
.wia-cert__txt{font-family:'Satoshi',system-ui,sans-serif;font-weight:700;font-size:.6rem;line-height:1.15;letter-spacing:.02em;text-transform:uppercase;color:#F3EFEC;max-width:82px}
.wia-cert__rs{font-size:.55rem;letter-spacing:.16em;color:#FC5B49;font-weight:600}
@media (max-width:1024px){.wia-cert{width:80px;height:80px}.wia-cert__txt{font-size:.5rem}.wia-cert__rs{font-size:.46rem}}
/* ===== Section 3 — Services (grille « braise », lueur curseur, carte IA en vedette) ===== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.15rem)}
.svc-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding:clamp(1.4rem,2.6vw,2rem) clamp(1.2rem,2.2vw,1.7rem);border:1px solid rgba(243,239,236,.12);border-radius:20px;background:rgba(243,239,236,.022);overflow:hidden;color:inherit;text-decoration:none;--gx:50%;--gy:50%;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s}
.svc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(252,91,73,.16),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(252,91,73,.5);background:rgba(243,239,236,.04)}
.svc-card:hover::before{opacity:1}
.svc-card:active{transform:translateY(-2px) scale(.99)}
.svc-ic{display:inline-flex;width:2.7rem;height:2.7rem;align-items:center;justify-content:center;border-radius:.8rem;border:1px solid rgba(243,239,236,.14);color:#FF7A57;margin-bottom:.35rem;transition:border-color .4s,color .4s}
.svc-ic svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc-card:hover .svc-ic{border-color:rgba(252,91,73,.5);color:#FF9472}
.svc-card h3{font-family:var(--clash);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.01em;line-height:1.14;display:flex;align-items:center;gap:.4rem}
.svc-card p{font-weight:400;font-size:.93rem;color:var(--dim);line-height:1.55;max-width:34ch}
.svc-go{position:absolute;top:clamp(1.2rem,2.2vw,1.7rem);right:clamp(1.2rem,2.2vw,1.7rem);font-size:1.2rem;color:var(--dim);transition:transform .45s cubic-bezier(.16,1,.3,1),color .4s}
.svc-card:hover .svc-go{transform:translate(.3rem,-.3rem);color:var(--rose)}
.svc-star{color:#FF7A57;font-size:.72em;line-height:1}
.svc-card.is-ia{border-color:transparent;background:linear-gradient(var(--noir2),var(--noir2)) padding-box,var(--grad) border-box}
.svc-card.is-ia:hover{background:linear-gradient(#171110,#171110) padding-box,var(--grad) border-box}
.svc-card.is-ia .svc-ic{border-color:rgba(252,91,73,.55);color:#FF7A57}
.svc-sig{display:inline-flex;align-items:center;gap:.35rem;margin-top:.4rem;font-family:'Satoshi',system-ui,sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FFC09A;border:1px solid rgba(252,91,73,.4);padding:.22rem .65rem;border-radius:99px}
.svc-new{font-family:'Satoshi',system-ui,sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#E8323C,#FF4D6D);padding:.22rem .6rem;border-radius:99px;line-height:1;white-space:nowrap}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}.svc-card p{max-width:none}.svc-go{top:1.2rem;right:1.2rem}}
/* ===== Section 2 — Accroche (carte réponse) ===== */
.accroche{padding:clamp(3rem,9vh,6rem) 0}
.acc-card{position:relative;max-width:min(92vw,860px);margin-inline:auto;padding:clamp(1.7rem,4vw,3rem);border:1px solid rgba(243,239,236,.12);border-radius:20px;background:rgba(243,239,236,.025);overflow:hidden;--gx:50%;--gy:0%}
.acc-card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--gx) var(--gy),rgba(252,91,73,.16),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.acc-card:hover::before{opacity:1}
.acc-card>*{position:relative}
.acc-kick{display:flex;align-items:center;gap:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:#FF7A5E;margin-bottom:1rem}
.acc-kick::before{content:"";width:1.8rem;height:1px;background:linear-gradient(90deg,#E8323C,#FF4D6D)}
.acc-title{font-family:var(--clash);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.16;letter-spacing:-.01em;color:#fff;margin-bottom:1.3rem;max-width:28ch}
.acc-text{font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7;color:rgba(243,239,236,.8)}
.acc-text strong{color:#fff;font-weight:700}
.acc-text a{font-weight:600;text-decoration:none;background:linear-gradient(90deg,#E8323C,#FF4D6D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;border-bottom:1px solid rgba(252,91,73,.4);transition:border-color .25s}
.acc-text a:hover{border-color:#FC5B49}
/* .wia-ember visible aussi sur tactile depuis la review mobile JM 2026-07-16 (braises au doigt) */

/* ============================================================
   HEADER — barre flottante alignée au conteneur du site (1180)
   ============================================================ */
.hd{
  top:14px;left:0;right:0;margin-inline:auto;
  width:min(95vw,1240px);
  background:rgba(12,11,11,.62);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  border:1px solid rgba(243,239,236,.12);
  border-bottom:1px solid rgba(243,239,236,.12);
  border-radius:22px;
  box-shadow:0 14px 44px -16px rgba(0,0,0,.65);
  overflow:visible;
}
.hd .hd-in{
  width:100%;max-width:100%;margin:0;
  padding-inline:clamp(.9rem,2.2vw,1.6rem);
  padding-block:.55rem;
  gap:clamp(.5rem,1.3vw,1rem);
}

/* ============================================================
   NAV DESKTOP — une seule ligne, jamais sur deux
   ============================================================ */
nav.main{display:flex;align-items:center}
nav.main > ul.wia-menu{
  display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;
  gap:clamp(.3rem,.8vw,.85rem);list-style:none;margin:0;padding:0;
}
nav.main li.menu-item{position:relative;list-style:none;margin:0}
nav.main li.menu-item > a{
  position:relative;display:inline-flex;align-items:center;gap:.34rem;
  font-family:'Satoshi',system-ui,sans-serif;font-weight:500;
  font-size:clamp(.82rem,.95vw,.95rem);letter-spacing:.01em;
  color:var(--ink,#F3EFEC);text-decoration:none;
  padding:.55rem 0;line-height:1;opacity:.88;
  transition:opacity .25s ease;
}
nav.main li.menu-item > a:hover{opacity:1}
/* soulignement pleine largeur de l'élément (validé) */
nav.main li.menu-item > a::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1.5px;
  background:linear-gradient(90deg,#E8323C,#FF4D6D);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
nav.main li.menu-item:hover > a::after,
nav.main li.menu-item:focus-within > a::after{transform:scaleX(1)}
/* chevron pour les items à méga-menu */
.menu-item-has-children > a > span{order:1}
.menu-item-has-children > a::after{}
.menu-item-has-children > a > .chev,
.menu-item-has-children > a::before{
  content:"";order:2;width:.42em;height:.42em;margin-left:.12em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.65;
  transition:transform .3s ease,opacity .25s;
}
.menu-item-has-children:hover > a::before{transform:rotate(225deg) translateY(2px);opacity:1}

/* ============================================================
   MÉGA-MENU (desktop)
   ============================================================ */
.mega{
  position:absolute;top:calc(100% + 11px);left:0;
  width:min(94vw,600px);
  background:rgba(16,14,14,.94);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid rgba(243,239,236,.12);border-radius:18px;
  box-shadow:0 28px 70px -22px rgba(0,0,0,.85);
  padding:.7rem;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
/* pont invisible : ne pas perdre le survol entre l'item et le panneau */
.mega::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.menu-item-has-children:hover > .mega,
.menu-item-has-children:focus-within > .mega{opacity:1;visibility:visible}
.mega-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.25rem;
  transform:translateY(10px);
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.menu-item-has-children:hover > .mega .mega-grid,
.menu-item-has-children:focus-within > .mega .mega-grid{transform:translateY(0)}
.mega-item{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:.7rem .8rem;border-radius:13px;text-decoration:none;
  transition:background .25s ease,transform .25s ease;
}
.mega-item:hover{background:rgba(243,239,236,.06);transform:translateY(-1px)}
/* pas de soulignement (règle .nav-main a::after de la maquette) dans le méga-menu */
.mega-item::after,.mega a::after{display:none!important}
.mega-ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(255,106,87,.18),rgba(255,77,109,.12));
  border:1px solid rgba(243,239,236,.1);
}
.mega-ic svg{width:19px;height:19px;fill:none;stroke:#FF8A6E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega-tx{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.mega-tx b{font-family:'Satoshi',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink,#F3EFEC);line-height:1.1}
.mega-tx i{font-style:normal;font-size:.78rem;line-height:1.35;color:rgba(243,239,236,.58)}

/* ============================================================
   BURGER + DRAWER MOBILE
   ============================================================ */
.nav-burger{
  display:none;flex-direction:column;gap:5px;width:42px;height:42px;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0;
}
.nav-burger span{
  display:block;width:22px;height:2px;background:var(--ink,#F3EFEC);border-radius:2px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s;
}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-cta-m{display:none}
/* CTA en-tête toujours sur une seule ligne */
.hd-r{flex:0 0 auto}
.hd-r .cta,.hd-r .cta-h{white-space:nowrap}
/* Téléphone dans l'en-tête (toujours visible) */
.hd-phone{display:inline-flex;align-items:center;gap:8px;color:#FF8A6E;text-decoration:none;font-weight:700;font-size:.96rem;letter-spacing:.01em;white-space:nowrap;transition:color .25s,transform .2s}
.hd-phone:hover{color:#fff;transform:translateY(-1px)}
.hd-phone svg{width:18px;height:18px;fill:#FF8A6E;flex:none;transition:fill .25s}
.hd-phone:hover svg{fill:#fff}
@media (max-width:1300px){.hd-phone__num{display:none}}
/* Bouton son en icône seule (libère de la place dans le bandeau) */
.snd .lbl{display:none}
/* logo de l'en-tête masqué pendant l'intro (révélé quand le logo volant y atterrit) */
html.wia-loading .hd .logo{opacity:0}

@media (max-width:1300px){
  /* backdrop-filter crée un bloc conteneur → il piégerait le drawer fixe : on le retire en mobile */
  .hd{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,9,9,.92)}
  .hd .hd-in{padding-inline:clamp(1rem,4vw,1.4rem)}
  .nav-burger{display:flex}
  .hd-r .cta,.hd-r .cta-h{display:none}
  .hd .logo,.hd-r{position:relative;z-index:60}

  nav.main{
    position:fixed;inset:0;z-index:40;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:max(90px,calc(env(safe-area-inset-top) + 78px)) clamp(1.3rem,6vw,2.2rem) calc(2rem + env(safe-area-inset-bottom));
    background:rgba(10,9,9,.985);
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease,visibility .45s;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
  body.nav-open nav.main{transform:translateY(0);opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}

  /* enfants du tiroir NON compressibles : sinon le ul se réduit à l'écran (flex-shrink), son contenu
     déborde sans agrandir la zone de scroll → sous-menu ouvert = liens du bas inatteignables (bug JM mobile) */
  nav.main > ul.wia-menu{display:block;width:100%;white-space:normal;flex-shrink:0}
  nav.main > .nav-cta-m{flex-shrink:0}
  nav.main li.menu-item{border-bottom:1px solid rgba(243,239,236,.08)}
  nav.main li.menu-item > a{
    display:flex;justify-content:space-between;align-items:center;
    padding:1.05rem .2rem;font-size:1.18rem;opacity:1;
  }
  nav.main li.menu-item > a::after{display:none}
  .menu-item-has-children > a::before{margin-left:auto;opacity:.5}
  .menu-item-has-children.open > a::before{transform:rotate(225deg) translateY(2px);opacity:1}

  /* méga → accordéon */
  .mega{
    position:static;left:auto;top:auto;width:auto;
    background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    padding:0 0 .5rem;opacity:1;visibility:visible;
    max-height:0;overflow:hidden;transition:max-height .42s ease;
  }
  .mega::before{display:none}
  .menu-item-has-children.open > .mega{max-height:1200px}
  .mega-grid{grid-template-columns:1fr;gap:.15rem;transform:none}
  .mega-item{padding:.6rem .25rem}
  .mega-ic{width:34px;height:34px}

  .nav-cta-m{display:block;margin-top:1.5rem}
  .nav-cta-m .btn{display:flex;width:100%;justify-content:center}
}

/* ============================================================
   POINT-CURSEUR (orbe) — premium
   ============================================================ */
.wia-orb,.wia-orb-ghost,.wia-ring{
  position:fixed;top:0;left:0;z-index:99999;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;will-change:transform;mix-blend-mode:screen;
}
.wia-orb{
  width:13px;height:13px;
  background:radial-gradient(circle at 32% 28%,#FFE2D8,#E8323C 38%,#E8323C 70%,#A8120C);
  box-shadow:0 0 14px 2px rgba(255,96,76,.7),0 0 36px 10px rgba(232,50,60,.34),0 0 80px 24px rgba(255,77,109,.14);
}
.wia-orb-ghost{
  width:42px;height:42px;z-index:99998;filter:blur(7px);
  background:radial-gradient(circle,rgba(255,96,76,.34),rgba(255,77,109,.12) 45%,transparent 72%);
}
.wia-ring{width:54px;height:54px;border:1.5px solid rgba(255,120,90,.8);box-shadow:0 0 18px rgba(255,96,76,.4)}
/* survol d'une image (data-cursor) : l'orbe grossit en disque incandescent + label VOIR/LIRE au centre */
.wia-orb-label{position:fixed;top:0;left:0;z-index:100000;pointer-events:none;transform:translate(-50%,-50%);opacity:0;font-family:'Clash Display',system-ui,sans-serif;font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.6);white-space:nowrap;will-change:transform}
.wia-orb.is-view{mix-blend-mode:normal;background:radial-gradient(circle at 42% 36%,#FFE7DC,#FF5A46 48%,#D81A1A);box-shadow:0 0 46px 8px rgba(232,50,60,.55),0 0 120px 40px rgba(255,77,109,.22)}
/* survol d'un lien : l'orbe se creuse en anneau lumineux */
.wia-orb.is-hot{
  background:radial-gradient(circle,rgba(255,120,90,.10),transparent 58%);
  box-shadow:0 0 24px rgba(255,96,76,.55),inset 0 0 0 1.5px rgba(255,160,130,.95);
}
/* navigation en cours : l'orbe devient un loader COMÈTE (choix JM) — traînée incandescente + tête
   brillante qui tournent autour du point, agrandi (anneau 70px). */
.wia-orb.is-loading::after{ /* la traînée : gradient conique qui s'illumine jusqu'à la tête */
  content:"";position:absolute;left:50%;top:50%;width:70px;height:70px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,rgba(255,77,109,0) 0deg,rgba(255,77,109,.06) 200deg,rgba(255,106,87,.6) 320deg,#FFE2D8 358deg,rgba(255,106,87,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5.5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5.5px));
  animation:wia-orb-spin .85s linear infinite;
}
.wia-orb.is-loading::before{ /* la tête brillante de la comète, en tête de traînée */
  content:"";position:absolute;left:50%;top:50%;width:70px;height:70px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle 5px at calc(100% - 4px) 50%,#FFF0E6,rgba(255,150,110,.65) 42%,transparent 72%);
  animation:wia-orb-spin .85s linear infinite;
}
@keyframes wia-orb-spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ============================================================
   LOADER d'intro
   ============================================================ */
/* ===== INTRO « ZOOM-OUT » (décision définitive JM 2026-07-02) :
   le « ia » géant recule et révèle webiaprod. → les braises se déversent dans
   le point rouge → le point rejoint la souris → ONDE BRÛLANTE qui ouvre le site. */
#wia-loader{position:fixed;inset:0;z-index:100000;overflow:hidden;background:#050506}
html.wia-intro-skip #wia-loader{display:none!important} /* intro déjà vue cette session → pas de flash */
#wia-loader .wl-cv{position:absolute;inset:0;width:100%;height:100%}
#wia-loader .wl-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:'Yaro Op','Quicksand','Clash Display',system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;font-size:min(12.5vw,170px);will-change:transform,opacity}
#wia-loader .wl-l{display:inline-block;background:linear-gradient(120deg,#E8323C,#FF4D6D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:0;will-change:transform,opacity}
#wia-loader .wl-l.wl-ia{background:linear-gradient(120deg,#FFE2D8,#FF8A6E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#wia-loader .wl-l.wl-dot{background:none;-webkit-text-fill-color:#E8323C}
#wia-loader .wl-tag{position:absolute;left:24px;right:24px;bottom:12vh;text-align:center;font-family:'Clash Display',system-ui,sans-serif;
  font-size:clamp(1rem,2.1vw,1.4rem);font-weight:600;letter-spacing:-.01em;color:#F5F2EE;opacity:0;text-wrap:balance;
  text-shadow:0 2px 22px rgba(0,0,0,.95),0 0 40px rgba(232,50,60,.25)}
#wia-loader .wl-cnt{position:absolute;left:4vw;bottom:3vh;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.3em;color:rgba(245,242,238,.5)}
@media(prefers-reduced-motion:reduce){#wia-loader{display:none!important}}

/* ===== AMBIANCES PAR ZONE (roadmap immersion) : teinte des vidéos de fond.
   Active seulement en .zone-vtint (aucune vidéo sur mesure uploadée pour la zone dans
   Réglages du site → Ambiances) ; une vidéo étalonnée fournie → teinte retirée (.zone-vcustom).
   Accueil = rouge de base, sans teinte. */
.zone-vtint.zone-services video.bg,.zone-vtint.zone-services .hero-bgv,.zone-vtint.zone-services .bgv{filter:hue-rotate(18deg) saturate(1.05)}
.zone-vtint.zone-realisations video.bg,.zone-vtint.zone-realisations .hero-bgv,.zone-vtint.zone-realisations .bgv{filter:hue-rotate(38deg) saturate(1.12) brightness(1.03)}
.zone-vtint.zone-blog video.bg,.zone-vtint.zone-blog .hero-bgv,.zone-vtint.zone-blog .bgv{filter:hue-rotate(-12deg) saturate(.9) brightness(.92)}
.zone-vtint.zone-contact video.bg,.zone-vtint.zone-contact .hero-bgv,.zone-vtint.zone-contact .bgv{filter:hue-rotate(26deg) saturate(1.05)}
.zone-vtint.zone-apropos video.bg,.zone-vtint.zone-apropos .hero-bgv,.zone-vtint.zone-apropos .bgv{filter:hue-rotate(-26deg) saturate(.95)}

/* ===== Boutons hero (paire « Être appelé » + « Vous avez un projet ? ») + popup rappel ===== */
.hero-cta2{display:flex;gap:12px;flex-wrap:nowrap;margin-top:14px;max-width:600px;width:100%}
.hero-cta2 .btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:1.15rem 1rem;font-size:1.02rem;min-height:56px;line-height:1.2}
@media(max-width:460px){.hero-cta2 .btn{font-size:.9rem;padding:.9rem .6rem}}
/* Mobile : empiler les 2 boutons → « Vous avez un projet ? » sur une seule ligne */
@media(max-width:520px){.hero-cta2{flex-direction:column;align-items:stretch}.hero-cta2 .btn{width:100%;flex:none;white-space:nowrap;justify-content:center}}
/* ===== Filet global anti-débordement mobile (le container de CHAQUE page est respecté) ===== */
img,video,canvas,iframe{max-width:100%}
html{overflow-x:clip}
@media(max-width:680px){
  .wrap{padding-left:max(18px,env(safe-area-inset-left))!important;padding-right:max(18px,env(safe-area-inset-right))!important}
  .wrap,.inner{max-width:100%}
}
.hero-cta2 .btn svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2}
/* Design « Icône ronde » (validé JM) — principal plein coral + secondaire ghost à pastille dégradée */
/* CTA hero : « Vous avez un projet ? » sur UNE ligne + les 2 boutons de MÊME largeur (retour JM 2026-07-15) */
.hero-cta2 .btn--a,.hero-cta2 .btn--o{white-space:nowrap;min-width:232px;justify-content:center;box-sizing:border-box}
@media(max-width:560px){.hero-cta2 .btn--a,.hero-cta2 .btn--o{min-width:0;width:100%}}
.hero-cta2 .btn--a{background:linear-gradient(120deg,#E8323C,#FF4D6D);color:#fff;box-shadow:0 10px 32px rgba(255,77,109,.42)}
.hero-cta2 .btn--a:hover{transform:translateY(-2px);box-shadow:0 14px 44px rgba(255,77,109,.55)}
.hero-cta2 .btn--a svg{width:1.05em;height:1.05em}
.hero-cta2 .btn--o{padding-left:.5rem;background:rgba(243,239,236,.09);border:1.5px solid rgba(243,239,236,.30);color:#fff}
.hero-cta2 .btn--o:hover{background:rgba(243,239,236,.14);border-color:rgba(243,239,236,.52)}
.hero-cta2 .btn--o .cta-chip{width:1.9em;height:1.9em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#E8323C,#FF4D6D);flex:0 0 auto;transition:box-shadow .3s}
.hero-cta2 .btn--o .cta-chip svg{width:1em;height:1em;stroke:#fff;stroke-width:2.4}
.hero-cta2 .btn--o:hover .cta-chip{box-shadow:0 0 16px rgba(255,96,76,.55)}
/* ===== Barre mobile GLOBALE (Appeler / Devis gratuit) — sur TOUTES les pages ===== */
.mbar{display:none}
@media(max-width:680px){
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:92;gap:10px;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,12,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line,#2a2730);transition:opacity .3s ease}
  body.nav-open .mbar{opacity:0;pointer-events:none} /* tiroir ouvert : la barre basse (z 92 > tiroir z 40) volait les taps du bas du menu */
  .mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px;border-radius:12px;font-weight:600;font-size:.95rem;text-decoration:none;line-height:1.1}
  .mbar a svg{width:1.15em;height:1.15em;flex:none}
  .mbar-call{background:var(--surface,#15141a);border:1.5px solid var(--line,#2a2730);color:var(--ink,#f2eff3)}
  .mbar-devis{background:var(--grad,linear-gradient(120deg,#E8323C,#FF4D6D));color:#fff}
  body .wia-dock{bottom:calc(max(16px,2vw) + 74px)}
  body .wia-cert{bottom:calc(max(16px,2vw) + 74px)}
}
/* Badge avis Google custom (hero) — remplace l'embed TrustIndex (□) */
.hero-reviews-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:999px;background:rgba(243,239,236,.06);border:1px solid rgba(243,239,236,.14);text-decoration:none;color:#F3EFEC;font-size:.92rem;margin-top:1.6rem;transition:background .25s,border-color .25s,transform .25s}
.hero-reviews-badge:hover{background:rgba(243,239,236,.1);border-color:rgba(243,239,236,.3);transform:translateY(-1px)}
.hero-reviews-badge .hrb-g{flex:0 0 auto}
.hero-reviews-badge .hrb-stars{color:#FFC107;letter-spacing:1px}
.hero-reviews-badge .hrb-rate{font-weight:700}
.hero-reviews-badge .hrb-count{color:rgba(243,239,236,.68)}
/* Hover images unifié « Glow intérieur » (validé JM 2026-07-07) — classe posée par img-reveal.js
   sur les cadres d'images de contenu (parent overflow:hidden), hors réalisations (hover dédié).
   Zoom léger + cadre incandescent interne. CSS pur → compatible 100/100. */
.wia-imghov{position:relative}
.wia-imghov img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wia-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;box-shadow:inset 0 0 0 0 rgba(255,106,87,0);transition:box-shadow .5s}
.wia-imghov:hover img,.wia-imghov:focus-within img{transform:scale(1.06)}
.wia-imghov:hover .wia-glow,.wia-imghov:focus-within .wia-glow{box-shadow:inset 0 0 0 2px rgba(255,106,87,.9),inset 0 0 34px rgba(255,96,76,.4)}
@media (prefers-reduced-motion:reduce){.wia-imghov img{transition:none}.wia-imghov:hover img{transform:none}}
.wia-modal{position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;padding:24px}
.wia-modal.is-open{display:flex}
.wia-modal__backdrop{position:absolute;inset:0;background:rgba(6,5,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wia-modal__panel{position:relative;z-index:1;width:min(520px,100%);max-height:90vh;overflow:auto;background:#141215;border:1px solid rgba(245,242,238,.12);border-radius:20px;padding:36px 30px 32px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:wia-modal-in .3s cubic-bezier(.22,1,.36,1) both}
@keyframes wia-modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.wia-modal__x{position:absolute;top:12px;right:16px;background:none;border:none;color:rgba(245,242,238,.55);font-size:1.9rem;line-height:1;cursor:pointer;transition:color .2s}
.wia-modal__x:hover{color:#E8323C}
.wia-modal__kick{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:#E8323C;margin:0 0 10px}
.wia-modal__panel h2{font-family:'Clash Display',sans-serif;font-weight:600;font-size:clamp(1.5rem,3.2vw,1.9rem);letter-spacing:-.01em;margin:0 0 8px}
.wia-modal__sub{color:rgba(245,242,238,.7);margin:0 0 22px;line-height:1.55}
.wia-modal__todo{color:rgba(245,242,238,.6);margin:0 0 16px;font-size:.95rem;line-height:1.5}
@media (prefers-reduced-motion:reduce){.wia-modal__panel{animation:none}}
/* Formulaire Gravity Forms dans le popup rappel — aligné sur la charte Noir Incandescent (validé JM). */
.wia-modal__form .gform_wrapper{margin:0}
.wia-modal__form form{margin:0}
.wia-modal__form .gform-body{display:block}
.wia-modal__form .gform_fields{row-gap:14px!important} /* GF impose display:grid + row-gap 40px -> espace enorme entre les champs (retour JM 2026-07-15) */
.wia-modal__form .gfield{margin:0!important;padding:0!important}
.wia-modal__form .gfield_label,.wia-modal__form legend.gfield_label{font-family:'Satoshi',system-ui,sans-serif!important;font-weight:600!important;font-size:.82rem!important;color:rgba(245,242,238,.75)!important;margin:0 0 6px!important;display:block}
.wia-modal__form .gfield_required{color:#E8323C!important}
.wia-modal__form input[type=text],.wia-modal__form input[type=tel],.wia-modal__form input[type=email],.wia-modal__form input[type=number],.wia-modal__form textarea{
  width:100%!important;background:rgba(245,242,238,.06)!important;border:1px solid rgba(245,242,238,.16)!important;border-radius:12px!important;
  padding:.8rem 1rem!important;color:#F3EFEC!important;font:500 .95rem/1.3 'Satoshi',system-ui,sans-serif!important;box-shadow:none!important;transition:border-color .25s,background .25s}
.wia-modal__form input::placeholder,.wia-modal__form textarea::placeholder{color:rgba(245,242,238,.4)!important;opacity:1}
.wia-modal__form input:focus,.wia-modal__form textarea:focus{outline:none!important;border-color:#E8323C!important;background:rgba(245,242,238,.09)!important}
.wia-modal__form .gform_footer{margin:18px 0 0!important;padding:0!important;display:block}
.wia-modal__form .gform_button,.wia-modal__form input[type=submit],.wia-modal__form button[type=submit]{
  background:linear-gradient(120deg,#E8323C,#FF4D6D)!important;color:#fff!important;border:none!important;
  font:700 .95rem 'Satoshi',system-ui,sans-serif!important;padding:.9rem 2.2rem!important;border-radius:99px!important;
  min-height:48px;width:auto!important;cursor:pointer;box-shadow:0 8px 30px rgba(232,50,60,.35);transition:transform .3s,box-shadow .3s}
.wia-modal__form .gform_button:hover,.wia-modal__form input[type=submit]:hover,.wia-modal__form button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,77,109,.5)}
.wia-modal__form .gfield_error input,.wia-modal__form .gfield_error textarea{border-color:#FF4D6D!important}
.wia-modal__form .gfield_validation_message,.wia-modal__form .validation_message{color:#FF9A8A!important;background:none!important;border:none!important;padding:4px 0 0!important;font-size:.8rem!important}
.wia-modal__form .gform_validation_errors{background:rgba(255,77,109,.12)!important;border:1px solid rgba(255,77,109,.4)!important;border-radius:12px!important;color:#FFB9AC!important}
.wia-modal__form .gform_confirmation_message{color:#F3EFEC!important;font-family:'Satoshi',system-ui,sans-serif!important;line-height:1.6}

/* ============================================================
   TRANSITION DE PAGE (wipe incandescent) — entre les pages
   ============================================================ */
#wia-trans{position:fixed;inset:0;z-index:99998;background:#0A0909;transform:translateY(100%);will-change:transform;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
#wia-trans::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#E8323C,#FF4D6D);box-shadow:0 0 22px rgba(255,96,76,.75)}
#wia-trans .wt-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE2D8,#E8323C 45%,#E8323C 80%);box-shadow:0 0 18px 4px rgba(255,96,76,.7);animation:wia-dot-pulse .85s ease-in-out infinite}
@keyframes wia-dot-pulse{0%,100%{transform:scale(.72);box-shadow:0 0 14px 2px rgba(255,96,76,.5)}50%{transform:scale(1.28);box-shadow:0 0 28px 8px rgba(255,96,76,.85)}}
@media (prefers-reduced-motion:reduce){#wia-trans .wt-dot{animation:none}}
html.wia-trans-in #wia-trans{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){#wia-trans{display:none!important}}

/* ============================================================
   TRANSITIONS DE PAGE — View Transitions API (natif navigateur)
   Nav complète : l'ancienne page reste affichée pendant le rendu,
   puis morph fondu+scale. Header/footer persistants (ne fondent pas).
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation: wia-vt-out .5s cubic-bezier(.76,0,.24,1) both; }
::view-transition-new(root){ animation: wia-vt-in .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes wia-vt-out{ to   { opacity:0; transform:scale(.99)  translateY(-10px); } }
@keyframes wia-vt-in { from { opacity:0; transform:scale(1.012) translateY(14px); } }

/* Header + footer = éléments persistants : nommés → hors du fondu racine, ils restent en place. */
.hd  { view-transition-name: wia-header; }
.foot{ view-transition-name: wia-footer; }
::view-transition-group(wia-header),
::view-transition-group(wia-footer){ animation-duration:.45s; }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none!important; }
}

/* Élément de menu actif (mis à jour aussi en navigation AJAX) */
.wia-menu li.current-menu-item > a,
.wia-menu li.current-menu-item > a span,
.wia-menu li.current-menu-parent > a,
nav.main li.current-menu-item > a{color:#FF8A6E}

/* tactile / sans souris : pas d'orbe */
@media (hover:none),(pointer:coarse){
  .wia-orb,.wia-orb-ghost,.wia-ring,.wia-orb-label{display:none!important}
}

/* ============================================================
   SECTION IA — « Fusion IA x Web » (differenciateur)
   ============================================================ */
.fusion{position:relative;display:grid;grid-template-columns:1fr 1fr;height:clamp(180px,30vh,300px);
  margin:clamp(2rem,5vh,3.2rem) 0 clamp(2.4rem,6vh,3.6rem);border:1px solid rgba(243,239,236,.12);
  border-radius:20px;overflow:hidden;background:#0b0a0a;--gx:50%;--gy:50%}
.fusion__side{position:relative;overflow:hidden}
.fusion__web{background:
  repeating-linear-gradient(90deg,rgba(120,140,170,.14) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(0deg,rgba(120,140,170,.14) 0 1px,transparent 1px 34px)}
.fusion__web::after{content:"";position:absolute;inset:0;
  background:radial-gradient(200px circle at var(--gx) var(--gy),rgba(255,106,87,.24),transparent 60%);transition:opacity .3s}
.fusion__ai{background:
  radial-gradient(circle at 30% 40%,rgba(255,106,87,.18),transparent 42%),
  radial-gradient(circle at 70% 70%,rgba(255,77,109,.15),transparent 40%),
  radial-gradient(rgba(255,138,110,.55) 1px,transparent 1.4px) 0 0/22px 22px}
.fusion__seam{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);z-index:1;
  background:linear-gradient(180deg,transparent,#E8323C 18%,#FF4D6D 82%,transparent);
  box-shadow:0 0 18px 3px rgba(255,96,76,.6),0 0 40px 10px rgba(232,50,60,.3);animation:fusionPulse 3.2s ease-in-out infinite}
@keyframes fusionPulse{0%,100%{opacity:.7}50%{opacity:1}}
.fusion__lbl{position:absolute;bottom:14px;font-family:var(--clash);font-weight:600;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(243,239,236,.5)}
.fusion__web .fusion__lbl{left:18px}
.fusion__ai .fusion__lbl{right:18px;color:rgba(255,138,110,.85)}
.fusion__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ia-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--dim);margin:0 0 clamp(1.4rem,3vh,2rem)}
.ia-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.4rem)}
.ia-pill{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.4rem,2.2vw,2rem);
  border:1px solid rgba(243,239,236,.1);border-radius:18px;background:rgba(243,239,236,.02);
  text-decoration:none;color:var(--ink,#F3EFEC);transition:border-color .3s,transform .3s,background .3s;overflow:hidden}
.ia-pill::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ia-pill:hover{border-color:rgba(255,106,87,.4);transform:translateY(-4px);background:rgba(255,106,87,.04)}
.ia-pill:hover::before{transform:scaleY(1)}
.ia-pill__n{font-family:var(--clash);font-weight:600;font-size:1.05rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ia-pill__t{font-family:var(--clash);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.2}
.ia-pill__d{color:var(--dim);font-size:.95rem;line-height:1.55;margin:0;flex:1}
.ia-pill__d em{font-family:var(--serif);font-style:italic;color:var(--ink,#F3EFEC)}
.ia-pill__go{align-self:flex-start;font-style:normal;font-size:1.3rem;color:#E8323C;transition:transform .3s}
.ia-pill:hover .ia-pill__go{transform:translateX(6px)}
@media (max-width:860px){.ia-pillars{grid-template-columns:1fr}.fusion{height:clamp(150px,26vh,220px)}}
/* Interaction tactile mobile sur la carte fusion (LE WEB / L'IA) */
.fusion{transition:transform .2s ease,box-shadow .3s ease}
@media(hover:none){
  .fusion:active{transform:scale(.98)}
  .fusion:active .fusion__seam{box-shadow:0 0 22px 3px rgba(255,90,60,.9)}
  .fusion:active .fusion__lbl{color:#fff}
}

/* ============================================================
   SECTION POURQUOI — frise de preuves « depuis 2012 »
   ============================================================ */
.pourquoi .big{font-weight:400;font-size:clamp(1.15rem,2.2vw,1.7rem);line-height:1.55;max-width:46rem;color:var(--ink,#F3EFEC)}
.frise{position:relative;margin-top:clamp(2.6rem,6vh,4rem);--fx:0%}
.frise__since,.frise__now{font-family:var(--clash);font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.frise__since{display:block;margin-bottom:1rem}
.frise__now{display:block;text-align:right;margin-top:1.2rem}
.frise__track{position:relative;display:flex;gap:clamp(.8rem,1.6vw,1.6rem);padding-top:20px}
.frise__line{position:absolute;top:6px;left:0;right:0;height:2px;background:rgba(243,239,236,.12);border-radius:2px;overflow:hidden}
.frise__fill{display:block;height:100%;width:var(--fx);background:var(--grad);box-shadow:0 0 12px rgba(255,96,76,.5);transition:width .1s linear}
.frise__node{flex:1;position:relative;text-align:center}
.frise__dot{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:#171013;border:2px solid #E8323C;transition:transform .25s,box-shadow .25s,background .25s;z-index:1}
.frise__node.lit .frise__dot{background:#FF5B49;box-shadow:0 0 16px 4px rgba(255,96,76,.55);transform:translateX(-50%) scale(1.22)}
.frise__card{padding-top:16px;transition:transform .25s,opacity .25s;opacity:.82}
.frise__node.lit .frise__card{transform:translateY(-3px);opacity:1}
.frise__label{display:block;font-family:var(--clash);font-weight:600;font-size:clamp(.95rem,1.15vw,1.12rem);line-height:1.25;margin-bottom:.45rem;color:var(--ink,#F3EFEC)}
.frise__text{font-size:.9rem;line-height:1.5;color:rgba(243,239,236,.62);margin:0} /* --dim (.58) = 4,41:1 sur #0a0909, juste sous les 4,5:1 requis en petite taille */
@media (max-width:860px){
  .frise__now{text-align:left}
  .frise__track{flex-direction:column;gap:0;padding-top:0;padding-left:28px}
  .frise__line{top:6px;bottom:6px;left:6px;right:auto;width:2px;height:auto;background:var(--grad)}
  .frise__fill{display:none}
  .frise__node{text-align:left;padding:14px 0}
  .frise__card{padding-top:0;opacity:1}
  .frise__dot{top:18px;left:-22px;transform:none}
  .frise__node.lit .frise__dot{transform:scale(1.18)}
}

/* ============================================================
   SECTION RÉALISATIONS — intro + bandeau logos clients
   ============================================================ */
.works__intro{max-width:48rem;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.6;color:var(--dim);margin:.9rem 0 0}
.works__intro a{color:#E8323C;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .25s}
.works__intro a:hover{color:#FF8A6E}
.clients{padding:clamp(1.6rem,4vh,2.6rem) 0;border-top:1px solid rgba(243,239,236,.1);overflow:hidden}
.clients__viewport{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients__track{display:flex;align-items:center;gap:clamp(2.2rem,5vw,4.2rem);width:max-content;animation:mq 34s linear infinite}
/* tactile : les bandes deviennent de vrais scrollers manipulables au doigt (JS .band-touch, review mobile JM) */
@media (pointer:coarse){
  .band.band-touch,.clients__viewport.band-touch{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .band-touch::-webkit-scrollbar{display:none}
  .band-touch .tk,.band-touch .clients__track{animation:none!important}
}
.clients:hover .clients__track{animation-play-state:paused}
.clients__item{font-family:var(--clash);font-weight:600;font-size:clamp(1rem,1.6vw,1.45rem);color:rgba(243,239,236,.55);white-space:nowrap;letter-spacing:.02em;transition:color .3s}
.clients__item:hover{color:#FF8A6E}
.clients__item img{height:clamp(26px,3vw,40px);width:auto;filter:grayscale(1) brightness(1.7);opacity:.6;transition:filter .3s,opacity .3s}
.clients__item:hover img{filter:none;opacity:1}
@media (max-width:860px){.works__head{display:block}.works__count{display:none}.works__intro{margin-top:1rem}}

/* ============================================================
   SECTION MÉTHODE — 4 étapes connectées
   ============================================================ */
.methode .meth-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--dim);margin:0 0 clamp(1.8rem,4.5vh,2.8rem)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.6vw,1.5rem)}
.step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:clamp(1.3rem,1.9vw,1.8rem);border:1px solid rgba(243,239,236,.1);border-radius:16px;background:rgba(243,239,236,.02);--gx:50%;--gy:50%;transition:border-color .3s,transform .3s}
.step::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(220px circle at var(--gx) var(--gy),rgba(252,91,73,.14),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.step:hover{border-color:rgba(255,106,87,.35);transform:translateY(-4px)}
.step:hover::before{opacity:1}
.step>*{position:relative;z-index:1}
.step__n{font-family:var(--clash);font-weight:600;font-size:1.7rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.step__wk{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FF8A6E;border:1px solid rgba(255,138,110,.32);border-radius:999px;padding:3px 10px}
.step__t{font-family:var(--clash);font-weight:600;font-size:clamp(1.05rem,1.35vw,1.22rem);line-height:1.2;color:var(--ink,#F3EFEC)}
.step__d{font-size:.9rem;line-height:1.55;color:var(--dim);margin:0}
.step:not(:last-child)::after{content:"";position:absolute;top:34px;right:calc(clamp(1rem,1.6vw,1.5rem)/-2 - 4px);width:8px;height:8px;border-top:2px solid rgba(255,106,87,.45);border-right:2px solid rgba(255,106,87,.45);transform:rotate(45deg);z-index:3}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}.step:not(:last-child)::after{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ============================================================
   SECTION ZONE D'INTERVENTION — split carte (Hexagone) + villes
   ============================================================ */
.zone__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.zone__map{position:relative;width:100%;max-width:360px;aspect-ratio:1;margin-inline:auto;--gx:50%;--gy:50%}
.zone__france{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;background:linear-gradient(160deg,rgba(255,106,87,.55),rgba(255,77,109,.42) 58%,rgba(255,106,87,.32));filter:drop-shadow(0 0 10px rgba(255,96,76,.3))}
.zone__map::before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(140px circle at var(--gx) var(--gy),rgba(255,235,225,.16),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none}
.zone__map:hover::before{opacity:1}
.zone__marker{position:absolute;z-index:3;transform:translate(-50%,-50%)}
.zone__marker-halo{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;background:#FF5B49;animation:zonePulse 3.2s ease-in-out infinite}
.zone__marker-dot{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#FF5B49;box-shadow:0 0 12px 2px rgba(255,96,76,.75),0 0 0 4px rgba(12,11,11,.55)}
.zone__marker-lbl{position:absolute;left:0;top:15px;transform:translateX(-50%);font-family:var(--clash);font-weight:600;font-size:.82rem;color:#F3EFEC;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.7)}
@keyframes zonePulse{0%,100%{opacity:.16;transform:translate(-50%,-50%) scale(1)}50%{opacity:.30;transform:translate(-50%,-50%) scale(1.35)}}
.zone .big{font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.6;color:var(--dim);max-width:none}
.zone__cities{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:clamp(1.4rem,3vh,2rem) 0 0;padding:0}
.zone__cities a,.zone__cities span{display:inline-flex;align-items:center;min-height:44px;font-size:.84rem;font-weight:600;color:var(--dim);border:1px solid rgba(243,239,236,.14);border-radius:999px;padding:6px 14px;text-decoration:none;transition:color .25s,border-color .25s,background .25s}
.zone__cities a:hover,.zone__cities li:hover>span{color:#FF8A6E;border-color:rgba(255,138,110,.42);background:rgba(255,106,87,.06)}
@media(max-width:860px){.zone__grid{grid-template-columns:1fr;gap:2rem}.zone__map{max-width:260px;margin-inline:auto}}

/* ===== Bouton son LISIBLE + invitation sonore + easter egg trou noir (JM 2026-07-15) ===== */
/* Bouton son : icône haut-parleur à états (barré = muet, ondes = actif) + libellé clair */
.snd{gap:.6rem;padding:.55rem 1.15rem;border-color:rgba(232,50,60,.4);color:var(--fg);letter-spacing:.14em}
.snd .lbl{display:inline} /* réactive le libellé (une ancienne règle le masquait partout) */
@media(max-width:640px){.snd .lbl{display:none}} /* mobile : l'icône à états suffit */
.snd:hover{border-color:rgba(255,77,109,.7)}
.snd .snd-ic{width:17px;height:17px;flex:none;overflow:visible}
.snd .snd-ic .spk{fill:currentColor}
.snd .snd-ic .wv{fill:none;stroke:#FF4D6D;stroke-width:1.9;stroke-linecap:round;opacity:0;transition:opacity .3s}
.snd .snd-ic .mx{fill:none;stroke:#FF4D6D;stroke-width:1.9;stroke-linecap:round;opacity:1;transition:opacity .3s}
.snd.on .snd-ic .wv{opacity:1}
.snd.on .snd-ic .mx{opacity:0}
.snd .lbl-on{display:none}
.snd.on .lbl-off{display:none}
.snd.on .lbl-on{display:inline}
.snd .eq{display:none}
.snd.on .eq{display:inline-flex}
/* Invitation sonore (pastille une-fois) */
.snd-invite{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:96;display:flex;align-items:center;gap:12px;background:rgba(15,15,18,.96);border:1px solid rgba(255,77,109,.35);border-radius:999px;padding:10px 10px 10px 18px;box-shadow:0 18px 50px -18px rgba(0,0,0,.8);opacity:0;transition:opacity .4s,transform .4s;backdrop-filter:blur(8px)}
.snd-invite.si-in{opacity:1;transform:translate(-50%,0)}
.snd-invite .si-tx{font-size:.85rem;color:#F3EFEC;white-space:nowrap}
.snd-invite button{cursor:pointer;border:0;border-radius:999px;padding:9px 16px;font:600 .8rem/1 inherit;font-family:inherit}
.snd-invite .si-yes{background:linear-gradient(120deg,#E8323C,#FF4D6D);color:#fff}
.snd-invite .si-no{background:rgba(255,255,255,.08);color:#bdbac2}
@media(max-width:680px){.snd-invite{bottom:84px;max-width:94vw;flex-wrap:wrap;justify-content:center;border-radius:18px;padding:12px 14px}.snd-invite .si-tx{white-space:normal;text-align:center;font-size:.8rem}}
/* Easter egg trou noir */
.bh-canvas{position:fixed;inset:0;z-index:2147483600;pointer-events:none}
html.bh-lock{overflow:hidden}
body.bh-sucked{transition:transform 1.35s cubic-bezier(.55,-0.02,.85,.4),filter 1.35s ease;transform:scale(.0015) rotate(400deg);filter:blur(5px) brightness(.55)}
body.bh-reborn{transition:transform .95s cubic-bezier(.16,1,.3,1),filter .95s ease;transform:none;filter:none}
.bh-void{position:fixed;inset:0;z-index:2147483601;background:transparent;display:flex;align-items:center;justify-content:center;text-align:center;opacity:1;transition:opacity .6s}
.bh-void.bh-out{opacity:0;pointer-events:none}
.bh-box{max-width:640px;padding:24px}
.bh-line{color:#F3EFEC;font-family:'Clash Display','Bricolage Grotesque','Satoshi',Arial,sans-serif;font-weight:500;font-size:clamp(1.05rem,2.6vw,1.45rem);line-height:1.65;margin:0 0 16px;text-shadow:0 2px 18px rgba(0,0,0,.9);letter-spacing:.01em}
.bh-btn{margin-top:22px;cursor:pointer;border:1px solid rgba(255,77,109,.65);background:rgba(15,15,18,.65);color:#fff;border-radius:999px;padding:15px 30px;font:700 1.02rem 'Clash Display','Bricolage Grotesque','Satoshi',Arial,sans-serif;letter-spacing:.04em;opacity:0;transform:scale(.9);transition:opacity .5s,transform .5s,box-shadow .4s;animation:bh-pulse 1.8s ease-in-out infinite}
.bh-btn.bh-btn-in{opacity:1;transform:scale(1)}
.bh-btn:hover{box-shadow:0 0 44px rgba(255,77,109,.55);background:linear-gradient(120deg,#E8323C,#FF4D6D)}
@keyframes bh-pulse{0%,100%{box-shadow:0 0 14px rgba(255,77,109,.25)}50%{box-shadow:0 0 34px rgba(255,77,109,.55)}}
.bh-esc{color:rgba(243,239,236,.4);font-size:.75rem;margin-top:14px;font-family:Arial,Helvetica,sans-serif}
.bh-tip{color:rgba(243,239,236,.62);font-size:.75rem;cursor:default;transition:color .3s} /* .34 = 2,84:1, sous les 4,5:1 — la discrétion vient de la taille, pas de l'invisibilité */
.bh-tip:hover{color:rgba(255,77,109,.75)}
/* Phrase unique du vide (MAJUSCULES, typo du site, apparaît puis disparaît) — v3 trou noir */
.bh-phrase{min-height:5.2em;display:flex;align-items:center;justify-content:center;color:#F3EFEC;font-family:'Clash Display','Bricolage Grotesque','Satoshi',Arial,sans-serif;font-weight:600;font-size:clamp(1.25rem,3.4vw,2.2rem);letter-spacing:.07em;line-height:1.5;text-transform:uppercase;opacity:0;transform:translateY(12px) scale(.97);transition:opacity .55s ease,transform .55s ease;text-shadow:0 2px 26px rgba(0,0,0,.95);margin:0 0 10px;text-wrap:balance;max-width:22ch}
.bh-phrase.bh-ph-in{opacity:1;transform:none}
/* clip video du Big Bang (sous le canvas du trou noir) */
.bh-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:2147483599;pointer-events:none;background:#000}

/* logo Webiaprod en chargement final du trou noir */
.bh-logo{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);width:min(44vw,320px);opacity:0;transition:opacity .8s ease,transform .8s ease;z-index:2147483602;pointer-events:none;filter:drop-shadow(0 0 30px rgba(232,50,60,.4))}
.bh-logo.bh-logo-in{opacity:1;transform:translate(-50%,-50%) scale(1);animation:bh-logo-pulse 1.6s ease-in-out .8s infinite}
@keyframes bh-logo-pulse{0%,100%{filter:drop-shadow(0 0 22px rgba(232,50,60,.3))}50%{filter:drop-shadow(0 0 44px rgba(255,77,109,.6))}}