:root{
  --bg:#0A1020; --ink:#F2F4F8; --soft:#C3CADA; --muted:#8C95AA; --line:rgba(255,255,255,0.11);
  --glass:rgba(255,255,255,0.05); --blue:#2F6BFF; --blue-l:#8FB0FF; --amber:#E8A95B; --green:#3FE0A6;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.7 'Manrope',system-ui,sans-serif; overflow-x:hidden;}
.bg{position:fixed; inset:0; z-index:-1; background:
  radial-gradient(900px 520px at 18% -8%, rgba(47,107,255,0.30), transparent 60%),
  radial-gradient(700px 480px at 92% 10%, rgba(160,90,170,0.20), transparent 60%),
  radial-gradient(800px 600px at 50% 110%, rgba(232,169,91,0.10), transparent 60%), var(--bg);}
a{color:var(--blue-l);}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-0.03em; line-height:1.12; color:#fff;}
.progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:50;}
.progress span{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--blue), var(--amber));}

/* en-tete */
.top{position:sticky; top:12px; z-index:40; max-width:1100px; margin:12px auto 0; padding:8px 10px 8px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:999px; background:linear-gradient(90deg, rgba(47,107,255,0.55), rgba(47,107,255,0.25)); border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
.brand{display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font:700 17px 'Bricolage Grotesque',sans-serif; letter-spacing:-0.02em;}
.brand em{font-style:normal; color:#C9D7FF; font-weight:600;}
.top nav{display:flex; align-items:center; gap:2px;}
.top nav a{color:#DCE4F5; text-decoration:none; font-weight:700; font-size:14px; padding:8px 13px; border-radius:999px;}
.top nav a:hover{background:rgba(255,255,255,0.10); color:#fff;}
.top nav a.on{background:rgba(255,255,255,0.14); color:#fff;}
.top nav a.pill{background:#F5F5F7; color:#0A1020; margin-left:6px; white-space:nowrap;}
.pl-s{display:none;}
.top nav a.pill:hover{background:#fff;}

.wrap{max-width:1100px; margin:0 auto; padding:0 20px;}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:13.5px; color:var(--muted); margin:34px 0 18px;}
.crumbs a{color:var(--soft); text-decoration:none;} .crumbs a:hover{color:#fff;}

/* page blog */
.hero{text-align:center; padding:70px 0 34px;}
.kicker, .tag{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; background:rgba(232,169,91,0.14); color:#F3C98F; border:1px solid rgba(232,169,91,0.35);}
.hero h1{font-size:clamp(40px, 7vw, 76px); margin:16px 0 14px; letter-spacing:-0.05em; line-height:1;}
.hero p{max-width:620px; margin:0 auto; color:var(--soft); font-size:18px;}
.feature{display:block; margin:10px 0 18px; padding:34px; border-radius:28px; text-decoration:none; color:inherit; background:linear-gradient(135deg, rgba(47,107,255,0.22), rgba(255,255,255,0.04)); border:1px solid rgba(143,176,255,0.35); transition:transform .25s, border-color .25s;}
.feature:hover{transform:translateY(-3px); border-color:rgba(143,176,255,0.7);}
.feature h2{font-size:clamp(26px, 3.4vw, 40px); margin:14px 0 10px; max-width:820px;}
.feature p{color:var(--soft); margin:0 0 14px; max-width:720px;}
.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;}
.card{display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:22px; text-decoration:none; color:inherit; background:var(--glass); border:1px solid var(--line); transition:transform .25s, border-color .25s, background .25s;}
.card:hover{transform:translateY(-3px); border-color:rgba(143,176,255,0.5); background:rgba(255,255,255,0.07);}
.card .tag{align-self:flex-start;}
.card h3{font-size:20px; margin:4px 0 0;}
.card p{font-size:14.5px; line-height:1.55; color:var(--soft); margin:0; flex:1;}
.meta{font-size:13.5px; font-weight:700; color:var(--blue-l);}
.meta b{display:inline-block; transition:transform .2s;} .card:hover .meta b, .feature:hover .meta b{transform:translateX(4px);}

/* article */
.art-grid{display:grid; grid-template-columns:minmax(0, 1fr) 270px; gap:48px; align-items:start;}
.art{min-width:0; max-width:740px;}
.art h1{font-size:clamp(32px, 5vw, 52px); margin:16px 0 14px; letter-spacing:-0.045em;}
.byline{color:var(--muted); font-size:14px; margin:0 0 22px;}
.lead{font-size:19.5px; line-height:1.65; color:#E4E8F1; padding:20px 22px; border-radius:18px; background:rgba(47,107,255,0.10); border-left:3px solid var(--blue); margin:0 0 28px;}
.lead strong{color:#fff;}
.art section{scroll-margin-top:90px;}
.art h2{font-size:clamp(24px, 3vw, 31px); margin:44px 0 14px;}
.art p, .art li{color:#D5DBE7;}
.art strong{color:#fff;}
.art ul, .art ol{padding-left:22px;}
.art li{margin:6px 0;}
.art li::marker{color:var(--amber); font-weight:800;}
.tbl{overflow-x:auto; margin:18px 0; border-radius:16px; border:1px solid var(--line);}
table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px;}
th, td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
th{background:rgba(255,255,255,0.06); color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:0.03em;}
tr:last-child td{border-bottom:none;}
td b{color:#F3C98F;}
.cta{display:flex; align-items:center; justify-content:space-between; gap:18px; margin:44px 0 10px; padding:24px; border-radius:22px; background:linear-gradient(120deg, rgba(232,169,91,0.18), rgba(47,107,255,0.14)); border:1px solid rgba(232,169,91,0.45);}
.cta strong{display:block; font-size:19px; color:#fff; font-family:'Bricolage Grotesque',sans-serif;}
.cta span{color:var(--soft); font-size:15px;}
.btn{flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border-radius:999px; background:var(--blue); color:#fff; text-decoration:none; font-weight:800; font-size:15px; box-shadow:0 8px 24px rgba(47,107,255,0.35); transition:transform .2s;}
.btn:hover{transform:translateY(-2px);}
.btn.light{background:#F5F5F7; color:#0A1020; box-shadow:0 6px 18px rgba(255,255,255,0.12);}
.faq details{border:1px solid var(--line); border-radius:14px; padding:4px 18px; margin:10px 0; background:var(--glass);}
.faq summary{cursor:pointer; padding:12px 0; font-weight:800; color:#fff; list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--amber); font-size:22px; line-height:1; transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0 0 14px;}
.sources{margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:14px;}
.sources h2{font-size:18px; margin:0 0 8px;}
.sources p, .sources li{color:var(--muted);}
.side{position:sticky; top:96px; display:flex; flex-direction:column; gap:14px; margin-top:60px;}
.toc{padding:18px; border-radius:18px; background:var(--glass); border:1px solid var(--line);}
.toc p{margin:0 0 8px; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);}
.toc ol, .toc-m ol{margin:0; padding-left:18px; font-size:14px; line-height:1.5;}
.toc li, .toc-m li{margin:7px 0;}
.toc a, .toc-m a{color:var(--soft); text-decoration:none;} .toc a:hover{color:#fff;}
.toc-m{display:none; margin:0 0 20px; padding:6px 16px; border-radius:14px; border:1px solid var(--line); background:var(--glass);}
.toc-m summary{cursor:pointer; padding:8px 0; font-weight:800;}
.side-cta{display:flex; flex-direction:column; gap:2px; padding:18px; border-radius:18px; text-decoration:none; background:linear-gradient(135deg, rgba(47,107,255,0.35), rgba(47,107,255,0.12)); border:1px solid rgba(143,176,255,0.45);}
.side-cta b{color:#fff;} .side-cta span{color:var(--soft); font-size:14px;}
.more{margin:70px 0 10px;}
.more h2{font-size:28px; margin:0 0 16px;}

/* bas de page */
.help{max-width:1060px; margin:60px auto 0; display:flex; align-items:center; gap:16px; padding:20px 22px; border-radius:22px; background:linear-gradient(120deg, rgba(232,169,91,0.16), rgba(47,107,255,0.10)); border:1px solid rgba(232,169,91,0.45);}
.help-ico{flex:0 0 46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font:800 22px 'Bricolage Grotesque',sans-serif; background:var(--amber); color:#1a1206;}
.help-txt{flex:1; display:flex; flex-direction:column;}
.help-txt strong{color:#fff;} .help-txt span{color:var(--soft); font-size:15px;}
.foot{max-width:1100px; margin:40px auto 0; padding:30px 20px 50px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; font-size:14px; color:var(--muted);}
.foot p{margin:8px 0 0;}
.foot nav{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:flex-start;}
.foot nav a{color:var(--soft);}

@media (max-width:960px){
  .art-grid{grid-template-columns:1fr;}
  .side{display:none;}
  .toc-m{display:block;}
  .cards{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  body{font-size:16.5px;}
  .top{top:8px; margin:8px 10px 0; padding:6px 6px 6px 12px;}
  .top nav a{padding:7px 9px; font-size:13px;}
  .top nav a:not(.on):not(.pill){display:none;}
  .top nav a.pill{margin-left:2px;}
  .pl-l{display:none;} .pl-s{display:inline;}
  .brand span{font-size:15px;}
  .wrap{padding:0 16px;}
  .hero{padding:44px 0 24px;}
  .feature{padding:22px;}
  .cards{grid-template-columns:1fr;}
  .lead{font-size:17.5px; padding:16px;}
  .cta{flex-direction:column; align-items:stretch; text-align:left;}
  .cta .btn{justify-content:center;}
  .help{flex-wrap:wrap; margin:40px 16px 0;}
  .help .btn{width:100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} html{scroll-behavior:auto;} }

/* ===== pages par ville ===== */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chips a{padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--glass); color:var(--soft); text-decoration:none; font-weight:700; font-size:14px; transition:border-color .2s, color .2s;}
.chips a:hover{border-color:rgba(143,176,255,0.6); color:#fff;}
.city-hero{padding:6px 0 26px; max-width:860px;}
.city-hero h1{font-size:clamp(32px, 5.4vw, 58px); margin:16px 0 14px; letter-spacing:-0.045em;}
.city-hero p{color:var(--soft); font-size:18px; margin:0 0 22px;}
.city-ctas{display:flex; flex-wrap:wrap; gap:10px;}
.btn.ghost{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); box-shadow:none;}
.live{padding:22px; border-radius:26px; background:var(--glass); border:1px solid var(--line); margin-bottom:20px;}
.live-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin:6px 0 14px;}
.live-head + .ads, .live-head + .sups{margin-bottom:18px;}
.live-head h2{font-size:22px; margin:0;}
.live-count{font-weight:800; color:var(--green); font-size:14px;}
.sups, .ads{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px;}
.sup, .ad{display:flex; flex-direction:column; gap:3px; padding:16px; border-radius:16px; text-decoration:none; background:rgba(255,255,255,0.05); border:1px solid var(--line); transition:transform .2s, border-color .2s;}
.sup:hover, .ad:hover{transform:translateY(-2px); border-color:rgba(143,176,255,0.55);}
.sup b, .ad b{color:#fff; font-size:16px;}
.sup-d{align-self:flex-start; padding:3px 9px; border-radius:999px; background:rgba(47,107,255,0.18); color:#C4D5FF; font-size:12.5px; font-weight:800; margin-bottom:4px;}
.sup-c, .sup-t, .ad span{color:var(--soft); font-size:13.5px;}
.sup-p{color:var(--soft); font-size:14px; margin-top:4px;}
.sup-p strong, .ad strong{color:#F3C98F;}
.ad strong.free{color:var(--green);}
.empty{grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:20px; border-radius:16px; border:1px dashed rgba(255,255,255,0.2);}
.empty b{color:#fff;} .empty span{color:var(--soft); font-size:15px;}
.empty .btn{margin-top:8px;}
.skel{height:118px; border-radius:16px; background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size:200% 100%; animation:sk 1.2s linear infinite;}
@keyframes sk{to{background-position:-200% 0;}}
.city-grid{display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:48px; align-items:start;}
.city-grid .side{margin-top:44px;}
.tip{display:flex; flex-direction:column; gap:4px; margin:18px 0; padding:16px 18px; border-radius:16px; background:rgba(63,224,166,0.08); border:1px solid rgba(63,224,166,0.3);}
.tip b{color:#7FF0C6;} .tip span{color:#D5DBE7;}
.card.city h3{font-size:22px;}
@media (max-width:960px){ .city-grid{grid-template-columns:1fr;} .city-grid .side{display:flex; position:static; margin-top:0;} }
@media (max-width:640px){ .live{padding:16px;} .city-ctas .btn{width:100%; justify-content:center;} .top nav a[href="/palettes/"]{display:none;} }