/* Carlotti Studio — V4 « Riviera moderne » : Geist + Instrument Serif, bleu Méditerranée, formes arrondies */
:root{
  --bg:#F6F6F3; --surface:#FFFFFF; --surface-2:#ECEBE7; --ink:#0B1622; --soft:#5B6571; --line:rgba(11,22,34,.11);
  --deep:#0E2D4C; --deep-2:#16406A; --on-deep:#F2F5F7; --on-deep-soft:rgba(242,245,247,.68); --az:#5AA6E6; --sand:#E8E2D6;
  --sans:"Geist","Inter","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --gutter:clamp(16px,4.6vw,72px); --head:76px; --r-xl:36px; --r-lg:28px; --r-md:18px; --r-sm:12px;
  --ease:cubic-bezier(.2,.75,.15,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A121B; --surface:#111C28; --surface-2:#172433; --ink:#EDEFF1; --soft:#9DA7B2; --line:rgba(237,239,241,.12);
  --deep:#0D2A47; --deep-2:#133B62; --sand:#2A2722; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0A121B; --surface:#111C28; --surface-2:#172433; --ink:#EDEFF1; --soft:#9DA7B2; --line:rgba(237,239,241,.12);
  --deep:#0D2A47; --deep-2:#133B62; --sand:#2A2722; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-feature-settings:"ss01"}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:500;text-wrap:balance}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}
img,video,.ph{max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--az);outline-offset:3px;border-radius:8px}
.wrap{padding-inline:var(--gutter);max-width:1600px;margin-inline:auto}
.soft{color:var(--soft)}
.sec{padding-block:clamp(80px,10vw,160px)}
.line-t{border-top:1px solid var(--line)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sq{display:none}

/* étiquettes (remplace les petites capitales) */
.caps,.mono{font:500 13.5px/1.4 var(--sans);letter-spacing:-.005em;text-transform:none}
.eyebrow{justify-self:start;align-self:flex-start;width:fit-content;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:500 13.5px/1 var(--sans)}
.hero4 .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--az)}
.eyebrow{padding:7px 14px}
.hero4 .eyebrow{padding:7px 14px 7px 10px;margin:0}
.hero4 .eyebrow,.deep .eyebrow,.on-deep .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--on-deep)}

/* titres */
.d1{font:500 clamp(46px,8.2vw,132px)/.94 var(--sans);letter-spacing:-.05em}
.h2{font:500 clamp(34px,4.8vw,72px)/1 var(--sans);letter-spacing:-.04em}
.h2 em,.d1 em{letter-spacing:-.02em}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--soft);max-width:34em}

/* boutons arrondis */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 8px 0 22px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font:500 15.5px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:background .35s var(--ease),color .35s,transform .35s var(--ease),box-shadow .35s}
.btn::after{content:"";width:34px;height:34px;border-radius:50%;background:var(--ink) center/14px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");transition:transform .45s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px -14px rgba(11,22,34,.35)}
.btn:hover::after{transform:rotate(-45deg)}
.btn.fill{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.fill::after{background-color:var(--az)}
.btn.light{background:var(--on-deep);color:var(--deep);border-color:transparent}
.btn.light::after{background-color:var(--deep)}
.btn.glass{background:rgba(255,255,255,.08);color:var(--on-deep);border-color:rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.btn.glass::after{background-color:rgba(255,255,255,.16)}
.link{display:inline-flex;align-items:center;height:50px;padding:0 20px;border-radius:999px;text-decoration:none;font:500 15.5px var(--sans);transition:background .3s}
.link:hover{background:rgba(127,140,155,.14)}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:80;background:var(--deep);color:var(--on-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:clip-path 1s var(--ease);clip-path:inset(0 0 0 0)}
#intro .word{font:500 clamp(40px,7vw,96px)/1 var(--sans);letter-spacing:-.05em;display:flex;gap:.02em}
#intro .word span{opacity:0;filter:blur(12px);transform:translateY(.2em);animation:inl 1s var(--ease) forwards}
#intro .bar{width:min(240px,50vw);height:2px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
#intro .bar::after{content:"";display:block;height:100%;width:0;background:var(--az);animation:barw 1.6s .2s var(--ease) forwards}
#intro .sub{opacity:0;animation:inl .8s .9s forwards;color:var(--on-deep-soft)}
#intro.out{clip-path:inset(0 0 100% 0)}
@keyframes inl{to{opacity:1;filter:none;transform:none}}
@keyframes barw{to{width:100%}}

/* ---------- en-tête ---------- */
header.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;color:var(--on-deep);transition:background .4s,color .4s,border-color .4s,box-shadow .4s;border-bottom:1px solid transparent}
header.top.scrolled:not(.solid){background:color-mix(in srgb,var(--deep) 74%,transparent);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px)}
header.top.solid{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);color:var(--ink);border-bottom-color:var(--line)}
header.top .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--head)}
.mark{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;font:600 20px/1 var(--sans);letter-spacing:-.04em}
.mark b{font-weight:600}
.mark i{font:400 italic 21px/1 var(--serif);letter-spacing:0}
nav.menu{display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
header.top.solid nav.menu{background:rgba(127,140,155,.08);border-color:var(--line)}
nav.menu > a,nav.menu .dd-b{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:999px;text-decoration:none;font:500 14.5px var(--sans);letter-spacing:-.01em;transition:background .25s}
nav.menu > a:hover,nav.menu .dd-b:hover{background:rgba(127,140,155,.18)}
nav.menu a[aria-current="page"],nav.menu .dd-b[aria-current="page"]{background:var(--on-deep);color:var(--deep)}
header.top.solid nav.menu a[aria-current="page"],header.top.solid nav.menu .dd-b[aria-current="page"]{background:var(--ink);color:var(--bg)}
nav.menu .dd-b::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.dd-p{position:absolute;left:0;right:0;top:100%;padding-top:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s,transform .3s var(--ease),visibility 0s .3s}
.dd:hover .dd-p,.dd:focus-within .dd-p{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s var(--ease)}
.dd-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:12px;margin-inline:var(--gutter);max-width:1460px;background:var(--surface);color:var(--ink);border-radius:var(--r-lg);box-shadow:0 30px 80px -30px rgba(11,22,34,.35);border:1px solid var(--line)}
@media (min-width:1600px){.dd-g{margin-inline:auto}}
.dd-i{display:grid;grid-template-columns:auto 1fr;gap:10px 10px;padding:10px;border-radius:var(--r-md);text-decoration:none;transition:background .25s}
.dd-i:hover{background:var(--surface-2)}
.dd-i .mono{color:var(--soft)}
.dd-i .dd-t{font:500 17px/1.2 var(--sans);letter-spacing:-.02em}
.dd-i .ph{grid-column:1/-1;order:-1;aspect-ratio:16/10;border-radius:var(--r-sm)}
.top .cta{height:44px}
.top .cta::after{width:30px;height:30px}
header.top:not(.solid) .cta{background:var(--on-deep);color:var(--deep);border-color:transparent}
header.top:not(.solid) .cta::after{background-color:var(--deep)}
.burger{display:none;height:44px;padding:0 18px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;font:500 14.5px var(--sans);cursor:pointer}
.mnav{background:var(--surface);color:var(--ink);border-radius:var(--r-lg);margin:0 12px 12px;padding:10px 18px 18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.mnav a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font:500 22px/1.2 var(--sans);letter-spacing:-.03em}
.mnav a:last-child{border-bottom:0;color:var(--az)}
@media (max-width:1120px){nav.menu{display:none}.burger{display:inline-flex;align-items:center}.top .cta{display:none}}

/* ---------- placeholders photo / vidéo ---------- */
.ph{position:relative;overflow:hidden;background:#C9C6BF;isolation:isolate;display:block}
.ph::before{content:"";position:absolute;inset:0;z-index:1;opacity:.2;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph .lbl{position:absolute;left:14px;bottom:12px;right:14px;z-index:2;font:500 12px/1.4 var(--sans);color:rgba(255,255,255,.92);text-shadow:0 1px 10px rgba(0,0,0,.3)}
.ph.light .lbl{color:rgba(11,22,34,.72);text-shadow:none}
.ph .chip{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;background:rgba(11,22,34,.42);backdrop-filter:blur(10px);color:#fff;font:500 12px var(--sans)}
.ph .chip::before{content:"";border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.ph.kb{background-size:130% 130%;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{background-position:0% 20%}to{background-position:100% 80%}}
.v916{aspect-ratio:9/16}.v45{aspect-ratio:4/5}.h32{aspect-ratio:3/2}.h169{aspect-ratio:16/9}
.s-mer{background:radial-gradient(circle at 68% 34%,#F6ECDA 0 5%,transparent 5.6%),linear-gradient(#D9DEDF 0 50%,#A3B5BC 50% 64%,#8DA3AC 64%)}
.s-crep{background:radial-gradient(circle at 36% 54%,#F0C493 0 4.5%,transparent 5%),linear-gradient(#27303D,#5E5D68 42%,#C59576 54%,#33404D 54.4%,#1C2530)}
.s-villa{background:linear-gradient(transparent 70%,#7FA6B2 70% 80%,transparent 80%),linear-gradient(90deg,#A39B8F 0 16%,transparent 16% 72%,#8A8378 72% 75%,transparent 75%),linear-gradient(#E9E6E0 0 28%,#F4F2ED 28% 70%,#D6D0C5 70%)}
.s-int{background:linear-gradient(transparent 76%,#8C7D6C 76%),linear-gradient(90deg,#3C3833 0 10%,#EFE8DC 10% 44%,#3C3833 44% 48%,#EFE8DC 48% 86%,#3C3833 86%)}
.s-vide{background:linear-gradient(transparent 76%,#A9A196 76%),linear-gradient(90deg,#CFCBC4 0 10%,#ECE9E3 10% 44%,#CFCBC4 44% 48%,#ECE9E3 48% 86%,#CFCBC4 86%)}
.s-spa{background:radial-gradient(ellipse at 50% 0%,#FFFFFF88,transparent 55%),linear-gradient(#DDE3E0 0 42%,#9FC0C1 42% 78%,#C9C1B3 78%)}
.s-table{background:radial-gradient(circle at 48% 52%,#9C3A22 0 4%,transparent 4.4%),radial-gradient(circle at 54% 47%,#5E7A3A 0 3%,transparent 3.4%),radial-gradient(circle at 50% 50%,#F3F0EA 0 20%,#DAD4CA 20% 22%,transparent 22.5%),#2B2724}
.s-chef{background:radial-gradient(ellipse at 38% 30%,#D4975A66,transparent 50%),radial-gradient(ellipse at 70% 80%,#E9E2D622,transparent 40%),#1D1A18}
.s-air{background:radial-gradient(ellipse at 22% 108%,#E8DCC2 0 32%,#CFE2DE 32% 36%,transparent 36.5%),linear-gradient(160deg,#6AAAB5,#1E586B)}
.s-nuit{background:radial-gradient(circle at 30% 62%,#F1C88A 0 1.2%,transparent 1.6%),radial-gradient(circle at 52% 60%,#F1C88A 0 1.2%,transparent 1.6%),radial-gradient(circle at 72% 64%,#F1C88A 0 1.2%,transparent 1.6%),linear-gradient(#141C27 0 58%,#2A3039 58%)}
.s-pierre{background:linear-gradient(115deg,#BDB4A6 0 38%,#D9D2C6 38% 62%,#A79E90 62%)}
.s-parasol{background:linear-gradient(transparent 64%,#E8DAC1 64%),repeating-linear-gradient(98deg,#F7F5F0 0 9%,#3E85BD 9% 18%)}
.s-maillot{background:radial-gradient(ellipse at 70% 30%,#FFFFFF66,transparent 45%),linear-gradient(172deg,#2C76A6 0 46%,#6DB1CE 46% 58%,#D7C3A0 58% 74%,#B39A79 74%)}
.s-bijou{background:radial-gradient(circle at 50% 46%,transparent 0 15%,#D7B169 15% 17%,transparent 17.6%),radial-gradient(circle at 56% 60%,#F3E6C6 0 2.4%,transparent 2.9%),linear-gradient(#CDB698,#AE9273)}
.s-sable{background:linear-gradient(#DCE6E9 0 40%,#6EAEC8 40% 55%,#EADFCB 55%)}

/* ---------- hero accueil ---------- */
.hero4{position:relative;background:var(--deep);color:var(--on-deep);padding-top:calc(var(--head) + clamp(40px,7vw,96px));overflow:hidden;border-radius:0 0 var(--r-xl) var(--r-xl)}
.hero4::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(60% 50% at 70% 10%,rgba(90,166,230,.32),transparent 70%),radial-gradient(40% 40% at 10% 40%,rgba(90,166,230,.14),transparent 70%);pointer-events:none}
.h4-top{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.h4-top .d1{max-width:13ch}
.h4-top .lead{color:var(--on-deep-soft);text-align:center}
.fan{position:relative;height:clamp(380px,46vw,640px);margin-top:clamp(48px,6vw,80px);display:flex;justify-content:center;align-items:flex-start;perspective:1400px}
.fan .card{position:absolute;top:0;width:clamp(150px,17vw,260px);aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);will-change:transform}
.fan .card .ph{position:absolute;inset:0}
.fan .card .tc{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:999px;background:rgba(11,22,34,.42);backdrop-filter:blur(8px);color:#fff;font:500 11.5px var(--sans);font-variant-numeric:tabular-nums}
.fan .card .tc i{width:7px;height:7px;border-radius:50%;background:#FF5A5F;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.fan .c0{transform:translate(-205%,22%) rotate(-12deg)}
.fan .c1{transform:translate(-105%,8%) rotate(-6deg)}
.fan .c2{transform:translate(0,0);z-index:3}
.fan .c3{transform:translate(105%,8%) rotate(6deg)}
.fan .c4{transform:translate(205%,22%) rotate(12deg)}
@media (max-width:760px){.fan .c0,.fan .c4{display:none}.fan .card{width:42vw}.fan .c1{transform:translate(-62%,8%) rotate(-6deg)}.fan .c3{transform:translate(62%,8%) rotate(6deg)}}

/* ---------- manifeste ---------- */
.manifesto4{padding-block:clamp(90px,12vw,190px)}
.manifesto4 #manifesto{font:500 clamp(30px,4.4vw,68px)/1.1 var(--sans);letter-spacing:-.04em;max-width:22ch;margin-top:28px}
#manifesto .w{transition:color .3s}

/* ---------- références ---------- */
.refs{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.refs .track{display:flex;width:max-content;align-items:center;gap:clamp(56px,7vw,120px);animation:drift 45s linear infinite;padding-block:8px}
.refs:hover .track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.cl{white-space:nowrap;color:var(--soft);transition:color .3s}
.cl:hover{color:var(--ink)}
.cl-a{font:600 clamp(18px,1.8vw,26px)/1 var(--sans);letter-spacing:-.03em}
.cl-b{font:400 italic clamp(26px,2.6vw,38px)/1 var(--serif)}
.cl-c{font:500 clamp(14px,1.3vw,18px)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}

/* ---------- univers : cartes empilées ---------- */
.uni-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.stack{display:grid;gap:24px}
.scard{position:sticky;top:calc(var(--head) + 20px + var(--i,0) * 14px);min-height:min(78vh,720px);border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--surface);border:1px solid var(--line);transform-origin:50% 0;will-change:transform}
.scard.deepc{background:var(--deep);color:var(--on-deep);border-color:transparent}
.scard.sandc{background:var(--sand)}
.scard .txt{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;gap:20px}
.scard .num{font:500 14px var(--sans);color:var(--soft)}
.scard.deepc .num,.scard.deepc .soft{color:var(--on-deep-soft)}
.scard h3{font:500 clamp(40px,5vw,80px)/.95 var(--sans);letter-spacing:-.05em}
.scard .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.scard .tags span{height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:500 13.5px var(--sans)}
.scard.deepc .tags span{border-color:rgba(255,255,255,.2)}
.scard .media{position:relative;margin:12px;border-radius:calc(var(--r-xl) - 12px);overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.scard .media .ph{height:100%;border-radius:calc(var(--r-xl) - 18px)}
@media (max-width:860px){.scard{position:relative;top:auto;grid-template-columns:1fr;min-height:0}.scard .media{height:420px;order:-1}}

/* ---------- histoire Instagram (téléphone fixe) ---------- */
.story{background:var(--surface-2);border-radius:var(--r-xl);margin-inline:clamp(8px,1.4vw,20px)}
.story .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px)}
.story .steps{display:flex;flex-direction:column}
.story .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:16px;max-width:30em;opacity:.28;transition:opacity .5s}
.story .step.on{opacity:1}
.story .step h3{font:500 clamp(32px,3.6vw,56px)/1 var(--sans);letter-spacing:-.045em}
.story .step .k{font:500 14px var(--sans);color:var(--az)}
.story .pin{position:sticky;top:calc(var(--head) + 4vh);height:calc(100vh - var(--head) - 8vh);display:flex;align-items:center;justify-content:center}
.phone{position:relative;width:min(320px,72vw);aspect-ratio:9/19.3;border-radius:52px;background:#0B0D10;padding:10px;box-shadow:0 60px 100px -40px rgba(11,22,34,.5),inset 0 0 0 1.5px #2A2E35}
.screen{position:relative;height:100%;border-radius:43px;overflow:hidden;background:#FFFFFF;color:#0B1622}
.notch{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:96px;height:27px;border-radius:99px;background:#0B0D10;z-index:9}
.scr{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.scr.on{opacity:1;transform:none}
.feed{animation:feed 28s linear infinite}
@keyframes feed{0%,8%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.ig-top{padding:50px 14px 10px;display:flex;align-items:center;gap:12px}
.ig-av{width:58px;height:58px;border-radius:50%;background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:center;font:400 italic 28px var(--serif);flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--az)}
.ig-stats{display:flex;flex:1;justify-content:space-around;text-align:center;font:400 10.5px var(--sans)}
.ig-stats b{display:block;font-size:14px;font-weight:600}
.ig-bio{padding:0 14px 10px;font:400 11.5px/1.45 var(--sans)}
.ig-hl{display:flex;gap:10px;padding:2px 12px 12px}
.ig-hl span{width:48px;height:48px;border-radius:50%;border:1px solid #DADDE1;display:flex;align-items:center;justify-content:center;font:500 9.5px var(--sans)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-grid .ph{aspect-ratio:3/4}
.reels{position:absolute;inset:0;transition:transform .9s var(--ease)}
.reels > div{position:relative;height:100%}
.reels .ph{height:100%;width:100%}
.reel-ui{position:absolute;inset:auto 0 0 0;z-index:3;padding:16px 14px 24px;color:#fff;font:400 12px/1.45 var(--sans);background:linear-gradient(transparent,rgba(0,0,0,.5))}
.reel-ui b{font-weight:600}
.cal{padding:56px 16px 16px;display:flex;flex-direction:column;gap:10px;font:500 12px var(--sans)}
.cal h4{margin:0 0 6px;font:600 18px var(--sans);letter-spacing:-.03em}
.cal .it{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:8px;border-radius:14px;background:#F2F4F6}
.cal .it .ph{width:44px;height:44px;border-radius:10px}
.cal .ok{height:22px;padding:0 9px;border-radius:999px;background:#E3F0FB;color:#1A6FB5;display:inline-flex;align-items:center;font-size:10.5px}
.stats{padding:56px 16px 16px;display:flex;flex-direction:column;gap:14px;font:500 12px var(--sans)}
.stats h4{margin:0;font:600 18px var(--sans);letter-spacing:-.03em}
.stats .bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding:12px;border-radius:16px;background:#F2F4F6}
.stats .bars i{flex:1;border-radius:6px;background:var(--az);opacity:.85;transform-origin:bottom;transition:transform 1s var(--ease)}
.scr:not(.on) .bars i{transform:scaleY(.1)}
.stats .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats .row2 div{padding:12px;border-radius:14px;background:#F2F4F6}
.stats .row2 b{display:block;font-size:18px;letter-spacing:-.03em}
@media (max-width:860px){.story .grid{grid-template-columns:1fr}.story .pin{position:relative;top:auto;height:auto;padding-block:32px;order:-1}.story .step{min-height:0;opacity:1;padding-block:24px}}

/* ---------- carrousel ---------- */
.car-wrap{position:relative}
.car{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding-inline:var(--gutter);padding-bottom:8px;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.car figure{margin:0;flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.car .ph{height:clamp(360px,42vw,560px);aspect-ratio:9/16;border-radius:var(--r-lg)}
.car figure.land .ph{aspect-ratio:4/3}
.car figcaption{font:500 14.5px var(--sans);letter-spacing:-.01em}
.car figcaption span{color:var(--soft);font-weight:400}
.car-nav{display:flex;gap:8px}
.car-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .25s,transform .25s}
.car-nav button:hover{background:var(--surface-2);transform:scale(1.05)}
.car-nav svg{width:16px;height:16px}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--surface);border:1px solid var(--line);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:12px;text-decoration:none;min-height:420px;transition:transform .5s var(--ease),box-shadow .5s}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(11,22,34,.35)}
.tile h3{font:500 clamp(28px,2.6vw,42px)/1.02 var(--sans);letter-spacing:-.045em}
.tile .k{font:500 14px var(--sans);color:var(--soft)}
.tile .go{position:absolute;right:20px;top:20px;width:42px;height:42px;border-radius:50%;background:var(--ink) center/15px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12L12 4M6 4h6v6'/%3E%3C/svg%3E");transition:transform .4s var(--ease)}
.tile:hover .go{transform:rotate(45deg)}
.tile .art{margin-top:auto;border-radius:var(--r-md);overflow:hidden;height:200px;position:relative}
.tile .art .ph{position:absolute;inset:0}
.t-ia{grid-column:span 7}.t-web{grid-column:span 5;background:var(--deep);color:var(--on-deep);border-color:transparent}
.t-web .k{color:var(--on-deep-soft)}.t-web .go{background-color:var(--az)}
.t-drone{grid-column:span 5;background:var(--sand)}.t-studio{grid-column:span 7}
.t-ia .art .after{clip-path:inset(0 0 0 var(--cut,55%));z-index:2}
.t-ia .art .line{position:absolute;top:0;bottom:0;left:var(--cut,55%);width:2px;background:#fff;z-index:3}
@media (max-width:900px){.bento>*{grid-column:1/-1!important}}

/* ---------- contact / pied de page (bleu) ---------- */
.contact{background:var(--deep);color:var(--on-deep);border-radius:var(--r-xl) var(--r-xl) 0 0;padding-block:clamp(90px,12vw,180px) clamp(60px,7vw,100px);text-align:center;margin-top:clamp(40px,6vw,80px)}
.contact h2{font:500 clamp(44px,7.4vw,124px)/.95 var(--sans);letter-spacing:-.055em}
.contact .coords{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.contact .coords span{height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font:500 12.5px var(--sans);color:var(--on-deep-soft)}
.contact .lines{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:40px}
.contact .addr{font:500 clamp(18px,2vw,24px) var(--sans);letter-spacing:-.02em;user-select:all}
.contact .btn{margin-top:24px}
.contact .caps{color:var(--on-deep-soft)}
footer.foot{background:var(--deep);color:var(--on-deep);padding-block:24px 36px}
footer.foot .cols{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px;padding-top:48px;border-top:1px solid rgba(255,255,255,.12)}
footer.foot .soft,footer.foot .caps{color:var(--on-deep-soft)}
footer.foot ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
footer.foot a{text-decoration:none}footer.foot a:hover{color:var(--az)}
footer.foot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);color:var(--on-deep-soft)}
@media (max-width:820px){footer.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer.foot .cols{grid-template-columns:1fr}}

/* ---------- pages intérieures ---------- */
.crumb,.p-hero{background:var(--deep);color:var(--on-deep);border-image:conic-gradient(var(--deep) 0 0) fill 0//0 100vmax}
.crumb{display:flex;gap:8px;flex-wrap:wrap;padding-top:calc(var(--head) + 28px);color:var(--on-deep-soft)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--on-deep)}
.p-hero{padding-block:clamp(36px,5vw,72px) clamp(140px,14vw,220px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end}
.p-hero h1{font:500 clamp(40px,5.6vw,92px)/.98 var(--sans);letter-spacing:-.05em}
.p-hero .lead{color:var(--on-deep-soft)}
.p-hero .btn.fill{background:var(--on-deep);color:var(--deep);border-color:transparent}
.p-hero .btn.fill::after{background-color:var(--deep)}
.p-hero .link{color:var(--on-deep)}
.p-hero .row{margin-top:28px}
@media (max-width:820px){.p-hero{grid-template-columns:1fr}}
.p-cover{position:relative;margin-top:calc(-1 * clamp(110px,11vw,180px));margin-inline:auto;max-width:1600px;padding-inline:var(--gutter)}
.p-cover .frame,.p-cover > .ba{border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,22,34,.45)}
.p-cover .ph{width:100%}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px)}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.deliv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.deliv div{padding:22px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.deliv h3{font:500 21px/1.15 var(--sans);letter-spacing:-.03em}
.deliv p{color:var(--soft);font-size:15.5px}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(10px,1.2vw,16px)}
.gal figure{margin:0}
.gal .ph{border-radius:var(--r-md)}
.gal .w2{grid-column:span 2}
.gal .tall .ph{aspect-ratio:9/16}.gal .por .ph{aspect-ratio:4/5}.gal .w2 .ph{aspect-ratio:3/2}
@media (max-width:820px){.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{height:40px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:500 15px var(--sans)}
.steps4{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.steps4 li{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.steps4 .n{width:36px;height:36px;border-radius:50%;background:var(--deep);color:var(--on-deep);display:grid;place-items:center;font:500 13px var(--sans)}
.steps4 h3{font:500 20px/1.15 var(--sans);letter-spacing:-.03em}
.steps4 p{color:var(--soft);font-size:15.5px}
@media (max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps4{grid-template-columns:1fr}}
.faq{max-width:900px;display:grid;gap:10px}
.faq details{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);padding:20px 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font:500 clamp(17px,1.4vw,20px)/1.3 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--surface-2) center/12px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235B6571' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E");transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--soft);max-width:44em}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prices > div{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.price{font:500 clamp(28px,2.6vw,40px)/1.05 var(--sans);letter-spacing:-.045em}
@media (max-width:820px){.prices{grid-template-columns:1fr}}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.offers.two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.offer{border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);padding:clamp(24px,2.6vw,38px);display:flex;flex-direction:column;gap:14px}
.offer.main{background:var(--deep);color:var(--on-deep);border-color:transparent}
.offer.main .soft,.offer.main .caps{color:var(--on-deep-soft)}
.offer h3{font:500 clamp(28px,2.4vw,38px)/1.02 var(--sans);letter-spacing:-.045em}
.offer ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15.5px}
.offer li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px}
.offer li::before{content:"";width:16px;height:16px;margin-top:.2em;border-radius:50%;background:var(--az) center/9px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.2l2 2 4-4.4'/%3E%3C/svg%3E")}
.offer .price{margin-top:auto;padding-top:16px;border-top:1px solid currentColor;border-top-color:var(--line)}
.offer.main .price{border-top-color:rgba(255,255,255,.16)}
.offer.main .btn{background:var(--on-deep);color:var(--deep);border-color:transparent}
.offer.main .btn::after{background-color:var(--deep)}
@media (max-width:900px){.offers,.offers.two{grid-template-columns:1fr}}
.social{background:var(--surface-2);border-radius:var(--r-xl);margin-inline:clamp(8px,1.4vw,20px)}
.social .grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,140px);align-items:center}
.social .phone{justify-self:center}
.social .steps4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:900px){.social .grid{grid-template-columns:1fr}}
.ia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ia article{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:10px}
.ia .n{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font:500 14px var(--sans)}
.ia h3{font:500 clamp(22px,1.9vw,28px)/1.1 var(--sans);letter-spacing:-.035em}
.ia p{color:var(--soft)}
.ia .for{margin-top:auto;padding-top:8px}
@media (max-width:900px){.ia{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ia{grid-template-columns:1fr}}
.ba{position:relative;aspect-ratio:3/2;max-width:100%;overflow:hidden;user-select:none}
.ba .ph{position:absolute;inset:0}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba .furn{position:absolute;inset:0;z-index:2;pointer-events:none}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:#fff;z-index:4}
.ba .handle::after{content:"";position:absolute;top:50%;left:-21px;width:44px;height:44px;border-radius:50%;background:#fff center/18px no-repeat;transform:translateY(-50%);box-shadow:0 6px 24px rgba(0,0,0,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230B1622' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5L2 9l4 4M12 5l4 4-4 4'/%3E%3C/svg%3E")}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}
.ba .tagL,.ba .tagR{position:absolute;top:16px;z-index:3;height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font:500 12.5px var(--sans);background:rgba(255,255,255,.88);color:#0B1622;backdrop-filter:blur(8px)}
.ba .tagL{left:16px}.ba .tagR{right:16px}
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rules div{padding:24px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.rules .d{font:500 22px/1.15 var(--sans)!important;letter-spacing:-.03em}
@media (max-width:820px){.rules{grid-template-columns:1fr}}
.studio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;padding:clamp(8px,1.4vw,20px)}
.studio > .ph{min-height:560px;height:100%;border-radius:var(--r-xl)}
.studio .txt{padding:clamp(32px,6vw,96px) clamp(8px,4vw,64px);display:flex;flex-direction:column;gap:22px;justify-content:center}
.studio .txt p{max-width:34em;color:var(--soft)}
@media (max-width:820px){.studio{grid-template-columns:1fr}.studio > .ph{min-height:420px}}
form.cf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
form.cf label{display:flex;flex-direction:column;gap:8px;font:500 14px var(--sans)}
form.cf .full{grid-column:1/-1}
form.cf input,form.cf select,form.cf textarea{font:400 16px var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:14px 16px;border-radius:14px}
form.cf textarea{min-height:130px;resize:vertical}
form.cf .note{grid-column:1/-1}
@media (max-width:620px){form.cf{grid-template-columns:1fr}}
.h2.d,.d{font-family:var(--sans)}
/* maquettes site web */
.devices{position:relative;padding-bottom:40px}
.browser{border-radius:var(--r-lg);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(11,22,34,.35);max-width:100%}
.b-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#F0F1F3;color:#5B6571;font:500 11.5px var(--sans)}
.b-bar i{width:10px;height:10px;border-radius:50%;background:#D6D9DE}
.b-bar span{margin-left:12px;background:#fff;padding:4px 14px;border-radius:999px}
.b-view{height:clamp(300px,42vw,620px);overflow:hidden}
.scroller{animation:pageScroll 22s ease-in-out infinite alternate}
.scroller.slow{animation-duration:26s}
@keyframes pageScroll{0%,10%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.mock-page{background:#F7F6F3;color:#0B1622;padding-bottom:40px}
.mp-nav{display:flex;align-items:center;gap:16px;padding:16px 5%}
.mp-nav b{font:600 15px var(--sans);letter-spacing:-.03em;margin-right:auto}
.mp-nav span{width:44px;height:6px;border-radius:3px;background:#D3D6DA}
.mp-hero{position:relative;height:clamp(180px,26vw,380px);margin:0 3%;border-radius:18px;overflow:hidden}
.mp-hero .ph{position:absolute;inset:0}
.mp-t{position:absolute;left:5%;bottom:10%;z-index:3;color:#fff;font:500 clamp(22px,3.2vw,48px)/1 var(--sans);letter-spacing:-.04em}
.mp-row{display:flex;gap:4%;padding:24px 5%}.mp-row i{flex:1;height:7px;border-radius:4px;background:#0B1622}
.mp-text{padding:6px 5%;display:grid;gap:8px}.mp-text span{height:6px;border-radius:3px;background:#D3D6DA;width:100%}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:20px 5%}.mp-grid .ph{aspect-ratio:3/4;border-radius:10px}
.mp-cta{margin:18px 5% 0;display:inline-block;padding:10px 22px;border-radius:999px;background:var(--deep);color:#fff;font:500 11px var(--sans)}
.phone.mini{position:absolute;right:4%;bottom:0;width:min(190px,30vw);border-radius:34px;padding:7px}
.phone.mini .screen{border-radius:28px}
.phone.mini .notch{width:56px;height:16px;top:7px}
.phone.mini .mock-page{font-size:60%}
.phone.mini .mp-hero{height:150px}.phone.mini .mp-grid{grid-template-columns:repeat(2,1fr)}
.phone.mini .scroller{padding-top:26px}

/* rideau entre les pages */
.curtain{position:fixed;inset:0;z-index:70;background:var(--deep);clip-path:inset(100% 0 0 0);pointer-events:none;transition:clip-path .7s var(--ease)}
.curtain.cover{clip-path:inset(0 0 0 0)}
.curtain.instant{transition:none}
.curtain.leave{clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
 #intro{display:none}
 .refs .track,.feed,.ph.kb,.scroller,.fan .card .tc i{animation:none}
 .refs{overflow-x:auto}
 .curtain{display:none}
 .story .step{opacity:1}
}

.h4-top .eyebrow{align-self:center}

/* Instagram : mon compte */
.insta{background:var(--surface-2);border-radius:var(--r-xl);margin-inline:clamp(8px,1.4vw,20px)}
.igrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,140px);align-items:center}
.itxt{display:flex;flex-direction:column;gap:22px;max-width:36em}
.post{position:absolute;inset:0;z-index:6;background:#0B0D10;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.post .ph{position:absolute;inset:0;transform:scale(1.08);transition:transform 5s ease-out}
.post.on{opacity:1}.post.on .ph{transform:scale(1)}
.post .bar{position:absolute;left:12px;right:12px;top:46px;height:2px;border-radius:2px;background:rgba(255,255,255,.3);z-index:3}
.post .bar i{display:block;height:100%;width:0;border-radius:2px;background:#fff}
.post.on .bar i{width:100%;transition:width 4.2s linear}
.post .who{position:absolute;left:12px;top:58px;z-index:3;color:#fff;font:600 12px var(--sans);display:flex;align-items:center;gap:8px}
.post .who i{width:26px;height:26px;border-radius:50%;background:var(--deep);color:#fff;font:400 italic 13px var(--serif);display:inline-flex;align-items:center;justify-content:center}
.post .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 14px 26px;color:#fff;font:500 12.5px/1.4 var(--sans);background:linear-gradient(transparent,rgba(0,0,0,.5))}
@media (max-width:900px){.igrid{grid-template-columns:1fr}.insta .phone{justify-self:center}}

/* vraies images et vidéos */
.ph.real{background:#1a1f26}
.ph.real::before{display:none}
.ph.real > img,.ph.real > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph.real.kbz > img{animation:kbz 20s ease-in-out infinite alternate}
@keyframes kbz{from{transform:scale(1)}to{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.ph.real.kbz > img{animation:none}}

/* ouverture : une seule vidéo */
.hero5{position:relative;background:var(--deep);color:var(--on-deep);overflow:hidden;border-radius:0 0 var(--r-xl) var(--r-xl);min-height:100vh;min-height:100svh;display:flex}
.h5-media{position:absolute;inset:0;z-index:0}
.h5-media video{width:100%;height:100%;object-fit:cover;filter:blur(36px) saturate(1.1);transform:scale(1.15);opacity:.5}
.hero5::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,var(--deep) 0%,color-mix(in srgb,var(--deep) 70%,transparent) 55%,color-mix(in srgb,var(--deep) 30%,transparent) 100%)}
.h5{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,96px);align-items:center;padding-top:calc(var(--head) + 40px);padding-bottom:56px}
.h5-txt{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.h5-txt .d1{max-width:11ch}
.h5-txt .lead{color:var(--on-deep-soft)}
.h5-slot{position:relative;justify-self:end;height:min(78vh,780px);aspect-ratio:9/16;max-width:100%;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.6)}
.h5-slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h5-slot .chip{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:999px;background:rgba(11,22,34,.42);backdrop-filter:blur(10px);color:#fff;font:500 12px var(--sans)}
.h5-slot .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF5A5F;animation:blink 1.2s steps(2) infinite}
@media (max-width:860px){
 .h5-media video{filter:none;transform:none;opacity:1}
 .h5-slot{display:none}
 .hero5::after{background:linear-gradient(180deg,rgba(14,45,76,.15) 0%,rgba(14,45,76,.05) 35%,rgba(14,45,76,.85) 78%,var(--deep) 100%)}
 .h5{grid-template-columns:1fr;align-items:end;padding-bottom:40px}
 .h5-txt .d1{font-size:clamp(44px,12vw,64px)}
}
.ph.real.kbz > img{animation:none}
.hero5 .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--on-deep);padding:7px 14px 7px 10px;margin:0;backdrop-filter:blur(8px)}
.hero5 .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--az)}

/* showreel en bannière plein écran (toutes tailles) */
.h5-media video{filter:none!important;transform:none!important;opacity:1!important;object-position:50% 45%}
.h5-slot{display:none!important}
.hero5::after{background:linear-gradient(90deg,rgba(14,45,76,.88) 0%,rgba(14,45,76,.55) 42%,rgba(14,45,76,.1) 75%,rgba(14,45,76,.05) 100%),linear-gradient(0deg,rgba(14,45,76,.55),transparent 35%)}
.h5{grid-template-columns:1fr;align-items:end;padding-bottom:clamp(48px,7vw,96px)}
@media (max-width:860px){.hero5::after{background:linear-gradient(180deg,rgba(14,45,76,.15) 0%,rgba(14,45,76,.05) 35%,rgba(14,45,76,.85) 78%,var(--deep) 100%)}}

/* intro du site = signature logo (ligne, lettres qui montent, point azur) */
#intro{background:radial-gradient(90% 70% at 50% 40%,#0E2D4C 0%,#071A2E 100%)}
#intro .i-box{position:relative;display:flex;flex-direction:column;align-items:center}
#intro .i-logo{display:flex;align-items:baseline;gap:.2em;overflow:hidden;padding:0 .08em .06em;font:600 clamp(48px,8vw,120px)/1.05 var(--sans);letter-spacing:-.05em;color:#F2F5F7}
#intro .i-w{display:inline-flex;align-items:baseline}
#intro .i-st{font:400 italic 1.08em/1.05 var(--serif);letter-spacing:-.01em}
#intro .i-w span{display:inline-block;transform:translateY(110%);animation:iup 1.1s cubic-bezier(.16,1,.3,1) forwards}
#intro .i-dot{display:inline-block;width:.13em;height:.13em;border-radius:50%;background:#7FC0F2;margin-left:.04em;transform:scale(0);animation:ipop .6s 1.75s cubic-bezier(.34,1.56,.64,1) forwards}
#intro .i-line{height:1px;width:0;margin-top:clamp(14px,2vw,26px);background:linear-gradient(90deg,transparent,rgba(242,245,247,.5) 18%,rgba(242,245,247,.5) 82%,transparent);animation:iline 1.4s .1s cubic-bezier(.65,0,.35,1) forwards}
#intro .i-tag{margin-top:clamp(14px,2vw,22px);font:500 clamp(11px,1vw,14px) var(--sans);letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:rgba(242,245,247,.6);opacity:0;animation:ifade .9s 1.9s forwards}
@keyframes iup{to{transform:none}}
@keyframes ipop{to{transform:none}}
@keyframes iline{0%{width:0}60%{width:min(70vw,900px)}100%{width:min(60vw,640px)}}
@keyframes ifade{to{opacity:1}}
#intro.out{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.mark .mdot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--az);margin-left:.06em}
.dd-g{grid-template-columns:repeat(5,minmax(0,1fr))}

/* page avec photo plein écran (Mode & Riviera) */
.hero-full{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:var(--on-deep);overflow:hidden;border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--deep)}
.hero-full > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-full::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,45,76,.82) 0%,rgba(14,45,76,.35) 38%,rgba(14,45,76,0) 62%),linear-gradient(180deg,rgba(14,45,76,.45),transparent 22%)}
.hf-in{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:clamp(40px,6vw,88px)}
.hf-in .crumb{background:none;border-image:none;padding-top:0;color:var(--on-deep-soft)}
.hf-in h1{font:500 clamp(40px,5.6vw,92px)/.98 var(--sans);letter-spacing:-.05em;max-width:16ch}
.hf-in .lead{color:var(--on-deep-soft);max-width:38em}
.hero-full::after{background:linear-gradient(90deg,rgba(14,45,76,.78) 0%,rgba(14,45,76,.45) 40%,rgba(14,45,76,0) 70%),linear-gradient(0deg,rgba(14,45,76,.6) 0%,transparent 40%),linear-gradient(180deg,rgba(14,45,76,.45),transparent 22%)}

/* ===== Réseaux sociaux : un mois en graphismes ===== */
.wf{background:var(--surface-2);border-radius:var(--r-xl);margin-inline:clamp(8px,1.4vw,20px)}
.wf-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,7vw,140px);align-items:center}
.wf-list{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:10px;max-width:34em}
.wf-list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 20px;border-radius:var(--r-lg);background:transparent;border:1px solid transparent;opacity:.45;transition:opacity .5s,background .5s,border-color .5s;cursor:pointer;overflow:hidden}
.wf-list li.on{opacity:1;background:var(--surface);border-color:var(--line);box-shadow:0 20px 40px -30px rgba(11,22,34,.35)}
.wf-list .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:500 13px var(--sans);background:var(--surface);border:1px solid var(--line)}
.wf-list li.on .n{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.wf-list h3{font:500 20px/1.2 var(--sans);letter-spacing:-.03em}
.wf-list p{font-size:15px;margin-top:4px}
.wf-list .bar{position:absolute;left:20px;right:20px;bottom:0;height:2px;background:transparent}
.wf-list .bar i{display:block;height:100%;width:0;background:var(--az)}
.wf-list li.on .bar i{animation:wfbar var(--wfd,4.2s) linear forwards}
@keyframes wfbar{to{width:100%}}
.wf-phone .screen{background:#F5F6F8}
.wf-scr{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.wf-scr.on{opacity:1;transform:none}
.wf-scr.dark{background:#0E141C;color:#EEF1F4}
.ui{padding:50px 14px 14px;display:flex;flex-direction:column;gap:12px;height:100%;font:500 12px var(--sans);color:inherit}
.ui-top{display:flex;justify-content:space-between;align-items:flex-end}
.ui-top small{display:block;color:#8A94A2;font-size:10.5px}
.ui-top h4{margin:2px 0 0;font:600 20px/1 var(--sans);letter-spacing:-.04em}
.ui .pill{height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;background:#E6EAF0;color:#0B1622;font-size:10.5px;width:auto;margin:0;vertical-align:baseline}
.ui .pill.ok{background:#DDF3E6;color:#11744A}
.ui .pill.ok::before{content:"✓";margin-right:5px}
.wf-scr.dark .pill{background:#1E2836;color:#C9D3DF}
.wk,.cal7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wk span{text-align:center;color:#8A94A2;font-size:10px}
.cal7 .d{aspect-ratio:1;border-radius:8px;background:#fff;display:grid;place-items:start;padding:3px 4px;font-style:normal;position:relative;overflow:hidden}
.cal7 .d b{font:500 9px var(--sans);color:#9AA3AF}
.cal7 .d.has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px;transform:scale(.3);opacity:0}
.wf-scr.on .cal7 .d.has img{animation:pop .5s calc(.25s + var(--k)*.28s) cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes pop{to{transform:none;opacity:1}}
.ui-row{display:flex;align-items:center;gap:8px;margin-top:auto;padding:10px 12px;border-radius:12px;background:#fff;font-size:11px}
.ui-row .dot{width:8px;height:8px;border-radius:50%;background:var(--az)}
.shoot{position:absolute;inset:0}
.shoot > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 4.5s ease-out}
.wf-scr.on .shoot > img{transform:scale(1)}
.vf{position:absolute;left:12px;right:12px;top:46px;display:flex;justify-content:space-between;color:#fff;font:500 10.5px var(--sans);text-shadow:0 1px 6px rgba(0,0,0,.4);font-variant-numeric:tabular-nums}
.vf .rec{display:inline-flex;align-items:center;gap:6px}
.vf .rec i{width:8px;height:8px;border-radius:50%;background:#FF4D4F;animation:blink 1s steps(2) infinite}
.thirds{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.3% - .5px),rgba(255,255,255,.35) 33.3%,transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.35) 66.6%,transparent calc(66.6% + .5px)),linear-gradient(0deg,transparent calc(33.3% - .5px),rgba(255,255,255,.35) 33.3%,transparent calc(33.3% + .5px),transparent calc(66.6% - .5px),rgba(255,255,255,.35) 66.6%,transparent calc(66.6% + .5px))}
.shotlist{position:absolute;left:10px;right:10px;bottom:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);color:#0B1622;display:grid;gap:6px;font:500 11.5px var(--sans)}
.shotlist small{color:#5B6571;font-size:10px}
.shotlist p{display:flex;align-items:center;gap:8px;margin:0}
.shotlist p i{width:15px;height:15px;border-radius:50%;border:1.5px solid #C3CAD3;flex-shrink:0;position:relative}
.wf-scr.on .shotlist p i{animation:tick .35s calc(.6s + var(--k)*.7s) forwards}
@keyframes tick{to{background:#11744A;border-color:#11744A;box-shadow:inset 0 0 0 3px #fff}}
.prev{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.prev img{width:100%;height:100%;object-fit:cover;display:block}
.prev .play{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.prev .play::after{content:"";position:absolute;left:16px;top:12px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tl{position:relative;display:grid;gap:6px;padding:10px;border-radius:12px;background:#151D28}
.trk{position:relative;height:18px;border-radius:5px;background:#1C2633}
.trk i{position:absolute;top:2px;bottom:2px;left:var(--l);width:var(--w);border-radius:4px;opacity:0;transform:translateX(30px)}
.wf-scr.on .trk i{animation:clipin .5s calc(.2s + var(--k)*.3s) var(--ease) forwards}
@keyframes clipin{to{opacity:.95;transform:none}}
.ph-head{position:absolute;top:4px;bottom:4px;left:10px;width:2px;background:#FF4D4F;z-index:2;border-radius:2px}
.wf-scr.on .ph-head{animation:playhead 3.6s linear forwards}
@keyframes playhead{to{left:calc(100% - 14px)}}
.exp{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:auto;font-size:11px;color:#C9D3DF}
.exp b{height:6px;border-radius:3px;background:#1C2633;overflow:hidden}
.exp b i{display:block;height:100%;width:0;background:var(--az)}
.wf-scr.on .exp b i{animation:wfbar 3.4s .3s ease-out forwards}
.exp em{font-style:normal;font-variant-numeric:tabular-nums}
.postc{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1}
.postc img{width:100%;height:100%;object-fit:cover;display:block}
.heart{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;transform:scale(0);background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 21s-7.5-4.6-10-9.3C.4 8.4 2.4 4.5 6.2 4.5c2.2 0 3.6 1.2 4.4 2.4h.8c.8-1.2 2.2-2.4 4.4-2.4 3.8 0 5.8 3.9 4.2 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.wf-scr.on .heart{animation:heart 1.2s .5s ease forwards}
@keyframes heart{30%{transform:scale(1.15)}45%{transform:scale(.95)}60%{transform:scale(1)}100%{transform:scale(1);opacity:0}}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kpi div{padding:8px;border-radius:12px;background:#fff}
.kpi small{display:block;color:#8A94A2;font-size:9.5px}
.kpi b{font:600 15px var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.spark{display:flex;align-items:flex-end;gap:5px;height:56px;padding:8px 10px;border-radius:12px;background:#fff}
.spark i{flex:1;height:var(--h);border-radius:4px;background:linear-gradient(var(--az),#B9DAF5);transform-origin:bottom;transform:scaleY(.05)}
.wf-scr.on .spark i{animation:grow .9s .4s var(--ease) forwards}
@keyframes grow{to{transform:none}}
.ui .note{color:#8A94A2;font-size:9.5px;margin:0}
@media (max-width:900px){.wf-grid{grid-template-columns:1fr}.wf-phone{justify-self:center}}
@media (prefers-reduced-motion:reduce){.wf-scr *{animation:none!important}.cal7 .d.has img{transform:none;opacity:1}.trk i{opacity:.95;transform:none}}

/* mentions légales */
.legal{display:grid;gap:12px;max-width:820px}
.legal h2{font:500 24px/1.2 var(--sans);letter-spacing:-.03em;margin-top:24px}
.legal p{color:var(--soft)}
.cal7 .d.e{background:transparent}

/* ---- hero : diaporama plein écran ---- */
.h5-show .h5-s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s cubic-bezier(.4,0,.2,1)}
.h5-show .h5-s img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 9s cubic-bezier(.2,.6,.3,1)}
.h5-show .h5-s.on{opacity:1}
.h5-show .h5-s.on img{transform:scale(1)}
.h5-cap{position:absolute;z-index:2;right:clamp(16px,4vw,56px);bottom:clamp(20px,4vw,44px);display:flex;align-items:center;gap:14px;color:rgba(255,255,255,.82);font:400 13px var(--sans);letter-spacing:.01em}
.h5-cap .mono{font-variant-numeric:tabular-nums;opacity:.9}
.h5-bar{width:56px;height:1px;background:rgba(255,255,255,.28);overflow:hidden}
.h5-bar i{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.h5-bar i.run{animation:h5bar 6s linear forwards}
@keyframes h5bar{to{transform:scaleX(1)}}
#h5c{transition:opacity .5s}
@media (max-width:860px){.h5-cap{left:16px;right:auto;top:calc(76px + env(safe-area-inset-top,0px));bottom:auto}}
@media (prefers-reduced-motion:reduce){.h5-show .h5-s img{transition:none;transform:none}}

/* ---- bandeau événements privés ---- */
.evband-w{padding-bottom:clamp(80px,10vw,160px)}
.evband{position:relative;display:flex;align-items:flex-end;min-height:min(78vh,720px);border-radius:var(--r-xl);overflow:hidden;color:#fff;text-decoration:none;isolation:isolate}
.evband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.evband::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,20,34,.86) 0%,rgba(8,20,34,.45) 45%,rgba(8,20,34,.05) 80%)}
.evband:hover img{transform:scale(1)}
.ev-in{padding:clamp(24px,5vw,72px);max-width:44em;display:grid;gap:18px;justify-items:start}
.ev-in .eyebrow{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px)}
.ev-in .h2{color:#fff;margin:0}
.ev-in .lead{color:rgba(255,255,255,.82);margin:0}
.ev-tag{position:absolute;top:clamp(16px,2.4vw,28px);right:clamp(16px,2.4vw,28px);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:12px;color:#fff}
.h5-cap{text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media (max-width:860px){#h5c{display:none}}

/* ---- logos clients (monochromes) ---- */
.refs .lg{display:block;flex:none;height:calc(46px * var(--s,1));width:auto;aspect-ratio:var(--r);max-width:none;opacity:.7;filter:var(--logo-f,none);transition:opacity .3s}
.refs .lg:hover{opacity:1}
@media (max-width:860px){.refs .lg{height:calc(34px * var(--s,1))}}
.gal .w2 .ph{aspect-ratio:33/20}

:root{--logo-f:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo-f:invert(1)}}
:root[data-theme="dark"]{--logo-f:invert(1)}

/* ---- déroulé (page studio) ---- */
.proc{background:var(--deep);color:var(--on-deep);border-radius:var(--r-xl);margin:0 clamp(8px,1.4vw,20px);padding-block:clamp(72px,9vw,140px);overflow:hidden}
.proc .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--on-deep)}
.proc-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.proc-head .h2{color:var(--on-deep);margin-top:18px}
.proc-head .lead{color:var(--on-deep-soft);margin:0;max-width:30em}
.proc-line{position:relative;height:1px;background:rgba(255,255,255,.16);margin:clamp(40px,5vw,72px) 0 clamp(24px,3vw,36px)}
.proc-line i{position:absolute;inset:0;background:var(--az);transform-origin:left;transform:scaleX(var(--p,1))}
.proc-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.proc-c{display:flex;flex-direction:column;gap:12px;min-width:0}
.proc-img{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;max-width:100%}
.proc-img .ph{position:absolute;inset:0;border-radius:0;height:100%}
.proc-img .ph img{transition:transform 1.2s var(--ease)}
.proc-c:hover .proc-img .ph img{transform:scale(1.05)}
.proc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,34,.05) 40%,rgba(8,20,34,.7));pointer-events:none}
.proc-n{position:absolute;z-index:1;left:18px;bottom:8px;font:italic 400 clamp(64px,6.4vw,104px)/1 var(--serif);color:#fff;letter-spacing:-.02em}
.proc-when{position:absolute;z-index:1;top:14px;left:14px;padding:6px 12px;border-radius:999px;background:rgba(11,22,34,.42);backdrop-filter:blur(10px);color:#fff;font:500 12px var(--sans)}
.proc-c h3{font:500 clamp(20px,1.8vw,24px)/1.15 var(--sans);letter-spacing:-.03em;margin-top:8px;color:var(--on-deep)}
.proc-c>p{color:var(--on-deep-soft);font-size:15px;margin:0}
.proc-c ul{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:7px}
.proc-c ul li{font-size:13.5px;color:var(--on-deep);display:flex;gap:10px;align-items:center}
.proc-c ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--az);flex:none}
@media (max-width:1000px){.proc-g{grid-template-columns:repeat(2,minmax(0,1fr))}.proc-head{grid-template-columns:1fr}}
@media (max-width:560px){.proc-g{grid-template-columns:1fr}.proc-img{aspect-ratio:16/11}}
.proc-c ul{margin-top:auto}.proc-c>p{margin-bottom:6px}

/* ---- hero avec reel vertical (événements) ---- */
.hf-vid{position:absolute;z-index:1;right:clamp(16px,4.6vw,72px);bottom:clamp(40px,6vw,88px);height:min(64vh,620px);aspect-ratio:9/16;max-width:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18)}
.hf-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-vid .chip{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;background:rgba(11,22,34,.42);backdrop-filter:blur(10px);color:#fff;font:500 12px var(--sans)}
.hf-vid .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:#FF5A5F;animation:blink 1.2s steps(2) infinite}
@media (max-width:900px){
 .hero-full.has-vid > img{display:none}
 .hf-vid{inset:0;height:auto;border-radius:0;border:0;box-shadow:none;z-index:0}
 .hf-vid .chip{top:auto;bottom:auto;top:calc(80px + env(safe-area-inset-top,0px));left:16px}
}
@media (max-width:900px){.hf-vid .chip{display:none}}
.hero-full > video.hf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- petits intitulés de section : style éditorial ---- */
p.caps{display:inline-flex;align-items:center;gap:12px;font:500 11.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase}
p.caps::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55;flex:none}

/* ---- Instagram en pied de page ---- */
.igs{padding-bottom:clamp(40px,5vw,72px);margin-bottom:clamp(40px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.12)}
.igs-h{display:flex;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-bottom:24px}
.igs-handle{font:italic 400 clamp(28px,3.2vw,44px)/1 var(--serif);color:var(--on-deep);text-decoration:none;letter-spacing:-.01em}
.igs-btn{margin-left:auto}
.igs-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.igs-t{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.06)}
.igs-t img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s;opacity:.9}
.igs-t:hover img{transform:scale(1.07);opacity:1}
@media (max-width:900px){.igs-g{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:520px){.igs-g{grid-template-columns:repeat(4,minmax(0,1fr))}.igs-t:nth-child(n+9){display:none}.igs-btn{margin-left:0}}
.igs{border-bottom:0;margin-bottom:0}

/* ---- carte studio (en attendant le portrait) ---- */
.st-card{position:relative;min-height:560px;border-radius:var(--r-xl);background:var(--deep);color:var(--on-deep);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:hidden;isolation:isolate}
.st-card::before{content:"";position:absolute;inset:-30%;z-index:-1;background:radial-gradient(40% 35% at 78% 18%,rgba(90,166,230,.32),transparent 70%),radial-gradient(45% 40% at 10% 95%,rgba(90,166,230,.14),transparent 70%);animation:stglow 14s ease-in-out infinite alternate}
@keyframes stglow{to{transform:translate(-6%,4%) rotate(8deg)}}
.st-big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0}
.st-big span{font:500 clamp(96px,11vw,176px)/.85 var(--sans);letter-spacing:-.06em}
.st-big em{font:italic 400 clamp(28px,2.6vw,40px)/1 var(--serif);color:var(--on-deep-soft)}
.st-facts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.st-facts li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);align-items:baseline}
.st-facts b{font:italic 400 24px/1 var(--serif);font-weight:400}
.st-facts span{color:var(--on-deep-soft);font-size:15px}
.st-sig{margin:0;font:500 11.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-deep-soft)}
@media (max-width:860px){.st-card{min-height:auto}.st-facts li{grid-template-columns:1fr;gap:4px}}
@media (prefers-reduced-motion:reduce){.st-card::before{animation:none}}

/* ---- mouvement ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:var(--az);transform-origin:left;transform:scaleX(0);pointer-events:none}
header.top{transition:transform .6s cubic-bezier(.2,.75,.15,1),background-color .4s,box-shadow .4s}
header.top.hide{transform:translateY(-115%)}
.gal figure{will-change:clip-path}
.gal figure .ph{overflow:hidden}
.gal figure:hover img{filter:brightness(1.04)}
.btn{will-change:transform}
@media (prefers-reduced-motion:reduce){header.top.hide{transform:none}.sprog{display:none}}

/* ---- portrait du fondateur ---- */
.st-portrait{position:relative;margin:0;min-height:560px;border-radius:var(--r-xl);overflow:hidden;background:#1a1a1a;isolation:isolate}
.st-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.st-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,14,20,.72) 0%,rgba(8,14,20,0) 38%);z-index:0}
.st-over{position:absolute;z-index:1;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);color:#fff;display:grid;gap:10px}
.st-over .st-big span{font-size:clamp(64px,7vw,104px)}
.st-over .st-big em{color:rgba(255,255,255,.78)}
.st-line{margin:0;font:500 11.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@media (max-width:860px){.st-portrait{min-height:0;aspect-ratio:4/5}}
/* portrait : image entière, sans recadrage */
.st-portrait{min-height:0;aspect-ratio:1360/2048;align-self:start;height:auto;max-width:100%}
.st-portrait img{object-fit:cover;object-position:50% 50%}
@media (max-width:860px){.st-portrait{aspect-ratio:1360/2048}}

/* ---- zones d'intervention ---- */
.zones2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}
.zones2 h3{font:italic 400 30px/1 var(--serif);margin:0 0 10px}
.zones2 p{color:var(--soft);margin:0 0 16px;max-width:34em}
.zones2 > p.soft{grid-column:1/-1;font-size:14.5px}
.hz{padding-block:clamp(64px,8vw,120px)}
.hz-in{display:grid;gap:22px;border-top:1px solid var(--line);padding-top:clamp(40px,5vw,72px)}
.hz-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;margin-top:10px}
.hz-cols h3{font:500 11.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0 0 14px}
.hz-cols ul{list-style:none;margin:0;padding:0;display:grid}
.hz-cols li{font:400 clamp(26px,3.2vw,44px)/1.15 var(--sans);letter-spacing:-.035em;padding:8px 0;border-bottom:1px solid var(--line)}
.hz-cols li:nth-child(odd){font-family:var(--serif);font-style:italic;letter-spacing:-.01em}
.hz > .hz-in > p.soft{max-width:40em}
@media (max-width:760px){.zones2,.hz-cols{grid-template-columns:1fr}}
.ilink{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--az)}.ilink:hover{color:var(--ink)}

/* ---- bouton WhatsApp ---- */
.wa{position:fixed;z-index:90;right:clamp(14px,2vw,28px);bottom:calc(clamp(14px,2vw,28px) + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 14px;border-radius:999px;background:var(--deep);color:#fff;text-decoration:none;font:500 14px var(--sans);box-shadow:0 14px 34px -12px rgba(8,20,34,.55);transition:transform .4s var(--ease),background .3s}
.wa svg{width:22px;height:22px;color:#4FD27A;flex:none}
.wa:hover{transform:translateY(-2px);background:#0B2440}
@media (max-width:760px){.wa{width:52px;height:52px;padding:0;justify-content:center}.wa span{display:none}}

/* ===== Web & digital ===== */
.devs{position:relative;container-type:inline-size;aspect-ratio:16/9.2;width:100%;border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(110% 90% at 65% 15%,#16406A 0%,#0E2D4C 48%,#081A2C 100%)}
.devs *{box-sizing:border-box}
.dv-lap{position:absolute;left:14%;top:13%;width:62%}
.dv-scr{aspect-ratio:16/10;border-radius:2.2cqw 2.2cqw 0 0;background:#0b0b0b;padding:1.2cqw;box-shadow:0 6cqw 10cqw -4cqw rgba(0,0,0,.75)}
.dv-base{height:1.9cqw;margin:0 -3.6cqw;border-radius:0 0 2.6cqw 2.6cqw;background:linear-gradient(#d4d8dd,#9aa2ab)}
.dv-win{position:relative;width:100%;height:100%;border-radius:.8cqw;overflow:hidden;background:#F7F3EC}
.dv-bar{position:absolute;left:0;right:0;top:0;height:3.2cqw;background:#E9E6E0;display:flex;align-items:center;gap:.6cqw;padding:0 1.2cqw;z-index:3}
.dv-bar i{width:.9cqw;height:.9cqw;border-radius:50%;background:#C9C4BB}
.dv-bar span{margin-left:1.4cqw;height:1.8cqw;width:40%;border-radius:1cqw;background:#fff;font:400 1.05cqw/1.8cqw var(--sans);color:#777;padding-left:1cqw}
.dv-hero{position:absolute;left:0;right:0;top:3.2cqw;bottom:0}
.dv-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block}
.dv-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,10,6,.8),rgba(14,10,6,.05) 75%)}
.dv-nav{position:absolute;z-index:2;top:5cqw;left:3cqw;right:3cqw;display:flex;justify-content:space-between;align-items:center;color:#fff;font:500 1cqw var(--sans);letter-spacing:.12em}
.dv-nav b{font:italic 400 2.6cqw var(--serif);letter-spacing:0}
.dv-txt{position:absolute;z-index:2;left:4cqw;bottom:5cqw;color:#fff;display:grid;gap:1.4cqw;width:52%}
.dv-txt h5{font:italic 400 4.6cqw/.98 var(--serif);margin:0}
.dv-txt span{width:max-content;padding:1cqw 1.8cqw;border-radius:99px;background:#E8C9A0;color:#2a1a0c;font:600 1.15cqw var(--sans)}
.dv-ph{position:absolute;width:19%;aspect-ratio:9/19;border-radius:3.2cqw;background:#0b0b0b;padding:.8cqw;box-shadow:0 5cqw 9cqw -3cqw rgba(0,0,0,.8)}
.dv-ph1{left:5%;top:32%;transform:rotate(-5deg)}
.dv-ph2{right:6%;top:24%;transform:rotate(4deg)}
.dv-pw{width:100%;height:100%;border-radius:2.5cqw;overflow:hidden;background:#fff;color:#1b1712;font-family:var(--sans)}
.dv-lv-top{position:relative;height:38%;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4cqw}
.dv-lv-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dv-lv-top::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.dv-lv-top b,.dv-lv-top small{position:relative;z-index:1}
.dv-lv-top b{font:italic 400 2.1cqw/1 var(--serif)}.dv-lv-top small{font-size:.8cqw;opacity:.85;margin-top:.3cqw}
.dv-lv{list-style:none;margin:0;padding:1cqw 1.2cqw;display:grid;gap:.7cqw}
.dv-lv li{display:flex;align-items:center;gap:.8cqw;font:500 .95cqw var(--sans);padding:.8cqw .9cqw;border-radius:.9cqw;background:#F4F1EC}
.dv-lv li i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#0E2D4C;flex:none}
.dv-lv li em{margin-left:auto;font-style:normal;color:#8a7b6c;font-size:.8cqw}
.dv-lang{margin:0 1.2cqw;text-align:center;font:600 .8cqw var(--sans);letter-spacing:.12em;color:#0E2D4C;padding:.8cqw;border-radius:99px;background:#EEF4FA}
.dv-mn-h{display:flex;justify-content:space-between;align-items:baseline;padding:3cqw 1.3cqw 1cqw}
.dv-mn-h b{font:italic 400 2.2cqw var(--serif)}.dv-mn-h span{font:600 .8cqw var(--sans);color:#8a7b6c}
.dv-mn{display:grid;gap:.6cqw;padding:0 1.3cqw}
.dv-mn img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:1cqw;display:block}
.dv-mn p{display:flex;justify-content:space-between;font:500 .95cqw var(--sans);margin:0 0 .4cqw}.dv-mn p em{font-style:normal;color:#8a7b6c}
.dv-chip{position:absolute;display:inline-flex;align-items:center;gap:.8cqw;padding:1cqw 1.6cqw;border-radius:1.4cqw;background:#fff;color:#0B1622;font:500 1.25cqw var(--sans);box-shadow:0 2.4cqw 5cqw -1.6cqw rgba(0,0,0,.6);white-space:nowrap}
.dv-chip i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#2E9E6A}
.dv-c1{left:44%;bottom:8%}
.dv-c2{right:4%;top:8%;background:#5AA6E6;color:#fff}
.devs-wrap{position:relative}
.webband .wb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.webband .wb-txt{display:grid;gap:20px}
@media (max-width:860px){.webband .wb-grid{grid-template-columns:1fr}.devs{aspect-ratio:4/3.4}.dv-lap{left:6%;top:16%;width:76%}.dv-ph{width:24%}.dv-ph1{left:2%;top:44%}.dv-ph2{right:2%;top:36%}.dv-c1{left:30%;bottom:5%}}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tool{border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.tool-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.tool-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.tool:hover .tool-img img{transform:scale(1.05)}
.tool-chip{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.94);color:#0B1622;font:500 14px var(--sans);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.tool-chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--az)}
.tool-b{padding:clamp(22px,2.4vw,32px);display:grid;gap:10px}
.tool-b h3{font:500 clamp(22px,2vw,28px)/1.1 var(--sans);letter-spacing:-.03em}
.tool-b h3 em{font:italic 400 1.1em var(--serif)}
.tool-b p{color:var(--soft);font-size:16px}
@media (max-width:1000px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tools{grid-template-columns:1fr}}

/* ===== Univers : pile cinématique ===== */
.scard{--dim:0}
.scard::after{content:"";position:absolute;inset:0;background:#06121F;opacity:var(--dim);pointer-events:none;z-index:6;border-radius:inherit}
.scard .media .ph img{transform-origin:50% 50%;will-change:transform}
.srail{position:fixed;left:clamp(14px,1.6vw,28px);top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:14px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.srail.on{opacity:1}
.srail span{display:flex;align-items:center;gap:10px;font:500 12px var(--sans);letter-spacing:.08em;color:var(--soft)}
.srail i{width:16px;height:1.5px;background:currentColor;opacity:.5;transition:width .5s var(--ease),opacity .5s}
.srail b{font-weight:500;transition:color .4s}
.srail em{font-style:normal;opacity:0;transform:translateX(-6px);transition:opacity .5s,transform .5s var(--ease);white-space:nowrap}
.srail span.on{color:var(--ink)}.srail span.on i{width:34px;opacity:1;background:var(--az)}.srail span.on em{opacity:1;transform:none}
@media (max-width:1100px){.srail{display:none}}
/* ===== Réseaux sociaux, mobile : le téléphone reste visible ===== */
@media (max-width:900px){
 .wf-grid{display:grid;grid-template-columns:1fr;gap:0}
 .wf-left{display:contents}
 .wf-left > .eyebrow{order:1}
 .wf-left > h2{order:2;margin-bottom:22px}
 .wf-phone{order:3;position:sticky;top:calc(var(--head) + 8px);z-index:3;width:min(200px,50vw);justify-self:center;margin-bottom:8px;box-shadow:0 30px 60px -30px rgba(11,22,34,.55)}
 .wf-phone{box-shadow:0 0 0 100vw var(--surface-2);clip-path:inset(-10px -100vw -26px -100vw)}
 .wf-list{order:4;margin-top:14px;gap:14px;padding-bottom:30vh}
 .wf-list li{opacity:.35}
 .wf-list .bar{display:none}
}