/* =================================================================
SMOW STUDIO — Design System
Tokens, base, layout, components.
================================================================= */
:root {
/* Refonte "Studio Console" — palette sombre premium (tokens re-mappés) */
--black:#09090a; --ink:#0e0e10; --deep:#141418;
--card:#141418; --card-hi:#1b1b20;
--border:#1c1c22; --border-hi:#2c2c34;
--white:#f3f1ea; --off:#b9b6ad; --gray:#8c887f; --dim:#5c5953;
--success:#3ddc97; --danger:#ff4d4d;
--accent:#FFE000; --accent-rgb:255,224,0;
--accent-dim:#b89e00; --accent-ink:#0a0a0b;
--violet:124,92,255;
--font-display:'Anton','Oswald',sans-serif;
--font-body:'Hanken Grotesk','Helvetica Neue',sans-serif;
--font-mono:'JetBrains Mono','Space Mono',monospace;
--ease:cubic-bezier(.16,1,.3,1);
}
body[data-accent="yellow"] { --accent:#FFE000; --accent-rgb:255,224,0; --accent-dim:#b89e00; --accent-ink:#0a0a0b; }
body[data-accent="red"] { --accent:#FF3B30; --accent-rgb:255,59,48; --accent-dim:#a3261d; --accent-ink:#f1efe9; }
body[data-accent="cyan"] { --accent:#5BE7FF; --accent-rgb:91,231,255; --accent-dim:#3aa3b8; --accent-ink:#050505; }
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
background:var(--black); color:var(--white);
font-family:var(--font-body); font-size:17px; line-height:1.55;
overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
button,input,select,textarea { font:inherit; color:inherit; }
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Grain (au-dessus) + fond d'ambiance "Studio Console" (derrière le contenu) */
body::before {
content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
background-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity:.045; mix-blend-mode:overlay;
}
/* Halos jaune/violet + grille studio, fixes, en arrière-plan (z-index:-1) */
body::after {
content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
background:
radial-gradient(50% 42% at 88% -4%, rgba(var(--accent-rgb),.06), transparent 60%),
radial-gradient(46% 40% at 3% 8%, rgba(var(--violet),.07), transparent 62%),
radial-gradient(60% 50% at 50% 112%, rgba(var(--violet),.05), transparent 60%),
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:100% 100%,100% 100%,100% 100%,72px 72px,72px 72px;
}
/* SPA pages */
.page { display:none; min-height:100vh; }
.page.active { display:block; animation:pageIn .55s var(--ease); }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
/* =================== NAV =================== */
nav {
position:fixed; top:0; left:0; right:0; z-index:1000;
display:grid; grid-template-columns:auto 1fr auto; align-items:center;
padding:0 1.5rem 0 1.75rem; height:64px;
background:rgba(5,5,5,.78); border-bottom:1px solid var(--border);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.nav-logo {
font-family:var(--font-display); font-size:1.55rem;
color:var(--accent); letter-spacing:.12em; cursor:pointer;
display:flex; align-items:center; gap:.6rem; background:none; border:none;
}
.nav-logo .dot {
width:6px; height:6px; background:var(--accent); border-radius:50%;
box-shadow:0 0 12px rgba(var(--accent-rgb),.7);
animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.7)} }
.nav-links { display:flex; justify-content:center; gap:0; list-style:none; }
.nav-links a {
display:block; padding:.55rem 1rem;
font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
color:var(--off); text-decoration:none; position:relative; transition:color .2s;
}
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { color:var(--white); }
.nav-links a.active::before { content:''; position:absolute; top:50%; left:-2px; width:4px; height:4px; background:var(--accent); transform:translateY(-50%); }
.nav-links a.active::after { content:''; position:absolute; bottom:-1px; left:1rem; right:1rem; height:1px; background:var(--accent); }
.nav-cta { display:flex; align-items:center; gap:.9rem; font-family:var(--font-mono); font-size:.7rem; color:var(--off); letter-spacing:.12em; }
.nav-cta a { color:var(--off); text-decoration:none; transition:color .2s; }
.nav-cta a:hover { color:var(--accent); }
.nav-cta .sep { width:1px; height:14px; background:var(--border-hi); }
.nav-cta .live { display:inline-flex; align-items:center; gap:.4rem; font-size:.62rem; letter-spacing:.2em; color:var(--accent); }
.nav-cta .live::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 1.2s infinite; }
/* Refonte — nav épurée : on retire l'indicateur "EN SESSION" + le point du logo */
.nav-cta .live, .nav-cta .sep, .nav-logo .dot { display:none; }
.menu-toggle {
display:none; background:none; border:none; cursor:pointer;
padding:.6rem; width:44px; height:44px; align-items:center; justify-content:center;
flex-direction:column; gap:0;
}
.menu-toggle span {
display:block; width:22px; height:2px; background:var(--white); margin:3px 0;
transition:transform .3s var(--ease), opacity .2s, background .2s;
transform-origin:center;
}
/* Burger → X quand le menu est ouvert */
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(5px) rotate(45deg); background:var(--accent); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-5px) rotate(-45deg); background:var(--accent); }
/* =================== TYPO =================== */
.section-label, .kicker {
display:inline-flex; align-items:center; gap:.8rem;
font-family:var(--font-mono); font-size:.68rem; letter-spacing:.28em;
text-transform:uppercase; color:var(--accent);
}
.section-label::before, .kicker::before { content:''; width:24px; height:1px; background:var(--accent); }
.h-display {
font-family:var(--font-display); font-weight:400;
line-height:.86; letter-spacing:.01em; text-transform:uppercase; color:var(--white);
}
.h-display em { color:var(--accent); font-style:normal; }
.h-display .drip { display:inline-block; position:relative; }
.h-display .drip::after {
content:''; position:absolute; left:8%; right:8%; bottom:-.1em; height:4px;
background:var(--accent); transform:scaleX(0); transform-origin:left;
transition:transform .9s var(--ease) .2s;
}
.page.active .h-display .drip::after { transform:scaleX(1); }
.title-xl { font-size:clamp(3.5rem, 9vw, 8.5rem); }
.title-lg { font-size:clamp(2.75rem, 6.5vw, 5.5rem); }
.title-md { font-size:clamp(2rem, 4vw, 3.5rem); }
.mono { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gray); }
/* =================== BUTTONS =================== */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:.8rem;
padding:.95rem 1.7rem; font-family:var(--font-mono); font-size:.72rem; font-weight:700;
letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
cursor:pointer; border:none; position:relative; border-radius:50px;
transition:transform .25s var(--ease), background .25s, color .25s, border-color .25s, opacity .2s;
}
.btn:hover { transform:translateY(-2px); }
.btn::after { content:'→'; font-family:var(--font-mono); font-weight:400; letter-spacing:0; transition:transform .2s; }
.btn:hover::after { transform:translateX(4px); }
.btn-primary { background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover { background:var(--white); color:#050505; }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] {
background:var(--border); color:var(--dim); cursor:not-allowed; opacity:.6;
}
.btn-primary:disabled:hover, .btn-primary[aria-disabled="true"]:hover { background:var(--border); color:var(--dim); }
.btn-primary:disabled::after, .btn-primary[aria-disabled="true"]::after { transform:none; }
.btn-outline { background:transparent; color:var(--white); border:1px solid var(--border-hi); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-ghost { background:transparent; color:var(--off); padding:.5rem 0; font-size:.72rem; letter-spacing:.25em; }
.btn-ghost::after { content:'↗'; }
.btn-danger { background:transparent; color:var(--danger); border:1px solid rgba(255,77,77,.4); }
.btn-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-sm { padding:.55rem 1rem; font-size:.7rem; letter-spacing:.18em; }
.btn-icon { padding:.5rem .7rem; font-size:.75rem; letter-spacing:.05em; }
.btn-icon::after { display:none; }
/* ============================================================
REFONTE ACCUEIL — structure exacte de la maquette (scopé #page-home)
Classes service/stat renommées (hsvc/hstat) pour ne pas entrer en
conflit avec la réservation.
============================================================ */
#page-home .wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,3.5rem)}
#page-home .mono{font-family:var(--font-mono);font-weight:400;letter-spacing:.22em;text-transform:uppercase}
.hero-marquee{display:none!important} /* remplacé par le ticker in-page */
/* HERO */
#page-home .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:clamp(96px,12vh,120px) 0 clamp(5.5rem,13vh,9rem);overflow:hidden;background:var(--black)}
#page-home .hero::before,#page-home .hero::after{content:none}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.42) contrast(1.05)}
.hero-media::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 10%,rgba(var(--accent-rgb),.12),transparent 55%),radial-gradient(85% 80% at 8% 94%,rgba(var(--violet),.17),transparent 58%),linear-gradient(180deg,rgba(9,9,10,.5),rgba(9,9,10,.92))}
.hero-grid{position:absolute;inset:0;z-index:0;opacity:.4;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(130% 100% at 50% 35%,#000 35%,transparent 78%);mask-image:radial-gradient(130% 100% at 50% 35%,#000 35%,transparent 78%)}
#page-home .hero-in{position:relative;z-index:2;width:100%}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:clamp(1.2rem,3vw,2.4rem);color:var(--dim);font-size:.64rem}
.hero-top .r{text-align:right;color:var(--gray)}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem}
.kicker .bar{width:38px;height:1px;background:var(--accent)}
.hero-display{font-family:var(--font-display);font-weight:400;line-height:.86;letter-spacing:.005em;font-size:clamp(3.2rem,14vw,15rem);text-transform:uppercase;margin:0;color:var(--white)}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(110%);opacity:0}
#page-home .hero.in .line-mask>span{animation:lineUp 1s var(--ease) forwards}
#page-home .hero.in .line-mask:nth-child(1)>span{animation-delay:.15s}
#page-home .hero.in .line-mask:nth-child(2)>span{animation-delay:.28s}
#page-home .hero.in .line-mask:nth-child(3)>span{animation-delay:.41s}
@keyframes lineUp{to{transform:translateY(0);opacity:1}}
.hero-display .stroke{-webkit-text-stroke:1.5px var(--accent);-webkit-text-fill-color:transparent}
.hero-display .yellow{color:var(--accent)}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:clamp(1.6rem,4vw,3rem);margin-bottom:1.5rem}
.hero-sub{max-width:40ch;color:var(--off);font-size:clamp(.95rem,1.4vw,1.1rem);font-weight:400}
.hero-sub b{color:var(--white);font-weight:600}
.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.link-ghost{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);display:inline-flex;align-items:center;gap:.6rem;position:relative;background:none;border:none;cursor:pointer}
.link-ghost::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--border-hi);transform-origin:right;transition:transform .4s var(--ease)}
.link-ghost:hover::after{transform:scaleX(0)}
/* Boutons de l'accueil : fond jaune plein + flèche ↗ (pas de flèche auto) */
#page-home .btn{background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-weight:700;overflow:hidden}
#page-home .btn::after{content:none}
#page-home .btn .arr{position:relative;z-index:1;transition:transform .3s var(--ease)}
#page-home .btn:hover .arr{transform:translate(3px,-3px)}
#page-home .btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(101%);transition:transform .45s var(--ease);z-index:0}
#page-home .btn:hover::before{transform:translateY(0)}
#page-home .btn span{position:relative;z-index:1}
.eq{display:flex;align-items:flex-end;gap:4px;height:46px}
.eq i{width:4px;background:linear-gradient(var(--accent),var(--accent-dim));border-radius:3px;animation:eqb 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}.eq i:nth-child(5){animation-delay:.5s}.eq i:nth-child(6){animation-delay:.3s}.eq i:nth-child(7){animation-delay:.15s}
@keyframes eqb{0%,100%{height:18%}50%{height:100%}}
.scroll-hint{position:absolute;bottom:1.6rem;left:50%;translate:-50%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.28em;color:var(--gray);text-transform:uppercase}
.scroll-hint .l{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:scrolly 2s infinite}
@keyframes scrolly{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* TICKER */
#page-home .ticker{border-block:1px solid var(--border);background:var(--ink);overflow:hidden;padding:1.1rem 0;position:relative;z-index:3}
#page-home .ticker-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:marqH 32s linear infinite;font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
#page-home .ticker:hover .ticker-track{animation-play-state:paused}
#page-home .ticker-track span{display:inline-flex;align-items:center;gap:3rem}
#page-home .ticker-track em{color:var(--accent);font-style:normal}
#page-home .ticker-track .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
@keyframes marqH{to{transform:translateX(-50%)}}
/* SECTIONS */
#page-home .sec{padding-block:clamp(2.6rem,5.5vw,4.6rem)}
#page-home .sec-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(1.5rem,3.2vw,2.4rem);max-width:62ch}
#page-home .sec-idx{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;display:flex;gap:.8rem;align-items:center}
#page-home .sec-idx::before{content:"";width:26px;height:1px;background:var(--accent)}
#page-home .sec-title{font-family:var(--font-display);line-height:1.04;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5rem);letter-spacing:.01em;margin:0;color:var(--white)}
#page-home .sec-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--gray)}
/* REVEAL */
#page-home [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
#page-home [data-reveal].in{opacity:1;transform:none}
#page-home [data-reveal][data-delay="1"]{transition-delay:.08s}
#page-home [data-reveal][data-delay="2"]{transition-delay:.16s}
#page-home [data-reveal][data-delay="3"]{transition-delay:.24s}
/* ABOUT + STATS */
#page-home .split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
#page-home .split p{color:var(--off);font-weight:400;margin-bottom:1.1rem;font-size:1.02rem;line-height:1.6}
#page-home .split p strong{color:var(--white);font-weight:600}
.hstats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.hstat{background:var(--ink);padding:clamp(1.6rem,3vw,2.6rem);position:relative}
.hstat .n{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4.4rem);line-height:.9;color:var(--accent)}
.hstat .l{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:.9rem}
.hstat .c{position:absolute;top:1.1rem;right:1.2rem;font-family:var(--font-mono);font-size:.52rem;color:var(--gray)}
/* SERVICES */
.hsvc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.hsvc{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:clamp(340px,42vw,440px);padding:1.8rem;cursor:pointer;isolation:isolate;border:1px solid var(--border);border-radius:18px;text-align:left;color:inherit;font:inherit;background:var(--ink);transition:border-color .4s}
.hsvc:hover{border-color:var(--border-hi)}
.hsvc-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.5;filter:saturate(.85) brightness(.85);transition:transform .9s var(--ease),opacity .5s}
.hsvc:hover .hsvc-bg{transform:scale(1.06);opacity:.62}
.hsvc::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 72% at var(--tpos,68% 16%),var(--tint,transparent),transparent 62%),linear-gradient(180deg,rgba(5,5,6,.12) 0%,rgba(5,5,6,.5) 55%,rgba(5,5,6,.95) 100%)}
.hsvc-1{--tint:rgba(255,196,64,.34);--tpos:78% 16%}
.hsvc-2{--tint:rgba(150,110,255,.36);--tpos:24% 16%}
.hsvc-3{--tint:rgba(46,210,150,.32);--tpos:56% 24%}
.hsvc-idx{position:absolute;top:1.5rem;right:1.6rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.28em;color:var(--dim)}
.hsvc-name{font-family:var(--font-display);font-size:clamp(1.6rem,2.3vw,2.1rem);text-transform:uppercase;line-height:1;letter-spacing:.02em;color:var(--white)}
.hsvc-desc{color:var(--off);font-size:.86rem;font-weight:400;margin-top:.6rem;max-width:34ch;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hsvc-go{margin-top:1.2rem;display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--border-hi);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.hsvc-go .arr{transition:transform .35s var(--ease)}
.hsvc:hover .hsvc-go .arr{transform:translateX(5px)}
/* REEL */
.reel{border:1px solid var(--border);border-radius:22px;background:linear-gradient(130deg,var(--card),var(--ink));padding:clamp(1.8rem,4vw,3.2rem);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;position:relative;overflow:hidden}
.reel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0,rgba(var(--accent-rgb),.1),transparent 60%);pointer-events:none}
.reel-h{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);text-transform:uppercase;line-height:1.02;margin:0;color:var(--white)}
.reel p{color:var(--off);margin-top:1rem;font-weight:400;max-width:40ch}
.reel-play{margin-top:1.8rem;display:inline-flex;align-items:center;gap:1rem;cursor:pointer}
.reel-play .pbtn{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease);flex-shrink:0;font-size:1rem}
.reel-play:hover .pbtn{transform:scale(1.08)}
.reel-play .t{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.wave{display:flex;align-items:center;gap:3px;height:120px}
.wave i{flex:1;background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.25));border-radius:3px;height:20%;animation:wv 1.4s ease-in-out infinite}
@keyframes wv{0%,100%{height:15%;opacity:.5}50%{height:95%;opacity:1}}
/* PROCESS */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:step}
.step-b{border-top:1px solid var(--border-hi);padding-top:1.6rem;position:relative}
.step-b::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.6rem);color:transparent;-webkit-text-stroke:1px var(--gray);display:block;margin-bottom:1rem}
.step-b h3{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;color:var(--white)}
.step-b p{color:var(--off);font-size:.92rem;font-weight:400;margin-top:.7rem}
.step-b .mono{color:var(--accent);font-size:.56rem;margin-top:1.2rem;display:block;letter-spacing:.22em;text-transform:uppercase}
/* GALLERY */
.gal{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal figure{flex:0 0 clamp(240px,30%,360px);scroll-snap-align:center;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid var(--border);position:relative;margin:0;cursor:pointer;background:var(--card)}
.gal figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) brightness(.92) contrast(1.05);transition:transform .7s var(--ease),filter .5s}
.gal figure:hover img{transform:scale(1.06);filter:none}
.gal figure::after{content:"⤢";position:absolute;top:.8rem;right:.9rem;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:1px solid var(--border-hi);border-radius:50%;opacity:0;transition:.3s;color:#fff}
.gal figure:hover::after{opacity:1}
.gal-nav{display:flex;gap:.5rem;margin-top:1rem}
.gal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-hi);background:transparent;color:var(--white);cursor:pointer;font-size:1rem;transition:.25s}
.gal-nav button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* CTA / CONTACT */
.cta{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(150deg,#15150f,var(--ink));padding:clamp(2.6rem,7vw,6rem);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 0,rgba(var(--accent-rgb),.12),transparent 60%)}
.cta-h{position:relative;font-family:var(--font-display);font-size:clamp(2.6rem,8vw,7rem);text-transform:uppercase;line-height:.96;margin:0;color:var(--white)}
.cta-h em{font-style:normal;color:var(--accent)}
.cta p{position:relative;color:var(--off);margin:1.4rem auto 2.4rem;max-width:44ch;font-weight:400}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem;margin-top:2.6rem;position:relative;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.contact-row b{color:var(--white);font-weight:500}
.contact-row a{color:var(--dim)}.contact-row a:hover{color:var(--accent)}
/* LIGHTBOX */
.lb{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;background:rgba(5,5,6,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4vh 2vw}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-x{position:absolute;top:4vh;right:5vw;width:46px;height:46px;border-radius:50%;border:1px solid var(--border-hi);background:rgba(20,20,22,.7);color:#fff;cursor:pointer;font-size:1.2rem}
.lb-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid var(--border-hi);background:rgba(20,20,22,.7);color:#fff;cursor:pointer;font-size:1.3rem}
.lb-prev{left:3vw}.lb-next{right:3vw}
/* RESPONSIVE */
@media (max-width:860px){#page-home .split{grid-template-columns:1fr}.hsvc-grid{grid-template-columns:1fr}.hsvc{min-height:300px}}
@media (max-width:780px){.reel{grid-template-columns:1fr;gap:2rem}.wave{height:80px}.proc{grid-template-columns:1fr;gap:2rem}}
@media (max-width:600px){
.hero-top{flex-direction:column;align-items:flex-start;gap:.35rem}.hero-top .r{text-align:left}
.hero-actions{gap:1rem;flex-direction:column;align-items:flex-start}.hero-actions .eq{display:none}
.hero-display{font-size:clamp(2rem,10vw,3.4rem)}
.kicker{font-size:.56rem;letter-spacing:.14em}
#page-home .sec-title{font-size:clamp(1.6rem,7.6vw,2.9rem);overflow-wrap:break-word}
.cta-h{font-size:clamp(2rem,11vw,3.4rem)}
}
@media (max-height:720px){.scroll-hint{display:none}}
/* =================== HERO MARQUEE =================== */
.hero-marquee {
position:fixed; top:64px; left:0; right:0; height:28px; z-index:50;
display:flex; align-items:center; overflow:hidden;
background:var(--accent); color:var(--accent-ink);
border-bottom:1px solid var(--accent-dim);
}
/* Le track contient 2 demi-pistes identiques mises côte à côte. On translate
l'ensemble de -50 % : ça fait passer la 2e demi-piste exactement à la place
de la 1re, sans aucun saut de gap. Promotion GPU explicite via will-change
et translate3d (Z=0) pour 60 fps stable sur tous les navigateurs. */
.hero-marquee-track {
display:flex; flex-wrap:nowrap; white-space:nowrap;
font-family:var(--font-mono); font-size:.68rem; letter-spacing:.28em;
text-transform:uppercase; font-weight:700;
animation:marquee 45s linear infinite;
will-change:transform;
backface-visibility:hidden;
transform:translateZ(0); /* force la promotion en couche GPU */
}
.hero-marquee-half {
display:flex; gap:2.5rem; flex-shrink:0;
padding-right:2.5rem; /* espace identique au gap à la jonction des 2 demi-pistes */
}
.hero-marquee-half span::before { content:'✦'; margin-right:2.5rem; display:inline-block; }
@keyframes marquee {
from { transform:translate3d(0,0,0); }
to { transform:translate3d(-50%,0,0); }
}
/* Pause au survol (accessibilité + lisibilité) */
.hero-marquee:hover .hero-marquee-track { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) {
.hero-marquee-track { animation:none; }
}
/* =================== HERO =================== */
.hero {
min-height:100vh; min-height:100dvh; position:relative; overflow:hidden;
padding:116px 1.75rem 2rem; display:grid; place-items:center; text-align:center;
}
.hero::before {
content:'SMOW'; position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
font-family:var(--font-display); font-size:32vw;
color:rgba(var(--accent-rgb),.025); letter-spacing:-.04em;
white-space:nowrap; z-index:0; pointer-events:none;
}
.hero-stage { display:flex; flex-direction:column; align-items:center; gap:2rem; position:relative; z-index:2; }
/* Titre d'accroche du hero (remplace l'ancien logo animé) */
.hero-lead {
margin:0; text-align:center; color:var(--white);
font-family:var(--font-display); font-weight:700; text-transform:uppercase;
font-size:clamp(2.6rem,7vw,5.5rem); line-height:1.02; letter-spacing:.02em;
text-shadow:0 6px 30px rgba(0,0,0,.55);
animation:fadeUp .9s .15s var(--ease) both;
}
.hero-lead span {
display:block; margin-top:.9rem;
font-family:var(--font-mono); font-weight:400; text-transform:uppercase;
font-size:clamp(.68rem,1.4vw,.95rem); letter-spacing:.3em; color:var(--accent);
}
.hero-tagline {
font-size:clamp(.95rem,1.6vw,1.1rem); font-weight:300;
letter-spacing:.35em; text-transform:uppercase; color:var(--off);
animation:fadeUp .9s .35s var(--ease) both;
}
.hero-tagline span { color:var(--accent); font-weight:600; }
.hero-cta { display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; animation:fadeUp .9s .55s var(--ease) both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.hero-scroll {
position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%);
display:flex; flex-direction:column; align-items:center; gap:.5rem;
font-family:var(--font-mono); font-size:.58rem; letter-spacing:.3em;
color:var(--gray); text-transform:uppercase; z-index:4;
}
.hero-scroll .line { width:1px; height:36px; background:linear-gradient(to bottom,var(--accent),transparent); }
/* =================== SECTIONS =================== */
.section { padding:6rem 1.75rem; position:relative; border-top:1px solid var(--border); }
.section-head { display:flex; flex-direction:column; gap:1rem; margin-bottom:3rem; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.about-text { font-size:1.05rem; color:var(--off); font-weight:300; line-height:1.7; max-width:60ch; }
.about-text p + p { margin-top:1.1rem; }
.about-text strong { color:var(--white); font-weight:600; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.stat {
background:var(--ink); padding:1.75rem 1.5rem;
display:flex; flex-direction:column; gap:.3rem; position:relative;
transition:background .2s;
}
.stat:hover { background:var(--card); }
.stat .num { font-family:var(--font-display); font-size:3rem; color:var(--accent); line-height:1; letter-spacing:.02em; }
.stat .lab { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); }
.stat .idx { position:absolute; top:.8rem; right:1rem; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em; color:var(--dim); }
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
/* Cartes services — image plein cadre + dégradé sombre (cf. maquette), en
format compact 3 colonnes. Image via --svc-img (inline style) ; overlay
via ::after ; contenu au-dessus (z-index 2). */
.service {
position:relative; overflow:hidden; display:block; width:100%;
min-height:300px; padding:0; cursor:pointer; text-align:left;
color:inherit; font:inherit; background:var(--ink);
border:1px solid var(--border);
}
.service::before {
content:''; position:absolute; inset:0; z-index:0;
background-image:var(--svc-img); background-size:cover; background-position:center;
opacity:.5; filter:saturate(.85) brightness(.85);
transition:transform .6s var(--ease), opacity .5s;
}
.service::after {
content:''; position:absolute; inset:0; z-index:1;
background:
radial-gradient(90% 72% at var(--tpos,68% 16%), var(--tint,transparent), transparent 62%),
linear-gradient(180deg, rgba(8,8,8,.12) 0%, rgba(8,8,8,.5) 55%, rgba(8,8,8,.95) 100%);
}
.service:hover::before, .service:focus-visible::before { transform:scale(1.05); opacity:.62; }
.service:hover, .service:focus-visible { border-color:var(--border-hi); }
/* Teinte de couleur par service (ambre / violet / vert) */
.services .service:nth-of-type(1){--tint:rgba(255,196,64,.34);--tpos:78% 16%}
.services .service:nth-of-type(2){--tint:rgba(150,110,255,.36);--tpos:24% 16%}
.services .service:nth-of-type(3){--tint:rgba(46,210,150,.32);--tpos:56% 24%}
.service-idx {
position:absolute; top:1.25rem; right:1.35rem; z-index:2;
font-family:var(--font-mono); font-size:.6rem; letter-spacing:.26em; color:var(--off); opacity:.75;
}
.service-body {
position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; z-index:2;
display:flex; flex-direction:column; gap:.6rem;
}
.service-name {
font-family:var(--font-display); text-transform:uppercase;
font-size:clamp(1.55rem,2vw,2rem); letter-spacing:.03em; color:var(--white); line-height:1;
}
.service-desc {
font-size:.86rem; color:var(--off); font-weight:300; line-height:1.45;
display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.service-link {
display:flex; align-items:center; justify-content:space-between; gap:1rem;
margin-top:.5rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.16);
font-family:var(--font-mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
}
.service-link .arrow { font-size:1.15rem; letter-spacing:0; transition:transform .3s var(--ease); }
.service:hover .service-link .arrow, .service:focus-visible .service-link .arrow { transform:translateX(6px); }
.location { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); }
.location > div { padding:2.5rem; }
.location-info { background:var(--ink); display:flex; flex-direction:column; gap:1.25rem; justify-content:center; }
.location-info .addr { font-family:var(--font-mono); font-size:.82rem; color:var(--off); line-height:2; letter-spacing:.05em; }
.location-info .addr strong { display:block; color:var(--accent); font-size:.92rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:.4rem; font-family:var(--font-display); font-weight:400; }
.location-map {
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 24px),
repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 24px),
var(--ink);
display:flex; align-items:center; justify-content:center;
min-height:320px; position:relative; border-left:1px solid var(--border); overflow:hidden;
}
.location-map::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.08), transparent 40%); }
.map-pin { position:relative; display:flex; flex-direction:column; align-items:center; gap:1rem; z-index:2; }
.map-pin .ring { width:80px; height:80px; border:1px solid var(--accent); border-radius:50%; position:relative; display:flex; align-items:center; justify-content:center; animation:ringPulse 2s infinite; }
.map-pin .ring::before { content:''; position:absolute; inset:-1px; border:1px solid var(--accent); border-radius:50%; opacity:.4; animation:ringExpand 2s infinite; }
.map-pin .ring::after { content:''; width:14px; height:14px; background:var(--accent); border-radius:50%; box-shadow:0 0 20px rgba(var(--accent-rgb),.6); }
@keyframes ringPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes ringExpand { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2.2);opacity:0} }
.map-pin .label { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--off); text-align:center; line-height:1.6; }
.map-coords { position:absolute; bottom:1rem; left:1rem; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em; color:var(--dim); }
/* =================== PAGE HEADER =================== */
.page-header {
padding:6.5rem 1.75rem 3.5rem; position:relative;
border-bottom:1px solid var(--border); overflow:hidden;
margin-top:28px;
}
.page-header::before {
content:attr(data-bg); position:absolute; bottom:-2rem; right:1rem;
font-family:var(--font-display); font-size:clamp(10rem,22vw,22rem);
color:rgba(var(--accent-rgb),.035); white-space:nowrap;
line-height:.85; letter-spacing:-.03em; pointer-events:none;
}
.page-header-inner { position:relative; z-index:1; max-width:1100px; }
.page-header h1 {
font-family:var(--font-display); font-size:clamp(4rem,11vw,9.5rem);
line-height:.9; text-transform:uppercase; letter-spacing:.01em;
color:var(--white); margin:1.75rem 0 1.5rem; padding-top:.25em;
}
.page-header h1 .em { color:var(--accent); }
.page-header .desc { font-size:1.08rem; color:var(--off); font-weight:300; max-width:56ch; line-height:1.6; }
.crumbs { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:var(--gray); display:flex; gap:.6rem; align-items:center; }
.crumbs span { color:var(--accent); }
/* =================== PRICING =================== */
.pricing-section { padding:4rem 1.75rem; }
.pricing-intro { font-size:1.05rem; color:var(--off); font-weight:300; max-width:56ch; line-height:1.7; border-left:2px solid var(--accent); padding-left:1.5rem; margin-bottom:3.5rem; }
.pricing { display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
.price-row {
background:var(--ink); padding:2rem 2.25rem;
display:grid; grid-template-columns:60px 1fr auto; gap:1.75rem; align-items:center;
position:relative; transition:background .2s;
}
.price-row:hover { background:var(--card-hi); }
.price-row::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .3s; }
.price-row:hover::before { transform:scaleY(1); }
.price-row .idx { font-family:var(--font-display); font-size:2.5rem; color:rgba(var(--accent-rgb),.25); line-height:1; letter-spacing:.02em; }
.price-row .name { font-family:var(--font-display); font-size:1.95rem; letter-spacing:.05em; color:var(--white); margin-bottom:.35rem; }
.price-row .det { font-size:.92rem; color:var(--off); font-weight:300; line-height:1.55; margin-bottom:.8rem; }
.price-row .tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.price-row .tag, .tag-pill {
font-family:var(--font-mono); font-size:.58rem; letter-spacing:.15em;
text-transform:uppercase; padding:.25rem .65rem;
background:rgba(var(--accent-rgb),.06); border:1px solid rgba(var(--accent-rgb),.18); color:var(--accent);
}
.price-row .amt { text-align:right; display:flex; flex-direction:column; gap:.2rem; min-width:130px; }
.price-row .amt .v { font-family:var(--font-display); font-size:3rem; color:var(--accent); line-height:1; letter-spacing:.02em; }
.price-row .amt .u { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); }
.notice { margin-top:3rem; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid rgba(var(--accent-rgb),.18); }
.notice > div { background:rgba(var(--accent-rgb),.025); padding:1.75rem 2rem; }
.notice .ttl { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.25em; color:var(--accent); margin-bottom:.65rem; text-transform:uppercase; }
.notice p { font-size:.92rem; color:var(--off); font-weight:300; line-height:1.65; }
/* =================== EXTRAS / RULES / GALLERY =================== */
.extras-section { padding:4rem 1.75rem 5rem; }
.section-sub { font-family:var(--font-display); font-size:clamp(2.5rem,5.5vw,4.5rem); color:var(--white); text-transform:uppercase; margin-bottom:.5rem; letter-spacing:.02em; line-height:.9; }
.section-sub .em { color:var(--accent); }
.photo-card { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:end; border:1px solid var(--border); background:var(--ink); padding:2rem 2rem 1.5rem; margin-top:2rem; position:relative; }
.photo-card .price { font-family:var(--font-display); font-size:4rem; color:var(--accent); line-height:1; }
.photo-card .price small { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); display:block; margin-top:.3rem; }
.photo-card .right { display:flex; gap:1rem; align-items:stretch; align-self:stretch; }
.bg-swatch { flex:1; border:1px solid var(--border); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; min-width:90px; }
.bg-swatch .disc { width:38px; height:38px; border-radius:50%; margin-bottom:.6rem; }
.bg-swatch .disc.k { background:#050505; border:1px solid #2a2a2a; }
.bg-swatch .disc.w { background:#f6f4ee; border:1px solid #d6d2c8; }
.bg-swatch .disc.g { background:#2d7a2d; border:1px solid #3a9a3a; }
.bg-swatch .lab { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--off); }
.photo-note { margin-top:1rem; padding:1rem 1.5rem; border:1px solid var(--border); background:var(--card); border-radius:10px; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.9rem; color:var(--off); font-weight:300; }
.photo-note .tag { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; padding:.25rem .7rem; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.25); color:var(--accent); border-radius:6px; }
.clips-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:1px; background:var(--border); border:1px solid var(--border); margin-top:2rem; }
.clip { background:var(--ink); padding:2.5rem 2.25rem; position:relative; display:flex; flex-direction:column; gap:1.2rem; transition:background .2s; }
.clip:hover { background:var(--card-hi); }
.clip.featured { border-left:2px solid var(--accent); }
.clip .idx { position:absolute; top:1.5rem; right:2rem; font-family:var(--font-display); font-size:5rem; color:rgba(var(--accent-rgb),.06); line-height:1; letter-spacing:.02em; }
.clip .tag { display:inline-block; align-self:flex-start; padding:.25rem .8rem; background:var(--accent); color:var(--accent-ink); font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; }
.clip .name { font-family:var(--font-display); font-size:2.5rem; color:var(--white); line-height:1; letter-spacing:.04em; }
.clip .price { font-family:var(--font-display); font-size:3.5rem; color:var(--accent); line-height:1; }
.clip .price small { display:block; font-size:1rem; color:var(--gray); font-family:var(--font-mono); letter-spacing:.12em; margin-top:.25rem; }
.clip ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.clip ul li { display:flex; align-items:baseline; gap:.8rem; font-size:.94rem; color:var(--off); font-weight:300; line-height:1.4; }
.clip ul li::before { content:'+'; color:var(--accent); font-family:var(--font-mono); flex-shrink:0; }
.clip ul li strong { color:var(--white); font-weight:600; }
.gear-band { margin-top:2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.gear-cell { background:var(--ink); padding:1.5rem 1.75rem; }
.gear-cell .k { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; }
.gear-cell .v { font-size:.9rem; color:var(--off); font-weight:300; line-height:1.5; }
.rules-section { padding:4rem 1.75rem 5rem; }
.rules { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.rule { background:var(--ink); padding:2.5rem 2rem; display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden; transition:background .25s; min-height:220px; }
.rule:hover { background:var(--card-hi); }
.rule::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.rule:hover::before { transform:scaleX(1); }
.rule .head { display:flex; align-items:center; justify-content:space-between; }
.rule .glyph { width:48px; height:48px; border:1px solid rgba(var(--accent-rgb),.3); background:rgba(var(--accent-rgb),.04); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.rule .glyph svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.4; }
.rule .idx { font-family:var(--font-display); font-size:4rem; color:rgba(var(--accent-rgb),.08); line-height:1; letter-spacing:-.02em; }
.rule .name { font-family:var(--font-display); font-size:1.7rem; letter-spacing:.04em; color:var(--white); line-height:1; }
.rule .desc { font-size:.95rem; color:var(--off); font-weight:300; line-height:1.6; }
.rule .desc strong { color:var(--accent); font-weight:600; }
.rules-warn { margin-top:2rem; padding:1.75rem 2rem; border:1px solid rgba(var(--accent-rgb),.25); background:rgba(var(--accent-rgb),.025); display:flex; align-items:flex-start; gap:1.5rem; }
.rules-warn .bolt { flex-shrink:0; width:38px; height:38px; border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.rules-warn .bolt svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; }
.rules-warn p { font-size:.95rem; color:var(--off); font-weight:300; line-height:1.65; }
.rules-warn p strong { color:var(--white); font-weight:600; }
/* ====================== MENTIONS LÉGALES ====================== */
.legal-section { padding:3rem 1.75rem 5rem; max-width:1000px; margin:0 auto; }
.legal-toc {
display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.5rem;
padding-bottom:1.5rem; border-bottom:1px solid var(--border);
}
.legal-toc a {
font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
text-transform:uppercase; color:var(--off); text-decoration:none;
padding:.5rem .9rem; border:1px solid var(--border); transition:all .2s;
}
.legal-toc a:hover { border-color:var(--accent); color:var(--accent); }
.legal-block {
background:var(--ink); border:1px solid var(--border);
padding:2.5rem 2.25rem; margin-bottom:1.5rem; scroll-margin-top:110px;
}
.legal-kicker {
font-family:var(--font-mono); font-size:.62rem; letter-spacing:.25em;
text-transform:uppercase; color:var(--accent); margin-bottom:.75rem;
display:flex; align-items:center; gap:.7rem;
}
.legal-kicker::before { content:''; width:24px; height:1px; background:var(--accent); }
.legal-block h2 {
font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem);
letter-spacing:.03em; text-transform:uppercase; color:var(--white);
line-height:1; margin-bottom:1.5rem; padding-bottom:1rem;
border-bottom:1px solid var(--border);
}
.legal-block h3 {
font-family:var(--font-display); font-size:1.25rem; letter-spacing:.05em;
text-transform:uppercase; color:var(--accent); margin:1.75rem 0 .65rem;
}
.legal-block p {
font-size:.95rem; color:var(--off); font-weight:300; line-height:1.7;
margin-bottom:.75rem; max-width:70ch;
}
.legal-block p strong { color:var(--white); font-weight:600; }
.legal-block ul {
list-style:none; display:flex; flex-direction:column; gap:.4rem;
margin:.4rem 0 1rem; padding-left:.25rem;
}
.legal-block ul li {
font-size:.95rem; color:var(--off); font-weight:300; line-height:1.5;
display:flex; align-items:baseline; gap:.7rem;
}
.legal-block ul li::before { content:'—'; color:var(--accent); flex-shrink:0; }
/* Tableau d'infos éditeur / hébergeur */
.legal-info {
display:grid; gap:1px; background:var(--border);
border:1px solid var(--border); margin:.5rem 0 1rem;
}
.legal-info-row {
background:var(--card); display:grid;
grid-template-columns:170px 1fr; gap:1rem; padding:.7rem 1rem; align-items:baseline;
}
.legal-info-row .k {
font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em;
text-transform:uppercase; color:var(--gray);
}
.legal-info-row .v { font-size:.95rem; color:var(--white); font-weight:400; }
/* Placeholders [À COMPLÉTER] — surlignés pour repérage */
.legal .ph, .legal-block .ph, .legal-info-row .v.ph {
color:var(--accent); font-family:var(--font-mono); font-size:.85rem;
background:rgba(var(--accent-rgb),.06); border:1px dashed rgba(var(--accent-rgb),.35);
padding:.05rem .45rem; border-radius:2px;
}
.legal-foot {
display:flex; align-items:center; justify-content:space-between;
gap:1rem; flex-wrap:wrap; margin-top:2.5rem; padding-top:1.5rem;
border-top:1px solid var(--border);
}
@media (max-width:600px) {
.legal-info-row { grid-template-columns:1fr; gap:.2rem; }
.legal-block { padding:1.75rem 1.25rem; }
}
/* =================================================================
BOOKING FLOW — Multi-step reservation
================================================================= */
.booking-shell { padding:3rem 1.75rem 5rem; max-width:1180px; margin:0 auto; }
/* Stepper */
.stepper {
display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
background:var(--border); border:1px solid var(--border); margin-bottom:2.5rem;
}
.step-pill {
background:var(--ink); padding:1.1rem 1.25rem;
display:flex; align-items:center; gap:.85rem;
position:relative; transition:background .25s;
}
.step-pill .n {
width:32px; height:32px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--border-hi);
font-family:var(--font-display); font-size:1.1rem; color:var(--gray);
letter-spacing:.05em; transition:all .25s;
}
.step-pill .meta { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.step-pill .k { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.step-pill .v { font-family:var(--font-display); font-size:1rem; letter-spacing:.06em; color:var(--gray); text-transform:uppercase; line-height:1; }
.step-pill.is-done { background:var(--card); }
.step-pill.is-done .n { border-color:var(--success); color:var(--success); background:rgba(61,220,151,.06); }
.step-pill.is-done .v { color:var(--off); }
.step-pill.is-active { background:rgba(var(--accent-rgb),.05); }
.step-pill.is-active .n { border-color:var(--accent); color:var(--accent-ink); background:var(--accent); }
.step-pill.is-active .v { color:var(--white); }
.step-pill.is-active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); }
/* Step panes */
.step-pane { display:none; }
.step-pane.is-active { display:block; animation:paneIn .45s var(--ease); }
@keyframes paneIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.step-title { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.25rem); letter-spacing:.03em; line-height:1; color:var(--white); margin-bottom:.4rem; text-transform:uppercase; }
.step-title em { color:var(--accent); font-style:normal; }
.step-sub { color:var(--off); font-weight:300; max-width:56ch; line-height:1.6; margin-bottom:2rem; }
/* Booking layout */
.booking-layout { display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start; }
.booking-main { min-width:0; }
.booking-aside {
position:sticky; top:104px;
background:var(--ink); border:1px solid var(--border); padding:1.5rem;
}
.booking-aside h3 { font-family:var(--font-display); font-size:1.4rem; letter-spacing:.06em; text-transform:uppercase; color:var(--white); margin-bottom:1rem; }
.summary-list { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.25rem; }
.summary-list-item {
display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
padding-bottom:.65rem; border-bottom:1px dashed var(--border);
font-size:.88rem;
}
.summary-list-item:last-child { border-bottom:0; padding-bottom:0; }
.summary-list-item .name { color:var(--off); font-weight:400; min-width:0; }
.summary-list-item .name small { display:block; color:var(--dim); font-family:var(--font-mono); font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; margin-top:.2rem; }
.summary-list-item .price { color:var(--accent); font-family:var(--font-display); font-size:1.2rem; letter-spacing:.04em; white-space:nowrap; }
.summary-empty { color:var(--dim); font-size:.85rem; font-style:italic; padding:1rem 0; text-align:center; }
.summary-totals { border-top:1px solid var(--border); padding-top:1rem; display:flex; flex-direction:column; gap:.45rem; }
.summary-totals-row { display:flex; justify-content:space-between; align-items:baseline; font-size:.85rem; }
.summary-totals-row.grand { padding-top:.65rem; border-top:1px solid var(--border-hi); margin-top:.35rem; }
.summary-totals-row .k { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); }
.summary-totals-row .v { font-family:var(--font-display); font-size:1.05rem; color:var(--white); letter-spacing:.04em; }
.summary-totals-row.grand .k { color:var(--accent); }
.summary-totals-row.grand .v { font-size:2rem; color:var(--accent); }
/* Step 1 — Services */
.svc-cats { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.svc-cat-chip {
font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em;
text-transform:uppercase; padding:.45rem .85rem;
background:transparent; color:var(--gray);
border:1px solid var(--border); cursor:pointer; transition:all .2s;
}
.svc-cat-chip:hover { color:var(--off); border-color:var(--border-hi); }
.svc-cat-chip.is-on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,260px),1fr)); gap:1rem; }
.svc-card {
background:var(--ink); border:1px solid var(--border);
padding:1.5rem 1.5rem 1.4rem; cursor:pointer; position:relative;
display:flex; flex-direction:column; gap:.85rem;
transition:transform .25s var(--ease), border-color .25s, background .25s, box-shadow .25s;
text-align:left; color:inherit; font:inherit; width:100%;
}
.svc-card:hover { transform:translateY(-3px); border-color:var(--border-hi); background:var(--card); }
.svc-card.is-selected { border-color:var(--accent); background:rgba(var(--accent-rgb),.04); box-shadow:0 0 0 1px var(--accent), 0 10px 40px -20px rgba(var(--accent-rgb),.4); }
.svc-card .check {
position:absolute; top:1rem; right:1rem;
width:26px; height:26px; border:1px solid var(--border-hi);
display:flex; align-items:center; justify-content:center;
color:transparent; font-size:.8rem; transition:all .25s;
}
.svc-card.is-selected .check { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.svc-card .top { display:flex; align-items:center; gap:.85rem; }
.svc-card .glyph {
width:44px; height:44px; flex-shrink:0;
border:1px solid var(--border-hi); background:rgba(var(--accent-rgb),.04);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:1.3rem; color:var(--accent); letter-spacing:.05em;
}
.svc-card .cat { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }
.svc-card .name { font-family:var(--font-display); font-size:1.5rem; letter-spacing:.04em; color:var(--white); line-height:1; }
.svc-card .desc { font-size:.88rem; color:var(--off); font-weight:300; line-height:1.55; flex:1; }
.svc-card .foot { display:flex; align-items:flex-end; justify-content:space-between; border-top:1px solid var(--border); padding-top:.85rem; gap:1rem; }
.svc-card .duration { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); display:flex; align-items:center; gap:.4rem; }
.svc-card .duration::before { content:'⏱'; font-size:.85rem; }
.svc-card .amt { font-family:var(--font-display); font-size:1.75rem; color:var(--accent); line-height:1; letter-spacing:.02em; }
.svc-card .amt small { display:block; font-family:var(--font-mono); font-size:.5rem; letter-spacing:.18em; color:var(--gray); text-transform:uppercase; margin-top:.2rem; text-align:right; }
/* Hours stepper (only on selected hourly cards) */
.svc-stepper {
display:flex; align-items:center; justify-content:space-between; gap:.75rem;
padding:.65rem .85rem; background:rgba(var(--accent-rgb),.06);
border:1px solid rgba(var(--accent-rgb),.25);
margin-top:.25rem; cursor:default;
}
.svc-stepper-label {
font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em;
text-transform:uppercase; color:var(--accent);
}
.svc-stepper-controls { display:flex; align-items:center; gap:.5rem; }
.svc-step-btn {
width:28px; height:28px; background:var(--ink);
border:1px solid var(--accent); color:var(--accent);
cursor:pointer; font-family:var(--font-display);
font-size:1.1rem; line-height:1; transition:all .2s;
display:flex; align-items:center; justify-content:center;
}
.svc-step-btn:hover:not(:disabled) { background:var(--accent); color:var(--accent-ink); }
.svc-step-btn:disabled { opacity:.35; cursor:not-allowed; border-color:var(--border-hi); color:var(--gray); }
.svc-step-val {
font-family:var(--font-display); font-size:1rem; color:var(--white);
letter-spacing:.04em; min-width:42px; text-align:center;
}
.svc-step-val strong { color:var(--accent); font-size:1.25rem; }
.svc-step-min {
font-family:var(--font-mono); font-size:.5rem; letter-spacing:.18em;
text-transform:uppercase; color:var(--gray);
}
/* Step 2 — Calendar */
.cal-wrap { display:grid; grid-template-columns:1.1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.cal-panel, .slot-panel { background:var(--ink); padding:1.5rem 1.5rem 1.75rem; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; gap:1rem; }
.cal-title { font-family:var(--font-display); font-size:1.55rem; letter-spacing:.05em; text-transform:uppercase; color:var(--white); }
.cal-nav { display:flex; gap:.4rem; }
.cal-nav button {
width:34px; height:34px; background:transparent; border:1px solid var(--border-hi);
color:var(--off); cursor:pointer; transition:all .2s; font-size:1rem;
}
.cal-nav button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.cal-nav button:disabled { opacity:.3; cursor:not-allowed; }
.cal-dow {
display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; margin-bottom:.55rem;
}
.cal-dow span { text-align:center; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em; color:var(--gray); text-transform:uppercase; padding:.3rem 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.35rem; }
.cal-day {
aspect-ratio:1; background:var(--card); border:1px solid transparent;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:.15rem; cursor:pointer; transition:all .2s; position:relative;
font-family:var(--font-display); font-size:1.1rem; color:var(--off);
padding:.2rem;
}
.cal-day.is-empty { background:transparent; cursor:default; }
.cal-day.is-past, .cal-day.is-blocked { color:var(--dim); cursor:not-allowed; background:transparent; }
.cal-day.is-blocked::after { content:''; position:absolute; left:20%; right:20%; top:50%; height:1px; background:var(--dim); transform:rotate(-30deg); }
.cal-day:not(.is-past):not(.is-blocked):not(.is-empty):hover { border-color:var(--accent); color:var(--accent); }
.cal-day.is-today { box-shadow:inset 0 -2px 0 var(--off); }
.cal-day.is-selected { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 10px 30px -10px rgba(var(--accent-rgb),.4); }
.cal-day .dot { width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.7; }
.cal-day.is-selected .dot { background:var(--accent-ink); }
.slot-head { display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.5rem; }
.slot-head .k { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.slot-head .v { font-family:var(--font-display); font-size:1.5rem; letter-spacing:.04em; color:var(--white); text-transform:uppercase; }
.slot-group { margin-bottom:1.5rem; }
.slot-group h4 { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); margin-bottom:.7rem; display:flex; align-items:center; gap:.6rem; }
.slot-group h4::before { content:''; width:14px; height:1px; background:var(--gray); }
.slot-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,88px),1fr)); gap:.4rem; }
.slot-chip {
background:var(--card); border:1px solid var(--border);
padding:.65rem .5rem; cursor:pointer; transition:all .2s;
display:flex; flex-direction:column; align-items:center; gap:.2rem;
font:inherit; color:inherit;
}
.slot-chip:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.slot-chip:disabled { opacity:.3; cursor:not-allowed; text-decoration:line-through; }
.slot-chip.is-selected { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.slot-chip .h { font-family:var(--font-display); font-size:1.05rem; letter-spacing:.04em; line-height:1; }
.slot-chip .e { font-family:var(--font-mono); font-size:.5rem; letter-spacing:.15em; text-transform:uppercase; opacity:.75; }
.slot-empty { padding:1rem 0; font-size:.85rem; color:var(--dim); font-style:italic; text-align:center; }
/* Réservation "à la journée" (mastering / mini-clip / clip) : pas de créneau */
.slot-dayonly {
border:1px solid rgba(var(--accent-rgb),.35);
background:rgba(var(--accent-rgb),.05);
border-radius:14px;
padding:1.75rem 1.5rem;
text-align:center;
}
.slot-dayonly-badge {
display:inline-block; margin-bottom:.9rem;
font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
color:var(--accent-ink); background:var(--accent);
padding:.35rem .8rem; border-radius:8px;
}
.slot-dayonly-date {
font-family:var(--font-display); font-size:1.7rem; letter-spacing:.04em;
text-transform:uppercase; color:var(--white); line-height:1.1;
}
.slot-dayonly-note {
margin-top:.8rem; font-size:.86rem; line-height:1.55; color:var(--off); font-weight:300;
max-width:440px; margin-left:auto; margin-right:auto;
}
.slot-dayonly-note strong { color:var(--accent); font-weight:600; }
/* Engineer-driven slot panel */
.slot-duration-banner {
display:grid; grid-template-columns:auto auto 1fr; gap:.4rem 1rem; align-items:center;
padding:.85rem 1.1rem; margin-bottom:1.2rem;
background:rgba(var(--accent-rgb),.05); border:1px solid rgba(var(--accent-rgb),.25);
}
.slot-duration-banner .k { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }
.slot-duration-banner .v { font-family:var(--font-display); font-size:1.6rem; color:var(--white); letter-spacing:.04em; line-height:1; }
.slot-duration-banner .x { grid-column:1 / -1; font-size:.78rem; color:var(--off); font-weight:300; line-height:1.45; padding-top:.3rem; border-top:1px solid rgba(var(--accent-rgb),.15); }
@media (min-width:520px) {
.slot-duration-banner { grid-template-columns:auto auto 1fr; }
.slot-duration-banner .x { grid-column:3; border-top:none; padding-top:0; padding-left:.5rem; }
}
/* Calendar: days where no engineer has set availability */
.cal-day.is-noavail { color:var(--dim); opacity:.55; }
.cal-day.is-noavail:not(.is-selected):hover { border-color:var(--border-hi); color:var(--off); opacity:.85; }
.engineer-pick { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.engineer-pick h4 { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.65rem; }
.engineer-list { display:flex; flex-direction:column; gap:.45rem; }
.engineer-opt {
display:flex; align-items:center; gap:.85rem;
padding:.7rem .85rem; background:var(--card);
border:1px solid var(--border); cursor:pointer; transition:all .2s;
font:inherit; color:inherit; text-align:left; width:100%;
}
.engineer-opt:hover { border-color:var(--border-hi); }
.engineer-opt.is-selected { border-color:var(--accent); background:rgba(var(--accent-rgb),.05); }
.engineer-opt .avatar {
width:32px; height:32px; flex-shrink:0;
background:var(--accent); color:var(--accent-ink);
display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-size:.95rem; letter-spacing:.05em;
}
.engineer-opt .meta { display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0; }
.engineer-opt .nm { font-size:.92rem; color:var(--white); line-height:1.1; }
.engineer-opt .role { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gray); }
.engineer-opt .check { width:18px; height:18px; border:1px solid var(--border-hi); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:transparent; }
.engineer-opt.is-selected .check { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
/* Step 3 — Form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.form-field { display:flex; flex-direction:column; gap:.45rem; }
.form-field.full { grid-column:1 / -1; }
.form-field label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--off); display:flex; align-items:center; gap:.5rem; }
.form-field label .req { color:var(--accent); }
.form-field input, .form-field textarea, .form-field select {
background:var(--card); border:1px solid var(--border);
padding:.85rem 1rem; color:var(--white);
font-family:var(--font-body); font-size:1rem; letter-spacing:.02em;
transition:border-color .2s, background .2s;
border-radius:0;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline:none; border-color:var(--accent); background:var(--ink); }
.form-field textarea { resize:vertical; min-height:120px; line-height:1.55; }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select { border-color:var(--danger); }
.form-field .err { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--danger); min-height:.9rem; }
.form-field.has-error .err::before { content:'⚠ '; }
.form-checks { margin-top:1.75rem; display:flex; flex-direction:column; gap:.85rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.form-check {
display:flex; gap:.85rem; cursor:pointer;
padding:.95rem 1rem; background:var(--card);
border:1px solid var(--border); transition:all .2s;
}
.form-check:hover { border-color:var(--border-hi); }
.form-check.has-error { border-color:var(--danger); background:rgba(255,77,77,.04); }
.form-check input { appearance:none; -webkit-appearance:none; width:20px; height:20px; flex-shrink:0; border:1px solid var(--border-hi); background:var(--ink); cursor:pointer; position:relative; margin-top:2px; }
.form-check input:checked { background:var(--accent); border-color:var(--accent); }
.form-check input:checked::after { content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:700; font-size:.9rem; }
.form-check .text { font-size:.88rem; color:var(--off); line-height:1.55; }
.form-check .text strong { color:var(--white); font-weight:600; }
.form-check .text a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.form-check .text small { display:block; color:var(--gray); font-family:var(--font-mono); font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; margin-top:.3rem; }
/* Step 4 — Summary */
.review {
background:var(--ink); border:1px solid var(--border);
padding:0; overflow:hidden; margin-bottom:1.5rem;
}
.review-section { padding:1.5rem 1.75rem; border-bottom:1px solid var(--border); display:grid; grid-template-columns:160px 1fr auto; gap:1.5rem; align-items:start; }
.review-section:last-child { border-bottom:0; }
.review-section .k { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); padding-top:.2rem; }
.review-section .v { color:var(--white); }
.review-section .v ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.review-section .v ul li { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:.92rem; color:var(--off); }
.review-section .v ul li strong { color:var(--white); font-weight:500; }
.review-section .v ul li .p { color:var(--accent); font-family:var(--font-display); font-size:1.1rem; letter-spacing:.04em; }
.review-section .edit { background:transparent; border:1px solid var(--border-hi); padding:.45rem .85rem; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.2em; text-transform:uppercase; color:var(--off); cursor:pointer; transition:all .2s; }
.review-section .edit:hover { border-color:var(--accent); color:var(--accent); }
/* Booking actions */
.booking-actions {
display:flex; justify-content:space-between; gap:1rem;
margin-top:2rem; flex-wrap:wrap;
}
.booking-actions > div { display:flex; gap:.6rem; flex-wrap:wrap; }
/* Confirmation animation */
.booking-success {
text-align:center; padding:4rem 1.5rem;
background:var(--ink); border:1px solid var(--border);
}
.booking-success .check-anim {
width:88px; height:88px; margin:0 auto 1.5rem;
border:2px solid var(--accent); border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:2.5rem; color:var(--accent); position:relative;
animation:successPop .55s var(--ease) both;
}
.booking-success .check-anim::before { content:''; position:absolute; inset:-2px; border:2px solid var(--accent); border-radius:50%; opacity:.4; animation:successRing 1.8s ease-out infinite; }
@keyframes successPop { from{opacity:0;transform:scale(.5) rotate(-90deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes successRing { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.8);opacity:0} }
.booking-success h2 { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.5rem); letter-spacing:.04em; text-transform:uppercase; color:var(--white); margin-bottom:.8rem; }
.booking-success h2 em { color:var(--accent); font-style:normal; }
.booking-success p { color:var(--off); max-width:50ch; margin:0 auto 1.25rem; font-weight:300; line-height:1.65; }
.booking-success .ref { display:inline-block; margin:1.25rem auto; padding:.75rem 1.5rem; background:var(--card); border:1px dashed var(--accent); font-family:var(--font-mono); font-size:.85rem; letter-spacing:.2em; color:var(--accent); }
/* =================================================================
ADMIN PANEL
================================================================= */
/* Top padding clears the fixed nav (64px) + marquee (28px) on every screen size */
.admin-shell { padding:7rem 1.75rem 5rem; max-width:1280px; margin:0 auto; }
.admin-header {
display:flex; align-items:center; justify-content:space-between;
gap:1.5rem; padding-bottom:1.5rem; margin-bottom:2rem;
border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.admin-title { font-family:var(--font-display); font-size:clamp(2rem,5vw,3.25rem); letter-spacing:.04em; text-transform:uppercase; color:var(--white); }
.admin-title em { color:var(--accent); font-style:normal; }
.admin-badge {
display:inline-flex; align-items:center; gap:.5rem;
font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em;
text-transform:uppercase; color:var(--accent);
padding:.4rem .75rem; border:1px solid rgba(var(--accent-rgb),.3);
background:rgba(var(--accent-rgb),.04);
}
.admin-badge::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 1.4s infinite; }
/* Login */
.admin-login {
max-width:420px; margin:2rem auto;
background:var(--ink); border:1px solid var(--border);
padding:2.5rem 2.25rem;
}
.admin-login h2 { font-family:var(--font-display); font-size:2rem; letter-spacing:.04em; text-transform:uppercase; color:var(--white); margin-bottom:.4rem; text-align:center; }
.admin-login h2 em { color:var(--accent); font-style:normal; }
.admin-login .sub { text-align:center; color:var(--gray); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:2rem; }
.admin-login .form-field { margin-bottom:1rem; }
.admin-login .hint { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); text-align:center; margin-top:1rem; line-height:1.7; }
/* Dashboard */
.admin-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:2rem; overflow-x:auto; }
.admin-tab {
background:transparent; border:none; padding:.95rem 1.4rem;
font-family:var(--font-mono); font-size:.65rem; letter-spacing:.22em;
text-transform:uppercase; color:var(--gray); cursor:pointer;
position:relative; transition:color .2s; white-space:nowrap;
}
.admin-tab:hover { color:var(--off); }
.admin-tab.is-active { color:var(--accent); }
.admin-tab.is-active::after { content:''; position:absolute; left:.5rem; right:.5rem; bottom:-1px; height:2px; background:var(--accent); }
.admin-tab .count { display:inline-block; margin-left:.5rem; padding:.1rem .4rem; background:var(--card); color:var(--off); font-size:.55rem; }
.admin-tab.is-active .count { background:var(--accent); color:var(--accent-ink); }
.admin-pane { display:none; }
.admin-pane.is-active { display:block; animation:paneIn .4s var(--ease); }
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,160px),1fr)); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:2rem; }
.kpi {
background:var(--ink); padding:1.5rem 1.5rem;
display:flex; flex-direction:column; gap:.3rem; position:relative;
}
.kpi .k { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); }
.kpi .v { font-family:var(--font-display); font-size:2.4rem; color:var(--accent); line-height:1; letter-spacing:.02em; }
.kpi .delta { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em; color:var(--off); }
.admin-toolbar {
display:flex; align-items:center; justify-content:space-between;
gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;
}
.admin-toolbar h3 { font-family:var(--font-display); font-size:1.6rem; letter-spacing:.04em; text-transform:uppercase; color:var(--white); }
.data-table {
width:100%; border-collapse:collapse;
background:var(--ink); border:1px solid var(--border);
}
.data-table th, .data-table td { padding:.95rem 1.1rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table th {
font-family:var(--font-mono); font-size:.58rem; letter-spacing:.22em;
text-transform:uppercase; color:var(--accent); background:var(--card); font-weight:400;
}
.data-table tr:last-child td { border-bottom:0; }
.data-table tr:hover td { background:var(--card); }
.data-table td { font-size:.88rem; color:var(--off); }
.data-table td strong { color:var(--white); font-weight:500; }
.data-table td .row-actions { display:flex; gap:.4rem; justify-content:flex-end; }
.data-table .empty-row td { text-align:center; color:var(--dim); font-style:italic; padding:2rem 1rem; }
.status-pill {
display:inline-block; padding:.25rem .55rem;
font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em;
text-transform:uppercase; border:1px solid;
}
.status-pill.pending { color:var(--accent); border-color:rgba(var(--accent-rgb),.4); background:rgba(var(--accent-rgb),.05); }
.status-pill.confirmed { color:var(--success); border-color:rgba(61,220,151,.4); background:rgba(61,220,151,.05); }
.status-pill.cancelled { color:var(--danger); border-color:rgba(255,77,77,.4); background:rgba(255,77,77,.05); }
.status-pill.completed { color:var(--gray); border-color:var(--border-hi); background:var(--card); }
.src-badge { display:inline-block; margin-top:.25rem; font-family:var(--font-mono); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
/* Modale d'édition de réservation */
.rev-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; margin-bottom:1.25rem; }
.rev-grid .form-field.full { grid-column:1 / -1; }
.rev-section-title { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:.5rem 0 .6rem; }
.rev-svc-list { display:flex; flex-direction:column; gap:.3rem; max-height:220px; overflow-y:auto; margin-bottom:1.25rem; padding-right:.25rem; }
.rev-svc { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--border); border-radius:8px; background:var(--ink); cursor:pointer; font-size:.9rem; }
.rev-svc:hover { border-color:var(--border-hi); }
.rev-svc .rev-svc-name { flex:1; }
.rev-svc input[type="number"] { background:var(--card); border:1px solid var(--border); color:var(--white); padding:.3rem .4rem; border-radius:6px; }
.rev-total-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; padding-top:1rem; border-top:1px solid var(--border); }
.rev-total-row .form-field { margin:0; }
.rev-total-row input { background:var(--card); border:1px solid var(--border); color:var(--white); padding:.55rem .7rem; border-radius:8px; font-size:1rem; }
@media (max-width:600px) { .rev-grid { grid-template-columns:1fr; } }
/* Sélecteur de statut en ligne dans le tableau admin.
Mêmes codes couleur que les pills, mais cliquable pour changer
directement de statut sans passer par un cycle. */
.status-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
padding: .35rem 1.6rem .35rem .65rem;
font-family: var(--font-mono);
font-size: .58rem;
letter-spacing: .16em;
text-transform: uppercase;
border: 1px solid;
border-radius: 8px;
cursor: pointer;
background-color: var(--ink);
/* chevron custom (SVG inline) */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right .55rem center;
background-size: 8px;
transition: border-color .2s, background-color .2s, opacity .2s;
}
.status-select:hover { background-color: var(--card); }
.status-select:focus-visible {
outline: 2px solid rgba(var(--accent-rgb), .4);
outline-offset: 2px;
}
.status-select:disabled { opacity: .5; cursor: progress; }
.status-select option { background: var(--ink); color: var(--white); }
.status-select.status-pending { color: var(--accent); border-color: rgba(var(--accent-rgb), .45); background-color: rgba(var(--accent-rgb), .07); }
.status-select.status-confirmed { color: var(--success); border-color: rgba(61,220,151,.45); background-color: rgba(61,220,151,.07); }
.status-select.status-cancelled { color: var(--danger); border-color: rgba(255,77,77,.45); background-color: rgba(255,77,77,.07); }
.status-select.status-completed { color: var(--gray); border-color: var(--border-hi); background-color: var(--card); }
.admin-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px),1fr)); gap:1rem; background:var(--ink); border:1px solid var(--border); padding:1.5rem; margin-bottom:1.5rem; }
.admin-form-grid .full { grid-column:1 / -1; }
/* Modal */
.modal-backdrop {
position:fixed; inset:0; background:rgba(0,0,0,.85);
z-index:8500; display:none; align-items:center; justify-content:center;
padding:1.5rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modal-backdrop.is-open { display:flex; animation:fadeUp .35s var(--ease); }
.modal {
background:var(--ink); border:1px solid var(--border-hi);
width:100%; max-width:560px; max-height:90vh; overflow:auto;
padding:2rem 2.25rem; position:relative;
}
.modal h3 { font-family:var(--font-display); font-size:1.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--white); margin-bottom:1.5rem; }
.modal h3 em { color:var(--accent); font-style:normal; }
.modal-close { position:absolute; top:1rem; right:1rem; background:transparent; border:1px solid var(--border-hi); width:32px; height:32px; color:var(--off); cursor:pointer; font-size:.9rem; transition:all .2s; }
.modal-close:hover { border-color:var(--accent); color:var(--accent); }
.modal-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.5rem; flex-wrap:wrap; }
/* Blocked dates calendar (admin) */
.block-cal { background:var(--ink); border:1px solid var(--border); padding:1.5rem; }
.block-cal .cal-day.is-blocked-admin { background:var(--danger); color:#fff; border-color:var(--danger); }
.block-cal .cal-day.is-blocked-admin::after { display:none; }
/* Wider modal variant — engineer availability editor */
.modal.is-wide { max-width:780px; }
.eng-edit { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.eng-edit-form { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.eng-edit-form .full { grid-column:1 / -1; }
.eng-edit-avail h4 { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.75rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.eng-edit-avail h4 .hint { color:var(--gray); font-size:.55rem; letter-spacing:.15em; text-transform:none; font-family:var(--font-body); font-weight:400; }
.eng-mini-cal { background:var(--card); border:1px solid var(--border); padding:1rem 1.1rem; margin-bottom:1rem; }
.eng-mini-cal .cal-day { font-size:.95rem; padding:0; aspect-ratio:1; }
.eng-mini-cal .cal-day.is-on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.eng-mini-cal .cal-day.is-on .dot { background:var(--accent-ink); }
.eng-avail-list { display:flex; flex-direction:column; gap:.6rem; max-height:280px; overflow-y:auto; padding-right:.25rem; }
.eng-avail-empty { text-align:center; padding:1rem; color:var(--dim); font-style:italic; font-size:.85rem; }
.eng-avail-note { font-size:.72rem; line-height:1.5; color:var(--gray); margin:-.2rem 0 .6rem; padding:.5rem .7rem; background:rgba(var(--accent-rgb),.05); border:1px solid rgba(var(--accent-rgb),.18); border-radius:8px; }
.eng-avail-note strong { color:var(--accent); font-weight:600; }
.eng-avail-row { background:var(--card); border:1px solid var(--border); padding:.8rem .95rem; display:flex; flex-direction:column; gap:.55rem; }
.eng-avail-row-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.eng-avail-row-head .d { font-family:var(--font-display); font-size:1rem; letter-spacing:.04em; color:var(--white); text-transform:uppercase; }
.eng-avail-row-head .d small { display:block; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em; color:var(--gray); text-transform:uppercase; margin-top:.15rem; }
.eng-avail-row-head button {
background:transparent; border:1px solid var(--border-hi); color:var(--gray);
width:26px; height:26px; cursor:pointer; transition:all .2s;
display:flex; align-items:center; justify-content:center; font-size:.85rem;
}
.eng-avail-row-head button:hover { border-color:var(--danger); color:var(--danger); }
.eng-avail-slots { display:flex; flex-direction:column; gap:.4rem; }
.eng-avail-slot {
display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
background:var(--ink); border:1px solid var(--border); padding:.4rem .55rem;
}
.eng-avail-slot input[type="number"] {
background:var(--card); border:1px solid var(--border-hi); color:var(--white);
padding:.35rem .4rem; width:54px; font-size:.85rem; font-family:var(--font-body);
text-align:center;
}
.eng-avail-slot input[type="number"]:focus { outline:none; border-color:var(--accent); }
.eng-avail-slot .sep { color:var(--gray); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; }
.eng-avail-slot .u { color:var(--gray); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; }
.eng-avail-slot .rm {
margin-left:auto; background:transparent; border:1px solid var(--border-hi);
color:var(--gray); width:22px; height:22px; cursor:pointer; transition:all .2s;
display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.eng-avail-slot .rm:hover { border-color:var(--danger); color:var(--danger); }
.eng-avail-slot.is-invalid { border-color:var(--danger); background:rgba(255,77,77,.04); }
.eng-avail-add {
background:transparent; border:1px dashed var(--border-hi); color:var(--off);
padding:.45rem .8rem; cursor:pointer; transition:all .2s;
font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
align-self:flex-start;
}
.eng-avail-add:hover { border-color:var(--accent); color:var(--accent); background:rgba(var(--accent-rgb),.05); }
.eng-avail-notice {
padding:.75rem 1rem; background:rgba(var(--accent-rgb),.06);
border:1px solid rgba(var(--accent-rgb),.25); color:var(--off);
font-size:.8rem; line-height:1.5; margin-bottom:1rem;
}
.eng-avail-notice strong { color:var(--accent); }
/* =================================================================
FOOTER · LIGHTBOX · TOAST · RESPONSIVE
================================================================= */
footer {
padding:2.5rem 1.75rem; border-top:1px solid var(--border);
display:grid;
/* 3 colonnes virtuelles : logo gauche · espace · social droite.
Le copyright occupe une 2e rangée qui s'étend sur les 3 colonnes,
ce qui le centre VRAIMENT sur la pleine largeur du footer
(et plus dans la cellule intermédiaire 1fr décalée par l'asymétrie
logo/social). */
grid-template-columns:1fr auto 1fr;
grid-template-rows:auto auto;
gap:1.4rem 2rem; align-items:center; background:var(--ink);
}
footer .lg { font-family:var(--font-display); font-size:1.4rem; color:var(--accent); letter-spacing:.12em;
grid-column:1; grid-row:1; justify-self:start; }
footer .cp { font-family:var(--font-mono); font-size:.6rem; color:var(--gray); letter-spacing:.15em; line-height:1.7; text-transform:uppercase;
grid-column:1 / -1; grid-row:2; text-align:center; }
footer .so { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
grid-column:3; grid-row:1; justify-self:end; }
footer .so a, footer .so button {
display:flex; align-items:center; gap:.5rem;
font-family:var(--font-mono); font-size:.62rem; letter-spacing:.15em;
color:var(--off); text-decoration:none; padding:.5rem .9rem;
border:1px solid var(--border); transition:all .2s; text-transform:uppercase;
background:transparent; cursor:pointer;
}
footer .so a:hover, footer .so button:hover { border-color:var(--accent); color:var(--accent); }
footer .so a svg { width:12px; height:12px; fill:currentColor; }
.toast {
position:fixed; bottom:1.5rem; right:1.5rem; z-index:9000;
background:var(--accent); color:var(--accent-ink);
padding:.85rem 1.5rem; font-family:var(--font-mono);
font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
transform:translateY(80px); opacity:0;
transition:transform .4s var(--ease), opacity .4s var(--ease);
pointer-events:none; max-width:calc(100vw - 3rem);
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.is-danger { background:var(--danger); color:#fff; }
.toast.is-success { background:var(--success); color:#062019; }
/* =================================================================
RESPONSIVE
================================================================= */
/* ====================== RESPONSIVE ====================== */
/* Large tablet / petit laptop */
@media (max-width:1100px) {
.booking-layout { grid-template-columns:1fr; }
.booking-aside { position:static; }
.cal-wrap { grid-template-columns:1fr; }
}
/* Tablette & mobile — bascule en menu burger (la nav devient trop dense) */
@media (max-width:920px) {
nav { grid-template-columns:auto 1fr auto; padding:0 1rem; }
/* On masque les éléments secondaires de la zone droite, on garde le burger */
.nav-cta { gap:.5rem; }
.nav-cta .live, .nav-cta .sep, .nav-cta > a { display:none; }
.menu-toggle { display:flex; }
/* Panneau menu mobile : animé, scrollable, au-dessus du contenu */
.nav-links {
position:fixed; top:64px; left:0; right:0;
flex-direction:column; align-items:stretch; gap:0;
background:rgba(5,5,5,.97);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid var(--border);
padding:.4rem 0;
max-height:calc(100dvh - 64px); overflow-y:auto;
z-index:999;
transform:translateY(-14px); opacity:0; visibility:hidden; pointer-events:none;
transition:transform .3s var(--ease), opacity .3s var(--ease), visibility .3s;
}
.nav-links.open { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
.nav-links li { width:100%; }
.nav-links a {
padding:1.05rem 1.5rem; font-size:.95rem; letter-spacing:.18em;
border-bottom:1px solid var(--border);
}
.nav-links li:last-child a { border-bottom:none; }
.nav-links a.active::before, .nav-links a.active::after { display:none; }
.nav-links a.active { background:rgba(var(--accent-rgb),.06); }
}
/* Grilles → 1 colonne */
@media (max-width:1000px) {
.about-grid, .services, .location, .clips-grid, .gear-band, .rules, .notice { grid-template-columns:1fr; }
.pricing { grid-template-columns:1fr; }
.price-row { grid-template-columns:40px 1fr; row-gap:1rem; }
.price-row .amt { grid-column:1 / -1; text-align:left; flex-direction:row; gap:1rem; align-items:baseline; }
.review-section { grid-template-columns:1fr; gap:.75rem; }
.review-section .edit { justify-self:start; }
.form-grid { grid-template-columns:1fr; }
}
/* Téléphone */
@media (max-width:760px) {
.section, .page-header, .pricing-section, .extras-section, .rules-section, .legal-section, .booking-shell, .admin-shell { padding-left:1rem; padding-right:1rem; }
.section { padding-top:4rem; padding-bottom:4rem; }
/* Mobile : on neutralise le placement explicite des items (cf. règle desktop)
et on empile tout sur une seule colonne, centré. */
footer { grid-template-columns:1fr; grid-template-rows:auto; text-align:center; gap:1rem; }
footer .lg, footer .so, footer .cp {
grid-column:1 / -1; grid-row:auto; justify-self:center; text-align:center;
}
footer .so { flex-wrap:wrap; justify-content:center; }
.stat-grid { grid-template-columns:1fr 1fr; }
.photo-card { grid-template-columns:1fr; align-items:stretch; }
.photo-card .right { flex-wrap:wrap; }
.data-table { font-size:.78rem; }
.data-table th, .data-table td { padding:.7rem .6rem; }
.review-section { padding:1.1rem 1.25rem; }
.booking-shell, .admin-shell { padding-top:7rem; }
/* Admin header empile proprement */
.admin-header { flex-direction:column; align-items:flex-start; }
.admin-header > div:last-child { width:100%; }
/* Stepper compact (4 colonnes, numéros seuls) */
.stepper { grid-template-columns:repeat(4,1fr); }
.step-pill { padding:.8rem .4rem; }
.step-pill .meta { display:none; }
.step-pill .n { margin:0 auto; }
/* Modal pleine largeur */
.modal { padding:1.5rem 1.25rem; }
.modal.is-wide { max-width:100%; }
.eng-edit-form { grid-template-columns:1fr; }
/* Cibles tactiles ≥ 44px */
.slot-chip { min-height:48px; }
.svc-cat-chip { min-height:40px; }
.legal-info-row { grid-template-columns:1fr; gap:.2rem; }
}
/* Petit téléphone */
@media (max-width:480px) {
.hero { padding:104px 1.1rem 2rem; }
.hero-cta { flex-direction:column; width:100%; max-width:340px; }
.hero-cta .btn { width:100%; justify-content:center; }
.stat-grid { grid-template-columns:1fr; }
.booking-actions { flex-direction:column-reverse; gap:.6rem; }
.booking-actions > div { width:100%; display:flex; }
.booking-actions .btn { width:100%; justify-content:center; }
.summary-list-item { font-size:.82rem; }
.legal-toc a { font-size:.58rem; padding:.45rem .7rem; }
.step-pill .n { width:30px; height:30px; font-size:1rem; }
.modal-actions { flex-direction:column-reverse; }
.modal-actions .btn { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
/* ============================================================
HERO IMAGE — intégration full-screen avec overlay premium
• Image placée en couche absolue derrière le contenu
• object-fit:cover pour ne jamais déformer la photo
• Multi-overlay : vignette radiale + fade haut (lisibilité nav) + fade bas (transition fluide vers la section suivante)
• Subtil "Ken Burns" (zoom lent) qui donne de la vie sans distraire — désactivé sous prefers-reduced-motion
• Le mégatexte décoratif "SMOW" derrière est rendu beaucoup plus discret (la photo prend la vedette)
============================================================ */
/* Couche image — derrière tout */
.hero-bg {
position: absolute; inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.hero-bg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 42%;
display: block;
/* Léger blur sur la photo + upscale qui masque les bords flous (sinon
les 3px de blur créent un halo transparent sur les côtés du viewport). */
filter: blur(3px);
/* Ken Burns très lent (zoom + dérive verticale subtile). Tout en GPU.
Le scale de base est passé à 1.08 pour absorber le blur de 3px sans
révéler le bord transparent. */
animation: heroKenBurns 26s ease-in-out infinite alternate;
will-change: transform, filter;
}
@keyframes heroKenBurns {
from { transform: scale(1.08) translateY(0); }
to { transform: scale(1.12) translateY(-1.6%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bg img { animation: none; transform: scale(1.10); }
}
/* Couche overlay — devant l'image, derrière le contenu.
Renforcée : photo plus assombrie/translucide (sur demande utilisateur),
centre légèrement teinté pour atténuer l'image, bords très assombris. */
.hero-overlay {
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
background:
/* 1. Vignette radiale renforcée — centre déjà teinté à 35 % de noir,
bords poussés à 82 % pour vraiment éteindre la photo en périphérie. */
radial-gradient(ellipse at 50% 55%,
rgba(5,5,5,.35) 0%,
rgba(5,5,5,.60) 50%,
rgba(5,5,5,.82) 100%),
/* 2. Fade vertical : haut 72 % (nav + marquee lisibles),
mid 22 % (l'image respire un peu mais reste atténuée),
bas en fondu fort vers la section À propos (transition continue). */
linear-gradient(180deg,
rgba(5,5,5,.72) 0%,
rgba(5,5,5,.22) 25%,
rgba(5,5,5,.22) 60%,
rgba(5,5,5,.92) 92%,
var(--black) 100%);
}
/* Le mégatexte "SMOW" derrière devient une marque d'eau très subtile */
/* On retire entièrement le mégatexte décoratif "SMOW" derrière (sur demande utilisateur).
`content: none` n'affiche plus rien — le pseudo-élément est totalement neutralisé. */
.hero::before { content: none; }
.hero-stage { z-index: 3; }
.hero-scroll { z-index: 4; }
/* Renforcement lisibilité — drop shadow doux sur le titre + boutons restent intacts */
.hero-tagline { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
/* Mobile — overlay encore plus assombri (texte chevauche le micro/panneaux) */
@media (max-width:760px) {
.hero-bg img { object-position: center center; filter: blur(2.5px); }
.hero-overlay {
background:
radial-gradient(ellipse at 50% 50%, rgba(5,5,5,.45) 0%, rgba(5,5,5,.62) 55%, rgba(5,5,5,.82) 100%),
linear-gradient(180deg,
rgba(5,5,5,.78) 0%,
rgba(5,5,5,.28) 28%,
rgba(5,5,5,.28) 58%,
rgba(5,5,5,.94) 92%,
var(--black) 100%);
}
}
/* ============================================================
QUICK WINS — UX/UI patch
QW2 : "Réserver" en CTA jaune dans la nav (hiérarchie d'action)
QW6 : skeleton loaders sur la liste des prestations
QW8 : hero — 1 CTA primaire dominant + 1 lien secondaire textuel
QW4 : stat-grid labels lisibles (poids + interlettrage)
============================================================ */
/* ---- QW2 : Nav "Réserver" en CTA jaune ---- */
.nav-links a.nav-cta-link {
background: var(--accent);
color: var(--accent-ink) !important;
padding: .55rem 1rem;
margin-left: .4rem;
font-weight: 700;
letter-spacing: .18em;
border: 1px solid var(--accent);
transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.nav-links a.nav-cta-link:hover { background: var(--white); border-color: var(--white); transform: translateY(-1px); }
/* Le marqueur "active" par défaut n'a pas de sens sur un CTA — on le neutralise */
.nav-links a.nav-cta-link.active::before,
.nav-links a.nav-cta-link.active::after { display: none; }
/* En mode burger (≤920px), le CTA reste plein largeur mais visuellement détaché */
@media (max-width:920px) {
.nav-links a.nav-cta-link {
margin: .35rem 1rem; padding: 1rem 1.5rem; text-align: center;
border-bottom: none;
}
}
/* ---- QW4 : stat-grid label plus lisible ---- */
.stat .lab {
font-size: .68rem;
letter-spacing: .14em;
font-weight: 500;
color: var(--off); /* remontée du gris au beige off — meilleure lisibilité */
}
/* ---- QW6 : Skeleton loaders pour la liste des prestations ---- */
@keyframes skelPulse {
0%, 100% { background-color: var(--card); }
50% { background-color: var(--card-hi); }
}
.svc-card.is-skel {
background: var(--card);
animation: skelPulse 1.4s ease-in-out infinite;
pointer-events: none;
border-color: var(--border);
}
.svc-card.is-skel .svc-skel-line {
display: block;
height: .6rem;
background: var(--border-hi);
border-radius: 2px;
margin: .55rem 0;
opacity: .55;
}
.svc-card.is-skel .svc-skel-line.w50 { width: 50%; }
.svc-card.is-skel .svc-skel-line.w70 { width: 70%; }
.svc-card.is-skel .svc-skel-line.w90 { width: 90%; }
.svc-card.is-skel .svc-skel-glyph {
width: 44px; height: 44px;
background: var(--border-hi);
border-radius: 2px;
opacity: .55;
}
.svc-card.is-skel .svc-skel-top { display: flex; align-items: center; gap: .85rem; }
@media (prefers-reduced-motion: reduce) {
.svc-card.is-skel { animation: none; }
}
/* ---- QW8 : Hero CTA — primaire dominant, secondaire en lien texte ---- */
.btn-hero-primary {
padding: 1.1rem 2.4rem;
font-size: .95rem;
letter-spacing: .24em;
box-shadow: 0 12px 32px -10px rgba(var(--accent-rgb), .45);
}
.btn-hero-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 44px -12px rgba(var(--accent-rgb), .55);
}
.hero-secondary-link {
background: transparent; border: none; cursor: pointer;
color: var(--white);
font-family: var(--font-body);
font-size: .78rem; font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
padding: .85rem .6rem;
opacity: .78;
transition: opacity .2s, color .2s, transform .2s;
}
.hero-secondary-link:hover { opacity: 1; color: var(--accent); transform: translateX(2px); }
.hero-secondary-link span { display: inline-block; margin-left: .35rem; transition: transform .25s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)); }
.hero-secondary-link:hover span { transform: translateX(4px); }
/* Mobile : le secondaire reste un lien centré sous le bouton */
@media (max-width:480px) {
.hero-cta { flex-direction: column; gap: .4rem; }
.btn-hero-primary { width: 100%; }
.hero-secondary-link { width: auto; }
}
/* ============================================================
P1 — NEW SECTIONS : audio (preuve auditive) · gallery · témoignages
Maintien strict de l'ADN poster/jaune. Composants minimaux, motion
léger (lift + fade), tout responsive.
============================================================ */
.section-intro {
color: var(--off); font-weight: 300; max-width: 56ch; line-height: 1.6;
font-size: 1.02rem; margin-top: .25rem;
}
/* ──────────────────────── AUDIO ──────────────────────── */
.section-audio { background: linear-gradient(180deg, transparent 0%, rgba(var(--accent-rgb),.03) 50%, transparent 100%); }
.audio-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
margin-top: 1rem;
}
.audio-card {
background: var(--ink);
border: 1px solid var(--border);
border-radius: 14px; /* 4 coins arrondis (sur demande utilisateur) */
padding: 1.5rem 1.5rem 1rem;
display: flex; flex-direction: column; gap: 1rem;
transition: border-color .25s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
transform .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
box-shadow .35s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
}
.audio-card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--elev-2); }
.audio-meta { display: flex; flex-direction: column; gap: .35rem; }
.audio-tag {
font-family: var(--font-mono); font-size: .58rem; letter-spacing: .22em;
text-transform: uppercase; color: var(--accent);
align-self: flex-start;
padding: .3rem .65rem;
border: 1px solid rgba(var(--accent-rgb),.3);
background: rgba(var(--accent-rgb),.05);
}
.audio-track {
font-family: var(--font-display); font-size: 2.2rem;
letter-spacing: .04em; line-height: 1;
color: var(--white);
}
.audio-artist {
font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .18em; text-transform: uppercase;
color: var(--off);
}
.audio-player {
border: none; display: block;
border-radius: 4px; overflow: hidden;
background: var(--card);
width: 100%;
}
.audio-foot {
margin-top: 2rem; text-align: center;
color: var(--off); font-size: 1rem;
display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
}
.btn-ghost-inline {
background: transparent; border: none;
color: var(--accent); font-family: var(--font-body);
font-size: .82rem; font-weight: 700; letter-spacing: .22em;
text-transform: uppercase; cursor: pointer;
padding: .55rem .9rem;
border-bottom: 1px solid var(--accent);
transition: color .2s, border-color .2s, transform .2s;
}
.btn-ghost-inline:hover { color: var(--white); border-color: var(--white); transform: translateX(2px); }
/* ──────────────────────── GALLERY ──────────────────────── */
/* ──────────────── GALERIE — carrousel + lightbox ──────────────── */
.gallery-carousel { position: relative; margin-top: 1rem; }
.gallery-track {
display: flex; gap: 1rem; overflow-x: auto;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
padding: 2px 2px 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
flex: 0 0 clamp(240px, 30%, 380px); scroll-snap-align: center;
position: relative; margin: 0; border-radius: 14px; overflow: hidden;
border: 1px solid var(--border); background: var(--ink); cursor: pointer;
aspect-ratio: 4 / 5;
}
.gallery-slide img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(8%) brightness(.92) contrast(1.06);
transition: transform .7s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)), filter .5s ease;
}
.gallery-slide:hover img, .gallery-slide:focus-visible img { transform: scale(1.06); filter: none; }
.gallery-slide:hover, .gallery-slide:focus-visible { border-color: var(--border-hi); outline: none; }
.gallery-slide figcaption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.2rem .9rem;
font-family: var(--font-mono); font-size: .58rem; letter-spacing: .22em;
text-transform: uppercase; color: var(--white);
background: linear-gradient(0deg, rgba(5,5,5,.88) 0%, rgba(5,5,5,.4) 60%, transparent 100%);
pointer-events: none;
}
.gallery-slide::after { /* indice "agrandir" au survol */
content: '⤢'; position: absolute; top: .8rem; right: .9rem;
width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25);
border-radius: 50%; color: #fff; font-size: .85rem; opacity: 0; transition: opacity .3s;
}
.gallery-slide:hover::after, .gallery-slide:focus-visible::after { opacity: 1; }
.gallery-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
background: rgba(10,10,10,.72); border: 1px solid var(--border-hi); color: var(--white);
font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px); transition: background .25s, color .25s, border-color .25s;
}
.gallery-nav:hover { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.gallery-prev { left: -10px; }
.gallery-next { right: -10px; }
/* Lightbox (image en grand) */
.lightbox {
position: fixed; inset: 0; z-index: 2000;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
padding: 4vh 2vw; opacity: 0; animation: lbIn .25s ease forwards;
}
.lightbox[hidden] { display: none; }
@keyframes lbIn { to { opacity: 1; } }
.lightbox-figure {
margin: 0; max-width: 92vw; max-height: 86vh;
display: flex; flex-direction: column; align-items: center; gap: .8rem;
}
.lightbox-img {
max-width: 92vw; max-height: 80vh; object-fit: contain;
border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.lightbox-cap {
font-family: var(--font-mono); font-size: .62rem; letter-spacing: .22em;
text-transform: uppercase; color: var(--off); text-align: center;
}
.lightbox-btn {
position: absolute; z-index: 2; width: 48px; height: 48px; border-radius: 50%;
background: rgba(20,20,20,.7); border: 1px solid var(--border-hi); color: #fff;
cursor: pointer; font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
transition: background .25s, color .25s, border-color .25s;
}
.lightbox-btn:hover { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.lightbox-close { top: 3vh; right: 3vw; }
.lightbox-prev { left: 2vw; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 2vw; top: 50%; transform: translateY(-50%); }
/* ──────────────────────── TÉMOIGNAGES ──────────────────────── */
.reviews {
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--border); border: 1px solid var(--border);
margin-top: 1rem;
}
.review {
background: var(--ink); padding: 2.5rem 2.25rem 2.25rem;
display: flex; flex-direction: column; gap: 1.25rem;
position: relative;
transition: background .25s;
}
.review:hover { background: var(--card); }
.review-quote-mark {
font-family: var(--font-display); font-size: 5rem; line-height: .8;
color: var(--accent);
position: absolute; top: 1rem; right: 1.5rem;
opacity: .25; pointer-events: none;
}
.review-text {
font-family: var(--font-body); font-size: 1.25rem;
line-height: 1.5; color: var(--white); font-weight: 400;
margin: 0; padding: 0;
border: none; quotes: none;
position: relative; z-index: 1;
}
.review-author {
display: flex; align-items: center; gap: 1rem;
padding-top: 1rem; border-top: 1px solid var(--border);
}
.review-avatar {
width: 44px; height: 44px;
background: var(--accent); color: var(--accent-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 1.15rem;
letter-spacing: .04em;
flex-shrink: 0;
}
.review-handle {
display: flex; flex-direction: column; gap: .15rem;
min-width: 0;
}
.review-handle strong {
font-family: var(--font-mono); font-size: .82rem;
color: var(--white); font-weight: 700;
letter-spacing: .04em;
}
.review-handle small {
font-family: var(--font-mono); font-size: .58rem;
letter-spacing: .2em; text-transform: uppercase;
color: var(--gray);
}
/* ──────────────────────── RESPONSIVE ──────────────────────── */
@media (max-width:1000px) {
.audio-grid { grid-template-columns: 1fr; }
.reviews { grid-template-columns: 1fr; }
.gallery-slide { flex-basis: clamp(220px, 46%, 320px); }
}
@media (max-width:560px) {
.gallery-slide { flex-basis: 80%; }
.gallery-prev { left: 4px; }
.gallery-next { right: 4px; }
.lightbox-close { top: 1.5vh; right: 4vw; }
.lightbox-prev { left: 3vw; }
.lightbox-next { right: 3vw; }
.lightbox-img { max-height: 72vh; }
.review { padding: 1.75rem 1.5rem; }
.review-text { font-size: 1.08rem; }
.audio-card { padding: 1.25rem 1.25rem .85rem; }
.audio-track { font-size: 1.85rem; }
}
/* ============================================================
P2 — Différenciateurs + FAQ
Cards et accordéons natifs . ADN poster/jaune préservé.
============================================================ */
/* ──────────────── DIFFÉRENCIATEURS ──────────────── */
.differentiators {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 1rem;
}
.diff-card {
background: var(--ink);
padding: 2.25rem 1.75rem;
display: flex; flex-direction: column; gap: 1rem;
position: relative; overflow: hidden;
transition: background .25s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
min-height: 260px;
}
.diff-card:hover { background: var(--card); }
.diff-card::after {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; background: var(--accent);
transform: scaleX(0); transform-origin: left;
transition: transform .4s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.diff-card:hover::after { transform: scaleX(1); }
.diff-glyph {
width: 56px; height: 56px;
border: 1px solid var(--border-hi);
display: flex; align-items: center; justify-content: center;
background: rgba(var(--accent-rgb), .04);
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--accent);
letter-spacing: .04em;
transition: border-color .25s, background .25s, transform .35s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.diff-card:hover .diff-glyph {
border-color: var(--accent);
background: rgba(var(--accent-rgb), .08);
transform: rotate(-3deg);
}
.diff-title {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: .04em;
color: var(--white);
line-height: 1.05;
}
.diff-desc {
font-size: .92rem;
color: var(--off);
font-weight: 300;
line-height: 1.6;
flex: 1;
}
/* ──────────────── FAQ ──────────────── */
.faq-list {
display: flex; flex-direction: column;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
margin-top: 1rem;
}
.faq-item {
background: var(--ink);
transition: background .2s;
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 1.4rem 1.75rem;
display: flex; align-items: center; justify-content: space-between;
gap: 1.5rem;
font-family: var(--font-display);
font-size: 1.25rem;
letter-spacing: .03em;
color: var(--white);
transition: background .2s, color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-family: var(--font-mono);
font-size: 1.7rem;
color: var(--accent);
line-height: 1;
flex-shrink: 0;
display: inline-block;
transition: transform .35s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.faq-item:hover summary { background: var(--card); }
.faq-item[open] summary { background: var(--card); color: var(--accent); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
padding: 0 1.75rem 1.5rem;
font-size: .97rem;
color: var(--off);
font-weight: 300;
line-height: 1.7;
max-width: 72ch;
animation: faqIn .35s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.faq-item .faq-answer strong { color: var(--white); font-weight: 600; }
@keyframes faqIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.faq-foot {
margin-top: 2rem; text-align: center;
color: var(--off); font-size: 1rem;
display: flex; align-items: center; justify-content: center; gap: .5rem;
flex-wrap: wrap;
}
/* ──────────────── RESPONSIVE ──────────────── */
@media (max-width:1000px) {
.differentiators { grid-template-columns: 1fr 1fr; }
}
@media (max-width:560px) {
.differentiators { grid-template-columns: 1fr; }
.diff-card { min-height: 0; padding: 1.75rem 1.5rem; }
.faq-item summary { padding: 1.15rem 1.25rem; font-size: 1.05rem; gap: 1rem; }
.faq-item .faq-answer { padding: 0 1.25rem 1.2rem; font-size: .92rem; }
}
/* ============================================================
P3 — Motion + accent sémantique + services compacts mobile
============================================================ */
/* ──────────────── 1. Accent 2 (couleur sémantique d'appoint) ──────────────── */
/* Un teal/cyan désaturé, complémentaire du jaune sans le concurrencer.
Sémantique : INFORMATION / CATÉGORIE / MÉTA. Le jaune reste réservé aux ACTIONS. */
:root {
--accent-2: #88C8D0;
--accent-2-rgb: 136, 200, 208;
--accent-2-dim: #5DA6AE;
}
/* Application ciblée — seulement sur les éléments "info" pour créer une vraie hiérarchie :
Action (jaune) > Information (teal) > Méta (gris). */
.audio-tag { /* badge "↻ Single" — info, pas action */
color: var(--accent-2);
border-color: rgba(var(--accent-2-rgb), .4);
background: rgba(var(--accent-2-rgb), .07);
}
.stat .idx { /* /A /B /C /D — méta secondaire en teal */
color: var(--accent-2);
opacity: .85;
}
.review-quote-mark { /* le grand " décoratif des témoignages */
color: var(--accent-2);
opacity: .35;
}
.diff-card:nth-child(2) .diff-glyph, /* alternance teal sur 2 cartes diff */
.diff-card:nth-child(4) .diff-glyph {
color: var(--accent-2);
background: rgba(var(--accent-2-rgb), .06);
border-color: rgba(var(--accent-2-rgb), .3);
}
.diff-card:nth-child(2):hover .diff-glyph,
.diff-card:nth-child(4):hover .diff-glyph {
border-color: var(--accent-2);
background: rgba(var(--accent-2-rgb), .12);
}
/* ──────────────── 2. Motion enrichissement ──────────────── */
/* (a) Scroll reveal — fade up + soft scale sur les sections principales.
Piloté par IntersectionObserver (JS) : on ajoute .is-revealed quand la section
entre dans le viewport. Tout en GPU (opacity + transform). */
.section.reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity .8s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
transform .9s var(--ease-out-expo, cubic-bezier(.16,1,.3,1));
will-change: opacity, transform;
}
.section.reveal.is-revealed {
opacity: 1;
transform: translateY(0);
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.section.reveal { opacity: 1; transform: none; transition: none; }
}
/* (b) Stagger : les enfants directs des grilles révèlent en cascade.
On le fait CSS-only via animation-delay sur les enfants une fois la section visible. */
.section.is-revealed .differentiators > .diff-card,
.section.is-revealed .audio-grid > .audio-card,
.section.is-revealed .reviews > .review,
.section.is-revealed .faq-list > .faq-item,
.section.is-revealed .stat-grid > .stat,
.section.is-revealed .services > .service {
animation: childIn .65s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)) backwards;
}
.section.is-revealed .audio-grid > :nth-child(1),
.section.is-revealed .reviews > :nth-child(1),
.section.is-revealed .differentiators > :nth-child(1),
.section.is-revealed .faq-list > :nth-child(1),
.section.is-revealed .stat-grid > :nth-child(1),
.section.is-revealed .services > :nth-child(1) { animation-delay: .08s; }
.section.is-revealed .audio-grid > :nth-child(2),
.section.is-revealed .reviews > :nth-child(2),
.section.is-revealed .differentiators > :nth-child(2),
.section.is-revealed .faq-list > :nth-child(2),
.section.is-revealed .stat-grid > :nth-child(2),
.section.is-revealed .services > :nth-child(2) { animation-delay: .16s; }
.section.is-revealed .differentiators > :nth-child(3),
.section.is-revealed .faq-list > :nth-child(3),
.section.is-revealed .stat-grid > :nth-child(3),
.section.is-revealed .services > :nth-child(3) { animation-delay: .24s; }
.section.is-revealed .differentiators > :nth-child(4),
.section.is-revealed .faq-list > :nth-child(4),
.section.is-revealed .stat-grid > :nth-child(4) { animation-delay: .32s; }
.section.is-revealed .faq-list > :nth-child(5) { animation-delay: .40s; }
.section.is-revealed .faq-list > :nth-child(6) { animation-delay: .48s; }
@keyframes childIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.section.is-revealed .differentiators > .diff-card,
.section.is-revealed .audio-grid > .audio-card,
.section.is-revealed .reviews > .review,
.section.is-revealed .faq-list > .faq-item,
.section.is-revealed .stat-grid > .stat,
.section.is-revealed .services > .service { animation: none; }
}
/* (c) Gradients atmosphériques subtils — profondeur sans casser l'ADN poster.
Très basse opacité (3-6%), uniquement sur les sections à fort impact. */
.section-diff {
position: relative;
background:
radial-gradient(ellipse 800px 400px at 20% 0%, rgba(var(--accent-rgb), .035), transparent 60%),
radial-gradient(ellipse 600px 300px at 80% 100%, rgba(var(--accent-2-rgb), .05), transparent 60%);
}
.section-testimonials {
position: relative;
background:
radial-gradient(ellipse 1000px 500px at 50% 50%, rgba(var(--accent-2-rgb), .03), transparent 70%);
}
.section-faq {
position: relative;
background:
radial-gradient(ellipse 700px 400px at 100% 0%, rgba(var(--accent-rgb), .04), transparent 65%);
}
/* (d) Ligne fine animée en accent-2 qui sépare visuellement les sections principales
(sous le kicker). Apparaît au reveal, donne du rythme éditorial. */
.section.reveal .section-label {
position: relative;
}
/* ──────────────── 3. Services mobile ──────────────── */
/* Cartes image plein cadre : on réduit la hauteur et les marges internes. */
@media (max-width:760px) {
.service { min-height: 280px; }
.service-idx { top: 1.2rem; right: 1.3rem; font-size: .6rem; letter-spacing: .22em; }
.service-body { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; gap: .7rem; }
.service-name { font-size: clamp(1.9rem, 8vw, 2.6rem); }
.service-desc {
font-size: .9rem; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
}
.service-link { padding-top: 1rem; }
}
/* ============================================================
Stat-grid (section "Créé pour les artistes") — cartes détachées
et coins arrondis, sur demande utilisateur.
On retire l'astuce "background:--border + gap:1px" (qui simulait
des séparateurs 1px) au profit d'un vrai gap + bordure par carte.
============================================================ */
.stat-grid {
gap: 1rem; /* écart visible entre les 4 cartes */
background: transparent; /* plus de "filet" de séparation */
border: none;
}
.stat {
border: 1px solid var(--border); /* chaque carte a sa propre bordure */
border-radius: 14px; /* 4 coins arrondis identiques aux cartes audio */
transition: background .2s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
border-color .2s,
transform .25s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.stat:hover {
background: var(--card);
border-color: var(--border-hi);
transform: translateY(-2px); /* petit lift cohérent avec les autres cartes */
}
@media (max-width:480px) {
.stat-grid { gap: .75rem; }
}
/* ============================================================
GLOBAL — Cards/containers/boxes "détachés" + coins arrondis
Demande utilisateur : sur tout le site, les blocs collés via
l'astuce "background:--border + gap:1px" sont remplacés par un
vrai gap visible, chaque carte récupère sa propre bordure 1px
et un radius cohérent. Buttons, chips et la cabine du calendrier
restent inchangés (ADN poster préservé sur les éléments d'action).
============================================================ */
/* (a) On retire l'astuce de séparateurs sur les conteneurs grid */
.services, .pricing, .notice, .clips-grid, .gear-band, .rules,
.differentiators, .reviews, .faq-list, .gallery, .kpi-row {
gap: 1rem;
background: transparent;
border: none;
}
/* (b) Chaque carte content récupère sa bordure 1px + radius 14px */
.service,
.price-row,
.notice > div,
.clip,
.gear-cell,
.rule,
.diff-card,
.review,
.faq-item,
.gallery-tile,
.kpi {
border: 1px solid var(--border);
border-radius: 14px;
transition: border-color .25s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
background .25s,
transform .25s var(--ease-out-quart, cubic-bezier(.25,1,.5,1)),
box-shadow .25s var(--ease-out-quart, cubic-bezier(.25,1,.5,1));
}
.service:hover,
.price-row:hover,
.notice > div:hover,
.clip:hover,
.gear-cell:hover,
.rule:hover,
.diff-card:hover,
.review:hover,
.gallery-tile:hover,
.kpi:hover {
border-color: var(--border-hi);
}
/* (c) Location — 2 blocs collés via border-left, on détache */
.location {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
border: none;
}
.location > div {
border: 1px solid var(--border);
border-radius: 14px;
}
.location-map { border-left: 1px solid var(--border); } /* on remet à plat l'ancien override */
/* Mobile/tablette : localisation en 1 colonne (carte SOUS l'adresse).
Placé APRÈS l'override 2-colonnes ci-dessus pour bien le neutraliser —
sinon la carte se retrouve écrasée en fine bande verticale. */
@media (max-width: 1000px) {
.location { grid-template-columns: 1fr; }
.location-map { border-left: none; min-height: 300px; }
}
/* (d) Cartes single-block déjà existantes — uniformisation du radius
(auparavant 4px ou 0, on harmonise à 14px sauf les inputs/petits éléments). */
.svc-card,
.booking-aside,
.booking-success,
.photo-card,
.rules-warn {
border-radius: 14px;
}
/* (e) Éléments interactifs taille moyenne — radius 10px (plus contenu) */
.engineer-opt,
.form-check,
.modal {
border-radius: 10px;
}
/* (f) Effets de coin propres sur les pseudos décoratifs.
Les ::after de .service et .diff-card sont des soulignements 2px
en bas de carte. Avec un border-radius parent, on ajoute overflow:hidden
pour éviter les coins qui dépassent. */
.service, .diff-card { overflow: hidden; }
/* (g) FAQ — le summary doit pouvoir prendre les coins du conteneur quand fermé,
et seulement les coins du haut quand ouvert (l'answer prend les coins du bas). */
.faq-item summary { border-radius: 14px; transition: border-radius .25s; }
.faq-item[open] summary { border-radius: 14px 14px 0 0; }
/* (h) Mobile — gap un poil plus serré pour ne pas trop espacer */
@media (max-width:760px) {
.services, .pricing, .notice, .clips-grid, .gear-band, .rules,
.differentiators, .reviews, .faq-list, .gallery, .kpi-row,
.location { gap: .75rem; }
}
/* ============================================================
GLOBAL — Coins arrondis sur TOUS les boutons du site
Sur demande utilisateur. Radius 10px : visible sans être trop pillule,
cohérent avec les composants moyens (modal, engineer-opt, form-check).
Les CTA hero gardent 12px (plus grands → coin un peu plus marqué).
Les petits boutons icônes (admin) restent à 8px pour rester compacts.
============================================================ */
/* Boutons standards (homepage, pages services, règlement, hero, etc.) */
.btn,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-danger,
.btn-sm,
.nav-cta-link,
.btn-ghost-inline,
.svc-cat-chip,
.eng-avail-add,
.svc-step-btn,
.menu-toggle,
.admin-tab,
.admin-badge,
.lb-close,
.lb-nav {
border-radius: 10px;
}
/* Boutons hero plus grands : un poil plus de rayon pour rester proportionnel */
.btn-hero-primary {
border-radius: 12px;
}
/* Boutons icônes (admin row-actions, modal-close, etc.) — plus petits */
.btn-icon,
.modal-close,
.eng-avail-row-head button,
.eng-avail-slot .rm,
.cal-nav button {
border-radius: 8px;
}
/* Boutons du footer (Instagram + Mentions légales) — même radius que les boutons standards */
footer .so a,
footer .so button {
border-radius: 10px;
}
/* ============================================================
NAV — barre flottante arrondie (style référence demandée)
• La nav se détache des bords avec une marge tout autour
• Coins arrondis 16px, vraie bordure 1px sur les 4 côtés
• Ombre douce pour l'effet "carte qui flotte"
• Le marquee + le panneau burger sont repositionnés pour rester
visuellement alignés sous la nav (mêmes marges latérales,
mêmes radius)
• Identité graphique inchangée : fond noir translucide blurré,
accents jaunes, typographies d'origine.
============================================================ */
nav {
top: .85rem !important;
left: 1rem !important;
right: 1rem !important;
border-radius: 16px;
border: 1px solid var(--border); /* bordure complète, plus juste le bord du bas */
background: rgba(5,5,5,.86); /* un peu plus opaque puisqu'elle flotte au-dessus du contenu */
box-shadow: 0 12px 32px -12px rgba(0,0,0,.7),
0 1px 0 rgba(255,255,255,.04) inset;
}
/* Marquee — aligné sur les marges de la nav pour une cohérence visuelle */
.hero-marquee {
top: calc(.85rem + 64px + .4rem) !important; /* juste sous la nav flottante */
left: 1rem !important;
right: 1rem !important;
border-radius: 10px;
border-bottom: none;
overflow: hidden;
}
/* Panneau du menu burger (mobile/tablette ≤ 920px) — alignement identique à la nav */
@media (max-width:920px) {
.nav-links {
top: calc(.85rem + 64px + .4rem) !important;
left: 1rem !important;
right: 1rem !important;
border-radius: 16px;
border: 1px solid var(--border);
}
}
/* Mobile étroit : on resserre les marges latérales pour ne pas écraser le contenu */
@media (max-width:480px) {
nav {
top: .6rem !important;
left: .6rem !important;
right: .6rem !important;
border-radius: 14px;
}
.hero-marquee {
top: calc(.6rem + 64px + .35rem) !important;
left: .6rem !important;
right: .6rem !important;
border-radius: 8px;
}
.nav-links {
top: calc(.6rem + 64px + .35rem) !important;
left: .6rem !important;
right: .6rem !important;
border-radius: 14px;
}
}
/* ============================================================
ADMIN — burger inline pour changer de section (mobile ≤ 920px)
Sections : Dashboard / Réservations / Prestations / Ingénieurs /
Disponibilités.
Desktop : barre d'onglets horizontale inchangée, burger masqué.
============================================================ */
.admin-burger { display: none; }
@media (max-width: 920px) {
/* Bouton burger inline (visible dans le flux admin, sous l'en-tête).
Icône 3 lignes + libellé "Sections" pour qu'il soit immédiatement
repérable et compréhensible. */
.admin-burger {
display: inline-flex; align-items: center; gap: .75rem;
background: var(--ink);
border: 1px solid var(--border);
border-radius: 12px;
padding: .75rem 1rem;
color: var(--white);
font-family: var(--font-mono);
font-size: .65rem;
letter-spacing: .22em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .2s, background .2s;
margin-bottom: 1.25rem;
}
.admin-burger:hover { border-color: rgba(var(--accent-rgb), .5); }
.admin-burger-icon {
display: inline-flex; flex-direction: column; justify-content: center;
gap: 4px; width: 22px; height: 16px;
}
.admin-burger-icon span {
display: block; height: 2px; width: 100%;
background: var(--white); border-radius: 2px;
transition: transform .3s var(--ease), opacity .2s, background .2s;
transform-origin: center;
}
.admin-burger-text { white-space: nowrap; }
.admin-burger[aria-expanded="true"] {
border-color: rgba(var(--accent-rgb), .6);
color: var(--accent);
}
.admin-burger[aria-expanded="true"] .admin-burger-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--accent); }
.admin-burger[aria-expanded="true"] .admin-burger-icon span:nth-child(2) { opacity: 0; }
.admin-burger[aria-expanded="true"] .admin-burger-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--accent); }
/* La barre d'onglets devient un panneau déroulant inline juste sous
le bouton burger. Masqué par défaut, affiché quand .is-open. */
.admin-tabs {
display: none;
flex-direction: column;
gap: 0;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--ink);
margin-bottom: 2rem;
overflow: hidden;
}
.admin-tabs.is-open { display: flex; }
.admin-tab {
width: 100%; text-align: left;
padding: 1rem 1.1rem;
border-bottom: 1px solid var(--border);
font-size: .72rem;
}
.admin-tab:last-child { border-bottom: none; }
.admin-tab.is-active { background: rgba(var(--accent-rgb), .08); color: var(--accent); }
.admin-tab.is-active::after {
left: 0; right: auto; top: .5rem; bottom: .5rem;
width: 3px; height: auto;
}
.admin-tab .count { float: right; margin-left: .5rem; }
}
/* ============================================================
RESPONSIVE POLISH — passes finales pour assurer la cohérence
mobile sur tout le site (toutes pages + panel admin).
============================================================ */
/* ≤ 760px : tablette / mobile large
- Aside du booking ne reste plus sticky (sinon il dépasse)
- Calendrier et créneaux : moins de padding pour gagner de l'espace
- Pages services : grille 6 prestations qui devient 1 colonne propre
*/
@media (max-width: 760px) {
.booking-aside { position: relative; top: auto; max-height: none; }
.cal-panel, .slot-panel { padding: 1.25rem 1rem 1.25rem; }
.extras-grid, .rules-grid { grid-template-columns: 1fr; }
/* Modales : tout l'espace utile */
.modal { width: calc(100% - 1.5rem); }
}
/* ≤ 560px : mobile standard
- Grilles auto-fill rigides → forcées en 1 colonne
- Cartes prestations / KPI / formulaires admin empilées
*/
@media (max-width: 560px) {
.svc-grid { grid-template-columns: 1fr; }
.kpi-row { grid-template-columns: 1fr; }
.admin-form-grid { grid-template-columns: 1fr; }
/* Lignes de prix des pages services : on empile l'index, la description et le montant */
.price-row {
grid-template-columns: 1fr;
gap: .35rem;
padding-bottom: 1.25rem;
border-bottom: 1px dashed var(--border);
}
.price-row .idx { margin-bottom: .25rem; }
.price-row .amt { justify-self: start; }
/* Reviews / témoignages : padding maîtrisé */
.review { padding: 1.4rem 1.2rem; }
/* Form-grid réservation (champs client) : 1 colonne */
.form-grid { grid-template-columns: 1fr; }
}
/* ≤ 480px : très petit mobile
- Polices et padding plus compacts dans le panel admin
- Tables admin : on garantit le scroll horizontal (déjà sous overflow-x:auto
pour la plupart, mais on serre les paddings et la taille de police)
- Slot row : 3 créneaux par ligne, plus large pour cibles tactiles
*/
@media (max-width: 480px) {
.admin-shell { padding-left: .85rem; padding-right: .85rem; }
.admin-title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.data-table { font-size: .72rem; }
.data-table th, .data-table td { padding: .55rem .45rem; }
/* Stepper booking : numéros bien centrés, sans débordement */
.step-pill { padding: .7rem .3rem; }
/* Galerie : 1 colonne pour les vignettes */
.gallery-grid { grid-template-columns: 1fr; }
/* Hero : titres et CTA plus compacts (le clamp existant aide déjà,
on s'assure juste que les marges latérales sont confortables) */
.hero-stage { padding-left: .25rem; padding-right: .25rem; }
}
/* ============================================================
STATUS SELECT — adaptations mobile (tableau Réservations admin)
============================================================ */
@media (max-width: 920px) {
/* Le wrapper de la table admin est déjà overflow-x:auto, donc le
sélecteur garde sa taille — on s'assure juste qu'il reste tactile. */
.status-select {
padding: .45rem 1.7rem .45rem .7rem;
font-size: .6rem;
min-height: 36px; /* cible tactile confortable */
}
/* Sur mobile, les actions de ligne se serrent + le select doit pouvoir
dépasser la cellule si besoin (la cellule a overflow:visible). */
.data-table td .row-actions {
flex-wrap: wrap;
gap: .3rem;
justify-content: flex-start;
}
}
@media (max-width: 480px) {
.status-select {
width: 100%; /* prend toute la largeur de la cellule */
min-width: 7.5rem;
padding: .55rem 1.8rem .55rem .65rem;
font-size: .62rem;
}
}
/* ============================================================
CARTE LEAFLET — intégration visuelle dans la charte SMOW
• Tiles CARTO Dark Matter (gratuit, sans clé) pour matcher
le fond noir du site.
• On désactive les éléments décoratifs de l'ancien .location-map
(gradient diagonal + radial accent) pour laisser place aux tiles.
• Coin arrondi qui suit le radius du conteneur parent.
• Hauteur min 320px en desktop, plus compacte en mobile.
============================================================ */
.location-map { padding: 0 !important; overflow: hidden; }
.location-map::before { display: none !important; }
.smow-map {
width: 100%;
min-height: 360px;
height: 100%;
background: var(--ink);
border-radius: 14px;
position: relative;
z-index: 0;
}
/* On donne un fond accent diffus pendant le chargement des tiles, pour
éviter le grand carré noir le temps du fetch (perçu plus rapide). */
.smow-map::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.06), transparent 60%);
pointer-events: none;
z-index: 0;
}
.smow-map.is-ready::before { display: none; }
/* Marker custom (pin accent jaune avec halo pulsé, dans l'esprit
de l'ancien .map-pin) */
.smow-marker {
width: 22px; height: 22px;
background: var(--accent);
border: 3px solid var(--black);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--accent), 0 6px 16px -4px rgba(var(--accent-rgb), .7);
position: relative;
}
.smow-marker::after {
content: '';
position: absolute; inset: -10px;
border: 1px solid var(--accent);
border-radius: 50%;
opacity: .5;
animation: smowMarkerPulse 2s infinite;
}
@keyframes smowMarkerPulse {
0% { transform: scale(1); opacity: .55; }
100% { transform: scale(2.2); opacity: 0; }
}
/* Fond de carte OpenStreetMap (gratuit, sans clé) rendu en thème sombre via
un filtre CSS. Ciblé sur .leaflet-tile-pane uniquement → le marqueur, les
contrôles et l'attribution gardent leurs couleurs normales. */
.leaflet-tile-pane {
filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) grayscale(0.15);
}
/* Popup Leaflet : restyle pour matcher le design du site */
.leaflet-popup-content-wrapper {
background: var(--ink);
color: var(--white);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 12px 32px -12px rgba(0,0,0,.7);
}
.leaflet-popup-content {
margin: .85rem 1rem;
font-family: var(--font-body);
font-size: .9rem;
line-height: 1.5;
}
.leaflet-popup-content strong {
display: block;
font-family: var(--font-display);
letter-spacing: .08em;
color: var(--accent);
text-transform: uppercase;
font-weight: 400;
margin-bottom: .3rem;
}
.leaflet-popup-content a {
display: inline-block; margin-top: .5rem;
font-family: var(--font-mono); font-size: .6rem;
letter-spacing: .22em; text-transform: uppercase;
color: var(--accent); text-decoration: none;
border-bottom: 1px solid rgba(var(--accent-rgb), .35);
padding-bottom: 2px;
}
.leaflet-popup-content a:hover { border-bottom-color: var(--accent); }
.leaflet-popup-tip { background: var(--ink); border: 1px solid var(--border); }
.leaflet-popup-close-button { color: var(--off) !important; }
/* Contrôles zoom : intégrés à la charte */
.leaflet-control-zoom a {
background: var(--ink) !important;
color: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: 8px !important;
transition: background .2s, color .2s, border-color .2s;
}
.leaflet-control-zoom a:hover {
background: var(--card) !important;
color: var(--accent) !important;
border-color: rgba(var(--accent-rgb), .5) !important;
}
.leaflet-control-zoom a:first-child { margin-bottom: 4px; }
/* Attribution : version sobre */
.leaflet-control-attribution {
background: rgba(5,5,5,.7) !important;
color: var(--gray) !important;
font-family: var(--font-mono);
font-size: .55rem;
letter-spacing: .05em;
padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: var(--off) !important; }
/* Fallback noscript (lien direct OSM) */
.smow-map-fallback {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 360px;
padding: 2rem; text-align: center;
color: var(--accent); text-decoration: none;
font-family: var(--font-mono); font-size: .7rem;
letter-spacing: .18em; text-transform: uppercase;
background: var(--ink);
border-radius: 14px;
}
.smow-map-fallback:hover { background: var(--card); }
/* Responsive : carte plus compacte sur mobile */
@media (max-width: 1100px) {
.smow-map { min-height: 300px; }
}
@media (max-width: 560px) {
.smow-map, .smow-map-fallback { min-height: 260px; }
}
/* ============================================================
GEAR — section "Notre matériel" (page Enregistrement)
• Cartes sombres arrondies qui matchent la charte.
• Images PNG transparentes : aucun trick CSS nécessaire, on laisse
l'alpha faire son boulot. Le produit est posé sur le fond sombre
de la carte avec un léger halo accent en backdrop pour le pop.
============================================================ */
.gear-section { margin-top: 4rem; }
.gear-section .section-head { margin-top: 0; }
.gear-intro {
color: var(--off);
font-weight: 300;
line-height: 1.65;
margin-bottom: 2.25rem;
max-width: 720px;
}
.gear-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: 1.25rem;
}
.gear-card {
background: linear-gradient(180deg, var(--card) 0%, var(--ink) 100%);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gear-card:hover {
border-color: rgba(var(--accent-rgb), .35);
transform: translateY(-3px);
box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .7);
}
.gear-thumb {
aspect-ratio: 1 / 1;
background:
radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), .06), transparent 65%),
var(--ink);
display: flex;
align-items: center;
justify-content: center;
padding: 1.1rem;
position: relative;
overflow: hidden;
}
.gear-thumb img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
/* Petite ombre douce sous le produit pour qu'il ne "flotte" pas
trop sec sur le fond — n'affecte pas l'alpha du PNG. */
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55));
transition: transform .35s var(--ease);
}
.gear-card:hover .gear-thumb img { transform: scale(1.04); }
.gear-body {
padding: 1.1rem 1.25rem 1.4rem;
display: flex;
flex-direction: column;
gap: .35rem;
}
.gear-brand {
font-family: var(--font-mono);
font-size: .56rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--accent);
}
.gear-name {
font-family: var(--font-display);
font-size: 1.4rem;
letter-spacing: .04em;
color: var(--white);
font-weight: 400;
text-transform: uppercase;
line-height: 1.1;
}
.gear-desc {
font-size: .85rem;
color: var(--off);
font-weight: 300;
line-height: 1.55;
margin-top: .2rem;
}
@media (max-width: 760px) {
.gear-section { margin-top: 3rem; }
.gear-grid { gap: 1rem; }
}
@media (max-width: 560px) {
.gear-grid { grid-template-columns: 1fr 1fr; }
.gear-name { font-size: 1.2rem; }
.gear-desc { font-size: .8rem; }
.gear-body { padding: 1rem 1rem 1.2rem; }
}
@media (max-width: 380px) {
.gear-grid { grid-template-columns: 1fr; }
}
/* Mobile : "Le matériel" en slider horizontal (swipe) pour gagner de la hauteur */
@media (max-width: 620px){
.gear-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;padding-bottom:.7rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gear-grid::-webkit-scrollbar{display:none}
.gear-card{flex:0 0 74%;scroll-snap-align:center}
}
/* Mobile : titres d'en-tête de page réduits (évite le débordement des mots longs) */
@media (max-width: 600px){
.page-header h1{font-size:clamp(2rem,10vw,3.6rem);overflow-wrap:break-word}
}
/* =================================================================
CHROME MAQUETTE — nav + drawer + footer + curseur
(porté depuis assets/maquette.css, classes préfixées .m- pour
cohabiter avec le design-system SMOW sans collision, tokens SMOW)
Pages autonomes : reservation.html, admin.html, mentions-legales.html
================================================================= */
/* ---- Curseur custom (piloté par assets/maquette.js) ---- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;translate:-50% -50%;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1px solid #fff;transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor-dot{width:5px;height:5px;background:#fff}
body.cursor-hover .cursor{width:58px;height:58px;background:rgba(255,255,255,.1)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}
/* ---- Nav fixe ---- */
.m-nav{position:fixed;inset:0 0 auto 0;z-index:900;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.m-nav.scrolled{background:rgba(9,9,10,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--border)}
.m-nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;max-width:1320px;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,3.5rem)}
.m-brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.4rem;letter-spacing:.06em;color:var(--white)}
.m-nav-links{display:flex;gap:2.2rem;align-items:center}
.m-nav-links a{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);position:relative;padding:.3rem 0;transition:color .3s}
.m-nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .35s var(--ease)}
.m-nav-links a:hover,.m-nav-links a.active{color:var(--white)}
.m-nav-links a:hover::after,.m-nav-links a.active::after{width:100%}
.m-nav-cta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--border-hi);border-radius:40px;padding:.6rem 1.2rem;color:var(--white);transition:.35s var(--ease)}
.m-nav-cta:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.m-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.m-burger span{width:24px;height:2px;background:var(--white);transition:.3s}
@media(max-width:860px){.m-nav-links{display:none}.m-burger{display:flex}.m-nav-cta{margin-left:auto;margin-right:.9rem}}
@media(max-width:520px){.m-nav-cta{display:none}}
/* ---- Drawer mobile ---- */
.m-drawer{position:fixed;inset:0;z-index:950;background:rgba(9,9,10,.97);backdrop-filter:blur(10px);display:none;flex-direction:column;justify-content:center;gap:1.2rem;padding:clamp(1.15rem,4vw,3.5rem)}
.m-drawer.open{display:flex}
.m-drawer a{font-family:var(--font-display);font-size:2rem;text-transform:uppercase;letter-spacing:.03em;color:var(--white)}
.m-drawer a:hover{color:var(--accent)}
.m-drawer .x{position:absolute;top:1.8rem;right:1.5rem;background:none;border:1px solid var(--border-hi);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.2rem}
/* ---- Footer maquette ---- */
.m-footer{border-top:1px solid var(--border);padding-block:clamp(2.2rem,4vw,3.2rem) 2rem;margin-top:clamp(2.4rem,5vw,4rem);padding-inline:clamp(1.15rem,4vw,3.5rem)}
.m-foot-in{width:100%;max-width:1320px;margin-inline:auto}
.m-foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;align-items:flex-start}
.m-foot-brand{font-family:var(--font-display);font-size:clamp(3rem,10vw,7rem);line-height:.8;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--border-hi)}
.m-foot-col{display:flex;flex-direction:column;gap:.7rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.m-foot-col a{color:var(--gray)}
.m-foot-col a:hover{color:var(--accent)}
.m-foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* ---- Fond d'ambiance global (halos + grille), comme la maquette ---- */
body.sa-page::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(50% 42% at 88% -6%,rgba(var(--accent-rgb),.06),transparent 60%),
radial-gradient(46% 40% at 3% 8%,rgba(124,92,255,.07),transparent 62%),
radial-gradient(64% 52% at 50% 114%,rgba(124,92,255,.05),transparent 60%),
linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
background-size:100% 100%,100% 100%,100% 100%,72px 72px,72px 72px}
/* Les pages autonomes n'ont pas de marqueur : la page-header gère déjà le
dégagement sous la nav fixe (padding-top 6.5rem > 74px). */
body.sa-page .page-header{margin-top:0}
/* Défense : un