/* Page Sites web LogikDev : base commune au site (extraite de l'accueil) */
:root{
  --ink:#eef1ff; --muted:#cdd3ee; --faint:#a3abd0; --line:rgba(238,241,255,.13); --line-strong:rgba(238,241,255,.24);
  --accent:#8f9dff; --accent-ink:#0a0d24;
  --glass:rgba(12,16,40,.48); --glass-soft:rgba(12,16,40,.32); --glass-strong:rgba(10,13,32,.78); --glass-edge:rgba(255,255,255,.12);
  --night:#060818;
  --ui-bg:#f6f7fa; --ui-surface:#ffffff; --ui-ink:#12152a; --ui-muted:#7d849b; --ui-line:#e7e9f0;
  --good:#22c58b; --warn:#f5a524; --bad:#f0545a;
  --c-sv:#7b83ff; --c-dv:#38bdf8; --c-otp:#1fcfbb; --c-ts:#f5a524; --c-sd:#8b5cff;
  --pc:var(--c-sv);
  --shadow-lg:0 50px 120px -40px rgba(4,6,22,.7),0 18px 40px -20px rgba(4,6,22,.5);
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-body:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --gut-l:max(16px, env(safe-area-inset-left, 0px)); --gut-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{padding-left:var(--gut-l);padding-right:var(--gut-r)}
.inner{max-width:1320px;margin-inline:auto;padding-inline:clamp(0px,2.5vw,36px)}
.glass{background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 1px var(--line),0 30px 80px -40px rgba(4,6,22,.6)}
.h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1.02;letter-spacing:-.05em;text-shadow:0 1px 22px rgba(4,6,22,.6)}
.lead{font-size:clamp(1rem,1.25vw,1.15rem);color:var(--muted);max-width:56ch;line-height:1.6;text-shadow:0 1px 14px rgba(4,6,22,.6)}
.btn{--bh:52px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--bh);padding:0 26px;border-radius:999px;border:0;font:500 15px/1 var(--f-body);text-decoration:none;cursor:pointer;user-select:none;touch-action:manipulation;transition:transform 160ms var(--ease-out),background-color 200ms ease,box-shadow 200ms ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:#eef1ff;color:#0a0d24;box-shadow:inset 0 1px 0 #fff,0 12px 30px -12px rgba(4,6,22,.6)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:rgba(255,255,255,.12)}.btn-primary:hover{box-shadow:inset 0 1px 0 #fff,0 16px 36px -12px rgba(4,6,22,.7)}}
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:12px;padding-left:var(--gut-l);padding-right:var(--gut-r);pointer-events:none}
.nav-in{pointer-events:auto;max-width:1280px;margin-inline:auto;display:flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 20px;border-radius:999px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand .ld{width:30px;height:28px;display:block;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(20,90,255,.35))}
.brand .lw{font-family:"Montserrat",var(--f-body);font-weight:500;font-size:13.5px;letter-spacing:.26em;color:#fff;white-space:nowrap;margin-right:-.26em}
.brand .lw b{font-weight:500;color:#3b8cff}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{font-size:14px;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color 200ms ease,background-color 200ms ease;white-space:nowrap}
.nav-links a.hi{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.nav .btn{--bh:42px;font-size:14px;padding:0 18px}
@media (max-width:1060px){.nav-links a.opt{display:none}}
@media (max-width:820px){.nav-links{display:none}.nav .btn{margin-left:auto}}
@media (max-width:380px){.nav .btn{padding:0 14px;font-size:13px}.brand .lw{display:none}}
.mnav{display:none}
@media (max-width:820px){.mnav{display:flex;position:fixed;left:var(--gut-l);right:var(--gut-r);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:55;border-radius:999px;padding:6px;gap:4px;justify-content:space-between}
.mnav a{flex:1;text-align:center;font-size:12.5px;text-decoration:none;color:var(--muted);padding:9px 4px;border-radius:999px;white-space:nowrap}
.mnav a.hi{background:rgba(255,255,255,.1);color:var(--ink)}}
}
}
.foot{background:linear-gradient(transparent,rgba(4,6,18,.92) 140px);padding-block:150px calc(env(safe-area-inset-bottom,0px) + 40px)}
.wordmark{font-family:"Montserrat",var(--f-body);font-weight:400;font-size:clamp(3rem,13vw,12rem);line-height:.84;letter-spacing:0;display:flex;justify-content:space-between;overflow:clip;padding-bottom:.06em;color:#eef1ff}
.wordmark span{display:inline-block}
.wordmark span.d{background:linear-gradient(180deg,#63adff,#1f6bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{display:flex;align-items:center;justify-content:center;gap:18px;margin:22px 0 0;font-family:"Montserrat",var(--f-body);font-size:clamp(10.5px,1.05vw,13px);letter-spacing:.28em;text-transform:uppercase;color:#aab2d8;white-space:nowrap}
.tagline i{flex:1;max-width:110px;height:1px;background:#2f7bff}
@media (max-width:640px){.tagline{white-space:normal;text-align:center;letter-spacing:.18em;line-height:1.7}.tagline i{display:none}}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}
.fcols b{display:block;margin-bottom:10px;font-weight:600}
.fcols a{display:block;color:#9aa3cc;text-decoration:none;padding:3px 0}
.fcols p{color:#9aa3cc}
@media (max-width:820px){.fcols{grid-template-columns:1fr 1fr}.foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 90px)}}
}
@media (prefers-reduced-transparency: reduce){.glass{background:var(--glass-strong);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* Variables de la démonstration (restaurant) */
:root{
  --cb-night:#07132a; --cb-deep:#0b2042; --cb-sea:#1f6fa3; --cb-cream:#f4eee3; --cb-paper:#ece3d3; --cb-champ:#e8d7b1; --cb-gold:#c6a25a; --cb-ink:#0c1a33; --cb-ink2:#4a5670;
  --on-dark:#f5efe4; --on-dark-2:rgba(245,239,228,.78); --on-dark-3:rgba(245,239,228,.56); --line-d:rgba(245,239,228,.16); --line-l:rgba(12,26,51,.14);
  --gl:var(--gut-l); --gr:var(--gut-r); --top:84px;
}
body{background:var(--night)}

/* ===================== sections LogikDev ===================== */
.sw{padding-block:clamp(90px,13vh,150px)}
.sw-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px 48px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,56px)}
.sw-head .h2{max-width:15ch}
.sw-head .lead{max-width:44ch}
.k{display:block;font-family:var(--f-mono);font-size:12px;color:#8f9dff;margin-bottom:14px}

/* ce que vous venez de vivre */
.lived{background:linear-gradient(180deg,#04101f,var(--night) 70%)}
.lv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:lv}
.lv{counter-increment:lv;position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:24px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line)}
.lv::before{content:"0" counter(lv);font-family:var(--f-mono);font-size:12px;color:#8f9dff}
.lv b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.lv span{color:var(--muted);font-size:14.5px}
.lv svg{width:34px;height:34px;color:#eef1ff;margin-top:auto}

/* offres */
.of-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.of{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:20px;padding:clamp(22px,2.6vw,34px);border-radius:28px;overflow:hidden;background:var(--glass);box-shadow:inset 0 1px 0 var(--glass-edge),0 0 0 1px var(--line)}
.of h3{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.045em;line-height:1.05}
.of p{margin:10px 0 14px;color:var(--muted);font-size:15px}
.of ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.of li{display:flex;gap:10px;font-size:14.5px}
.of li::before{content:"";flex-shrink:0;width:14px;height:14px;margin-top:4px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--oc,#8f9dff);background:color-mix(in srgb,var(--oc,#8f9dff) 25%,transparent)}
.of .ill{align-self:center;position:relative;height:150px;border-radius:18px;overflow:hidden;background:#0d1230;box-shadow:inset 0 0 0 1px var(--line)}
.of.tag::after{content:attr(data-tag);position:absolute;right:16px;top:16px;font-size:11.5px;padding:4px 10px;border-radius:999px;background:rgba(232,215,177,.16);color:var(--cb-champ);box-shadow:inset 0 0 0 1px rgba(232,215,177,.4)}
.ill i{position:absolute;display:block;border-radius:6px;background:rgba(238,241,255,.14)}

/* inclus */
.in-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:26px;overflow:hidden;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.inc{display:flex;flex-direction:column;gap:8px;padding:clamp(22px,2.4vw,32px);background:var(--night)}
.inc svg{width:30px;height:30px;color:#8f9dff;margin-bottom:8px}
.inc b{font-size:16.5px;font-weight:600}
.inc span{color:var(--muted);font-size:14.5px}

/* méthode */
.me-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}
.me-list::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:linear-gradient(90deg,#3b8cff,#8f9dff,rgba(143,157,255,.15))}
.me{position:relative;display:flex;flex-direction:column;gap:10px;padding-top:54px}
.me::before{content:attr(data-n);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:#0a0d24;background:#eef1ff}
.me b{font-family:var(--f-display);font-weight:500;font-size:1.2rem;letter-spacing:-.04em}
.me span{color:var(--muted);font-size:14.5px}
.me small{font-family:var(--f-mono);font-size:12px;color:#8f9dff}

/* appel final */
.cta{position:relative;min-height:88svh;display:flex;align-items:center;overflow:hidden;padding-block:120px}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,24,.92) 0%,rgba(6,8,24,.74) 42%,rgba(6,8,24,.2) 78%),linear-gradient(0deg,var(--night),transparent 30%)}
.cta .inner{position:relative;width:100%}
.cta h2{margin:0 0 18px;font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.06em;max-width:16ch;text-shadow:0 2px 30px rgba(4,6,22,.5)}
.cta p{margin:0 0 28px;max-width:48ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.15rem)}
.cta .row{display:flex;gap:10px;flex-wrap:wrap}
.cta .note{margin-top:26px;font-size:12.5px;color:var(--faint)}

.reveal{opacity:1}
@media (max-width:1000px){.lv-grid,.me-list{grid-template-columns:repeat(2,minmax(0,1fr))}.me-list::before{display:none}.in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.of-grid{grid-template-columns:1fr}}
@media (max-width:620px){.lv-grid,.me-list,.in-grid{grid-template-columns:1fr}.of{grid-template-columns:1fr}.of .ill{display:none}}

/* la barre de navigation mobile reste visible : la visite s'organise au-dessus */
@media (max-width:820px){
  .tour .tv-rail{bottom:84px}
  .tour .tv-caps{bottom:140px}
  .tour .tv-load{bottom:120px}
  .tour .tv-hero{padding-bottom:150px}
  .tour .tv-cue{bottom:86px}
  .tour .tsheet{bottom:72px;max-height:calc(100svh - 160px)}
  .foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 100px)}
}

@media (max-width:820px){.tour .tv-capt{top:calc(var(--top) + 66px)}}