@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:swap;src:url(assets/a4.woff2) format('woff2')}
@font-face{font-family:'Amiri';font-style:italic;font-weight:400;font-display:swap;src:url(assets/a4i.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(assets/l4.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(assets/l7.woff2) format('woff2')}
:root{
--navy:#0A1F44; --navy-2:#0E2A57; --petrol:#0B5A75; --petrol-2:#12768F;
--gold:#B08D57; --gold-2:#CBAA7E;
--ease:cubic-bezier(.16,1,.3,1);
--pad:clamp(20px,5vw,72px);
--max:1440px;
--bg:#FFFFFF; --surface:#FFFFFF; --head:#0A1F44; --ink:#141C26; --muted:#4F5A69;
--line:#E8ECF1; --line-2:#D5DCE4; --accent:#0B5A75;
--nav-bg:rgba(255,255,255,.82);
--glass:rgba(255,255,255,.42); --glass-2:rgba(255,255,255,.66);
--glass-line:rgba(10,31,68,.07); --glass-top:rgba(255,255,255,.85); --glass-shine:rgba(176,141,87,.30);
--btn-bg:#0A1F44; --btn-fg:#FFFFFF; --btn-hover:#0B5A75;
--hpin-bg:#0A1F44; --foot-bg:#0A1F44;
--grain-blend:multiply; --grain-op:.16;
--ok-bg:#F4FAF6; --ok-bd:#BFDCCB; --ok-fg:#1D5C40;
--shadow:rgba(10,31,68,.55);
}
[data-theme="dark"]{
--bg:#070C15; --surface:#0D1725; --head:#EEF3F9; --ink:#C9D5E3; --muted:#8B9CB1;
--line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --accent:#4FA9C6;
--petrol:#4FA9C6; --gold:#C9A87C; --gold-2:#DCC098;
--nav-bg:rgba(9,15,26,.78);
--glass:rgba(14,22,36,.42); --glass-2:rgba(11,18,30,.62);
--glass-line:rgba(255,255,255,.09); --glass-top:rgba(255,255,255,.10); --glass-shine:rgba(201,168,124,.28);
--btn-bg:#EEF3F9; --btn-fg:#0A1F44; --btn-hover:#4FA9C6;
--hpin-bg:#0A1424; --foot-bg:#0A1424;
--grain-blend:screen; --grain-op:.07;
--ok-bg:rgba(63,150,110,.10); --ok-bd:rgba(120,200,160,.28); --ok-fg:#8FD9B4;
--shadow:rgba(0,0,0,.75);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
background:var(--bg);color:var(--ink);font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
font-size:17.5px;font-weight:400;line-height:1.78;letter-spacing:.002em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden;height:100vh}
body,nav,.marq,.spot,.stack .card,.notbox,.hpin,footer,#pre{transition:background-color .55s var(--ease),color .55s var(--ease),border-color .55s var(--ease)}
html.vt-off body,html.vt-off *{transition:none!important}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}
.serif{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400}
h1,h2,h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;line-height:1.08;letter-spacing:0;color:var(--head)}
h1{font-size:clamp(3rem,8.4vw,8.4rem);letter-spacing:.015em;font-weight:400}
h2{font-size:clamp(2.2rem,5.4vw,4.7rem);font-weight:400}
h3{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:1.124rem;line-height:1.3;letter-spacing:-.01em}
p{max-width:64ch}
.mono{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.685rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--muted)}
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
background:linear-gradient(90deg,var(--navy),var(--petrol) 60%,var(--gold));z-index:9997}
#pre{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:flex-end;justify-content:center;
padding:0 var(--pad) 8vh;transition:transform 1s var(--ease)}
#pre.done{transform:translate3d(0,-101%,0)}
.pre-in{width:100%;max-width:var(--max);display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.pre-num{font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(4rem,16vw,13rem);line-height:.8;color:var(--head)}
.pre-lab{padding-bottom:1.2rem;color:var(--muted)}
.pre-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:6vh;height:1px;background:var(--line)}
.pre-bar i{display:block;height:100%;width:0;background:var(--head)}
.pre-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(220px,40vw);opacity:.08}
nav{position:fixed;top:0;left:0;right:0;z-index:900;
transition:transform .55s var(--ease),background .45s,border-color .45s,box-shadow .45s;
background:var(--glass);
-webkit-backdrop-filter:blur(18px) saturate(190%);backdrop-filter:blur(18px) saturate(190%);
border-bottom:1px solid var(--glass-line);
box-shadow:inset 0 1px 0 var(--glass-top)}
nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,var(--glass-shine) 35%,var(--glass-shine) 65%,transparent);opacity:.9}
.hpin .stick{padding-top:84px}
@media (max-width:720px){.hpin .stick{padding-top:76px}}
nav.zdark{--head:#EEF3F9;--muted:#A9BDD6;--line:rgba(255,255,255,.18);--line-2:rgba(255,255,255,.34);
--glass:rgba(10,20,36,.40);--glass-2:rgba(9,16,28,.62);--glass-line:rgba(255,255,255,.10);--glass-top:rgba(255,255,255,.10);
--btn-bg:#EEF3F9;--btn-fg:#0A1F44;--btn-hover:#4FA9C6;--accent:#4FA9C6;--petrol:#4FA9C6}
nav.solid{background:var(--glass-2);
-webkit-backdrop-filter:blur(26px) saturate(200%);backdrop-filter:blur(26px) saturate(200%);
box-shadow:inset 0 1px 0 var(--glass-top),0 18px 40px -34px var(--shadow)}
.nav-in{height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:inline-block}
.logo img{height:50px;width:auto}
img.l-night{display:none}
[data-theme="dark"] img.l-day,nav.inv img.l-day,nav.zdark img.l-day{display:none}
[data-theme="dark"] img.l-night,nav.inv img.l-night,nav.zdark img.l-night{display:block}
nav.inv .burger{border-color:rgba(255,255,255,.32)}
nav.inv .burger i{background:#fff}
nav.inv .nav-right .mag{opacity:0;pointer-events:none;transition:opacity .3s}
.nav-mid{display:flex;gap:6px;align-items:center}
.nav-mid a{position:relative;padding:9px 16px;border-radius:999px;font-size:0.984rem;font-weight:400;color:var(--head);
transition:color .3s var(--ease)}
.nav-mid a i{position:absolute;inset:0;border-radius:999px;background:var(--head);transform:scale(.6);opacity:0;
transition:transform .45s var(--ease),opacity .35s;z-index:-1}
.nav-mid a:hover{color:var(--bg)}
.nav-mid a:hover i{transform:scale(1);opacity:1}
.nav-mid a span{position:relative;z-index:1}
.nav-right{display:flex;align-items:center;gap:14px}
.tel{font-size:0.963rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.tel b{color:var(--head);font-weight:700}
.tt{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;color:var(--head);overflow:hidden;flex:0 0 46px}
.tt:hover{border-color:var(--line-2)}
.tt svg{position:absolute;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.tt .moon{transform:translateY(120%) rotate(-40deg);opacity:0}
[data-theme="dark"] .tt .sun{transform:translateY(-120%) rotate(40deg);opacity:0}
[data-theme="dark"] .tt .moon{transform:none;opacity:1}
nav.inv{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent;box-shadow:none}
nav.inv::after{opacity:0}
nav.inv .tt{border-color:rgba(255,255,255,.32);color:#fff}
.sheet .tt{border-color:rgba(255,255,255,.28);color:#fff}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--petrol);position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--petrol);animation:pl 2.4s infinite}
@keyframes pl{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(3.4);opacity:0}}
.mag{display:inline-flex;position:relative;isolation:isolate}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;
font-size:0.995rem;font-weight:400;letter-spacing:.01em;overflow:hidden;border:1px solid var(--btn-bg);color:var(--btn-fg);
background:var(--btn-bg);transition:color .35s var(--ease),border-color .35s}
.btn .fill{position:absolute;inset:-1px;background:var(--btn-hover);transform:translate3d(0,101%,0);transition:transform .55s var(--ease);border-radius:999px}
.btn:hover .fill{transform:translate3d(0,0,0)}
.btn span,.btn svg{position:relative;z-index:1}
.btn.ghost{background:transparent;color:var(--head);border-color:var(--line-2)}
.btn.ghost .fill{background:var(--btn-bg)}
.btn.ghost:hover{color:var(--btn-fg);border-color:var(--btn-bg)}
.btn:active{transform:scale(.975)}
.btn svg{transition:transform .45s var(--ease)}
.btn:hover svg{transform:translate3d(4px,0,0)}
.btn.sm{padding:12px 22px;font-size:0.931rem}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:17px;height:1.5px;background:var(--head);transition:transform .4s var(--ease),opacity .3s}
.burger.on i:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:880;background:var(--navy);color:#fff;padding:110px var(--pad) 40px;
display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);
transition:clip-path .8s var(--ease);pointer-events:none}
.sheet.on{clip-path:inset(0 0 0 0);pointer-events:auto}
.sheet a.big{font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(2.2rem,10vw,3.6rem);color:#fff;display:block;
padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13);opacity:0;transform:translateY(24px);
transition:opacity .5s var(--ease),transform .6s var(--ease)}
.sheet.on a.big{opacity:1;transform:none}
.sheet-foot{color:#9FB4CD;font-size:1.016rem}
.sheet-foot a{color:#fff;display:block;padding:3px 0}
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;padding:150px 0 clamp(40px,7vh,80px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(24px,4vw,70px);align-items:end;width:100%}
#psCanvas{position:absolute;top:0;right:0;width:58%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease) .5s}
#psCanvas.in{opacity:1}
.hero h1{position:relative;z-index:2;display:inline-block;width:max-content;max-width:100%}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>i{display:block;font-style:normal;transform:translate3d(0,110%,0);transition:transform 1.15s var(--ease)}
.hero h1 .ln>i.lockup{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:400;
font-size:.52em;letter-spacing:0;line-height:1.05;padding-top:0;margin-top:-.16em;text-indent:0;
display:flex;justify-content:space-between;width:100%}
.hero h1 .ln>i.lockup>b{font-weight:400;display:block}
.ready .hero h1 .ln>i{transform:none}
.hero h1 .ln:nth-child(2)>i{transition-delay:.09s}
.acc{color:var(--petrol)}
.hero-sub{margin-top:clamp(20px,3vh,34px);display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
opacity:0;transform:translateY(18px);transition:all .9s var(--ease) .5s}
.ready .hero-sub{opacity:1;transform:none}
.hero-sub .sep{width:34px;height:1px;background:var(--gold)}
.hero-pitch{margin-top:26px;font-size:clamp(1.05rem,1.5vw,1.32rem);color:var(--muted);max-width:44ch;
opacity:0;transform:translateY(18px);transition:all .9s var(--ease) .62s}
.ready .hero-pitch{opacity:1;transform:none}
.hero-cta{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;transform:translateY(18px);transition:all .9s var(--ease) .74s}
.ready .hero-cta{opacity:1;transform:none}
.hero-side{position:relative;z-index:2;padding-bottom:6px;opacity:0;transform:translateY(20px);transition:all 1s var(--ease) .9s}
.ready .hero-side{opacity:1;transform:none}
.hero-side ul{list-style:none;border-top:1px solid var(--line)}
.hero-side li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:1.038rem;color:var(--head)}
.hero-side li em{font-style:normal;font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.706rem;font-weight:700;color:var(--gold);letter-spacing:.16em}
.scrollcue{position:absolute;left:var(--pad);bottom:26px;display:flex;align-items:center;gap:12px;color:var(--muted);z-index:3}
.scrollcue .track{width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scrollcue .track i{position:absolute;inset:0;background:var(--head);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--bg)}
.marq-t{display:flex;gap:44px;width:max-content;will-change:transform}
.marq-t span{font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(1.3rem,2.4vw,2rem);color:var(--head);white-space:nowrap;display:flex;align-items:center;gap:44px}
.marq-t span::after{content:"";width:7px;height:7px;background:var(--gold);border-radius:50%;display:block}
section{position:relative}
.sec{padding:clamp(90px,13vh,170px) 0}
.head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;margin-bottom:clamp(40px,6vh,72px)}
.head .mono{color:var(--accent);white-space:nowrap}
.head .rule{height:1px;background:var(--line);align-self:center}
.rev .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.rev .w>i{display:inline-block;font-style:normal;transform:translate3d(0,105%,0);transition:transform .9s var(--ease)}
.rev.in .w>i{transform:none}
.fade{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.fade.in{opacity:1;transform:none}
.pres{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(30px,6vw,110px);align-items:start}
.pres-sticky{position:sticky;top:130px}
.pres p+p{margin-top:1.15rem}
.pres .big{font-size:clamp(1.15rem,1.7vw,1.45rem);color:var(--ink);font-weight:400;line-height:1.5}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:52px;border-top:1px solid var(--line)}
.chips div{padding:22px 0;border-bottom:1px solid var(--line)}
.chips div:nth-child(odd){padding-right:26px;border-right:1px solid var(--line)}
.chips div:nth-child(even){padding-left:26px}
.chips b{display:block;font-weight:700;color:var(--head);font-size:1.07rem}
.chips span{font-size:0.984rem;color:var(--muted)}
.notbox{margin-top:46px;padding:26px 30px;border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:0 6px 6px 0;background:var(--surface)}
.notbox p{font-size:1.038rem;color:var(--muted);max-width:none}
.notbox strong{color:var(--head);font-weight:700}
.hpin{position:relative;background:var(--hpin-bg);color:#fff;padding:clamp(90px,13vh,170px) 0 clamp(70px,10vh,120px);overflow:hidden}
.hpin .htop{padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(34px,6vh,64px)}
.hpin h2{color:#fff}
.hpin .mono{color:var(--gold-2)}
.htrack{display:flex;gap:clamp(18px,2.2vw,32px);padding:0 var(--pad) 6px;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;overscroll-behavior-x:contain}
.htrack::-webkit-scrollbar{display:none}
.htrack.grabbing{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.htrack.grabbing *{pointer-events:none}
.spanel{flex:0 0 clamp(300px,33vw,520px);min-height:clamp(400px,60vh,580px);border:1px solid rgba(255,255,255,.14);
border-radius:5px;padding:clamp(32px,3vw,50px);display:flex;flex-direction:column;justify-content:space-between;
scroll-snap-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0))}
.spanel::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,rgba(176,141,87,.30),transparent 62%);
left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--ease)}
.spanel:hover::before{transform:translate(-50%,-50%) scale(1)}
.spanel>*{position:relative}
.spanel .n{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.77rem;font-weight:700;letter-spacing:.26em;color:var(--gold-2)}
.spanel h3{color:#fff;font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(1.9rem,2.9vw,2.6rem);font-weight:400;margin:18px 0 18px;line-height:1.05}
.spanel p{color:#C3D2E4;font-size:1.091rem;font-weight:400;line-height:1.7}
.spanel .ico{width:52px;height:52px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:auto}
.spanel .go{display:flex;align-items:center;gap:10px;color:var(--gold-2);font-size:0.963rem;margin-top:28px;
opacity:0;transform:translateY(8px);transition:all .45s var(--ease)}
.spanel:hover .go{opacity:1;transform:none}
.hnav{margin:clamp(30px,4.5vh,52px) var(--pad) 0;display:flex;align-items:center;gap:22px}
.hbar{position:relative;flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:3px;touch-action:none}
.hbar::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px;cursor:pointer}
.hbar i{position:absolute;left:0;top:-1px;height:5px;width:18%;background:var(--gold);border-radius:5px;
cursor:grab;z-index:1;transition:height .25s var(--ease),top .25s var(--ease)}
.hbar i::after{content:"";position:absolute;left:-6px;right:-6px;top:-14px;bottom:-14px}
.hbar:hover i,.hbar.drag i{height:9px;top:-3px}
.hbar.drag i{cursor:grabbing}
.harrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff;
display:flex;align-items:center;justify-content:center;flex:0 0 44px;transition:background .3s var(--ease),border-color .3s,opacity .3s}
.harrow:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.45)}
.harrow[disabled]{opacity:.28;cursor:default}
.hhint{font-size:0.835rem;letter-spacing:.18em;text-transform:uppercase;color:#7C93AE;white-space:nowrap}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,2.8vw,38px)}
.spot{position:relative;border:1px solid var(--line);border-radius:6px;padding:clamp(36px,4.4vw,68px);overflow:hidden;background:var(--surface);
transition:border-color .4s}
.spot::before{content:"";position:absolute;width:520px;height:520px;left:var(--mx,50%);top:var(--my,50%);
transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .45s;
background:radial-gradient(circle,rgba(11,90,117,.10),transparent 60%)}
.spot:hover::before{opacity:1}
.spot:hover{border-color:var(--line-2)}
.spot>*{position:relative}
.spot h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:400;color:var(--head)}
.spot .sub{color:var(--muted);margin:10px 0 32px;font-size:1.134rem}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.tag{font-size:0.92rem;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--head)}
.spot ul{list-style:none;border-top:1px solid var(--line)}
.spot li{padding:17px 0;border-bottom:1px solid var(--line);font-size:1.102rem;color:var(--muted);display:flex;gap:16px}
.spot li em{font-style:normal;color:var(--gold);font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:700;font-size:0.706rem;padding-top:4px;letter-spacing:.12em}
.stack{position:relative}
.stack .card{position:sticky;border:1px solid var(--line);background:var(--surface);border-radius:6px;
padding:clamp(30px,4vw,58px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,60px);align-items:start;
box-shadow:0 -18px 50px -40px var(--shadow)}
.stack .card .k{font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(2rem,4vw,3.4rem);color:var(--gold);line-height:1}
.stack .card h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(1.6rem,2.8vw,2.4rem);color:var(--head);margin-bottom:12px}
.stack .card p{color:var(--muted);font-size:1.091rem}
.cwrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start}
.coord{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}
.coord:first-of-type{border-top:1px solid var(--line)}
.coord .ci{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.coord small{display:block;font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.663rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;font-weight:700}
.coord a,.coord i{font-style:normal;color:var(--head);font-size:1.124rem;font-weight:400;word-break:break-word;position:relative}
.coord a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--head);transition:width .4s var(--ease)}
.coord a:hover::after{width:100%}
form{display:grid;gap:0}
.fld{position:relative;border-bottom:1px solid var(--line);padding-top:26px}
.fld input,.fld textarea,.fld select{width:100%;border:0;background:transparent;padding:10px 0 14px;font:inherit;
font-size:1.091rem;color:var(--head);outline:none;resize:none}
.fld textarea{min-height:120px}
.fld label{position:absolute;left:0;top:30px;color:var(--muted);font-size:1.091rem;pointer-events:none;
transform-origin:0 0;transition:transform .4s var(--ease),color .3s}
.fld.up label{transform:translateY(-26px) scale(.7);color:var(--accent)}
.fld .bar{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--head);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.fld.focus .bar{transform:scaleX(1)}
.fld.err{border-color:#C2452F}
.fld .msg{display:none;color:#C2452F;font-size:0.835rem;padding-bottom:7px}
.fld.err .msg{display:block}
.fld select{appearance:none;cursor:pointer;color:var(--head);background:transparent}
.fld select option{background:var(--surface);color:var(--head)}
.fld.sel::after{content:"";position:absolute;right:2px;top:42px;width:7px;height:7px;border-right:1.4px solid var(--muted);border-bottom:1.4px solid var(--muted);transform:rotate(45deg)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px)}
.fnote{font-size:0.877rem;color:var(--muted);margin-top:18px}
.sent{display:none;margin-top:22px;padding:20px 24px;border:1px solid var(--ok-bd);background:var(--ok-bg);border-radius:5px;color:var(--ok-fg);font-size:1.016rem}
.sent.on{display:block;animation:pop .6s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
footer{background:var(--foot-bg);color:#B9C8DA;padding:clamp(70px,10vh,130px) 0 34px;overflow:hidden}
.fbig{font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:clamp(2.6rem,10vw,9rem);color:#fff;line-height:.92;letter-spacing:-.02em}
.fbig em{font-style:italic;color:var(--gold-2)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;margin-top:clamp(50px,8vh,90px);padding-top:44px;border-top:1px solid rgba(255,255,255,.13)}
.fgrid h3{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.663rem;letter-spacing:.3em;text-transform:uppercase;color:#8AA1BC;font-weight:700;margin-bottom:16px}
.fgrid a{display:block;padding:5px 0;color:#D3DEEA;font-size:1.016rem;transition:color .3s,transform .4s var(--ease)}
.fgrid a:hover{color:#fff;transform:translateX(5px)}
.flogo{display:inline-block}
.flogo img{height:52px;width:auto}
.fsign{margin-top:18px;font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.663rem;letter-spacing:.28em;text-transform:uppercase;color:#8AA1BC;line-height:2}
.flegal{display:flex;gap:10px;align-items:center}
.flegal a{padding:0;color:#8FA5BF}
.flegal a:hover{color:#fff}
.flegal i{font-style:normal;opacity:.5}
.fbot{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:0.877rem;color:#7E96B3}
.totop{display:inline-flex;align-items:center;gap:9px;color:#fff}
@media (max-width:1080px){
.nav-mid,.tel{display:none}
.burger{display:flex}
.hero-grid,.pres,.two,.cwrap,.fgrid{grid-template-columns:1fr}
.pres-sticky{position:static}
#psCanvas{width:100%;opacity:.6!important}
.hero{align-items:center;padding-top:130px}
.hero-side{margin-top:44px}
.fgrid{gap:34px}
}
@media (max-width:1080px){
.hpin .htop{flex-direction:column;align-items:flex-start;gap:14px}
.hpin .htop p{text-align:left;max-width:46ch}
}
@media (max-width:720px){
.hpin .htop p{display:none}
.hero h1 .ln>i.lockup{font-size:.42em;line-height:1.1;margin-top:-.10em}
.mono{letter-spacing:.22em;font-size:0.642rem}
.hero-sub{gap:8px 16px}
.nav-right .mag{display:none}
.nav-in{height:80px}
.logo img{height:42px;width:auto}
body{font-size:16.5px}
h1{font-size:clamp(2.9rem,15vw,4.6rem)}
.grid2,.chips{grid-template-columns:1fr}
.chips div:nth-child(odd){padding-right:0;border-right:0}
.chips div:nth-child(even){padding-left:0}
.hero-cta{width:100%}
.hero-cta .mag,.hero-cta .btn{width:100%;justify-content:center}
.spanel{flex:0 0 82vw;min-height:clamp(340px,52vh,460px)}
.hnav{gap:14px}
.hhint{display:none}
.stack .card{grid-template-columns:1fr;gap:14px}
.scrollcue{display:none}
.marq-t span{font-size:1.2rem;gap:28px}
}
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition-duration:.01ms!important}
.rev .w>i,.hero h1 .ln>i{transform:none!important}
.fade{opacity:1!important;transform:none!important}
}

/* ================= PAGES INTERIEURES ================= */
.phero{position:relative;padding:clamp(140px,18vh,210px) 0 clamp(50px,8vh,90px);overflow:hidden}
.phero .wrap{position:relative;z-index:2}
.phero .mono{color:var(--accent);margin-bottom:20px}
.phero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.04;max-width:16ch;margin-bottom:22px}
.phero .lead{font-size:clamp(1.06rem,1.6vw,1.32rem);color:var(--muted);max-width:56ch}
.phero .pcta{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap}
.pmark{position:absolute;right:calc(var(--pad) - 20px);top:50%;transform:translateY(-45%);width:min(360px,32vw);opacity:.09;pointer-events:none}
[data-theme="dark"] .pmark{opacity:.13}
.pcurve{position:absolute;inset:0;pointer-events:none;z-index:1}
.crumb{display:flex;gap:10px;align-items:center;font-size:0.835rem;color:var(--muted);margin-bottom:26px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.crumb span{opacity:.5}

.deliv{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,4vw,64px);margin-top:14px;border-top:1px solid var(--line)}
.deliv div{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.07rem;color:var(--ink);align-items:flex-start}
.deliv svg{flex:0 0 16px;margin-top:5px;color:var(--accent)}
@media (max-width:820px){.deliv{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:16px}
.steps div{background:var(--surface);padding:clamp(24px,2.6vw,36px)}
.steps .k{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.706rem;font-weight:700;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:16px}
.steps h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:1.5rem;color:var(--head);margin-bottom:10px;line-height:1.15}
.steps p{font-size:1.016rem;color:var(--muted);margin:0}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

.zero{position:relative;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  background:var(--surface);padding:clamp(30px,4vw,52px);margin-top:16px;overflow:hidden}
.zero h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--head);margin-bottom:14px}
.zero p{color:var(--muted);max-width:64ch}
.zerolist{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border-top:1px solid var(--line)}
.zerolist div{padding:20px 24px 20px 0;border-bottom:1px solid var(--line)}
.zerolist b{display:block;font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:1.7rem;color:var(--gold);line-height:1.1;margin-bottom:6px}
.zerolist span{font-size:0.995rem;color:var(--muted)}
@media (max-width:820px){.zerolist{grid-template-columns:1fr}}

.works{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:16px}
.work{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:clamp(28px,3.2vw,46px);
  display:flex;flex-direction:column;gap:14px;transition:border-color .4s var(--ease),transform .4s var(--ease)}
.work:hover{border-color:var(--line-2);transform:translateY(-3px)}
.work .wtop{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.work .wsec{font-size:0.663rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.work h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--head)}
.work p{font-size:1.049rem;color:var(--muted);margin:0}
.work .wtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.work .wtags span{font-size:0.813rem;padding:5px 12px;border:1px solid var(--line);border-radius:999px;color:var(--head)}
.work .wgo{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-size:0.963rem}
.work .wgo svg{transition:transform .4s var(--ease)}
.work:hover .wgo svg{transform:translateX(4px)}
.work.soon{opacity:.72}
.work.soon .wgo{color:var(--muted)}
@media (max-width:820px){.works{grid-template-columns:1fr}}

.faq{margin-top:16px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-size:1.134rem;color:var(--head);font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:29px;width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 0 24px;color:var(--muted);max-width:70ch}

.pnav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:16px}
.pnav a{border:1px solid var(--line);border-radius:6px;padding:clamp(22px,2.6vw,34px);background:var(--surface);transition:border-color .4s,transform .4s var(--ease)}
.pnav a:hover{border-color:var(--line-2);transform:translateY(-3px)}
.pnav small{display:block;font-size:0.663rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pnav b{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:1.5rem;color:var(--head)}
@media (max-width:720px){.pnav{grid-template-columns:1fr}}

.cta-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.cta-band .wrap{padding-top:clamp(56px,8vh,90px);padding-bottom:clamp(56px,8vh,90px);display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:20ch}
.cta-band p{color:var(--muted);margin-top:10px;max-width:46ch}

/* menu deroulant services */
.ddwrap{position:relative;padding-bottom:16px;margin-bottom:-16px}
.dd{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:300px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease) .22s,transform .26s var(--ease) .22s;box-shadow:0 24px 50px -30px var(--shadow)}
.dd::before{content:"";position:absolute;left:-14px;right:-14px;top:-22px;height:24px}
.ddwrap:hover .dd,.ddwrap:focus-within .dd,.ddwrap.open .dd{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);transition-delay:0s}
.dd a{display:block;padding:11px 14px;border-radius:6px;font-size:0.984rem;color:var(--head);white-space:nowrap}
.dd a:hover{background:var(--bg)}
.dd a small{display:block;font-size:0.813rem;color:var(--muted);margin-top:2px}
nav.zdark .dd{background:#0C1728;border-color:rgba(255,255,255,.12)}
nav.zdark .dd a{color:#EEF3F9}
nav.zdark .dd a:hover{background:rgba(255,255,255,.06)}
.nav-mid a.cur{color:var(--accent)}
@media (max-width:1080px){.dd{display:none}}

/* ================= PAGES LEGALES ================= */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:46px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:14px;color:var(--muted);max-width:74ch}
.legal p strong{color:var(--head);font-weight:400}
.legal ul{list-style:none;margin:0 0 16px}
.legal li{padding:8px 0 8px 24px;position:relative;color:var(--muted)}
.legal li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--gold)}
.infolist{border-top:1px solid var(--line);margin:6px 0 22px;max-width:70ch}
.infolist div{display:grid;grid-template-columns:220px 1fr;gap:10px 24px;padding:15px 0;border-bottom:1px solid var(--line)}
.infolist dt,.infolist b{font-size:0.728rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.infolist span{color:var(--head)}
@media (max-width:720px){.infolist div{grid-template-columns:1fr;gap:2px}}
.maj{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:0.92rem;color:var(--muted)}

/* ================= APERCUS DES SITES ================= */
.work{padding:0;overflow:hidden}
.wshot{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,var(--bg) 0%,var(--surface) 60%,var(--bg) 100%);
  border-bottom:1px solid var(--line);overflow:hidden}
.wchrome{position:absolute;top:0;left:0;right:0;height:26px;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:5px;padding:0 10px;z-index:3}
.wchrome i{width:6px;height:6px;border-radius:50%;background:var(--line-2);display:block}
.wchrome b{font-weight:400;font-size:0.663rem;letter-spacing:.06em;color:var(--muted);margin-left:8px;
  background:var(--bg);border-radius:20px;padding:2px 12px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wshot picture{display:contents}
.wshot img{position:absolute;top:26px;left:0;width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease);display:block}
.work:hover .wshot img{transform:scale(1.035)}
.wfall{position:absolute;top:26px;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:'Amiri',Georgia,'Times New Roman',serif;font-size:1.35rem;color:var(--head);opacity:.5;letter-spacing:.02em;z-index:1}
.wfall small{font-family:'Lato',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:0.706rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.wbody{padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:13px;flex:1}
.work .wact{font-size:1.016rem}
.work .wact b,.work .wdid b{color:var(--head);font-weight:700;font-size:0.749rem;letter-spacing:.14em;text-transform:uppercase;
  display:block;margin-bottom:5px}
.work .wdid{font-size:1.016rem;color:var(--muted)}
.wsoon{position:absolute;inset:26px 0 0;display:flex;align-items:center;justify-content:center;z-index:2;
  background:var(--surface);font-size:0.77rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* rappel des autres activites */
.other{margin-top:clamp(40px,6vh,70px);border-top:1px solid var(--line);padding-top:clamp(30px,4vh,44px)}
.other .olead{font-size:1.049rem;color:var(--muted);max-width:62ch;margin-bottom:22px}
.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ogrid a{border:1px solid var(--line);border-radius:6px;padding:18px 20px;background:var(--surface);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.ogrid a:hover{border-color:var(--line-2);transform:translateY(-2px)}
.ogrid b{display:block;font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;font-size:1.12rem;color:var(--head);margin-bottom:5px}
.ogrid span{font-size:0.899rem;color:var(--muted)}
@media (max-width:900px){.ogrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ogrid{grid-template-columns:1fr}}

/* halo discret sur les cartes des pages interieures */
.glow{position:relative;overflow:hidden}
.glow::before{content:"";position:absolute;width:420px;height:420px;left:var(--mx,50%);top:var(--my,50%);
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(11,90,117,.09),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:0}
.glow:hover::before{opacity:1}
[data-theme="dark"] .glow::before{background:radial-gradient(circle,rgba(116,206,232,.10),transparent 62%)}
.glow > *{position:relative;z-index:1}
/* monogramme interactif dans les heros de pages */
.phero #psCanvas{width:48%;right:2%}
@media (max-width:900px){.phero #psCanvas{width:70%;opacity:.5!important}}
.wbadge{position:absolute;top:38px;left:12px;z-index:3;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;font-size:0.728rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.monosrc{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}

/* lien d'evitement clavier */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-size:.9rem;font-weight:700;text-decoration:none;letter-spacing:.04em}
.skip:focus{left:0}

/* bouton d'appel flottant, mobile uniquement */
.callfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;
display:none;align-items:center;gap:9px;padding:13px 20px;border-radius:40px;
background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:700;
font-size:.95rem;letter-spacing:.01em;box-shadow:0 12px 34px var(--shadow);
border:1px solid var(--glass-line)}
.callfab svg{flex:0 0 auto}
@media (max-width:720px){.callfab{display:flex}}
.sheet.on ~ .callfab{display:none}

/* temoignages clients */
.testi{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.quote{border:1px solid var(--line);border-radius:2px;padding:clamp(26px,3vw,38px);
background:var(--surface);position:relative;display:flex;flex-direction:column;gap:20px}
.quote::before{content:"";position:absolute;left:0;top:0;width:2px;height:46px;background:var(--gold)}
.quote blockquote{font-family:'Amiri',Georgia,serif;font-size:clamp(1.12rem,1.5vw,1.34rem);
line-height:1.62;color:var(--head);margin:0}
.quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.quote cite{font-style:normal;font-weight:700;color:var(--head);font-size:.98rem}
.quote small{font-size:0.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* lisibilite du monogramme sur petit ecran : il reste une texture, jamais un obstacle */
@media (max-width:760px){
  #psCanvas{opacity:.20!important}
  .phero #psCanvas{opacity:.18!important;width:74%!important;right:-6%}
}

/* titre lu par les lecteurs d'ecran, invisible a l'ecran */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* cas concrets de la page Tarifs */
.cas{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:clamp(28px,4vh,46px)}
.cas article{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:13px;
background:var(--surface);border:1px solid var(--line);border-radius:4px;
padding:clamp(24px,2.6vw,34px)}
.cas article::before{content:"";position:absolute;left:0;top:0;width:3px;height:64px;
background:linear-gradient(var(--gold),transparent)}
.cas .lab{font-size:0.663rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cas h3{font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;
font-size:clamp(1.3rem,2vw,1.72rem);color:var(--head);line-height:1.24}
.cas p{color:var(--muted);font-size:1.02rem;margin:0}
.cas .mode{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
color:var(--head);font-size:.95rem}

/* ---------- CONSENTEMENT COOKIES ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:9000;
padding:18px var(--pad) calc(18px + env(safe-area-inset-bottom));
background:var(--surface);border-top:1px solid var(--line);
box-shadow:0 -18px 44px var(--shadow);
transform:translateY(102%);transition:transform .5s var(--ease),background-color .55s var(--ease),border-color .55s var(--ease)}
.ck.on{transform:none}
.ck-in{width:100%;max-width:var(--max);margin:0 auto;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.ck-tx{flex:1 1 400px;min-width:250px;font-size:.93rem;line-height:1.66;color:var(--ink)}
.ck-tx b{display:block;font-family:'Amiri',Georgia,'Times New Roman',serif;font-weight:400;
font-size:1.1rem;line-height:1.3;color:var(--head);margin-bottom:5px}
.ck-tx a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ck-tx a:hover{color:var(--head)}
.ck-bt{display:flex;gap:11px;flex-wrap:wrap}
.ck-bt button{font-size:.88rem;letter-spacing:.015em;padding:13px 24px;border-radius:2px;
border:1px solid var(--line-2);background:none;color:var(--head);
transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.ck-bt button:hover{border-color:var(--head)}
.ck-bt .ck-ok{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.ck-bt .ck-ok:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:#fff}
.ck-bt button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:620px){.ck{padding-top:16px}.ck-in{gap:15px}.ck-bt{width:100%}
.ck-bt button{flex:1 1 130px;text-align:center;padding:13px 14px}}
@media(prefers-reduced-motion:reduce){.ck{transition:none}}
/* le bandeau s'efface quand le menu plein ecran est ouvert (menu : z-index 880) */
body.lock .ck{transform:translateY(102%)}
/* et il ne doit pas recouvrir le bouton d'appel flottant sous 720px */
body.ck-on .callfab{display:none}
.ckmaj{text-align:left;text-decoration:underline;text-underline-offset:3px;font:inherit;color:inherit}

/* ---------- JUSTIFICATION DES TEXTES LONGS ----------
   Les pages contractuelles et les guides se lisent comme des documents : texte
   justifie. La cesure automatique est indispensable, sinon une colonne de 74ch
   justifiee creuse des rivieres blanches, et pire encore sur mobile. `lang="fr"`
   est deja pose sur <html>, la cesure suit donc les regles francaises.
   Les titres, chapeaux, listes courtes et elements d'interface restent en drapeau. */
.legal p,.legal li{
text-align:justify;text-justify:inter-word;
-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;
text-wrap:pretty}
/* un mot trop long ne doit jamais deborder faute de point de cesure */
.legal p,.legal li{overflow-wrap:break-word}
/* Mesure faite sur le site en ligne : hyphens:auto ne produit AUCUNE cesure, meme
   avec lang="fr" (32 lignes avec et sans, colonne de 335 px). Le dictionnaire de
   cesure francais n'est pas charge par le moteur de rendu. Justifier une colonne de
   cette largeur sans cesure etire les blancs a chaque ligne : sous 560 px, le texte
   repasse donc en drapeau, qui se lit mieux. La cesure reste demandee au cas ou un
   navigateur la fournisse, elle ne fait alors que du bien. */
@media (max-width:560px){.legal p,.legal li{text-align:left}}
/* le formulaire type de retractation en annexe garde ses lignes pointillees a gauche */
.legal .notbox p{text-align:left;hyphens:manual}

/* ---------- GUIDES : MEME TRAITEMENT QUE LES PAGES CONTRACTUELLES ----------
   Mesure faite au rendu : les paragraphes de corps des guides s'etalaient sur 960 px,
   soit environ 112 caracteres par ligne, la ou les pages contractuelles sont bridees a
   74ch (~87 caracteres). Au-dela de 75 caracteres l'oeil perd la ligne en revenant a la
   gauche du bloc. La largeur est donc ramenee au meme calibre, et le texte justifie
   comme sur les CGV. Les chapeaux, les cartes courtes et les libelles restent intacts. */
.doc .sec .wrap > p:not(.lead):not(.mono),
.doc .faq p{
max-width:74ch;
text-align:justify;text-justify:inter-word;
-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;
text-wrap:pretty;overflow-wrap:break-word}
/* Les encadres .notbox n'avaient AUCUNE limite de largeur : mesure au rendu, 1233 px,
   soit 143 caracteres par ligne, contre 87 sur les pages contractuelles. Au-dela de 75
   l'oeil rate la ligne suivante en revenant a la gauche du bloc. Le defaut touchait les
   guides, la page Tarifs et toute page utilisant cet encadre : la largeur est bridee
   partout, independamment de la justification. */
/* Le cadre lui-meme est bride, sinon le texte se retrouve tasse a gauche d'un
   encadre pleine largeur, ce qui deséquilibre le bloc. */
.notbox{max-width:80ch}
.notbox p{max-width:none}
/* justifie seulement sur les pages qui se lisent comme des documents */
.doc .notbox p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty}
@media (max-width:560px){.doc .notbox p{text-align:left}}

/* meme seuil que les pages contractuelles : sans cesure disponible, une colonne
   etroite justifiee etire les blancs */
@media (max-width:560px){.doc .sec .wrap > p:not(.lead):not(.mono),.doc .faq p{text-align:left}}