/* Keubz Digital v2 · ambiance claire (gris chaud, noir, or), inspirée d'impeccable.style.
   Mouvement : jetons de durée/courbe, jamais « transition: all », garde prefers-reduced-motion en bas.
   Ce fichier sert à toutes les pages (accueil, services, tarifs, audit, mentions, 404). */

:root{
  --bg:#F3F2EE; --bg-2:#EAE8E2; --surface:#FFFFFF; --ink:#121110; --ink-2:#3A3732; --mut:#5F5B53; --mut-2:#8A857B;
  --line:rgba(18,17,16,.1); --line2:rgba(18,17,16,.18);
  --gold:#C9A45C; --gold-tag:#DDB868; --gold-l:#E8CF94; --gold-t:#7A5C22;   /* --gold-t : or lisible sur fond clair */
  --dark:#0E0C0A; --ivory:#EEE8DC;
  --f-disp:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-sans:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,4vw,56px); --hd:76px;
  --dur-quick:.25s; --dur-base:.5s; --dur-slow:.9s; --dur-xslow:1.4s;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.7,0,.2,1); --spring:cubic-bezier(.22,1.2,.36,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;scrollbar-color:#B9B3A6 var(--bg);scrollbar-width:thin}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--gold-t)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#C6C0B3;border-radius:10px;border:2px solid var(--bg)}
img,svg{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
em{font-style:normal;color:var(--gold-t)}
::selection{background:var(--gold-l);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:500;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;transition:top var(--dur-quick) var(--ease-out)}
.skip:focus{top:12px}
h2{font:300 clamp(40px,5.2vw,84px)/.98 var(--f-disp);letter-spacing:-.01em;text-wrap:balance}
h3{text-wrap:balance}
.lead{font-size:clamp(16px,1.2vw,19px);color:var(--mut);max-width:58ch}
/* plus de petit label au-dessus des titres : il passe en note discrète à droite du titre */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:18px 40px;margin-bottom:8vh;max-width:none}
.sec-head>h1,.sec-head>h2,.sec-head>.lead,.sec-head>p:not(.eyebrow){grid-column:1}
.eyebrow,.eyebrow.mono{grid-column:2;grid-row:1;justify-self:end;margin-top:.6em;color:var(--mut-2);font:400 14px/1.3 var(--f-sans);letter-spacing:0;text-transform:none;white-space:nowrap}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--gold);vertical-align:1px}

/* boutons */
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border:0;border-radius:999px;font:500 15px/1 var(--f-sans);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--spring)}
.pill:active,.btn:active{transform:scale(.97)}
.pill svg,.btn svg{width:18px;height:18px}
.pill-gold,.btn-gold,.pill-ink{background:var(--ink);color:#fff}
.pill-gold:hover,.btn-gold:hover,.pill-ink:hover{background:#2A2622}
.pill-ghost,.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.pill-ghost:hover,.btn-ghost:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.text-link{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px;text-decoration-thickness:2px;transition:text-underline-offset var(--dur-quick) var(--ease-out)}
.text-link:hover{text-underline-offset:9px}
.link-btn,.mini{background:none;border:0;padding:4px 0;color:var(--mut);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start;font-size:14px}

/* ---------- Lucian UX/UI : jetons mappés sur la palette Keubz claire ---------- */
/* Lucian UX/UI Prompt theme tokens · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/ */
.ux{
  --ux-page:var(--bg);--ux-surface:var(--surface);--ux-surface-2:#F5F3EE;--ux-surface-3:#ECE9E2;
  --ux-ink:var(--ink);--ux-ink-2:var(--mut);--ux-ink-3:var(--mut-2);
  --ux-line:var(--line);--ux-line-2:var(--line2);
  --ux-accent:var(--ink);--ux-accent-soft:rgba(201,164,92,.22);--ux-accent-ink:#fff;
  --ux-mint:#4E8A55;--ux-danger:#B4432F;
  --ux-shadow:rgba(40,30,10,.12);--ux-shadow-strong:rgba(40,30,10,.22);
  --ux-ease:var(--ease-out);--ux-spring:var(--spring);
  color:var(--ux-ink);-webkit-tap-highlight-color:transparent;overflow-wrap:break-word
}
.ux,.ux *,.ux *::before,.ux *::after{box-sizing:border-box}
:where(.ux) :is(button,input,textarea,select){font:inherit;color:inherit}
:where(.ux) button{cursor:pointer}
.ux :focus-visible{outline:2px solid var(--ux-accent);outline-offset:3px}
.ux [hidden]{display:none!important}

/* ---------- Chargement : la médaille frappe sur fond noir, puis le rideau se lève ---------- */
.loader{display:none}
.intro .loader{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--dark);animation:curtain var(--dur-xslow) var(--ease-io) 1.55s both}
.ld-medal{position:relative;width:clamp(120px,14vw,176px);aspect-ratio:1;animation:stamp .6s cubic-bezier(.7,0,.3,1.35) .15s both,medalOut .7s var(--ease-io) 1.35s forwards}
.ld-medal .md-wave{animation:wave 1s var(--ease-out) .66s}
.ld-line{position:absolute;left:50%;bottom:12vh;width:min(220px,50vw);height:1px;transform:translateX(-50%);background:rgba(238,232,220,.12);overflow:hidden}
.ld-line i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;animation:fill 1.25s var(--ease-io) .1s both}
.loader.skip{animation-delay:0s!important;animation-duration:.6s!important}
.loader.skip .ld-medal{animation:medalOut .4s var(--ease-io) forwards}
@keyframes curtain{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes stamp{0%{transform:scale(2.5);opacity:0}55%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes medalOut{to{transform:scale(.7) translateY(-30px);opacity:0;filter:blur(8px)}}
@keyframes wave{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes fill{from{transform:scaleX(0)}to{transform:none}}
.md-disc{width:100%;height:100%;border-radius:50%;padding:3.6%;background:conic-gradient(from 210deg,#6B4F1E,#F3DC9C 12%,#B8924A 25%,#5C4318 40%,#E8C983 55%,#9C7A3A 70%,#F6E2A8 82%,#6B4F1E);box-shadow:0 34px 70px -24px rgba(0,0,0,.75)}
.md-face{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 28%,#2B251C 0,#120F0B 55%,#070605 100%);box-shadow:inset 0 0 0 1px rgba(201,164,92,.55),inset 0 16px 34px rgba(0,0,0,.8)}
.md-face::before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid rgba(201,164,92,.42)}
.md-crown{width:28%;margin-bottom:3%}
.md-k{height:44%;width:auto;filter:drop-shadow(0 2px 1px rgba(0,0,0,.75))}
.md-gleam{position:absolute;inset:-10%;background:linear-gradient(105deg,transparent 42%,rgba(255,236,190,.25) 50%,transparent 58%);transform:translateX(-120%);animation:gleam 1.1s var(--ease-io) .75s both}
@keyframes gleam{to{transform:translateX(120%)}}
.md-wave{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);opacity:0;pointer-events:none}

/* ---------- Header ---------- */
.hd{position:fixed;z-index:100;left:0;right:0;top:0;height:var(--hd);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.hd.scrolled{border-bottom-color:var(--line)}
.hd-pill{display:flex;align-items:center;gap:22px;max-width:1360px;height:100%;margin:0 auto;padding:0 var(--gut)}
.intro .hd{animation:hdIn var(--dur-xslow) var(--ease-out) 2.05s both}
@keyframes hdIn{from{transform:translateY(-100%)}to{transform:none}}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:500 14px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.brand img{width:32px;height:32px;border-radius:8px}
.hd-links{display:flex;gap:2px;margin-left:auto}
.hd-links a{position:relative;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-size:15px;color:var(--mut);text-decoration:none;transition:color var(--dur-quick) var(--ease-out)}
.hd-links a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform var(--dur-base) var(--spring)}
.hd-links a:hover,.hd-links a.cur,.hd-links a[aria-current="page"]{color:var(--ink)}
.hd-links a.cur::before,.hd-links a[aria-current="page"]::before{transform:none}
.hd-r{display:flex;align-items:center;gap:8px;margin-left:auto}
.hd-links+.hd-r{margin-left:6px}
.langs{display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:500 11px/1 var(--f-mono);letter-spacing:.06em}
.langs a{padding:8px 9px;border-radius:999px;text-decoration:none;color:var(--mut);transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{background:var(--ink);color:#fff}
.hd-cta{height:42px;padding:0 18px;font-size:14px}

/* Lucian UX/UI Prompt #045 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#045
   Adapté : menu plein écran de la page (au lieu d'un cadre 340×520), deux colonnes, noir et or. */
.u045-ham{position:relative;width:44px;height:44px;flex:none;border:0;padding:0;border-radius:50%;background:rgba(18,17,16,.06);color:inherit;transition:transform var(--dur-base) var(--ux-spring),background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
body.menu-open .hd{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;color:#F4F0E8}
body.menu-open .hd .langs,body.menu-open .hd .hd-links,body.menu-open .hd .hd-cta{visibility:hidden}
body.menu-open .u045-ham{background:rgba(255,255,255,.14)}
.u045-ham:hover{transform:scale(1.06)}
.u045-ham:active{transform:scale(.9)}
.u045-ham i{position:absolute;left:50%;top:50%;width:18px;height:2px;margin:-1px 0 0 -9px;border-radius:2px;background:currentColor;transition:transform .55s var(--ux-spring),opacity var(--dur-quick) var(--ease-out),width .4s var(--ux-ease)}
.u045-ham i:nth-child(1){transform:translateY(-6px)}
.u045-ham i:nth-child(2){width:12px;margin-left:-3px}
.u045-ham i:nth-child(3){transform:translateY(6px)}
body.menu-open .u045-ham i:nth-child(1){transform:rotate(45deg)}
body.menu-open .u045-ham i:nth-child(2){opacity:0;transform:translateX(8px)}
body.menu-open .u045-ham i:nth-child(3){transform:rotate(-45deg)}
.u045-sheet{position:fixed;inset:0;z-index:90;padding:120px var(--gut) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;
  background:radial-gradient(120% 70% at 100% 0%,rgba(201,164,92,.2),transparent 60%),#0E0C0A;color:#F4F0E8;
  clip-path:circle(0 at var(--cx,95%) var(--cy,38px));visibility:hidden;transition:clip-path .7s var(--ux-ease),visibility 0s .7s}
body.menu-open .u045-sheet{clip-path:circle(150vmax at var(--cx,95%) var(--cy,38px));visibility:visible;transition:clip-path .8s var(--ux-ease),visibility 0s}
.u045-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:6vw;max-width:1240px;width:100%;margin:0 auto}
.u045-sheet small{color:rgba(244,240,232,.45)}
.u045-nav{margin:14px 0 0;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
.u045-ln{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font:300 clamp(34px,5vw,72px)/1 var(--f-disp);color:inherit;text-decoration:none;opacity:0;transform:translateY(26px);transition:opacity var(--dur-quick) var(--ease-out),transform .3s var(--ux-ease)}
.u045-ln em{font:500 12px var(--f-mono);color:rgba(244,240,232,.4)}
.u045-ln span{transition:transform var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.u045-ln:hover span,.u045-ln:focus-visible span{transform:translateX(14px);color:var(--gold-l)}
body.menu-open .u045-ln{opacity:1;transform:none;transition:opacity .4s var(--ux-ease) calc(.22s + var(--i) * 60ms),transform .7s var(--ux-spring) calc(.22s + var(--i) * 60ms)}
.u045-side{display:flex;flex-direction:column;gap:28px;padding-top:34px;opacity:0;transform:translateY(14px);transition:opacity var(--dur-quick) var(--ease-out),transform .3s var(--ease-out)}
.u045-side div{display:flex;flex-direction:column;gap:8px}
.u045-side a,.u045-side span{font-size:18px;text-decoration:none;color:#F4F0E8}
.u045-side a:hover{color:var(--gold-l)}
body.menu-open .u045-side{opacity:1;transform:none;transition:opacity .5s var(--ease-out) .45s,transform .7s var(--spring) .45s}
.u045-foot{margin:auto auto 0;padding-top:28px;width:100%;max-width:1240px;display:flex;opacity:0;transition:opacity var(--dur-quick) var(--ease-out)}
body.menu-open .u045-foot{opacity:1;transition:opacity .4s var(--ease-out) .5s}
.u045-foot a.go{height:52px;padding:0 24px;border-radius:999px;display:inline-flex;align-items:center;font-weight:500;text-decoration:none;background:var(--gold);color:var(--ink)}
main,.foot{transition:transform .7s var(--ux-ease),filter .7s var(--ux-ease)}
body.menu-open main,body.menu-open .foot{transform:scale(.94) translateY(14px);filter:blur(3px)}

/* ---------- Hero : avant/après interactif + titre ---------- */
.hero{position:relative;padding:calc(var(--hd) + 7vh) 0 9vh}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero-slogan{font:300 clamp(52px,6.4vw,110px)/.92 var(--f-disp);letter-spacing:-.01em}
.hero-slogan .ln{display:block}
.hero-slogan .w{display:inline-block;transition:color .8s var(--ease-out),transform 1s var(--ease-out),opacity 1s var(--ease-out)}
.split .hero-slogan .w{opacity:0;transform:translateY(.35em)}
.split .hero-slogan .w.on{opacity:1;transform:none}
.hero-slogan .gold em{color:var(--gold-t)}
.hero-h1{font:500 clamp(17px,1.4vw,21px)/1.35 var(--f-sans);letter-spacing:-.01em;margin-top:4px}
.hero-lead{margin-top:-6px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:6px}
.trust{display:flex;flex-direction:column;gap:8px;color:var(--mut);font-size:15px}
.trust li{display:flex;align-items:center;gap:10px}
.trust svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-t);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-zone{color:var(--mut-2);font-size:14px}
.split .hero-h1,.split .hero-lead,.split .hero-ctas,.split .trust,.split .hero-zone,.split .hero-demo{opacity:0;transform:translateY(18px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.split.lit .hero-h1,.split.lit .hero-lead,.split.lit .hero-ctas,.split.lit .trust,.split.lit .hero-zone,.split.lit .hero-demo{opacity:1;transform:none}
.split.lit .hero-lead{transition-delay:.1s}.split.lit .hero-ctas{transition-delay:.18s}.split.lit .trust{transition-delay:.26s}.split.lit .hero-zone{transition-delay:.32s}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:var(--mut-2);font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.scroll-hint i{position:relative;width:1px;height:26px;background:var(--line2);overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold-t);animation:drip 1.8s var(--ease-io) infinite}
@keyframes drip{to{top:100%}}

/* avant / après */
.ba{position:relative;--pos:50%}
.ba-stage{position:relative;width:calc(100% - 200px);aspect-ratio:1/1.08;max-height:72vh;margin-left:auto;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(60,40,10,.28);container-type:inline-size;touch-action:pan-y;user-select:none}
.ba-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s var(--dur-base)}
.ba-pane.is-on{opacity:1;visibility:visible;transition:opacity var(--dur-base) var(--ease-out)}
.ba-side{position:absolute;inset:0;display:grid;place-items:center;padding:7cqw}
.ba-before{background:#ECE7DE}
.ba-after{background:#F7F4EE;clip-path:inset(0 0 0 var(--pos))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--gold);pointer-events:none;z-index:3}
.ba-handle span{position:absolute;left:50%;top:50%;display:flex;gap:3px;align-items:center;justify-content:center;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--gold),0 10px 24px -8px rgba(60,40,10,.5);transition:transform var(--dur-base) var(--spring)}
.ba-handle span i{width:2px;height:12px;border-radius:2px;background:var(--gold-t)}
.ba.dragging .ba-handle span{transform:scale(1.12)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
.ba-range:focus-visible+.ba-lab,.ba:focus-within .ba-handle span{box-shadow:0 0 0 2px var(--ink),0 10px 24px -8px rgba(60,40,10,.5)}
.ba-lab{position:absolute;top:16px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--ink-2);font-size:10.5px;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
.ba-lab-b{left:16px}.ba-lab-a{right:16px;background:var(--ink);color:#fff}
.ba-tags{position:absolute;left:0;top:0;bottom:64px;width:0;pointer-events:none}
.ba-tags li{position:absolute;right:calc(100% + 14px);display:flex;align-items:center;gap:0;transform:translateY(-50%);white-space:nowrap;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.ba-tags li span{padding:6px 10px;border-radius:4px;background:var(--gold-tag);color:var(--ink);font:500 12.5px/1 var(--f-mono)}
.ba-tags li::after{content:"";width:var(--lw,30px);height:1px;background:var(--gold-t)}
.ba-tags li.off{opacity:0;transform:translate(-10px,-50%)}
.ba-tabs{display:flex;justify-content:center;gap:4px;width:max-content;margin:22px auto 0;padding:4px;border-radius:999px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.ba-tabs button{display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:500 15px var(--f-mono);color:var(--mut);cursor:pointer;transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.ba-tabs button i{width:7px;height:7px;border-radius:50%;background:var(--mut-2);transition:background-color var(--dur-base) var(--ease-out)}
.ba-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px -2px rgba(60,40,10,.2)}
.ba-tabs button[aria-selected="true"] i{background:var(--gold)}
.ba-tabs button::before{content:"/";margin-right:-4px;color:var(--mut-2)}

/* maquette Instagram (construite par site.js depuis KZ_MOCK) */
.ig{width:100%;max-width:min(100%,72cqw);font:400 2.4cqw/1.32 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#111;background:#fff;border-radius:3cqw;padding:3.4cqw;box-shadow:0 2cqw 6cqw -3cqw rgba(0,0,0,.25)}
.ig-user{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:3cqw;margin-bottom:2.4cqw}
.ig-head{display:flex;align-items:center;gap:4cqw;margin-bottom:2cqw}
.ig-ava{width:12cqw;height:12cqw;flex:none;border-radius:50%;display:grid;place-items:center}
.ig-stats{display:flex;flex:1;justify-content:space-around;text-align:center;font-size:2.3cqw}
.ig-stats b{display:block;font-size:3.1cqw}
.ig-bio{font-size:2.4cqw;margin-bottom:2.2cqw}
.ig-bio .nm{font-weight:700}
.ig-bio .cat{color:#737373}
.ig-bio .lk{color:#00376B;font-weight:600}
.ig-btns{display:flex;gap:1.2cqw;margin-bottom:2.4cqw}
.ig-btns span{flex:1;text-align:center;padding:1.4cqw 0;border-radius:1.6cqw;background:#EFEFEF;font-weight:600;font-size:2.3cqw}
.ig-btns .pri{background:#0095F6;color:#fff}
.ig-hl{display:flex;gap:2.4cqw;margin-bottom:2.4cqw;font-size:1.9cqw;text-align:center}
.ig-hl>div{display:flex;flex-direction:column;align-items:center;gap:.8cqw;width:10cqw}
.ig-hl .cv{width:10cqw;height:10cqw;border-radius:50%;padding:.5cqw;box-shadow:0 0 0 1px #DBDBDB}
.ig-hl .cv span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;font-size:3.6cqw}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5cqw}
.ig-grid>div:nth-child(n+4){display:none}
.ig-grid>div{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}

/* maquette fiche Google */
.gb{width:100%;max-width:62cqw;background:#fff;border-radius:3cqw;overflow:hidden;font:400 2.6cqw/1.4 Arial,Helvetica,sans-serif;color:#202124;box-shadow:0 2cqw 6cqw -3cqw rgba(0,0,0,.25)}
.gb-photo{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.6cqw;height:26cqw}
.gb-photo i:first-child{grid-row:1/3}
.ph1{background:radial-gradient(circle at 60% 35%,#F2D7B0,transparent 40%),linear-gradient(140deg,#C9A27A,#7E5A3C)}
.ph2{background:linear-gradient(140deg,#E9DCCB,#B79E83)}
.ph3{background:radial-gradient(circle at 40% 50%,#F7E4A6,transparent 45%),linear-gradient(140deg,#8C6A3E,#4A3420)}
.gb-empty{display:grid;place-items:center;grid-template-columns:1fr;background:#E8EAED;color:#80868B;font-size:2.4cqw}
.gb-body{display:flex;flex-direction:column;gap:.8cqw;padding:3cqw}
.gb-name{font:400 4cqw/1.2 Arial,sans-serif}
.gb-cat,.gb-muted{color:#70757A}
.gb-open{color:#188038;font-style:normal}
.gb-acts{display:flex;gap:1.4cqw;margin-top:1.4cqw}
.gb-acts span{padding:1.2cqw 2.4cqw;border-radius:99px;box-shadow:inset 0 0 0 1px #DADCE0;color:#1A73E8;font-weight:600;font-size:2.3cqw}
.gb-acts .hot{background:#1A73E8;color:#fff;box-shadow:none}
/* maquette web (ancienne / nouvelle) */
.wb{width:100%;max-width:70cqw;border-radius:2cqw;overflow:hidden;box-shadow:0 2cqw 6cqw -3cqw rgba(0,0,0,.25)}
.wb-bf{background:#FFFBE0;font:400 2.4cqw/1.3 "Comic Sans MS","Comic Neue",cursive;color:#333;padding:2cqw;display:flex;flex-direction:column;gap:1.6cqw}
.wb-top{background:#FF00C8;color:#FFFF00;padding:1.6cqw 2cqw;font-weight:700;font-size:3.6cqw;display:flex;justify-content:space-between}
.wb-blink{color:#00FF3C;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.wb-mar{background:#0000CC;color:#fff;padding:.6cqw 1cqw;white-space:nowrap;overflow:hidden;font-size:2.2cqw}
.wb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;height:16cqw}
.wb-grid i{background:repeating-linear-gradient(45deg,#C9C9C9 0 6px,#B5B5B5 6px 12px);border:2px outset #DDD}
.wb-tiny{font:1.6cqw/1.25 "Times New Roman",serif;color:#777}
.wb-tel{color:#00E;text-decoration:underline;font-size:2.4cqw}
.wb-af{background:#F7F1E8;color:#2A1F14;padding:3cqw 3.4cqw;display:flex;flex-direction:column;gap:2cqw;font:400 2.2cqw/1.4 var(--f-sans)}
.wb-nav{display:flex;align-items:center;gap:2.6cqw;color:#6B5A48;font-size:2cqw}
.wb-nav b{margin-right:auto;font:400 4cqw/1 var(--f-disp);color:#2A1F14;letter-spacing:.06em}
.wb-nav .cta{padding:.9cqw 2cqw;border-radius:99px;background:#2A1F14;color:#F7F1E8}
.wb-af small{font:500 1.7cqw var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#A86E1F}
.wb-h{font:300 7cqw/.95 var(--f-disp)}
.wb-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;height:16cqw}
.wb-prods i{border-radius:1.4cqw}
.p0{background:radial-gradient(circle at 60% 40%,#F3D9A8,transparent 45%),linear-gradient(140deg,#E7C48C,#B97A3C)}
.p1{background:radial-gradient(circle at 40% 45%,#FFF6E8,transparent 40%),linear-gradient(140deg,#E9DCCB,#C9AE8D)}
.p2{background:radial-gradient(circle at 55% 40%,#F7E4A6,transparent 42%),linear-gradient(140deg,#B8A15A,#6E5B2A)}
.wb-acts{display:flex;gap:1.4cqw;font-weight:600}
.wb-acts span{padding:1.2cqw 2.6cqw;border-radius:99px;box-shadow:inset 0 0 0 1px #2A1F14}
.wb-acts .hot{background:#C8892F;color:#fff;box-shadow:none}

/* Lucian UX/UI Prompt #002 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#002
   Adapté : lien d'ancre, taille au contenu (pas de cadre 340×200), noir et or. */
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.u002{--bg:#121110;--fg:#fff;--blob:#C9A45C;position:relative;display:inline-grid;place-items:center;text-decoration:none;border-radius:999px}
.u002:focus-visible{outline:none}
.u002-mag{display:block;transition:translate .9s var(--ux-spring)}
.u002-btn{position:relative;display:flex;align-items:center;gap:16px;height:64px;padding:0 8px 0 26px;border:0;border-radius:999px;background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;box-shadow:0 20px 36px -22px rgba(30,20,5,.6);transition:transform .6s var(--ux-spring),box-shadow .6s var(--ux-ease)}
.u002:hover .u002-btn{box-shadow:0 26px 46px -22px rgba(120,90,30,.55)}
.u002:active .u002-btn{transform:scale(.96)}
.u002:focus-visible .u002-btn{outline:2px solid var(--ink);outline-offset:5px}
.u002-fill{position:absolute;inset:0;z-index:-1;background:var(--blob);clip-path:circle(24px at calc(100% - 32px) 50%);transition:clip-path .8s var(--ux-ease)}
.u002:hover .u002-fill,.u002:focus-visible .u002-fill{clip-path:circle(160% at calc(100% - 32px) 50%)}
.u002-txt{position:relative;overflow:hidden;padding:5px 0;font-size:17px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:translate .7s var(--ux-spring),color var(--dur-base) var(--ux-ease)}
.u002:hover .u002-txt,.u002:focus-visible .u002-txt{color:var(--ink)}
.u002-txt span{display:block}
.u002-orb{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ink);overflow:hidden;flex:none;transition:translate .7s var(--ux-spring)}
.u002-orb svg{position:absolute;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.u002-orb svg:last-child{transform:translateX(-46px)}
.u002[data-state="go"] .u002-orb svg:first-child{animation:u002-out .55s var(--ux-ease) forwards}
.u002[data-state="go"] .u002-orb svg:last-child{animation:u002-in .6s var(--ux-spring) .28s forwards}
@keyframes u002-out{to{transform:translateX(46px)}}
@keyframes u002-in{to{transform:none}}
.u002-glow{display:none}

/* ---------- Bandeau de services (calme, droit) ---------- */
.ribbon{position:relative;padding:3vh 0 6vh;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)}
.rb-row{display:flex;white-space:nowrap}
.rb-track{display:flex;align-items:center;flex:none;gap:10px;padding-right:10px;will-change:transform}
.rb-track .it{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--ink-2)}
.rb-track .it::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- Scène 3D (panneau sombre) ---------- */
.anat{position:relative;height:760vh}
.anat-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:calc(var(--hd) + 10px) var(--gut) 18px}
.anat-card{position:relative;height:100%;overflow:hidden;border-radius:28px;background:#0D0B08;color:var(--ivory);box-shadow:0 40px 90px -50px rgba(30,20,5,.6)}
.anat-card{--mut:#A79E8F;--line:rgba(238,232,220,.1);--line2:rgba(238,232,220,.2)}
.anat-card em{color:var(--gold)}
.anat-bg{position:absolute;inset:-10%;pointer-events:none;opacity:.6}
.anat-bg i{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.anat-bg .b1{width:46vw;height:46vw;left:28%;top:18%;background:radial-gradient(circle,rgba(201,164,92,.75),transparent 68%);animation:drift1 18s ease-in-out infinite alternate}
.anat-bg .b2{width:34vw;height:34vw;left:2%;top:50%;background:radial-gradient(circle,rgba(138,90,30,.8),transparent 70%);animation:drift2 24s ease-in-out infinite alternate}
.anat-bg .b3{width:30vw;height:30vw;right:4%;top:6%;background:radial-gradient(circle,rgba(232,207,148,.45),transparent 70%);animation:drift2 20s ease-in-out infinite alternate-reverse}
.anat-bg .b4{width:40vw;height:26vw;right:10%;bottom:-4%;background:radial-gradient(circle,rgba(107,74,34,.8),transparent 70%);animation:drift1 26s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(6vw,4vw) scale(1.12)}}
@keyframes drift2{to{transform:translate(8vw,-6vw) scale(.92)}}
.bokeh{position:absolute;inset:0;pointer-events:none}
.bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(232,207,148,.55),rgba(201,164,92,.12) 60%,transparent 70%);will-change:transform}
.phone3d{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.links path{fill:none;stroke:rgba(232,207,148,.7);stroke-width:1;stroke-dasharray:var(--len,400);stroke-dashoffset:calc(var(--len,400) * (1 - var(--d,0)))}
.links circle{fill:var(--gold-l);filter:drop-shadow(0 0 6px rgba(232,207,148,.9))}
.anat-word{position:absolute;right:3vw;bottom:-5vw;font:300 30vw/.8 var(--f-disp);color:transparent;-webkit-text-stroke:1px rgba(201,164,92,.13);pointer-events:none;white-space:nowrap}
.anat-word span{display:block;transform:translateX(calc(var(--p,0) * -14%))}
.anat-copy{position:absolute;left:clamp(20px,3vw,48px);top:clamp(24px,5vh,56px);z-index:3;width:min(400px,34vw);display:flex;flex-direction:column;gap:14px}
.anat-copy .eyebrow{display:none}
.anat-copy h2{font-size:clamp(34px,3.6vw,60px);color:var(--ivory)}
.anat-copy h2 .ln{display:block}
.anat-p{color:var(--mut);font-size:15.5px;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.anat.compact .anat-p{opacity:0;transform:translateY(-8px)}
.state{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:4px}
.st-chip{position:relative;display:inline-flex;height:28px;padding:0 12px;align-items:center;border-radius:999px;background:rgba(238,232,220,.08);overflow:hidden;font-size:10px;box-shadow:inset 0 0 0 1px var(--line)}
.st-chip span{transition:transform var(--dur-base) var(--spring),opacity var(--dur-quick) var(--ease-out)}
.st-chip .b{position:absolute;left:12px;transform:translateY(120%);opacity:0;color:var(--gold-l)}
.anat.is-after .st-chip .a{transform:translateY(-120%);opacity:0}
.anat.is-after .st-chip .b{transform:none;opacity:1}
.state-word{position:relative;height:1.2em;overflow:hidden;font:300 28px/1.2 var(--f-disp);min-width:5em}
.state-word span{position:absolute;left:0;top:0;transition:transform .6s var(--spring),opacity .4s var(--ease-out)}
.state-word .b{transform:translateY(110%);opacity:0;color:var(--gold)}
.anat.is-after .state-word .a{transform:translateY(-110%);opacity:0}
.anat.is-after .state-word .b{transform:none;opacity:1}
.ticks{display:flex;gap:5px;flex-basis:100%}
.ticks i{width:22px;height:3px;border-radius:2px;background:var(--line2);transition:background-color .4s var(--ease-out)}
.ticks i.on{background:var(--gold)}
.anat .pill-ghost{color:var(--ivory);box-shadow:inset 0 0 0 1px var(--line2)}
.anat .pill-ghost:hover{background:var(--ivory);color:var(--ink)}
.rm-toggle{align-self:flex-start;height:40px;font-size:14px;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.anat.is-done .rm-toggle{opacity:1;pointer-events:auto}
.fict{position:absolute;left:clamp(20px,3vw,48px);bottom:20px;z-index:3;color:#7E766A;font-size:9.5px}
.notes{position:absolute;inset:0;z-index:4;pointer-events:none}
.note{position:absolute;left:0;top:0;display:grid;grid-template-columns:30px 1fr;gap:4px 8px;width:290px;padding:16px 18px;border-radius:18px;background:rgba(16,13,10,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:inset 0 0 0 1px rgba(201,164,92,.28),0 24px 40px -24px rgba(0,0,0,.8);
  opacity:0;filter:blur(8px);transform:translate3d(var(--x,0),var(--y,0),0) scale(.94);transition:opacity var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out),scale var(--dur-slow) var(--ease-out);will-change:transform}
.note.on{opacity:1;filter:none;transform:translate3d(var(--x,0),var(--y,0),0)}
.note.cur{box-shadow:inset 0 0 0 1px rgba(232,207,148,.7),0 24px 50px -20px rgba(201,164,92,.35)}
.note .ix{color:var(--gold);padding-top:3px}
.note h3{font:500 17px/1.3 var(--f-sans);color:var(--ivory)}
.note p{grid-column:2;font-size:14.5px;line-height:1.5;color:#C9C0B0}
.note{width:300px;padding:12px 16px}
.note:not(.cur) p{display:none}
.note:not(.cur){opacity:.6}
.note:not(.on){opacity:0}

/* ---------- Sections ---------- */
.sec{position:relative;padding:15vh 0}
.services{padding-top:12vh}
.services>.sec-head{margin-bottom:5vh}
/* services : onglets (site.js) ; sans JS les quatre blocs restent empilés */
.svc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.svc-tabs button{display:flex;align-items:center;gap:10px;height:46px;padding:0 18px;border:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:500 15px var(--f-sans);color:var(--mut);cursor:pointer;transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.svc-tabs button[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:none}
.svc-tabs button span{font:500 11px var(--f-mono);color:var(--gold)}
.services>.skill,.services>.svc-tabs{width:min(calc(100% - 2 * var(--gut)),calc(1360px - 2 * var(--gut)));margin-inline:auto}
.skill{position:relative;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line);overflow:hidden;margin-bottom:18px}
.has-tabs .skill{display:none;margin:0}
.has-tabs .skill.is-on{display:block;animation:svcIn var(--dur-slow) var(--ease-out)}
@keyframes svcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.skill-in{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:0;padding:0;max-width:none}
.sk-num{display:none}
.skill .ill{grid-column:1;grid-row:1;width:100%;height:100%;min-height:380px;padding:12%;background:linear-gradient(160deg,#F7F4EE,#ECE7DE);border-right:1px solid var(--line)}
.sk-body{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:20px;padding:clamp(26px,4vw,56px)}
.sk-body .k{color:var(--gold-t);font-size:13px}
.sk-body h3{font:300 clamp(34px,3.6vw,58px)/1 var(--f-disp)}
.sk-body ul{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.sk-body li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.sk-body li::before{content:"";flex:none;width:12px;height:1px;margin-top:.8em;background:var(--gold-t)}
.sk-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ill .s,.ill .i{fill:none;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.ill .s{stroke:var(--ink)}
.ill .i{stroke:var(--gold-t)}
.ill .g{fill:var(--gold)}
.zone-link{margin-top:22px;padding:0}
.zone-link a{color:var(--mut);font-size:15px}
.zone-link a:hover{color:var(--ink)}

.words .w{transition:opacity var(--dur-quick) var(--ease-out)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2)}
.why-grid article{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding:34px 34px 34px 0;border-bottom:1px solid var(--line)}
.why-grid article:nth-child(odd){border-right:1px solid var(--line);padding-right:44px}
.why-grid article:nth-child(even){padding-left:44px}
.why-grid .ix{display:none}
.why-grid h3{grid-column:1/-1;display:flex;align-items:center;gap:14px;font:400 30px/1.05 var(--f-disp)}
.why-grid h3 svg{width:28px;height:28px;flex:none;color:var(--gold-t)}
.why-grid p{grid-column:1/-1;color:var(--mut);font-size:16px;max-width:52ch}

.audit-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px 40px;padding:28px 34px;border-radius:22px;margin-bottom:18px;background:var(--ink);color:#fff}
.audit-strip .pz{font:300 clamp(60px,6vw,96px)/.85 var(--f-disp);color:var(--gold)}
.audit-strip h3{font:400 32px/1 var(--f-disp)}
.audit-strip p{color:#BDB6A8;font-size:15.5px;margin-top:6px;max-width:62ch}
.audit-strip .pill-gold,.audit-strip .btn-gold{background:var(--gold);color:var(--ink)}
.audit-strip .pill-gold:hover{background:var(--gold-l)}
.psum{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.psum-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:290px;padding:28px;border-right:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background-color var(--dur-base) var(--ease-out)}
.psum-card:last-child{border-right:0}
.psum-card:hover,.psum-card:focus-visible{background:#FBF7EE}
.psum-k{color:var(--gold-t);font-size:13px}
.psum-p{font:300 54px/1 var(--f-disp)}
.psum-p small{font:400 14px var(--f-sans);color:var(--mut)}
.psum-d{color:var(--mut);font-size:15px;flex:1}
.psum-l{font-weight:500;font-size:14.5px;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px}
.psum-all{margin-top:24px;display:flex;justify-content:center}
.fine{margin-top:22px;color:var(--mut-2);font-size:13.5px;max-width:84ch;margin-inline:auto;text-align:center}

.proc-wrap{position:relative}
.proc-line{position:absolute;left:22px;right:22px;top:22px;height:1px;background:var(--line2)}
.proc-line i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--pl,0))}
.proc{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.proc li{display:flex;flex-direction:column;gap:12px}
.proc .dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line2);color:var(--mut);font-size:13px;transition:background-color .4s var(--ease-out),color .4s var(--ease-out),transform .6s var(--spring),box-shadow .4s var(--ease-out)}
.proc li.on .dot{background:var(--ink);color:var(--gold);box-shadow:none;transform:scale(1.08)}
.proc h3{font:400 28px/1 var(--f-disp);margin-top:8px}
.proc p{color:var(--mut);font-size:15px}

.audit-in{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:6vw;align-items:start}
.audit-in>div:first-child{display:flex;flex-direction:column;gap:22px;position:sticky;top:120px}
.audit-in .eyebrow{justify-self:start;grid-column:auto;margin:0}
.audit-get{display:flex;flex-direction:column;gap:0;margin-top:10px;border-top:1px solid var(--line)}
.audit-get li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.audit-get svg{width:28px;height:28px;flex:none;color:var(--gold-t)}
.audit-get b{display:block;font-weight:500}
.audit-get span{color:var(--mut);font-size:15px}
.form{display:grid;gap:16px;padding:clamp(22px,3vw,40px);border-radius:26px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 40px 80px -46px rgba(60,40,10,.35)}
.form h3{font:300 40px/1 var(--f-disp);margin-bottom:6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.submit{justify-self:start;height:56px;padding:0 26px}
.note-s{font-size:13px;color:var(--mut)}
.note-s.err{color:var(--ux-danger)}
.note-s.err:empty{display:none}
.done pre{white-space:pre-wrap;font:13px/1.5 var(--f-mono);padding:16px;border-radius:14px;background:#F5F3EE;max-height:220px;overflow:auto}
.done pre[hidden]{display:none}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.copyline{display:flex;align-items:center;flex-wrap:wrap;gap:10px}

/* Lucian UX/UI Prompt #025 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#025
   Adapté : largeur fluide, zone de texte, placeholder visible seulement au focus, couleurs Keubz. */
.u025-f{position:relative;min-width:0}
.u025-box{position:relative;height:62px}
.u025-box.ta{height:132px}
.u025-in{position:absolute;inset:0;width:100%;height:100%;padding:18px 48px 0 18px;border:0;outline:0;border-radius:16px;background:var(--ux-surface);font-size:16.5px;color:var(--ux-ink);letter-spacing:-.01em;resize:none}
textarea.u025-in{padding-top:30px}
.u025-in::placeholder{color:var(--ux-ink-3);opacity:0;transition:opacity .3s var(--ease-out)}
.u025-f.is-focus .u025-in::placeholder{opacity:1}
.u025-line{position:absolute;inset:0;display:flex;pointer-events:none;border-radius:16px}
.u025-line i{display:block;border:1.5px solid var(--ux-line-2);transition:border-color .3s var(--ux-ease)}
.u025-line .l{width:14px;border-right:0;border-radius:16px 0 0 16px}
.u025-line .g{width:var(--gap,0px);border-left:0;border-right:0;transition:width .35s var(--ux-ease),border-color .3s var(--ux-ease)}
.u025-line .r{flex:1;border-left:0;border-radius:0 16px 16px 0}
.u025-f.is-up .u025-line .g{border-top-color:transparent!important}
.u025-f.is-focus .u025-line i{border-color:var(--ux-accent);border-width:2px}
.u025-f.is-bad .u025-line i{border-color:var(--ux-danger)}
.u025-f.is-ok .u025-line i{border-color:var(--ux-mint)}
.u025-lab{position:absolute;left:18px;top:21px;padding:0 4px;margin-left:-4px;font-size:16px;color:var(--ux-ink-3);background:var(--ux-surface);transform-origin:0 0;pointer-events:none;white-space:nowrap;transition:transform .35s var(--ux-ease),color .3s var(--ux-ease)}
.u025-f.is-up .u025-lab{transform:translate(0,-30px) scale(.8);color:var(--ux-ink-2);font-weight:500}
.u025-f.is-focus .u025-lab{color:var(--ux-accent)}
.u025-f.is-bad .u025-lab{color:var(--ux-danger)}
.u025-f.is-up input.u025-in{padding-top:0}
.u025-ok{position:absolute;right:16px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;display:grid;place-items:center;background:var(--ux-mint);color:#fff;transform:scale(0);transition:transform .45s var(--ux-spring)}
.u025-ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.u025-ok path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .35s var(--ux-ease) .15s}
.u025-f.is-ok .u025-ok{transform:none}
.u025-f.is-ok .u025-ok path{stroke-dashoffset:0}
.u025-f.is-shake .u025-box{animation:u025-shake .42s var(--ux-ease)}
@keyframes u025-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.u025-help{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ux-ease)}
.u025-help>span{overflow:hidden;min-height:0;display:flex;align-items:center;gap:6px;padding-left:4px;font-size:13px;font-weight:500;color:var(--ux-danger)}
.u025-f.is-bad .u025-help{grid-template-rows:1fr}
.u025-f.is-bad .u025-help>span{padding-top:8px}

/* Lucian UX/UI Prompt #031 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#031
   Adapté : branché sur le <select> natif du formulaire (caché), sans drapeaux ni carte autour, hauteur 62px. */
.u031-f{position:relative;min-width:0}
.u031-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:0;bottom:0}
.u031-lab{display:block;margin:0 2px 7px;font-size:12.5px;font-weight:500;color:var(--ux-ink-3)}
.u031-btn{display:flex;align-items:center;gap:12px;width:100%;height:62px;padding:0 14px 0 18px;border:0;border-radius:16px;background:var(--ux-surface-2);color:var(--ux-ink);text-align:left;box-shadow:inset 0 0 0 1.5px var(--ux-line);transition:box-shadow .25s var(--ux-ease),background-color .25s var(--ux-ease)}
.u031-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ux-line-2)}
.u031-btn:focus-visible,.u031-f.is-open .u031-btn{outline:0;background:var(--ux-surface);box-shadow:inset 0 0 0 2px var(--ux-accent),0 0 0 5px var(--ux-accent-soft)}
.u031-v{flex:1;min-width:0}
.u031-v b{display:block;font-size:15.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u031-car{width:18px;height:18px;flex:none;fill:none;stroke:var(--ux-ink-3);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ux-spring)}
.u031-btn[aria-expanded="true"] .u031-car{transform:rotate(180deg)}
.u031-list{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;border-radius:18px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line-2),0 28px 56px -24px var(--ux-shadow-strong);transform-origin:50% 0;outline:none;opacity:0;transform:translateY(-6px) scaleY(.92);visibility:hidden;transition:opacity .2s var(--ux-ease),transform .4s var(--ux-spring),visibility 0s .4s}
.u031-list.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .2s var(--ux-ease),transform .45s var(--ux-spring)}
.u031-hl{position:absolute;left:6px;right:6px;top:6px;height:46px;border-radius:12px;background:var(--ux-surface-2);transform:translateY(calc(var(--i,0) * 46px));transition:transform .35s var(--ux-spring);pointer-events:none}
.u031-o{position:relative;display:flex;align-items:center;gap:12px;height:46px;padding:0 10px;border-radius:12px;cursor:pointer;font-size:14.5px}
.u031-ck{margin-left:auto;width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-t);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .2s var(--ux-ease),transform .4s var(--ux-spring)}
.u031-o[aria-selected="true"] .u031-ck{opacity:1;transform:none}

/* Lucian UX/UI Prompt #008 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#008
   Adapté : bouton « Copier » avec texte ; l'icône se redessine en coche, le texte devient « Copiado ». */
.copy-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 34px;border:0;border-radius:10px;background:rgba(18,17,16,.06);color:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .35s var(--ease-out),color .35s var(--ease-out),transform .45s var(--spring)}
.copy-btn:hover{background:rgba(18,17,16,.1)}
.copy-btn:active{transform:scale(.9)}
.copy-btn svg{position:absolute;left:10px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s var(--ease-out),transform var(--dur-base) var(--spring)}
.copy-btn .ok{opacity:0;transform:scale(.4) rotate(-30deg)}
.copy-btn .ok path{stroke-width:2.6;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ease-out) .1s}
.copy-btn.is-copied{background:var(--gold);color:var(--ink)}
.copy-btn.is-copied .cp{opacity:0;transform:scale(.4) rotate(30deg)}
.copy-btn.is-copied .ok{opacity:1;transform:none}
.copy-btn.is-copied .ok path{stroke-dashoffset:0}
.foot .copy-btn{background:rgba(255,255,255,.08)}
.foot .copy-btn:hover{background:rgba(255,255,255,.14)}

.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;align-items:start}
.faq-in .sec-head{position:sticky;top:120px;grid-template-columns:1fr}
.faq-in .eyebrow{grid-column:1;grid-row:auto;justify-self:start;margin:0}
/* Lucian UX/UI Prompt #044 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#044
   Adapté : largeur et hauteur fluides (6 questions), textes plus grands, pas de lien dans les réponses. */
.u044{position:relative;width:100%;display:flex;flex-direction:column;gap:8px}
.u044-it{position:relative;border-radius:20px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);transition:box-shadow var(--dur-base) var(--ux-ease),transform var(--dur-base) var(--ux-spring)}
.u044-it.open{box-shadow:0 0 0 1px var(--ux-line-2),0 22px 40px -26px var(--ux-shadow-strong);transform:translateY(-2px)}
.u044-q{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 16px 12px 20px;border:0;border-radius:20px;background:none;font-size:17px;font-weight:500;letter-spacing:-.01em;color:var(--ux-ink);text-align:left}
.u044-n{font:500 12px var(--f-mono);color:var(--ux-ink-3);transition:color .3s var(--ux-ease)}
.u044-it.open .u044-n{color:var(--gold-t)}
.u044-t{flex:1}
.u044-pm{position:relative;width:32px;height:32px;flex:none;border-radius:50%;background:var(--ux-surface-2);transition:background-color .35s var(--ux-ease),transform .45s var(--ux-spring)}
.u044-q:hover .u044-pm{transform:scale(1.1)}
.u044-pm::before,.u044-pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ux-ink);transition:transform var(--dur-base) var(--ux-spring),background-color .3s var(--ux-ease)}
.u044-pm::after{transform:rotate(90deg)}
.u044-it.open .u044-pm{background:var(--ink)}
.u044-it.open .u044-pm::before,.u044-it.open .u044-pm::after{background:var(--gold)}
.u044-it.open .u044-pm::after{transform:rotate(180deg)}
.u044-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ux-ease)}
.u044-it.open .u044-body{grid-template-rows:1fr}
.u044-body>div{overflow:hidden;min-height:0}
.u044-a{padding:0 22px 20px 52px;opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring)}
.u044-it.open .u044-a{opacity:1;transform:none;transition-delay:.12s}
.u044-a p,.u044-a{font-size:15.5px;line-height:1.62;color:var(--ux-ink-2)}

.final{position:relative;padding:18vh 0;text-align:center;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:50%;width:60vw;height:40vw;margin:-20vw 0 0 -30vw;border-radius:50%;background:radial-gradient(circle,rgba(201,164,92,.22),transparent 65%);filter:blur(60px);pointer-events:none}
.final .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px}
.final h2{font-size:clamp(48px,7vw,120px);max-width:14ch}
.final .lead{margin:0 auto}
.final .ctas,.final .hero-ctas{justify-content:center}
.final .logo-sq{display:none}

.foot{position:relative;padding:12vh 0 30px;font-size:15px;background:var(--dark);color:var(--ivory)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(238,232,220,.1)}
.foot .brand span{color:var(--ivory)!important}
.foot-grid p{color:#A79E8F;margin-top:14px;max-width:36ch}
.foot-h{color:var(--gold);margin-bottom:14px;font:500 11.5px var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.foot ul{display:flex;flex-direction:column;gap:8px}
.foot ul a{text-decoration:none;color:#A79E8F;transition:color var(--dur-quick) var(--ease-out)}
.foot ul a:hover{color:var(--gold-l)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;color:#7E766A;font-size:13px}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--gold-l)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:80;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.wa-float svg{width:26px;height:26px;fill:currentColor}
.wa-float[hidden]{display:none}

/* ---------- Apparitions au scroll ---------- */
.fx [data-rv]{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease-out),transform 1.1s var(--ease-out)}
.fx [data-rv].in{opacity:1;transform:none}
.fx .ill .s,.fx .ill .i{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out)}
.fx .ill .i{transition-delay:.35s}
.fx .ill.in .s,.fx .ill.in .i{stroke-dashoffset:0}
html:not(.js) .ill .s,html:not(.js) .ill .i{stroke-dashoffset:0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .hd-links{display:none}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{order:-1}
  .ba{max-width:560px;margin:0 auto;width:100%}
  .ba-stage{margin:0 auto}
  .ba-tags{display:none}
  .ba-stage{width:100%}
  .psum{grid-template-columns:1fr 1fr}
  .psum-card:nth-child(2){border-right:0}
  .psum-card:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .proc{grid-template-columns:1fr;gap:0}
  .proc-line{left:21px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .proc-line i{transform-origin:50% 0;transform:scaleY(var(--pl,0))}
  .proc li{display:grid;grid-template-columns:44px 1fr;column-gap:22px;padding-bottom:34px}
  .proc li h3{margin-top:6px}
  .proc li p{grid-column:2}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--hd:64px}
  .hd-cta{display:none}
  .sec-head{grid-template-columns:1fr}
  .eyebrow{grid-column:1;grid-row:auto;justify-self:start;order:-1;margin:0}
  .anat{height:640vh}
  .anat-pin{padding:calc(var(--hd) + 6px) 10px 10px}
  .anat-copy{left:18px;right:18px;top:18px;width:auto;gap:8px}
  .anat-p{display:none}
  .anat-copy h2{font-size:clamp(30px,8vw,40px)}
  .state-word{font-size:22px}
  .anat .notes{inset:auto 0 0 0;height:0}
  .anat .note{left:12px!important;right:12px;top:auto!important;bottom:calc(46px + env(safe-area-inset-bottom));width:auto;transform:translateY(16px)!important}
  .anat .note.on{opacity:0;filter:blur(8px)}
  .anat .note.cur{opacity:1;filter:none;transform:none!important}
  .anat .links{display:none}
  .anat-word{font-size:56vw;bottom:-12vw}
  .skill-in{grid-template-columns:1fr}
  .skill .ill{grid-column:1;grid-row:1;min-height:0;height:220px;padding:28px;border-right:0;border-bottom:1px solid var(--line)}
  .sk-body{grid-column:1;grid-row:2}
  .sk-body ul{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-grid article,.why-grid article:nth-child(odd),.why-grid article:nth-child(even){padding:28px 0;border-right:0}
  .audit-strip{grid-template-columns:1fr;padding:26px}
  .audit-in,.faq-in{grid-template-columns:1fr}
  .audit-in>div:first-child,.faq-in .sec-head{position:static}
  .u045-grid{grid-template-columns:1fr;gap:10px}
}
@media (max-width:600px){
  body{font-size:16px}
  .brand span{display:none}
  .langs a{padding:7px 7px}
  .hero{padding-top:calc(var(--hd) + 32px)}
  .hero-slogan{font-size:clamp(50px,15vw,72px)}
  .ba-tabs button{padding:0 12px;font-size:13.5px}
  .psum{grid-template-columns:1fr}
  .psum-card{min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .row2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .u002-btn{height:58px;padding-left:22px;gap:12px}
  .u002-txt{font-size:16px}
  .u002-orb{width:44px;height:44px}
  .u002-fill{clip-path:circle(22px at calc(100% - 30px) 50%)}
  .sec{padding:11vh 0}
}

/* ---------- Mouvement réduit : les scènes pilotées par le scroll restent ; plus d'intro, de boucles ni de lissage ---------- */
.calm .anat-bg i,.calm .scroll-hint i::after,.calm .wb-blink{animation:none}
/* (règle déplacée plus bas : bloc « mode calme » complet) */
/* sans JavaScript ou sans WebGL : la scène devient une liste lisible */
html:not(.js) .anat,.anat.no3d{height:auto}
html:not(.js) .anat-pin,.anat.no3d .anat-pin{position:relative;height:auto}
html:not(.js) .anat-copy,.anat.no3d .anat-copy{position:relative;left:auto;top:auto;width:auto;max-width:560px;padding:40px 30px 24px}
html:not(.js) .phone3d,.anat.no3d .phone3d,.anat.no3d .links{display:none}
html:not(.js) .notes,.anat.no3d .notes{position:relative;inset:auto;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:0 30px 30px}
html:not(.js) .note,.anat.no3d .note{position:relative;left:auto!important;top:auto!important;bottom:auto;opacity:1;filter:none;transform:none!important;width:auto}
html:not(.js) .fict,.anat.no3d .fict{position:relative;left:auto;bottom:auto;padding:0 30px 30px}

/* =================== Pages intérieures (services, tarifs, audit, mentions, 404, Vinaròs) =================== */
.page-top{padding:calc(var(--hd) + 6vh) 0 9vh}
.pt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,90px);align-items:center}
.page-top .sec-head,.pt-copy .sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin:0}
.page-top h1,.prices>.wrap>.sec-head h1,.audit h1{font:300 clamp(50px,6.2vw,108px)/.93 var(--f-disp);letter-spacing:-.01em;text-wrap:balance}
.page-top .eyebrow,.prices>.wrap>.sec-head .eyebrow{order:3;margin:0;justify-self:auto;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:14px}
.page-top .lead{order:2}.page-top .zone-note{order:4}.page-top .hero-ctas{order:5}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;font-size:13.5px;color:var(--mut-2)}
.crumbs a{text-decoration:none;color:var(--mut)}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.zone-note{color:var(--mut-2);font-size:14px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pt-art{position:relative}
.art-fict{margin-top:14px;text-align:right;color:var(--mut-2);font-size:12px}
.legal-page{max-width:72ch;display:flex;flex-direction:column;gap:14px}
.legal-page h2{font:400 34px/1 var(--f-disp);margin-top:26px}
.legal-page p{color:var(--ink-2)}
.check{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line2)}
.check li{position:relative;padding:18px 0 18px 34px;border-bottom:1px solid var(--line);font-size:17px}
.check li::before{content:"";position:absolute;left:4px;top:24px;width:14px;height:7px;border-left:2px solid var(--gold-t);border-bottom:2px solid var(--gold-t);transform:rotate(-45deg)}
.steps-sec .steps{counter-reset:st;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 34px;border-top:1px solid var(--line2)}
.steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:22px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(st);grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--gold);font:500 13px var(--f-mono)}
.steps b{font:400 26px/1.05 var(--f-disp);font-weight:400}
.steps span{color:var(--mut);font-size:15px}
.steps-sec .fict{position:static;margin-top:18px;color:var(--mut-2);font-size:12px}
.rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px;border-top:1px solid var(--line2)}
.rev-item{padding:26px 0;border-bottom:1px solid var(--line)}
.rev-item h3{font:400 28px/1 var(--f-disp);margin-bottom:10px}
.rev-item p{color:var(--mut);font-size:15px}
.why-grid article h3 span{display:block}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case-col{padding:28px;border-radius:22px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.case-col h3{font:400 32px/1 var(--f-disp);margin-bottom:14px}
.case-col li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.case-col.after{background:var(--ink);color:#fff;box-shadow:none}
.case-col.after h3{color:var(--gold)}
.case-col.after li{color:#D9D2C4;border-color:rgba(255,255,255,.1)}
.sec-head .fict{grid-column:1;color:var(--mut-2);font-size:12px}
/* offres */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.offer{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.offer.feat{box-shadow:0 0 0 2px var(--ink),0 30px 60px -40px rgba(60,40,10,.4)}
.offer .flag{position:absolute;top:-13px;left:26px;padding:5px 12px;border-radius:999px;background:var(--gold-tag);color:var(--ink);font:500 12px var(--f-mono)}
.offer .for{color:var(--gold-t);font-size:14px;font-weight:500}
.offer h3,.offer .as-h3{font:400 36px/1 var(--f-disp)}
.price{font:300 64px/1 var(--f-disp);letter-spacing:-.01em}
.price small{font:400 15px var(--f-sans);color:var(--mut)}
.time{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:14px}
.time svg{width:18px;height:18px}
.offer ul{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.offer li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--line);font-size:15px}
.offer li::before{content:"";position:absolute;left:2px;top:1.15em;width:10px;height:1px;background:var(--gold-t)}
.offer .btn,.offer .pill{margin-top:auto;align-self:flex-start}
.offer .btn-gold{background:var(--ink);color:#fff}
.inc-box{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:24px;background:var(--ink);color:#fff}
.inc-t{font:400 34px/1 var(--f-disp);color:var(--gold)}
.inc-list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#E2DBCD}
.inc-list svg{width:20px;height:20px;flex:none;color:var(--gold)}
.offers>.mini{display:none}
.monthly{display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:30px;margin-top:14px;padding:30px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.monthly .eyebrow{grid-column:auto;justify-self:start;margin:0}
.monthly .as-h3{font:400 38px/1 var(--f-disp)}
.monthly p{color:var(--mut);margin-top:8px}
.monthly ul li{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.extras{margin-top:56px}
.extras .eyebrow{grid-column:auto;justify-self:start;margin:0 0 8px}
.extras h3,.extras .as-h3{font:300 clamp(36px,3.6vw,56px)/1 var(--f-disp);margin-bottom:22px}
.extras-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line2)}
.extra{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line)}
.extra b{font-weight:500}
.extra em{color:var(--gold-t);font-style:normal;font-weight:500;white-space:nowrap}
.extra span{grid-column:1/-1;color:var(--mut);font-size:15px}
.extras-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.xcard{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.xc-name{font:500 18px var(--f-sans)}
.xc-price{font:300 42px/1 var(--f-disp)}
.xc-price small{font:400 15px var(--f-sans);color:var(--mut)}
.xc-desc{color:var(--mut);font-size:15px}
.xc-btn{align-self:flex-start;margin-top:auto}
.svc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;border-top:1px solid var(--line2)}
.svc-links a{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.svc-links b{font:400 34px/1 var(--f-disp);font-weight:400}
.svc-links span{color:var(--mut);font-size:15px}
.svc-links i{font-style:normal;font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:5px;margin-top:6px}
.svc-links a:hover b{color:var(--gold-t)}
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.skills-grid .skill{display:block}
/* FAQ des pages intérieures (details natif, même allure que l'accordéon de l'accueil) */
.faq{display:flex;flex-direction:column;gap:8px;max-width:980px}
.faq details{border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line);transition:box-shadow var(--dur-base) var(--ease-out)}
.faq details[open]{box-shadow:0 0 0 1px var(--line2),0 22px 40px -26px rgba(40,30,10,.25)}
.faq summary{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 18px 12px 22px;list-style:none;cursor:pointer;font-size:17px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:32px;height:32px;flex:none;margin-left:auto;border-radius:50%;background:#F5F3EE;transition:background-color .35s var(--ease-out)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--ink);transition:transform var(--dur-base) var(--spring),background-color .3s var(--ease-out)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i{background:var(--ink)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:var(--gold)}
.faq details[open] summary i::after{transform:rotate(180deg)}
.faq .ans{padding:0 22px 20px;color:var(--mut);font-size:15.5px;line-height:1.62}
/* page audit */
.audit>.wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:6vw;align-items:start}
.audit>.wrap>div:first-child{display:flex;flex-direction:column;gap:20px}
.audit>.wrap .eyebrow{grid-column:auto;justify-self:start;margin:0}
.audit h1{margin-top:4px!important}
.form .field{display:flex;flex-direction:column;gap:6px}
.form .field label{font-size:13px;color:var(--mut)}
.form .field :is(input,textarea,select){height:56px;padding:0 16px;border:1.5px solid var(--line2);border-radius:14px;background:#fff;font:inherit;color:var(--ink)}
.form .field textarea{height:120px;padding:14px 16px;resize:vertical}
.form .as-h3{font:300 40px/1 var(--f-disp)}
.am-card{padding:22px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(60,40,10,.35)}
.am-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.am-t{font:400 28px/1 var(--f-disp)}
.am-lab{color:var(--mut-2);font-size:12px}
.am-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;container-type:inline-size}
.am-shot{position:relative;border-radius:16px;overflow:hidden;background:#ECE7DE;padding:14px;container-type:inline-size}
.am-shot .ig{max-width:100%;font-size:4.6cqw;box-shadow:none}
.am-shot .ig *{font-size:inherit}
.am-pin{position:absolute;left:8px;top:var(--y);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold-tag);color:var(--ink);font:600 12px var(--f-mono)}
.am-notes{position:relative;display:flex;flex-direction:column;gap:12px}
.am-mk{display:flex;align-items:center;gap:10px}
.am-ln{display:none}
.am-dot{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--gold);font:600 12px var(--f-mono)}
.am-tx{font-size:15px}
.am-stamp{margin-top:16px;display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--gold);font:500 12px var(--f-mono)}
/* carte de restaurant (avant/après « print ») */
.pm{width:100%;max-width:56cqw;padding:5cqw;display:flex;flex-direction:column;gap:2cqw;box-shadow:0 2cqw 6cqw -3cqw rgba(0,0,0,.3)}
.pm-bf{background:#FFFFFF;font:400 2.6cqw/1.4 "Comic Sans MS","Comic Neue",cursive;color:#1f3fff;position:relative;border:3px double #888}
.pm-bf b{font:700 3.6cqw "Comic Sans MS",cursive;color:#d00;text-align:center}
.pm-bf span{font-family:"Courier New",monospace;font-size:2.4cqw;color:#333}
.pm-clip{width:12cqw;height:12cqw;align-self:flex-end;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff7 0 18%,transparent 19%),radial-gradient(circle,#ffb300 0 55%,#e65100 56% 70%,transparent 71%)}
.pm-af{background:#1B140D;color:#F2EADC;font:400 2.4cqw/1.4 var(--f-sans)}
.pm-af small{font:500 1.8cqw var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pm-af b{font:300 9cqw/1 var(--f-disp);font-weight:300;margin-bottom:2cqw}
.pm-af span{display:flex;align-items:baseline;gap:1.4cqw;font-size:2.6cqw}
.pm-af span em{color:#F2EADC;font-style:normal}
.pm-af span i{flex:1;border-bottom:1px dotted rgba(242,234,220,.35)}
.pm-af p{margin-top:2cqw;color:#B9AC98;font-size:2.2cqw}
.final .hero-ctas .btn-gold,.final .hero-ctas .pill-gold{height:58px;padding:0 26px}

@media (max-width:1100px){
  .pt-grid{grid-template-columns:1fr;gap:44px}
  .pt-art{max-width:560px;width:100%;margin:0 auto}
  .rev-grid{grid-template-columns:1fr 1fr}
  .offers{grid-template-columns:1fr 1fr}
  .monthly{grid-template-columns:1fr}
  .audit>.wrap{grid-template-columns:1fr}
}
@media (max-width:900px){
  .check,.extras-list,.svc-links,.case-grid,.skills-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  .rev-grid,.offers{grid-template-columns:1fr}
  .am-body{grid-template-columns:1fr}
}

/* =====================================================================
   Deuxième moitié : sombre. La carte de la scène 3D s'ouvre en plein écran (--end),
   puis tout ce qui suit reste noir et or, avec des titres en Fraunces (comme la v1) et une poussière dorée.
   ===================================================================== */
.anat-pin{padding:calc((var(--hd) + 10px) * (1 - var(--end,0))) calc(var(--gut) * (1 - var(--end,0))) calc(18px * (1 - var(--end,0)))}
.anat-card{border-radius:calc(28px * (1 - var(--end,0)))}
.phone3d,.anat-copy,.fict,.notes,.links{opacity:calc(1 - var(--end,0))}
.anat-copy{transition:none}
.note-dev .devs{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.note-dev:not(.cur) .devs{display:none}
.devs li{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:999px;background:rgba(201,164,92,.12);box-shadow:inset 0 0 0 1px rgba(201,164,92,.35);color:var(--gold-l);font-size:12.5px}
.devs svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.dark-half{
  --bg:#0D0B08; --bg-2:#16130E; --surface:#14110D; --ink:#EEE8DC; --ink-2:#D5CDBE; --mut:#A79E8F; --mut-2:#8C8476;
  --line:rgba(238,232,220,.09); --line2:rgba(238,232,220,.18); --gold-t:#D9B672;
  position:relative;isolation:isolate;background:var(--bg);color:var(--ink);color-scheme:dark;
  --f-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
}
.dark-half ::selection{background:var(--gold);color:#121110}
.dark-half .ux{--ux-surface-2:#1B1712;--ux-surface-3:#221D16;--ux-accent:var(--gold);--ux-accent-ink:#121110;--ux-shadow:rgba(0,0,0,.4);--ux-shadow-strong:rgba(0,0,0,.6);--ux-mint:#7FB487;--ux-danger:#E2775F}
.dark-half :focus-visible{outline-color:var(--gold)}
/* poussière dorée (canvas fixe, n'anime que lorsque la moitié sombre est à l'écran) */
.dust{position:sticky;top:0;display:block;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;pointer-events:none;z-index:-1}
/* titres : serif, l'accent en italique doré */
.dark-half h2,.dark-half .sk-body h3,.dark-half .form h3,.dark-half .audit-strip h3{font-family:var(--f-serif);font-weight:300;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.dark-half h2{font-size:clamp(38px,4.6vw,76px);line-height:1.04}
.dark-half em{font-style:italic;color:var(--gold)}
.dark-half .sk-body h3{font-size:clamp(30px,3vw,48px);line-height:1.05}
.dark-half .why-grid h3,.dark-half .proc h3{font-family:var(--f-serif);font-weight:400;font-size:26px;letter-spacing:-.01em}
.dark-half .psum-p,.dark-half .audit-strip .pz{font-family:var(--f-disp);font-weight:300}
.dark-half .eyebrow{color:var(--mut)}
/* boutons */
.dark-half .pill-gold,.dark-half .btn-gold{background:var(--gold);color:#121110}
.dark-half .pill-gold:hover,.dark-half .btn-gold:hover{background:var(--gold-l)}
.dark-half .pill-ink{background:var(--ink);color:#121110}
.dark-half .pill-ink:hover{background:#fff}
.dark-half .pill-ghost:hover{background:rgba(238,232,220,.06);box-shadow:inset 0 0 0 1px var(--gold)}
.dark-half .u002{--bg:var(--gold);--fg:#121110;--blob:#F3E3BC}
.dark-half .u002:hover .u002-txt,.dark-half .u002:focus-visible .u002-txt,.dark-half .u002-orb{color:#121110}
.dark-half .u002-btn{box-shadow:0 20px 50px -20px rgba(201,164,92,.55)}
.dark-half .text-link{color:var(--ink)}
/* services */
.dark-half .svc-tabs button[aria-selected="true"]{background:var(--gold);color:#121110}
.dark-half .svc-tabs button[aria-selected="true"] span{color:#121110}
.dark-half .skill{background:linear-gradient(180deg,#15120E,#100E0B);box-shadow:0 0 0 1px var(--line)}
.dark-half .skill .ill{background:radial-gradient(120% 90% at 30% 20%,#2A2218,#120F0B 70%);border-color:var(--line)}
.dark-half .ill .s{stroke:#EEE8DC}
.dark-half .ill .i{stroke:var(--gold)}
/* prix */
.dark-half .audit-strip{background:linear-gradient(120deg,#1E1912,#120F0B);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(201,164,92,.35)}
.dark-half .psum{background:var(--surface)}
.dark-half .psum-card:hover,.dark-half .psum-card:focus-visible{background:#1B1712}
.dark-half .psum-p{color:var(--ink)}
.dark-half .grid-lines i{background:var(--line)}
/* processus */
.dark-half .proc li.on .dot{background:var(--gold);color:#121110}
/* formulaire */
.dark-half .form{background:#13100C;box-shadow:0 0 0 1px var(--line),0 50px 90px -50px rgba(0,0,0,.9)}
.dark-half .done pre{background:#1B1712;color:var(--ink-2)}
.dark-half .copy-btn{background:rgba(238,232,220,.08)}
.dark-half .copy-btn:hover{background:rgba(238,232,220,.14)}
.dark-half .u044-it.open .u044-pm{background:var(--gold)}
.dark-half .u044-it.open .u044-pm::before,.dark-half .u044-it.open .u044-pm::after{background:#121110}
/* écusson final (comme la v1) */
.final{padding:20vh 0 22vh}
.final::before{width:70vw;height:50vw;margin:-25vw 0 0 -35vw;background:radial-gradient(circle,rgba(201,164,92,.2),transparent 62%)}
.dark-half .final h2{font-size:clamp(44px,6.4vw,104px);max-width:13ch;line-height:1.02}
.crest{position:relative;width:clamp(130px,13vw,180px);aspect-ratio:1;overflow:hidden;border-radius:14px;margin-bottom:6px}
.crest img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen}
.crest-gleam{position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,236,190,.35) 50%,transparent 60%);transform:translateX(-110%);pointer-events:none;mix-blend-mode:screen}
.fx .crest.in .crest-gleam{animation:gleam 1.6s var(--ease-io) .5s both}
.fx .crest{transform:translateY(30px) scale(.9);filter:blur(6px)}
.fx .crest.in{transform:none;filter:none;transition:opacity 1.2s var(--ease-out),transform 1.4s var(--ease-out),filter 1.2s var(--ease-out)}
.dark-half .final .lead{color:var(--mut)}
/* en-tête au-dessus du noir */
.hd.on-dark{--bg:#0D0B08;--ink:#EEE8DC;--mut:#A79E8F;--line:rgba(238,232,220,.1);color:var(--ink)}
.hd.on-dark .brand img{filter:none}
.hd.on-dark .pill-gold{background:var(--gold);color:#121110}
.hd.on-dark .langs a[aria-current="true"]{background:var(--gold);color:#121110}
.hd.on-dark .u045-ham{background:rgba(238,232,220,.1)}
.hd.on-dark .u045-ham i{background:var(--ink)}
.calm .crest-gleam{animation:none!important}
/* la note d'intro se replie vraiment (place pour les six explications), le bouton avant/après sort du flux */
.anat-p{max-height:9em;overflow:hidden;transition:opacity var(--dur-base) var(--ease-out),max-height var(--dur-slow) var(--ease-out),margin var(--dur-slow) var(--ease-out)}
.anat.compact .anat-p{max-height:0;margin-top:-14px}
.anat-copy .rm-toggle{position:absolute;left:0;top:calc(100% + 14px)}
.anat.is-mobile .anat-copy .rm-toggle{top:auto;bottom:calc(100% + 12px)}
.hd{transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out),background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}

/* ---------- Scène 3D : le décor est maintenant en 3D (sol miroir, anneaux, poussière) ---------- */
.anat .bokeh,.anat-word{display:none}
.anat-bg{opacity:.28}
/* explications qui « s'allument » : liseré doré qui fait le tour, numéro néon, halo ; les étapes passées sont cochées */
@property --trace{syntax:"<angle>";inherits:false;initial-value:0deg}
.note{overflow:visible;border-radius:16px;background:linear-gradient(180deg,rgba(24,20,15,.88),rgba(13,11,8,.9));box-shadow:inset 0 0 0 1px rgba(238,232,220,.08),0 24px 40px -24px rgba(0,0,0,.8);grid-template-columns:34px 1fr;align-items:start;transition:opacity var(--dur-slow) var(--ease-out),filter var(--dur-slow) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
.note::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from 220deg,rgba(243,223,169,1) 0deg,rgba(201,164,92,.85) calc(var(--trace) * .6),rgba(201,164,92,.35) var(--trace),transparent var(--trace));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0}
.note::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,rgba(232,196,120,.2),transparent 62%);opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.note.cur{box-shadow:0 30px 60px -26px rgba(201,164,92,.45),0 0 0 1px rgba(201,164,92,.12)}
.note.cur::before{opacity:1;animation:noteTrace 1.1s var(--ease-out) forwards}
.note.cur::after{opacity:1}
@keyframes noteTrace{from{--trace:0deg}to{--trace:360deg}}
.note>*{position:relative;z-index:1}
.note .ix{display:grid;place-items:center;width:26px;height:26px;margin-top:-1px;border-radius:50%;font-size:10.5px;color:var(--mut);box-shadow:inset 0 0 0 1px rgba(238,232,220,.16);transition:all .5s var(--ease-out)}
.note.on:not(.cur) .ix{background:rgba(201,164,92,.16);color:var(--gold-l);box-shadow:inset 0 0 0 1px rgba(201,164,92,.5)}
.note.cur .ix{width:30px;height:30px;background:var(--gold);color:#121110;font-weight:600;box-shadow:0 0 0 4px rgba(201,164,92,.16),0 0 24px rgba(232,196,120,.65);animation:neon 1s steps(1) both}
@keyframes neon{0%{opacity:.25}12%{opacity:1}18%{opacity:.35}30%{opacity:1}36%{opacity:.6}44%,100%{opacity:1}}
.note h3{font:500 16px/1.3 var(--f-sans);color:#CFC6B6;transition:color var(--dur-base) var(--ease-out)}
.note.cur h3{font:400 24px/1.12 var(--f-disp);letter-spacing:.005em;color:#fff;padding-top:2px}
.note.cur p{animation:noteIn .7s var(--ease-out) .25s both}
@keyframes noteIn{from{opacity:0;transform:translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.note:not(.cur){opacity:.72}
.note:not(.on){opacity:0}
.links path{stroke:rgba(232,207,148,.85);stroke-width:1.2;filter:drop-shadow(0 0 4px rgba(232,196,120,.6))}
.links circle{animation:pinPulse 1.8s var(--ease-out) infinite}
@keyframes pinPulse{0%{filter:drop-shadow(0 0 2px rgba(232,207,148,1)) drop-shadow(0 0 0 rgba(232,207,148,.6))}60%{filter:drop-shadow(0 0 6px rgba(232,207,148,1)) drop-shadow(0 0 16px rgba(232,207,148,.4))}100%{filter:drop-shadow(0 0 2px rgba(232,207,148,1))}}
.calm .note.cur::before,.calm .note.cur .ix,.calm .links circle,.calm .note.cur p{animation:none}
.calm .note.cur::before{--trace:360deg}
.has-tabs .skill{margin:0 auto}
.dark-half h2,.dark-half .sk-body h3,.dark-half .form h3,.dark-half .audit-strip h3{letter-spacing:-.008em;font-variation-settings:"opsz" 96}
/* écusson final redessiné en HTML (couronne + K) : il se fond dans le fond, sans carré d'image */
.crest{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;border-radius:22px;background:radial-gradient(circle at 50% 40%,rgba(201,164,92,.1),transparent 70%);box-shadow:inset 0 0 0 1.5px rgba(201,164,92,.85),0 0 0 8px rgba(201,164,92,.05),0 30px 80px -30px rgba(201,164,92,.45)}
.crest img{width:auto;height:auto;object-fit:contain;mix-blend-mode:normal}
.crest .cr{width:24%}
.crest .ck{height:52%}
/* --- port des anciennes scènes (styles.css v1), variables locales --- */
.scene .bigword{position:absolute;left:0;top:50%;transform:translateY(-46%);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.scene .bigword span{display:inline-block;font-family:var(--f-display);font-style:italic;font-weight:300;font-size:min(28vw,400px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(187,147,81,.15);padding-left:8vw;will-change:transform}
.scene .h-copy{position:relative;z-index:3;max-width:600px}
.fx .scene .h-copy{position:absolute;left:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));top:50%;transform:translateY(-52%);width:min(600px,52%)}
.scene .a-copy{position:relative;z-index:3;display:grid;gap:16px;max-width:400px}
.fx .scene .a-copy{position:absolute;left:max(var(--gutter),calc((100% - var(--maxw))/2 + var(--gutter)));top:50%;transform:translateY(-50%);width:min(340px,25%);opacity:0;visibility:hidden}
.no-fx .scene .a-copy{grid-column:1/-1;max-width:none}
.scene .a-copy h2{font-size:clamp(28px,2.9vw,42px)}
.scene .a-copy h2 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.scene .a-copy h2 .ln>span{display:inline-block}
.scene .a-copy p{color:var(--muted);font-size:16px}
.scene .state{display:flex;align-items:center;gap:16px;margin-top:4px}
.scene .state-word{position:relative;height:44px;width:200px}
.scene .state-word span{position:absolute;inset:0;font-family:var(--f-display);font-size:38px;line-height:44px;font-style:italic;transition:opacity .5s,transform .5s var(--ease);white-space:nowrap}
.scene .state-word .a{color:var(--dim)}
.scene .state-word .b{color:var(--gold);opacity:0;transform:translateY(12px)}
.scene .is-after .state-word .a{opacity:0;transform:translateY(-12px)}
.scene .is-after .state-word .b{opacity:1;transform:none}
.scene .ticks{display:flex;gap:6px}
.scene .ticks i{width:14px;height:3px;background:var(--line-2);transition:background .3s}
.scene .ticks i.on{background:var(--gold)}
.scene .fict{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.scene .rm-toggle{display:none;justify-self:start}
.no-fx .scene .rm-toggle{display:inline-flex}
.scene .st-chip{position:absolute;left:50%;top:-30px;width:300px;margin-left:-150px;height:18px;pointer-events:none}
.scene .st-chip span{position:absolute;inset:0;text-align:center;white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:opacity .45s,transform .45s var(--ease)}
.scene .st-chip .a{color:var(--muted)}
.scene .st-chip .b{color:var(--gold);opacity:0;transform:translateY(8px)}
.scene .is-after .st-chip .a{opacity:0;transform:translateY(-8px)}
.scene .is-after .st-chip .b{opacity:1;transform:none}
.scene .stage{position:relative;z-index:2;justify-self:center}
.fx .scene .stage{position:absolute;left:0;top:0;will-change:transform}
.scene .phone{position:relative;width:380px;height:780px}
.scene .phone-scale{position:absolute;left:0;top:0;width:380px;height:780px;transform-origin:0 0}
.scene .squash{position:absolute;inset:0;transform-origin:50% 100%}
.scene .bezel{position:absolute;inset:0;border-radius:56px;background:#050505;box-shadow:0 0 0 1px #2c2c2c,0 0 0 9px #0d0d0d,0 50px 120px rgba(0,0,0,.75)}
.scene .bezel::after{content:"";position:absolute;left:50%;top:18px;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;z-index:5}
.scene .screen-bg{position:absolute;left:10px;top:10px;width:360px;height:760px;border-radius:46px;background:#fff}
.scene .before{position:absolute;left:10px;top:10px;width:360px;height:760px;border-radius:46px;overflow:hidden;background:#fff;opacity:0;visibility:hidden}
.scene .screen{position:absolute;left:10px;top:10px;width:360px;height:760px}
.scene .layer{position:absolute;left:0;width:360px;background:#fff;color:#0f0f0f;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;will-change:transform,opacity,filter}
.scene .layer.l0{top:0;height:84px;border-radius:46px 46px 0 0}
.scene .layer.l1{top:84px;height:100px}
.scene .layer.l2{top:184px;height:118px}
.scene .layer.l3{top:302px;height:46px}
.scene .layer.l4{top:348px;height:98px}
.scene .layer.l5{top:446px;height:314px;border-radius:0 0 46px 46px}
.scene .layer .v{position:absolute;inset:0;background:#fff;border-radius:inherit;overflow:hidden;will-change:transform,opacity,filter}
.scene .layer.l4 .v,.scene .layer.l5 .v{background:transparent}
.scene .layer .af{opacity:0}
.scene .layer.l4 .af,.scene .layer.l5 .af{opacity:1}
.scene .ig-hl>div,.scene .ig-grid>div{will-change:transform,opacity}
.scene .layer .rim{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(187,147,81,.55);opacity:0;pointer-events:none}
.scene .before>div{position:relative}
/* ig internals */
.scene .ig-status{display:flex;justify-content:space-between;align-items:center;padding:16px 30px 0;font-size:14px;font-weight:600;height:40px}
.scene .ig-status .ic{display:flex;gap:5px;align-items:center}
.scene .ig-status .ic i{display:block;background:#111;border-radius:2px}
.scene .ig-user{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 0;height:44px}
.scene .ig-user b{font-size:18px;font-weight:700;display:flex;align-items:center;gap:4px;letter-spacing:-.01em}
.scene .ig-user b svg{width:12px;height:12px}
.scene .ig-user .ico{display:flex;gap:18px}
.scene .ig-user .ico svg{width:22px;height:22px}
.scene .ig-head{display:flex;align-items:center;gap:22px;padding:8px 16px 0;height:100px}
.scene .ig-ava{width:86px;height:86px;border-radius:50%;flex:none;position:relative;overflow:hidden}
.scene .ig-stats{display:flex;flex:1;justify-content:space-around;text-align:center;font-size:13px;line-height:1.25}
.scene .ig-stats b{display:block;font-size:17px}
.scene .ig-bio{padding:8px 16px 0;font-size:13.5px;line-height:1.38;height:118px}
.scene .ig-bio .nm{font-weight:700}
.scene .ig-bio .cat{color:#737373}
.scene .ig-bio .lk{color:#00376b;font-weight:600}
.scene .ig-btns{display:flex;gap:6px;padding:8px 16px 0;height:46px}
.scene .ig-btns span{flex:1;height:32px;border-radius:8px;background:#efefef;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.scene .ig-btns span.pri{background:#0095f6;color:#fff}
.scene .ig-hl{display:flex;gap:14px;padding:12px 16px 0;overflow:hidden;height:98px}
.scene .ig-hl div{width:62px;flex:none;text-align:center;font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .ig-hl .cv{width:62px;height:62px;border-radius:50%;border:1px solid #dbdbdb;padding:3px;margin-bottom:5px}
.scene .ig-hl .cv>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
.scene .ig-tabs{display:flex;border-top:1px solid #efefef;height:42px}
.scene .ig-tabs span{flex:1;display:flex;align-items:center;justify-content:center}
.scene .ig-tabs span:first-child{border-bottom:1.5px solid #111}
.scene .ig-tabs svg{width:22px;height:22px}
.scene .ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.scene .ig-grid>div{aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.scene .pin-ic{position:absolute;top:6px;right:6px;width:14px;height:14px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}

/* notes */
.scene .notes{position:relative;z-index:3}
.fx .scene .notes{position:absolute;inset:0;pointer-events:none}
.scene .note{display:grid;grid-template-columns:auto auto 1fr;align-items:start;gap:0 12px}
.fx .scene .note{position:absolute;left:0;top:0;width:300px;opacity:0}
.scene .note .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(187,147,81,.18);margin-top:16px}
.scene .note .lnk{width:44px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(187,147,81,.25));margin-top:20px;transform-origin:0 50%}
.scene .note .tx{display:grid;gap:2px}
.scene .note .ix{font-family:var(--f-mono);font-size:11px;color:var(--gold)}
.scene .note h3{font-size:21px;line-height:1.2}
.scene .note p{font-size:14.5px;color:var(--muted);line-height:1.45}
.scene.webs .pin{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:40px}
.fx .scene.webs .pin{padding-block:0}
.scene .w-copy{display:grid;gap:18px;align-content:center;position:relative;z-index:2}
.scene .w-copy h2{font-size:clamp(32px,3.6vw,50px)}
.scene .steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px;counter-reset:st}
.scene .steps li{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line);color:var(--ivory);transition:color .35s}
.fx .scene .steps li{color:var(--dim)}
.scene .steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:var(--f-mono);font-size:11px;padding-top:4px;color:var(--gold)}
.fx .scene .steps li::before{color:inherit}
.scene .steps li b{font-weight:600;font-size:16px}
.scene .steps li span{grid-column:2;font-size:14px;line-height:1.4;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s}
.fx .scene .steps li.on{color:var(--ivory)}
.fx .scene .steps li.on::before{color:var(--gold)}
.scene .steps li.cur span{max-height:60px;opacity:1;color:var(--muted)}
.scene .wstage{position:relative;justify-self:center;width:100%;height:100%;min-height:0}
.no-fx .scene .wstage{height:560px}
.scene .wscale{position:absolute;left:50%;top:50%;width:1040px;height:660px;transform-origin:50% 50%}
.scene .narrow{width:560px;height:900px}
.scene .bwin{position:absolute;left:50%;top:0;width:1040px;height:660px;margin-left:-520px;background:#f6f3ee;border-radius:12px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.scene .narrow .bwin{width:560px;height:900px;margin-left:-280px}
.scene .bwin.mobile{box-shadow:0 0 0 10px #0b0b0b,0 0 0 11px #2b2b2b,0 40px 100px rgba(0,0,0,.7)}
.scene .bchrome{height:42px;background:#e9e5df;display:flex;align-items:center;gap:8px;padding:0 16px;transition:background .4s}
.scene .bchrome i{width:11px;height:11px;border-radius:50%;background:#d1ccc4;transition:opacity .3s}
.scene .bchrome .url{flex:1;max-width:420px;margin:0 auto;height:26px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;gap:6px;font:500 13px var(--f-body);color:#6b665e}
.scene .bchrome .url svg{width:11px;height:11px}
.scene .mobile .bchrome{background:#f5f1ea}
.scene .mobile .bchrome i{opacity:0}
.scene .bview{position:absolute;left:0;right:0;top:42px;bottom:0;overflow:hidden}
.scene .site{container-type:inline-size;position:absolute;left:0;top:0;width:100%;font-family:Arial,Helvetica,sans-serif;color:#555;background:#f6f3ee;transition:background .6s,color .6s;will-change:transform}
.scene .mk{position:relative}
.scene .mk::after{content:"";position:absolute;inset:6px;border:1.5px dashed #cfc7ba;border-radius:4px;opacity:0;transition:opacity .4s;pointer-events:none}
.scene .struct .mk.wait::after{opacity:1}
.scene .mk>*{will-change:transform,opacity,filter}
.scene .m-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;min-height:68px}
.scene .m-logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:#333;transition:color .6s}
.scene .m-logo svg{width:24px;height:24px}
.scene .m-links{display:flex;gap:26px;font-size:14px;align-items:center}
.scene .m-btn{display:inline-flex;align-items:center;padding:12px 20px;font-size:14px;font-weight:700;background:#999;color:#fff;border-radius:2px;transition:background .6s,color .6s}
.scene .m-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:28px 40px 44px;min-height:330px}
.scene .m-hero small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.scene .m-hero .m-title{font-size:44px;line-height:1.04;color:#222;font-family:Georgia,serif;font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance}
.scene .m-hero p{margin-top:14px;font-size:16px;line-height:1.5;max-width:40ch}
.scene .m-acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.scene .m-acts .ghost{background:transparent;color:#333;border:1px solid #bbb}
.scene .m-art{max-width:320px;width:100%;justify-self:center}
.scene .m-art svg{display:block;width:100%;height:auto}
.scene .m-sec{padding:40px;border-top:1px solid #e3ddd3}
.scene .m-sec .m-h{font-family:Georgia,serif;font-weight:400;font-size:30px;margin:0 0 20px;color:#222}
.scene .m-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.scene .m-dish{background:#fff;padding:18px;border:1px solid #ebe5db}
.scene .m-dish b{display:flex;justify-content:space-between;gap:10px;font-size:16px;color:#222}
.scene .m-dish span{display:block;font-size:13px;margin-top:6px;line-height:1.45}
.scene .m-info{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:stretch}
.scene .m-info dl{margin:0;display:grid;gap:12px;font-size:14px}
.scene .m-info dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#999}
.scene .m-info dd{margin:2px 0 0;color:#222}
.scene .m-map{min-height:200px;border:1px solid #e3ddd3;background:#ece7df;position:relative;overflow:hidden}
.scene .m-map svg{display:block;width:100%;height:100%;position:absolute;inset:0}
.scene .m-map .m-pin{position:absolute;inset:auto;left:50%;top:50%;width:34px;height:44px;margin:-40px 0 0 -17px}
.scene .m-foot{padding:26px 40px;font-size:13px;display:flex;justify-content:space-between;border-top:1px solid #e3ddd3}
.scene .site.branded{background:#f5f1ea;color:#5d5248;font-family:var(--f-body)}
.scene .site.branded .m-logo{color:#1d1a17;font-family:var(--f-display);font-weight:500}
.scene .site.branded .m-hero .m-title,.scene .site.branded .m-sec .m-h{font-family:var(--f-display);color:#1d1a17}
.scene .site.branded .m-hero .m-title em{font-style:italic;color:#c4562b}
.scene .site.branded .m-hero small{color:#c4562b;font-family:var(--f-mono)}
.scene .site.branded .m-btn{background:#1d1a17;color:#f5f1ea}
.scene .site.branded .m-btn.hot{background:#c4562b;color:#fff}
.scene .site.branded .m-acts .ghost{background:transparent;color:#1d1a17;border-color:#1d1a17}
.scene .site.branded .m-dish b,.scene .site.branded .m-info dd{color:#1d1a17}
.scene .site.branded .m-dish b i{font-style:normal;color:#c4562b;font-family:var(--f-mono);font-size:14px}
.scene .site.branded .m-info dt{color:#c4562b;font-family:var(--f-mono)}
@container (max-width:600px){
  .scene .m-nav{padding:14px 18px;min-height:54px}
  .scene .m-links .tl{display:none}
  .scene .m-btn{padding:10px 14px;font-size:13px}
  .scene .m-hero{grid-template-columns:1fr;padding:12px 18px 30px;gap:18px;min-height:0}
  .scene .m-hero .m-title{font-size:34px}
  .scene .m-art{max-width:190px;order:-1;justify-self:start}
  .scene .m-sec{padding:28px 18px}
  .scene .m-menu{grid-template-columns:1fr}
  .scene .m-info{grid-template-columns:1fr}
  .scene .m-foot{padding:20px 18px;flex-direction:column;gap:6px}
}
.scene .m-shade{position:absolute;inset:0;background:rgba(29,26,23,.45);opacity:0;pointer-events:none}
.scene .m-detail{position:absolute;left:50%;top:50%;width:min(600px,88%);background:#fffdf9;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:grid;grid-template-columns:180px 1fr;gap:24px;padding:26px;opacity:0;pointer-events:none;color:#1d1a17;font-family:var(--f-body)}
.scene .m-detail .dimg{width:100%;height:auto}
.scene .m-detail small{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#c4562b}
.scene .m-detail .m-dname{font:400 28px/1.1 var(--f-display);margin:8px 0 10px}
.scene .m-detail p{font-size:15px;line-height:1.5;color:#5d5248;margin:0}
.scene .m-detail .dal{display:inline-block;margin-top:12px;font-size:12px;padding:5px 10px;border-radius:20px;background:#f0e7da;color:#7a5a3e}
.scene .m-detail .drow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.scene .m-detail .drow b{font:500 24px var(--f-display);color:#c4562b}
.scene .m-detail .m-btn{background:#c4562b;color:#fff}
.scene .m-cursor{position:absolute;left:0;top:0;width:30px;height:30px;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));z-index:5}
.scene .m-ripple{position:absolute;left:0;top:0;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2px solid #c4562b;opacity:0;pointer-events:none;z-index:4}
.scene .m-dish{transition:box-shadow .3s,border-color .3s}
.scene .m-dish.pick{border-color:#c4562b;box-shadow:0 10px 30px rgba(196,86,43,.18)}
.scene .wcap{display:none}
@keyframes a-up{from{opacity:0;transform:translateY(18px)}}
@keyframes a-in{from{opacity:0}}
@keyframes a-pop{0%{opacity:0;transform:translateY(16px) scale(.92)}60%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes a-float{from{translate:0 -5px}to{translate:0 6px}}
.pta.pt-art>*{animation:a-up .9s var(--ease) both;animation-delay:calc(var(--d0) + .2s)}

/* --- Web --- */
.pta .aw-desk{position:absolute;left:0;top:30px;width:330px;height:230px;background:#f3eee6;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transform:rotate(-4deg);opacity:.9;overflow:hidden}
.pta .aw-chrome{height:26px;background:#e6dfd3;display:flex;align-items:center;gap:5px;padding:0 10px}
.pta .aw-chrome i{width:7px;height:7px;border-radius:50%;background:#cfc5b6}
.pta .aw-chrome span{margin-left:14px;flex:1;height:14px;border-radius:7px;background:#fff;font:9px var(--f-body);color:#8a7f70;display:flex;align-items:center;justify-content:center}
.pta .aw-dbody{padding:18px;display:grid;gap:9px}
.pta .aw-dbody b{display:block;height:9px;width:70%;background:#d9cfbf;border-radius:3px}
.pta .aw-dbody b.s{width:45%}
.pta .aw-dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pta .aw-dgrid i{height:60px;background:#e4dccf;border-radius:4px}
.pta .aw-phone{position:absolute;right:30px;top:0;width:236px;height:450px;border-radius:38px;background:#111;padding:10px;box-shadow:0 0 0 1.5px #3b2f21,0 40px 80px -24px rgba(0,0,0,.85);animation:a-up 1s var(--ease) both,a-float 7s ease-in-out infinite alternate;animation-delay:calc(var(--d0) + .3s),calc(var(--d0) + 1.4s)}
.pta .aw-notch{position:absolute;top:16px;left:50%;width:76px;height:20px;margin-left:-38px;background:#111;border-radius:12px;z-index:2}
.pta .aw-screen{position:relative;height:100%;border-radius:29px;background:#f6f1e9;overflow:hidden;padding:44px 16px 14px;display:flex;flex-direction:column;gap:11px;color:#1d1a17}
.pta .aw-row{animation:a-up .7s var(--ease) both;animation-delay:calc(var(--d0) + .8s + var(--k) * .16s)}
.pta .aw-nav{display:flex;justify-content:space-between;align-items:center}
.pta .aw-logo{display:flex;align-items:center;gap:5px;font:500 13px var(--f-display)}
.pta .aw-logo svg{width:15px;height:15px}
.pta .aw-burger{display:grid;gap:3px}.pta .aw-burger i{width:14px;height:1.5px;background:#1d1a17}
.pta .aw-plate{height:96px;border-radius:12px;background:#2a2420;display:flex;align-items:center;justify-content:center}
.pta .aw-plate svg{width:84px;height:84px}
.pta .aw-h{margin:0;font:400 19px/1.12 var(--f-display)}
.pta .aw-h em{color:#c4562b}
.pta .aw-btns{display:grid;grid-template-columns:1.3fr 1fr;gap:7px}
.pta .aw-btn{position:relative;overflow:hidden;font:600 11px var(--f-body);text-align:center;padding:9px 4px;border-radius:999px;border:1px solid #1d1a17}
.pta .aw-btn.hot{background:#c4562b;border-color:#c4562b;color:#fff;animation:aw-press 6s ease-in-out infinite;animation-delay:calc(var(--d0) + 2.2s)}
@keyframes aw-press{0%,8%,100%{transform:none}4%{transform:scale(.94)}}
.pta .aw-tap{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(255,255,255,.7);opacity:0;animation:aw-tap 6s ease-out infinite;animation-delay:calc(var(--d0) + 2.2s)}
@keyframes aw-tap{0%{opacity:.9;transform:scale(.2)}12%{opacity:0;transform:scale(3.2)}100%{opacity:0}}
.pta .aw-info{display:flex;justify-content:space-between;font:12px var(--f-body);border-top:1px solid #e3dacb;padding-top:9px}
.pta .aw-info b{font-family:var(--f-mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#c4562b}
.pta .aw-map{position:relative;flex:1;min-height:70px;border-radius:12px;overflow:hidden}
.pta .aw-map svg{width:100%;height:100%;display:block}
.pta .aw-pin{position:absolute;left:50%;top:44%;width:20px;margin-left:-10px;animation:a-pop .7s var(--ease) both;animation-delay:calc(var(--d0) + 1.9s)}
.pta .aw-pin svg{fill:#c4562b;display:block}
.pta .aw-toast{position:absolute;left:4px;bottom:70px;display:flex;gap:12px;align-items:center;padding:12px 16px 12px 12px;background:var(--card);border:1px solid var(--gold-lo);box-shadow:0 20px 40px -14px rgba(0,0,0,.8);animation:aw-toast 6s var(--ease) infinite;animation-delay:calc(var(--d0) + 2.3s);opacity:0}
.pta .aw-toast i{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center;flex:none}
.pta .aw-toast i svg{width:16px;height:16px}
.pta .aw-toast b{display:block;font:500 15px var(--f-display);color:var(--ivory)}
.pta .aw-toast span{font-size:13px;color:var(--muted)}
@keyframes aw-toast{0%,6%{opacity:0;transform:translateY(14px) scale(.96)}12%,78%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(-8px)}}

/* --- Google --- */
.pta .ag-panel{position:absolute;inset:0 0 10px;background:#f7f4ef;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -28px rgba(0,0,0,.85),0 0 0 1px #3b2f21;color:#1d1a17;display:flex;flex-direction:column}
.pta .ag-search{display:flex;align-items:center;gap:10px;margin:14px 14px 0;padding:10px 14px;background:#fff;border-radius:999px;box-shadow:0 1px 4px rgba(0,0,0,.12);font:14px var(--f-body);color:#3a332c}
.pta .ag-search svg{width:16px;height:16px;color:#857966;flex:none}
.pta .ag-q{overflow:hidden;white-space:nowrap;border-right:1.5px solid #c4562b;animation:ag-type 1.4s steps(24) both,ag-caret .8s step-end 6;animation-delay:calc(var(--d0) + .5s),calc(var(--d0) + .5s);max-width:100%}
@keyframes ag-type{from{max-width:0}}
@keyframes ag-caret{50%{border-color:transparent}}
.pta .ag-map{position:relative;height:118px;margin:12px 0 0}
.pta .ag-map svg{width:100%;height:100%;display:block}
.pta .ag-pin{position:absolute;width:20px;animation:a-pop .6s var(--ease) both}
.pta .ag-pin svg{display:block;fill:#9a8f80}
.pta .ag-pin.p1{left:24%;top:24%;animation-delay:calc(var(--d0) + 1.9s)}
.pta .ag-pin.p2{left:70%;top:46%;animation-delay:calc(var(--d0) + 2s)}
.pta .ag-pin.me{left:46%;top:16%;width:30px;animation-delay:calc(var(--d0) + 3.2s)}
.pta .ag-pin.me svg{fill:#c4562b}
.pta .ag-list{position:relative;flex:1;margin:0 10px}
.pta .ag-card{position:absolute;left:0;right:0;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start;padding:11px 10px;border-bottom:1px solid #e6dfd3;background:#f7f4ef}
.pta .ag-o{top:calc((var(--slot) - 1) * 64px + 130px);opacity:.75;animation:ag-down 1s var(--ease) both;animation-delay:calc(var(--d0) + 3.3s)}
@keyframes ag-down{from{transform:translateY(-130px)}}
.pta .ag-me{top:0;grid-template-columns:38px 1fr auto;z-index:2;background:#fff;border:1px solid #c9a86b;border-radius:12px;box-shadow:0 14px 30px -14px rgba(120,80,30,.45);animation:ag-up 1s var(--ease) both;animation-delay:calc(var(--d0) + 3.3s)}
@keyframes ag-up{from{transform:translateY(128px);border-color:transparent;box-shadow:none;background:#f7f4ef}}
.pta .ag-ava{width:38px;height:38px;border-radius:50%;background:#d6cdbf}
.pta .ag-me .ag-ava{background:#4a2c3a;display:flex;align-items:center;justify-content:center;font:italic 400 20px var(--f-display);color:#e9d8d3}
.pta .ag-txt{display:grid;gap:3px;min-width:0}
.pta .ag-bar{display:block;height:8px;border-radius:3px;background:#d6cdbf}
.pta .ag-bar.w1{width:62%}.pta .ag-bar.w2{width:40%;margin-top:3px}
.pta .ag-name{font:600 14px var(--f-body)}
.pta .ag-rate{font:12px var(--f-body);color:#5a5047;display:flex;align-items:center;gap:5px}
.pta .ag-rate em{font-style:normal;color:#8a7f70}
.pta .ag-stars{display:inline-flex;gap:1.5px}
.pta .ag-stars i{width:10px;height:10px;background:#d8a63c;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pta .ag-stars.dim i{background:#c9bfb0}.pta .ag-stars.dim i.h{opacity:.4}
.pta .ag-me .ag-stars i{animation:a-pop .4s var(--ease) both}
.pta .ag-me .ag-stars i:nth-child(1){animation-delay:calc(var(--d0) + 2.3s)}.pta .ag-me .ag-stars i:nth-child(2){animation-delay:calc(var(--d0) + 2.4s)}
.pta .ag-me .ag-stars i:nth-child(3){animation-delay:calc(var(--d0) + 2.5s)}.pta .ag-me .ag-stars i:nth-child(4){animation-delay:calc(var(--d0) + 2.6s)}.pta .ag-me .ag-stars i:nth-child(5){animation-delay:calc(var(--d0) + 2.7s)}
.pta .ag-cat{font:11.5px var(--f-body);color:#6b6157;animation:a-in .5s both;animation-delay:calc(var(--d0) + 2.8s)}
.pta .ag-acts{display:flex;gap:5px;margin-top:5px;animation:a-up .5s var(--ease) both;animation-delay:calc(var(--d0) + 2.95s)}
.pta .ag-acts span{font:600 10.5px var(--f-body);padding:5px 9px;border-radius:999px;border:1px solid #cfc5b6;color:#3a332c;white-space:nowrap}
.pta .ag-acts span.hot{background:#4a2c3a;border-color:#4a2c3a;color:#fff}
.pta .ag-photos{display:grid;gap:4px}
.pta .ag-photos i{width:44px;height:30px;border-radius:5px;animation:a-pop .5s var(--ease) both}
.pta .ag-photos i:nth-child(1){background:repeating-linear-gradient(100deg,#e6c79a 0 5px,#c99a63 5px 8px,#a87545 8px 12px);animation-delay:calc(var(--d0) + 2.1s)}
.pta .ag-photos i:nth-child(2){background:#4a2c3a;animation-delay:calc(var(--d0) + 2.2s)}
.pta .ag-photos i:nth-child(3){background:repeating-linear-gradient(100deg,#c9774a 0 5px,#9b4e2b 5px 8px,#6b3220 8px 12px);animation-delay:calc(var(--d0) + 2.3s)}

/* --- Diseño gráfico --- */
.pta .gr-piece{position:absolute;background:#f6f1e9;color:#1d1a17;box-shadow:0 30px 60px -22px rgba(0,0,0,.85);border-radius:3px}
.pta .gr-lab{position:absolute;top:-24px;left:0;font:500 10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pta .gr-menu{left:50%;top:20px;width:240px;height:362px;margin-left:-120px;padding:26px 24px;text-align:center;z-index:3;animation:a-up 1s var(--ease) both,a-float 8s ease-in-out infinite alternate;animation-delay:calc(var(--d0) + .3s),calc(var(--d0) + 3s);border:1px solid #e3dacb}
.pta .gr-menu::before{content:"";position:absolute;inset:8px;border:1px solid #d9cfbf;pointer-events:none}
.pta .gr-mlogo svg{width:26px;height:26px;display:block;margin:0 auto}
.pta .gr-menu .gr-h{margin:6px 0 0;font:400 25px var(--f-display)}
.pta .gr-menu small{display:block;margin-top:4px;font:500 9.5px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#c4562b}
.pta .gr-menu ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:15px;text-align:left}
.pta .gr-menu li{display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:baseline;animation:a-up .6s var(--ease) both}
.pta .gr-menu li:nth-child(1){animation-delay:calc(var(--d0) + 1s)}.pta .gr-menu li:nth-child(2){animation-delay:calc(var(--d0) + 1.2s)}.pta .gr-menu li:nth-child(3){animation-delay:calc(var(--d0) + 1.4s)}
.pta .gr-menu li b{font:500 14px var(--f-display)}
.pta .gr-menu li i{border-bottom:1px dotted #a99c88;transform:translateY(-3px)}
.pta .gr-menu li em{font-style:normal;font:500 13px var(--f-display);color:#c4562b;white-space:nowrap}
.pta .gr-menu li span{grid-column:1/-1;font:11px/1.35 var(--f-body);color:#6b6157}
.pta .gr-mfoot{position:absolute;left:0;right:0;bottom:24px;font:500 9px var(--f-mono);letter-spacing:.14em;color:#8a7f70}
.pta .gr-fly{left:-34px;top:84px;width:180px;height:260px;padding:18px 16px;background:#1d1a17;color:#f2e9d8;transform:rotate(-11deg);z-index:1;animation:gr-fan-l 1.1s var(--ease) both;animation-delay:calc(var(--d0) + 1.7s)}
@keyframes gr-fan-l{from{transform:translate(110px,10px) rotate(0);opacity:0}}
.pta .gr-flogo{display:flex;align-items:center;gap:5px;font:500 11px var(--f-display);color:#e9d8c4}
.pta .gr-flogo svg{width:13px;height:13px}
.pta .gr-fly .gr-h{margin:14px 0 0;font:400 26px/1 var(--f-display)}
.pta .gr-fly .gr-h em{color:#e0794a}
.pta .gr-fly p{margin:8px 0 0;font:10.5px/1.35 var(--f-body);color:#bfb3a0}
.pta .gr-fplate{position:absolute;right:-26px;bottom:34px;width:110px;height:110px}
.pta .gr-fplate svg{width:100%;height:100%}
.pta .gr-fcta{position:absolute;left:16px;bottom:18px;font:600 9.5px var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;background:#c4562b;color:#fff}
.pta .gr-post{right:-40px;top:150px;width:170px;height:200px;padding:0;overflow:visible;transform:rotate(9deg);z-index:2;animation:gr-fan-r 1.1s var(--ease) both;animation-delay:calc(var(--d0) + 1.9s)}
@keyframes gr-fan-r{from{transform:translate(-110px,-20px) rotate(0);opacity:0}}
.pta .gr-pimg{height:140px;background:#2a2420;display:flex;align-items:center;justify-content:center;border-radius:3px 3px 0 0}
.pta .gr-pimg svg{width:108px;height:108px}
.pta .gr-pcap{padding:9px 12px}
.pta .gr-pcap small{display:block;font:500 8.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#c4562b}
.pta .gr-pcap b{font:500 15px var(--f-display)}
.pta .gr-badge{position:absolute;right:10px;top:10px;font:500 13px var(--f-display);padding:4px 9px;border-radius:999px;background:#f6f1e9;color:#c4562b}

.calm .pta.pt-art *,.calm .pta.pt-art{animation:none!important;opacity:1}
.calm .pta .aw-toast{opacity:1}


/* =====================================================================
   Pages services : chaque page garde son propre exemple (illustration d'en-tête + scène au scroll).
   Les scènes vivent dans un panneau noir arrondi qui s'ouvre en plein écran à la fin (--end),
   puis la suite de la page passe en sombre, comme sur l'accueil.
   ===================================================================== */
.pta,.scene{--f-display:"Instrument Serif","Iowan Old Style",Georgia,serif;--f-body:var(--f-sans);--ease:var(--ease-out);--card:#15110c;--line:#2a2219;--line-2:#3b2f21;--ivory:#f2e9d8;--muted:#b8ac97;--dim:#9a8d78;--gold-hi:#dcc08a;--gold-lo:#86683a;--on-gold:#0a0806;--gutter:clamp(20px,3vw,48px);--maxw:1300px;--vh:1vh;--stick:0px;--d0:.25s}
.intro .pta{--d0:2.4s}
/* illustrations d'en-tête sur fond clair */
.pta.pt-art{height:470px;max-width:480px;width:100%;justify-self:center}
.pta.pt-art::before{inset:-4% -14% -6%;background:radial-gradient(closest-side,rgba(201,164,92,.22),transparent 72%)}
.pta .art-fict{color:var(--mut-2);text-align:center}
.pta .gr-lab{color:var(--gold-t)}
.pta .aw-desk,.pta .gr-piece{box-shadow:0 30px 60px -26px rgba(60,40,10,.45),0 0 0 1px rgba(18,17,16,.06)}
.pta .ag-panel{box-shadow:0 40px 80px -36px rgba(60,40,10,.5),0 0 0 1px rgba(18,17,16,.08)}
.pta .aw-phone{box-shadow:0 0 0 1.5px #3b2f21,0 40px 80px -30px rgba(40,25,5,.6)}
.pta .aw-toast{border-radius:16px;border-color:rgba(201,164,92,.45)}
/* Instagram (pages réseaux) : le profil terminé dans un iPhone, et les boutons qui « sortent » de l'écran */
.art-ig .ai-phone{position:absolute;left:50%;top:0;width:250px;height:470px;margin-left:-125px;border-radius:44px;background:#0b0b0b;padding:9px;box-shadow:0 0 0 1.5px #3b3530,0 50px 90px -34px rgba(40,25,5,.6);animation:a-up 1s var(--ease) both,a-float 7s ease-in-out infinite alternate;animation-delay:calc(var(--d0) + .2s),calc(var(--d0) + 1.4s)}
.art-ig .ai-notch{position:absolute;left:50%;top:17px;width:72px;height:20px;margin-left:-36px;border-radius:12px;background:#000;z-index:2}
.art-ig .ai-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff}
.art-ig .ai-screen>.ig-in{position:absolute;left:0;top:0;width:360px;transform-origin:0 0;color:#0f0f0f;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.art-ig .ai-screen .ig-in>*{animation:a-up .7s var(--ease) both;animation-delay:calc(var(--d0) + .7s + var(--k) * .14s)}
.art-ig .ai-chips{position:absolute;inset:0;pointer-events:none}
.ai-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:999px;background:#fff;color:var(--ink);font:500 13.5px var(--f-sans);white-space:nowrap;box-shadow:0 18px 36px -16px rgba(60,40,10,.45),0 0 0 1px rgba(18,17,16,.06);opacity:0;animation:ai-chip 1s var(--spring) both;animation-delay:calc(var(--d0) + 1.6s + var(--k) * .22s)}
.ai-chip i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#4a2c3a;color:#e9d8d3}
.ai-chip i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ai-chip.pri{background:#0095f6;color:#fff}.ai-chip.pri i{background:rgba(255,255,255,.22);color:#fff}
@keyframes ai-chip{from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.6)}to{opacity:1;transform:none}}
.ai-chip.pri::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 2px #0095f6;opacity:0;animation:ai-ping 2.6s var(--ease-out) infinite;animation-delay:calc(var(--d0) + 2.6s)}
@keyframes ai-ping{0%{opacity:.7;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.18)}}
.calm .ai-chip,.calm .art-ig *{animation:none!important;opacity:1}

/* panneau noir des scènes */
.scene{position:relative;color:var(--ivory)}
.fx .scene.webs{height:560vh}
.fx .scene.story{height:440vh}
.scene .pin{position:relative;overflow:hidden;max-width:none;margin:0 var(--gut);padding-inline:var(--gutter);border-radius:28px;background:#0D0B08;isolation:isolate}
.fx .scene .pin{position:sticky;top:calc((var(--hd) + 10px) * (1 - var(--end,0)));height:calc(100vh - (var(--hd) + 28px) * (1 - var(--end,0)));height:calc(100svh - (var(--hd) + 28px) * (1 - var(--end,0)));margin-inline:calc(var(--gut) * (1 - var(--end,0)));border-radius:calc(28px * (1 - var(--end,0)))}
.scene .pin::before{content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 68% 52%,rgba(201,164,92,.28),transparent 70%),radial-gradient(30% 40% at 12% 90%,rgba(138,90,30,.3),transparent 70%);transform:translate3d(calc(var(--sp,0) * -6%),0,0)}
.scene .bigword span{font-family:var(--f-display);-webkit-text-stroke:1px rgba(201,164,92,.12)}
.scene h2{font:300 clamp(30px,3.3vw,50px)/1.04 var(--f-display);letter-spacing:-.01em;color:var(--ivory);font-variation-settings:"opsz" 96}
.scene h2 em,.scene .m-title em{font-style:italic;color:var(--gold)}
.scene .eyebrow{grid-column:auto;grid-row:auto;justify-self:start;display:flex;margin:0;color:var(--gold);font:500 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;white-space:normal}
.scene .eyebrow::before{width:22px;height:1px;border-radius:0;margin:0;vertical-align:middle;align-self:center;background:var(--gold)}
.scene .lead{color:var(--muted)}
.scene .fict{position:static;color:#7E766A;font:500 10px var(--f-mono);letter-spacing:.12em}
/* étapes (web) : l'étape en cours s'allume */
.scene .steps{border:0;gap:4px;margin-top:4px}
.scene .steps li{grid-template-columns:30px 1fr;gap:2px 12px;padding:9px 12px;border:0;border-radius:14px;position:relative;transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out),color .35s}
.scene .steps li::before{content:counter(st,decimal-leading-zero);grid-row:1/3;display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:50%;background:none;color:var(--dim);box-shadow:inset 0 0 0 1px rgba(238,232,220,.16);font:500 10.5px var(--f-mono);transition:background-color .4s,color .4s,box-shadow .4s}
.scene .steps b{font:500 16px/1.3 var(--f-sans)}
.fx .scene .steps li.on::before{background:rgba(201,164,92,.16);color:var(--gold-l);box-shadow:inset 0 0 0 1px rgba(201,164,92,.5)}
.fx .scene .steps li.cur{background:linear-gradient(180deg,rgba(28,23,17,.95),rgba(14,12,9,.95));box-shadow:0 0 0 1px rgba(201,164,92,.45),0 24px 44px -24px rgba(201,164,92,.5)}
.fx .scene .steps li.cur::before{background:var(--gold);color:#121110;font-weight:600;box-shadow:0 0 0 4px rgba(201,164,92,.16),0 0 22px rgba(232,196,120,.6);animation:neon 1s steps(1) both}
.fx .scene .steps li.cur b{font:400 22px/1.15 var(--f-display);color:#fff}
.scene .steps li span{color:var(--muted)}
.scene .bwin{box-shadow:0 50px 110px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06),0 0 80px -20px rgba(201,164,92,.25)}
/* notes (Instagram) : point lumineux, ligne dorée, la note courante s'allume */
.scene .note{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0;filter:none;overflow:visible;grid-template-columns:auto auto 1fr}
.scene .note::before,.scene .note::after{display:none}
.scene .note .ix{display:inline;width:auto;height:auto;margin:0;border-radius:0;background:none;box-shadow:none;animation:none;font:500 11px var(--f-mono);color:var(--gold)}
.scene .note .tx{padding:10px 14px;border-radius:14px;transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.scene .note.cur .tx{background:linear-gradient(180deg,rgba(28,23,17,.95),rgba(14,12,9,.95));box-shadow:0 0 0 1px rgba(201,164,92,.5),0 24px 44px -24px rgba(201,164,92,.55)}
.scene .note h3,.scene .note.cur h3{font:400 21px/1.2 var(--f-display);color:var(--ivory);padding:0}
.scene .note.cur h3{color:#fff}
.scene .note:not(.cur) p{display:block}
.scene .note.cur p{animation:none}
.scene .note .dot{box-shadow:0 0 0 4px rgba(201,164,92,.18),0 0 14px rgba(232,196,120,.8)}
.scene .st-chip{display:block;height:18px;padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible}
.scene .bezel{box-shadow:0 0 0 1px #3a332b,0 0 0 9px #0d0d0d,0 0 0 10px #5a5248,0 60px 120px rgba(0,0,0,.75)}
@media (max-width:900px){
  .scene .pin{margin:0 10px;border-radius:22px}
  .fx .scene .pin{top:calc((var(--hd) + 6px) * (1 - var(--end,0)));height:calc(100svh - (var(--hd) + 16px) * (1 - var(--end,0)));margin-inline:calc(10px * (1 - var(--end,0)))}
}
@media (max-width:1100px){.pta.pt-art{transform:scale(.9);transform-origin:center top}}
@media (max-width:900px){.pta.pt-art{height:470px;transform:none}}
@media (max-width:560px){
  .pta.pt-art{width:480px;max-width:none;justify-self:start;left:50%;margin-left:-240px;transform:scale(.7);transform-origin:center top;margin-bottom:-120px}
  .pta .art-fict{font-size:14px;bottom:-40px}
}

@media (max-width:900px){
  .fx .scene.story{height:400vh}
  .fx .scene .a-copy{left:var(--gutter);right:var(--gutter);width:auto;top:16px;transform:none;gap:8px}
  .fx .scene .a-copy p,.fx .scene .a-copy .fict{display:none}
  .scene .a-copy h2{font-size:clamp(24px,6.6vw,32px)}
  .scene .state-word{height:30px;width:150px}
  .scene .state-word span{font-size:26px;line-height:30px}
  .fx .scene .note{width:auto;gap:0 6px}
  .fx .scene .note p{display:none}
  .fx .scene .note .tx{padding:6px 8px}
  .fx .scene .note h3{font-size:clamp(12.5px,3.7vw,15px);white-space:nowrap}
  .fx .scene .note .ix{font-size:10px}
  .fx .scene .note .lnk{width:10px;margin-top:12px}
  .scene .st-chip{left:0;margin-left:0;width:100%}
  .scene .st-chip span{text-align:left}
  .fx .scene .note .dot{width:7px;height:7px;margin-top:9px}
  .scene.webs .pin{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;gap:10px}
  .fx .scene.webs .pin{padding-block:16px 16px}
  .scene .w-copy{gap:8px}
  .scene .w-copy h2{font-size:clamp(26px,7vw,34px)}
  .fx .scene .w-copy .lead,.fx .scene .steps,.fx .scene .w-copy .fict{display:none}
  .fx .scene .wcap{display:block;min-height:74px;border-top:1px solid var(--line);padding-top:10px}
  .scene .wcap b{display:block;font-family:var(--f-display);font-weight:400;font-size:20px}
  .scene .wcap span{font-size:14px;color:var(--muted)}
  .scene .wcap .ix{font-family:var(--f-mono);font-size:11px;color:var(--gold);margin-right:8px}
}

/* =====================================================================
   Accueil · scène « Anatomía de una web » v3 : tablette + iPhone en CSS (site Ámbar en vrai HTML),
   fond neutre « on tombe dans le vide ». Construit par assets/scene.js.
   ===================================================================== */
.anat.dom3 .anat-card{background:radial-gradient(ellipse 75% 70% at 62% 42%,#1a1918 0,#0d0d0c 55%,#060606 100%)}
.anat.dom3 .anat-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 62% 108%,rgba(201,164,92,.1),transparent 70%)}
.anat.dom3 .anat-bg,.anat.dom3 .bokeh,.anat.dom3 .phone3d,.anat.dom3 .anat-word{display:none}
.anat.dom3 .links{z-index:3}
.void{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.st3{position:absolute;left:0;top:0;z-index:2;width:1200px;height:860px;transform-origin:0 0;perspective:2400px;opacity:calc(1 - var(--end,0))}
.tab{position:absolute;left:0;top:0;width:1040px;height:780px;transform-origin:50% 55%;will-change:transform,filter}
.tab-in{position:absolute;inset:0;border-radius:46px;padding:20px;background:#0a0a0b;
  box-shadow:0 0 0 2px #7c7d82,0 0 0 3.5px #c9cace,0 0 0 4.5px #6d6e72,0 70px 120px -50px rgba(0,0,0,.95),0 30px 60px -30px rgba(0,0,0,.6)}
.tab-cam{position:absolute;left:50%;top:7px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#16171c;box-shadow:inset 0 0 0 1.5px #2a2c34}
.tab-scr{position:relative;width:1000px;height:740px;border-radius:26px;overflow:hidden;background:#F6F0E6;isolation:isolate}
.tab-dim{position:absolute;inset:0;z-index:5;background:#0b0b0b;opacity:0;pointer-events:none}
.tab-glare{position:absolute;inset:-20%;z-index:6;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.07) 49%,transparent 56%)}
.am-wipe{position:absolute;left:0;top:-12%;z-index:4;width:3px;height:124%;background:linear-gradient(#f6e3ae,#c9a45c);box-shadow:0 0 22px 5px rgba(232,196,120,.65);transform:translateX(calc(var(--w,0) * 1300px - 150px)) rotate(22deg);opacity:min(calc(var(--w,0) * 30),calc((1 - var(--w,0)) * 30),1)}
/* le site Ámbar */
.am{font-family:var(--f-sans);color:#22180f;-webkit-font-smoothing:antialiased;text-align:left}
.am-new{position:absolute;inset:0;z-index:2;background:#F6F0E6;clip-path:polygon(0 0,calc(var(--w,0) * 130%) 0,calc(var(--w,0) * 130% - 30%) 100%,0 100%)}
.am-scroll{position:absolute;left:0;top:0;width:100%;will-change:transform}
.am-nav{display:flex;align-items:center;gap:28px;height:80px;padding:0 44px;border-bottom:1px solid #e7dccb}
.am-logo{margin-right:auto;font:italic 400 34px/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;color:#22180f}
.am-nav nav{display:flex;gap:26px;font-size:16px;color:#6b5d4d}
.am-cart{position:relative;display:flex;color:#3a2f24}
.am-cart svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.am-cart i{position:absolute;right:-9px;top:-7px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#22180f;color:#f6f0e6;font:600 11px/1 var(--f-sans);font-style:normal}
.am-out{padding:10px 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px #22180f;font:600 15px var(--f-sans)}
.am-hero{display:grid;gap:24px;padding:30px 44px 0}
.am-copy small,.am-hrs small,.pm-hrs small,.am-story small{display:block;font:500 13px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#b0731f}
.am-copy .mh4{margin:8px 0 0;font:400 54px/1.03 "Instrument Serif",Georgia,serif;letter-spacing:-.02em;color:#1d1611;max-width:16ch}
.am-copy p{margin:12px 0 0;font-size:18px;color:#6b5d4d}
.am-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.am-card{padding:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #ece2d2,0 10px 24px -18px rgba(60,35,10,.35)}
.am-img{display:grid;place-items:center;height:150px;border-radius:10px;background:radial-gradient(80% 90% at 50% 75%,#f3e2c2,#ece0cc 70%)}
.am-img svg{width:auto;height:84%}
.am-meta{display:flex;justify-content:space-between;align-items:baseline;padding:10px 4px 2px}
.am-meta span{font:600 16px var(--f-sans)}
.am-meta b{font:400 24px "Instrument Serif",Georgia,serif;color:#b0731f}
.am-ctas{display:flex;justify-content:flex-end;gap:12px}
.am-ctas span,.pm-btn{display:inline-flex;justify-content:center;padding:14px 26px;border-radius:999px;font:600 16px var(--f-sans)}
.am-ctas .b,.pm-btn.b{background:#1d1611;color:#f6f0e6}
.am-ctas .o,.pm-btn.o{box-shadow:inset 0 0 0 1.5px #1d1611}
.am-story{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:30px;margin-top:46px;padding:44px;background:#1d1611;color:#efe6d6}
.am-story small{color:#d9b672}
.am-story .mh5,.am-book .mh5,.am-where .mh5{margin:10px 0 0;font:400 42px/1.05 "Instrument Serif",Georgia,serif;letter-spacing:-.015em}
.am-story p{margin-top:12px;color:#b9ac98;font-size:16px}
.am-story-img svg{height:210px;width:auto;margin:0 auto}
.am-book{padding:50px 44px 20px}
.am-book .mh5,.am-where .mh5{margin:0;color:#1d1611}
.am-book>p{margin:8px 0 22px;color:#6b5d4d;font-size:16px}
.am-days,.am-hours{display:flex;gap:12px;margin-bottom:12px}
.am-days span{display:grid;place-items:center;width:118px;height:76px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #ece2d2;font:600 16px var(--f-sans)}
.am-days span.on{background:#1d1611;color:#f6f0e6}
.am-hours span{padding:10px 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(34,24,15,.18);font-size:15px}
.am-hours span.on{background:#f7e7cf;box-shadow:inset 0 0 0 1.5px #b8641e}
.am-confirm{display:inline-grid;gap:6px;margin-top:10px;padding:20px 28px;border-radius:18px;background:#b8641e;color:#fff}
.am-confirm b{font:400 32px "Instrument Serif",Georgia,serif}
.am-where{padding:40px 44px 50px}
.am-where-in{display:grid;grid-template-columns:1fr 1.3fr;gap:22px;margin-top:20px}
.am-hrs,.pm-hrs{display:grid;gap:6px;align-content:center;padding:24px 26px;border-radius:18px;background:#1d1611;color:#f6f0e6}
.am-hrs small,.pm-hrs small{color:#e0b36a}
.am-hrs b{font:400 26px "Instrument Serif",Georgia,serif}
.am-hrs span,.pm-hrs span{color:#b9ac98;font-size:15px}
.am-map{height:230px;border-radius:18px;overflow:hidden}
.am-map svg,.pm-map svg{display:block;width:100%;height:100%}
.am-foot{display:flex;align-items:center;gap:22px;padding:34px 44px;background:#1d1611;color:#9c8e7a;font-size:14px}
.am-foot .am-logo{margin:0;color:#f2eadc}
/* l'ancienne web (muette, maladroite) */
.am-old{position:absolute;inset:0;z-index:1;background:#ecdde3;color:#9a4f73;font-family:"Comic Sans MS","Comic Neue",cursive}
.ob-top{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:#c77fa3;color:#fff;font-size:32px}
.ob-top b{font-style:italic;text-shadow:2px 2px 0 #6e3a55}
.ob-top i{font:900 24px Impact,"Arial Black",sans-serif;font-style:normal;color:#ead27c}
.ob-mar{overflow:hidden;white-space:nowrap;padding:8px 0;background:#a9cdd0;color:#4f3a48;font:700 18px Arial,sans-serif}
.ob-mar span{display:inline-block;padding-left:100%;animation:obmar 16s linear infinite}
@keyframes obmar{to{transform:translateX(-100%)}}
.ob-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 28px}
.ob-grid i{height:150px;filter:blur(1.5px);background:conic-gradient(#d8bca4 25%,#b8977d 0 50%,#d8bca4 0 75%,#b8977d 0) 0 0/16px 16px}
.ob-grid i:nth-child(3n+2){background:conic-gradient(#c3cc9f 25%,#99a774 0 50%,#c3cc9f 0 75%,#99a774 0) 0 0/18px 18px}
.ob-grid i:nth-child(3n){background:conic-gradient(#e3c3d0 25%,#c294a8 0 50%,#e3c3d0 0 75%,#c294a8 0) 0 0/14px 14px}
.ob-tiny{margin:0 28px;font:11px/1.3 "Times New Roman",serif;color:#8a5670}
.ob-tel{margin:16px 28px;font:700 22px "Times New Roman",serif;color:#b5544a;text-decoration:underline}
/* ce qui sort de l'écran */
.pops{position:absolute;inset:0;z-index:3;pointer-events:none;perspective:1400px}
.pop{position:absolute;visibility:hidden;box-sizing:content-box;margin:-16px 0 0 -20px;padding:16px 20px;border-radius:20px;background:#F6F0E6;transform-origin:30% 50%;
  box-shadow:0 0 0 1px rgba(201,164,92,calc(var(--k,0) * .55)),0 calc(var(--k,0) * 46px) calc(var(--k,0) * 90px) -24px rgba(0,0,0,.85),0 0 calc(var(--k,0) * 60px) rgba(232,196,120,calc(var(--k,0) * .18))}
.pop>*{margin:0!important}
.chip-speed{position:absolute;left:830px;top:-6px;z-index:4;display:flex;align-items:center;gap:12px;padding:14px 22px 14px 18px;border-radius:999px;background:#111;color:#eee8dc;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.8);font:500 16px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0}
.chip-speed i{width:10px;height:10px;border-radius:50%;background:#e8806e;box-shadow:0 0 10px #e8806e}
.chip-speed.fast{color:#e8cf94}.chip-speed.fast i{background:#e8cf94;box-shadow:0 0 12px #e8cf94}
.g-res{position:absolute;left:40px;top:560px;z-index:4;width:470px;padding:20px 22px;border-radius:20px;background:#fff;font-family:Arial,Helvetica,sans-serif;box-shadow:0 40px 80px -24px rgba(0,0,0,.85);opacity:0;transform-origin:20% 50%}
.g-top{display:flex;align-items:center;gap:12px}
.g-top i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f1ede6;color:#b8641e;font:600 17px var(--f-sans);font-style:normal}
.g-top b{display:block;font-weight:400;font-size:16px;color:#202124}
.g-top span{font-size:13px;color:#4d5156}
.g-res a{display:block;margin:12px 0 6px;font-size:22px;color:#1a0dab}
.g-res p{margin:0;font-size:14.5px;line-height:1.45;color:#4d5156}
/* iPhone */
.iph{position:absolute;left:880px;top:140px;z-index:4;width:300px;height:620px;opacity:0;transform-origin:50% 60%;will-change:transform}
.iph-in{position:absolute;inset:0;border-radius:52px;padding:11px;background:#0a0a0b;box-shadow:0 0 0 2px #7c7d82,0 0 0 3.5px #c9cace,0 0 0 4.5px #6d6e72,0 60px 110px -36px rgba(0,0,0,.95)}
.iph-island{position:absolute;left:50%;top:22px;z-index:2;width:92px;height:27px;margin-left:-46px;border-radius:20px;background:#000}
.iph-scr{position:relative;height:100%;border-radius:42px;overflow:hidden;background:#F6F0E6}
.pm{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column;gap:12px;padding:0 18px 30px;will-change:transform}
.pm-status{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 12px;font:600 14px var(--f-sans)}
.pm-status i{width:24px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #22180f;background:linear-gradient(90deg,#22180f 70%,transparent 70%) 2px 2px/18px 7px no-repeat}
.pm-nav{display:flex;align-items:center}
.pm .am-logo{font-size:28px}
.pm-h{margin:4px 0 2px;font:400 30px/1.06 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.pm-card .am-img{height:132px}
.pm-btn{display:flex;padding:14px;font-size:15px}
.pm-hrs b{font:400 20px "Instrument Serif",Georgia,serif}
.pm-map{height:130px;border-radius:16px;overflow:hidden}
.pm-col{margin:10px 0 0;font:400 24px "Instrument Serif",Georgia,serif}
.pm-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm-two .am-img{height:92px}
.pm-two .am-meta b{font-size:18px}
.calm .ob-mar span{animation:none}
@media (max-width:900px){.anat.dom3 .note{z-index:5}}
.am-copy{justify-self:start;width:max-content;max-width:640px}.am-ctas{justify-self:end}
/* pages intérieures : la moitié sombre arrive comme une feuille qui recouvre la page claire */
.dark-half.sheet{margin-top:3vh;border-radius:44px 44px 0 0;box-shadow:0 -40px 80px -50px rgba(30,20,5,.45)}
.dark-half.sheet>.sec:first-of-type{padding-top:13vh}
/* apparitions au scroll aussi pour les anciennes classes .rv des pages intérieures */
.fx .rv{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease-out),transform 1.1s var(--ease-out)}
.fx .rv.in{opacity:1;transform:none}
.calm .rv{opacity:1;transform:none}

/* en-tête Instagram (pages réseaux) : styles internes du profil */
/* ig internals */
.art-ig .ig-status{display:flex;justify-content:space-between;align-items:center;padding:16px 30px 0;font-size:14px;font-weight:600;height:40px}
.art-ig .ig-status .ic{display:flex;gap:5px;align-items:center}
.art-ig .ig-status .ic i{display:block;background:#111;border-radius:2px}
.art-ig .ig-user{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 0;height:44px}
.art-ig .ig-user b{font-size:18px;font-weight:700;display:flex;align-items:center;gap:4px;letter-spacing:-.01em}
.art-ig .ig-user b svg{width:12px;height:12px}
.art-ig .ig-user .ico{display:flex;gap:18px}
.art-ig .ig-user .ico svg{width:22px;height:22px}
.art-ig .ig-head{display:flex;align-items:center;gap:22px;padding:8px 16px 0;height:100px}
.art-ig .ig-ava{width:86px;height:86px;border-radius:50%;flex:none;position:relative;overflow:hidden}
.art-ig .ig-stats{display:flex;flex:1;justify-content:space-around;text-align:center;font-size:13px;line-height:1.25}
.art-ig .ig-stats b{display:block;font-size:17px}
.art-ig .ig-bio{padding:8px 16px 0;font-size:13.5px;line-height:1.38;height:118px}
.art-ig .ig-bio .nm{font-weight:700}
.art-ig .ig-bio .cat{color:#737373}
.art-ig .ig-bio .lk{color:#00376b;font-weight:600}
.art-ig .ig-btns{display:flex;gap:6px;padding:8px 16px 0;height:46px}
.art-ig .ig-btns span{flex:1;height:32px;border-radius:8px;background:#efefef;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center}
.art-ig .ig-btns span.pri{background:#0095f6;color:#fff}
.art-ig .ig-hl{display:flex;gap:14px;padding:12px 16px 0;overflow:hidden;height:98px}
.art-ig .ig-hl div{width:62px;flex:none;text-align:center;font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art-ig .ig-hl .cv{width:62px;height:62px;border-radius:50%;border:1px solid #dbdbdb;padding:3px;margin-bottom:5px}
.art-ig .ig-hl .cv>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden}
.art-ig .ig-tabs{display:flex;border-top:1px solid #efefef;height:42px}
.art-ig .ig-tabs span{flex:1;display:flex;align-items:center;justify-content:center}
.art-ig .ig-tabs span:first-child{border-bottom:1.5px solid #111}
.art-ig .ig-tabs svg{width:22px;height:22px}
.art-ig .ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.art-ig .ig-grid>div{aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.art-ig .pin-ic{position:absolute;top:6px;right:6px;width:14px;height:14px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.art-ig .ig-grid>div{aspect-ratio:4/5}

/* ===== pages intérieures, moitié sombre : cartes lisibles, plus de vide ===== */
.dark-half .inc-box,.dark-half .case-col.after{background:linear-gradient(160deg,#E4C888,#C9A45C 55%,#B08A42);color:#121110;box-shadow:0 40px 80px -40px rgba(201,164,92,.45)}
.dark-half .inc-t,.dark-half .case-col.after h3{color:#121110}
.dark-half .inc-list li,.dark-half .case-col.after li{color:#2A2114;border-color:rgba(18,17,16,.14)}
.dark-half .inc-list svg{color:#121110}
.dark-half .offer{background:#14110D}
.dark-half .offer.feat{box-shadow:0 0 0 1.5px var(--gold),0 40px 80px -40px rgba(201,164,92,.35)}
.dark-half .offer .btn-gold{background:var(--gold);color:#121110}
.dark-half .case-col{background:#14110D}
.dark-half .faq summary i{background:rgba(238,232,220,.08)}
.dark-half .faq summary i::before,.dark-half .faq summary i::after{background:var(--ink)}
.dark-half .faq details[open] summary i{background:var(--gold)}
.dark-half .faq details[open] summary i::before,.dark-half .faq details[open] summary i::after{background:#121110}
.offers{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.skills-grid.one{grid-template-columns:1fr}
.skills-grid .skill{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:30px 60px;padding:clamp(28px,4vw,56px)}
.skills-grid .skill .ill{grid-column:2;grid-row:1;width:100%;height:auto;max-height:300px;min-height:0;padding:0;background:none;border:0}
.skills-grid .skill .k{display:block;margin-bottom:12px;font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-t)}
.skills-grid .skill h3{font:300 clamp(30px,3vw,46px)/1.05 var(--f-disp);margin-bottom:20px}
.dark-half .skills-grid .skill h3{font-family:var(--f-serif);font-weight:300}
.skills-grid .skill ul{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.skills-grid .skill li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.skills-grid .skill li::before{content:"";flex:none;width:12px;height:1px;margin-top:.8em;background:var(--gold-t)}
.dark-half .skills-grid .skill{background:radial-gradient(90% 120% at 85% 50%,#2A2218,#14110D 60%)}
@media (max-width:900px){.skills-grid .skill{grid-template-columns:1fr}.skills-grid .skill .ill{grid-column:1;grid-row:auto;max-height:200px}.skills-grid .skill ul{grid-template-columns:1fr}}

/* ===== bloc final : l'or (blanc → noir → or), comme une dernière feuille posée sur le noir ===== */
.final{background:linear-gradient(165deg,#E6CB8D 0,#CDA95F 45%,#B48D45 100%);color:#121110;border-radius:44px 44px 0 0;margin-top:4vh;padding:16vh 0 18vh}
.final::before{width:80vw;height:60vw;margin:-30vw 0 0 -40vw;background:radial-gradient(circle,rgba(255,248,225,.45),transparent 60%);filter:blur(40px)}
.dark-half .final h2,.final h2{color:#121110}
.dark-half .final em,.final em{color:#4A3410}
.dark-half .final .lead,.final .lead{color:#3B2D14}
.final .crest{background:#121110;box-shadow:0 0 0 1px rgba(18,17,16,.6),0 0 0 8px rgba(18,17,16,.08),0 30px 70px -26px rgba(40,25,5,.6)}
.final .u002,.dark-half .final .u002{--bg:#121110;--fg:#F3E3BC;--blob:#F6EBD0}
.final .u002:hover .u002-txt,.final .u002-orb{color:#121110}
.dark-half .final .u002-orb{color:#121110}
.final .u002-btn{box-shadow:0 24px 50px -22px rgba(40,25,5,.7)}
.final .btn-gold,.final .pill-gold,.dark-half .final .btn-gold{background:#121110;color:#F3E3BC}
.final .btn-gold:hover{background:#2a2420}
.final ::selection{background:#121110;color:#F3E3BC}
.foot{margin-top:0}
/* accueil · fond simple : charbon, une lumière douce derrière la tablette qui glisse lentement avec le scroll */
.anat.dom3 .anat-card{background:radial-gradient(ellipse 90% 80% at 60% 45%,#1b1a19 0,#0f0f0e 55%,#080808 100%)}
.anat.dom3 .anat-card::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(38% 48% at calc(52% + var(--p,0) * 14%) 46%,rgba(255,240,210,.09),transparent 70%),radial-gradient(50% 30% at 60% 104%,rgba(201,164,92,.12),transparent 70%)}
.anat.dom3 .anat-card::after{display:none}
.iph{left:770px;top:150px}

/* =====================================================================
   Navbar v2 : îlot flottant en verre, pastille qui glisse sous les liens (Lucian #039),
   menu « Servicios » avec aperçu, compacte au scroll ; en noir au-dessus des parties sombres.
   ===================================================================== */
/* Lucian UX/UI Prompt #039 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#039 */
.hd{top:12px;height:auto;padding:0 var(--gut);background:none!important;border:0!important;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;transition:top var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.hd-pill{pointer-events:auto;position:relative;max-width:1240px;height:62px;gap:14px;padding:0 8px 0 16px;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 76%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 0 0 1px var(--line),0 14px 34px -22px rgba(30,20,5,.4);transition:height var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.hd.scrolled{top:8px}
.hd.scrolled .hd-pill{height:56px;box-shadow:0 0 0 1px var(--line2),0 18px 40px -22px rgba(30,20,5,.5)}
.brand{letter-spacing:.2em;font-size:13px}
.brand img{width:30px;height:30px}
.hd-links{position:relative;margin:0 auto;padding:4px;gap:0;border-radius:999px}
.hd-links a{z-index:1;padding:9px 15px;font-size:14.5px;font-weight:500;transition:color .35s var(--ux-ease)}
.hd-links a::before{display:none}
.hd-links a.pill-on{color:var(--bg)!important}
.hd-pillbg{position:absolute;left:0;top:4px;bottom:4px;width:var(--w,80px);border-radius:999px;background:var(--ink);transform:translateX(var(--x,5px));opacity:0;box-shadow:0 8px 16px -10px rgba(0,0,0,.5);transition:transform .5s var(--ux-spring),width .5s var(--ux-spring),opacity .3s var(--ux-ease)}
.hd-links.has-pill .hd-pillbg{opacity:1}
.hd-r{margin-left:0;gap:6px}
.hd-cta{height:46px;padding:0 8px 0 20px;gap:10px}
.hd-cta::after{content:"";width:30px;height:30px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121110' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .5s var(--spring)}
.hd-cta:hover::after{transform:translateX(3px) rotate(-8deg)}
.hd.on-dark .hd-cta::after{background-color:#121110;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8CF94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.hd.on-dark .hd-pill{background:rgba(16,14,12,.72);box-shadow:0 0 0 1px rgba(238,232,220,.1),0 18px 40px -22px rgba(0,0,0,.8)}
.hd.on-dark .hd-pillbg{background:var(--gold)}
.hd.on-dark .hd-links a.pill-on{color:#121110!important}
@media (min-width:1101px){.hd .u045-ham{display:none}}
@media (max-width:1100px){.hd-pill{padding-right:6px}}
@media (max-width:600px){.hd{top:8px;padding:0 10px}.hd-pill{height:56px;padding-left:10px}}
/* menu Servicios */
.hd-dd{position:absolute;left:50%;top:calc(100% + 10px);width:min(640px,calc(100vw - 32px));padding:10px;border-radius:24px;transform:translate(-50%,-6px) scale(.98);transform-origin:50% 0;opacity:0;visibility:hidden;pointer-events:auto;
  background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 0 0 1px var(--line),0 30px 60px -28px rgba(30,20,5,.5);
  display:grid;grid-template-columns:1fr 1fr;gap:6px;transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring),visibility 0s .45s}
.hd-dd.open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s var(--ux-ease),transform .45s var(--ux-spring)}
.hd-dd a{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;text-decoration:none;color:var(--ink);transition:background-color .25s var(--ux-ease)}
.hd-dd a:hover,.hd-dd a:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.hd-dd i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--ink);color:var(--gold)}
.hd-dd i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hd-dd b{display:block;font:500 15.5px var(--f-sans)}
.hd-dd small{display:block;color:var(--mut);font-size:13px}
.hd-dd a>svg{width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--mut);stroke-width:2;transition:transform .4s var(--spring)}
.hd-dd a:hover>svg{transform:translateX(4px);stroke:var(--ink)}
.hd.on-dark .hd-dd{background:rgba(16,14,12,.94)}
.hd.on-dark .hd-dd i{background:var(--gold);color:#121110}
.hd-links .dd-car{width:12px;height:12px;margin-left:-2px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .4s var(--spring)}
.hd-links .dd-open .dd-car{transform:rotate(180deg)}

/* =====================================================================
   Contact flottant (Lucian #011, éventail) : e-mail, Instagram, WhatsApp si configuré, auditoría
   ===================================================================== */
/* Lucian UX/UI Prompt #011 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#011 */
.wa-float{display:none!important}
.u011{--dy:0px;position:fixed;right:22px;bottom:22px;z-index:90;width:62px;height:62px}
.u011-halo{position:absolute;left:31px;top:31px;width:330px;height:330px;margin:-165px 0 0 -165px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 26%,transparent),color-mix(in srgb,var(--gold) 6%,transparent) 70%,transparent);transform:scale(.2);opacity:0;transition:transform .6s var(--ux-ease),opacity .4s var(--ux-ease),translate .6s var(--ux-spring)}
.u011.is-open .u011-halo{transform:none;opacity:1;translate:0 var(--dy)}
.u011-fab{position:absolute;left:0;top:0;width:62px;height:62px;border:0;padding:0;border-radius:50%;color:#121110;background:linear-gradient(145deg,#ECD49B,#C9A45C 55%,#A9853D);z-index:2;cursor:pointer;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),0 20px 36px -16px rgba(120,85,25,.8);transition:transform .5s var(--ux-spring),background .4s,translate .6s var(--ux-spring)}
.u011.is-open .u011-fab{translate:0 var(--dy)}
.u011-fab:hover{transform:scale(1.06)}
.u011-fab::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(201,164,92,.5);animation:u011-breathe 2.6s var(--ux-ease) infinite}
.u011.is-open .u011-fab::after{animation:none}
@keyframes u011-breathe{0%{box-shadow:0 0 0 0 rgba(201,164,92,.5)}70%,100%{box-shadow:0 0 0 18px rgba(201,164,92,0)}}
.u011-fab:active{transform:scale(.9)}
.u011-fab:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.u011-fab svg{width:26px;height:26px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ux-spring)}
.u011-fab .x{position:absolute;inset:0;margin:auto;opacity:0;transform:rotate(-90deg)}
.u011.is-open .u011-fab .m{opacity:0;transform:rotate(90deg)}
.u011.is-open .u011-fab .x{opacity:1;transform:none}
.u011-it{position:absolute;left:4px;top:4px;width:54px;height:54px;padding:0;border:0;border-radius:50%;background:none;z-index:1;text-decoration:none;cursor:pointer;
  transform:translate(0,0) scale(.3);opacity:0;pointer-events:none;transition:transform .5s var(--ux-spring),opacity .25s var(--ux-ease),translate .6s var(--ux-spring);transition-delay:calc((3 - var(--i)) * 30ms)}
.u011-it i{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;color:var(--gold-l);background:#161310;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(201,164,92,.35),0 14px 24px -14px rgba(0,0,0,.6);transition:transform .4s var(--ux-spring)}
.u011-it svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.u011-it span{position:absolute;right:62px;top:50%;transform:translateY(-50%);padding:6px 10px;border-radius:999px;background:#161310;color:#EEE8DC;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
.u011-it:hover i{transform:scale(1.1)}
.u011-it:active i{transform:scale(.92)}
.u011-it:focus-visible{outline:none}
.u011-it:focus-visible i{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold)}
.u011.is-open .u011-it{translate:0 var(--dy);transform:translate(var(--x),var(--y)) scale(1);opacity:1;pointer-events:auto;transition-delay:calc(var(--i) * 45ms)}
.u011-it.is-picked i{animation:u011-pick .5s var(--ux-ease)}
@keyframes u011-pick{50%{transform:scale(1.25)}}
.u011-note{margin:0;position:absolute;right:0;bottom:76px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#161310;color:#EEE8DC;font-size:14px;font-weight:600;white-space:nowrap;
  transform:translateY(14px) scale(.9);opacity:0;pointer-events:none;transition:opacity .3s var(--ux-ease),transform .5s var(--ux-spring)}
.u011-note i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.u011-note.is-on{opacity:1;transform:none}
.u011 .u011-it span{opacity:0;transition:opacity .3s var(--ux-ease) .2s}
.u011.is-open .u011-it span{opacity:1}
@media (max-width:600px){.u011{right:14px;bottom:14px}}
.calm .u011-fab::after{animation:none}
body.menu-open .u011{opacity:0;pointer-events:none}

.wb-prods i{display:grid;place-items:center;background:radial-gradient(80% 90% at 50% 75%,#f3e2c2,#ece0cc 70%)}
.wb-prods svg{height:82%;width:auto}

/* page agence : zone (deux cartes + carte illustrée de la côte) */
.zone-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:16px;align-items:stretch}
.zone-card{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.zone-card h3{font:400 30px/1.05 var(--f-disp)}
.dark-half .zone-card{background:#14110D}
.dark-half .zone-card h3{font-family:var(--f-serif);font-weight:300}
.zone-card p{color:var(--mut);font-size:15.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips li{padding:7px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;color:var(--ink-2)}
.zone-map{grid-column:2;grid-row:1/3;margin:0;padding:18px;border-radius:24px;background:radial-gradient(70% 60% at 62% 45%,#211B13,#100E0B 75%);box-shadow:0 0 0 1px var(--line)}
.zone-map svg{width:100%;height:100%;max-height:560px}
.zm-land{fill:rgba(238,232,220,.035)}
.zm-coast{fill:none;stroke:rgba(201,164,92,.55);stroke-width:1.4}
.zm-sea{font:italic 300 15px var(--f-serif,Georgia);fill:rgba(238,232,220,.22);letter-spacing:.04em}
.zm-net{fill:none;stroke:rgba(232,207,148,.55);stroke-width:1.2;stroke-dasharray:4 6;animation:zmDash 2.4s linear infinite}
@keyframes zmDash{to{stroke-dashoffset:-40}}
.zm-dot{fill:#EEE8DC}
.zm-lab{font:500 11px var(--f-mono);letter-spacing:.06em;fill:#A79E8F}
.zm-hl{font-size:14px;fill:#E8CF94}
.zm-home{fill:var(--gold);filter:drop-shadow(0 0 8px rgba(232,196,120,.9))}
.zm-ring{fill:none;stroke:var(--gold);stroke-width:1.2;transform-origin:248px 214px;transform-box:view-box;animation:zmRing 2.6s var(--ease-out) infinite}
.zm-ring.r2{animation-delay:1.3s}
@keyframes zmRing{from{transform:scale(.6);opacity:.9}to{transform:scale(3.4);opacity:0}}
.calm .zm-net,.calm .zm-ring{animation:none}
@media (max-width:900px){.zone-grid{grid-template-columns:1fr}.zone-map{grid-column:1;grid-row:auto}}

/* transitions entre pages (View Transitions entre documents) : la navbar reste en place, la page glisse en fondu */
@view-transition{navigation:auto}
.hd-pill{view-transition-name:kz-nav}
.u011{view-transition-name:kz-fab}
::view-transition-old(root){animation:kzPageOut .35s cubic-bezier(.7,0,.84,0) both}
::view-transition-new(root){animation:kzPageIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes kzPageOut{to{opacity:0;transform:scale(.985);filter:blur(4px)}}
@keyframes kzPageIn{from{opacity:0;transform:translateY(24px)}}
:root.calm::view-transition-old(root),:root.calm::view-transition-new(root){animation-duration:.01s}
@media (max-width:900px){.sec-head{grid-template-columns:1fr!important}.sec-head>.eyebrow{grid-column:1!important;grid-row:auto!important;justify-self:start!important;order:-1;margin:0}}
/* passage noir → or : l'or se lève en dôme depuis le bas (bord lumineux), un reflet de feuille d'or traverse la bande */
.final{clip-path:ellipse(calc(16% + var(--gr,1) * 94%) calc(var(--gr,1) * 150%) at 50% 100%);
  background:
    radial-gradient(ellipse calc(16% + var(--gr,1) * 94%) calc(var(--gr,1) * 150%) at 50% 100%,transparent 93%,rgba(255,247,222,.95) 99.2%,transparent 100%),
    linear-gradient(105deg,transparent 30%,rgba(255,252,238,.6) 47%,rgba(255,255,255,0) 62%) calc(-120% + var(--gs,1) * 340%) 0/55% 100% no-repeat,
    linear-gradient(165deg,#E6CB8D 0,#CDA95F 45%,#B48D45 100%)}
.final .wrap{opacity:calc(.15 + var(--gr,1) * .85);transform:translateY(calc((1 - var(--gr,1)) * 70px)) scale(calc(.96 + var(--gr,1) * .04))}
.final .crest{transition:transform 1s var(--spring),box-shadow 1s var(--ease-out)}
.final.risen .crest{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(18,17,16,.6),0 0 0 8px rgba(18,17,16,.08),0 40px 80px -26px rgba(40,25,5,.75)}
.final.risen .crest-gleam{animation:gleam 1.6s var(--ease-io) .1s both}

/* ===== audit design : zones tactiles ≥ 44 px, contrastes ≥ 4,5:1, micro-textes ≥ 12 px ===== */
:root{--f-mono:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.mono{font-weight:600;letter-spacing:.08em}
.langs{padding:0;gap:0}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:0 6px;font-size:12px;font-weight:600}
.text-link{display:inline-flex;align-items:center;min-height:44px}
.ba-tabs button{height:44px}
.foot ul{gap:0}
.foot ul a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
.copy-btn{height:44px}
.hd-links a{min-height:44px;padding-block:0;display:flex;align-items:center}
.hd-cta{height:44px}
.hero-zone{color:var(--mut)}
.fict,.anat .fict{color:#A39A8B;font-size:12px}
.foot-bottom{color:#A39A8B}
.st-chip{font-size:12px;height:30px}
.note .ix{font-size:12px}
.note .nt{margin:0;font:500 16px/1.3 var(--f-sans);color:#CFC6B6;transition:color var(--dur-base) var(--ease-out)}
.note.cur .nt{font:400 24px/1.12 var(--f-disp);letter-spacing:.005em;color:#fff;padding-top:2px}
@media (max-width:900px){.fx .note.cur .nt{font-size:20px}}
.scene .eyebrow,.scene .fict,.scene .note .ix{font-size:12px}
.u011{transition:opacity .35s var(--ux-ease),transform .45s var(--ux-spring)}
.u011.is-away{opacity:0;transform:scale(.6) translateY(20px);pointer-events:none}
.zone-note{color:var(--mut)}
.ba-lab{font-size:12px}
.foot-h,.foot .foot-h{font-size:12px}
.offer .time,.monthly small,.xc-price small{font-size:12px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs{margin-bottom:12px}
.brand{min-height:44px}
.copy-btn,.link-btn,.mini{min-height:44px}
.st-chip span{white-space:nowrap}.st-chip{padding:0 12px}
/* passage noir → or : un long dégradé propre (plus de dôme ni de bord net) ; le reflet doré ne passe que sur la partie or */
.final{clip-path:none;border-radius:0;margin-top:0;padding-top:36vh;
  background:
    linear-gradient(105deg,transparent 30%,rgba(255,252,238,.45) 47%,rgba(255,255,255,0) 62%) calc(-120% + var(--gs,1) * 340%) 100%/55% 62% no-repeat,
    linear-gradient(180deg,#0D0B08 0,#15100A 6%,#2C2213 13%,#5A4524 21%,#937238 29%,#C29D57 36%,#D6B675 46%,#D2B06B 62%,#C49F57 82%,#B48D45 100%)}
.final::before{top:62%}

/* =====================================================================
   Ordre des ambiances : NOIR en haut (hero, en-tête, scène) → feuille BLANCHE (le contenu) → OR à la fin
   ===================================================================== */
html,body{background:#0D0B08}
.dark-top{padding-bottom:6vh}
.light-half{position:relative;z-index:1;background:var(--bg);color:var(--ink)}
.light-half.sheet{border-radius:44px 44px 0 0;box-shadow:0 -40px 90px -40px rgba(0,0,0,.65)}
.light-half.sheet>.sec:first-of-type{padding-top:13vh}
/* hero sur fond noir */
.dark-half .hero-h1{color:var(--ink)}
.dark-half .ba-stage{box-shadow:0 0 0 1px rgba(238,232,220,.1),0 50px 100px -40px rgba(0,0,0,.9)}
.dark-half .ba-tabs{background:#17140F;box-shadow:inset 0 0 0 1px var(--line)}
.dark-half .ba-tabs button{color:var(--mut)}
.dark-half .ba-tabs button[aria-selected="true"]{background:var(--gold);color:#121110}
.dark-half .ba-tags li span{color:#121110}
.dark-half .ba-tags li::after,.dark-half .ba-tags li i{background:var(--gold)}
.dark-half .ba-lab{background:rgba(255,255,255,.9);color:#3A3732}
.dark-half .ba-lab-a{background:#121110;color:#fff}
.dark-half .hero-zone{color:var(--mut)}
.dark-half .trust svg{color:var(--gold)}
.dark-half .rb-track .it{background:#15120E;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.dark-half .scroll-hint{color:var(--mut)}
.dark-half .page-top .eyebrow{background:#17140F;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.dark-half .crumbs a{color:var(--mut)}
.dark-half .crumbs [aria-current]{color:var(--ink)}
.dark-half .pta .art-fict{color:var(--mut)}
.dark-half .zone-note{color:var(--mut)}
.dark-half .page-top::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 60% at 75% 50%,rgba(201,164,92,.14),transparent 70%)}
.dark-half .page-top,.dark-half .hero{position:relative}
.dark-half .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 55% at 28% 52%,rgba(201,164,92,.13),transparent 70%)}
.dark-half .hero>.wrap,.dark-half .page-top>.wrap{position:relative;z-index:1}
/* la scène garde sa carte, posée sur le noir */
.dark-half .anat-card{box-shadow:0 0 0 1px rgba(238,232,220,.07),0 40px 90px -50px rgba(0,0,0,.8)}
.dark-half .scene .pin{box-shadow:0 0 0 1px rgba(238,232,220,.07)}
/* or à la fin : dégradé doux depuis le blanc */
.light-half .final{padding-top:30vh;
  background:
    linear-gradient(105deg,transparent 30%,rgba(255,252,238,.45) 47%,rgba(255,255,255,0) 62%) calc(-120% + var(--gs,1) * 340%) 100%/55% 66% no-repeat,
    linear-gradient(180deg,#F3F2EE 0,#F1EBDD 8%,#EBDDBD 17%,#E2CA92 26%,#D8B874 35%,#D2B06B 50%,#C9A55E 72%,#B48D45 100%)}
.light-half .final::before{top:64%}
.final h2,.light-half .final h2{font:300 clamp(44px,6.4vw,104px)/1.02 "Instrument Serif","Iowan Old Style",Georgia,serif;letter-spacing:-.008em;font-variation-settings:"opsz" 96;max-width:13ch}.final em{font-style:italic}.dark-half .hero-slogan em{font-style:normal}
.light-half .final{background-size:55% 100%,100% 100%}

/* fond continu (noir → blanc → or) : un calque fixe dont la couleur suit le scroll, les sections deviennent transparentes */
#kzBg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:#0D0B08}
html.tone #dust{position:fixed;inset:0;width:100%;height:100vh;height:100lvh;margin:0;z-index:-1}
html.tone .dark-half,html.tone .light-half{background:transparent;border-radius:0;box-shadow:none;isolation:auto}
html.tone .dark-top{padding-bottom:16vh}
html.tone .light-half.sheet>.sec:first-of-type{padding-top:10vh}
html.tone .light-half .final{background:linear-gradient(105deg,transparent 30%,rgba(255,252,238,.45) 47%,rgba(255,255,255,0) 62%) calc(-120% + var(--gs,1) * 340%) 100%/55% 100% no-repeat;padding-top:22vh}
html.tone-dark .hd{--bg:#0D0B08;--ink:#EEE8DC;--mut:#A79E8F;--line:rgba(238,232,220,.1);color:var(--ink)}
html.tone-dark .hd .hd-pill{background:rgba(16,14,12,.72);box-shadow:0 0 0 1px rgba(238,232,220,.1),0 18px 40px -22px rgba(0,0,0,.8)}
html.tone-dark .hd .hd-pillbg{background:var(--gold)}
html.tone-dark .hd .hd-links a.pill-on{color:#121110!important}
html.tone-dark .hd .pill-gold{background:var(--gold);color:#121110}
html.tone-dark .hd .langs a[aria-current="true"]{background:var(--gold);color:#121110}
html.tone-dark .hd .u045-ham{background:rgba(238,232,220,.1)}
html.tone-dark .hd .hd-cta::after{background-color:#121110;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8CF94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
html.tone-dark .hd-dd{background:rgba(16,14,12,.94)}
html.tone-dark .hd-dd i{background:var(--gold);color:#121110}
html.tone body{background:transparent}
/* fond continu : la carte de la scène devient transparente quand elle s'ouvre en plein écran (plus de bord), le reflet doré se fond en haut */
html.tone .anat.dom3 .anat-card{background:radial-gradient(ellipse 90% 80% at 60% 45%,rgba(27,26,25,calc(1 - var(--end,0))) 0,rgba(15,15,14,calc(1 - var(--end,0))) 55%,rgba(8,8,8,calc(1 - var(--end,0))) 100%);box-shadow:none}
html.tone .anat.dom3 .anat-card::before{opacity:calc(1 - var(--end,0))}
html.tone .scene .pin{background:rgba(13,11,8,calc(1 - var(--end,0)));box-shadow:none}
html.tone .light-half .final{background:none}
html.tone .final::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,252,238,.42) 47%,transparent 62%) calc(-120% + var(--gs,1) * 340%) 0/55% 100% no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%);mask-image:linear-gradient(to bottom,transparent,#000 40%)}
/* scène : étiquette d'état et mot Antes/Después empilés (jamais deux textes à la fois, rien de coupé) */
.anat .st-chip{display:inline-grid;align-items:center;height:30px;padding:0 12px;overflow:hidden}
.anat .st-chip span{grid-area:1/1;position:static;left:auto;white-space:nowrap;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.anat .st-chip .b{transform:translateY(8px);opacity:0}
.anat.is-after .st-chip .a{transform:translateY(-8px);opacity:0}
.anat.is-after .st-chip .b{transform:none;opacity:1}
.anat .state-word{display:inline-grid;height:auto;min-width:0;overflow:visible;line-height:1.15}
.anat .state-word span{grid-area:1/1;position:static;transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.anat .state-word .b{transform:translateY(8px);opacity:0}
.anat.is-after .state-word .a{transform:translateY(-8px);opacity:0}
.anat.is-after .state-word .b{transform:none;opacity:1}
@media (max-width:900px){.anat .state{gap:8px 12px}.anat .st-chip{font-size:12px}}
@media (max-width:900px){.anat.compact:not(.is-done) .fict{opacity:0;transition:opacity .3s}}
/* partie blanche : motifs dorés discrets (anneaux de médaille, trame de points, filet sous les titres) */
.light-half>.sec{position:relative;overflow:clip}
.light-half>.sec>.wrap,.light-half>.sec>.svc-tabs,.light-half>.sec>.skill,.light-half>.sec>.sec-head{position:relative;z-index:1}
.light-half>.sec::before{content:"";position:absolute;z-index:0;width:560px;height:560px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(201,164,92,.42);outline:1px solid rgba(201,164,92,.2);outline-offset:44px;
  background:radial-gradient(closest-side,rgba(201,164,92,.07),transparent 70%)}
.light-half>.sec:nth-of-type(odd)::before{right:-230px;top:-150px}
.light-half>.sec:nth-of-type(even)::before{left:-270px;bottom:-230px}
.light-half>.sec::after{content:"";position:absolute;z-index:0;width:240px;height:170px;pointer-events:none;
  background-image:radial-gradient(rgba(201,164,92,.6) 1.2px,transparent 1.7px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.light-half>.sec:nth-of-type(odd)::after{left:3%;bottom:6%}
.light-half>.sec:nth-of-type(even)::after{right:4%;top:8%}
.light-half .sec-head>h2::after{content:"";display:block;width:64px;height:2px;margin-top:22px;border-radius:2px;background:linear-gradient(90deg,var(--gold),rgba(201,164,92,0))}
@media (max-width:900px){.light-half>.sec::before{width:340px;height:340px;outline-offset:28px}.light-half>.sec:nth-of-type(odd)::before{right:-170px;top:-110px}.light-half>.sec:nth-of-type(even)::before{left:-190px;bottom:-150px}.light-half>.sec::after{width:160px;height:120px}}
.light-half>.sec::before{width:660px;height:660px;border:0;outline:0;border-radius:0;
  background:radial-gradient(circle closest-side,rgba(201,164,92,.07) 0,transparent 60%,transparent 83.6%,rgba(201,164,92,.45) 83.8%,rgba(201,164,92,.45) 84.1%,transparent 84.3%,transparent 99.4%,rgba(201,164,92,.24) 99.6%,rgba(201,164,92,.24) 99.9%,transparent 100%)}
.light-half>.sec:nth-of-type(odd)::before{right:-280px;top:-200px}
.light-half>.sec:nth-of-type(even)::before{left:-320px;bottom:-280px}
@media (max-width:900px){.light-half>.sec::before{width:400px;height:400px}.light-half>.sec:nth-of-type(odd)::before{right:-200px;top:-140px}.light-half>.sec:nth-of-type(even)::before{left:-220px;bottom:-180px}}

/* scène Instagram : plus courte, notes sans chevauchement (seule la note en cours montre sa description) */
.fx .scene.story{height:330vh}
@media (max-width:900px){.fx .scene.story{height:300vh}}
.scene .note:not(.cur) p{display:none}
.scene .note.cur p{display:block;max-height:none;opacity:1}
.scene .note .ix,.scene .note.on .ix,.scene .note.on:not(.cur) .ix,.scene .note.cur .ix{display:inline;width:auto;height:auto;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;animation:none;color:var(--gold);font:600 12px var(--f-mono)}
.scene .note .tx{gap:4px}
.scene .note:not(.cur) .tx{padding-block:4px}
.scene .note:not(.cur) h3{font-size:18px;color:#CFC6B6}
/* écusson doré (couronne + K) en bas des cartes sombres qui ont du vide */
.inc-box{position:relative}
.inc-box::after{content:"";flex:none;align-self:center;margin-top:auto;width:62px;height:72px;opacity:.85;background:url(/assets/loader-crown.png?v=69630643cf) 50% 0/26px auto no-repeat,url(/assets/k-256.webp?v=2c89c138af) 50% 100%/auto 50px no-repeat;filter:drop-shadow(0 4px 14px rgba(201,164,92,.35))}
.inc-box .inc-list{margin-bottom:28px}

/* =====================================================================
   Hero · vitrine 3D : trois sites inventés en carrousel, iPhone au premier plan (assets/hero.js)
   ===================================================================== */
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.hero-copy{order:-1}
.hero-show{position:relative;width:100%}
.hx-fit{position:relative;width:100%}
.hx-stage{position:absolute;left:0;top:0;width:920px;height:640px;transform-origin:0 0;perspective:2200px;perspective-origin:50% 40%}
.hx-stage::before{content:"";position:absolute;left:8%;right:8%;top:16%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.26),transparent 72%);filter:blur(10px);pointer-events:none}
.hx-win,.hx-phone{transform-style:preserve-3d}
.hx-win{position:absolute;left:50%;top:40px;width:700px;height:470px;margin-left:-350px;border-radius:14px;overflow:hidden;background:#f6f1e9;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 90px -30px rgba(0,0,0,.9);
  -webkit-box-reflect:below 10px linear-gradient(transparent 72%,rgba(255,255,255,.14));
  transition:transform 1.15s cubic-bezier(.65,0,.35,1),filter .9s var(--ease-out),opacity .9s var(--ease-out);will-change:transform}
.hx-win.pos-c{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);z-index:3;cursor:default}
.hx-win.pos-l{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + 34deg)) translate3d(-62%,-6px,-380px);z-index:1;filter:brightness(.42) saturate(.8)}
.hx-win.pos-r{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) - 34deg)) translate3d(62%,-6px,-380px);z-index:1;filter:brightness(.42) saturate(.8)}
.hx-win:not(.pos-c):hover{filter:brightness(.62) saturate(.9)}
.hx-chrome{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#ebe6de;border-bottom:1px solid #ddd6ca}
.hx-chrome>i{width:9px;height:9px;border-radius:50%;background:#d3ccc1}
.hx-chrome span{display:flex;align-items:center;justify-content:center;gap:5px;width:260px;height:20px;margin:0 auto;border-radius:10px;background:#fff;font:500 11px var(--f-sans);color:#6b665e}
.hx-chrome svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.hx-view{position:relative;height:438px;overflow:hidden}
.hx-win.pos-c .hs-in{animation:hxScroll 13s cubic-bezier(.65,0,.35,1) .8s infinite alternate}
.hero-show.hold .hx-win.pos-c .hs-in{animation-play-state:paused}
@keyframes hxScroll{0%,14%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 438px))}}
/* iPhone au premier plan */
.hx-phone{position:absolute;right:26px;bottom:28px;z-index:5;width:196px;height:404px;border-radius:38px;padding:8px;background:#0a0a0b;
  box-shadow:0 0 0 1.5px #7c7d82,0 0 0 3px #c9cace,0 0 0 4px #6d6e72,0 40px 70px -24px rgba(0,0,0,.95);transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) - 10deg)) translateZ(160px)}
.hx-phone.flip{animation:hxFlip .55s cubic-bezier(.65,0,.35,1)}
@keyframes hxFlip{50%{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + 80deg)) translateZ(160px)}}
.hx-island{position:absolute;left:50%;top:15px;z-index:2;width:60px;height:18px;margin-left:-30px;border-radius:12px;background:#000}
.hx-pscr{position:relative;height:100%;border-radius:31px;overflow:hidden;background:#f6f1e9}
.hs-m .hs-in{padding-top:30px;animation:hxScrollM 11s cubic-bezier(.65,0,.35,1) 1.2s infinite alternate}
@keyframes hxScrollM{0%,12%{transform:translateY(0)}100%{transform:translateY(calc(-100% + 388px))}}
/* onglets + minuterie de l'autoplay (pastille qui glisse, Lucian #039) */
.hx-tabs{position:relative;display:flex;gap:2px;width:max-content;max-width:100%;margin:14px auto 0;padding:4px;border-radius:999px;background:#17140F;box-shadow:inset 0 0 0 1px rgba(238,232,220,.1)}
.hx-pill{position:absolute;left:0;top:4px;bottom:4px;width:var(--w,80px);border-radius:999px;background:var(--gold);transform:translateX(var(--x,4px));transition:transform .5s var(--ux-spring),width .5s var(--ux-spring)}
.hx-tabs button{position:relative;z-index:1;display:flex;align-items:center;height:44px;padding:0 18px;border:0;border-radius:999px;background:none;color:#B8AE9E;font:500 14px var(--f-sans);cursor:pointer;transition:color .35s var(--ux-ease);overflow:hidden}
.hx-tabs button[aria-selected="true"]{color:#121110}
.hx-tabs button i{position:absolute;left:18px;right:18px;bottom:8px;height:2px;border-radius:2px;background:rgba(18,17,16,.25);transform:scaleX(0);transform-origin:0 50%}
.hero-show.run .hx-tabs button[aria-selected="true"] i{animation:hxTimer var(--dur,6500ms) linear forwards}
.hero-show.hold .hx-tabs button i{animation-play-state:paused}
@keyframes hxTimer{to{transform:scaleX(1)}}
.hx-cap{margin:12px 0 0;text-align:center;color:#A39A8B;font:600 12px var(--f-sans);letter-spacing:.08em;text-transform:uppercase}

/* ----- les sites (largeur du navigateur 700 px ; version téléphone par requête de conteneur) ----- */
.hs{container-type:inline-size;position:relative;height:100%;text-align:left;-webkit-font-smoothing:antialiased}
.hs-in{position:relative;will-change:transform}
.hs-nav{display:flex;align-items:center;gap:18px;height:58px;padding:0 28px}
.hs-logo{display:flex;align-items:center;gap:7px;margin-right:auto;font:italic 400 26px/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em}
.hs-logo svg{width:20px;height:20px}
.hs-nav nav{display:flex;gap:16px;font-size:12.5px;opacity:.75}
.hs-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border-radius:999px;font:600 12.5px var(--f-sans);white-space:nowrap}
.hs-btn.o{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.hs-hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px;padding:26px 28px 30px}
.hs-hero small{display:block;font:600 10.5px var(--f-sans);letter-spacing:.14em;text-transform:uppercase}
.hs-hero .mh5{margin:10px 0 0;font:400 38px/1.04 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.hs-hero .mh5 em{font-style:italic}
.hs-hero p{margin:12px 0 0;font-size:13.5px;line-height:1.5;opacity:.8}
.hs-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 28px 26px}
.hs-card{display:grid;gap:6px;padding:10px;border-radius:14px}
.hs-card i{display:grid;place-items:center;height:110px;border-radius:10px}
.hs-card i svg{height:86%;width:auto}
.hs-card b{font:400 18px "Instrument Serif",Georgia,serif}
.hs-card span{font:600 13px var(--f-sans)}
.hs-band{display:flex;align-items:center;gap:26px;padding:22px 28px 30px}
.hs-band small{display:block;font:600 10px var(--f-sans);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.hs-band b{font:400 18px "Instrument Serif",Georgia,serif}
.hs-band .hs-btn{margin-left:auto}
.hs-menu{padding:8px 28px 22px}
.hs-menu .mh6{margin:0 0 14px;font:400 26px "Instrument Serif",Georgia,serif}
.hs-menu div{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid rgba(239,232,220,.12)}
.hs-menu b{font:400 17px "Instrument Serif",Georgia,serif}
.hs-menu i{flex:1;border-bottom:1px dotted rgba(239,232,220,.3)}
.hs-menu span{font:600 13px var(--f-sans);color:#e0794a}
/* Nácar : prune et rose poudré */
.hs-nacar{background:#f7f1ee;color:#3a2230}
.hs-nacar .hs-logo{font-size:30px;color:#4a2c3a}
.hs-nacar .hs-btn{background:#4a2c3a;color:#f7f1ee}
.hs-nacar .hs-btn.o{color:#4a2c3a}
.hs-nacar small{color:#b8734f}
.hs-arch{position:relative;height:250px;border-radius:140px 140px 18px 18px;overflow:hidden;box-shadow:0 30px 50px -30px rgba(74,44,58,.6)}
.hs-arch i{position:absolute;left:50%;bottom:0;width:58%;height:66%;margin-left:-29%;border-radius:50% 50% 0 0;background:radial-gradient(circle at 50% 30%,#e8c9b0 0 26%,transparent 27%),linear-gradient(#4a2c3a,#4a2c3a) 50% 100%/100% 52% no-repeat;opacity:.9}
.hs-nacar .hs-card{background:#fff;box-shadow:0 0 0 1px #eadbd6}
.hs-nacar .hs-card b{color:#4a2c3a}
.hs-nacar .hs-band{background:#4a2c3a;color:#f7f1ee}
.hs-nacar .hs-band .hs-btn{background:#e9d8d3;color:#4a2c3a}
/* Brasa & Sal : charbon et braise */
.hs-brasa{background:#1d1a17;color:#efe8dc}
.hs-brasa .hs-btn{background:#c4562b;color:#fff}
.hs-brasa .hs-btn.o{color:#efe8dc}
.hs-brasa small{color:#e0794a}
.hs-brasa .hs-hero .mh5 em{color:#e0794a}
.hs-plate{position:relative;display:grid;place-items:center}
.hs-plate::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,rgba(224,121,74,.45),transparent 70%);filter:blur(12px)}
.hs-plate svg{position:relative;width:88%;height:auto;animation:hxSpin 40s linear infinite}
@keyframes hxSpin{to{transform:rotate(360deg)}}
.hs-brasa .hs-band{background:#c4562b;color:#fff}
.hs-brasa .hs-band .hs-btn{background:#1d1a17}
/* Ámbar : crème et ambre */
.hs-ambar{background:#f6f0e6;color:#22180f}
.hs-ambar .hs-btn{background:#1d1611;color:#f6f0e6}
.hs-ambar .hs-btn.o{color:#1d1611}
.hs-ambar small{color:#b0731f}
.hs-bottle{display:grid;place-items:center;height:250px;border-radius:18px;background:radial-gradient(80% 90% at 50% 75%,#f3e2c2,#ece0cc 70%)}
.hs-bottle svg{height:88%;width:auto}
.hs-ambar .hs-card{background:#fff;box-shadow:0 0 0 1px #ece2d2}
.hs-ambar .hs-card i{background:radial-gradient(80% 90% at 50% 75%,#f3e2c2,#ece0cc 70%)}
.hs-ambar .hs-card span{color:#b0731f}
.hs-ambar .hs-band{background:#1d1611;color:#f6f0e6}
.hs-ambar .hs-band .hs-btn{background:#c9a45c;color:#1d1611}
/* version téléphone */
@container (max-width:300px){
  .hs-nav{height:44px;padding:0 14px}.hs-nav nav{display:none}.hs-nav .hs-btn{padding:6px 10px;font-size:10px}
  .hs-logo{font-size:21px}
  .hs-hero{grid-template-columns:1fr;gap:12px;padding:10px 14px 18px}
  .hs-hero>div:last-child{order:-1;height:150px}
  .hs-plate{height:150px}.hs-plate svg{width:auto;height:100%}
  .hs-hero .mh5{font-size:24px}.hs-hero p{font-size:11.5px}
  .hs-row .hs-btn{flex:1;padding:9px 6px;font-size:11px}
  .hs-cards{grid-template-columns:1fr 1fr;gap:8px;padding:0 14px 16px}.hs-cards .hs-card:nth-child(3){display:none}
  .hs-card i{height:70px}.hs-card b{font-size:14px}
  .hs-band{flex-wrap:wrap;gap:10px;padding:16px 14px 22px}.hs-band b{font-size:14px}.hs-band .hs-btn{margin:0;width:100%}
  .hs-menu{padding:4px 14px 16px}.hs-menu .mh6{font-size:20px}.hs-menu b{font-size:14px}
}
/* moins de mouvement : carrousel figé, pas de défilement automatique */
.calm .hx-win.pos-c .hs-in,.calm .hs-m .hs-in,.calm .hs-plate svg,.calm .hx-phone.flip{animation:none}
@media (max-width:1100px){.hero-grid{grid-template-columns:1fr}.hero-show{max-width:680px;margin:0 auto}}
@media (max-width:600px){.hx-win.pos-l,.hx-win.pos-r{opacity:.0}.hx-phone{right:10px}}

/* vitrine en pile : les autres sites reculent vers le haut à droite (plus de chevauchement avec le texte) */
.hero-slogan{font-size:clamp(46px,5.3vw,96px)}
.hx-stage{perspective-origin:30% 50%}
.hx-win{left:0;top:96px;margin-left:0;-webkit-box-reflect:below 10px linear-gradient(transparent 76%,rgba(255,255,255,.1))}
.hx-win.pos-c{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) - 12deg)) translate3d(30px,0,0);filter:none;opacity:1}
.hx-win.pos-r{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) - 12deg)) translate3d(130px,-58px,-240px);filter:brightness(.5) saturate(.85);opacity:1}
.hx-win.pos-l{transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) - 12deg)) translate3d(230px,-112px,-480px);filter:brightness(.3) saturate(.7);opacity:1}
.hx-win.to-back{animation:hxToBack 1.15s cubic-bezier(.65,0,.35,1)}
@keyframes hxToBack{0%{transform:rotateY(-12deg) translate3d(30px,0,0);opacity:1;filter:none}42%{transform:rotateY(-26deg) translate3d(-260px,40px,80px);opacity:0}58%{transform:rotateY(-12deg) translate3d(230px,-112px,-560px);opacity:0}100%{transform:rotateY(-12deg) translate3d(230px,-112px,-480px);opacity:1}}
.hx-phone{right:6px;bottom:18px}
@media (max-width:600px){.hx-win.pos-l,.hx-win.pos-r{opacity:1}}

/* =====================================================================
   Hero · « le site se construit » : grille dorée → logo → titre lettre par lettre → photo → clic → cartes → infos → iPhone
   ===================================================================== */
.hero-show{--dur:10500ms}
.hb{position:absolute;left:0;top:0;width:760px;height:560px;transform-origin:0 0}
.hb::before{content:"";position:absolute;left:4%;right:4%;top:6%;bottom:2%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.24),transparent 72%);filter:blur(12px);pointer-events:none}
.hb-dev{position:absolute;left:50%;top:22px;width:720px;height:500px;margin-left:-360px;border-radius:14px;overflow:hidden;background:#f4f1ec;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 110px -40px rgba(0,0,0,.95);
  transition:width 1s cubic-bezier(.65,0,.35,1),height 1s cubic-bezier(.65,0,.35,1),margin-left 1s cubic-bezier(.65,0,.35,1),top 1s cubic-bezier(.65,0,.35,1),border-radius 1s cubic-bezier(.65,0,.35,1),padding 1s cubic-bezier(.65,0,.35,1),background-color .6s,box-shadow 1s}
.hb-chrome{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:#ebe6de;border-bottom:1px solid #ddd6ca;overflow:hidden;transition:height .6s,opacity .4s,padding .6s}
.hb-chrome>i{width:9px;height:9px;border-radius:50%;background:#d3ccc1}
.hb-chrome span{display:flex;align-items:center;justify-content:center;gap:5px;width:280px;height:20px;margin:0 auto;border-radius:10px;background:#fff;font:500 11px var(--f-sans);color:#6b665e}
.hb-chrome svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}
.hb-chrome b{font-weight:500}
.hb-island{position:absolute;left:50%;top:17px;z-index:3;width:76px;height:22px;margin-left:-38px;border-radius:14px;background:#000;opacity:0;transition:opacity .4s .6s}
.hb-scr{position:relative;height:calc(100% - 32px);overflow:hidden;transition:height 1s,border-radius 1s}
.hb-desk,.hb-mob{position:absolute;inset:0;transition:opacity .35s,background-color .8s}
.hb:not(.s-nav) .hb-desk{background:#f4f1ec}
.hb-mob{right:auto;width:232px;opacity:0}
.hb-mob .hs-in{padding-top:34px}
/* iPhone */
.hb.s-mobile .hb-dev{width:250px;height:516px;margin-left:-125px;top:14px;padding:9px;border-radius:46px;background:#0a0a0b;box-shadow:0 0 0 1.5px #7c7d82,0 0 0 3px #c9cace,0 0 0 4px #6d6e72,0 60px 110px -40px rgba(0,0,0,.95)}
.hb.s-mobile .hb-chrome{height:0;padding:0;border:0;opacity:0}
.hb.s-mobile .hb-island{opacity:1}
.hb.s-mobile .hb-scr{height:100%;border-radius:37px}
.hb.s-mobile .hb-desk{opacity:0}
.hb.s-mobile .hb-mob{opacity:1;transition:opacity .5s .75s}
.hb.s-mobile .hb-mob .hs-in{animation:hbMob 2.6s cubic-bezier(.65,0,.35,1) 1.5s both}
@keyframes hbMob{to{transform:translateY(calc(-100% + 470px))}}
/* grille dorée (wireframe) */
.hb-desk :is(.hs-nav,.hs-hero>div,.hs-card,.hs-band,.hs-menu){position:relative}
.hb-desk :is(.hs-nav,.hs-hero>div,.hs-card,.hs-band,.hs-menu)::after{content:"";position:absolute;inset:4px;border:1.5px dashed rgba(201,164,92,.85);border-radius:8px;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity .4s,transform .6s var(--ease-out)}
.hb.s-wire .hb-desk :is(.hs-nav,.hs-hero>div,.hs-card,.hs-band,.hs-menu)::after{opacity:1;transform:none}
.hb.s-wire .hb-desk .hs-hero>div:last-child::after{transition-delay:.12s}
.hb.s-wire .hb-desk .hs-card:nth-child(2)::after{transition-delay:.2s}.hb.s-wire .hb-desk .hs-card:nth-child(3)::after{transition-delay:.28s}
.hb.s-wire .hb-desk .hs-band::after{transition-delay:.34s}
.hb.s-nav .hb-desk .hs-nav::after,.hb.s-title .hb-desk .hs-hero>div:first-child::after,.hb.s-img .hb-desk .hs-hero>div:last-child::after,.hb.s-cards .hb-desk :is(.hs-card,.hs-menu)::after,.hb.s-band .hb-desk .hs-band::after{opacity:0}
/* contenu caché jusqu'à son étape */
.hb-desk .hs-nav>*,.hb-desk .hs-hero small,.hb-desk .hs-hero p,.hb-desk .hs-row .hs-btn,.hb-desk :is(.hs-card,.hs-menu)>*,.hb-desk .hs-band>*{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.hb-desk .hs-band{background-color:transparent!important;transition:background-color .6s}
.hb-desk .hs-card{transition:background-color .5s,box-shadow .5s}
.hb:not(.s-cards) .hb-desk .hs-card{background:transparent;box-shadow:none}
.hb.s-nav .hb-desk .hs-nav>*{opacity:1;transform:none}
.hb.s-nav .hb-desk .hs-nav>*:nth-child(2){transition-delay:.12s}.hb.s-nav .hb-desk .hs-nav>*:nth-child(3){transition-delay:.24s}
.hb.s-title .hb-desk .hs-hero small{opacity:1;transform:none}
.hb.s-title .hb-desk .hs-hero p{opacity:1;transform:none;transition-delay:calc(var(--chars,20) * 32ms)}
.hb-ch{display:inline;opacity:0;transition:opacity .25s calc(var(--c) * 32ms)}
.hb.s-title .hb-ch{opacity:1}
.hb-desk .hs-hero>div:last-child{clip-path:inset(0 0 100% 0 round 18px);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
.hb.s-img .hb-desk .hs-hero>div:last-child{clip-path:inset(0 0 0 0 round 18px)}
.hb-desk .hs-row .hs-btn{transform:scale(.6)}
.hb.s-btn .hb-desk .hs-row .hs-btn{opacity:1;transform:none;transition:opacity .3s,transform .6s var(--spring)}
.hb.s-btn .hb-desk .hs-row .hs-btn:nth-child(2){transition-delay:.12s}
.hb.booked .hb-desk .hs-row .hs-btn:first-child{box-shadow:0 0 0 4px rgba(201,164,92,.45)}
.hb.s-cards .hb-desk :is(.hs-card,.hs-menu)>*{opacity:1;transform:none}
.hb.s-cards .hb-desk .hs-card:nth-child(2)>*,.hb.s-cards .hb-desk .hs-menu>*:nth-child(3){transition-delay:.12s}
.hb.s-cards .hb-desk .hs-card:nth-child(3)>*,.hb.s-cards .hb-desk .hs-menu>*:nth-child(4){transition-delay:.24s}
.hb.s-band .hb-desk .hs-band>*{opacity:1;transform:none}
.hb.s-band .hb-desk .hs-band{background-color:revert-layer!important}
.hb.s-band .hb-desk.hs-nacar .hs-band{background-color:#4a2c3a!important}
.hb.s-band .hb-desk.hs-brasa .hs-band{background-color:#c4562b!important}
.hb.s-band .hb-desk.hs-ambar .hs-band{background-color:#1d1611!important}
/* curseur + clic */
.hb-cur{position:absolute;left:0;top:0;z-index:4;width:26px;height:26px;opacity:0;transform:translate(calc(var(--x,300px) + 160px),calc(var(--y,200px) + 150px));transition:transform 1s cubic-bezier(.65,0,.35,1),opacity .3s;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));pointer-events:none}
.hb-cur svg{width:100%;height:100%}
.hb.cur-on .hb-cur{opacity:1;transform:translate(var(--x),var(--y))}
.hb.click .hb-cur{transform:translate(var(--x),var(--y)) scale(.82)}
.hb-rip{position:absolute;left:0;top:0;z-index:3;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:2px solid #c9a45c;opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(.2);pointer-events:none}
.hb.click .hb-rip{animation:hbRip .6s var(--ease-out)}
@keyframes hbRip{0%{opacity:1;transform:translate(var(--x),var(--y)) scale(.2)}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.6)}}
/* balayage doré entre deux commerces */
.hb-wipe{position:absolute;top:-10%;bottom:-10%;left:0;z-index:5;width:140%;background:linear-gradient(100deg,transparent 0,#c9a45c 18%,#ecd49b 30%,#c9a45c 42%,#1a1712 58%,#1a1712 100%);transform:translateX(-110%);pointer-events:none}
.hb.wipe .hb-wipe{animation:hbWipe 1s cubic-bezier(.65,0,.35,1) both}
@keyframes hbWipe{0%{transform:translateX(-110%)}50%{transform:translateX(-30%)}100%{transform:translateX(110%)}}
.hero-show.run .hx-tabs button[aria-selected="true"] i{animation:hxTimer var(--dur) linear forwards}
.calm .hb *{animation:none!important;transition-property:opacity,clip-path,background-color,color,box-shadow!important}
@media (max-width:600px){.hb.s-mobile .hb-dev{width:250px}}

.hb.s-mobile .hb-desk{opacity:0;transition:opacity .45s .35s}.hb.s-mobile .hb-mob{transition:opacity .45s .5s}.hb.s-mobile .hb-dev{background:#f4f1ec}.hb.s-mobile .hb-dev{background-color:#0a0a0b;transition-delay:0s,0s,0s,0s,0s,0s,.6s,0s}

/* =====================================================================
   Hero · trois sites aux interfaces différentes (Nácar éditorial, Brasa & Sal nocturne, Ámbar boutique)
   ===================================================================== */
.hb-desk .hs-in{transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
/* repères de construction (remplacent les anciens) */
.hb-desk .b-blk{position:relative}
.hb-desk .b-blk::after{content:"";position:absolute;inset:5px;border:1.5px dashed rgba(201,164,92,.9);border-radius:8px;opacity:0;transform:scale(.97);pointer-events:none;z-index:6;transition:opacity .4s,transform .6s var(--ease-out)}
.hb.s-wire .hb-desk .b-blk::after{opacity:1;transform:none}
.hb.s-nav .hb-desk [data-w="nav"]::after,.hb.s-img .hb-desk [data-w="hero"]::after,.hb.s-cards .hb-desk [data-w="cards"]::after,.hb.s-band .hb-desk [data-w="band"]::after{opacity:0}
.hb-desk .b-nav>*,.hb-desk .b-sub,.hb-desk .b-card,.hb-desk .b-band>*,.hb-desk .aw-bar{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.hb.s-nav .hb-desk .b-nav>*,.hb.s-nav .hb-desk .aw-bar{opacity:1;transform:none}
.hb.s-nav .hb-desk .b-nav>*:nth-child(2){transition-delay:.1s}.hb.s-nav .hb-desk .b-nav>*:nth-child(3){transition-delay:.2s}.hb.s-nav .hb-desk .b-nav>*:nth-child(4){transition-delay:.3s}
.hb.s-title .hb-desk .b-sub{opacity:1;transform:none;transition-delay:calc(var(--chars,12) * 40ms)}
.hb-desk .b-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
.hb.s-img .hb-desk .b-img{clip-path:inset(0 0 0 0)}
.hb-desk .b-btn{opacity:0;transform:scale(.6);transition:opacity .3s,transform .6s var(--spring)}
.hb.s-btn .hb-desk .b-btn{opacity:1;transform:none}
.hb.booked .hb-desk .b-btn{box-shadow:0 0 0 4px rgba(201,164,92,.5)}
.hb.s-cards .hb-desk .b-card{opacity:1;transform:none}
.hb.s-cards .hb-desk .b-card:nth-child(2){transition-delay:.12s}.hb.s-cards .hb-desk .b-card:nth-child(3){transition-delay:.24s}.hb.s-cards .hb-desk .b-card:nth-child(4){transition-delay:.36s}
.hb.s-band .hb-desk .b-band>*{opacity:1;transform:none}
.hb-desk .b-band{transition:background-color .6s}
.hb:not(.s-band) .hb-desk .b-band{background-color:transparent!important}
.hb-ch{transition:opacity .25s calc(var(--c) * 40ms)}

/* ---------- Nácar : éditorial ---------- */
.hs-nacar{background:#f7f1ee;color:#3a2230}
.ny-top{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;color:#f7f1ee;font:600 11px var(--f-sans);letter-spacing:.18em}
.ny-top i{font:italic 400 15px "Instrument Serif",Georgia,serif;letter-spacing:0;text-decoration:underline;text-underline-offset:3px}
.ny-split{position:relative;display:grid;grid-template-columns:1fr 1fr;height:360px}
.ny-photo{position:relative;overflow:hidden}
.ny-face{position:absolute;left:50%;bottom:0;width:62%;height:74%;margin-left:-31%;border-radius:50% 50% 0 0;background:radial-gradient(circle at 50% 30%,#ecd2bd 0 24%,transparent 25%),linear-gradient(#4a2c3a,#4a2c3a) 50% 100%/100% 50% no-repeat}
.ny-photo small,.ny-dark small{position:absolute;bottom:16px;font:600 9.5px var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.ny-photo small{left:18px}
.ny-dark{position:relative;background:#1b1116}
.ny-dark small{right:18px;color:#e9d8d3}
.ny-moon{position:absolute;left:50%;top:26%;width:120px;height:120px;margin-left:-60px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#f7ece6,#d9c2c8 45%,#9c7d89 100%);box-shadow:0 0 60px rgba(233,216,211,.35)}
.ny-word{position:absolute;left:0;right:0;bottom:-24px;margin:0;text-align:center;font:300 168px/1 "Instrument Serif",Georgia,serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);text-shadow:0 10px 40px rgba(0,0,0,.25);z-index:3;pointer-events:none}
.ny-state{display:flex;flex-direction:column;align-items:center;gap:14px;padding:46px 40px 30px;text-align:center}
.ny-state p{margin:0;max-width:20ch;font:italic 300 32px/1.1 "Instrument Serif",Georgia,serif;color:#9c3b2c}
.ny-link{font:italic 400 15px "Instrument Serif",Georgia,serif;color:#9c3b2c;border-bottom:1px solid currentColor}
.ny-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:6px 26px 26px}
.ny-grid .b-card{display:grid;gap:6px}
.ny-grid i{height:150px}
.ny-grid span{font:600 10px var(--f-sans);letter-spacing:.14em;color:#b8734f}
.ny-grid b{font:400 18px "Instrument Serif",Georgia,serif;color:#3a2230}
.ny-band{display:flex;align-items:baseline;gap:16px;padding:22px 26px 30px;background:#4a2c3a;color:#f7f1ee}
.ny-band small{font:600 10px var(--f-sans);letter-spacing:.16em;opacity:.7}
.ny-band b{font:400 24px "Instrument Serif",Georgia,serif}
.ny-band span{margin-left:auto;font:italic 400 15px "Instrument Serif",Georgia,serif;border-bottom:1px solid currentColor}
.hb.s-band .hb-desk.hs-nacar .ny-band{background-color:#4a2c3a!important}

/* ---------- Brasa & Sal : nocturne ---------- */
.hs-brasa{background:#202020;color:#f2ece2}
.bl-nav{display:flex;justify-content:space-between;align-items:center;padding:16px 26px;font:500 12px var(--f-sans);color:#d8cfc2}
.bl-nav b svg{width:22px;height:22px}
.bl-hero{position:relative;display:grid;place-items:center;align-content:center;gap:14px;height:400px;text-align:center}
.bl-brush{position:absolute;left:50%;top:50%;width:560px;height:280px;margin:-150px 0 0 -280px;opacity:.95}
.bl-hero h5{position:relative;margin:0;font:400 92px/.95 "Instrument Serif",Georgia,serif;letter-spacing:-.03em;color:#f6efe4;text-shadow:0 6px 30px rgba(0,0,0,.4)}
.bl-hero p{position:relative;margin:0;font:600 11px var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#e9b08f}
.bl-enter{position:relative;margin-top:16px;padding:12px 22px;background:#3a3836;color:#f2ece2;font:500 12px var(--f-sans);letter-spacing:.06em;text-transform:uppercase;
  background-image:linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2),linear-gradient(#f2ece2,#f2ece2);
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;background-repeat:no-repeat}
.bl-menu{padding:20px 40px 26px}
.bl-menu h6{margin:0 0 10px;font:italic 400 28px "Instrument Serif",Georgia,serif;color:#e9b08f}
.bl-menu .b-card{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid rgba(242,236,226,.12)}
.bl-menu b{font:400 19px "Instrument Serif",Georgia,serif}
.bl-menu i{flex:1;border-bottom:1px dotted rgba(242,236,226,.3)}
.bl-menu span{font:600 13px var(--f-sans);color:#e9b08f}
.bl-band{display:flex;align-items:baseline;gap:16px;padding:22px 40px 30px;background:#c4562b;color:#fff}
.bl-band small{font:600 10px var(--f-sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.bl-band b{font:400 18px "Instrument Serif",Georgia,serif}
.hb.s-band .hb-desk.hs-brasa .bl-band{background-color:#c4562b!important}

/* ---------- Ámbar : boutique ---------- */
.hs-ambar{background:#fbf8f3;color:#22180f}
.aw-bar{overflow:hidden;white-space:nowrap;padding:6px 0;border-bottom:1px solid #ece4d6;font:500 10.5px var(--f-sans);color:#7a6a58}
.aw-bar span{display:inline-block;padding-left:20px;animation:awBar 22s linear infinite}
@keyframes awBar{to{transform:translateX(-50%)}}
.aw-nav{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:18px;padding:12px 24px;font:500 11.5px var(--f-sans);color:#5d5248}
.aw-nav b{justify-self:center;font:300 20px "Instrument Serif",Georgia,serif;letter-spacing:.42em;color:#22180f}
.aw-nav span:last-child{display:flex;align-items:center;gap:4px}
.aw-hero{position:relative;height:340px;margin:0 14px;overflow:hidden;border-radius:6px}
.aw-photo{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:0;padding-bottom:14px;background:radial-gradient(70% 90% at 50% 80%,#e9c48c,#c98f4f 55%,#8a5a2e 100%)}
.aw-photo svg{width:auto;height:72%;filter:drop-shadow(0 20px 20px rgba(60,30,5,.35))}
.aw-photo svg:nth-child(1){height:62%;margin-right:-24px}.aw-photo svg:nth-child(3){height:54%;margin-left:-20px}
.aw-txt{position:absolute;left:0;right:0;top:44px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;z-index:2}
.aw-txt .mh5{margin:0;max-width:16ch;font:300 34px/1.05 "Onest",sans-serif;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(60,30,5,.35)}
.aw-shop{color:#fff;font:500 13px var(--f-sans);border-bottom:1px solid #fff;padding-bottom:2px}
.aw-intro{margin:26px auto 18px;max-width:42ch;text-align:center;font:300 17px/1.45 "Onest",sans-serif;color:#3a2f24}
.aw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 14px 20px}
.aw-grid .b-card{display:grid;gap:6px}
.aw-grid i{display:grid;place-items:center;height:150px;background:#f0e9de}
.aw-grid i svg{height:80%;width:auto}
.aw-grid b{font:500 13px var(--f-sans)}
.aw-grid span{font:400 12px var(--f-sans);color:#7a6a58}
.aw-band{display:flex;justify-content:space-between;align-items:center;margin:0 14px 20px;padding:18px 22px;background:#22180f;color:#f6f0e6}
.aw-band b{font:300 20px "Instrument Serif",Georgia,serif}
.aw-band span{font:500 12px var(--f-sans);border-bottom:1px solid currentColor}
.hb.s-band .hb-desk.hs-ambar .aw-band{background-color:#22180f!important}

/* ---------- Lonja : la vraie démo restaurant en miniature ---------- */
.hs-orilla{background:radial-gradient(ellipse at 70% 30%,#1d3538,#10201f 70%);color:#f4eee3}
.or-nav{display:flex;align-items:center;gap:18px;margin:12px 16px 0;padding:9px 10px 9px 18px;border-radius:16px;background:#0b1715;font:600 11.5px var(--f-sans)}
.or-nav b{margin-right:auto;font:400 19px "Instrument Serif",Georgia,serif;color:#f4eee3}
.or-nav>span:not(.or-pill){display:flex;align-items:center;gap:14px;color:rgba(244,238,227,.75)}
.or-nav>span i{width:3px;height:3px;border-radius:50%;background:rgba(244,238,227,.3)}
.or-pill{padding:7px 12px;border-radius:999px;background:#f4eee3;color:#10201f}
.or-hero{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:10px;height:330px;padding:0 18px 0 30px}
.or-txt small{display:block;font:600 9.5px var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#E4C489}
.or-txt h5{margin:12px 0 18px;font:400 40px/1 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.or-txt h5 em{color:#E4C489}
.or-btn{display:inline-block;padding:10px 18px;border-radius:999px;background:#E4C489;color:#10201f;font:700 12px var(--f-sans)}
.or-plate{position:relative;display:grid;place-items:center}
.or-plate::before{content:"";position:absolute;inset:16% 8% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(228,196,137,.28),transparent);filter:blur(14px)}
.or-plate img{position:relative;width:100%;height:auto;filter:drop-shadow(0 24px 26px rgba(0,0,0,.5));animation:orFloat 6s ease-in-out infinite}
@keyframes orFloat{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.or-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 18px 22px}
.or-row .b-card{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;padding:10px;border-radius:14px;background:rgba(244,238,227,.06);box-shadow:inset 0 0 0 1px rgba(244,238,227,.1)}
.or-row i{grid-row:span 2;width:62px}.or-row img{display:block;width:100%;height:auto}
.or-row span{font:400 13px "Instrument Serif",Georgia,serif;color:#E4C489}
.or-row b{font:400 15px/1.15 "Instrument Serif",Georgia,serif}
.or-band{display:flex;align-items:baseline;gap:14px;padding:22px 30px 28px;background:#8C3A22;color:#f4eee3}
.or-band small{font:600 10px var(--f-sans);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.or-band b{font:400 19px "Instrument Serif",Georgia,serif}
.or-band span{margin-left:auto;font:500 12px var(--f-sans);opacity:.85}
.hb.s-band .hb-desk.hs-orilla .or-band{background-color:#8C3A22!important}
.calm .or-plate img{animation:none}

/* ---------- versions téléphone ---------- */
@container (max-width:300px){
  .or-nav{margin:8px 10px 0;padding:7px 8px 7px 12px}.or-nav>span:not(.or-pill){display:none}.or-pill{padding:6px 9px;font-size:10px}
  .or-hero{grid-template-columns:1fr;height:auto;padding:16px 16px 8px;gap:4px}.or-plate{order:-1}.or-plate img{width:88%}
  .or-txt h5{font-size:30px;margin:8px 0 12px}
  .or-row{grid-template-columns:1fr;gap:8px;padding:8px 12px 16px}.or-row .b-card:nth-child(3){display:none}
  .or-band{flex-direction:column;gap:4px;padding:16px}.or-band span{margin:0}
  .ny-split{grid-template-columns:1fr;height:330px}.ny-dark{display:none}
  .ny-word{font-size:82px;bottom:-8px}
  .ny-state{padding:26px 16px 18px}.ny-state p{font-size:22px}
  .ny-grid{grid-template-columns:1fr 1fr;padding:0 12px 16px}.ny-grid .b-card:nth-child(3){display:none}.ny-grid i{height:90px}
  .ny-band{flex-wrap:wrap;padding:16px}.ny-band span{margin:0}
  .bl-hero{height:330px}.bl-brush{width:300px;height:150px;margin:-80px 0 0 -150px}.bl-hero h5{font-size:48px}
  .bl-menu{padding:16px}.bl-menu b{font-size:15px}
  .bl-band{flex-direction:column;gap:4px;padding:16px}
  .aw-nav{grid-template-columns:1fr auto;padding:10px 14px}.aw-nav span:not(:last-child){display:none}.aw-nav b{justify-self:start;font-size:16px}
  .aw-hero{height:300px;margin:0 8px}.aw-txt .mh5{font-size:22px}
  .aw-intro{font-size:13px;margin:16px 14px}
  .aw-grid{grid-template-columns:1fr 1fr;padding:0 8px 14px}.aw-grid .b-card:nth-child(3){display:none}.aw-grid i{height:100px}
  .aw-band{margin:0 8px 16px;padding:14px;flex-direction:column;align-items:flex-start;gap:6px}
}
.calm .aw-bar span{animation:none}


/* curseur couronne (symbole Keubz) : flèche fine, mini-couronne ; toujours dorée, noire seulement sur l'or */
@media (pointer:fine){
  html{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M1.5%201.5v12.2l3.1-2.9%202.1%204.6%201.9-.9-2.1-4.5h4.3z'%20fill%3D'%23D9B672'%20stroke%3D'%230D0B08'%20stroke-width%3D'1.1'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M10.6%2017.2l.7-3.1%201.5%201.4%201-2.3%201%202.3%201.5-1.4.7%203.1z'%20fill%3D'%230D0B08'%20stroke%3D'%23D9B672'%20stroke-width%3D'.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 1 1,auto}
  a,button,summary,label,select,[role="tab"],[role="button"],.u031-btn,.u031-o,input[type="range"],input[type="checkbox"],input[type="radio"],.hx-win{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M1.5%201.5v12.2l3.1-2.9%202.1%204.6%201.9-.9-2.1-4.5h4.3z'%20fill%3D'%23E8CF94'%20stroke%3D'%230D0B08'%20stroke-width%3D'1.1'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M10.6%2017.2l.7-3.1%201.5%201.4%201-2.3%201%202.3%201.5-1.4.7%203.1z'%20fill%3D'%23E8CF94'%20stroke%3D'%230D0B08'%20stroke-width%3D'.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 1 1,pointer}
  .final{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M1.5%201.5v12.2l3.1-2.9%202.1%204.6%201.9-.9-2.1-4.5h4.3z'%20fill%3D'%23121110'%20stroke%3D'%23F3F2EE'%20stroke-width%3D'1.1'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M10.6%2017.2l.7-3.1%201.5%201.4%201-2.3%201%202.3%201.5-1.4.7%203.1z'%20fill%3D'%23F3F2EE'%20stroke%3D'%23121110'%20stroke-width%3D'.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 1 1,auto}
  .final a,.final button,.final summary,.final label,.final select,.final [role="tab"],.final [role="button"],.final .u031-btn,.final .u031-o,.final input[type="range"],.final input[type="checkbox"],.final input[type="radio"],.final .hx-win,.u011-fab,.u011-fab *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M1.5%201.5v12.2l3.1-2.9%202.1%204.6%201.9-.9-2.1-4.5h4.3z'%20fill%3D'%23121110'%20stroke%3D'%23F3F2EE'%20stroke-width%3D'1.1'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M10.6%2017.2l.7-3.1%201.5%201.4%201-2.3%201%202.3%201.5-1.4.7%203.1z'%20fill%3D'%23121110'%20stroke%3D'%23F3F2EE'%20stroke-width%3D'.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 1 1,pointer}
  input:not([type]),input[type="text"],input[type="email"],input[type="tel"],textarea{cursor:text}
}

.hb-desk .ny-dark{opacity:0;transition:opacity .8s .2s}
.hb.s-img .hb-desk .ny-dark{opacity:1}
/* transitions sans vide : la scène ne s'efface plus en noir à la fin, la zone sombre se termine plus vite */
.st3,.anat-copy,.fict{opacity:1}
html.tone .dark-top{padding-bottom:4vh}
.anat{height:700vh}
.fx .scene.webs{height:470vh}
.scene .steps li{counter-increment:none}
.scene .bigword span{-webkit-text-stroke:1px rgba(201,164,92,.07)}

@media (pointer:fine){.audit-strip,.audit-strip *,.offer .flag,.psum-flag,.dl-btn,.dl-btn *,.dl-seg button[aria-pressed="true"],.dl-play-i,.dl-play-i *{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20d%3D'M1.5%201.5v12.2l3.1-2.9%202.1%204.6%201.9-.9-2.1-4.5h4.3z'%20fill%3D'%23121110'%20stroke%3D'%23F3F2EE'%20stroke-width%3D'1.1'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M10.6%2017.2l.7-3.1%201.5%201.4%201-2.3%201%202.3%201.5-1.4.7%203.1z'%20fill%3D'%23121110'%20stroke%3D'%23F3F2EE'%20stroke-width%3D'.8'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E") 1 1,pointer}}

/* =====================================================================
   Démo live · Lonja (vraie démo restaurant) : texte à gauche, navigateur + iPhone à droite
   ===================================================================== */
.demo-live .dl-in{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(28px,5vw,72px);padding:clamp(34px,5vw,72px);border-radius:32px;background:radial-gradient(ellipse at 80% 20%,#22201c,#121110 65%);color:#F3F2EE;overflow:hidden}
.demo-live .dl-in::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.18),transparent);pointer-events:none}
.dl-copy{position:relative}
.dl-copy h2{margin:14px 0 16px;font:400 clamp(34px,4vw,58px)/1.02 var(--f-serif,"Instrument Serif",Georgia,serif);letter-spacing:-.02em;color:#F3F2EE}
.dl-copy h2 em{color:var(--gold-l)}
.dl-copy .lead{color:rgba(243,242,238,.72)}
.dl-copy .eyebrow{color:var(--gold-l)}
.dl-pts{display:grid;gap:12px;margin:26px 0 30px;padding:0;list-style:none}
.dl-pts li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:rgba(243,242,238,.9)}
.dl-pts svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(201,164,92,.12);fill:none;stroke:var(--gold-l);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dl-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.dl-cta small{font-size:13px;color:rgba(243,242,238,.55)}
.dl-btn{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 22px;border-radius:999px;background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#121110;font-weight:600;font-size:15.5px;text-decoration:none;box-shadow:0 14px 30px -14px rgba(201,164,92,.7);transition:transform .5s var(--spring),box-shadow .3s}
.dl-btn span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#121110;color:var(--gold-l);transition:transform .5s var(--spring)}
.dl-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-btn:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(201,164,92,.85)}
.dl-btn:hover span{transform:rotate(45deg)}
.dl-btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:4px}
.dl-hand{position:absolute;right:-6%;bottom:-62px;display:flex;align-items:flex-start;gap:4px;font:italic 400 20px "Instrument Serif",Georgia,serif;color:var(--gold-l);transform:rotate(-4deg);pointer-events:none}
.dl-hand svg{width:96px;height:56px;margin-top:10px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:dlNudge 2.4s ease-in-out infinite}
@keyframes dlNudge{50%{transform:translate(5px,3px)}}.calm .dl-hand svg{animation:none}
.dl-stage{position:relative;display:block;perspective:1600px;padding:0 0 40px 0}
.dl-win{display:block;border-radius:14px;overflow:hidden;background:#0b0b0a;box-shadow:0 0 0 1px rgba(243,242,238,.12),0 40px 80px -30px rgba(0,0,0,.8);transform:rotateY(-9deg) rotateX(3deg);transform-origin:70% 50%;transition:transform .9s var(--ease-out)}
.dl-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#1b1a18}
.dl-bar i{width:9px;height:9px;border-radius:50%;background:#3a3732}
.dl-bar b{margin:0 auto;padding:3px 14px;border-radius:999px;background:#0f0e0d;font:500 11px var(--f-sans);color:rgba(243,242,238,.55)}
.dl-win img{display:block;width:100%;height:auto}
.dl-phone{position:absolute;right:-4%;bottom:0;width:27%;padding:5px;border-radius:26px;background:#0a0a0b;box-shadow:0 0 0 1.5px #6d6e72,0 30px 60px -20px rgba(0,0,0,.9);transform:rotate(4deg);transition:transform .9s var(--spring)}
.dl-phone img{display:block;width:100%;height:auto;border-radius:21px}
.dl-live{position:absolute;left:14px;top:44px;display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(18,17,16,.75);backdrop-filter:blur(6px);font:700 10.5px var(--f-sans);letter-spacing:.16em;color:#F3F2EE}
.dl-live i{width:7px;height:7px;border-radius:50%;background:#e2574c;box-shadow:0 0 0 0 rgba(226,87,76,.6);animation:dlPulse 1.8s infinite}
@keyframes dlPulse{70%{box-shadow:0 0 0 8px rgba(226,87,76,0)}100%{box-shadow:0 0 0 0 rgba(226,87,76,0)}}
.dl-in:hover .dl-win{transform:rotateY(-3deg) rotateX(1deg) translateY(-4px)}
.dl-in:hover .dl-phone{transform:rotate(0) translateY(-10px)}
.calm .dl-live i{animation:none}
@media (max-width:900px){
  .demo-live .dl-in{grid-template-columns:1fr;padding:30px 20px 36px;border-radius:24px}
  .dl-hand{display:none}
  .dl-stage{order:-1;margin-right:14px}
  .dl-win{transform:none}
  .dl-phone{right:-14px;width:30%}
}
.dl-copy .eyebrow{justify-content:flex-start;text-align:left;margin-left:0;margin-right:auto}
.dl-stage,.dl-stage *{text-decoration:none}
.dl-hand svg{scale:1 -1}
.dl-copy .eyebrow{display:block;width:fit-content;grid-column:auto;justify-self:start}

/* ---------- Scène « Anatomía de una web » : la tablette raconte Lonja (sable, nuit marine, terre cuite) ---------- */
.st3.or .tab-scr,.st3.or .am-new,.st3.or .iph-scr,.st3.or .pop{background:#ECE3D2}
.st3.or .am{color:#13201E}
.st3.or .am-nav{border-bottom-color:rgba(19,32,30,.14)}
.st3.or .am-logo{display:flex;align-items:center;gap:10px;font:400 34px/1 "Instrument Serif",Georgia,serif;font-style:normal;color:#13201E}
.st3.or .or-wave{width:36px;height:22px;fill:none;stroke:#B8955A;stroke-width:1.8;stroke-linecap:round}
.st3.or .am-nav nav{color:#5E6762}
.st3.or .am-out{box-shadow:none;background:#0E1C1F;color:#F4EEE3}
.st3.or .am-copy small,.st3.or .am-story small{color:#76581F}
.st3.or .am-copy .mh4{color:#13201E;max-width:15ch}
.st3.or .am-copy .mh4 em,.st3.or .pm-h em{color:#8C3A22;font-style:italic}
.st3.or .am-copy p,.st3.or .am-book>p{color:#5E6762}
.st3.or .am-card{background:#F4EEE3;box-shadow:0 0 0 1px rgba(19,32,30,.1),0 10px 24px -18px rgba(14,28,31,.4)}
.st3.or .am-img{background:radial-gradient(80% 80% at 50% 60%,#f7f0e3,#e3d7c1 75%);overflow:hidden}
.st3.or .am-img img{width:96%;height:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.22))}
.st3.or .am-meta b{color:#8C3A22}
.st3.or .am-ctas .b,.st3.or .pm-btn.b{background:#0E1C1F;color:#F4EEE3}
.st3.or .am-ctas .o,.st3.or .pm-btn.o{box-shadow:inset 0 0 0 1.5px #0E1C1F}
.st3.or .am-story{background:#0E1C1F;color:#F4EEE3}
.st3.or .am-story small{color:#E4C489}
.st3.or .am-story p{color:rgba(244,238,227,.72)}
.st3.or .am-story-img img{display:block;width:100%;max-width:340px;margin:0 auto;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}
.st3.or .am-book .mh5,.st3.or .am-where .mh5{color:#13201E}
.st3.or .am-days span{background:#F4EEE3;box-shadow:0 0 0 1px rgba(19,32,30,.12)}
.st3.or .am-days span.on{background:#0E1C1F;color:#F4EEE3}
.st3.or .am-hours span.on{background:#efd9c7;box-shadow:inset 0 0 0 1.5px #8C3A22}
.st3.or .am-confirm{background:#8C3A22}
.st3.or .am-hrs,.st3.or .pm-hrs{background:#0E1C1F;color:#F4EEE3}
.st3.or .am-hrs small,.st3.or .pm-hrs small{color:#E4C489}
.st3.or .am-hrs span,.st3.or .pm-hrs span{color:rgba(244,238,227,.7)}
.st3.or .am-foot{background:#0E1C1F;color:rgba(244,238,227,.6)}
.st3.or .am-foot .am-logo{color:#F4EEE3;font-size:26px}
.st3.or .pm .am-logo{font-size:26px}
.st3.or .pm-h{color:#13201E}
.st3.or .pm-card .am-img{height:150px}
.st3.or .pm-status i{box-shadow:inset 0 0 0 1.5px #13201E;background:linear-gradient(90deg,#13201E 70%,transparent 70%) 2px 2px/18px 7px no-repeat}
.st3.or .g-top i{background:#0E1C1F;color:#E4C489}

/* =====================================================================
   Démo en direct (v2) : texte en haut, la démo Lonja jouable dans une tablette ou un téléphone
   ===================================================================== */
.demo-live .dl-in{grid-template-columns:1fr;gap:clamp(26px,4vw,44px)}
.dl-copy{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:clamp(24px,4vw,60px)}
.dl-copy .dl-pts{margin:0}
.dl-stage{position:relative;display:grid;justify-items:center;gap:20px;padding:0;perspective:none}
.dl-dev{position:relative;padding:18px;border-radius:40px;background:#0a0a0b;box-shadow:0 0 0 1.5px #3b3c40,0 0 0 3px #1d1e21,0 50px 90px -40px rgba(0,0,0,.9);transition:padding .5s var(--ease-out),border-radius .5s var(--ease-out)}
.dl-cam{position:absolute;left:8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#1b1c21;box-shadow:inset 0 0 0 1.5px #2b2d35}
.dl-stage[data-dev="mob"] .dl-dev{padding:10px;border-radius:48px}
.dl-stage[data-dev="mob"] .dl-cam{left:50%;top:18px;width:84px;height:24px;margin:0 0 0 -42px;border-radius:14px;background:#000;box-shadow:none;z-index:3}
.dl-screen{position:relative;overflow:hidden;border-radius:22px;background:#ECE3D2;transition:width .5s var(--ease-out),height .5s var(--ease-out)}
.dl-stage[data-dev="mob"] .dl-screen{border-radius:38px}
.dl-screen iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#ECE3D2}
.dl-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;padding:0;border:0;background:#0e1c1f;cursor:pointer}
.dl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:.55;transition:opacity .4s,transform 1.2s var(--ease-out)}
.dl-play:hover .dl-poster{opacity:.7;transform:scale(1.02)}
.dl-play-in{position:relative;display:grid;justify-items:center;gap:8px;max-width:86%;padding:22px 30px 24px;border-radius:24px;background:rgba(18,17,16,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#F3F2EE;text-align:center}
.dl-play-in b{font:400 clamp(20px,2.2vw,28px)/1.1 var(--f-serif)}
.dl-play-in small{font-size:13.5px;color:rgba(243,242,238,.7)}
.dl-play-i{display:grid;place-items:center;width:62px;height:62px;margin-bottom:6px;border-radius:50%;background:linear-gradient(135deg,var(--gold-l),var(--gold));color:#121110;box-shadow:0 0 0 0 rgba(201,164,92,.5);animation:dlPlay 2s infinite;transition:transform .5s var(--spring)}
.dl-play-i svg{width:24px;height:24px;margin-left:3px;fill:currentColor}
.dl-play:hover .dl-play-i{transform:scale(1.08)}
@keyframes dlPlay{70%{box-shadow:0 0 0 16px rgba(201,164,92,0)}100%{box-shadow:0 0 0 0 rgba(201,164,92,0)}}
.dl-play:focus-visible{outline:3px solid var(--gold-l);outline-offset:-3px}
.dl-stage.on .dl-play{display:none}
.dl-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px}
.dl-seg{position:relative;display:flex;padding:4px;border-radius:999px;background:rgba(243,242,238,.07);box-shadow:inset 0 0 0 1px rgba(243,242,238,.14)}
.dl-seg button{position:relative;z-index:1;height:38px;padding:0 18px;border:0;border-radius:999px;background:none;color:rgba(243,242,238,.78);font:600 13.5px var(--f-sans);transition:color .35s}
.dl-seg button[aria-pressed="true"]{color:#121110}
.dl-seg button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.dl-seg-pill{position:absolute;left:0;top:4px;bottom:4px;width:var(--w,80px);border-radius:999px;background:linear-gradient(135deg,var(--gold-l),var(--gold));transform:translateX(var(--x,4px));transition:transform .5s var(--spring),width .5s var(--spring)}
.dl-full{display:inline-flex;align-items:center;gap:6px;color:rgba(243,242,238,.75);font-size:14px;text-decoration:underline;text-decoration-color:rgba(201,164,92,.6);text-underline-offset:5px}
.dl-full svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-full:hover{color:#F3F2EE}
.dl-stage .dl-hand{left:auto;right:6%;top:-58px;bottom:auto}
.dl-stage .dl-hand svg{scale:1 1;transform-origin:0 0;rotate:18deg}
.calm .dl-play-i{animation:none}
@media (max-width:900px){
  .dl-copy{grid-template-columns:1fr}
  .dl-stage .dl-hand{display:none}
}
/* effets : la tablette se redresse en arrivant, reflet ; allumage en cercle + onde dorée au clic */
.dl-stage{perspective:1800px}
.dl-dev{--t:1;transform:translateY(calc((1 - var(--t)) * 70px)) rotateX(calc((1 - var(--t)) * 24deg)) scale(calc(.9 + var(--t) * .1));transform-origin:50% 100%;will-change:transform}
.dl-dev::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.09) 48%,transparent 56%) no-repeat;background-size:260% 100%;background-position:calc(110% - var(--t) * 120%) 0}
.dl-stage.boot iframe{animation:dlBoot 1.1s cubic-bezier(.65,0,.35,1) both}
@keyframes dlBoot{from{clip-path:circle(0 at var(--bx,50%) var(--by,50%));filter:brightness(1.6) saturate(.6)}to{clip-path:circle(150% at var(--bx,50%) var(--by,50%));filter:none}}
.dl-screen::after{content:"";position:absolute;left:var(--bx,50%);top:var(--by,50%);z-index:3;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid var(--gold-l);box-shadow:0 0 30px rgba(232,207,148,.7);opacity:0;pointer-events:none}
.dl-stage.boot .dl-screen::after{animation:dlRing 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes dlRing{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(28)}}
.dl-stage.boot .dl-dev{box-shadow:0 0 0 1.5px #3b3c40,0 0 0 3px #1d1e21,0 50px 90px -40px rgba(0,0,0,.9),0 0 80px -10px rgba(201,164,92,.45);transition:box-shadow .6s}
.calm .dl-dev{transform:none}
.dl-close{display:none;align-items:center;gap:7px;height:38px;padding:0 16px;border:0;border-radius:999px;background:rgba(243,242,238,.1);color:#F3F2EE;font:600 13.5px var(--f-sans);box-shadow:inset 0 0 0 1px rgba(243,242,238,.2)}
.dl-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.dl-close:hover{background:rgba(243,242,238,.18)}
.dl-close:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.dl-stage.on .dl-close{display:inline-flex}
/* téléphone : barre d'état au-dessus de la démo (l'encoche ne masque rien) */
.dl-stage[data-dev="mob"] .dl-screen{background:#0E1C1F}
.dl-stage[data-dev="mob"] .dl-screen::before{content:"9:41";position:absolute;left:26px;top:9px;z-index:1;font:600 12px var(--f-sans);color:#F4EEE3}

/* ---------- Scène « Anatomía » : vraies interfaces d'Lonja (mêmes couleurs, polices, composants que /demo/lonja/) ---------- */
.st3.or{--oxs:#ECE3D2;--oxsea:#0E1C1F;--oxink:#13201E;--oxmut:#5E6762;--oxterra:#8C3A22;--oxbr:#76581F;--oxgold:#E4C489;--oxfoam:#F4EEE3;--oxline:rgba(19,32,30,.16)}
.st3.or .am{font-family:"Onest",system-ui,sans-serif;color:var(--oxink)}
.st3.or .ox-hd{display:flex;align-items:center;gap:16px;height:62px;margin:0 22px;padding:0 10px 0 22px;border-radius:0 0 24px 24px;background:var(--oxsea);color:var(--oxfoam)}
.st3.or .ox-logo{display:flex;align-items:center;gap:9px;font:400 28px/1 "Instrument Serif",Georgia,serif}
.st3.or .ox-wave{width:32px;height:20px;fill:none;stroke:#B8955A;stroke-width:1.8;stroke-linecap:round}
.st3.or .ox-badge{display:flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 7px;border-radius:999px;background:rgba(230,195,126,.1);box-shadow:inset 0 0 0 1px rgba(230,195,126,.4);color:#e6c37e;font:600 11px/1 "Onest",sans-serif;letter-spacing:.06em}
.st3.or .ox-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.st3.or .ox-nav{display:flex;gap:2px;margin:0 auto;padding:4px;border-radius:999px;background:rgba(244,238,227,.06);box-shadow:0 0 0 1px rgba(244,238,227,.1)}
.st3.or .ox-nav span{padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;color:rgba(244,238,227,.72)}
.st3.or .ox-nav span.on{background:var(--oxfoam);color:var(--oxsea)}
.st3.or .ox-st{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:rgba(244,238,227,.7)}
.st3.or .ox-st i{width:7px;height:7px;border-radius:50%;background:#c9806b}
.st3.or .ox-res,.st3.or .ox-btn,.st3.or .ox-conf{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;height:44px;padding:0 6px 0 22px;border-radius:999px;background:var(--oxfoam);color:var(--oxsea);font:600 14.5px "Onest",sans-serif;white-space:nowrap}
.st3.or .ox-orb{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#E4C489,#B8955A);color:var(--oxsea)}
.st3.or .ox-orb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.st3.or .ox-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px;padding:34px 44px 30px}
.st3.or .ox-copy small,.st3.or .ox-seven small,.st3.or .ox-form>small{display:block;font:600 11.5px/1.3 "Onest",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--oxbr)}
.st3.or .ox-copy .mh4{margin:14px 0 14px;font:400 58px/.98 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;color:var(--oxink)}
.st3.or .ox-copy .mh4 em,.st3.or .ox-form .mh5 em{font-style:italic;color:var(--oxterra)}
.st3.or .ox-copy p{max-width:400px;font-size:15px;line-height:1.55;color:var(--oxmut)}
.st3.or .ox-ctas{display:flex;gap:10px;margin-top:22px}
.st3.or .ox-btn{background:var(--oxsea);color:var(--oxfoam)}
.st3.or .ox-btn.gh{padding:0 22px;background:transparent;color:var(--oxink);box-shadow:inset 0 0 0 1.5px var(--oxline)}
.st3.or .ox-plate img{display:block;width:112%;max-width:none;margin-left:-4%;filter:drop-shadow(0 26px 26px rgba(0,0,0,.28))}
.st3.or .ox-seven{padding:16px 44px 34px;text-align:center}
.st3.or .ox-seven .mh5{margin:10px 0 20px;font:400 44px/1 "Instrument Serif",Georgia,serif}
.st3.or .ox-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.st3.or .ox-th{display:grid;justify-items:center;gap:4px;text-align:center}
.st3.or .ox-th img{width:100%;height:auto;filter:drop-shadow(0 10px 12px rgba(0,0,0,.18))}
.st3.or .ox-th b{margin-top:6px;font:400 17px "Instrument Serif",Georgia,serif;color:var(--oxbr)}
.st3.or .ox-th span{font:400 19px/1.1 "Instrument Serif",Georgia,serif}
.st3.or .ox-rs{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;padding:44px 44px 40px;border-top:1px solid var(--oxline)}
.st3.or .ox-form .mh5{margin:10px 0 18px;font:400 50px/1 "Instrument Serif",Georgia,serif}
.st3.or .ox-blk{padding:16px 0;border-top:1px solid var(--oxline)}
.st3.or .ox-blk .mh6{margin:0 0 12px;font:600 11px "Onest",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--oxmut)}
.st3.or .ox-step{display:inline-flex;align-items:center;gap:14px;padding:6px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px var(--oxline)}
.st3.or .ox-step i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(19,32,30,.07);font:600 22px/1 "Onest",sans-serif;font-style:normal}
.st3.or .ox-step i.pl{background:var(--oxsea);color:var(--oxfoam)}
.st3.or .ox-step b{min-width:20px;text-align:center;font:780 24px "Onest",sans-serif}
.st3.or .ox-mut{margin-top:8px;font-size:12.5px;color:var(--oxmut)}
.st3.or .ox-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.st3.or .ox-chips span{padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--oxline);font-size:13.5px;font-weight:500}
.st3.or .ox-chips span.on{background:var(--oxsea);color:var(--oxfoam);box-shadow:none}
.st3.or .ox-chips span.off{opacity:.4;text-decoration:line-through}
.st3.or .ox-opt{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 1px var(--oxline)}
.st3.or .ox-opt.on{box-shadow:inset 0 0 0 1.5px var(--oxink);background:rgba(255,255,255,.55)}
.st3.or .ox-opt i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--oxink);background:#fff}
.st3.or .ox-opt.on i{box-shadow:inset 0 0 0 1.5px var(--oxink),inset 0 0 0 5px #fff;background:var(--oxink)}
.st3.or .ox-opt b{font-size:15px}
.st3.or .ox-opt em{margin-left:auto;font-style:normal;font-weight:700;font-size:15px}
.st3.or .ox-pair{display:flex;align-items:center;gap:16px;margin-top:12px}
.st3.or .ox-sw{position:relative;width:110px;height:60px;border-radius:999px;background:rgba(19,32,30,.12);box-shadow:inset 0 2px 6px rgba(0,0,0,.12)}
.st3.or .ox-sw i{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#A3A0AA;font:400 22px/1 "Onest",sans-serif;font-style:normal;box-shadow:0 6px 14px -4px rgba(0,0,0,.28)}
.st3.or .ox-pair b{display:block;font-size:15px}
.st3.or .ox-pair span{font-size:13.5px;color:var(--oxmut)}
.st3.or .ox-sum{display:grid;gap:0;padding:26px 26px 22px;border-radius:20px;background:var(--oxsea);color:var(--oxfoam)}
.st3.or .ox-sum small{display:block;margin-bottom:8px;font:600 11px "Onest",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#C9A45C}
.st3.or .ox-li{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid rgba(244,238,227,.14);font-size:14px}
.st3.or .ox-li span{opacity:.75}
.st3.or .ox-li b{font-weight:700;text-align:right}
.st3.or .ox-tot{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 16px}
.st3.or .ox-tot span{font-size:15px}
.st3.or .ox-tot b{font:400 40px/1 "Instrument Serif",Georgia,serif}
.st3.or .ox-conf{width:100%}
.st3.or .ox-note{display:flex;gap:10px;margin-top:12px;font-size:12px;line-height:1.45;opacity:.85}
.st3.or .ox-note i{flex:none;font:italic 400 13px "Instrument Serif",Georgia,serif}
.st3.or .ox-ft{display:grid;grid-template-columns:1.3fr 1fr 1fr .8fr;gap:22px;padding:44px 44px 50px;background:var(--oxsea);color:var(--oxfoam)}
.st3.or .ox-ft-b b{font:400 48px/1 "Instrument Serif",Georgia,serif}
.st3.or .ox-ft-b p{margin-top:10px;font-size:13.5px;opacity:.75}
.st3.or .ox-ft .mh6{margin:0 0 10px;font:600 10.5px "Onest",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--oxgold)}
.st3.or .ox-ft p{margin:0 0 6px;font-size:13.5px;line-height:1.6;opacity:.9}
.st3.or .ox-ft u{text-decoration-color:rgba(244,238,227,.35);text-underline-offset:3px}
.st3.or .ox-hrs{margin:-14px -16px;padding:14px 16px;border-radius:14px;background:var(--oxsea)}
.st3.or .pop:has(.ox-hrs){background:var(--oxsea)}
/* téléphone */
.st3.or .pm{gap:12px;padding:0 14px 30px;background:var(--oxs)}
.st3.or .pm .ox-hd{margin:0 -4px;height:52px;padding:0 10px 0 16px;border-radius:0 0 20px 20px}
.st3.or .pm .ox-logo{font-size:24px}.st3.or .pm .ox-wave{width:26px}
.st3.or .ox-burger{width:20px;height:1.5px;margin-left:auto;background:var(--oxfoam);box-shadow:0 -6px var(--oxfoam),0 6px var(--oxfoam)}
.st3.or .pm .ox-copy{margin-top:8px}
.st3.or .pm .ox-copy .mh4{font-size:36px;margin:8px 0}
.st3.or .pm .ox-copy p{font-size:13px}
.st3.or .pm .ox-btn{height:42px;font-size:13.5px}
.st3.or .pm .ox-plate img{width:100%;margin:0}
.st3.or .ox-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px var(--oxline);font:400 13px "Instrument Serif",Georgia,serif;white-space:nowrap;overflow:hidden}
.st3.or .ox-tabs span{padding:7px 10px;border-radius:999px}
.st3.or .ox-tabs span.on{background:var(--oxink);color:var(--oxs);font:600 11.5px/1.4 "Onest",sans-serif}
.st3.or .pm .ox-sum{padding:18px}
.st3.or .pm .ox-tot b{font-size:32px}
.st3.or .pm .ox-row{grid-template-columns:1fr 1fr;gap:10px}
.st3.or .pm .ox-th span{font-size:15px}
.st3.or .ox-hrs{color:var(--oxfoam)}
.st3.or .ox-hrs .mh6{margin:0 0 10px;font:600 10.5px "Onest",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--oxgold)}
.st3.or .ox-hrs p{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--oxfoam);opacity:.9}
.st3.or .pm-hrs .ox-conf{color:var(--oxsea)}
.st3.or .pm-hrs .ox-li span{color:var(--oxfoam);opacity:.85}
.st3.or .pm-hrs .ox-tot span{color:var(--oxfoam)}

/* ---------- Services (accueil) : la page s'épingle, les cartes se succèdent comme un paquet ---------- */
.svc-pin{width:min(calc(100% - 2 * var(--gut)),calc(1360px - 2 * var(--gut)));margin-inline:auto}
.svc-pin>.svc-tabs,.svc-pin .skill{width:auto;margin-inline:0}
.svc-deck .svc-track{position:relative}
.svc-deck .svc-pin{position:sticky;z-index:1}
.svc-deck .svc-stage{position:relative}
.svc-deck .skill{display:block!important;position:absolute;left:0;right:0;top:0;margin:0!important;animation:none!important;transform-origin:50% 0;will-change:transform,opacity;box-shadow:0 0 0 1px var(--line),0 -24px 60px -34px rgba(18,17,16,.45)}
.svc-deck .svc-tabs button{transition:background-color .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}

/* =====================================================================
   Design graphique : « Grano Negro », tostadero inventado (affiche suisse, risographie orange, papier crème)
   ===================================================================== */
.gn-art,.gn-ba{--gn-or:#FF5A1F;--gn-ink:#121110;--gn-paper:#EFE7DA;--gn-kraft:#C9A57A}
.pta .gn-slot{padding:0;border:0;background:none;overflow:visible}
.pta .gn-slot::before{display:none}
.pta .gr-menu.gn-slot{width:244px;height:366px;margin-left:-122px}
.pta .gr-fly.gn-slot{width:176px;height:250px;background:none}
.pta .gr-post.gn-slot{width:172px;height:206px}
/* affiche */
.gn-poster{position:relative;container-type:inline-size;width:100%;aspect-ratio:2/3;overflow:hidden;background:var(--gn-or);color:var(--gn-ink);font-family:var(--f-sans);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.gn-top{position:absolute;left:6cqw;right:6cqw;top:5cqw;display:flex;justify-content:space-between;align-items:baseline;padding-bottom:2.4cqw;border-bottom:.8cqw solid var(--gn-ink);font:700 4.4cqw/1 var(--f-sans);letter-spacing:.12em}
.gn-top i{font:500 3.2cqw/1 var(--f-mono);font-style:normal;letter-spacing:.06em}
.gn-cup{position:absolute;right:-14cqw;top:20cqw;width:78cqw;aspect-ratio:1;border-radius:50%;background:var(--gn-ink);box-shadow:inset 0 0 0 5cqw var(--gn-paper),inset 0 0 0 7cqw var(--gn-ink)}
.gn-crema{position:absolute;inset:16cqw;border-radius:50%;background:conic-gradient(from 0deg,#6b3a1d,#c98a4b,#8a4b22,#e0a868,#6b3a1d);-webkit-mask:radial-gradient(circle,#000 58%,transparent 60%);mask:radial-gradient(circle,#000 58%,transparent 60%);animation:gnSpin 14s linear infinite}
.gn-crema::after{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 40%,#f3d1a2,#b06a33 70%);filter:blur(1px)}
@keyframes gnSpin{to{transform:rotate(360deg)}}
.gn-word{position:absolute;left:4cqw;bottom:24cqw;font:400 40cqw/.78 "Barlow Condensed",var(--f-sans);letter-spacing:-.02em;color:var(--gn-ink);mix-blend-mode:multiply}
.gn-when{position:absolute;left:6cqw;right:6cqw;bottom:11cqw;display:flex;justify-content:space-between;align-items:baseline;padding-top:2.4cqw;border-top:.8cqw solid var(--gn-ink)}
.gn-when b{font:400 13cqw/1 "Barlow Condensed",var(--f-sans)}
.gn-when span{font:700 4.2cqw/1 var(--f-sans);letter-spacing:.1em}
.gn-origins{position:absolute;left:6cqw;right:6cqw;bottom:4cqw;display:flex;justify-content:space-between;margin:0;padding:0;list-style:none;font:500 3.4cqw/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.gn-dots{position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(18,17,16,.22) 22%,transparent 24%) 0 0/2.2cqw 2.2cqw;mix-blend-mode:multiply;opacity:.55;-webkit-mask:linear-gradient(160deg,transparent 45%,#000 80%);mask:linear-gradient(160deg,transparent 45%,#000 80%)}
/* paquet + étiquette */
.gn-bag{position:relative;width:100%;height:100%;border-radius:10px 10px 6px 6px;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 18%,transparent 82%,rgba(0,0,0,.14)),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),var(--gn-kraft);box-shadow:inset 0 14px 0 -6px rgba(0,0,0,.18)}
.gn-bag::before{content:"";position:absolute;left:0;right:0;top:12px;border-top:1.5px dashed rgba(0,0,0,.28)}
.gn-valve{position:absolute;left:50%;top:26px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#a9865c;box-shadow:inset 0 0 0 3px #8c6a43}
.gn-label{position:absolute;left:14px;right:14px;top:52px;bottom:18px;display:grid;align-content:start;gap:7px;padding:14px 12px;background:var(--gn-ink);color:var(--gn-paper);font-family:var(--f-sans)}
.gn-label b{font:400 34px/.86 "Barlow Condensed",var(--f-sans);letter-spacing:.01em;color:var(--gn-or)}
.gn-ori{font:700 9px/1 var(--f-sans);letter-spacing:.14em}
.gn-notes{font:italic 400 11px/1.3 "Instrument Serif",Georgia,serif;opacity:.85}
.gn-roast{display:flex;gap:4px}.gn-roast i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gn-or)}.gn-roast i.on{background:var(--gn-or)}
.gn-w{position:absolute;right:12px;bottom:10px;font:500 9px var(--f-mono);letter-spacing:.1em}
/* post Instagram */
.gn-ig{position:relative;width:100%;height:100%;display:grid;align-content:end;padding:14px;overflow:hidden;background:var(--gn-ink);color:var(--gn-paper);border-radius:3px}
.gn-tag{position:absolute;left:12px;top:12px;padding:4px 8px;background:var(--gn-or);color:var(--gn-ink);font:700 9.5px/1 var(--f-sans);letter-spacing:.14em}
.gn-bean{position:absolute;right:-6px;top:22px;width:92px;height:auto;fill:var(--gn-or);stroke:var(--gn-ink);stroke-width:3;transform:rotate(24deg);animation:gnBean 6s ease-in-out infinite alternate}
@keyframes gnBean{to{transform:rotate(34deg) translateY(4px)}}
.gn-ig b{position:relative;font:400 34px/.9 "Barlow Condensed",var(--f-sans)}
.gn-ig small{position:relative;margin-top:4px;font:500 9.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gn-or)}
.gn-ig .gn-dots{background-image:radial-gradient(rgba(255,90,31,.35) 22%,transparent 24%);mix-blend-mode:screen;background-size:7px 7px}
/* avant / après (section exemple) */
.gn-ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,3vw,44px);max-width:860px;margin:0 auto 44px}
.gn-ba figure{margin:0;display:grid;gap:12px;justify-items:center}
.gn-ba figcaption{font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.gn-ba .gn-after figcaption{color:var(--gold-t)}
.gn-ba .gn-poster{width:min(100%,330px);box-shadow:0 40px 70px -34px rgba(18,17,16,.55);transform:rotate(1.5deg);transition:transform .8s var(--spring)}
.gn-ba .gn-after:hover .gn-poster{transform:rotate(0) scale(1.03)}
.gn-arrow svg{width:60px;height:24px;fill:none;stroke:var(--gold-t);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gn-old{position:relative;width:min(100%,330px);aspect-ratio:2/3;display:grid;align-content:space-between;justify-items:center;padding:7%;background:linear-gradient(#fff9b0,#ffe06b);border:4px double #3355ff;box-shadow:0 30px 60px -36px rgba(18,17,16,.45);transform:rotate(-2deg);text-align:center;font-family:"Comic Sans MS","Comic Neue",cursive;color:#2a2aa8}
.gn-old b{font:900 clamp(18px,2.4vw,26px)/1.05 Impact,"Arial Black",sans-serif;color:#e0141a;text-shadow:2px 2px 0 #ffd400,3px 3px 0 #000;letter-spacing:.02em}
.gn-old-cup{font-size:clamp(46px,7vw,74px);filter:saturate(.6) blur(.4px)}
.gn-old p{margin:0;font-size:clamp(11px,1.2vw,13px);line-height:1.35}
.gn-old i{font:italic 11px/1.3 "Times New Roman",serif;color:#555}
.gn-old u{font:700 13px Arial,sans-serif;color:#0a7a2a}
@media (max-width:700px){.gn-ba{grid-template-columns:1fr 1fr;gap:12px}.gn-arrow{display:none}.gn-old b{font-size:15px}.gn-old-cup{font-size:36px}}
.calm .gn-crema,.calm .gn-bean{animation:none}
.gn-word{bottom:27.5cqw}
.pta .gr-menu .gn-origins{display:flex;gap:0;margin:0;text-align:left}
.pta .gr-menu .gn-origins li{display:block;animation:none}
.gn-ba figure{min-width:0}
@media (max-width:700px){.gn-ba .gn-old,.gn-ba .gn-poster{width:100%}.gn-old{padding:8% 6%}.gn-old p{font-size:10px}.gn-old i{font-size:9px}.gn-old u{font-size:10.5px}}
.svc-dim{position:absolute;inset:0;z-index:5;background:#121110;opacity:0;pointer-events:none;border-radius:inherit}
.svc-deck .skill{transform:translateZ(0);backface-visibility:hidden}
/* Grano Negro v2 : sachet noir mat, scellé en haut, étiquette crème */
.gn-bag{position:relative;width:100%;height:100%;border-radius:8px 8px 14px 14px;background:linear-gradient(90deg,rgba(255,255,255,.07),transparent 14%,transparent 80%,rgba(0,0,0,.35)),linear-gradient(180deg,#2a2725,#141312 40%,#0d0c0b);box-shadow:inset 0 -10px 18px -10px rgba(0,0,0,.8),inset 1px 0 0 rgba(255,255,255,.06);overflow:hidden}
.gn-bag::before{content:none}
.gn-seal{position:absolute;left:0;right:0;top:0;height:18px;background:repeating-linear-gradient(90deg,#1d1b19 0 3px,#2b2826 3px 5px);box-shadow:0 1px 0 rgba(255,255,255,.06),0 3px 6px rgba(0,0,0,.5)}
.gn-notch{position:absolute;right:10px;top:24px;width:8px;height:8px;border-radius:50%;background:#0a0908;box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.gn-bag::after{content:"";position:absolute;left:12%;top:0;bottom:0;width:18%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);pointer-events:none}
.gn-label{position:absolute;left:14px;right:14px;top:40px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:0;padding:12px 10px 10px;background:var(--gn-paper);color:var(--gn-ink);text-align:center;font-family:var(--f-sans);box-shadow:0 1px 0 rgba(255,255,255,.3) inset}
.gn-label::before{content:"";position:absolute;inset:4px;border:1px solid rgba(18,17,16,.18);pointer-events:none}
.gn-mark{width:22px;height:22px;fill:none;stroke:var(--gn-or);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gn-brand{margin-top:5px;font:700 9px/1 var(--f-sans);letter-spacing:.32em;padding-left:.32em;color:var(--gn-ink)}
.gn-kind{margin-top:3px;font:italic 400 8.5px/1 "Instrument Serif",Georgia,serif;opacity:.65}
.gn-country{margin-top:12px;padding-top:9px;width:100%;border-top:1px solid rgba(18,17,16,.2);font:600 8px/1 var(--f-mono);letter-spacing:.22em;color:var(--gn-ink)}
.gn-origin{margin-top:2px;font:400 46px/.9 "Barlow Condensed",var(--f-sans);letter-spacing:.02em;color:var(--gn-or)}
.gn-proc{font:500 7.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.gn-notes{margin-top:8px;font:italic 400 10px/1.25 "Instrument Serif",Georgia,serif;opacity:.85}
.gn-foot{margin-top:auto;width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:7px;border-top:1px solid rgba(18,17,16,.2)}
.gn-roast{display:flex;align-items:center;gap:3px;font:600 7.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.gn-roast i{width:7px;height:7px;margin-left:1px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--gn-ink)}
.gn-roast i.on{background:var(--gn-ink)}
.gn-foot>b{font:400 15px/1 "Barlow Condensed",var(--f-sans)}
.gn-label b.gn-brand{font:700 9px/1 var(--f-sans);letter-spacing:.32em;color:var(--gn-ink)}
.gn-label b.gn-origin{font:400 46px/.9 "Barlow Condensed",var(--f-sans);letter-spacing:.02em;color:var(--gn-or)}
.gn-label .gn-mark{flex:none;display:block}
.pta .gr-fly.gn-slot{left:-78px;top:96px}
/* Grano Negro v2 : affiche suisse propre (colonne sur grille, aucun chevauchement) */
.gn-poster{display:flex;flex-direction:column;padding:6.5cqw 6.5cqw 5.5cqw}
.gn-poster>*{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
.gn-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:2.6cqw;border-bottom:.7cqw solid var(--gn-ink);font:700 4.3cqw/1 var(--f-sans);letter-spacing:.14em}
.gn-top i{font:500 3.1cqw/1 var(--f-mono);font-style:normal;letter-spacing:.08em}
.gn-cup{flex:1;align-self:center;width:auto;height:auto;aspect-ratio:1;max-width:72cqw;margin:6cqw 0 4cqw;border-radius:50%;background:radial-gradient(circle,var(--gn-ink) 0 57%,var(--gn-paper) 57.5% 66%,var(--gn-ink) 66.5% 70%,transparent 70.5%);box-shadow:none}
.gn-crema{inset:15%;-webkit-mask:none;mask:none;background:conic-gradient(from 20deg,#5e3119,#b9783e,#7c4220,#d39a5c,#5e3119)}
.gn-crema::after{inset:28%;background:radial-gradient(circle at 42% 38%,#f1cf9f,#a8642f 75%);filter:none}
.gn-word{display:block;margin:0 0 3cqw -1cqw;font:400 37cqw/.8 "Barlow Condensed",var(--f-sans);letter-spacing:-.01em;mix-blend-mode:normal}
.gn-when{display:flex;justify-content:space-between;align-items:baseline;padding:2.6cqw 0 2.4cqw;border-top:.7cqw solid var(--gn-ink);border-bottom:.35cqw solid var(--gn-ink)}
.gn-when b{font:400 12cqw/.9 "Barlow Condensed",var(--f-sans)}
.gn-when span{font:700 4cqw/1 var(--f-sans);letter-spacing:.12em}
.gn-origins{display:grid!important;grid-template-columns:repeat(3,1fr);gap:0;padding-top:2.4cqw;font:500 3.2cqw/1 var(--f-mono);letter-spacing:.1em}
.gn-origins li:nth-child(2){text-align:center}.gn-origins li:nth-child(3){text-align:right}
.gn-dots{position:absolute!important;inset:0!important;-webkit-mask:linear-gradient(200deg,transparent 55%,#000 95%);mask:linear-gradient(200deg,transparent 55%,#000 95%);opacity:.45}
.pta .gr-menu .gn-origins{display:grid!important}
.gn-poster{padding:6.5% 6.5% 5.5%}
.gn-cup{background:radial-gradient(circle closest-side,var(--gn-ink) 0 66%,var(--gn-paper) 66.6% 84%,var(--gn-ink) 84.6% 90%,transparent 90.6%)}
.gn-crema{inset:18%}
.gn-word{align-self:flex-start}
.gn-cup .gn-crema{inset:auto;left:21%;top:21%;width:58%;height:58%}
.gn-cup{flex:none;width:60cqw;max-width:none;margin:auto 0;align-self:center}
/* « Anatomie d'un site » : moins de défilement pour tout voir (≈ 40 % plus court) */
.anat{height:430vh}
@media (max-width:900px){.anat{height:400vh}}

/* ---------- Tarifs : formule mise en avant (badge doré avec reflet) ---------- */
.offer .flag,.psum-flag{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;background:linear-gradient(135deg,var(--gold-l),var(--gold) 60%,#b08a42);color:#121110;font:600 12px/1 var(--f-sans);letter-spacing:.01em;box-shadow:0 8px 20px -8px rgba(201,164,92,.7);overflow:hidden;isolation:isolate}
.offer .flag::after,.psum-flag::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:flagShine 3.6s ease-in-out infinite}
@keyframes flagShine{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
.offer .flag{position:absolute}
.psum-card.is-pick{position:relative;z-index:1;background:linear-gradient(180deg,#fffdf8,#fbf5e8);box-shadow:0 0 0 1.5px var(--gold),0 30px 60px -36px rgba(201,164,92,.55)}
.psum-flag{position:absolute;top:-13px;left:22px}
.psum-card.is-pick .psum-l{color:var(--gold-t)}
.calm .offer .flag::after,.calm .psum-flag::after{animation:none}

/* ---------- Audit gratuit : bandeau doré, impossible à rater ---------- */
.audit-strip,.dark-half .audit-strip{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#E8CF94,#C9A45C 55%,#B08A42);color:#121110;box-shadow:0 30px 60px -34px rgba(201,164,92,.75),inset 0 1px 0 rgba(255,255,255,.45)}
.audit-strip::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%) no-repeat;background-size:250% 100%;animation:flagShine 5s ease-in-out infinite}
.audit-strip .pz,.dark-half .audit-strip .pz{color:#121110}
.audit-strip h3,.dark-half .audit-strip h3{color:#121110}
.audit-strip p,.dark-half .audit-strip p{color:rgba(18,17,16,.78)}
.audit-strip .pill-gold,.audit-strip .btn-gold,.dark-half .audit-strip .pill-gold{background:#121110;color:#E8CF94;box-shadow:0 10px 24px -10px rgba(18,17,16,.6)}
.audit-strip .pill-gold:hover,.audit-strip .btn-gold:hover{background:#2a2622;color:#F3DFA9}
.calm .audit-strip::after{animation:none}
.psum-flag{position:relative;top:auto;left:auto;align-self:flex-start;width:max-content;margin:-6px 0 10px;padding:5px 11px;font-size:11.5px}
.audit-strip::after{opacity:.7}

/* ---------- Page Google : comparateur avant/après de la fiche (barre au milieu) ---------- */
.gba{max-width:980px;margin:0 auto 46px}
.gba .ba-stage{aspect-ratio:1.25/1;max-height:640px}
.gba .gb{max-width:72cqw}
.gb-rate{display:flex;align-items:center;gap:1cqw;color:#70757A}
.gb-rate i{font-style:normal;color:#FBBC04;letter-spacing:.06em}
.gb-acts{flex-wrap:wrap}
.gb-svc{display:flex;flex-wrap:wrap;gap:1cqw;margin-top:1cqw}
.gb-svc span{padding:.8cqw 1.8cqw;border-radius:1cqw;background:#F1F3F4;color:#3C4043;font-size:2.2cqw}
.gb-post{display:grid;gap:.4cqw;margin-top:1.2cqw;padding:1.8cqw 2.2cqw;border-radius:1.6cqw;background:#FEF7E0;color:#3C4043;font-size:2.3cqw}
.gb-post small{font-size:1.9cqw;font-weight:700;color:#B06000;text-transform:uppercase;letter-spacing:.06em}
.gb-own{margin-top:1.6cqw;color:#1A73E8;font-size:2.2cqw;text-decoration:underline}
.gb-bf{filter:saturate(.7)}
@media (max-width:900px){.gba .ba-stage{width:100%;aspect-ratio:.82/1}.gba .gb{max-width:88cqw}.gba+.case-grid{margin-top:10px}.gba .ba-tags{display:none}}
.gba .ba-side{padding:0}
.gba .gb{display:flex;flex-direction:column;width:60cqw;max-width:none;height:68cqw;font-size:2.05cqw}
.gba .gb-photo{flex:none;height:21cqw}
.gba .gb-body{flex:1;gap:.9cqw;padding:2.6cqw 3cqw;overflow:hidden}
.gba .gb-name{font-size:3.4cqw}
.gba .gb-acts span{font-size:1.9cqw;padding:1cqw 2cqw}
.gba .gb-svc span,.gba .gb-post,.gba .gb-own{font-size:1.9cqw}
@media (max-width:900px){.gba .gb{width:86cqw;height:104cqw;font-size:3cqw}.gba .gb-photo{height:30cqw}.gba .gb-name{font-size:4.8cqw}.gba .gb-acts span,.gba .gb-svc span,.gba .gb-post,.gba .gb-own{font-size:2.8cqw}}

/* =====================================================================
   Page audit : maquette de rapport (feuille blanche, logo Keubz, score, priorités)
   ===================================================================== */
.ar{margin-top:34px}
.ar-sheet{position:relative;padding:26px 28px 22px;border-radius:20px;background:#FCFBF8;color:#121110;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(201,164,92,.25);font-family:var(--f-sans)}
.ar-sheet::before{content:"";position:absolute;left:28px;right:28px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#E8CF94,#C9A45C,#B08A42)}
.ar-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #ECE7DE}
.ar-logo{width:34px;height:34px;border-radius:50%;background:#121110;object-fit:contain}
.ar-head div{display:grid;gap:2px}
.ar-head b{font:400 22px/1 var(--f-disp)}
.ar-head span{font-size:12.5px;color:#6E685E}
.ar-head time{margin-left:auto;font:500 11px var(--f-mono);letter-spacing:.06em;color:#8A847A}
.ar-score{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px;padding:18px 0}
.ar-ring{position:relative;width:118px;height:118px}
.ar-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ar-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ar-ring .bg{stroke:#EFEBE3}
.ar-ring .pt{stroke:rgba(201,164,92,.28);stroke-dasharray:0 100;transition:stroke-dasharray 1.4s var(--ease-out) .6s}
.ar-ring .fg{stroke:#C9A45C;stroke-dasharray:0 100;transition:stroke-dasharray 1.2s var(--ease-out) .2s}
.ar.in .ar-ring .fg{stroke-dasharray:62 100}
.ar.in .ar-ring .pt{stroke-dasharray:91 100}
.ar-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ar-ring b{font:400 40px/1 var(--f-disp)}
.ar-ring small{font:500 11px var(--f-mono);color:#8A847A}
.ar-sk small{display:block;font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8A847A}
.ar-up{display:flex;align-items:baseline;gap:8px;margin:4px 0 12px;font-size:13px;color:#6E685E}
.ar-up b{padding:2px 9px;border-radius:999px;background:#EAF5EC;color:#1F7A3A;font:600 13px var(--f-sans)}
.ar-bar{display:grid;grid-template-columns:76px 1fr 26px;align-items:center;gap:10px;margin-top:7px;font-size:13px}
.ar-bar i{height:7px;border-radius:9px;background:#EFEBE3;overflow:hidden}
.ar-bar em{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#E8CF94,#C9A45C);transition:width 1.1s var(--ease-out);transition-delay:calc(.4s + var(--d,0s))}
.ar.in .ar-bar em{width:calc(var(--v) * 1%)}
.ar-bar b{font:600 12.5px var(--f-mono);text-align:right}
.ar-pk{margin:6px 0 10px;font:500 10.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8A847A}
.ar-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ar-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:13px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #ECE7DE;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0s)}
.ar.in .ar-list li{opacity:1;transform:none}
.ar-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#121110;color:#E8CF94;font:600 13px var(--f-mono)}
.ar-tag{display:inline-block;margin-bottom:4px;padding:2px 8px;border-radius:999px;font:600 10.5px/1.5 var(--f-sans);letter-spacing:.02em}
.p0 .ar-tag{background:#FDE7E4;color:#B3261E}.p1 .ar-tag{background:#FFF1D6;color:#9A5B00}.p2 .ar-tag{background:#E8F1FB;color:#1F5FA8}
.ar-list b{display:block;font-size:14.5px;line-height:1.3}
.ar-list p{margin:3px 0 7px;font-size:13px;line-height:1.45;color:#6E685E}
.ar-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:#8A847A}
.ar-meta i{display:inline-flex;align-items:center;gap:5px;font-style:normal}
.ar-meta svg,.ar-stamp svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ar-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid #ECE7DE}
.ar-stamp{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#121110;color:#E8CF94;font:600 12px var(--f-sans)}
.ar-sign{font:italic 400 15px "Instrument Serif",Georgia,serif;color:#6E685E}
.ar-fict{margin:10px 0 0;text-align:right;font:500 10px var(--f-mono);letter-spacing:.08em;color:#A39C90}
@media (max-width:600px){.ar-sheet{padding:20px 16px 16px}.ar-score{grid-template-columns:1fr;justify-items:center}.ar-sk{width:100%}.ar-head time{display:none}}
.calm .ar-list li{transition:none}

/* comparateur : invitation discrète à bouger la barre (pulsation + petit va-et-vient tant qu'on n'y a pas touché) */
.ba:not(.touched) .ba-handle span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:baHint 2.4s ease-out infinite}
@keyframes baHint{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.5)}}
.ba-handle span{position:absolute}
.calm .ba:not(.touched) .ba-handle span::after{animation-duration:4s}
@media (min-width:901px){.audit>.wrap>.rv{position:sticky;top:100px}}

/* ---------- Relecture : petit logo Keubz, pied de page ---------- */
.kz-mini{display:inline-block;width:22px;height:22px;margin-right:10px;border-radius:50%;background:#121110;vertical-align:-3px;object-fit:contain;box-shadow:0 0 0 1px rgba(201,164,92,.35)}
.dl-by{display:inline-flex;align-items:center;gap:0;margin:-4px 0 0;font:500 12.5px var(--f-sans);color:rgba(243,242,238,.65)}
.dl-by .kz-mini{width:20px;height:20px;margin-right:8px}
.dl-copy .dl-by{grid-column:1/-1}
.foot-bottom{align-items:center;padding-right:84px}
.foot-bottom>*{display:inline-flex;align-items:center;min-height:44px}
.crumbs{align-items:center}
.crumbs>*{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom>*{display:inline-block;min-height:0;line-height:44px}
.foot-bottom a{display:inline-flex}
.art-ig .art-fict{position:absolute;left:0;right:0;top:484px;margin:0;text-align:center}
.offer.feat,.dark-half .offer.feat{box-shadow:0 0 0 2px var(--gold),0 30px 60px -36px rgba(201,164,92,.55)}
.offer.feat .btn-ink,.offer.feat .btn:not(.btn-ghost){box-shadow:0 12px 26px -12px rgba(18,17,16,.55)}
/* ---------- Relecture : moins de vide entre les sections, mentions « inventé » sous les maquettes, service seul en ligne ---------- */
.sec{padding:11vh 0}
.art-web .art-fict{position:absolute;left:0;right:0;bottom:-30px;top:auto;margin:0;text-align:center}
.extras-cards.cols-1 .xcard{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"name price btn" "desc price btn";align-items:center;gap:4px 34px;padding:24px 30px}
.extras-cards.cols-1 .xc-name{grid-area:name}
.extras-cards.cols-1 .xc-desc{grid-area:desc;margin:0}
.extras-cards.cols-1 .xc-price{grid-area:price}
.extras-cards.cols-1 .xc-btn{grid-area:btn}
@media (max-width:700px){.extras-cards.cols-1 .xcard{grid-template-columns:1fr;grid-template-areas:"name" "price" "desc" "btn"}}
.svc-links.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.svc-links.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-links.four{grid-template-columns:1fr}}

/* ---------- Hero · KEUBZ Merch : boutique de t-shirts (blanc éditorial, capitales condensées) ---------- */
.hs-keubz{background:#F7F6F3;color:#111}
.ks-bar{overflow:hidden;padding:8px 0;background:#111;color:#F7F6F3;font:600 9.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-align:center}
.ks-nav{display:flex;align-items:center;gap:20px;padding:13px 24px;border-bottom:1px solid #E4E1DB}
.ks-logo{font:700 19px/1 "Barlow Condensed",var(--f-sans);letter-spacing:.1em}
.ks-logo span{font-weight:400;color:#B08A42}
.ks-links{display:flex;gap:16px;margin:0 auto;font:500 11.5px var(--f-sans);color:#5a5650}
.ks-links i{font-style:normal}
.ks-cart{display:flex;align-items:center;gap:6px;font:600 11.5px var(--f-sans)}
.ks-cart svg{width:14px;height:14px}
.ks-n{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#111;font-size:0;font-style:normal;transition:background-color .3s}
.ks-n::after{content:"0";font:700 10px/1 var(--f-sans);color:#fff}
.hb.booked .ks-n{background:#C9A45C;animation:ksPop .55s cubic-bezier(.3,1.6,.5,1)}
.hb.booked .ks-n::after{content:"1";color:#111}
@keyframes ksPop{40%{transform:scale(1.5)}100%{transform:none}}
.ks-hero{display:grid;grid-template-columns:1.08fr .92fr;height:330px;border-bottom:1px solid #E4E1DB}
.ks-shot{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#fff,#ECEBE6 72%);border-right:1px solid #E4E1DB}
.ks-shot .ks-tee{position:absolute;width:64%;height:auto;filter:drop-shadow(0 22px 22px rgba(0,0,0,.2));animation:ksFloat 5s ease-in-out infinite}
.ks-shot .ka{animation:ksFloat 5s ease-in-out infinite,ksA 9s ease-in-out infinite}
.ks-shot .kb{animation:ksFloat 5s ease-in-out infinite,ksB 9s ease-in-out infinite}
@keyframes ksFloat{50%{translate:0 -7px;rotate:-1.5deg}}
@keyframes ksA{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes ksB{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.ks-tag{position:absolute;left:16px;top:16px;z-index:2;padding:5px 9px;background:#111;color:#fff;font:700 9px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}
.ks-info{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 26px}
.ks-crumb{font:500 9px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#8A857B}
.ks-info .mh5{margin:0;font:700 48px/.86 "Barlow Condensed",var(--f-sans);text-transform:uppercase}
.ks-info p{margin:0;font-size:11.5px;line-height:1.4;color:#666}
.ks-price{font:700 24px/1 "Barlow Condensed",var(--f-sans)}
.ks-opt{display:flex;align-items:center;gap:7px}
.ks-opt>span{width:46px;font:600 8.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#8A857B}
.ks-opt .sw{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #CFCAC1}
.ks-opt .sw.b{background:#111;animation:ksRA 9s ease-in-out infinite}
.ks-opt .sw.w{background:#fff;animation:ksRB 9s ease-in-out infinite}
@keyframes ksRA{0%,42%{box-shadow:0 0 0 2px #F7F6F3,0 0 0 3.5px #111}50%,92%{box-shadow:inset 0 0 0 1px #CFCAC1}100%{box-shadow:0 0 0 2px #F7F6F3,0 0 0 3.5px #111}}
@keyframes ksRB{0%,42%{box-shadow:inset 0 0 0 1px #CFCAC1}50%,92%{box-shadow:0 0 0 2px #F7F6F3,0 0 0 3.5px #111}100%{box-shadow:inset 0 0 0 1px #CFCAC1}}
.ks-opt em{display:grid;place-items:center;min-width:28px;height:24px;border:1px solid #D9D5CE;font:600 10.5px var(--f-sans);font-style:normal}
.ks-opt em.on{background:#111;border-color:#111;color:#fff}
.ks-add{display:flex;justify-content:center;margin-top:6px;padding:12px;background:#111;color:#fff;font:700 10.5px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;transition:background-color .35s,color .35s}
.hb.booked .ks-add{background:#C9A45C;color:#111}
.ks-row{display:grid;grid-template-columns:1fr 1fr .7fr;border-bottom:1px solid #E4E1DB}
.ks-card{display:grid;gap:4px;padding:14px 18px;border-right:1px solid #E4E1DB}
.ks-card i{display:grid;place-items:center;height:96px;background:#EFEEE9}
.ks-card svg{width:44%;height:auto}
.ks-card b{font:700 14px/1.1 "Barlow Condensed",var(--f-sans);text-transform:uppercase;letter-spacing:.02em}
.ks-card span{font:600 12px var(--f-sans);color:#555}
.ks-more{place-content:center;justify-items:center;text-align:center;background:#111;color:#fff;border:0}
.ks-more b{font-size:30px}.ks-more span{color:#C9A45C}
.ks-band{display:flex;align-items:center;gap:14px;padding:18px 24px;background:#111;color:#F7F6F3}
.ks-band b{font:700 20px/1 "Barlow Condensed",var(--f-sans);text-transform:uppercase;letter-spacing:.04em}
.ks-band span{font-size:12px;opacity:.7}
.ks-band i{margin-left:auto;font-style:normal;color:#C9A45C}
.hb.s-band .hb-desk.hs-keubz .ks-band{background-color:#111!important}
.calm .ks-shot .ka,.calm .ks-shot .kb,.calm .ks-opt .sw{animation-duration:12s}
@container (max-width:300px){
  .ks-bar{font-size:8px;letter-spacing:.1em}
  .ks-nav{padding:10px 12px}.ks-links{display:none}.ks-logo{margin-right:auto;font-size:16px}
  .ks-hero{grid-template-columns:1fr;height:auto}.ks-shot{height:190px;border-right:0;border-bottom:1px solid #E4E1DB}
  .ks-info{padding:14px}.ks-info .mh5{font-size:36px}
  .ks-row{grid-template-columns:1fr 1fr}.ks-more{display:none}.ks-card{padding:10px}.ks-card i{height:70px}
  .ks-band{flex-wrap:wrap;gap:6px;padding:14px}
}
.ks-shot .ks-tee{width:70%}

/* ---------- Hero · Ámbar v2 : cosmétique haut de gamme (sable, lumière chaude, serif italique) ---------- */
.hs-ambar{background:linear-gradient(160deg,#F6EFE6,#EFE3D3);color:#2A1A0C}
.ab-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 26px;border-bottom:1px solid rgba(42,26,12,.1)}
.ab-links{display:flex;gap:16px;font:500 11.5px var(--f-sans);color:#7A6450}
.ab-links i{font-style:normal}
.ab-logo{font:500 21px/1 "Instrument Serif",Georgia,serif;letter-spacing:.32em;padding-left:.32em}
.ab-bag{display:flex;justify-content:flex-end;align-items:center;gap:6px;font:600 11.5px var(--f-sans)}
.ab-bag svg{width:14px;height:14px}
.ab-bag em{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#B8661F;color:#fff;font:700 9.5px/1 var(--f-sans);font-style:normal}
.ab-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;height:340px;padding:0 0 0 30px}
.ab-copy small{display:block;font:600 9.5px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#B8661F}
.ab-copy .mh5{margin:12px 0 12px;font:400 50px/.98 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.ab-copy .mh5 em{font-style:italic;color:#B8661F}
.ab-copy p{max-width:270px;margin:0;font-size:12px;line-height:1.55;color:#7A6450}
.ab-ctas{display:flex;gap:8px;margin-top:18px}
.ab-buy,.ab-rit{display:inline-flex;align-items:center;padding:11px 18px;border-radius:999px;font:600 11.5px/1 var(--f-sans)}
.ab-buy{background:#2A1A0C;color:#F6EFE6}
.ab-rit{box-shadow:inset 0 0 0 1.3px rgba(42,26,12,.35)}
.hb.booked .ab-buy{background:#B8661F}
.ab-tags{display:flex;gap:12px;margin-top:16px;font:500 10px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9A8470}
.ab-tags span::before{content:"✓ ";color:#6F7D4C}
.ab-stage{position:relative;height:100%;overflow:hidden}
.ab-sun{position:absolute;left:50%;top:44%;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,150,.75),rgba(255,214,150,0));animation:abSun 7s ease-in-out infinite}
@keyframes abSun{50%{transform:scale(1.08);opacity:.85}}
.ab-stone{position:absolute;left:50%;bottom:18px;width:180px;height:44px;margin-left:-90px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#E9DDCB,#CDBBA2 70%);box-shadow:0 18px 30px -14px rgba(60,35,10,.45),inset 0 -6px 10px rgba(120,90,60,.25)}
.ab-bottle{position:absolute;left:50%;bottom:40px;z-index:2;width:106px;height:auto;margin-left:-53px;filter:drop-shadow(0 18px 18px rgba(60,30,8,.3));animation:abFloat 6s ease-in-out infinite}
@keyframes abFloat{50%{transform:translateY(-6px)}}
.ab-drop{position:absolute;left:calc(50% - 4px);top:62px;z-index:1;width:8px;height:11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#e6a45a,#b8661f);opacity:0;animation:abDrop 4.5s ease-in 1.5s infinite}
@keyframes abDrop{0%{opacity:0;transform:translateY(0) scale(.6)}10%{opacity:1;transform:scale(1)}40%{opacity:1;transform:translateY(-34px)}55%{opacity:0;transform:translateY(-34px) scale(.4)}100%{opacity:0}}
.ab-leaf{position:absolute;left:calc(50% + 36px);bottom:44px;z-index:1;width:70px;height:auto;transform-origin:50% 100%;animation:abLeaf 5s ease-in-out infinite}
@keyframes abLeaf{50%{transform:rotate(6deg)}}
.ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 26px 22px}
.ab-card{display:grid;gap:2px;padding:12px;border-radius:16px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(42,26,12,.08)}
.ab-card i{display:grid;place-items:center;height:100px;margin-bottom:6px;border-radius:12px;background:radial-gradient(80% 90% at 50% 80%,#F3E2C2,#EDE3D4 70%)}
.ab-card svg{height:86%;width:auto}
.ab-card b{font:400 16px/1.1 "Instrument Serif",Georgia,serif}
.ab-card span{font-size:11px;color:#9A8470}
.ab-card em{font:600 13px var(--f-sans);font-style:normal;color:#B8661F}
.ab-band{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 26px 24px;padding:18px 22px;border-radius:16px;background:#2A1A0C;color:#F6EFE6}
.ab-band b{display:block;font:400 19px "Instrument Serif",Georgia,serif}
.ab-band span{font-size:11.5px;opacity:.7}
.ab-band i{font-style:normal;font:600 12px var(--f-sans);color:#F1C27D}
.hb.s-band .hb-desk.hs-ambar .ab-band{background-color:#2A1A0C!important}
.calm .ab-sun,.calm .ab-bottle,.calm .ab-leaf{animation-duration:12s}.calm .ab-drop{animation:none}
@container (max-width:300px){
  .ab-nav{grid-template-columns:auto 1fr;padding:12px 14px}.ab-links{display:none}.ab-logo{font-size:17px}
  .ab-hero{grid-template-columns:1fr;height:auto;padding:16px 14px 0}.ab-stage{height:210px;order:-1}
  .ab-copy .mh5{font-size:34px}.ab-tags{flex-wrap:wrap;gap:6px}
  .ab-grid{grid-template-columns:1fr 1fr;padding:14px}.ab-grid .ab-card:nth-child(3){display:none}
  .ab-band{flex-direction:column;align-items:flex-start;margin:0 14px 16px}
}
/* construction progressive (ordinateur) : chaque détail arrive à son étape */
.hb-desk :is(.ks-bar,.ks-tag,.ks-crumb,.ks-price,.ks-opt,.ab-copy p,.ab-rit,.ab-tags){opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.hb.s-nav .hb-desk .ks-bar{opacity:1;transform:none}
.hb.s-title .hb-desk :is(.ks-crumb,.ab-copy p){opacity:1;transform:none;transition-delay:calc(var(--chars,12) * 40ms + .1s)}
.hb.s-img .hb-desk :is(.ks-tag,.ks-price){opacity:1;transform:none;transition-delay:.5s}
.hb.s-img .hb-desk .ks-opt{opacity:1;transform:none;transition-delay:.8s}
.hb.s-img .hb-desk .ks-opt+.ks-opt{transition-delay:1s}
.hb.s-btn .hb-desk :is(.ab-rit,.ab-tags){opacity:1;transform:none;transition-delay:.15s}
.hb-desk .ks-opt em.on{transition:background-color .3s .2s}
.hb:not(.s-btn) .hb-desk .ks-opt em.on{background:transparent;color:inherit;border-color:#D9D5CE}
.hb-desk .ab-bag em{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.hb.booked .hb-desk .ab-bag em{transform:scale(1)}
@keyframes ksA{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes ksB{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
@keyframes ksRA{0%,45%{box-shadow:0 0 0 2px #F7F6F3,0 0 0 3.5px #111}50%,95%{box-shadow:inset 0 0 0 1px #CFCAC1}100%{box-shadow:0 0 0 2px #F7F6F3,0 0 0 3.5px #111}}
@keyframes ksRB{0%,45%{box-shadow:inset 0 0 0 1px #CFCAC1}50%,95%{box-shadow:0 0 0 2px #F7F6F3,0 0 0 3.5px #111}100%{box-shadow:inset 0 0 0 1px #CFCAC1}}

/* Hero : survol des onglets = changement instantané et fluide (copie figée qui se dissout + cascade + reflet) */
.hb.snap,.hb.snap *{transition:none!important}
.hb-ghost{z-index:3;pointer-events:none;transition:opacity .55s cubic-bezier(.4,0,.2,1),filter .55s cubic-bezier(.4,0,.2,1)}
.hb-ghost .hb-scr{transition:transform .6s cubic-bezier(.4,0,.2,1)!important}
.hb-ghost.out{opacity:0;filter:blur(10px) saturate(1.2)}
.hb-ghost.out .hb-scr{transform:scale(1.035)}
.hb.peek-in .hb-desk .hs-in>*{animation:hbPeek .7s cubic-bezier(.16,1,.3,1) calc(var(--k,0) * 55ms) both}
@keyframes hbPeek{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hb.peek-in .hb-scr::after{content:"";position:absolute;inset:-20% -60%;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(232,207,148,.28) 48%,rgba(255,250,235,.45) 50%,rgba(232,207,148,.28) 52%,transparent 60%);animation:hbSheen .9s cubic-bezier(.4,0,.2,1) both}
@keyframes hbSheen{from{transform:translateX(-60%)}to{transform:translateX(60%);opacity:0}}
.calm .hb.peek-in .hb-desk .hs-in>*{animation:hbPeekC .45s ease both}
@keyframes hbPeekC{from{opacity:0}to{opacity:1}}
.calm .hb.peek-in .hb-scr::after{display:none}
.calm .hb-ghost.out{filter:none}.calm .hb-ghost.out .hb-scr{transform:none}
/* Anatomie : carte de réservation du téléphone, tout tient dans la carte (FR/EN plus longs) */
.st3.or .pm .ox-sum>*{min-width:0}.st3.or .pm .ox-tot{margin:16px 0 14px}.st3.or .pm .ox-tot b{font-size:30px}.st3.or .pm .ox-conf{box-sizing:border-box;width:100%;max-width:100%;gap:8px;padding:0 5px 0 16px;font-size:13px}.st3.or .pm .ox-conf .ox-orb{flex:none}

/* =================== v3 · revue design de l'accueil =================== */
/* 1. Anatomía : ≈ 55 % de défilement en moins sur mobile (400vh → 230vh) */
@media (max-width:900px){.anat{height:230vh}}
/* 2. Lonja en entier une seule fois (démo live) : dans l'Anatomía, seulement l'accueil + une barre de réservation */
.st3.or .ox-mini{display:block;padding:26px 44px 30px;border-top:0}
.st3.or .ox-bar{display:flex;align-items:center;gap:28px;padding:20px 22px 20px 28px}
.st3.or .ox-bar>div:first-child{flex:1;min-width:0}
.st3.or .ox-bar small{margin-bottom:4px}
.st3.or .ox-bar-v{display:block;font:600 16px "Onest",sans-serif}
.st3.or .ox-bar .ox-tot{margin:0;gap:14px}
.st3.or .ox-bar .ox-conf{width:auto}
/* 4. Une seule police de titre (Barlow Condensed), une seule police de texte (Onest), hors maquettes */
:is(h1,h2,.mh3,.mh4):not(.hero-h1):not(:is(.hero-show,.st3,#dlStage,.dl-stage,.pta,.gn-ba,.gn-art,.ar,.ba,.mk,.phone,.layer,#site,.bwin,#aiScreen,.svc-stage .art,.art,.hs,.am,.pm,.case-mock) *){font-family:var(--f-disp);font-weight:400;letter-spacing:-.005em}
:is(h1,h2,h3,h4):not(.hero-h1):not(:is(.hero-show,.st3,#dlStage,.dl-stage,.pta,.gn-ba,.gn-art,.ar,.ba,.mk,.phone,.layer,#site,.bwin,#aiScreen,.svc-stage .art,.art,.hs,.am,.pm,.case-mock) *) :is(em,i,span,b){font-family:inherit}
:is(h1,h2,h3,h4):not(.hero-h1):not(:is(.hero-show,.st3,#dlStage,.dl-stage,.pta,.gn-ba,.gn-art,.ar,.ba,.mk,.phone,.layer,#site,.bwin,#aiScreen,.svc-stage .art,.art,.hs,.am,.pm,.case-mock) *) em{font-style:italic;font-weight:300}
/* 5. Hero mobile : seul le sélecteur Ámbar / Nácar / Lonja, pas de « Desliza » ni de bandeau défilant */
@media (max-width:900px){.scroll-hint,#ribbon,.ribbon{display:none!important}}
/* 6. Liaison noir → crème : un espace vide où passe le vrai dégradé */
.tone-bridge{height:38vh;pointer-events:none}
html:not(.tone) .tone-bridge{display:none}
/* 7. Tailles minimales sur mobile (hors maquettes) : 16 px pour le texte courant, 14 px pour légendes et surtitres */
@media (max-width:900px){
  :is(.trust li>span,.psum-d,.hero-zone,.audit-strip p,.fine,.proc li>p,.audit-get li span,.u031-o span,.u044-a p,.foot-grid p,.skill ul li,.dl-pts li):not(:is(.hero-show,.st3,#dlStage,.pta,.gn-ba,.gn-art,.ar,.ba,.mk,.scene,.hs) *){font-size:16px!important;line-height:1.55}
  :is(.langs a,.st-chip span,.note .ix,.devs li span,.svc-tabs button span,.u031-lab,.copy-btn span,.u044-n,.foot-bottom,.foot-bottom span,.foot-bottom a,.foot-h,.fict,.dl-by span,.sk-body .k,.psum-k,.psum-flag,.note-s,.hx-cap,.eyebrow):not(:is(.hero-show,.st3,#dlStage,.pta,.gn-ba,.gn-art,.ar,.ba,.mk,.scene,.hs) *){font-size:14px!important}
}
/* titres des maquettes : de simples paragraphes stylés (pas de faux titres dans le plan de la page) */
:where(.mh3,.mh4,.mh5,.mh6){display:block;font-weight:bold}:where(.mh3){font-size:1.17em;margin-block:1em}:where(.mh4){margin-block:1.33em}:where(.mh5){font-size:.83em;margin-block:1.67em}:where(.mh6){font-size:.67em;margin-block:2.33em}
/* v3 · hauteur mobile : sections plus serrées, Anatomía 200vh, liaison plus courte, pied de page sur 2 colonnes */
@media (max-width:900px){
  .light-half>.sec:not(.final),#darkHalf>.sec:not(.hero){padding-top:56px!important;padding-bottom:56px!important}
  .final{padding-top:96px!important;padding-bottom:80px!important}
  .anat{height:200vh}
  .tone-bridge{height:24vh}
  #contacto .foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  #contacto .foot-grid>:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .psum{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .psum .psum-card{padding:16px 14px!important;min-height:0!important}
  .psum .psum-d{display:none}
  .psum .psum-card.is-pick{grid-column:1/-1}
  #contacto .foot-grid>div:last-child ul{columns:2;column-gap:20px}
  #contacto .foot-bottom{display:flex;flex-wrap:wrap;gap:6px 16px;padding-top:20px}
}
@media (max-width:900px){
  #contacto .foot-grid>div:last-child ul{display:block!important;columns:2;column-gap:20px}
  #contacto .foot-grid>div:last-child li{break-inside:avoid;margin-bottom:6px}
  #contacto .foot-bottom>*{line-height:1.6!important;min-height:0!important}
  .psum .psum-p{white-space:nowrap;font-size:clamp(34px,10vw,44px)!important}
  .psum .psum-p small{display:block;margin-bottom:2px}
}
@media (max-width:900px){#contacto .foot-grid>div:last-child{grid-column:1/-1}}
@media (max-width:900px){.psum .psum-card:last-child{grid-column:1/-1}}
/* v3 · Anatomía mobile : explications collées sous la tablette, texte d'introduction avant la 1re */
.anat-intro{display:none}
@media (max-width:900px){
  .anat.dom3 .note{top:var(--nt,auto)!important;bottom:auto!important}
  .anat.dom3 .anat-intro{display:block;position:absolute;left:16px;right:16px;top:var(--nt,70%);z-index:5;margin:0;padding:14px 16px;border-radius:16px;background:rgba(16,13,10,.72);box-shadow:inset 0 0 0 1px rgba(201,164,92,.22);color:#D9D1C3;font-size:16px;line-height:1.5;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);pointer-events:none}
  .anat.dom3.no-note .anat-intro{opacity:1;transform:none}
}
@media (max-width:900px){.anat.dom3 .notes{inset:0!important;height:auto!important}}
/* v3 · hauteur mobile ≤ ~12 700 px : « Por qué » en carrousel horizontal, liaison et étapes plus serrées */
@media (max-width:900px){
  #por-que .why-grid{display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:84%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 14px;margin:0 -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #por-que .why-grid::-webkit-scrollbar{display:none}
  #por-que .why-grid>*{scroll-snap-align:start}
  .tone-bridge{height:16vh}
  #proceso .proc li{padding-bottom:14px!important}
}
@media (max-width:900px){.final{padding-top:64px!important;padding-bottom:64px!important}#preguntas{padding-bottom:40px!important}}
@media (max-width:900px){#por-que .why-grid{padding:4px 20px 14px;margin:0 -20px;scroll-padding:0 20px}#por-que .why-grid>*{padding:18px 18px 20px;border-radius:16px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(18,17,16,.08)}.tone-bridge{height:12vh}}
.dl-fict{margin:10px 0 0;text-align:center;color:#A39A8B;font-size:12px;letter-spacing:.14em;text-transform:uppercase}@media (max-width:900px){.dl-fict{font-size:14px}}

/* =================== Anatomía · exemple « Salvia », studio de pilates (sauge, crème, serif) =================== */
.st3.sv{--sv-bg:#F5F2EC;--sv-ink:#1F231D;--sv-mut:#5F665A;--sv-sage:#5E6B55;--sv-sage-l:#C9D1B8;--sv-line:rgba(31,35,29,.12);--sv-terra:#B86F52}
.st3.sv .tab-scr,.st3.sv .am-new,.st3.sv .iph-scr,.st3.sv .pop{background:var(--sv-bg)}
.st3.sv .am{font-family:"Onest",system-ui,sans-serif;color:var(--sv-ink)}
.st3.sv .sv-leaf{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st3.sv .sv-logo{display:inline-flex;align-items:center;gap:8px;font:400 30px/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;color:var(--sv-ink)}
.st3.sv .sv-logo .sv-leaf{color:var(--sv-sage)}
.st3.sv small{display:block;font:600 11.5px/1.3 "Onest",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--sv-sage)}
.st3.sv em{font-style:italic;color:var(--sv-sage)}
/* tablette */
.st3.sv .sv-nav{display:flex;align-items:center;gap:30px;height:72px;padding:0 44px;border-bottom:1px solid var(--sv-line)}
.st3.sv .sv-nav nav{display:flex;gap:26px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--sv-mut)}
.st3.sv .sv-out{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:var(--sv-ink);color:var(--sv-bg);font-size:14px;font-weight:600}
.st3.sv .sv-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;padding:40px 44px 34px}
.st3.sv .sv-copy .mh4{margin:14px 0 14px;font:400 64px/.98 "Instrument Serif",Georgia,serif;letter-spacing:-.015em;color:var(--sv-ink)}
.st3.sv .sv-copy p:last-child{max-width:400px;font-size:16px;line-height:1.55;color:var(--sv-mut)}
.st3.sv .sv-ctas{display:flex;gap:10px;margin-top:24px}
.st3.sv .sv-ctas span{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600}
.st3.sv .sv-ctas .b{background:var(--sv-sage);color:#fff;box-shadow:0 14px 24px -14px rgba(94,107,85,.9)}
.st3.sv .sv-ctas .b i{font-style:normal}
.st3.sv .sv-ctas .o{box-shadow:inset 0 0 0 1.5px var(--sv-line);color:var(--sv-ink)}
.st3.sv .sv-facts{display:flex;gap:18px;margin:22px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--sv-mut)}
.st3.sv .sv-facts li{display:flex;align-items:center;gap:8px}
.st3.sv .sv-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sv-sage)}
.st3.sv .sv-art{position:relative}
.st3.sv .sv-art-svg{display:block;width:100%;height:auto}
.st3.sv .sv-next{position:absolute;right:-6px;bottom:30px;display:grid;gap:3px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 22px 40px -22px rgba(31,35,29,.45),0 0 0 1px var(--sv-line)}
.st3.sv .sv-next b{font-size:15px;font-weight:600}
.st3.sv .sv-next em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--sv-terra)}
.st3.sv .sv-cls{padding:30px 44px 36px;border-top:1px solid var(--sv-line)}
.st3.sv .sv-cls .mh5,.st3.sv .sv-book .mh5{margin:8px 0 18px;font:400 38px/1.05 "Instrument Serif",Georgia,serif;color:var(--sv-ink)}
.st3.sv .sv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.st3.sv .sv-card{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 14px;padding:18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--sv-line)}
.st3.sv .sv-card i{grid-row:span 2;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#E9EDE1}
.st3.sv .sv-card i svg{width:28px;height:28px;fill:none;stroke:var(--sv-sage);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st3.sv .sv-card b{font-size:16px;font-weight:600}
.st3.sv .sv-card span{grid-column:2;font-size:13px;color:var(--sv-mut)}
.st3.sv .sv-card em{grid-column:3;grid-row:1/span 2;font:400 26px/1 "Instrument Serif",Georgia,serif;font-style:normal;color:var(--sv-ink)}
.st3.sv .sv-book{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start;padding:36px 44px;background:#EDEAE1}
.st3.sv .sv-book p:not(.mh5){font-size:15px;line-height:1.55;color:var(--sv-mut)}
.st3.sv .sv-pick{display:grid;gap:12px;padding:20px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--sv-line)}
.st3.sv .sv-days,.st3.sv .sv-hours{display:flex;flex-wrap:wrap;gap:8px}
.st3.sv .sv-days span,.st3.sv .sv-hours span{padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--sv-line);font-size:13.5px;font-weight:600}
.st3.sv .sv-days span.on,.st3.sv .sv-hours span.on{background:var(--sv-ink);color:var(--sv-bg);box-shadow:none}
.st3.sv .sv-hours span.off{opacity:.35;text-decoration:line-through}
.st3.sv .sv-confirm{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:14px 16px;border-radius:14px;background:var(--sv-sage);color:#fff}
.st3.sv .sv-confirm b{font-size:14.5px;font-weight:600}
.st3.sv .sv-confirm span{font-size:14px;font-weight:600}
.st3.sv .sv-where{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px;padding:36px 44px}
.st3.sv .sv-hrs{display:grid;gap:6px;align-content:center;padding:24px;border-radius:20px;background:var(--sv-ink);color:var(--sv-bg)}
.st3.sv .sv-hrs small{color:var(--sv-sage-l)}
.st3.sv .sv-hrs b{font:400 26px/1.15 "Instrument Serif",Georgia,serif}
.st3.sv .sv-hrs span{margin-top:6px;font-size:14px;color:rgba(245,242,236,.72)}
.st3.sv .sv-map{min-height:190px;border-radius:20px;overflow:hidden}
.st3.sv .sv-map svg{display:block;width:100%;height:100%}
.st3.sv .sv-foot{display:flex;align-items:center;justify-content:space-between;padding:26px 44px 40px;border-top:1px solid var(--sv-line);font-size:13.5px;color:var(--sv-mut)}
/* téléphone */
.st3.sv .pm{gap:14px;padding:0 18px 30px}
.st3.sv .pm-status i{box-shadow:inset 0 0 0 1.5px var(--sv-ink);background:linear-gradient(90deg,var(--sv-ink) 70%,transparent 70%) 2px 2px/18px 7px no-repeat}
.st3.sv .sv-pnav{display:flex;align-items:center;justify-content:space-between;height:44px}
.st3.sv .sv-pnav .sv-logo{font-size:26px}
.st3.sv .sv-burger{width:22px;height:14px;border-top:2px solid var(--sv-ink);border-bottom:2px solid var(--sv-ink);position:relative}
.st3.sv .sv-burger::after{content:"";position:absolute;left:0;right:0;top:4px;height:2px;background:var(--sv-ink)}
.st3.sv .sv-pcopy .mh4{margin:10px 0 0;font:400 44px/1 "Instrument Serif",Georgia,serif;color:var(--sv-ink)}
.st3.sv .sv-part svg{display:block;width:100%;height:auto}
.st3.sv .sv-pbtn{display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;font-size:15px;font-weight:600}
.st3.sv .sv-pbtn.b{background:var(--sv-sage);color:#fff}
.st3.sv .sv-pbtn.o{box-shadow:inset 0 0 0 1.5px var(--sv-line)}
.st3.sv .pm-hrs.sv-phrs{display:grid;gap:4px;padding:18px;border-radius:18px;background:var(--sv-ink);color:var(--sv-bg)}
.st3.sv .pm-hrs.sv-phrs small{color:var(--sv-sage-l)}
.st3.sv .pm-hrs.sv-phrs b{font:400 24px/1.15 "Instrument Serif",Georgia,serif}
.st3.sv .pm-hrs.sv-phrs span{font-size:13px;color:rgba(245,242,236,.72)}
.st3.sv .sv-pnext{display:grid;gap:3px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--sv-line)}
.st3.sv .sv-pnext b{font-size:15px;font-weight:600}
.st3.sv .sv-pnext em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--sv-terra)}
.st3.sv .sv-prow{display:grid;gap:10px}
.st3.sv .sv-prow .sv-card{padding:14px}
/* sorties d'écran : même rendu que dans la tablette */
.st3.sv .pop{border-radius:22px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(201,164,92,.35)}
.st3.sv .pop .sv-copy,.st3.sv .pop .sv-ctas{padding:18px 20px}
.st3.sv .pop .sv-ctas{margin:0}
/* scènes « anatomie d'un profil » et « la web se construit » : grand mot de fond et titres d'explications aux couleurs de la charte */
.scene .bigword span{font-family:var(--f-disp);font-style:normal;font-weight:300}

/* =================== v3 · site plus fluide et plus réactif (partout) =================== */
:root{--dur-quick:.18s;--dur-base:.32s;--dur-slow:.6s;--dur-xslow:.9s}
/* intro plus courte : la médaille frappe, le rideau se lève en ~1,7 s (au lieu de ~3 s) */
.intro .loader{animation-duration:.85s;animation-delay:1.3s}
.ld-medal{animation:stamp .55s cubic-bezier(.7,0,.3,1.35) .1s both,medalOut .55s var(--ease-io) 1.1s forwards}
.ld-medal .md-wave{animation-delay:.45s}
.ld-line i{animation-duration:1s}
/* apparitions au défilement : plus tôt, plus courtes, moins de déplacement */
.fx .rv,.fx [data-rv]{transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.fx .rv.in,.fx [data-rv].in{transform:none}
/* boutons, liens, cartes : réponse immédiate au survol et au clic */
.btn,.pill,.text-link,.hd-links a,.foot a{transition-duration:.18s}
.btn:active,.pill:active{transform:scale(.97)}
html{-webkit-tap-highlight-color:transparent}
a,button,[role="tab"],summary,label{touch-action:manipulation}
/* =================== Chargement v3 : logo du site en ligne, animation v3, bien visible (~2 s) =================== */
.ld-medal.ld-logo{width:auto;aspect-ratio:auto;display:flex;flex-direction:column;align-items:center;gap:8px;animation:stamp .6s cubic-bezier(.7,0,.3,1.35) .1s both,medalOut .55s var(--ease-io) 1.6s forwards}
.ld-logo .md-wave{left:50%;top:42%;width:240px;height:240px;margin:-120px 0 0 -120px;inset:auto}
.ld-logo .lg-crown{width:clamp(46px,5vw,62px);clip-path:inset(0 100% 0 0);animation:lgWipe .45s var(--ease-out) .5s forwards}
.ld-logo .lg-k{position:relative;width:clamp(86px,9vw,116px)}
.ld-logo .lg-k img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 30px rgba(201,164,92,.35))}
.ld-logo .lg-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(250,232,196,.95) 48%,transparent 66%);background-size:300% 100%;background-position:120% 0;-webkit-mask:url(/assets/k-256.webp?v=2c89c138af) center/contain no-repeat;mask:url(/assets/k-256.webp?v=2c89c138af) center/contain no-repeat;animation:lgShine .75s ease .8s forwards}
.ld-logo .lg-word{margin-top:14px;font:500 12px/1 var(--f-sans);letter-spacing:.7em;padding-left:.7em;text-transform:uppercase;color:#EEE8DC;opacity:0;white-space:nowrap;animation:lgWord .6s var(--ease-out) .6s forwards}
@keyframes lgWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes lgShine{to{background-position:-60% 0}}
@keyframes lgWord{to{opacity:1;letter-spacing:.34em;padding-left:.34em}}
.intro .loader{animation-duration:.85s;animation-delay:1.85s}
.ld-line i{animation-duration:1.5s}
.loader.skip .ld-medal.ld-logo{animation:medalOut .4s var(--ease-io) forwards}

.intro .ld-line{top:calc(50% + 120px);bottom:auto;width:140px}

/* =================== Chargement : celui du site en ligne (v1), un peu plus lent, toujours visible à l'arrivée =================== */
.intro .loader.kl{position:fixed;inset:0;z-index:300;display:block;background:none;pointer-events:none;clip-path:none;animation:klHide 0s linear 2.46s forwards}
.loader.kl .panel{position:absolute;left:0;right:0;height:50.5%;background:#0D0B08}
.loader.kl .panel.top{top:0;animation:klUp .76s var(--ease-io) 1.65s forwards}
.loader.kl .panel.bot{bottom:0;animation:klDown .76s var(--ease-io) 1.65s forwards}
.loader.kl .seam{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold-l) 50%,var(--gold) 80%,transparent);transform:scaleX(0);box-shadow:0 0 18px rgba(187,147,81,.6);animation:klSeam .43s var(--ease-out) 1.38s forwards,klFade .47s ease 1.98s forwards}
.loader.kl .ld-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;animation:klOut .34s ease 1.38s forwards}
.loader.kl .ld-lines i{position:absolute;left:-10%;width:120%;height:1px;background:linear-gradient(90deg,transparent,rgba(187,147,81,.14),transparent);animation:klDrift 1.9s linear forwards}
.loader.kl .ld-lines i:nth-child(1){top:30%}
.loader.kl .ld-lines i:nth-child(2){top:58%;animation-duration:2.3s}
.loader.kl .ld-lines i:nth-child(3){top:76%;animation-duration:1.7s}
.loader.kl .ld-mark{position:relative;width:120px;display:flex;flex-direction:column;align-items:center;gap:6px}
.loader.kl .ld-crown{width:52px;clip-path:inset(0 100% 0 0);animation:klWipe .57s var(--ease-out) .14s forwards}
.loader.kl .ld-k{position:relative;width:96px;opacity:0;transform:translateY(16px);animation:klRise .66s var(--ease-out) .34s forwards}
.loader.kl .ld-k img{display:block;width:100%;height:auto}
.loader.kl .ld-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(250,232,196,.95) 48%,transparent 66%);background-size:300% 100%;background-position:120% 0;-webkit-mask:url(/assets/k-256.webp?v=2c89c138af) center/contain no-repeat;mask:url(/assets/k-256.webp?v=2c89c138af) center/contain no-repeat;animation:klShine .76s ease .81s forwards}
.loader.kl .ld-word{font:500 12px/1 var(--f-sans);letter-spacing:.7em;text-transform:uppercase;color:#EEE8DC;opacity:0;padding-left:.7em;white-space:nowrap;animation:klWord .76s var(--ease-out) .57s forwards}
.loader.kl .ld-bar{width:140px;height:1px;background:rgba(187,147,81,.15);overflow:hidden}
.loader.kl .ld-bar span{display:block;height:100%;background:linear-gradient(90deg,#86683a,var(--gold),var(--gold-l));transform:scaleX(0);transform-origin:0 50%;animation:klBar 1.28s cubic-bezier(.33,0,.15,1) forwards}
.loader.kl.skip,.loader.kl.skip *{animation-delay:0s!important;animation-duration:.35s!important}
@keyframes klWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes klRise{to{opacity:1;transform:none}}
@keyframes klShine{to{background-position:-60% 0}}
@keyframes klWord{to{opacity:1;letter-spacing:.34em;padding-left:.34em}}
@keyframes klBar{to{transform:scaleX(1)}}
@keyframes klDrift{from{transform:translateY(20px)}to{transform:translateY(-40px)}}
@keyframes klOut{to{opacity:0;transform:scale(.97)}}
@keyframes klSeam{to{transform:scaleX(1)}}
@keyframes klFade{to{opacity:0}}
@keyframes klUp{to{transform:translateY(-100%)}}
@keyframes klDown{to{transform:translateY(100%)}}
@keyframes klHide{to{visibility:hidden}}

/* chargement · version affinée : mêmes étapes, courbes plus douces, tout en transform/opacity (fluide) */
.loader.kl .panel,.loader.kl .ld-stage,.loader.kl .ld-k,.loader.kl .ld-word,.loader.kl .seam{will-change:transform,opacity}
.loader.kl .panel.top{animation:klUp .9s cubic-bezier(.76,0,.24,1) 1.6s forwards}
.loader.kl .panel.bot{animation:klDown .9s cubic-bezier(.76,0,.24,1) 1.6s forwards}
.loader.kl .ld-mark::before{content:"";position:absolute;left:50%;top:58%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,164,92,.22),transparent);opacity:0;transform:scale(.6);animation:klGlow 1.4s cubic-bezier(.22,1,.36,1) .3s forwards;pointer-events:none}
.loader.kl .ld-crown{animation:klWipe .7s cubic-bezier(.22,1,.36,1) .12s forwards}
.loader.kl .ld-k{opacity:0;transform:translate3d(0,18px,0) scale(.96);filter:blur(6px);animation:klRise2 .85s cubic-bezier(.22,1,.36,1) .3s forwards}
.loader.kl .ld-shine{animation:klShine .9s cubic-bezier(.45,0,.2,1) .85s forwards}
.loader.kl .ld-word{animation:klWord .9s cubic-bezier(.22,1,.36,1) .55s forwards}
.loader.kl .ld-bar span{animation:klBar 1.3s cubic-bezier(.45,0,.15,1) .1s forwards}
.loader.kl .seam{animation:klSeam .45s cubic-bezier(.22,1,.36,1) 1.4s forwards,klFade .5s ease 2s forwards}
.loader.kl .ld-stage{animation:klOut2 .45s cubic-bezier(.4,0,.2,1) 1.42s forwards}
.intro .loader.kl{animation:klHide 0s linear 2.55s forwards}
@keyframes klRise2{to{opacity:1;transform:none;filter:none}}
@keyframes klGlow{50%{opacity:1}to{opacity:.7;transform:none}}
@keyframes klOut2{to{opacity:0;transform:scale(1.03);filter:blur(3px)}}
@keyframes klUp{to{transform:translate3d(0,-100%,0)}}
@keyframes klDown{to{transform:translate3d(0,100%,0)}}

/* pages de services : derniers petits textes à 14 px sur mobile */
@media (max-width:900px){
  .w-copy .eyebrow,.time span,.xc-price small,.price small,.offer .flag,.skill .k,.sk-body .k{font-size:14px!important}
}/* ordre propre : le logo s'efface, puis la couture dorée, puis les panneaux s'ouvrent */
.loader.kl .ld-stage{animation:klOut2 .4s cubic-bezier(.4,0,.2,1) 1.3s forwards}
.loader.kl .seam{animation:klSeam .4s cubic-bezier(.22,1,.36,1) 1.62s forwards,klFade .45s ease 2.2s forwards}
.loader.kl .panel.top{animation:klUp .9s cubic-bezier(.76,0,.24,1) 1.95s forwards}
.loader.kl .panel.bot{animation:klDown .9s cubic-bezier(.76,0,.24,1) 1.95s forwards}
.intro .loader.kl{animation:klHide 0s linear 2.9s forwards}/* fin de l'Anatomía : titre et dernière explication restent affichés (plus de vide en fin de scène) */
.anat.dom3 .anat-copy,.anat.dom3 .notes,.anat.dom3 .fict,.anat.dom3 .links{opacity:1}
/* démo en direct : « Ejemplo · negocio inventado » sur sa propre ligne, sous les boutons */
.dl-stage .dl-fict,.dl-tools .dl-fict{position:static!important;inset:auto!important;transform:none!important;flex:0 0 100%;order:9;margin:2px 0 0;text-align:center}
.dl-stage .dl-fict{display:block;width:100%;margin:14px 0 0}
/* pile de services : cartes préparées pour la carte graphique (défilement fluide) */
.svc-deck .svc-stage .skill{will-change:transform,opacity;backface-visibility:hidden}
.svc-deck .svc-stage .skill .ill{contain:paint}
/* v3 · notes du profil (Redes sociales) : titres en Barlow Condensed, comme le reste de la charte */
.scene .note h3,.scene .note.cur h3,.scene .note:not(.cur) h3{font-family:var(--f-disp);font-weight:500;letter-spacing:.01em;text-transform:none}
/* v3 · Ficha de Google : l'étiquette « négoce inventé » passe sous la maquette (comme les autres pages) */
.art-g .art-fict{position:absolute;left:0;right:0;top:100%;bottom:auto;margin:8px 0 0;text-align:center;z-index:1}
@media (max-width:900px){.pt-art.art-g{margin-bottom:34px}}
/* v3 · accueil mobile : la note 06 part avec la scène à la sortie de l'Anatomía */
@media (max-width:900px){.anat .notes,.anat.dom3 .notes,.anat .anat-intro{opacity:var(--nf,1)}}
/* v3 · curseur principal : étoile dorée sur fond sombre, petite couronne sur fond clair (ordinateur uniquement) */
html.kc-on,html.kc-on *{cursor:none!important}
html.kc-on input,html.kc-on textarea,html.kc-on [contenteditable]{cursor:text!important}
html.kc-on select{cursor:default!important}
.kc{--kc:#e3c27a;--kl:#9a7428;position:fixed;left:0;top:0;z-index:2147483000;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .2s var(--ease-out)}
.kc.on{opacity:1}
.kc.txt{opacity:0}
.kc svg{position:absolute;left:-9px;top:-9px;width:18px;height:18px;max-width:none;overflow:visible;transition:transform .4s cubic-bezier(.2,.9,.3,1.25),opacity .25s var(--ease-out),fill .25s}
.kc-star{rotate:var(--tilt,0deg);transition:transform .4s cubic-bezier(.2,.9,.3,1.25),opacity .25s var(--ease-out),rotate .18s var(--ease-out)!important;fill:var(--kc);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--kc) 60%,transparent)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.kc-crown{left:-6.5px!important;top:-6.5px!important;width:13px!important;height:13px!important;fill:var(--kl);opacity:0;transform:scale(.4) rotate(-20deg);filter:drop-shadow(0 1px 1.5px rgba(60,40,10,.35))}
.kc.lt .kc-star{opacity:0;transform:scale(.4) rotate(45deg)}
.kc.lt .kc-crown{opacity:1;transform:none}
.kc.hot .kc-star{transform:rotate(90deg) scale(1.35)}
.kc.hot.lt .kc-crown{transform:translateY(-1px) rotate(-10deg) scale(1.25)}
.kc.lt[style*="--kc"] .kc-crown{fill:var(--kc)}
.kc.down .kc-star{transform:rotate(135deg) scale(.8)}
.kc.down .kc-crown{transform:scale(.85)}
.kc-spark{position:fixed;z-index:2147483001;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;pointer-events:none;animation:kcSpark .55s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes kcSpark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@media (hover:none),(pointer:coarse){.kc,.kc-spark{display:none}}
.kc-dust{position:fixed;z-index:2147482999;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;pointer-events:none;box-shadow:0 0 4px currentColor;animation:kcDust .5s ease-out forwards}
@keyframes kcDust{from{transform:scale(var(--s));opacity:.85}to{transform:translateY(6px) scale(0);opacity:0}}
@media (hover:none),(pointer:coarse){.kc-dust{display:none}}
/* v3 · Grano Negro : les 3 visuels faits avec ChatGPT remplacent les maquettes dessinées */
.gn-img{display:block;width:100%;height:100%;object-fit:contain}
.pta .gr-post.gn-slot{height:172px}
.pta .gr-fly.gn-slot{box-shadow:none!important;background:none!important;border-radius:0}
.pta .gr-fly.gn-slot .gn-img{filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.pta .gr-menu.gn-slot .gn-img,.pta .gr-post.gn-slot .gn-img{border-radius:3px}
.gn-ba .gn-after .gn-img{width:min(100%,330px);height:auto;box-shadow:0 40px 70px -34px rgba(18,17,16,.55);transform:rotate(1.5deg);transition:transform .8s var(--spring)}
.gn-ba .gn-after:hover .gn-img{transform:rotate(0) scale(1.03)}
/* curseur sur une option : l'étoile respire et scintille doucement, la couronne se balance légèrement */
.kc.hot .kc-star{animation:kcBreath 1.6s ease-in-out infinite}
.kc.hot.lt .kc-crown{animation:kcSway 1.8s ease-in-out infinite}
@keyframes kcBreath{0%,100%{scale:1;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--kc) 60%,transparent)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}50%{scale:1.12;filter:drop-shadow(0 0 9px var(--kc)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}}
@keyframes kcSway{0%,100%{rotate:-7deg;translate:0 0}50%{rotate:7deg;translate:0 -1.5px}}
/* v3 · services sans paquet (téléphone) : la carte choisie entre en douceur ; au doigt, elle glisse du bon côté */
#servicios:not(.svc-deck) .svc-stage .skill.is-on{animation:svcIn .45s cubic-bezier(.2,.8,.3,1) both}
#servicios:not(.svc-deck) .svc-stage[data-dir="next"] .skill.is-on{animation-name:svcNext}
#servicios:not(.svc-deck) .svc-stage[data-dir="prev"] .skill.is-on{animation-name:svcPrev}
@keyframes svcIn{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes svcNext{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
@keyframes svcPrev{from{opacity:0;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
#servicios:not(.svc-deck) .svc-stage{touch-action:pan-y}
/* étapes du processus : la ligne dorée et les pastilles suivent le défilement en douceur */
.proc-line i{transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.proc li .dot{transition:background-color .5s var(--ease-out),color .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.calm #servicios .svc-stage .skill.is-on{animation-duration:.3s}
/* v3 · exemple Diseño web : scène plus longue pour qu'elle avance moins vite au défilement */
.fx .scene.webs{height:640vh}
/* étapes : la ligne est déjà amortie en JS (synchronisée avec les pastilles), pas de transition CSS en plus */
.proc-line i{transition:none!important}
.proc li .dot{transition:background-color .3s var(--ease-out),color .3s var(--ease-out),border-color .3s var(--ease-out),transform .35s var(--ease-out)!important}
/* v3 · téléphone : le paquet de cartes des services existe aussi, en version compacte */
@media (max-width:900px){
  #servicios.svc-deck .skill .ill,#servicios.svc-deck .skill .sk-num{display:none}
  #servicios.svc-deck .svc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:12px;padding-bottom:2px}
  #servicios.svc-deck .svc-tabs::-webkit-scrollbar{display:none}
  #servicios.svc-deck .svc-tabs button{flex:none}
}
@media (max-width:900px){
  #servicios.svc-deck .skill ul li{padding-block:7px}
  #servicios.svc-deck .skill .sk-body{gap:14px}
  #servicios.svc-deck .skill .sk-links{display:flex;flex-wrap:nowrap;gap:8px}
  #servicios.svc-deck .skill .sk-links .pill{flex:1 1 0;min-width:0;justify-content:center;padding:10px 12px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* v3 · Anatomía : même rythme que le profil Instagram de Redes sociales (scène plus courte) */
@media (min-width:901px){.anat{height:340vh}}
/* v3 · Anatomía : un peu plus de place par étape (la vitesse est aussi plafonnée en JS) */
@media (min-width:901px){.anat{height:420vh}}
@media (max-width:900px){.anat{height:250vh}}
/* v3 · bouton « réduire les animations » : même gabarit que le sélecteur de langue */
.kz-rm{display:inline-grid;place-items:center;width:34px;height:34px;margin-left:6px;padding:0;border:0;border-radius:999px;background:none;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background-color var(--dur-quick) var(--ease-out),color var(--dur-quick) var(--ease-out)}
.kz-rm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.kz-rm .kz-f{display:none}
.kz-rm:hover{color:var(--ink)}
.kz-rm[aria-pressed="true"]{background:var(--ink);color:#fff}
html.tone-dark .hd .kz-rm[aria-pressed="true"]{background:var(--gold);color:#121110}
.kz-rm[aria-pressed="true"] .kz-w{display:none}
.kz-rm[aria-pressed="true"] .kz-f{display:inline}
.kz-rm:focus-visible,.kz-sw:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
body.menu-open .hd .kz-rm{visibility:hidden}
@media (max-width:900px){.kz-rm{display:none}}
/* téléphone : une ligne avec interrupteur dans le menu */
.kz-rm-row{grid-column:1/-1}
.kz-sw{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.kz-sw i{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:rgba(127,120,108,.35);transition:background-color .25s var(--ease-out)}
.kz-sw i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--ease-out)}
.kz-sw[aria-checked="true"] i{background:var(--gold)}
.kz-sw[aria-checked="true"] i::after{transform:translateX(18px)}
/* animations réduites : le curseur ne respire plus */
.calm .kc.hot .kc-star,.calm .kc.hot.lt .kc-crown{animation:none}
/* v3 · animations réduites : Anatomía fixe (web terminée), les 6 annotations en liste lisible */
.calm .anat{height:auto!important}
.calm .anat-pin{position:relative;top:auto;height:auto;overflow:visible}
.calm .anat-card{height:calc(100svh - var(--hd) - 40px);min-height:560px;max-height:900px}
.calm .anat .links,.calm .anat .anat-intro{display:none!important}
.calm .anat .notes{position:static!important;inset:auto!important;height:auto!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none;opacity:1!important;visibility:visible!important}
.calm .anat .note{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;transform:none!important;opacity:1!important;filter:none!important;visibility:visible!important;display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:#0D0B08;color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(238,232,220,.1)}
.calm .anat .note .ix{flex:none;color:var(--gold)}
.calm .anat .note p{margin:0;color:inherit}
.calm .anat .note .nt{font:500 18px/1.2 var(--f-disp);margin-bottom:4px}
@media (max-width:900px){.calm .anat .notes{grid-template-columns:1fr;gap:8px}.calm .anat-card{height:calc(100svh - var(--hd) - 24px);min-height:520px}}
/* v3 · animations réduites : profil Instagram et exemple web fixes (une hauteur d'écran, état final) */
.fx.calm .scene.story,.fx.calm .scene.webs{height:100vh;height:100svh}
@media (max-width:900px){
  .fx.calm .scene.story{height:auto}
  .fx.calm .scene.story .pin{position:relative;height:100vh;height:100svh}
  .calm .scene.story>.notes{position:static!important;display:grid;gap:8px;margin:0;padding:12px 16px 28px;opacity:1!important}
  .calm .scene.story>.notes .note{position:static!important;left:auto!important;top:auto!important;width:auto!important;opacity:1!important;visibility:visible!important;transform:none!important}
  .calm .scene.story>.notes .note .tx{transform:none!important}
  .calm .scene.story>.notes .note .dot,.calm .scene.story>.notes .note .lnk{display:none}
}
/* animations réduites : toutes les annotations sont lisibles en entier (pas seulement la courante) */
.calm .anat .note p,.calm .scene>.notes .note p,.fx.calm .scene .note p{display:block!important}
.calm .anat .note-dev .devs{display:flex!important}
.calm .anat .note::after{display:none}
.calm .anat .note .ix,.calm .anat .note.cur .ix{width:26px;height:26px;background:none!important;color:var(--gold)!important;box-shadow:inset 0 0 0 1px rgba(201,164,92,.45)!important;animation:none!important;font-weight:500}
.calm .anat .note.cur{box-shadow:inset 0 0 0 1px rgba(238,232,220,.1)!important}
/* v3 · Anatomía par étapes : 7 étapes (avant + 01–06), ≈65vh de défilement chacune, transitions courtes */
.anat{height:calc(100vh + 455vh)}
.anat.stepped #amNew{transition:opacity .3s ease}
.anat.stepped #amScroll{transition:opacity .16s ease}
.anat.stepped #chipSpeed,.anat.stepped #gRes,.anat.stepped #iph{transition:opacity .3s ease,transform .3s ease}
.anat.stepped .tab-glare,.anat.stepped .am-wipe,.anat.stepped .tab-dim,.anat.stepped .pops{display:none!important}
.anat.stepped .note{transition:opacity .3s ease,transform .3s ease!important;filter:none!important;animation:none!important}
.anat.stepped .note *{animation:none!important}
.anat.stepped .links path{transition:none!important}
.anat.stepped .tab,.anat.stepped .iph{will-change:auto}
.anat-step{display:inline-block;margin-left:10px;font-size:12px;letter-spacing:.08em;color:var(--gold);vertical-align:middle}
.anat .ticks i{transition:background-color .3s ease,opacity .3s ease}

/* =====================================================================
   Mode calme complet (classe .calm, posée par le réglage du système ou par le bouton)
   1) rien ne boucle ni ne démarre seul : chaque animation saute à son état final ;
   2) transitions limitées à un court fondu de couleur ou d'opacité (clic, survol), sans mouvement ;
   3) aucun contenu ne reste caché en attendant une apparition : état final dès le chargement.
   ===================================================================== */
.calm *,.calm *::before,.calm *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;animation-fill-mode:both!important;scroll-behavior:auto!important;transition-property:color,background-color,border-color,opacity,fill,stroke,outline-color!important;transition-duration:.15s!important;transition-delay:0s!important}
html.calm{scroll-behavior:auto!important}
/* apparitions au défilement : directement visibles */
.calm [data-rv],.calm .rv,.calm .fx [data-rv]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
.calm .words .w{opacity:1!important}
/* Anatomía : bouton « Ver el antes » et mention « negocio inventado » visibles ; une seule étiquette Antes/Después */
.calm .anat .rm-toggle{opacity:1!important;pointer-events:auto}
.calm .anat .fict{opacity:1!important}
.calm .anat.is-after :is(.st-chip,.state-word) .a,.calm .anat:not(.is-after) :is(.st-chip,.state-word) .b{display:none!important}
.calm .anat :is(.st-chip,.state-word) span{position:static!important;transform:none!important;opacity:1!important}
.calm .anat #chipSpeed,.calm .anat #gRes,.calm .anat #iph{opacity:1!important}
/* éléments qui ne sont qu'un état fermé ou décoratif : retirés au lieu de rester à opacity 0 */
.calm :is(.hb-cur,.hb-rip,.hb-wipe,.am-wipe,.tab-dim,.tab-glare,.svc-dim,.ab-drop,.hx-timer,.anat-intro){display:none!important}
.calm .hb:not(.s-mobile) :is(.hb-mob,.hb-island){display:none!important}
.calm .u044-it:not(.open) .u044-a{visibility:hidden}
.calm .u011:not(.is-open) :is(.u011-it,.u011-halo){visibility:hidden}
.calm .u011-note:not(.is-on){visibility:hidden}
.calm .u011.is-away{visibility:hidden}
.calm .copy-btn:not(.is-copied) .ok{visibility:hidden}
/* curseur : uniquement la petite couronne, fixe (ni étoile, ni rotation, ni traînée, ni étincelles) */
.calm .kc .kc-star{display:none!important}
.calm .kc .kc-crown{opacity:1!important;transform:none!important;rotate:none!important;translate:none!important;fill:#c9a45c}
.calm .kc.lt .kc-crown{fill:#9a7428}
.calm :is(.kc-dust,.kc-spark){display:none!important}
.calm .hx-tabs button i{display:none!important}
/* Anatomía par étapes, téléphone : « Ver el antes » à droite du repère d'étape (et non sous la barre du haut) */
@media (max-width:900px){.anat.stepped .anat-copy .rm-toggle,.anat.stepped.is-mobile .anat-copy .rm-toggle{position:absolute;left:auto;right:0;top:auto;bottom:0;height:36px;padding:0 14px;font-size:14px}}
/* mode calme : derniers états fermés ou intermédiaires retirés au lieu de rester à opacity 0 */
.calm .u011:not(.is-open) .u011-fab .x,.calm .u011.is-open .u011-fab .m{visibility:hidden}
.calm .bview :is(#mShade,#mDetail,#mCursor,#mRipple){display:none!important}
.calm .scene .layer :is(.bf,.rim){display:none!important}
.calm .scene.is-after .state-word .a,.calm .scene .is-after .state-word .a,.calm .scene.is-after .st-chip .a,.calm .scene .is-after .st-chip .a{display:none!important}
/* Anatomía par étapes : « Ver el antes » toujours à droite du repère d'étape, quelle que soit la largeur */
.anat.stepped .anat-copy .rm-toggle,.anat.stepped.is-mobile .anat-copy .rm-toggle{position:absolute;left:auto;right:0;top:auto;bottom:-6px;height:36px;padding:0 14px;font-size:14px}
/* barre du haut : changement de ton instantané (fond + texte ensemble) */
.hd.hd-snap,.hd.hd-snap *,.hd.hd-snap *::before,.hd.hd-snap *::after{transition:none!important}
/* barre claire : langues non actives un peu plus foncées (contraste ≥ 4,5:1 sur la pastille translucide) */
html:not(.tone-dark) .hd:not(.on-dark) .langs a:not([aria-current="true"]){color:#4a463f}
/* pastilles flottantes du hero Redes (Mensaje, Dónde…) : texte foncé sur fond blanc, dans les deux modes */
.ai-chip{color:#1d1a17}
.ai-chip.pri{color:#fff}
/* mode calme, téléphone/tablette : annotations du profil en liste, en cartes sombres lisibles (comme l'Anatomía) */
@media (max-width:900px){
  .calm .scene.story>.notes .note{display:flex!important;gap:12px;align-items:flex-start;padding:14px 16px!important;border-radius:16px;background:#0D0B08!important;box-shadow:inset 0 0 0 1px rgba(238,232,220,.1)!important;color:var(--ivory)}
  .calm .scene.story>.notes .note .tx{display:grid;gap:4px;padding:0!important;background:none!important;box-shadow:none!important}
  .calm .scene.story>.notes .note h3,.calm .scene.story>.notes .note.cur h3,.calm .scene.story>.notes .note:not(.cur) h3{color:#fff!important;font-size:18px!important}
  .calm .scene.story>.notes .note p{color:#CFC6B6!important}
  .calm .scene.story>.notes .note .ix{color:var(--gold)!important}
  .calm .scene.story>.notes{max-width:640px;margin-inline:auto}
}
/* maquette Ámbar : bouton « réservé » un peu plus foncé (texte crème lisible, ≥ 4,5:1) */
.hb.booked .ab-buy{background:#9A5214}
/* mode calme : chaque moitié a son propre fond opaque (pas de fondu de fond lié au défilement) */
.calm .dark-half{background-color:#0D0B08!important}
.calm .light-half{background-color:#F3F2EE!important}
.calm .light-half .final{background-color:rgb(208,174,104)!important}
/* petits textes gris sur fond clair (mention « inventado », « sin IVA ») : contraste ≥ 4,5:1 dans les deux modes */
.light-half .fict,.light-half .fine,.light-half p.fict{color:#6b6458}
.calm .hd-links:not(.has-pill) .hd-pillbg{visibility:hidden}

/* =====================================================================
   Accueil v3 · nouveau haut de page : hero sobre + visuel fixe, slogan, bande de prix
   ===================================================================== */
.hero2{padding:calc(var(--hd) + 6vh) 0 5vh}
.h2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:center}
.h2-copy{display:flex;flex-direction:column;gap:18px}
.h2-eb{margin:0;color:var(--gold);letter-spacing:.32em}
.hero2 .h2-h1{margin:0;font:500 clamp(44px,5.6vw,84px)/.98 var(--f-disp);letter-spacing:-.01em;color:#F3EBDD;text-wrap:balance}
.hero2 .hero-lead{margin:0;max-width:34em;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:#C9BFAE}
.h2-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.h2-write{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;color:#F3EBDD;box-shadow:inset 0 0 0 1px rgba(201,164,92,.55);font-weight:500;text-decoration:none}
.h2-write svg{width:19px;height:19px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h2-write:hover{background:rgba(201,164,92,.1)}
.h2-note{margin:0;font-size:14px;color:#A79E8F}
.h2-vis{margin:0;position:relative}
.h2-shot{display:block;border-radius:18px;outline-offset:6px}
.h2-shot img{display:block;width:100%;height:auto}
.h2-vis figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:0 4px;font-size:14px}
.h2-tag{color:#A79E8F}
.h2-see{color:var(--gold);text-decoration:none;font-weight:500}
.h2-see:hover{text-decoration:underline}
.h2-sl-mob{display:none}
/* slogan */
.h2-slogan{padding:3vh 0 4vh}
.h2-slogan .wrap{border-top:1px solid rgba(238,232,220,.12);border-bottom:1px solid rgba(238,232,220,.12);padding-block:clamp(22px,3.4vw,44px)}
.h2-sl{margin:0;text-align:center;font:300 italic clamp(30px,4.2vw,64px)/1.08 var(--f-disp);letter-spacing:-.005em;color:#F3EBDD}
.h2-sl em{color:var(--gold);font-style:italic}
/* bande de prix */
.h2-prices{padding:2vh 0 9vh}
.h2-ph{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:18px}
.h2-ph h2{margin:0;font:500 clamp(28px,3vw,42px)/1.05 var(--f-disp);color:#F3EBDD}
.h2-ph h2 em{color:var(--gold);font-weight:300}
.h2-ph p{margin:0;font-size:14px;color:#A79E8F}
.h2-ph a{color:var(--gold);text-decoration:none;font-weight:500}
.h2-ph a:hover{text-decoration:underline}
.h2-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.h2-card{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(201,164,92,.45);color:#F3EBDD;text-decoration:none;transition:background-color var(--dur-base) var(--ease-out)}
.h2-card:hover{background:rgba(201,164,92,.08)}
.h2-k{font-size:15px;color:#D8CEBE}
.h2-p{font:400 clamp(34px,3vw,46px)/1 var(--f-disp);color:#F3EBDD}
.h2-p small{font:400 18px/1 var(--f-sans);color:#A79E8F;margin-right:4px}
@media (max-width:900px){
  .hero2{padding:calc(var(--hd) + 26px) 0 4vh}
  .h2-grid{grid-template-columns:1fr;gap:26px}
  .hero2 .h2-h1{font-size:clamp(42px,12vw,60px)}
  .h2-sl-mob{display:block;font:300 italic clamp(30px,8.4vw,40px)/1.1 var(--f-disp);color:#F3EBDD;margin:2px 0 0}
  .h2-sl-mob span{display:block}
  .h2-sl-mob em{display:block;color:var(--gold)}
  .h2-slogan{display:none}
  .h2-ctas{flex-direction:column;align-items:stretch}
  .h2-ctas .u002,.h2-write{width:100%;justify-content:center}
  .h2-band{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .h2-card{padding:16px 16px}
  .h2-p{font-size:34px}
  .h2-prices{padding:1vh 0 7vh}
}
.hero2 .h2-eb{display:block;padding:0;font:600 13px/1.2 var(--f-sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.hero2 .h2-eb::before,.hero2 .h2-eb::after{display:none!important}
.hero2 .h2-sl-mob{text-align:left}
@media (max-width:900px){
  .h2-ctas .u002,.h2-ctas .u002 .u002-mag,.h2-ctas .u002 .u002-btn{display:flex;width:100%}
  .h2-ctas .u002 .u002-btn{justify-content:space-between}
  .hero2 .h2-eb{font-size:12px;letter-spacing:.26em}
}
@media (max-width:900px) and (min-width:600px){.hero2{padding-top:calc(var(--hd) + 48px)}.h2-ctas{max-width:520px}}
/* hero : photo d'exemple en pleine largeur à droite, fondue vers le texte (comme la maquette) */
.hero2{position:relative;overflow:hidden}
.h2-photo{position:relative;align-self:stretch;margin:calc(-1 * (6vh + 8px)) calc(50% - 50vw) calc(-5vh) 0;min-height:100%}
.h2-photo img{display:block;width:100%;height:100%;min-height:520px;object-fit:cover;object-position:40% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.h2-photo figcaption{position:absolute;right:clamp(16px,3vw,40px);bottom:18px;margin:0;padding:8px 14px;gap:14px;border-radius:999px;background:rgba(13,11,8,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.h2-photo .h2-tag{color:#E9E1D3}
@media (max-width:900px){
  .h2-photo{margin:6px calc(50% - 50vw) 0;min-height:0}
  .h2-photo img{min-height:0;height:auto;aspect-ratio:3/2;-webkit-mask-image:none;mask-image:none}
  .h2-photo figcaption{right:12px;bottom:12px;left:12px;justify-content:space-between}
}
@media (min-width:901px){
  .hero2{min-height:min(760px,92vh);display:flex;align-items:center}
  .hero2 .h2-grid{width:100%}
  .hero2 .h2-photo{position:absolute;top:0;right:0;bottom:0;width:56vw;margin:0}
  .hero2 .h2-photo img{height:100%;min-height:0}
  .hero2 .h2-photo figcaption{right:40px;bottom:28px}
}
@media (min-width:901px){
  .hero2 .wrap.h2-grid{position:static;grid-template-columns:minmax(0,1fr)}
  .hero2 .h2-copy{position:relative;z-index:1;max-width:min(620px,46vw)}
}
@media (min-width:901px){
  .hero2 .h2-copy{max-width:min(600px,42vw)}
  .hero2 .h2-photo{width:50vw}
  .hero2 .h2-photo img{object-position:30% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 9%,#000 20%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 9%,#000 20%)}
}
@media (min-width:901px) and (max-width:1100px){.hero2 .h2-photo{width:52vw}.hero2 .h2-h1{font-size:clamp(40px,5vw,60px)}}
/* hero : photo entière (aucun recadrage), alignée à droite, fondue dans le fond du site par masques
   (gauche + haut + bas, combinés) : c'est le vrai fond de la page qui apparaît, donc exactement la même couleur */
@media (min-width:901px){
  .hero2 .h2-photo{position:absolute;top:50%;right:0;bottom:auto;left:auto;width:min(58vw,1120px);height:auto;margin:0;transform:translateY(-44%);pointer-events:none}
  .hero2 .h2-photo figcaption,.hero2 .h2-photo a{pointer-events:auto}
  .hero2 .h2-photo img{width:100%;height:auto;min-height:0;object-fit:fill;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 2.5%,rgba(0,0,0,.38) 5%,rgba(0,0,0,.7) 7.5%,rgba(0,0,0,.92) 9.5%,#000 11%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 3%,rgba(0,0,0,.8) 6%,#000 8.5%,#000 86%,rgba(0,0,0,.75) 90%,rgba(0,0,0,.35) 95%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 2.5%,rgba(0,0,0,.38) 5%,rgba(0,0,0,.7) 7.5%,rgba(0,0,0,.92) 9.5%,#000 11%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 3%,rgba(0,0,0,.8) 6%,#000 8.5%,#000 86%,rgba(0,0,0,.75) 90%,rgba(0,0,0,.35) 95%,transparent 100%);
    mask-composite:intersect}
  .hero2 .h2-photo figcaption{right:40px;bottom:9%}
}
@media (min-width:901px){
  .hero2 .h2-photo{min-height:0;transform:translateY(-40%)}
  .hero2 .h2-photo figcaption{bottom:15%;right:48px}
}
/* téléphone : même photo entière, fondue en haut et en bas dans le fond du site (pas de coupure horizontale) */
@media (max-width:900px){
  .hero2 .h2-photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 4%,rgba(0,0,0,.85) 8%,#000 12%,#000 84%,rgba(0,0,0,.8) 89%,rgba(0,0,0,.35) 95%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 4%,rgba(0,0,0,.85) 8%,#000 12%,#000 84%,rgba(0,0,0,.8) 89%,rgba(0,0,0,.35) 95%,transparent 100%)}
  .hero2 .h2-photo figcaption{bottom:14%}
}
@media (max-width:900px){.hero2 .h2-photo figcaption{position:static;margin:4px 16px 0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* bande de prix du haut (fond sombre) : mêmes cases que la section Precios ; la case mise en avant passe en version sombre, contour doré */
.h2-psum .psum-card.is-pick{background:linear-gradient(180deg,#221b11,#16120c);box-shadow:inset 0 0 0 1.5px var(--gold),0 30px 60px -36px rgba(201,164,92,.55)}
.h2-psum .psum-card.is-pick .psum-p,.h2-psum .psum-card.is-pick .psum-d{color:#F3EBDD}
.h2-psum .psum-card.is-pick .psum-p small{color:#A79E8F}
.h2-psum .psum-card.is-pick .psum-k{color:var(--gold)}
.h2-psum .psum-card.is-pick:hover,.h2-psum .psum-card.is-pick:focus-visible{background:#221b11}

/* bande du haut, ordinateur : le badge de l'audit gratuit est posé sur le bord de la case, les 4 cases restent alignées */
@media (min-width:901px){
  .h2-psum{overflow:visible}
  .h2-psum .psum-card:first-child{border-radius:22px 0 0 22px}.h2-psum .psum-card:last-child{border-radius:0 22px 22px 0}
  .h2-psum .psum-card.is-pick .psum-flag{position:absolute;top:-13px;left:22px;margin:0}
}
/* hero, ordinateur : photo réduite de 5 % (plus d'air entre le titre et le téléphone) ; fondu du haut plus long et progressif
   (courbe douce de 0 à 12,5 %), gauche et bas inchangés */
@media (min-width:901px){
  .hero2 .h2-photo{width:min(55.1vw,1064px)}
  .hero2 .h2-photo img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 2.5%,rgba(0,0,0,.38) 5%,rgba(0,0,0,.7) 7.5%,rgba(0,0,0,.92) 9.5%,#000 11%),linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1.04%,rgba(0,0,0,0.074) 2.08%,rgba(0,0,0,0.156) 3.13%,rgba(0,0,0,0.259) 4.17%,rgba(0,0,0,0.376) 5.21%,rgba(0,0,0,0.5) 6.25%,rgba(0,0,0,0.624) 7.29%,rgba(0,0,0,0.741) 8.33%,rgba(0,0,0,0.844) 9.38%,rgba(0,0,0,0.926) 10.42%,rgba(0,0,0,0.98) 11.46%,rgba(0,0,0,1) 12.5%,#000 86%,rgba(0,0,0,.75) 90%,rgba(0,0,0,.35) 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 2.5%,rgba(0,0,0,.38) 5%,rgba(0,0,0,.7) 7.5%,rgba(0,0,0,.92) 9.5%,#000 11%),linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1.04%,rgba(0,0,0,0.074) 2.08%,rgba(0,0,0,0.156) 3.13%,rgba(0,0,0,0.259) 4.17%,rgba(0,0,0,0.376) 5.21%,rgba(0,0,0,0.5) 6.25%,rgba(0,0,0,0.624) 7.29%,rgba(0,0,0,0.741) 8.33%,rgba(0,0,0,0.844) 9.38%,rgba(0,0,0,0.926) 10.42%,rgba(0,0,0,0.98) 11.46%,rgba(0,0,0,1) 12.5%,#000 86%,rgba(0,0,0,.75) 90%,rgba(0,0,0,.35) 95%,transparent 100%)}
}
@media (max-width:900px){.hero2 .h2-photo img{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1.04%,rgba(0,0,0,0.074) 2.08%,rgba(0,0,0,0.156) 3.13%,rgba(0,0,0,0.259) 4.17%,rgba(0,0,0,0.376) 5.21%,rgba(0,0,0,0.5) 6.25%,rgba(0,0,0,0.624) 7.29%,rgba(0,0,0,0.741) 8.33%,rgba(0,0,0,0.844) 9.38%,rgba(0,0,0,0.926) 10.42%,rgba(0,0,0,0.98) 11.46%,rgba(0,0,0,1) 12.5%,#000 84%,rgba(0,0,0,.8) 89%,rgba(0,0,0,.35) 95%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.02) 1.04%,rgba(0,0,0,0.074) 2.08%,rgba(0,0,0,0.156) 3.13%,rgba(0,0,0,0.259) 4.17%,rgba(0,0,0,0.376) 5.21%,rgba(0,0,0,0.5) 6.25%,rgba(0,0,0,0.624) 7.29%,rgba(0,0,0,0.741) 8.33%,rgba(0,0,0,0.844) 9.38%,rgba(0,0,0,0.926) 10.42%,rgba(0,0,0,0.98) 11.46%,rgba(0,0,0,1) 12.5%,#000 84%,rgba(0,0,0,.8) 89%,rgba(0,0,0,.35) 95%,transparent 100%)}}
.dl-stage{scroll-margin-top:150px}@media (max-width:900px){.dl-stage{scroll-margin-top:100px}}
.anat-after{display:none}
/* Accueil : carte « Ejemplo completo · Lonja » dans l'Anatomía, toujours visible, mène à la tablette de la démo (page Diseño web) */
.anat-more{position:absolute;right:clamp(20px,3vw,48px);bottom:16px;z-index:5;display:flex;align-items:center;gap:12px;padding:7px 14px 7px 7px;border-radius:14px;background:rgba(243,235,221,.05);box-shadow:inset 0 0 0 1px rgba(217,178,106,.38);color:#F3EBDD;text-decoration:none;transition:background-color .2s,box-shadow .2s}
.anat-more img{width:64px;height:40px;object-fit:cover;border-radius:8px;flex:none}
.anat-more .am-t{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.anat-more .am-k{color:#D9B26A;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.anat-more .am-l{font:500 14px/1.25 var(--f-sans);letter-spacing:0}
.anat-more svg{width:16px;height:16px;flex:none;fill:none;stroke:#D9B26A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.anat-more:hover,.anat-more:focus-visible{background:rgba(217,178,106,.12);box-shadow:inset 0 0 0 1px #D9B26A}
.anat-more:hover svg{transform:translate(2px,-2px)}
.anat-more:focus-visible{outline:2px solid #D9B26A;outline-offset:3px}
html:not(.js) .anat-more,.anat.no3d .anat-more{position:relative;right:auto;bottom:auto;margin:0 30px 30px;width:max-content}
@media (max-width:900px){
  .anat .anat-more{display:none}
  .anat-after{display:block;position:relative;z-index:2;padding:8px 16px 28px}
  .anat-more.anat-more-m{position:relative;left:auto;right:auto;bottom:auto;padding:6px 12px 6px 6px}
  .anat-more img{width:56px;height:35px}
  .anat-more .am-l{flex:1}
  .anat-more .am-t{flex:1}
}
/* hero, ordinateur : fine ligne au-dessus de la photo, comme celle qui la suit (bande du slogan) */
@media (min-width:901px){
  .hero2::after{content:"";position:absolute;z-index:0;pointer-events:none;top:max(calc(var(--hd) + 18px),calc(50% - .2667 * min(55.1vw,1064px) - 34px));left:max(0px,calc((100% - 1360px) / 2));right:max(0px,calc((100% - 1360px) / 2));border-top:1px solid rgba(238,232,220,.12)}
}
.anat-more .am-k{font-size:12px}
@media (max-width:900px){.anat-more .am-k{font-size:14px;letter-spacing:.08em}}

/* Diseño web : « Hecha a mano, en código » (points = why-grid, construire = pastilles, preuve = lien démo) */
.handmade .hm-grid{margin-top:8px}
.hm-build,.mo-inc{margin-top:40px}
.hm-bt{font:500 18px/1.3 var(--f-sans);margin:0 0 14px}
.hm-tags{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.hm-tags li{padding:9px 16px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line2);font-size:15px;line-height:1.3}
.hm-proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:32px;font-size:16px;color:var(--mut)}
.hm-proof a{color:var(--gold-t);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.hm-proof a:hover{color:var(--ink)}
/* Redes : « Vídeos y motion design » (mêmes cartes que les services à l'unité) */
.mo-cards{margin-top:8px}
.mo-cards .xc-name{margin:0}
.mo-cards .xc-btn{margin-top:auto;align-self:flex-start}
.motion .fine{margin-top:24px}
@media (min-width:1100px){.mo-cards{grid-template-columns:repeat(4,1fr)}}
/* tarifs : sous-titre du bloc motion design */
.extras-motion .mo-sub{margin:-8px 0 18px;color:var(--mut);font-size:16px}
.h2-prices{scroll-margin-top:calc(var(--hd) + 8px)}
/* « Por qué » (téléphone) : le carrousel s'aligne exactement sur la gouttière du site (il dépassait de 4 px à 360 px) */
@media (max-width:900px){#por-que .why-grid{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding-left:var(--gut);padding-right:var(--gut);scroll-padding:0 var(--gut)}}
/* Diseño web : « Webs que trabajan solas » (5 cartes courtes, sans prix) */
.ws-cards{margin-top:8px}
.ws-cards .xc-name{margin:0}
.ws-cards .xc-desc{margin:0}
.ws-i{width:26px;height:26px;color:var(--gold-t)}
@media (min-width:1100px){.ws-cards{grid-template-columns:repeat(5,1fr)}}
.ws-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line2)}
.ws-end p{margin:0;font-size:17px;max-width:60ch}
/* accueil, carte Organización : la ligne vers « Webs que trabajan solas » */
.sk-body .li-link{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.sk-body .li-link:hover{color:var(--gold-t)}
/* plancher de lisibilité : aucun texte hors maquette sous 12 px */
.svc-tabs button span{font-size:12px}
.psum-flag,.h2-psum .psum-card.is-pick .psum-flag{font-size:12px}
.why-grid .ix{font-size:12px}
.hm-ai{margin-top:18px;max-width:72ch;font-size:13.5px;line-height:1.6;color:var(--mut)}
/* haut des pages de service (téléphone) : le sur-titre peut passer à la ligne (il élargissait la colonne à 360 px) */
@media (max-width:600px){.page-top .sec-head .eyebrow{white-space:normal}.pt-copy{min-width:0}}
/* pages de service (téléphone) : mêmes boutons que l'accueil, pleine largeur, l'un sous l'autre */
@media (max-width:600px){
  .page-top .hero-ctas{flex-direction:column;align-items:stretch}
  .page-top .hero-ctas .u002,.page-top .hero-ctas .u002 .u002-mag,.page-top .hero-ctas .u002 .u002-btn{display:flex;width:100%}
  .page-top .hero-ctas .u002 .u002-btn{justify-content:space-between}
  .page-top .hero-ctas .btn{width:100%}
}

/* Diseño web : ligne WordPress/Shopify (section A) */
.hm-wp{margin-top:22px;max-width:72ch;font-size:16px;color:var(--ink)}
/* Diseño web : « Nuestras herramientas » (grille fixe, sans animation propre ; 1 colonne sur téléphone) */
.tl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:8px}
@media (max-width:1200px){.tl-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.tl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.tl-grid{grid-template-columns:1fr}}
.tl-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.tl-n{color:var(--gold-t);font-size:12px;letter-spacing:.08em}
.tl-card h3{margin:0;font:500 18px/1.25 var(--f-sans)}
.tl-card p{margin:0;color:var(--mut);font-size:15px;line-height:1.45}
.tl-tags{display:flex;flex-wrap:wrap;gap:6px;margin:auto 0 0;padding:6px 0 0;list-style:none}
.tl-tags li{padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;line-height:1.35;color:var(--ink)}
.tl-end{margin-top:24px;font-size:16px;color:var(--mut)}
/* Redes : outils vidéo + pastille-lien vers #motion sous les boutons du hero */
.mo-tools{margin-top:16px;font-size:14px;color:var(--mut)}
.pt-jump{order:6;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;width:max-content;max-width:100%;margin-top:14px;padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(201,164,92,.45);color:#E9D9B4;font-size:14px;text-decoration:none;transition:background-color .2s,box-shadow .2s}
.pt-jump:hover,.pt-jump:focus-visible{background:rgba(201,164,92,.12);box-shadow:inset 0 0 0 1px var(--gold)}
.pt-jump-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
@media (max-width:600px){.pt-jump{white-space:normal}}
/* accueil : badge « Nuevo » de la carte Redes */
.li-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--gold);color:#121110;font:600 12px/1.4 var(--f-sans);vertical-align:1px}
/* accueil, bande de prix : case Redes avec un second lien (+ vidéos) ; la carte entière reste cliquable */
.psum-duo .psum-cover{position:absolute;inset:0;z-index:1;border-radius:inherit}
.psum-duo .psum-cover:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}
.psum-duo .psum-sub{position:relative;z-index:2;align-self:flex-start;margin-top:-4px;color:var(--gold);font-size:14px;font-weight:500;text-decoration:none}
.psum-duo .psum-sub:hover{text-decoration:underline;text-underline-offset:4px}
.psum-duo:hover{background:inherit}
.h2-psum .psum-duo:hover{background:rgba(255,255,255,.03)}
/* tarifs : ligne de résumé vers les vidéos */
.pr-jump{margin-top:14px}
.pr-jump a{color:var(--gold-t);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor}
/* menu mobile : sous-lien sous « Redes sociales » */
.u045-sub{display:block;padding:8px 0 12px 44px;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(244,240,232,.7);font:400 16px/1.3 var(--f-sans);text-decoration:none;opacity:0;transform:translateY(16px)}
body.menu-open .u045-sub{opacity:1;transform:none;transition:opacity .4s var(--ux-ease) calc(.25s + var(--i) * 60ms),transform .7s var(--ux-spring) calc(.25s + var(--i) * 60ms)}
.u045-sub:hover,.u045-sub:focus-visible{color:var(--gold-l)}
/* Agencia : 5 services */
.svc-links.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.svc-links.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-links.five{grid-template-columns:1fr}}
.psum-duo .psum-sub{order:1;margin-top:-6px}.psum-duo .psum-l{order:2}
@media (max-width:600px){.page-top .hero-ctas{align-self:stretch;width:100%}}
.extras-motion{scroll-margin-top:110px}
/* accueil, hero : petite ligne discrète vers les prix */
.h2-from{display:inline-block;margin-top:10px;color:#A79E8F;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(201,164,92,.4)}
.h2-from:hover,.h2-from:focus-visible{color:var(--gold-l);border-bottom-color:var(--gold)}
.h2-copy .h2-from{align-self:flex-start;margin-top:-10px}
.dark-half .skills-grid .skill h3{font-family:var(--f-disp);font-weight:300}

/* ===== Téléphone : pages plus courtes, sans retirer de contenu ===== */
@media (max-width:600px){
  /* espacements entre sections plus serrés */
  .sec{padding:56px 0}
  .sec-head{margin-bottom:28px}
  .final{padding-top:64px;padding-bottom:64px}
  /* « Nuestras herramientas » : accordéon (le titre ouvre la carte), la première reste ouverte */
  .tl-grid{gap:8px}
  .tl-card{padding:0;gap:0}
  .tl-card summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;cursor:pointer;list-style:none}
  .tl-card summary::-webkit-details-marker{display:none}
  .tl-card summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:1.6px solid var(--gold-t);border-bottom:1.6px solid var(--gold-t);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
  .tl-card[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .tl-card summary h3{font-size:17px}
  .tl-card>p,.tl-card>.tl-tags{padding:0 16px}
  .tl-card>.tl-tags{padding-bottom:16px;padding-top:10px}
  .tl-card>p{margin-top:-2px}
  .tl-tags li{font-size:14px}
  /* « Webs que trabajan solas » : cartes compactes (icône à côté du titre) */
  .ws-cards{gap:8px}
  .ws-cards .xcard{display:grid;grid-template-columns:28px 1fr;gap:4px 12px;padding:16px}
  .ws-cards .ws-i{grid-row:1;align-self:center}
  .ws-cards .xc-name{grid-column:2;font-size:17px}
  .ws-cards .xc-desc{grid-column:1/-1}
  .ws-end{margin-top:20px;padding-top:18px}
  .ws-end .btn{width:100%;min-height:48px}
  /* accueil, bande de prix : l'audit en grand, puis les 3 autres sur une ligne compacte */
  .h2-psum{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .h2-psum .psum-card:first-child{grid-column:1/-1}
  .h2-psum .psum-card:not(:first-child){padding:14px 10px!important;gap:6px;border-right:1px solid rgba(238,232,220,.08);border-bottom:0}
  .h2-psum .psum-card:last-child{border-right:0}
  .h2-psum .psum-card:not(:first-child) .psum-k{font-size:12px;letter-spacing:.04em;line-height:1.25;min-height:30px}
  .h2-psum .psum-card:not(:first-child) .psum-p{font-size:clamp(24px,7.4vw,30px)!important;white-space:normal}
  .h2-psum .psum-card:not(:first-child) .psum-p small{display:block;font-size:12px}
  .h2-psum .psum-card:not(:first-child) .psum-l{font-size:13px}
  .h2-psum .psum-duo .psum-sub{font-size:12px;line-height:1.3}
}
/* téléphone : cartes en défilement horizontal + points indicateurs (offres, vidéos, avantages, services à l'unité) */
.sw-dots{display:none}
@media (max-width:600px){
  .m-swipe{display:flex!important;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:6px var(--gut) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-top:0!important}
  .m-swipe::-webkit-scrollbar{display:none}
  .m-swipe>*{flex:0 0 86%;max-width:86%;scroll-snap-align:start;min-width:0}
  .m-swipe.hm-grid>article{padding:20px!important;border:0!important;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
  .sw-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
  .sw-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background-color .25s,width .25s}
  .sw-dots i.on{width:20px;border-radius:4px;background:var(--gold)}
  .dark-half .sw-dots i{background:rgba(238,232,220,.25)}
  .dark-half .sw-dots i.on{background:var(--gold)}
}
/* téléphone : cartes « Lo que también hacemos » et « Webs que trabajan solas » en défilement */
@media (max-width:600px){
  .m-swipe.svc-links>a{padding:20px!important;border:0!important;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
  .m-swipe.svc-links b{font-size:28px}
  .m-swipe.ws-cards>*{flex-basis:78%;max-width:78%}
}
/* page Audit (téléphone/tablette) : bouton visible dès le premier écran, qui descend au formulaire */
.au-jump{display:none}
@media (max-width:900px){
  .au-jump{display:flex;margin-top:20px}
  .au-jump .u002,.au-jump .u002-mag,.au-jump .u002-btn{display:flex;width:100%}
  .au-jump .u002-btn{justify-content:space-between}
  #auditForm{scroll-margin-top:90px}
}
/* tarifs (téléphone) : le « 0 € » du bandeau doré plus compact, pour que « Pedirla » tienne dans le premier écran */
@media (max-width:600px){.audit-strip{gap:10px 20px;padding:22px}.audit-strip .pz{font-size:56px}}
@media (max-width:600px){.h2-psum .psum-card:last-child{grid-column:auto}.h2-psum .psum-card:not(:first-child){border-top:1px solid rgba(238,232,220,.08)}}
@media (max-width:600px){.h2-psum .psum-l,.h2-psum .psum-duo .psum-sub{display:inline-block;padding:12px 0;margin:-12px 0}}
.h2-copy .h2-from,.pt-jump,.pr-jump a{min-height:44px;display:inline-flex;align-items:center}.h2-copy .h2-from{border-bottom:0;text-decoration:underline;text-decoration-color:rgba(201,164,92,.5);text-underline-offset:4px}.pr-jump a{border-bottom:0;text-decoration:underline;text-underline-offset:4px}.pt-jump{padding-top:10px;padding-bottom:10px}

/* ===== Diseño web : visuel du hero = Lonja (le seul restaurant d'exemple de la page) ===== */
.pt-lonja{position:relative;display:block;width:100%;max-width:640px;margin-left:auto;padding:0 0 30px 0;text-decoration:none;aspect-ratio:1440/980}
.pt-lonja .ptl-desk{position:absolute;left:0;top:0;width:88%;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(238,232,220,.12),0 40px 80px -40px rgba(0,0,0,.9)}
.pt-lonja .ptl-desk img,.pt-lonja .ptl-mob img{display:block;width:100%;height:auto}
.pt-lonja .ptl-mob{position:absolute;right:0;bottom:30px;width:26%;border-radius:18px;overflow:hidden;box-shadow:0 0 0 5px #0a0a0b,0 0 0 6px #3b3c40,0 30px 60px -24px rgba(0,0,0,.9)}
.pt-lonja .ptl-tag{position:absolute;left:0;bottom:0;color:#A39A8B;font-size:13px;letter-spacing:.02em;border-bottom:1px solid rgba(201,164,92,.35)}
.pt-lonja:hover .ptl-tag,.pt-lonja:focus-visible .ptl-tag{color:var(--gold-l)}
/* « Lo que tu web hace por ti » : 7 points en grille compacte */
.wh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line2)}
.wh-grid li{display:flex;flex-direction:column;gap:6px;padding:22px 22px 22px 0;border-bottom:1px solid var(--line)}
.wh-grid b{font:400 24px/1.1 var(--f-disp)}
.wh-grid span:not(.wh-n){color:var(--mut);font-size:15px;line-height:1.45}
.wh-n{color:var(--gold-t);font-size:12px}
@media (max-width:1000px){.wh-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.wh-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.wh-grid li{padding:14px 0}.wh-grid b{font-size:20px}}
/* « Hecha a medida » : bloc repliable des outils (#herramientas), fermé par défaut, ouvert en mode calme */
.hm-tools{margin-top:28px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--line);scroll-margin-top:100px}
.hm-tools>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 20px;cursor:pointer;list-style:none;font:500 17px/1.3 var(--f-sans)}
.hm-tools>summary::-webkit-details-marker{display:none}
.hm-tools>summary::after{content:"";width:10px;height:10px;border-right:1.6px solid var(--gold-t);border-bottom:1.6px solid var(--gold-t);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.hm-tools[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.hmt-in{padding:0 20px 20px}
.hmt-lead{margin:0 0 14px;color:var(--mut);font-size:15px}
.hmt-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 18px}
.hmt-g h3{margin:0 0 2px;font:500 16px/1.3 var(--f-sans)}
.hmt-g p{margin:0 0 8px;color:var(--mut);font-size:14px;line-height:1.4}
.hmt-end{margin:16px 0 0;color:var(--mut);font-size:14px}
@media (max-width:1100px){.hmt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.hmt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}.hm-tools .tl-tags li{font-size:13px;padding:3px 8px}}
/* « Arreglamos la web que ya tienes » : texte à gauche, vidéo à droite (dessous sur téléphone) */
.fx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.fx-copy .sec-head{margin-bottom:24px}
.fx-steps{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 26px;padding:0;list-style:none}
.fx-steps li{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:center;padding:10px 14px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.fx-steps .fx-n{grid-row:1/3;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--gold);font-size:12px}
.fx-steps b{font-weight:600;font-size:15px}
.fx-steps li>span:last-child{color:var(--mut);font-size:14px}
.fx-list{margin-bottom:22px}
.fx-note{margin:0 0 18px;font-size:16px;color:var(--ink)}
@media (max-width:900px){.fx-grid{grid-template-columns:1fr;gap:28px}}
/* composant vidéo commun : dimensions fixées (pas de saut), image d'aperçu chargée seulement quand la vidéo est visible */
.kvid{margin:0}
.kvid-box{position:relative;aspect-ratio:var(--ar);border-radius:20px;overflow:hidden;background:#15120d;box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(0,0,0,.5)}
.kvid video{display:block;width:100%;height:100%;object-fit:cover}
.kvid-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:0;border-radius:50%;background:rgba(18,17,16,.72);color:#F3E3BC;display:none;place-items:center;cursor:pointer}
.kvid-play svg{width:26px;height:26px;fill:currentColor;margin-left:3px}
.kvid.is-paused .kvid-play,.calm .kvid:not(.is-playing) .kvid-play{display:grid}
.kvid-cap{margin-top:10px;color:var(--mut);font-size:13px;line-height:1.4}
/* Redes, #motion : usages + exemple Cierra (16:9, 900 px max, centré) */
.mo-use{margin:0 0 22px}
.mo-ex{max-width:900px;margin:36px auto 0}
.mo-ex .hm-bt{text-align:left}
/* slogan FR : l'apostrophe de « Qu'on » se lit comme une apostrophe (et non un accent) dans le Barlow italique 300 */
.h2-sl .apo{font-style:normal;font-weight:500;margin:0 .04em 0 .03em}
/* accueil : titres des 4 cartes de services en Barlow Condensed (charte : Instrument Serif seulement maquettes et slogan) */
.dark-half .sk-body h3,.dark-half #servicios .skill h3{font-family:var(--f-disp);font-weight:300;letter-spacing:-.005em;font-variation-settings:normal}
/* « Webs que trabajan solas » : 2 colonnes compactes sur téléphone */
@media (max-width:600px){.ws-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}.ws-cards .xcard{display:flex;flex-direction:column;gap:6px;padding:14px}.ws-cards .ws-i{width:22px;height:22px}.ws-cards .xc-name{font-size:16px;line-height:1.25}.ws-cards .xc-desc{font-size:14px;line-height:1.4}}
.fx-copy .sec-head{grid-template-columns:1fr}
.fx-copy .sec-head>.eyebrow{grid-column:1;grid-row:auto;justify-self:start;order:-1;margin:0}
.fx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.fx-steps{grid-template-columns:1fr}}
@media (max-width:600px){.ws-cards .ws-i{align-self:flex-start}.ws-end .u002,.ws-end .u002 .u002-mag,.ws-end .u002 .u002-btn,.fx-cta .u002,.fx-cta .u002 .u002-mag,.fx-cta .u002 .u002-btn{display:flex;width:100%}.ws-end .u002 .u002-btn,.fx-cta .u002 .u002-btn{justify-content:space-between}}
/* accueil (téléphone) : Anatomía un peu plus courte (50vh de défilement par étape au lieu de 65vh), mêmes 7 étapes ;
   « Cinco pasos » plus serrés */
@media (max-width:600px){
  .anat.stepped,.anat{height:calc(100vh + 350vh)}
  .proc li{padding-bottom:20px;row-gap:4px}
  .proc li h3{margin-top:10px;font-size:24px}
  .final .crest{transform:scale(.8);margin-bottom:-12px}
}
.calm .anat{height:auto}
.h2-sl .apo,.h2-sl-mob span.apo{display:inline}
/* accueil (téléphone) : bloc audit un peu plus serré */
@media (max-width:600px){.audit-get li{padding:12px 0;gap:12px}.form{gap:12px}.u031-btn{height:56px}}
@media (max-width:600px){.u044-q{min-height:56px;padding:8px 14px 8px 16px;font-size:16px}.u044{gap:8px}#preguntas .sec-head,#por-que .sec-head{margin-bottom:22px}}
@media (max-width:600px){#servicios{padding-bottom:24px}#servicios>.sec-head{margin-bottom:20px}.hero2{padding-bottom:8px}}

/* ===== Accueil : bandeau « Vídeos y motion design » (#videos), vidéo à gauche, texte à droite ; vidéo au-dessus sur téléphone ===== */
.home-videos{padding-top:clamp(40px,8vh,90px);padding-bottom:clamp(40px,8vh,90px);scroll-margin-top:70px}
.hv-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.home-videos .kvid-box{box-shadow:0 0 0 1px rgba(238,232,220,.12),0 40px 80px -40px rgba(0,0,0,.9)}
.home-videos .kvid-cap{color:#A39A8B}
.hv-badge{display:inline-block;margin:0 0 14px;padding:4px 12px;border-radius:999px;background:var(--gold);color:#121110;font:600 12px/1.4 var(--f-sans);letter-spacing:.02em}
.hv-copy h2{margin:0;font:400 clamp(34px,4vw,56px)/1.02 var(--f-disp);color:#F3EBDD}
.hv-copy h2 em{color:var(--gold);font-weight:300}
.hv-lead{margin:14px 0 0;color:#BDB6A8;font-size:17px;line-height:1.55;max-width:46ch}
.hv-pts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.hv-pts li{padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(201,164,92,.4);color:#E9E1D3;font-size:15px}
.hv-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.hv-from{font:300 34px/1 var(--f-disp);color:#F3EBDD}
.hv-from small{font:400 14px var(--f-sans);color:#A79E8F;margin-right:4px}
.home-videos .hv-btn{color:#F3EBDD;box-shadow:inset 0 0 0 1px rgba(201,164,92,.55)}
.home-videos .hv-btn:hover{background:rgba(201,164,92,.12);box-shadow:inset 0 0 0 1px var(--gold)}
@media (max-width:900px){.hv-grid{grid-template-columns:1fr;gap:18px}}
@media (max-width:600px){.home-videos{padding-top:36px;padding-bottom:36px}.hv-copy h2{font-size:34px}.hv-lead{font-size:16px}.hv-pts li{font-size:14px;padding:6px 12px}.hv-foot{margin-top:16px}.hv-from{font-size:30px}.hv-btn{flex:1;min-height:48px}}
/* page Audit, mode calme : les lignes du rapport de la maquette restent visibles */
.calm .ar-list li{opacity:1!important;transform:none!important}
/* téléphone : un peu moins d'espace entre sections ; bandeau vidéos plus compact ; liens du pied de page plus serrés */
@media (max-width:600px){
  .sec{padding:44px 0}
  .home-videos{padding-top:28px;padding-bottom:28px}
  .hv-badge{margin-bottom:10px}
  .hv-pts{display:block;margin-top:12px}
  .hv-pts li{display:inline;padding:0;box-shadow:none;border-radius:0;color:#E9E1D3;font-size:15px;line-height:1.6}
  .hv-pts li+li::before{content:" · ";color:var(--gold)}
  .foot ul{gap:2px}
  .foot ul li{line-height:1.5}
}
@media (max-width:600px){.light-half>.sec:not(.final),#darkHalf>.sec:not(.hero):not(.home-videos){padding-top:44px!important;padding-bottom:44px!important}}
@media (max-width:600px){.anat.stepped,.anat{height:calc(100vh + 330vh)}.final{padding-top:48px;padding-bottom:48px}}
@media (max-width:600px){.hv-grid{gap:14px}.home-videos .kvid-cap{margin-top:6px}.anat-after{padding-bottom:14px}}
@media (max-width:600px){.home-videos{padding-bottom:20px}.hv-badge{margin-bottom:8px}}
@media (max-width:600px){.h2-prices{padding-bottom:28px}}

/* ===== Diseño web : photo Salvia du hero, entière, fondue dans le fond sombre (comme la photo Orilla de l'accueil) ===== */
.pt-photo{position:relative;margin:0}
.pt-photo img{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 5%,rgba(0,0,0,.8) 11%,#000 17%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 10%,#000 15%,#000 84%,rgba(0,0,0,.6) 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 5%,rgba(0,0,0,.8) 11%,#000 17%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 10%,#000 15%,#000 84%,rgba(0,0,0,.6) 92%,transparent 100%);
  mask-composite:intersect}
.pt-photo figcaption{position:absolute;right:16px;bottom:9%;margin:0;padding:6px 12px;border-radius:999px;background:rgba(13,11,8,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pt-photo .pt-photo-tag{color:#E9E1D3;font-size:13px}
/* ordinateur : la photo va jusqu'au bord droit de l'écran */
@media (min-width:1101px){.page-top .pt-photo{margin-right:calc(50% - 50vw + var(--gut, 0px));max-width:none;width:auto}
  .page-top .pt-photo img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 5%,rgba(0,0,0,.8) 11%,#000 17%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 5%,rgba(0,0,0,.85) 10%,#000 15%,#000 84%,rgba(0,0,0,.6) 92%,transparent 100%);-webkit-mask-composite:source-in}}
/* tablette et téléphone (texte et photo empilés) : pleine largeur, fondus en haut et en bas, étiquette sous la photo */
@media (max-width:1100px){
  .page-top .pt-photo{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));max-width:none;width:auto}
  .pt-photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 5%,#000 12%,#000 86%,rgba(0,0,0,.5) 94%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 5%,#000 12%,#000 86%,rgba(0,0,0,.5) 94%,transparent 100%)}
  .pt-photo figcaption{position:static;margin:4px var(--gut) 0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pt-photo .pt-photo-tag{color:#A39A8B}
}
@media (min-width:1101px){.page-top .pt-photo{margin-right:calc(-1 * (max(0px, (100vw - 1360px) / 2) + var(--gut)))}}