/* Veille LCD Paris : style « Pop » */
:root { --y:#FFD93D; --ink:#0E0E0E; --pink:#FF5CA8; --blue:#3D5AFE; --white:#FFFFFF; --mono:'Space Mono',ui-monospace,monospace; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--y); color:var(--ink); font-family:Archivo,system-ui,sans-serif; line-height:1.5; overflow-x:hidden }
a { color:var(--ink) }
.wrap { max-width:1180px; margin:0 auto; padding:0 40px }
.wrap.narrow { max-width:820px }

/* En-tête */
.top .wrap { display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:24px; padding-bottom:24px }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:900; font-size:26px; text-decoration:none; letter-spacing:-.03em; text-transform:uppercase }
.top nav { display:flex; flex-wrap:wrap; gap:12px }
.pill { font-family:var(--mono); font-weight:700; font-size:14px; text-decoration:none; padding:12px 18px; border:3px solid var(--ink); border-radius:999px; background:var(--white); transition:background .15s, transform .15s }
.pill:hover { background:var(--pink); transform:translateY(-2px) }

/* Hero */
.hero { position:relative; padding:56px 0 88px }
.hero .wrap { position:relative }
.badge { position:absolute; right:40px; top:-20px; width:170px; height:170px; animation:spin 14s linear infinite }
.chip { display:inline-block; margin:0 0 24px; padding:8px 16px; background:var(--ink); color:var(--y); font-family:var(--mono); font-size:14px; font-weight:700 }
h1 { margin:0; font-size:clamp(44px,9vw,116px); line-height:.92; font-weight:900; letter-spacing:-.05em; text-transform:uppercase; max-width:900px }
.hl { display:inline-block; background:var(--white); border:4px solid var(--ink); padding:0 16px; transform:rotate(-2deg) }
.lead { margin:36px 0 0; font-size:22px; line-height:1.5; font-weight:500; max-width:600px }
.btn { display:inline-flex; align-items:center; gap:12px; min-height:60px; padding:0 36px; margin-top:44px; background:var(--blue); color:var(--white); border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); text-decoration:none; font-weight:900; font-size:19px; text-transform:uppercase; transition:transform .15s, box-shadow .15s }
.btn:hover { transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--ink) }
.btn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink) }
.wig { display:inline-block; animation:wiggle 2.4s ease-in-out infinite }

/* Bandeau défilant */
.band { background:var(--ink); color:var(--y); overflow:hidden; padding:18px 0; border-top:4px solid var(--ink); border-bottom:4px solid var(--ink) }
.track { display:flex; width:max-content; animation:marquee 22s linear infinite; font-size:32px; font-weight:900; text-transform:uppercase; white-space:nowrap; letter-spacing:-.02em }
.track span { padding:0 24px }

/* Sections */
.block { padding:72px 0 }
.block.white { background:var(--white); border-top:4px solid var(--ink); border-bottom:4px solid var(--ink) }
h2 { margin:0 0 40px; font-size:clamp(32px,5vw,56px); font-weight:900; letter-spacing:-.04em; text-transform:uppercase; line-height:1 }
.h1s { font-size:clamp(36px,6vw,72px); margin-bottom:20px }
h2.cat { margin:56px 0 24px; font-size:32px }
.lead2 { margin:0 0 40px; font-size:20px; max-width:640px }
.empty { font-family:var(--mono); font-weight:700 }
.more { margin:32px 0 0; font-family:var(--mono); font-weight:700 }
.more a { padding:8px 0; display:inline-block }

/* Cartes */
.cards { display:grid; gap:32px }
.cards.three { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.cards.two { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) }
.card { display:block; padding:28px; background:var(--white); border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink); text-decoration:none; color:var(--ink); transition:transform .2s, box-shadow .2s }
.block.white .card { background:var(--y) }
.card.pink { background:var(--pink) }
a.card:hover { transform:translate(-4px,-4px); box-shadow:12px 12px 0 var(--ink) }
.card .meta { margin:0 0 24px; font-family:var(--mono); font-weight:700; font-size:14px; text-transform:uppercase }
.card h3 { margin:0 0 12px; font-size:28px; font-weight:900; letter-spacing:-.03em; text-transform:uppercase; line-height:1.05 }
.card p:last-child { margin:0; font-size:17px; line-height:1.55 }
.tilt-l { transform:rotate(-1.5deg) } .tilt-r { transform:rotate(1deg) } .tilt-l2 { transform:rotate(-1deg) }

/* Articles et fiches */
.prose { background:var(--white); border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink); padding:40px; font-size:18px; line-height:1.7 }
.prose h2 { font-size:30px; margin:40px 0 16px; text-transform:none; letter-spacing:-.03em }
.prose h2:first-child { margin-top:0 }
.prose h3 { font-size:22px; margin:28px 0 12px }
.prose p { margin:0 0 18px }
.prose ul, .prose ol { margin:0 0 18px; padding-left:24px }
.prose li { margin-bottom:6px }
.prose a { color:var(--blue); font-weight:600 }
.prose a:hover { background:var(--y) }
.prose blockquote { margin:24px 0; padding:8px 24px; border-left:8px solid var(--pink); font-weight:500 }
.prose code { font-family:var(--mono); background:var(--y); padding:2px 6px }
.prose table { width:100%; border-collapse:collapse; margin:0 0 24px; font-size:16px }
.prose th, .prose td { border:3px solid var(--ink); padding:10px 12px; text-align:left; vertical-align:top }
.prose th { background:var(--y) }
.facts { display:flex; flex-wrap:wrap; gap:16px; margin:0 0 32px }
.facts div { background:var(--white); border:3px solid var(--ink); padding:12px 18px }
.facts dt { font-family:var(--mono); font-size:12px; font-weight:700; text-transform:uppercase }
.facts dd { margin:4px 0 0; font-weight:800 }
.side { margin-top:64px }
.side h2 { font-size:32px; margin-bottom:24px }

/* Images et mentions */
.fig { margin:0 0 32px; border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink); background:var(--white) }
.fig img { display:block; width:100%; height:auto }
.fig figcaption { padding:10px 16px; font-family:var(--mono); font-size:12px; border-top:4px solid var(--ink) }
.notice { margin:0 0 24px; padding:12px 18px; background:var(--white); border:3px solid var(--ink); font-family:var(--mono); font-size:13px; font-weight:700 }

/* Pied de page */
.foot { background:var(--blue); color:var(--y); margin-top:0 }
.foot .wrap { display:flex; flex-direction:column; gap:24px; padding-top:40px; padding-bottom:28px; font-family:var(--mono); font-size:14px } .foot .wrap.old { display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; padding-top:28px; padding-bottom:28px; font-family:var(--mono); font-size:14px }
.foot a { color:var(--y) }

/* Animations */
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes marquee { to { transform:translateX(-50%) } }
@keyframes wiggle { 0%,100% { transform:rotate(-3deg) } 50% { transform:rotate(3deg) } }
@keyframes pop { from { opacity:0; transform:translateY(30px) rotate(-2deg) scale(.96) } to { opacity:1; transform:none } }
.pop { opacity:0; animation:pop .7s cubic-bezier(.3,1.4,.5,1) forwards }
@media (prefers-reduced-motion:reduce) { .badge,.track,.wig,.pop { animation:none !important; opacity:1 } html { scroll-behavior:auto } }

/* Mobile */
@media (max-width:700px) {
  .wrap { padding:0 24px }
  .badge { display:none }
  .prose { padding:24px }
  .card h3 { font-size:24px }
  .track { font-size:24px }
}

.logo { display:block; max-height:48px; max-width:160px; width:auto; height:auto; margin:0 0 16px; object-fit:contain }
.h1s .logo { margin:0 0 20px }

.tagbar { margin:0 0 40px; padding:20px; background:var(--white); border:4px solid var(--ink); box-shadow:8px 8px 0 var(--ink) }
.tagbar-label { margin:0 0 12px; font-family:var(--mono); font-weight:700; font-size:13px; text-transform:uppercase }
.tagbar-list, .tags { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px }
.tagbar-list { margin:0 }
.tag { display:inline-block; padding:6px 12px; background:var(--white); color:var(--ink); border:3px solid var(--ink); font-family:var(--mono); font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; transition:transform .15s, box-shadow .15s }
.tag span { opacity:.6; margin-left:4px }
.tag:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink) }
.tag.on { background:var(--blue); color:var(--white); box-shadow:4px 4px 0 var(--ink) }
.tag.reset { background:var(--pink) }
.tagbar-count { margin:14px 0 0; font-family:var(--mono); font-size:13px; min-height:1em }
@media (prefers-reduced-motion:reduce) { .tag { transition:none } .tag:hover { transform:none } }

.brand b { color:var(--pink); font-weight:900 }

.foot-apps h2 { font-size:16px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 16px; color:var(--y) }
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px 32px }
.foot-grid h3 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 6px; color:var(--white) }
.foot-grid p { margin:0; line-height:1.8; font-size:13px }
.foot-line { margin:0; padding-top:16px; border-top:2px solid var(--y); font-size:13px }

.brand span { text-shadow:-3px 0 #fff,3px 0 #fff,0 -3px #fff,0 3px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,2px 2px #fff,-3px -2px #fff,3px -2px #fff,-3px 2px #fff,3px 2px #fff }