/* Bamako Life — site (bamako-life.app) */
:root { --bg:#14202c; --bg2:#1b2a3a; --card:#223548; --ink:#f4efe6; --soft:#a9b8c6; --ochre:#f2a93b; --terra:#e4572e; --teal:#3fb6a8; --ok:#5fbf7a; --r:18px; --ease:cubic-bezier(.2,.7,.2,1); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--ochre); outline-offset:3px; border-radius:8px; }
h1,h2,h3 { line-height:1.08; margin:0; letter-spacing:-.01em; }
.eyebrow { margin:0 0 10px; color:var(--ochre); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; }

#progress { position:fixed; left:0; top:0; height:4px; width:100%; z-index:60; background:linear-gradient(90deg,var(--ochre),var(--terra)); transform:scaleX(0); transform-origin:0 50%; }
#glow { position:fixed; left:0; top:0; width:520px; height:520px; margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none; z-index:1; opacity:0; background:radial-gradient(circle,rgba(242,169,59,.16),rgba(242,169,59,0) 62%); transition:opacity .4s; will-change:transform; }
body.has-pointer #glow { opacity:1; }

/* ---- en-tête */
header#top { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px max(18px,4vw); transition:background .3s, box-shadow .3s; }
header#top.solid { background:rgba(20,32,44,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(255,255,255,.08); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:19px; letter-spacing:.01em; } .brand b { color:var(--ochre); }
.logo { width:34px; height:34px; border-radius:10px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%231b2a3a'/%3E%3Ccircle cx='44' cy='22' r='10' fill='%23f2a93b'/%3E%3Cpath d='M8 50 22 30l9 11 8-9 17 18z' fill='%23d96f4a'/%3E%3C/svg%3E") center/cover; box-shadow:0 0 0 1px rgba(255,255,255,.14); }
header#top nav { display:flex; align-items:center; gap:6px; } header#top nav a:not(.btn) { padding:8px 12px; text-decoration:none; font-weight:600; font-size:15px; color:var(--soft); border-radius:10px; transition:color .2s, background .2s; }
header#top nav a:not(.btn):hover, header#top nav a.on { color:var(--ink); background:rgba(255,255,255,.08); }
@media (max-width:760px) { header#top nav a:not(.btn) { display:none; } }

/* ---- boutons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:14px; border:2px solid var(--ochre); background:var(--ochre); color:#1b2a3a; font:800 16px system-ui,sans-serif; text-decoration:none; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .2s; box-shadow:0 8px 24px rgba(242,169,59,.28); }
.btn:hover { box-shadow:0 12px 32px rgba(242,169,59,.42); background:#ffbc54; } .btn.small { padding:8px 16px; font-size:15px; border-radius:12px; box-shadow:none; } .btn.big { padding:16px 30px; font-size:18px; border-radius:16px; }
.btn.ghost { background:rgba(255,255,255,.06); color:var(--ink); border-color:rgba(255,255,255,.28); box-shadow:none; backdrop-filter:blur(6px); } .btn.ghost:hover { background:rgba(255,255,255,.14); }

/* ---- héros */
.hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; isolation:isolate; }
.hero-bg { position:absolute; inset:0; z-index:-1; --px:0; --py:0; --sy:0; }
.hero-bg .layer { position:absolute; inset:-6%; background-size:cover; background-position:center; transition:filter 1s, opacity 1s; will-change:transform; }
.hero-bg .far { transform:translate3d(calc(var(--px) * -14px), calc(var(--py) * -10px + var(--sy) * .12px), 0) scale(1.06); filter:saturate(1.1) blur(1.5px); }
.hero-bg .mid { opacity:.0; transform:translate3d(calc(var(--px) * -30px), calc(var(--py) * -20px + var(--sy) * .22px), 0) scale(1.1); mask-image:linear-gradient(180deg,transparent 18%,#000 55%); -webkit-mask-image:linear-gradient(180deg,transparent 18%,#000 55%); }
.hero-bg .mid { opacity:.9; }
.sun { position:absolute; left:68%; top:16%; width:min(46vw,520px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#fff3b0 0 22%,#ffd04a 36%,rgba(255,150,40,.5) 58%,rgba(255,120,40,0) 70%); mix-blend-mode:screen; transition:opacity 1s, transform 1.2s var(--ease), top 1.2s var(--ease); transform:translate3d(calc(var(--px) * -18px), calc(var(--py) * -12px), 0); }
.moon { position:absolute; left:72%; top:14%; width:clamp(70px,9vw,120px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 36% 34%,#fffdf0,#e8e2c8 60%,#bdb89c); box-shadow:0 0 80px 18px rgba(220,230,255,.35); opacity:0; transition:opacity 1s; }
.stars { position:absolute; inset:0; opacity:0; transition:opacity 1.2s; background-image:radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),radial-gradient(1.2px 1.2px at 28% 8%,#fff,transparent),radial-gradient(1.8px 1.8px at 44% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 61% 10%,#fff,transparent),radial-gradient(1.6px 1.6px at 83% 24%,#fff,transparent),radial-gradient(1.2px 1.2px at 92% 9%,#fff,transparent),radial-gradient(1.4px 1.4px at 7% 36%,#fff,transparent),radial-gradient(1.2px 1.2px at 36% 38%,#fff,transparent),radial-gradient(1.4px 1.4px at 74% 40%,#fff,transparent); animation:twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity:var(--star,.0); } to { opacity:calc(var(--star,.0) * .55); } }
#dust { position:absolute; inset:0; width:100%; height:100%; }
.shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,32,44,.55) 0%,rgba(20,32,44,.1) 38%,rgba(20,32,44,.72) 78%,var(--bg) 100%), radial-gradient(ellipse at 20% 60%,rgba(20,32,44,.55),transparent 62%); transition:background 1s; }
/* ambiances */
body[data-mood=jour] .hero-bg .far { filter:saturate(1.15) blur(1.5px); }
body[data-mood=soir] .hero-bg .layer { filter:sepia(.55) saturate(1.8) hue-rotate(-18deg) brightness(.92) contrast(1.05); } body[data-mood=soir] .sun { top:44%; left:62%; } body[data-mood=soir] .shade { background:linear-gradient(180deg,rgba(90,30,110,.62) 0%,rgba(228,87,46,.22) 42%,rgba(40,18,50,.78) 80%,var(--bg) 100%), radial-gradient(ellipse at 20% 60%,rgba(20,32,44,.5),transparent 62%); }
body[data-mood=nuit] .hero-bg .layer { filter:brightness(.38) saturate(.8) hue-rotate(185deg) contrast(1.1); } body[data-mood=nuit] .sun { opacity:0; } body[data-mood=nuit] .moon { opacity:1; } body[data-mood=nuit] .stars { --star:1; opacity:1; } body[data-mood=nuit] .shade { background:linear-gradient(180deg,rgba(6,10,26,.55),rgba(6,10,26,.2) 40%,rgba(6,10,26,.78) 80%,var(--bg) 100%); }
.hero-in { position:relative; width:min(1100px,100%); margin:0 auto; padding:120px max(20px,4vw) 110px; }
.hero h1 { font-size:clamp(54px,11vw,150px); font-weight:900; letter-spacing:-.035em; text-shadow:0 6px 40px rgba(0,0,0,.45); }
.hero h1 .verb { display:inline-block; color:var(--ochre); min-width:1ch; } .hero h1 .verb::after { content:''; display:inline-block; width:.06em; height:.82em; margin-left:.06em; background:currentColor; vertical-align:-.06em; animation:caret 1s steps(2) infinite; } .hero h1 .dot { color:var(--terra); }
@keyframes caret { 50% { opacity:0; } }
.lead { max-width:640px; margin:22px 0 28px; font-size:clamp(18px,2.2vw,23px); color:#dfe6ed; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.cta { display:flex; flex-wrap:wrap; gap:14px; }
.mood { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:30px; color:var(--soft); font-size:14px; } .mood span { margin-right:4px; }
.mood button { padding:7px 14px; border-radius:99px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:var(--ink); font:600 14px system-ui,sans-serif; cursor:pointer; backdrop-filter:blur(6px); transition:background .2s, border-color .2s; } .mood button:hover { background:rgba(255,255,255,.16); } .mood button[aria-pressed=true] { background:var(--ochre); border-color:var(--ochre); color:#1b2a3a; }
.scroll { position:absolute; left:50%; bottom:26px; width:28px; height:46px; margin-left:-14px; border:2px solid rgba(255,255,255,.55); border-radius:16px; } .scroll i { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(16px); } }


/* ---- première page : le jeu multijoueur */
.badge { display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; padding:8px 16px; border-radius:99px; background:rgba(95,191,122,.16); border:1px solid rgba(95,191,122,.5); color:#bff0cd; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(6px); }
.live { position:relative; width:10px; height:10px; border-radius:50%; background:#5fe08a; } .live::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid #5fe08a; animation:ping 1.8s ease-out infinite; } @keyframes ping { from { transform:scale(.6); opacity:.9; } to { transform:scale(1.7); opacity:0; } }
.together { display:flex; align-items:center; gap:16px; margin-top:26px; max-width:560px; } .together p { margin:0; color:#dfe6ed; font-size:15px; text-shadow:0 2px 12px rgba(0,0,0,.5); } .together small { display:block; margin-top:2px; color:var(--soft); font-size:12px; }
.faces { display:flex; flex:none; } .faces img { width:46px; height:46px; margin-left:-12px; border-radius:50%; object-fit:cover; object-position:50% 6%; background:linear-gradient(160deg,#f2c27a,#e8845a); border:3px solid var(--bg); } .faces img:first-child { margin-left:0; }
.chat { position:absolute; right:max(18px,4vw); bottom:110px; z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:10px; width:min(330px,70vw); pointer-events:none; }
.chat .msg { max-width:100%; padding:10px 14px; border-radius:16px 16px 4px 16px; background:rgba(255,255,255,.94); color:#1b2a3a; font-size:14px; line-height:1.35; box-shadow:0 10px 26px rgba(0,0,0,.35); animation:pop .5s var(--ease) both; } .chat .msg b { margin-right:6px; } .chat .msg.out { animation:fadeout .5s forwards; }
@keyframes pop { from { opacity:0; transform:translateY(16px) scale(.92); } } @keyframes fadeout { to { opacity:0; transform:translateY(-10px); } }
@media (max-width:900px) { .chat { display:none; } }
header#top nav .btn { white-space:nowrap; } @media (max-width:760px) { header#top { padding:10px 14px; } header#top .brand { font-size:16px; } header#top nav { gap:6px; } .btn.small { padding:7px 11px; font-size:13px; } }
@media (max-width:420px) { header#top .brand { display:none; } header#top { justify-content:flex-end; } }

/* ---- chiffres, bandeau */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; max-width:1100px; margin:-40px auto 0; position:relative; z-index:2; background:rgba(255,255,255,.1); border-radius:var(--r); overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.stats div { padding:26px 16px; text-align:center; background:linear-gradient(180deg,var(--card),#1c2d3f); } .stats b { display:block; font-size:clamp(38px,6vw,64px); font-weight:900; color:var(--ochre); line-height:1; font-variant-numeric:tabular-nums; } .stats span { display:block; margin-top:8px; color:var(--soft); font-size:14px; }
@media (max-width:640px) { .stats { grid-template-columns:repeat(2,1fr); margin:-30px 14px 0; } }
.marquee { overflow:hidden; margin:56px 0 0; padding:14px 0; border-block:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee .track { display:flex; gap:38px; width:max-content; animation:slide 60s linear infinite; font-weight:700; color:var(--soft); white-space:nowrap; } .marquee .track span::before { content:'✦'; margin-right:38px; color:var(--ochre); }
.marquee:hover .track { animation-play-state:paused; } @keyframes slide { to { transform:translateX(-50%); } }

/* ---- sections */
.block { padding:clamp(70px,10vw,130px) max(20px,4vw); } .block.dark { background:linear-gradient(180deg,var(--bg2),#17222f); border-block:1px solid rgba(255,255,255,.06); }
.sec { max-width:760px; margin:0 auto clamp(34px,5vw,60px); text-align:center; } .sec h2 { font-size:clamp(30px,5vw,54px); font-weight:900; } .sec p:not(.eyebrow) { margin:14px 0 0; color:var(--soft); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; max-width:1180px; margin:0 auto; }
.card { position:relative; padding:28px 24px; border-radius:var(--r); background:linear-gradient(160deg,#24394e,#1d3043); border:1px solid rgba(255,255,255,.09); overflow:hidden; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; --gx:50%; --gy:0%; }
.card::before { content:''; position:absolute; inset:0; background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(242,169,59,.2),transparent 60%); opacity:0; transition:opacity .25s; pointer-events:none; } .card:hover { border-color:rgba(242,169,59,.5); box-shadow:0 18px 40px rgba(0,0,0,.35); } .card:hover::before { opacity:1; }
.card .ico { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; margin-bottom:16px; font-size:28px; background:rgba(242,169,59,.14); } .card h3 { font-size:21px; margin-bottom:8px; } .card p { margin:0; color:var(--soft); font-size:16px; }

/* ---- les habitants (personnages du jeu en 3D, fond transparent) */
.crowd { position:relative; display:flex; justify-content:center; align-items:flex-end; max-width:1180px; margin:0 auto; padding:30px 0 10px; isolation:isolate; }
.crowd::before { content:''; position:absolute; left:50%; bottom:6%; width:min(86%,980px); aspect-ratio:3.2; transform:translateX(-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(242,169,59,.34),rgba(228,87,46,.16) 48%,transparent 70%); filter:blur(8px); z-index:-1; }
.crowd figure { position:relative; margin:0 -3.2%; width:23%; flex:none; transition:transform .5s var(--ease), filter .4s; --lift:0px; transform:translateY(var(--lift)); }
.crowd figure.mid { width:27%; z-index:2; } .crowd figure:nth-child(2), .crowd figure:nth-child(4) { z-index:1; margin-bottom:-1%; }
.crowd img { width:100%; height:auto; filter:drop-shadow(0 18px 18px rgba(0,0,0,.45)); pointer-events:none; user-select:none; }
.crowd figure::after { content:''; position:absolute; left:18%; right:18%; bottom:1.5%; height:5%; border-radius:50%; background:rgba(0,0,0,.35); filter:blur(8px); z-index:-1; }
.crowd figcaption { position:absolute; left:50%; top:3%; transform:translate(-50%,8px); padding:8px 14px; border-radius:12px; background:rgba(20,32,44,.92); border:1px solid rgba(255,255,255,.14); text-align:center; white-space:nowrap; opacity:0; transition:opacity .3s, transform .35s var(--ease); pointer-events:none; } .crowd figcaption b { display:block; color:var(--ochre); } .crowd figcaption span { font-size:13px; color:var(--soft); }
.crowd figure:hover, .crowd figure:focus-within { --lift:-16px; z-index:5; } .crowd figure:hover figcaption { opacity:1; transform:translate(-50%,0); }
.js .crowd figure { animation:bob 5s ease-in-out infinite; animation-delay:calc(var(--i) * -.9s); } @keyframes bob { 50% { translate:0 -7px; } }
@media (max-width:700px) { .crowd figure { width:26%; margin:0 -4.5%; } .crowd figure.mid { width:31%; } .crowd figcaption { display:none; } }

/* ---- métiers : un dessin, un lieu, une anecdote */
.jobs { max-width:1100px; margin:0 auto; } .jobtabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:24px; }
.jobtabs button { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:99px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:var(--ink); font:600 15px system-ui,sans-serif; cursor:pointer; transition:background .2s, transform .2s var(--ease), border-color .2s; } .jobtabs button:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); } .jobtabs button[aria-selected=true] { background:var(--ochre); border-color:var(--ochre); color:#1b2a3a; }
.jobpanel { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(18px,3vw,40px); align-items:stretch; padding:clamp(16px,2.4vw,30px); border-radius:24px; background:linear-gradient(160deg,#24394e,#1d3043); border:1px solid rgba(255,255,255,.09); } @media (max-width:820px) { .jobpanel { grid-template-columns:1fr; } }
.jstage { --a1:#f2c27a; --a2:#e8845a; position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:360px; border-radius:18px; overflow:hidden; background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.35),transparent 55%),linear-gradient(160deg,var(--a1),var(--a2)); transition:background .5s; }
.jstage::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(0,0,0,.14) 1.2px,transparent 1.6px); background-size:14px 14px; opacity:.5; }
.jstage img { position:relative; width:92%; height:auto; max-height:480px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 14px 14px rgba(0,0,0,.28)); transition:opacity .3s, transform .5s var(--ease); } .jstage img.swap { opacity:0; transform:translateY(24px) scale(.96); }
.jstage.pic { background:linear-gradient(#ead8c6,#f2e4d6); } .jstage.pic::before { display:none; } .jstage.pic img { position:absolute; inset:5% 8%; width:84%; height:90%; max-height:none; object-fit:contain; object-position:50% 50%; filter:none; -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%); mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,transparent 100%); }   /* l'illustration entière, un peu plus petite, sur son beige de studio */
.jinfo { display:flex; flex-direction:column; justify-content:center; gap:14px; } .jinfo .eyebrow { margin:0; } .jinfo h3 { font-size:clamp(30px,4.2vw,46px); font-weight:900; }
.jplace { margin:0; display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:8px 14px; border-radius:99px; background:rgba(242,169,59,.14); color:#ffd89a; font-weight:700; }
.jphoto { margin:0; border-radius:14px; overflow:hidden; position:relative; background:#0f1a25; } .jphoto img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:opacity .35s, transform .8s var(--ease); } .jphoto img.swap { opacity:0; transform:scale(1.05); } .jphoto figcaption { position:absolute; left:10px; bottom:10px; padding:4px 10px; border-radius:99px; background:rgba(15,26,37,.78); color:#cdd8e2; font-size:12px; }
.jtale { margin:0; padding:14px 18px; border-left:4px solid var(--ochre); border-radius:0 12px 12px 0; background:rgba(255,255,255,.05); } .jtale b { display:block; margin-bottom:4px; color:var(--ochre); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .jtale p { margin:0; font-size:17px; font-style:italic; color:#e8eef4; }

/* ---- pastilles, centrage */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; } .chips li { padding:7px 14px; border-radius:99px; background:rgba(242,169,59,.14); color:#ffd89a; font-size:14px; font-weight:600; } .chips.center { justify-content:center; max-width:760px; margin:26px auto 0; } .center { text-align:center; } p.center { margin:26px 0 0; }

/* ---- affiche */
.posterfig { max-width:1100px; margin:0 auto; border-radius:20px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.12); transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s var(--ease); } .posterfig img { width:100%; height:auto; }

/* ---- galerie */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(130px,15.5vw,215px); grid-auto-flow:dense; gap:12px; max-width:1280px; margin:0 auto; } @media (max-width:980px) { .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(110px,24vw,200px); } }
.gallery button { position:relative; padding:0; border:0; border-radius:14px; overflow:hidden; cursor:zoom-in; background:#0f1a25; } .gallery button.wide { grid-column:span 2; grid-row:span 2; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .4s; } .gallery button:hover img, .gallery button:focus-visible img { transform:scale(1.07); filter:brightness(1.08); }
.gallery span { position:absolute; inset:auto 0 0 0; padding:26px 14px 12px; text-align:left; font:700 15px system-ui,sans-serif; color:#fff; background:linear-gradient(0deg,rgba(10,16,24,.85),transparent); transform:translateY(40%); opacity:0; transition:transform .35s var(--ease), opacity .35s; } .gallery button:hover span, .gallery button:focus-visible span { transform:none; opacity:1; }
#lightbox { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:rgba(6,10,16,.92); backdrop-filter:blur(6px); animation:fade .25s; } #lightbox[hidden] { display:none; } @keyframes fade { from { opacity:0; } }
#lightbox figure { margin:0; max-width:min(1400px,92vw); } #lightbox img { max-height:80vh; width:auto; max-width:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); } #lightbox figcaption { margin-top:12px; text-align:center; color:var(--soft); }
#lightbox button { position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:30px; line-height:1; width:52px; height:52px; border-radius:50%; cursor:pointer; transition:background .2s; } #lightbox button:hover { background:rgba(255,255,255,.24); } .lb-close { top:18px; right:18px; font-size:22px !important; } .lb-nav.prev { left:18px; top:50%; margin-top:-26px; } .lb-nav.next { right:18px; top:50%; margin-top:-26px; }

/* ---- fin de page */
.final { padding-top:0; } .finalbox { max-width:900px; margin:0 auto; padding:clamp(36px,6vw,70px) clamp(20px,5vw,60px); text-align:center; border-radius:28px; background:radial-gradient(ellipse at 30% 0%,rgba(242,169,59,.28),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(228,87,46,.26),transparent 60%),linear-gradient(160deg,#24394e,#1a2b3c); border:1px solid rgba(255,255,255,.12); } .finalbox h2 { font-size:clamp(30px,5vw,52px); font-weight:900; } .finalbox p { color:#d3dce5; max-width:560px; margin:14px auto 24px; } .finalbox .cta { justify-content:center; } .finalbox .fine { margin:22px auto 0; font-size:14px; color:var(--soft); }
footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:34px max(20px,4vw) 44px; border-top:1px solid rgba(255,255,255,.08); color:var(--soft); font-size:14px; } footer p { margin:6px 0 0; } .flinks a { color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:4px; } .flinks a:hover { color:var(--ochre); }

/* ---- apparition au défilement (seulement avec JavaScript) */
.js .reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); } .js .reveal.in { opacity:1; transform:none; }
.js .card.reveal.in { transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .js .reveal { opacity:1; transform:none; } .marquee .track { animation:none; } }

.brand-img { display:block; height:54px; width:auto; margin:-6px 0; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); } @media (max-width:760px) { .brand-img { height:44px; } }
.hero h1 .hero-logo-w { display:block; line-height:0; } .hero-logo { display:block; width:min(80vw,clamp(220px,32vw,460px)); height:auto; margin:-.08em 0 -.1em -4%; filter:drop-shadow(0 8px 30px rgba(0,0,0,.45)); }