/* Étagère — landing (fidèle au design Claude Design). Clair + sombre, responsive. */
:root{
  --bg:#f4efe4; --surface:#fbf8f1; --text:#2f2a22; --muted:#8a7f6f;
  --accent:#b4552f; --accent-hover:#8a3f22; --accent-text:#fff; --accent-shadow:rgba(180,85,47,.28);
  --line:rgba(74,65,54,.14); --dash:rgba(74,65,54,.24); --soft:rgba(180,85,47,.09);
}
:root[data-theme="dark"]{
  --bg:#161310; --surface:#211d18; --text:#f0e8d8; --muted:#9a9082;
  --accent:#d98f5c; --accent-hover:#e6a274; --accent-text:#1a130d; --accent-shadow:rgba(217,143,92,.28);
  --line:rgba(255,255,255,.11); --dash:rgba(255,255,255,.18); --soft:rgba(217,143,92,.14);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;transition:background .25s,color .25s;
  -webkit-font-smoothing:antialiased}

/* Nav */
.lnav{display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(20px,4vw,64px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:600 22px/1 'Spectral',serif;letter-spacing:.3px}
.diamond{width:13px;height:13px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.lnav-right{display:flex;align-items:center;gap:12px}
.toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--muted);
  font:500 12px/1 'Public Sans',sans-serif}
.toggle .dotc{width:13px;height:13px;border-radius:50%;background:var(--accent)}
.btn-accent{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:12px;
  border:none;cursor:pointer;background:var(--accent);color:var(--accent-text);text-decoration:none;
  font:600 13px/1 'Public Sans',sans-serif;box-shadow:0 6px 16px var(--accent-shadow);transition:background .15s}
.btn-accent:hover{background:var(--accent-hover);color:var(--accent-text)}
.btn-accent.big{padding:15px 30px;font-size:15px;margin-top:30px}
.btn-accent.full{width:100%;padding:15px;font-size:15px;border-radius:14px}

/* ===== Bureau ===== */
.hero-d{display:none}
@media(min-width:880px){
  .hero-d{display:flex;justify-content:space-between;gap:clamp(40px,5vw,90px);align-items:center;
    min-height:calc(100vh - 74px);padding:clamp(28px,5vh,56px) clamp(24px,4vw,64px)}
  .hero-m,.body-m{display:none}
}
.hero-copy{flex:none;width:min(52%,620px)}
.h-title{margin:0;font:600 46px/1.12 'Spectral',serif;text-wrap:pretty}
.h-sub{margin-top:20px;font:400 17px/1.6 'Public Sans',sans-serif;color:var(--muted);max-width:440px}
.benefits{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.benefit-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--soft);color:var(--accent)}
.benefit-ic svg{width:24px;height:24px}
.benefit-t{margin-top:12px;font:600 15px/1.2 'Spectral',serif}
.benefit-d{margin-top:5px;font:400 12.5px/1.5 'Public Sans',sans-serif;color:var(--muted)}

/* Zone 3D — livre CSS 3D auto-rotatif (desktop) */
.hero-3d{flex:none;width:min(44%,580px);height:min(68vh,640px);
  display:flex;align-items:center;justify-content:center;background:none}
.scene3d{perspective:1500px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.book3d{position:relative;width:210px;height:300px;transform-style:preserve-3d;
  transform:rotateX(-6deg);animation:bookspin 18s linear infinite;
  filter:drop-shadow(0 34px 42px rgba(0,0,0,.32))}
@keyframes bookspin{from{transform:rotateX(-6deg) rotateY(0)}to{transform:rotateX(-6deg) rotateY(360deg)}}
.book3d .f{position:absolute;overflow:hidden}
.book3d .cover,.book3d .back{width:210px;height:300px;border-radius:3px 8px 8px 3px}
.book3d .cover{transform:translateZ(23px);background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.book3d .cover .ct{font:600 27px/1.15 'Spectral',serif;color:#fff;letter-spacing:.5px}
.book3d .cover .cline{width:48px;height:2px;background:rgba(255,255,255,.55)}
.book3d .back{transform:rotateY(180deg) translateZ(23px);background:linear-gradient(135deg,var(--accent-hover),var(--accent))}
.book3d .spine{width:46px;height:300px;left:82px;transform:rotateY(-90deg) translateZ(105px);
  background:linear-gradient(var(--accent-hover),var(--accent));display:flex;align-items:center;justify-content:center;border-radius:3px 0 0 3px}
.book3d .spine span{transform:rotate(90deg);white-space:nowrap;font:600 15px/1 'Spectral',serif;color:rgba(255,255,255,.92)}
.book3d .edge{width:46px;height:300px;left:82px;transform:rotateY(90deg) translateZ(105px);
  background:repeating-linear-gradient(to right,#f4efe4,#f4efe4 1px,#e4dac6 1px,#e4dac6 3px)}
.book3d .top{width:210px;height:46px;top:127px;transform:rotateX(90deg) translateZ(150px);
  background:repeating-linear-gradient(to right,#f0e8d6,#f0e8d6 1px,#e2d7c1 1px,#e2d7c1 3px)}
.book3d .bottom{width:210px;height:46px;top:127px;transform:rotateX(-90deg) translateZ(150px);background:#d8ccb6}
@media(prefers-reduced-motion:reduce){.book3d{animation:none;transform:rotateX(-6deg) rotateY(-24deg)}}

/* ===== Mobile ===== */
.hero-m{position:relative;height:400px;overflow:hidden}
.covers{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:38px 16px 0;opacity:.92}
.covers i{aspect-ratio:2/3;border-radius:7px;display:block}
.covers-fade{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 12%,transparent 72%)}
.hero-m-title{position:absolute;left:22px;right:22px;bottom:18px;margin:0;
  font:600 30px/1.15 'Spectral',serif;text-wrap:pretty}
.body-m{padding:6px 22px 40px}
.body-m-sub{margin:0;font:400 15px/1.55 'Public Sans',sans-serif;color:var(--muted)}
.body-m .btn-accent.full{margin-top:22px}
.hint{margin-top:12px;text-align:center;font:400 12.5px/1 'Public Sans',sans-serif;color:var(--muted)}
.cards{margin-top:30px;display:flex;flex-direction:column;gap:12px}
.card{padding:17px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);
  display:flex;gap:14px;align-items:center}
.card-ic{flex:none;width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--soft);color:var(--accent)}
.card-ic svg{width:23px;height:23px}
.card-t{font:600 15px/1.2 'Spectral',serif}
.card-d{margin-top:3px;font:400 12.5px/1.45 'Public Sans',sans-serif;color:var(--muted)}
.foot{margin-top:30px;text-align:center;font:400 11.5px/1 'Public Sans',sans-serif;color:var(--muted)}