/* AM DIGICOM — Design du site (version « Digital Experience ») */
/* =========================================================
   AM DIGICOM — V3 « DIGITAL EXPERIENCE »
   ========================================================= */
:root{
  --bg:#08090C; --bg-2:#0C0E13; --surface:#11141B; --surface-2:#171B24;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#ECEEF2; --muted:#9097A6; --dim:#646B7A;
  --volt:#FF007A; --volt-bg:#E5006D; --volt-ink:#FFFFFF; --blue:#5B6CFF;
  --f-head:"Sora", system-ui, sans-serif; --f-body:"Inter", system-ui, -apple-system, sans-serif; --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad:clamp(18px, 4vw, 64px); --max:1600px; --r:22px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:16.5px; line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--volt); outline-offset:3px; border-radius:8px}
::selection{background:var(--volt-bg); color:var(--volt-ink)}
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; background:var(--volt-bg); color:var(--volt-ink); padding:10px 16px; border-radius:10px; z-index:200; text-decoration:none; font-weight:600}
.skip:focus{top:12px}
.mono{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.tag{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:7px 12px 7px 10px; border:1px solid var(--line-2); border-radius:99px; background:rgba(255,255,255,.02)}
.tag i{width:7px; height:7px; border-radius:50%; background:var(--volt); box-shadow:0 0 12px var(--volt)}
.grad{background:linear-gradient(100deg, #FF007A 0%, #FF5FA8 50%, #A3A9FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Buttons */
.btn{position:relative; display:inline-flex; align-items:center; gap:10px; height:54px; padding:0 24px; border-radius:14px; font-weight:600; font-size:15px; text-decoration:none; white-space:nowrap; transition:transform .4s var(--ease), background .3s, box-shadow .4s, color .3s; isolation:isolate}
.btn svg{width:16px; height:16px; transition:transform .4s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn--volt{background:var(--volt-bg); color:var(--volt-ink); box-shadow:0 0 0 0 rgba(255,0,122,.0), inset 0 -2px 0 rgba(0,0,0,.15)}
.btn--volt:hover{box-shadow:0 10px 40px -8px rgba(255,0,122,.55), inset 0 -2px 0 rgba(0,0,0,.15); transform:translateY(-2px)}
.btn--glass{background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--text); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn--glass:hover{background:rgba(255,255,255,.09); transform:translateY(-2px)}
.btn--sm{height:44px; padding:0 18px; font-size:14px; border-radius:12px}

/* Header */
.header{position:fixed; top:14px; left:0; right:0; z-index:100; padding-inline:var(--pad); pointer-events:none}
.bar{pointer-events:auto; max-width:calc(var(--max) - 2 * 0px); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; height:66px; padding:0 10px 0 20px; border-radius:18px; background:rgba(12,14,19,.55); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); transition:background .4s, border-color .4s}
.is-scrolled .bar{background:rgba(12,14,19,.82); border-color:var(--line-2)}
.logo{display:inline-flex; align-items:center; text-decoration:none; line-height:0; --lg-b:#FFFFFF; --lg-a:#08090C; --lg-d:#ECEEF2}
.logo .lg{height:28px; width:auto}
.lg{display:block; height:auto; overflow:visible}
.lg .ld{fill:var(--lg-d,#1d1d1b)} .lg .lp{fill:var(--lg-p,#FF007A)} .lg .lb{fill:var(--lg-b,#000)} .lg .la{fill:var(--lg-a,#fff)}
.nav{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav a{display:block; padding:9px 14px; border-radius:10px; text-decoration:none; font-size:14.5px; font-weight:500; color:var(--muted); transition:color .3s, background .3s}
.nav a:hover,.nav a[aria-current]{color:var(--text); background:rgba(255,255,255,.06)}
.bar__r{display:flex; align-items:center; gap:8px}
.menu-btn{display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-2); position:relative}
.menu-btn span{position:absolute; left:14px; right:14px; height:1.6px; background:var(--text); transition:transform .4s var(--ease), top .4s var(--ease)}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:26px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:22px; transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:22px; transform:rotate(-45deg)}
.sheet{pointer-events:auto; max-width:var(--max); margin:8px auto 0; border-radius:18px; background:rgba(12,14,19,.96); border:1px solid var(--line-2); overflow:hidden; display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease), opacity .4s; opacity:0; visibility:hidden}
.sheet.is-open{grid-template-rows:1fr; opacity:1; visibility:visible}
.sheet > div{overflow:hidden}
.sheet ul{list-style:none; margin:0; padding:10px}
.sheet li a{display:flex; justify-content:space-between; align-items:center; padding:16px 14px; border-radius:12px; text-decoration:none; font-family:var(--f-head); font-weight:600; font-size:22px}
.sheet li a:hover{background:rgba(255,255,255,.05)}
.sheet li a span{font-family:var(--f-mono); font-size:12px; color:var(--dim); font-weight:400}
.sheet__foot{padding:6px 24px 22px; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:14px; color:var(--muted)}
.sheet__foot a{text-decoration:none}

/* Hero */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:130px 0 0; overflow:hidden; isolation:isolate}
#field{position:absolute; inset:0; width:100%; height:100%; z-index:-2}
.hero::before{content:""; position:absolute; z-index:-1; width:900px; height:900px; right:-200px; top:-260px; background:radial-gradient(closest-side, rgba(91,108,255,.28), transparent 70%); filter:blur(10px)}
.hero::after{content:""; position:absolute; z-index:-1; width:700px; height:700px; left:-260px; bottom:-320px; background:radial-gradient(closest-side, rgba(255,0,122,.13), transparent 70%)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(30px,4vw,70px); align-items:center}
.h1{font-family:var(--f-head); font-weight:700; font-size:clamp(2.7rem,6.1vw,6.6rem); line-height:.98; letter-spacing:-.045em; margin:26px 0 22px}
.h1 .w{display:inline-block; opacity:0; transform:translateY(.4em); filter:blur(8px); transition:opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease)}
.is-ready .h1 .w{opacity:1; transform:none; filter:none}
.rot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--f-head); font-weight:500; font-size:clamp(18px,1.7vw,24px); color:var(--muted); margin:0 0 26px; letter-spacing:-.01em}
.rot__box{position:relative; display:inline-grid; height:1.5em; overflow:hidden; padding:0 14px; border-radius:10px; background:rgba(255,0,122,.08); border:1px solid rgba(255,0,122,.25); color:var(--volt); min-width:9.5em}
.rot__box span{grid-area:1/1; line-height:1.5em; transform:translateY(110%); opacity:0; transition:transform .7s var(--ease), opacity .5s}
.rot__box span.on{transform:none; opacity:1}
.rot__box span.out{transform:translateY(-110%); opacity:0}
.hero__p{max-width:33em; color:#B7BDC9; font-size:clamp(16.5px,1.15vw,18.5px); margin:0 0 34px}
.hero__ctas{display:flex; flex-wrap:wrap; gap:12px}
.fade{opacity:0; transform:translateY(16px); transition:opacity 1s var(--ease) .45s, transform 1s var(--ease) .45s}
.is-ready .fade{opacity:1; transform:none}

.stack{position:relative; aspect-ratio:1/1.02; perspective:1200px}
.layer{position:absolute; transition:transform .9s var(--ease); will-change:transform}
.win{left:0; top:8%; width:84%; border-radius:16px; overflow:hidden; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02)}
.win__bar{display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-bottom:1px solid var(--line); background:#0E1117}
.win__bar i{width:9px; height:9px; border-radius:50%; background:#2A2F3A}
.win__bar span{margin-left:10px; font-family:var(--f-mono); font-size:11px; color:var(--dim)}
.win .media{aspect-ratio:4/3}
.phone{right:0; bottom:2%; width:34%; aspect-ratio:9/18.5; border-radius:30px; padding:8px; background:#050608; border:1px solid var(--line-2); box-shadow:0 40px 80px -20px rgba(0,0,0,.9), 0 0 60px -20px rgba(91,108,255,.4)}
.phone .media{width:100%; height:100%; border-radius:23px}
.phone::before{content:""; position:absolute; top:14px; left:50%; width:30%; height:16px; transform:translateX(-50%); border-radius:99px; background:#050608; z-index:2}
.chip{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; background:rgba(17,20,27,.82); border:1px solid var(--line-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 20px 40px -20px rgba(0,0,0,.8); font-size:13px; white-space:nowrap}
.chip b{font-family:var(--f-head); font-size:22px; font-weight:700; letter-spacing:-.02em}
.chip small{display:block; color:var(--muted); font-size:12px; line-height:1.3}
.chip .st{color:var(--volt); letter-spacing:.1em}
.chip--a{left:-4%; bottom:10%}
.chip--b{right:6%; top:0}
.chip--c{left:40%; bottom:-2%; font-family:var(--f-mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.chip--c i{width:7px; height:7px; border-radius:50%; background:var(--volt); box-shadow:0 0 10px var(--volt)}
.hero__in{opacity:0; transform:translateY(30px) scale(.98); transition:opacity 1.2s var(--ease) .3s, transform 1.4s var(--ease) .3s}
.is-ready .hero__in{opacity:1; transform:none}

.ticker{margin-top:clamp(50px,7vw,100px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; background:rgba(8,9,12,.6)}
.ticker__t{display:flex; width:max-content; animation:tick 42s linear infinite}
.ticker__g{display:flex; gap:44px; padding:18px 22px; font-family:var(--f-mono); font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.ticker__g span::before{content:"◆"; color:var(--volt); margin-right:14px; font-size:9px; vertical-align:2px}
@keyframes tick{to{transform:translateX(-50%)}}

/* Media fallback */
.media{position:relative; overflow:hidden; background:var(--surface-2)}
.media img{width:100%; height:100%; object-fit:cover}
.media.is-missing{background:
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/22px 22px,
  radial-gradient(120% 90% at 80% 0%, rgba(91,108,255,.28), transparent 60%),
  radial-gradient(90% 70% at 0% 100%, rgba(255,0,122,.12), transparent 60%), #10131A}
.media.is-missing::after{content:"▢ visuel à intégrer · " attr(data-label); position:absolute; left:14px; bottom:12px; right:14px; font:500 10.5px/1.4 var(--f-mono); text-transform:uppercase; letter-spacing:.05em; color:rgba(236,238,242,.6)}
.phone .media.is-missing::after{bottom:24px}
.pnl .media.is-missing::after{z-index:2; top:16px; bottom:auto}

/* Sections */
section{position:relative}
.sec{padding-block:clamp(90px,11vw,170px)}
.head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px 40px; margin-bottom:clamp(44px,5.5vw,80px)}
.h2{font-family:var(--f-head); font-weight:700; font-size:clamp(2.2rem,4.6vw,4.6rem); line-height:1.02; letter-spacing:-.04em; margin:18px 0 0; max-width:15em}
.head p.sub{max-width:28em; margin:0; color:var(--muted)}
.rv{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1.1s var(--ease)}
.rv.is-in{opacity:1; transform:none}

/* Agence */
.agence{background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)}
.statement{font-family:var(--f-head); font-weight:600; font-size:clamp(1.7rem,3.3vw,3.4rem); line-height:1.14; letter-spacing:-.03em; margin:22px 0 0; max-width:23em}
.statement .dim{color:var(--dim)}
.counters{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(50px,6vw,90px)}
.counter{padding:26px 24px 24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden}
.counter::after{content:""; position:absolute; inset:auto -30% -60% auto; width:200px; height:200px; background:radial-gradient(closest-side, rgba(255,0,122,.12), transparent)}
.counter b{display:block; font-family:var(--f-head); font-weight:700; font-size:clamp(2.6rem,4vw,3.8rem); letter-spacing:-.04em; line-height:1}
.counter > span{display:block; color:var(--muted); font-size:14px; margin-top:12px}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; list-style:none; padding:0}
.values li{display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.015)}
.ico{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,0,122,.08); color:var(--volt); border:1px solid rgba(255,0,122,.2)}
.ico svg{width:20px; height:20px}
.values h3{font-family:var(--f-head); font-size:17px; font-weight:600; margin:2px 0 4px; letter-spacing:-.01em}
.values p{margin:0; color:var(--muted); font-size:14.5px}

/* Expertises (onglets) */
.xp{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(20px,3vw,48px); align-items:start}
.tabs{display:flex; flex-direction:column; gap:6px}
.tab{position:relative; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:18px 20px; border-radius:16px; text-align:left; border:1px solid transparent; transition:background .35s, border-color .35s}
.tab:hover{background:rgba(255,255,255,.03)}
.tab[aria-selected="true"]{background:var(--surface); border-color:var(--line-2)}
.tab__n{font-family:var(--f-mono); font-size:12px; color:var(--dim)}
.tab[aria-selected="true"] .tab__n{color:var(--volt)}
.tab__t{font-family:var(--f-head); font-weight:600; font-size:clamp(18px,1.6vw,22px); letter-spacing:-.02em; color:var(--muted); transition:color .3s}
.tab[aria-selected="true"] .tab__t,.tab:hover .tab__t{color:var(--text)}
.tab__a{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--dim); transition:all .4s var(--ease)}
.tab__a svg{width:14px; height:14px}
.tab[aria-selected="true"] .tab__a{background:var(--volt-bg); color:var(--volt-ink); transform:rotate(-45deg)}
.tab__bar{position:absolute; left:20px; right:20px; bottom:8px; height:2px; border-radius:2px; background:var(--line); overflow:hidden; opacity:0}
.tab[aria-selected="true"] .tab__bar{opacity:1}
.tab__bar i{display:block; height:100%; width:0; background:var(--volt)}
.panels{position:relative}
.pnl{border-radius:28px; background:var(--surface); border:1px solid var(--line-2); overflow:hidden}
.pnl[hidden]{display:none}
.pnl .media{aspect-ratio:16/8.6}
.pnl .media::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(17,20,27,.95)); z-index:1}
.pnl__body{padding:0 clamp(22px,3vw,40px) clamp(26px,3vw,40px); margin-top:-60px; position:relative; z-index:2}
.pnl h3{font-family:var(--f-head); font-weight:700; font-size:clamp(28px,3vw,42px); letter-spacing:-.035em; margin:0 0 12px; line-height:1.05}
.pnl p{margin:0 0 22px; color:#B7BDC9; max-width:38em}
.pnl__cols{display:grid; grid-template-columns:1fr 1fr; gap:24px; border-top:1px solid var(--line); padding-top:22px}
.pnl__cols h4{margin:0 0 12px; font-family:var(--f-mono); font-weight:500; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.chips{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0}
.chips li{font-size:13px; padding:6px 11px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--line)}
.gain{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14.5px; color:#C9CED8}
.gain li{display:flex; gap:10px}
.gain li::before{content:"→"; color:var(--volt); font-family:var(--f-mono)}
.pnl .btn{margin-top:26px}
.pnl.anim{animation:pin .7s var(--ease)}
@keyframes pin{from{opacity:0; transform:translateY(14px) scale(.99)}to{opacity:1; transform:none}}

/* Réalisations */
.seg{position:relative; display:inline-flex; flex-wrap:wrap; gap:2px; padding:5px; border-radius:16px; background:var(--surface); border:1px solid var(--line)}
.seg button{position:relative; z-index:1; padding:10px 16px; border-radius:11px; font-size:14px; font-weight:500; color:var(--muted); transition:color .3s}
.seg button[aria-pressed="true"]{color:#fff}
.seg__pill{position:absolute; z-index:0; top:5px; left:5px; height:calc(100% - 10px); border-radius:11px; background:var(--volt-bg); transition:transform .5s var(--ease), width .5s var(--ease), height .5s var(--ease)}
.bento{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(0,auto); gap:16px}
.pcard{grid-column:span var(--c,4); position:relative; border-radius:var(--r); overflow:hidden; background:var(--surface); border:1px solid var(--line); text-decoration:none; display:flex; flex-direction:column; transition:transform .6s var(--ease), border-color .4s; transform-style:preserve-3d; --mx:50%; --my:50%}
.pcard[hidden]{display:none}
.pcard::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(255,0,122,.10), transparent 45%); opacity:0; transition:opacity .4s}
.pcard:hover{border-color:var(--line-2)}
.pcard:hover::after{opacity:1}
.pcard .media{aspect-ratio:var(--ar,16/10)}
.pcard .media img{transition:transform 1.2s var(--ease)}
.pcard:hover .media img{transform:scale(1.04)}
.pcard__b{padding:20px 22px 22px; display:flex; flex-direction:column; gap:6px; flex:1}
.pcard__top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.pcard__cat{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--volt)}
.pcard__go{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line-2); transition:all .4s var(--ease)}
.pcard__go svg{width:14px; height:14px}
.pcard:hover .pcard__go{background:var(--volt-bg); color:var(--volt-ink); border-color:var(--volt)}
.pcard h3{font-family:var(--f-head); font-weight:600; font-size:clamp(20px,1.8vw,26px); letter-spacing:-.025em; margin:2px 0 0}
.pcard p{margin:0; color:var(--muted); font-size:14.5px}
.pcard__more{margin-top:auto; padding-top:10px; font-size:13.5px; font-weight:600; color:var(--text)}
.bento.is-filtered .pcard{grid-column:span 4}
.work__end{display:flex; justify-content:center; margin-top:44px}

/* Méthode */
.method{background:var(--bg-2); border-block:1px solid var(--line)}
.tl{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; list-style:none; margin:0; padding:40px 0 0}
.tl-wrap{position:relative}
.tl__line{position:absolute; left:0; right:0; top:11px; height:2px; background:var(--line-2); border-radius:2px; overflow:hidden}
.tl__line i{display:block; height:100%; width:var(--p,0%); background:linear-gradient(90deg, var(--blue), var(--volt)); box-shadow:0 0 18px rgba(255,0,122,.5)}
.tl li{position:relative}
.tl li::before{content:""; position:absolute; top:-40px; left:0; width:24px; height:24px; border-radius:50%; background:var(--bg-2); border:2px solid var(--line-2); transition:all .5s var(--ease)}
.tl li.on::before{border-color:var(--volt); background:var(--volt); box-shadow:0 0 0 6px rgba(255,0,122,.12), 0 0 22px rgba(255,0,122,.6)}
.tl .k{font-family:var(--f-mono); font-size:12px; color:var(--dim); display:block; margin:6px 0 10px}
.tl li.on .k{color:var(--volt)}
.tl h3{font-family:var(--f-head); font-weight:600; font-size:clamp(22px,2vw,28px); letter-spacing:-.03em; margin:0 0 8px}
.tl p{margin:0; color:var(--muted); font-size:15px; max-width:22em}

/* Avis */
.reviews .score{display:flex; align-items:center; gap:18px; padding:14px 20px 14px 14px; border-radius:18px; background:var(--surface); border:1px solid var(--line)}
.score .g{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:#fff}
.score .g svg{width:26px; height:26px}
.score b{font-family:var(--f-head); font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1}
.score .st{color:var(--volt); letter-spacing:.12em; font-size:14px}
.score small{display:block; color:var(--muted); font-size:13px}
.mq{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.mq + .mq{margin-top:16px}
.mq__t{display:flex; gap:16px; width:max-content; animation:tick 60s linear infinite}
.mq--rev .mq__t{animation-direction:reverse; animation-duration:70s}
.mq:hover .mq__t{animation-play-state:paused}
.rcard{flex:none; width:clamp(300px,30vw,440px); margin:0; padding:24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line)}
.rcard blockquote{margin:0 0 18px; font-size:16px; color:#D3D7DF; line-height:1.55}
.rcard blockquote p{margin:0}
.rcard figcaption{display:flex; align-items:center; gap:12px; font-size:14px}
.rcard .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--blue), #8E9BFF); font-family:var(--f-head); font-weight:700; font-size:14px; color:#fff}
.rcard figcaption small{display:block; color:var(--dim); font-size:12.5px}
.rcard .st{margin-left:auto; color:var(--volt); font-size:12px; letter-spacing:.1em}

/* Pourquoi */
.why-b{display:grid; grid-template-columns:repeat(6,1fr); gap:16px; list-style:none; margin:0; padding:0}
.why-b li{grid-column:span 2; padding:28px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column; gap:12px; min-height:240px; position:relative; overflow:hidden}
.why-b li:nth-child(1){grid-column:span 4; background:linear-gradient(135deg, rgba(91,108,255,.18), rgba(17,20,27,1) 55%), var(--surface)}
.why-b h3{font-family:var(--f-head); font-weight:600; font-size:clamp(20px,1.9vw,26px); letter-spacing:-.025em; margin:auto 0 0; line-height:1.15}
.why-b li:nth-child(1) h3{font-size:clamp(26px,2.8vw,38px); max-width:14em}
.why-b p{margin:0; color:var(--muted); font-size:15px; max-width:32em}

/* FAQ */
.faq-l{max-width:1000px; margin-inline:auto; display:grid; gap:10px}
.qa{border-radius:18px; background:var(--surface); border:1px solid var(--line); transition:border-color .3s}
.qa:has(button[aria-expanded="true"]){border-color:var(--line-2)}
.qa__q{width:100%; display:grid; grid-template-columns:44px 1fr 36px; align-items:center; gap:10px; padding:22px 22px; text-align:left; font-family:var(--f-head); font-weight:600; font-size:clamp(17px,1.5vw,20px); letter-spacing:-.015em}
.qa__q .n{font-family:var(--f-mono); font-size:12px; color:var(--dim); font-weight:400}
.qa__q .pm{width:36px; height:36px; border-radius:10px; border:1px solid var(--line-2); position:relative; transition:all .4s var(--ease)}
.qa__q .pm::before,.qa__q .pm::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; background:currentColor; transform:translate(-50%,-50%)}
.qa__q .pm::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s var(--ease)}
.qa__q[aria-expanded="true"] .pm{background:var(--volt-bg); color:var(--volt-ink); border-color:var(--volt)}
.qa__q[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.qa__a.open{grid-template-rows:1fr}
.qa__a > div{overflow:hidden}
.qa__a p{margin:0; padding:0 70px 24px 76px; color:#B7BDC9}

/* CTA / brief */
.cta{padding-block:clamp(60px,8vw,120px)}
.cta__box{position:relative; overflow:hidden; border-radius:36px; padding:clamp(34px,6vw,90px); background:radial-gradient(80% 120% at 100% 0%, rgba(91,108,255,.35), transparent 55%), radial-gradient(60% 90% at 0% 100%, rgba(255,0,122,.16), transparent 60%), var(--surface); border:1px solid var(--line-2); isolation:isolate}
.cta__box::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/34px 34px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/34px 34px; mask-image:radial-gradient(70% 70% at 70% 30%, #000, transparent); -webkit-mask-image:radial-gradient(70% 70% at 70% 30%, #000, transparent)}
.cta__grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(30px,5vw,80px); align-items:end}
.cta h2{font-family:var(--f-head); font-weight:700; font-size:clamp(2.4rem,5.4vw,5.6rem); line-height:1; letter-spacing:-.045em; margin:20px 0 22px}
.cta__p{color:#B7BDC9; max-width:30em; margin:0 0 30px}
.cta__ctas{display:flex; flex-wrap:wrap; gap:12px}
.brief{padding:26px; border-radius:24px; background:rgba(8,9,12,.6); border:1px solid var(--line-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.brief h3{font-family:var(--f-head); font-size:18px; font-weight:600; margin:0 0 4px}
.brief > p{margin:0 0 18px; color:var(--muted); font-size:14px}
.picks{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px}
.picks button{padding:9px 14px; border-radius:12px; border:1px solid var(--line-2); font-size:14px; color:#C9CED8; transition:all .3s var(--ease)}
.picks button:hover{border-color:rgba(255,0,122,.5)}
.picks button[aria-pressed="true"]{background:rgba(255,0,122,.12); border-color:var(--volt); color:var(--volt)}
.picks button[aria-pressed="true"]::before{content:"✓ "}
.brief__out{display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:18px}
.brief__out .mono{font-size:11.5px; color:var(--dim); text-transform:none; letter-spacing:.02em}
.brief .btn{width:100%; justify-content:center}
.contact-line{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid var(--line); font-size:15px; color:#C9CED8}
.contact-line a{text-decoration:none} .contact-line a:hover{color:var(--volt)}

/* Footer */
.footer{border-top:1px solid var(--line); padding-top:clamp(60px,7vw,100px)}
.f-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px}
.f-grid h2{font-family:var(--f-mono); font-weight:500; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px}
.f-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14.5px; color:#C9CED8}
.f-grid a{text-decoration:none} .f-grid a:hover{color:var(--volt)}
.f-pitch{color:var(--muted); margin:18px 0 24px; max-width:24em}
.soc{display:flex; gap:8px}
.soc a{width:42px; height:42px; border-radius:12px; border:1px solid var(--line-2); display:grid; place-items:center; transition:all .3s}
.soc a:hover{background:var(--volt-bg); color:var(--volt-ink); border-color:var(--volt)}
.soc svg{width:17px; height:17px}
.f-mark{margin:clamp(50px,7vw,100px) 0 0; user-select:none; --lg-b:#FFFFFF; --lg-a:#08090C; --lg-d:#ECEEF2}
.f-mark .lg{width:100%}
.f-bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding:22px 0 30px; border-top:1px solid var(--line); font-size:13px; color:var(--dim)}
.f-bot ul{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:0; padding:0}
.f-bot a{text-decoration:none} .f-bot a:hover{color:var(--text)}

/* Responsive */
@media (min-width:1800px){ body{font-size:17.5px} }
@media (max-width:1180px){
  .nav,.bar__r .btn{display:none}
  .menu-btn{display:block}
  .hero__grid{grid-template-columns:1fr}
  .stack{max-width:640px; width:100%; margin-inline:auto}
  .counters{grid-template-columns:repeat(2,1fr)}
  .values{grid-template-columns:repeat(2,1fr)}
  .xp{grid-template-columns:1fr}
  .tabs{flex-direction:row; overflow-x:auto; scrollbar-width:none; gap:6px; padding-bottom:4px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none; grid-template-columns:auto auto; padding:12px 16px}
  .tab__a{display:none}
  .tab__bar{left:16px; right:16px; bottom:4px}
  .pcard{grid-column:span 6 !important}
  .cta__grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-grid > div:first-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .tl{grid-template-columns:1fr 1fr; row-gap:50px}
  .tl__line{display:none}
  .tl li::before{position:static; display:block; margin-bottom:16px}
  .why-b li,.why-b li:nth-child(n){grid-column:span 3}
  .why-b li:nth-child(1){grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16px}
  .header{top:10px}
  .bar{height:60px; padding:0 7px 0 14px}
  .logo .lg{height:24px}
  .hero{padding-top:110px}
  .chip--b{right:0; top:-2%}
  .chip--a{left:0}
  .chip--c{display:none}
  .chip{padding:10px 12px}
  .chip b{font-size:18px}
  .counters,.values{grid-template-columns:1fr}
  .counters{grid-template-columns:1fr 1fr}
  .counter{padding:20px 18px}
  .pnl__cols{grid-template-columns:1fr}
  .pcard,.bento.is-filtered .pcard{grid-column:1 / -1 !important}
  .tl{grid-template-columns:1fr}
  .why-b li,.why-b li:nth-child(n){grid-column:1 / -1; min-height:0}
  .qa__q{grid-template-columns:32px 1fr 36px; padding:18px 16px}
  .qa__a p{padding:0 18px 20px 58px}
  .cta__box{border-radius:26px; padding:28px 20px}
  .brief{padding:18px}
  .f-grid{grid-template-columns:1fr}
  .seg{display:flex; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .seg button{flex:none}
  .rcard{width:82vw}
  .btn{height:52px; padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .h1 .w,.fade,.rv,.hero__in{opacity:1!important; transform:none!important; filter:none!important}
  .mq__t,.ticker__t{flex-wrap:wrap; width:auto}
  .mq__t > [aria-hidden="true"],.ticker__g[aria-hidden="true"]{display:none}
  .mq{mask-image:none; -webkit-mask-image:none}
}

.lg{display:block; height:auto; overflow:visible}
.lg .ld{fill:var(--lg-d,#1d1d1b)} .lg .lp{fill:var(--lg-p,#FF007A)} .lg .lb{fill:var(--lg-b,#000)} .lg .la{fill:var(--lg-a,#fff)}

/* =========================================================
   COMPOSANTS DES PAGES INTÉRIEURES
   ========================================================= */
.nav a[aria-current="page"]{color:var(--text); background:rgba(255,255,255,.06)}
.sheet li a[aria-current="page"]{color:var(--volt)}
.pink{color:var(--volt)}

/* Hero des pages intérieures */
.phero{position:relative; padding:150px 0 clamp(60px,7vw,100px); overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line)}
.phero::before{content:""; position:absolute; z-index:-1; width:900px; height:900px; right:-260px; top:-380px; background:radial-gradient(closest-side, rgba(91,108,255,.24), transparent 70%)}
.phero::after{content:""; position:absolute; z-index:-1; width:640px; height:640px; left:-280px; bottom:-380px; background:radial-gradient(closest-side, rgba(255,0,122,.14), transparent 70%)}
.phero__grid{position:absolute; inset:0; z-index:-1; background:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/40px 40px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/40px 40px; mask-image:radial-gradient(70% 80% at 75% 20%, #000, transparent 75%); -webkit-mask-image:radial-gradient(70% 80% at 75% 20%, #000, transparent 75%)}
.phero__in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(30px,5vw,80px); align-items:end}
.phero__in.solo{grid-template-columns:minmax(0,1fr)}
.phero + .sec{padding-top:clamp(44px,5vw,80px)}
.phero h1{font-family:var(--f-head); font-weight:700; font-size:clamp(2.5rem,5.4vw,5.6rem); line-height:1; letter-spacing:-.045em; margin:22px 0 20px; max-width:14em}
.phero h1.long{font-size:clamp(2.3rem,4.3vw,4.3rem); max-width:16em}
.member .media.is-missing::after{display:none}
.phero .lead{max-width:36em; color:#B7BDC9; font-size:clamp(16.5px,1.2vw,19px); margin:0}
.phero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.phero__aside{display:grid; gap:12px}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 22px; padding:0; font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim)}
.crumbs li{display:flex; align-items:center; gap:6px}
.crumbs li + li::before{content:"/"; color:var(--dim)}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--volt)}
.crumbs [aria-current]{color:var(--text)}
.stat-card{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:18px; background:rgba(17,20,27,.7); border:1px solid var(--line-2); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.stat-card b{font-family:var(--f-head); font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1; min-width:2.6em}
.stat-card span{color:var(--muted); font-size:14px; line-height:1.4}
.stat-card .st{color:var(--volt); letter-spacing:.12em; display:block; font-size:13px}

/* Sous-navigation collante (services, légal) */
.subnav{position:sticky; top:90px; z-index:40; margin-top:-28px}
.subnav__in{display:flex; gap:6px; overflow-x:auto; padding:6px; border-radius:16px; background:rgba(12,14,19,.86); border:1px solid var(--line-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); scrollbar-width:none}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{flex:none; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:11px; text-decoration:none; font-size:14px; font-weight:500; color:var(--muted); transition:all .3s}
.subnav a span{font-family:var(--f-mono); font-size:11px; color:var(--dim)}
.subnav a:hover{color:var(--text); background:rgba(255,255,255,.05)}
.subnav a.on{background:var(--volt-bg); color:#fff}
.subnav a.on span{color:rgba(255,255,255,.75)}

/* Sections d'expertise détaillées */
.svc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; padding-block:clamp(60px,8vw,120px); border-bottom:1px solid var(--line); scroll-margin-top:150px}
.svc:last-of-type{border-bottom:0}
.svc.rev .svc__media{order:2}
.svc__media{position:relative}
.svc__media .media{aspect-ratio:4/4.4; border-radius:28px; border:1px solid var(--line-2)}
.svc__media .badge-n{position:absolute; left:-14px; top:-14px; width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:var(--volt-bg); color:#fff; font-family:var(--f-head); font-weight:700; font-size:20px; box-shadow:0 20px 40px -18px rgba(255,0,122,.7)}
.svc.rev .svc__media .badge-n{left:auto; right:-14px}
.svc__float{position:absolute; right:-18px; top:28px; max-width:260px; white-space:normal}
.svc__float .mono{line-height:1.5}
.svc.rev .svc__float{right:auto; left:-18px}
.svc h2{font-family:var(--f-head); font-weight:700; font-size:clamp(2rem,3.6vw,3.4rem); letter-spacing:-.04em; line-height:1.02; margin:16px 0 14px}
.svc .hook{font-family:var(--f-head); font-weight:500; font-size:clamp(18px,1.5vw,22px); color:var(--text); margin:0 0 14px; letter-spacing:-.01em}
.svc p{color:#B7BDC9; margin:0 0 22px; max-width:36em}
.svc__cols{display:grid; grid-template-columns:1fr 1fr; gap:22px; border-top:1px solid var(--line); padding-top:22px; margin-bottom:28px}
.svc__cols h3{margin:0 0 12px; font-family:var(--f-mono); font-weight:500; font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.checks{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:15px; color:#D3D7DF}
.checks li{display:flex; gap:10px; align-items:flex-start}
.checks li::before{content:""; flex:none; width:16px; height:16px; margin-top:4px; border-radius:5px; background:rgba(255,0,122,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23FF4F9E' stroke-width='1.8'/%3E%3C/svg%3E") center/12px no-repeat; border:1px solid rgba(255,0,122,.35)}
.for{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 26px; font-size:13.5px; color:var(--muted)}
.for b{font-family:var(--f-mono); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); margin-right:4px}
.for span{padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:#C9CED8}

/* Formules */
.offers{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.offer{position:relative; padding:clamp(26px,3vw,40px); border-radius:26px; background:var(--surface); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; gap:14px}
.offer.hl{background:radial-gradient(90% 120% at 100% 0%, rgba(255,0,122,.18), transparent 60%), var(--surface); border-color:rgba(255,0,122,.35)}
.offer h3{font-family:var(--f-head); font-weight:700; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.03em; margin:0}
.offer p{margin:0; color:#B7BDC9}
.offer .btn{align-self:flex-start; margin-top:auto}

/* Portfolio complet */
.pf-bar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; margin-bottom:28px}
.pf-count{font-family:var(--f-mono); font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.pf{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.pf .pcard{grid-column:span 4}
.pf .pcard.w8{grid-column:span 8}
.pf .pcard.w6{grid-column:span 6}
.pf.is-filtered .pcard{grid-column:span 4}
.pcard{cursor:pointer}
button.pcard{font:inherit; color:inherit; text-align:left; padding:0}
.social-wall{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.social-wall button{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2); padding:0; transition:transform .5s var(--ease), border-color .3s}
.social-wall button:hover{transform:translateY(-4px); border-color:rgba(255,0,122,.5)}
.social-wall .media{aspect-ratio:4/3}
.social-wall .tall .media{aspect-ratio:3/4}
.social-wall .tall{grid-row:span 2}
.social-wall .tall .media{height:100%; aspect-ratio:auto}
.social-wall button::after{content:"Agrandir"; position:absolute; right:10px; bottom:10px; font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:5px 9px; border-radius:8px; background:rgba(8,9,12,.75); color:var(--text); opacity:0; transform:translateY(6px); transition:all .35s var(--ease)}
.social-wall button:hover::after,.social-wall button:focus-visible::after{opacity:1; transform:none}
.names{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.names li{font-family:var(--f-head); font-weight:600; font-size:clamp(18px,1.8vw,24px); letter-spacing:-.02em; padding:12px 20px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02); color:#C9CED8}
.names li:nth-child(3n+1){color:var(--text)}

/* Lightbox */
.lb{width:min(1100px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:1px solid var(--line-2); border-radius:24px; background:var(--surface); color:var(--text); overflow:auto}
.lb::backdrop{background:rgba(4,5,8,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.lb[open]{animation:pin .45s var(--ease)}
.lb__in{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.lb__img{background:#05060A; display:grid; place-items:center; min-height:320px}
.lb__img .media{width:100%; height:100%; background:transparent}
.lb__img img{object-fit:contain; max-height:76vh}
.lb__body{padding:clamp(22px,3vw,36px); display:flex; flex-direction:column; gap:12px}
.lb__body h2{font-family:var(--f-head); font-weight:700; font-size:clamp(24px,2.4vw,32px); letter-spacing:-.03em; margin:4px 0 0; line-height:1.1}
.lb__body p{margin:0; color:#B7BDC9}
.lb__nav{display:flex; gap:8px; margin-top:auto; padding-top:18px}
.lb__x{position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:12px; background:rgba(8,9,12,.8); border:1px solid var(--line-2); display:grid; place-items:center; z-index:2}
.lb__x svg,.lb__nav svg{width:16px; height:16px}
.icon-btn{width:46px; height:46px; border-radius:12px; border:1px solid var(--line-2); display:grid; place-items:center; transition:all .3s}
.icon-btn:hover{background:rgba(255,255,255,.07)}

/* Contact */
.ct{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(20px,3vw,40px); align-items:start}
.form{padding:clamp(22px,3.4vw,44px); border-radius:28px; background:var(--surface); border:1px solid var(--line-2)}
.form h2{font-family:var(--f-head); font-weight:700; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.03em; margin:0 0 6px}
.form > p{color:var(--muted); margin:0 0 26px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:30px 16px}
.field{position:relative; display:flex; flex-direction:column; gap:8px}
.field .err{position:absolute; left:2px; top:calc(100% + 5px); font-size:12.5px; line-height:1.2}
.field.full{grid-column:1 / -1}
.field label,.fieldset legend{font-size:14px; font-weight:500; color:#D3D7DF}
.field label .opt,.fieldset legend .opt{color:var(--dim); font-weight:400}
.field input,.field textarea,.field select{font:inherit; color:var(--text); background:#0C0E13; border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; transition:border-color .3s, box-shadow .3s; width:100%}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 4px rgba(255,0,122,.15)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#FF5A6E}
.err{font-size:13px; color:#FF8A98; min-height:0}
.fieldset{border:0; padding:0; margin:0; grid-column:1 / -1}
.fieldset legend{margin-bottom:10px; padding:0}
.chk{display:flex; flex-wrap:wrap; gap:8px}
.chk label{position:relative; cursor:pointer}
.chk input{position:absolute; opacity:0; width:1px; height:1px}
.chk span{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:12px; border:1px solid var(--line-2); font-size:14px; color:#C9CED8; transition:all .25s}
.chk input:checked + span{background:rgba(255,0,122,.12); border-color:var(--volt); color:#FF6FB0}
.chk input:checked + span::before{content:"✓"}
.chk input:focus-visible + span{outline:2px solid var(--volt); outline-offset:2px}
.consent{grid-column:1 / -1; display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--muted)}
.consent input{width:20px; height:20px; margin-top:2px; accent-color:var(--volt); flex:none}
.consent a{color:#FF6FB0}
.form__foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:24px}
.form__foot small{color:var(--dim); font-size:13px; max-width:30em}
.status{display:none; margin-top:20px; padding:16px 18px; border-radius:14px; border:1px solid rgba(255,0,122,.35); background:rgba(255,0,122,.07); color:#E9D3DE; font-size:15px}
.status.show{display:block}
.status a{color:#FF6FB0}
.side{display:grid; gap:12px}
.info{display:flex; gap:16px; align-items:flex-start; padding:20px; border-radius:20px; background:var(--surface); border:1px solid var(--line); text-decoration:none; transition:border-color .3s, transform .4s var(--ease)}
a.info:hover{border-color:rgba(255,0,122,.45); transform:translateY(-2px)}
.info h3{margin:0 0 2px; font-family:var(--f-mono); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
.info p{margin:0; font-family:var(--f-head); font-weight:600; font-size:17px; letter-spacing:-.01em; line-height:1.35}
.info small{display:block; color:var(--muted); font-size:13.5px; font-family:var(--f-body); font-weight:400; margin-top:4px}
.audit{padding:24px; border-radius:20px; background:radial-gradient(100% 120% at 100% 0%, rgba(255,0,122,.22), transparent 60%), var(--surface); border:1px solid rgba(255,0,122,.35)}
.audit h3{font-family:var(--f-head); font-weight:700; font-size:22px; letter-spacing:-.02em; margin:12px 0 8px}
.audit p{margin:0; color:#B7BDC9; font-size:15px}
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; list-style:none; margin:0; padding:0; counter-reset:s}
.steps3 li{padding:26px; border-radius:22px; background:var(--surface); border:1px solid var(--line); counter-increment:s}
.steps3 li::before{content:"0" counter(s); display:block; font-family:var(--f-mono); font-size:12px; color:var(--volt); margin-bottom:18px}
.steps3 h3{font-family:var(--f-head); font-weight:600; font-size:21px; letter-spacing:-.02em; margin:0 0 6px}
.steps3 p{margin:0; color:var(--muted); font-size:15px}

/* Équipe */
.team{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.member{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:var(--surface)}
.member .media{aspect-ratio:4/4.6}
.member figcaption{position:absolute; left:12px; right:12px; bottom:12px; padding:14px 16px; border-radius:16px; background:rgba(8,9,12,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line-2)}
.member b{display:block; font-family:var(--f-head); font-size:18px; font-weight:600; letter-spacing:-.01em}
.member small{color:var(--muted); font-size:13px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center}
.split .h2{max-width:12em}
.split p{color:#B7BDC9; margin:18px 0 0; max-width:34em}

/* Zones */
.zones{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.zones li a,.zones li span{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; border:1px solid var(--line-2); font-size:14.5px; text-decoration:none; color:#C9CED8; transition:all .3s}
.zones li a{border-color:rgba(255,0,122,.4); color:var(--text)}
.zones li a::after{content:"↗"; color:var(--volt)}
.zones li a:hover{background:rgba(255,0,122,.1)}
.zone-band{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:16px; padding:22px 24px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.015)}
.zone-band p{margin:0; color:var(--muted); max-width:30em}

/* Mini grille d'expertises */
.mini{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.mini a{display:flex; gap:14px; align-items:flex-start; padding:20px; border-radius:20px; background:var(--surface); border:1px solid var(--line); text-decoration:none; transition:border-color .3s, transform .4s var(--ease)}
.mini a:hover{border-color:rgba(255,0,122,.45); transform:translateY(-3px)}
.mini h3{font-family:var(--f-head); font-weight:600; font-size:17px; margin:2px 0 4px; letter-spacing:-.01em}
.mini p{margin:0; color:var(--muted); font-size:14px}

/* CTA simple (pages intérieures) */
.cta--simple .cta__grid{grid-template-columns:minmax(0,1fr) auto; align-items:center}
.cta--simple .cta__p{margin-bottom:0}

/* Pages légales */
.legal{display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:start; padding-block:clamp(60px,7vw,100px)}
.toc{position:sticky; top:110px; padding:18px; border-radius:18px; background:var(--surface); border:1px solid var(--line)}
.toc h2{margin:0 0 10px; font-family:var(--f-mono); font-weight:500; font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.toc a{display:block; padding:8px 10px; border-radius:10px; text-decoration:none; font-size:14px; color:var(--muted); transition:all .25s}
.toc a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.toc a.on{color:var(--text); background:rgba(255,0,122,.12)}
.prose{max-width:780px; color:#C9CED8}
.prose section{padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--line); scroll-margin-top:110px}
.prose section:last-child{border-bottom:0}
.prose h2{font-family:var(--f-head); font-weight:700; font-size:clamp(22px,2.2vw,30px); letter-spacing:-.025em; color:var(--text); margin:0 0 16px; line-height:1.15}
.prose h3{font-family:var(--f-head); font-weight:600; font-size:18px; color:var(--text); margin:26px 0 8px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px; padding-left:20px; display:grid; gap:6px}
.prose a{color:#FF6FB0}
.prose strong{color:var(--text); font-weight:600}
.kv{display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:0 0 14px}
.kv dt,.kv dd{margin:0; padding:12px 16px; border-bottom:1px solid var(--line); font-size:15px}
.kv dt{color:var(--muted); background:rgba(255,255,255,.02)}
.kv dd{color:var(--text)}
.kv dt:last-of-type,.kv dd:last-of-type{border-bottom:0}
.tbl{overflow-x:auto; border:1px solid var(--line); border-radius:16px; margin:0 0 14px}
.tbl table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px}
.tbl th,.tbl td{text-align:left; vertical-align:top; padding:11px 14px; border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--f-mono); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); background:rgba(255,255,255,.02)}
.tbl tr:last-child td{border-bottom:0}
.tbl code,.prose code{font-family:var(--f-mono); font-size:12.5px; background:rgba(255,255,255,.06); padding:2px 6px; border-radius:6px; color:#E6E8EE}
.updated{display:inline-flex; gap:8px; align-items:center; font-family:var(--f-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:22px}

/* 404 */
.nf{min-height:80svh; display:grid; place-items:center; text-align:center; padding:140px 0 80px}
.nf b{display:block; font-family:var(--f-head); font-weight:800; font-size:clamp(7rem,22vw,16rem); letter-spacing:-.07em; line-height:.85; background:linear-gradient(100deg, #FF007A, #A3A9FF); -webkit-background-clip:text; background-clip:text; color:transparent}
.nf h1{font-family:var(--f-head); font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.03em; margin:18px 0 10px}
.nf p{color:var(--muted); margin:0 auto 28px; max-width:30em}
.nf .phero__ctas{justify-content:center}

/* Responsive pages intérieures */
@media (max-width:1180px){
  .phero__in{grid-template-columns:1fr}
  .phero__aside{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .subnav{top:88px}
  .svc{grid-template-columns:1fr}
  .svc.rev .svc__media{order:0}
  .svc__media{max-width:560px}
  .svc__float{right:12px}
  .svc.rev .svc__float{left:12px}
  .pf .pcard,.pf .pcard.w8,.pf .pcard.w6{grid-column:span 6}
  .ct{grid-template-columns:1fr}
  .lb__in{grid-template-columns:1fr}
  .mini{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .legal{grid-template-columns:minmax(0,1fr)}
  .prose{min-width:0}
  .toc{position:static}
}
@media (max-width:900px){
  .social-wall{grid-template-columns:repeat(2,1fr)}
  .steps3{grid-template-columns:1fr}
  .offers{grid-template-columns:1fr}
  .cta--simple .cta__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .phero{padding-top:120px}
  .subnav{top:80px}
  .svc{scroll-margin-top:140px}
  .svc__cols{grid-template-columns:1fr}
  .svc__media .badge-n{left:12px; top:12px}
  .svc.rev .svc__media .badge-n{right:auto; left:12px}
  .svc__float{position:static; max-width:none; margin-top:12px}
  .pf .pcard,.pf .pcard.w8,.pf .pcard.w6,.pf.is-filtered .pcard{grid-column:1 / -1}
  .fgrid{grid-template-columns:1fr}
  .mini{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr; gap:10px}
  .member figcaption{left:8px; right:8px; bottom:8px; padding:10px 12px}
  .member b{font-size:15px}
  .kv{grid-template-columns:1fr}
  .kv dt{border-bottom:0; padding-bottom:2px}
  .kv dd{padding-top:2px}
}

/* =========================================================
   COMPATIBILITÉ WORDPRESS / ELEMENTOR PRO
   Neutralise les marges, espacements et largeurs que les
   conteneurs Elementor ajoutent autour des sections du site.
   ========================================================= */
body[class]{background:var(--bg); color:var(--text); font-family:var(--f-body); font-size:16.5px; line-height:1.6; margin:0}
@media (min-width:1800px){ body[class]{font-size:17.5px} }
@media (max-width:640px){ body[class]{font-size:16px} }

.e-con.amd-sec,
.e-con.amd-sec > .e-con-inner{
  --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
  --margin-top:0px; --margin-bottom:0px; --gap:0px; --row-gap:0px; --column-gap:0px;
  --content-width:100%; --container-max-width:100%; --width:100%; --min-height:0px;
  display:block !important; padding:0 !important; margin:0 !important; gap:0 !important;
  width:100% !important; max-width:none !important; min-height:0 !important; border:0 !important; background:none;
}
.amd-sec > .elementor-element,
.amd-sec .elementor-widget-html{width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important}
.amd-sec .elementor-widget-html > .elementor-widget-container{margin:0; padding:0}
.elementor-widget-html:not(:last-child){margin-block-end:0 !important}
.elementor-location-header, .elementor-location-footer{display:block}

/* Espacement après le hero des pages intérieures (sections dans des conteneurs séparés) */
.sec.after-hero{padding-top:clamp(44px,5vw,80px)}

/* Liens des textes légaux */
.prose a{text-decoration:underline; text-underline-offset:3px}

/* Éditeur Elementor : contenus toujours visibles pendant l'édition */
.elementor-editor-active .rv,
.elementor-editor-active .fade,
.elementor-editor-active .h1 .w,
.elementor-editor-active .hero__in{opacity:1 !important; transform:none !important; filter:none !important}

/* Barre d'administration WordPress (utilisateur connecté) */
.admin-bar .header{top:46px}
@media (max-width:782px){ .admin-bar .header{top:56px} }

/* Accessibilité : liens d'évitement du thème */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; width:1px; word-wrap:normal !important}
.skip-link.screen-reader-text:focus, .screen-reader-text:focus{clip:auto !important; clip-path:none; height:auto; width:auto; left:12px; top:12px; z-index:100000; padding:10px 16px; border-radius:10px; background:var(--volt-bg); color:#fff; font-weight:600; text-decoration:none}

/* =========================================================
   FORMULAIRE DE CONTACT — widget Formulaire d'Elementor Pro
   Reprend à l'identique le design du formulaire HTML.
   ========================================================= */
/* Mise en page de la section : formulaire + coordonnées */
.e-con.amd-ct-sec{display:block !important; padding:clamp(44px,5vw,80px) 0 clamp(90px,11vw,170px) !important; margin:0 !important; width:100% !important; max-width:none !important; gap:0 !important; scroll-margin-top:90px; border:0 !important}
.e-con.amd-ct{display:grid !important; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(20px,3vw,40px) !important; align-items:start; width:100% !important; max-width:var(--max) !important; margin:0 auto !important; padding:0 var(--pad) !important; min-height:0 !important}
.e-con.amd-ct-form{display:block !important; padding:clamp(22px,3.4vw,44px) !important; border-radius:28px; background:var(--surface); border:1px solid var(--line-2) !important; width:100% !important; max-width:none !important; margin:0 !important; min-height:0 !important}
.e-con.amd-ct-side{display:block !important; padding:0 !important; width:100% !important; max-width:none !important; margin:0 !important; min-height:0 !important}
.amd-ct-form > .elementor-element, .amd-ct-side > .elementor-element{width:100% !important; max-width:none !important; margin:0 !important}
.amd-ct-form .elementor-widget-container{margin:0; padding:0}
@media (max-width:1180px){ .e-con.amd-ct{grid-template-columns:minmax(0,1fr)} }

.form-head h2{font-family:var(--f-head); font-weight:700; font-size:clamp(26px,2.6vw,36px); letter-spacing:-.03em; line-height:1.15; margin:0 0 6px; color:var(--text)}
.form-head p{color:var(--muted); margin:0 0 26px}
.form-note{margin:20px 0 0; color:var(--dim); font-size:13px; line-height:1.5; max-width:34em}

/* Grille des champs */
body .elementor-widget-form.amd-form .elementor-form-fields-wrapper{margin-inline:-8px; margin-bottom:-24px}
body .elementor-widget-form.amd-form .elementor-field-group{padding-inline:8px; margin-bottom:24px}

/* Libellés */
body .elementor-widget-form.amd-form .elementor-field-group > .elementor-field-label{font-family:var(--f-body); font-size:14px; font-weight:500; line-height:1.4; color:#D3D7DF; padding-bottom:8px; margin:0}
body .elementor-widget-form.amd-form .elementor-field-label .opt{color:var(--dim); font-weight:400}
body .elementor-widget-form.amd-form .elementor-mark-required .elementor-field-label:after{color:#FF6FB0; padding-inline-start:.25em}

/* Champs texte */
body .elementor-widget-form.amd-form .elementor-field-group .elementor-field-textual{font-family:var(--f-body); font-size:1em; line-height:1.6; color:var(--text); background:#0C0E13; border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; min-height:0; width:100%; box-shadow:none; transition:border-color .3s, box-shadow .3s}
body .elementor-widget-form.amd-form .elementor-field-group textarea.elementor-field-textual{min-height:150px; resize:vertical}
body .elementor-widget-form.amd-form .elementor-field-group .elementor-field-textual::placeholder{color:var(--dim); opacity:1}
body .elementor-widget-form.amd-form .elementor-field-group .elementor-field-textual:focus{outline:none; border-color:var(--volt); box-shadow:0 0 0 4px rgba(255,0,122,.15)}
body .elementor-widget-form.amd-form .elementor-error .elementor-field-textual{border-color:#FF5A6E}

/* Besoins : cases à cocher présentées en puces */
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-subgroup{display:flex; flex-wrap:wrap; gap:8px; width:100%}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option{position:relative; padding:0; margin:0; flex-basis:auto}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option label{display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:12px; border:1px solid var(--line-2); font-family:var(--f-body); font-size:14px; line-height:1.5; color:#C9CED8; cursor:pointer; transition:all .25s}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option label:hover{border-color:rgba(255,0,122,.5)}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option input:checked + label{background:rgba(255,0,122,.12); border-color:var(--volt); color:#FF6FB0}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option input:checked + label::before{content:"✓"}
body .elementor-widget-form.amd-form .elementor-field-type-checkbox .elementor-field-option input:focus-visible + label{outline:2px solid var(--volt); outline-offset:2px}

/* Consentement RGPD */
body .elementor-widget-form.amd-form .elementor-field-type-acceptance .elementor-field-subgroup{display:block; width:100%}
body .elementor-widget-form.amd-form .elementor-field-type-acceptance .elementor-field-option{display:flex; gap:12px; align-items:flex-start; padding:0}
body .elementor-widget-form.amd-form .elementor-field-type-acceptance input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--volt)}
body .elementor-widget-form.amd-form .elementor-field-type-acceptance label{font-family:var(--f-body); font-size:14px; line-height:1.55; color:var(--muted); cursor:pointer}
body .elementor-widget-form.amd-form .elementor-field-type-acceptance label a{color:#FF6FB0; text-decoration:underline; text-underline-offset:3px}

/* Bouton d'envoi : identique au bouton rose du site */
body .elementor-widget-form.amd-form .e-form__buttons,
body .elementor-widget-form.amd-form .elementor-field-type-submit{margin-top:6px}
body .elementor-widget-form.amd-form .elementor-button{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; min-height:0; padding:0 24px; border:0; border-radius:14px; background:var(--volt-bg); color:#fff; font-family:var(--f-body); font-size:15px; font-weight:600; line-height:1; letter-spacing:0; text-transform:none; box-shadow:inset 0 -2px 0 rgba(0,0,0,.15); transition:transform .4s var(--ease), box-shadow .4s, background .3s; cursor:pointer}
body .elementor-widget-form.amd-form .elementor-button:hover,
body .elementor-widget-form.amd-form .elementor-button:focus-visible{background:var(--volt-bg); color:#fff; transform:translateY(-2px); box-shadow:0 10px 40px -8px rgba(255,0,122,.55), inset 0 -2px 0 rgba(0,0,0,.15)}
body .elementor-widget-form.amd-form .elementor-button .elementor-button-content-wrapper{display:inline-flex; align-items:center; gap:10px}
body .elementor-widget-form.amd-form .elementor-button .elementor-button-text::after{content:""; display:inline-block; width:16px; height:16px; margin-left:10px; vertical-align:-3px; background:currentColor; transition:transform .4s var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat}
body .elementor-widget-form.amd-form .elementor-button:hover .elementor-button-text::after{transform:translate(3px,-3px)}
body .elementor-widget-form.amd-form .elementor-form .elementor-button[disabled],
body .elementor-widget-form.amd-form .elementor-form-waiting .elementor-button{opacity:.6; cursor:progress}

/* Messages après envoi */
body .elementor-widget-form.amd-form .elementor-message{margin:20px 0 0; padding:16px 18px; border-radius:14px; font-family:var(--f-body); font-size:15px; line-height:1.55; width:100%}
body .elementor-widget-form.amd-form .elementor-message::before{display:none}
body .elementor-widget-form.amd-form .elementor-message-success{border:1px solid rgba(255,0,122,.35); background:rgba(255,0,122,.07); color:#E9D3DE}
body .elementor-widget-form.amd-form .elementor-message-danger{border:1px solid rgba(255,90,110,.45); background:rgba(255,90,110,.08); color:#FFB3BD}
body .elementor-widget-form.amd-form .elementor-field-group .elementor-message{margin:6px 0 0; padding:0; border:0; background:none; font-size:13px; color:#FF8A98}

@media (max-width:640px){
  body .elementor-widget-form.amd-form .elementor-button{width:100%}
}