/* Fashion Geek Culture — interface « esprit Apple » commune, imagerie « galerie ».
   Layout : colonne centrale 1180px, sections en tuiles #f5f5f7, les œuvres en grand sur fond blanc. */
:root{
  --bg:#ffffff; --tile:#f5f5f7; --tile2:#ebebf0; --ink:#1d1d1f; --ink2:#424245; --ink3:#6e6e73; --rule:#d2d2d7;
  --blue:#0071e3; --link:#0066cc; --violet:#8e44d8; --violet-s:#f3eafb; --ok:#1f9d55; --bad:#e0452f;
  --card:#ffffff; --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000; --tile:#161618; --tile2:#222226; --ink:#f5f5f7; --ink2:#d2d2d7; --ink3:#a1a1a6; --rule:#3a3a3c;
  --blue:#2997ff; --link:#2997ff; --violet:#bf8cf0; --violet-s:#2a1d36; --card:#1c1c1e; --shadow:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000; --tile:#161618; --tile2:#222226; --ink:#f5f5f7; --ink2:#d2d2d7; --ink3:#a1a1a6; --rule:#3a3a3c;
  --blue:#2997ff; --link:#2997ff; --violet:#bf8cf0; --violet-s:#2a1d36; --card:#1c1c1e; --shadow:none; color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;margin:0}
a{color:var(--link)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{letter-spacing:-.025em;text-wrap:balance;margin:0}
h1{font-size:clamp(40px,6.4vw,80px);line-height:1.02;font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(30px,4.2vw,52px);line-height:1.06;font-weight:750;letter-spacing:-.035em}
h3{font-size:22px;line-height:1.2;font-weight:700}
p{margin:0}
.k{font-size:12px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink3);max-width:36em}
.muted{color:var(--ink3)}
em.v{font-style:normal;color:var(--violet)}

/* Barre */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--rule) 60%,transparent)}
.bar .wrap{display:flex;align-items:center;gap:18px;min-height:52px}
.brand{font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--violet)}
.bar nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.bar nav a{font-size:13px;color:var(--ink2);text-decoration:none;padding:6px 10px;border-radius:980px;white-space:nowrap}
.bar nav a:hover,.bar nav a[aria-current]{background:var(--tile);color:var(--ink)}

/* Sections */
section{padding-block:72px}
section.tight{padding-block:40px}
.sec-head{display:grid;gap:12px;margin-bottom:32px;max-width:52em}
.tile{background:var(--tile);border-radius:28px;padding:clamp(20px,3vw,40px)}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:20px}
.btn{appearance:none;border:0;font:600 15px var(--sans);background:var(--blue);color:#fff;border-radius:980px;padding:11px 20px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--link);padding-inline:6px}
.btn.soft{background:var(--tile2);color:var(--ink)}
.btn:focus-visible,.chip:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 55%,transparent);outline-offset:2px}
.chip{appearance:none;border:1px solid var(--rule);background:var(--card);color:var(--ink);font:500 14px var(--sans);border-radius:980px;padding:8px 14px;cursor:pointer;min-height:40px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* Hero */
.hero{position:relative;overflow:hidden;padding-block:0}
.hero-img{position:relative;border-radius:0 0 32px 32px;overflow:hidden;background:var(--tile)}
.hero-img img{width:100%;height:clamp(340px,46vw,560px);object-fit:cover;object-position:right center}
.hero-txt{position:absolute;inset:0;display:flex;align-items:center}
.hero-txt .wrap{width:100%}
.hero-txt .box{max-width:min(560px,52%);display:grid;gap:18px}
.hero-txt .lede{color:#424245}
.hero-txt h1{color:#1d1d1f}
.hero-txt .k{color:#8e44d8}
@media (max-width:760px){
  .hero-img img{height:300px;object-position:80% center}
  .hero-txt{position:static}
  .hero-txt .box{max-width:none;padding-block:28px}
  .hero-txt h1{color:var(--ink)} .hero-txt .lede{color:var(--ink3)} .hero-txt .k{color:var(--violet)}
  .hero-img{border-radius:0}
}

/* Cartel de musée */
.cartel{display:grid;gap:2px;font-size:14px;line-height:1.45}
.cartel b{font-size:16px}
.cartel i{color:var(--ink2)}
.cartel small{color:var(--ink3);font-size:12px}

/* Univers */
.univ{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.univ .k{color:var(--ink3);margin-right:6px}
.univ a{font-size:13px;text-decoration:none;color:var(--ink2);background:var(--tile);padding:7px 12px;border-radius:980px}
.univ a[aria-current]{background:var(--ink);color:var(--bg)}

footer.site{border-top:1px solid var(--rule);padding-block:36px;color:var(--ink3);font-size:13px;margin-top:40px}
footer.site .wrap{display:grid;gap:16px}

/* Feedback */
.ok{color:var(--ok)} .bad{color:var(--bad)}
.score{font-variant-numeric:tabular-nums;font-weight:700}
.fade{animation:fade .45s ease}
@keyframes fade{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
select{font:500 15px var(--sans);padding:10px 12px;border-radius:12px;border:1px solid var(--rule);background:var(--card);color:var(--ink);min-height:44px}