/* Étagère — page « À propos » (fidèle au design Claude Design). Clair + sombre. */
:root{
  --bg:#f4efe4; --navbg:rgba(244,239,228,.82); --band:#efe8db; --surface:#fbf8f1; --card:#fbf8f1;
  --input:#ffffff; --bezel:#2f2a22; --text:#2f2a22; --muted:#8a7f6f;
  --accent:#b4552f; --accent-hover:#8a3f22; --accent-text:#fff; --accent-shadow:rgba(180,85,47,.26);
  --card-shadow:rgba(60,40,20,.12); --line:rgba(74,65,54,.13); --soft:rgba(180,85,47,.09);
}
:root[data-theme="dark"]{
  --bg:#161310; --navbg:rgba(22,19,16,.82); --band:#1a1611; --surface:#211d18; --card:#1f1b16;
  --input:#2a251f; --bezel:#000; --text:#f0e8d8; --muted:#9a9082;
  --accent:#d98f5c; --accent-hover:#e6a274; --accent-text:#1a130d; --accent-shadow:rgba(217,143,92,.28);
  --card-shadow:rgba(0,0,0,.4); --line:rgba(255,255,255,.1); --soft:rgba(217,143,92,.14);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s}
a{text-decoration:none}
.wrapc{max-width:1080px;margin:0 auto;padding:0 28px}

/* Nav */
.anav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:var(--navbg);border-bottom:1px solid var(--line)}
.anav-in{max-width:1080px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font:600 21px/1 'Spectral',serif;letter-spacing:.3px;color:var(--text)}
.diamond{width:13px;height:13px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.anav-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;font:500 12px/1 'Public Sans',sans-serif;color:var(--muted)}
.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);font:600 13px/1 'Public Sans',sans-serif;
  box-shadow:0 5px 13px var(--accent-shadow);transition:background .15s}
.btn-accent:hover{background:var(--accent-hover)}

/* Intro */
.intro{max-width:1080px;margin:0 auto;padding:72px 28px 40px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:var(--soft);
  font:600 11px/1 'Public Sans',sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}
.intro h1{margin:22px auto 0;max-width:720px;font:600 clamp(30px,5vw,50px)/1.1 'Spectral',serif;text-wrap:pretty}
.intro p{margin:20px auto 0;max-width:600px;font:400 clamp(15px,2.4vw,18px)/1.6 'Public Sans',sans-serif;color:var(--muted)}

/* Section titre */
.sec{max-width:1080px;margin:0 auto;padding:44px 28px}
.sec-tight{padding-top:8px}
.eyebrow{font:600 12px/1 'Public Sans',sans-serif;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);text-align:center}
.sec-title{text-align:center;font:600 clamp(24px,4vw,34px)/1.15 'Spectral',serif}
.sec-sub{margin:10px auto 0;max-width:480px;text-align:center;font:400 14.5px/1.55 'Public Sans',sans-serif;color:var(--muted)}

/* Étapes */
.steps{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}
.step{padding:26px 22px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.step-top{display:flex;align-items:center;gap:12px}
.icon-box{width:44px;height:44px;flex:none;border-radius:13px;background:var(--soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.icon-box svg{width:22px;height:22px}
.step-num{font:600 13px/1 'Public Sans',sans-serif;color:var(--accent)}
.step h3{margin:16px 0 0;font:600 17px/1.25 'Spectral',serif}
.step p{margin:8px 0 0;font:400 13.5px/1.55 'Public Sans',sans-serif;color:var(--muted)}

/* Bande aperçus / contact */
.band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.nb{border-bottom:none}
.previews{margin-top:38px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:26px}
.phone{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
.phone-frame{border-radius:34px;border:8px solid var(--bezel);overflow:hidden;background:var(--surface);
  box-shadow:0 20px 50px rgba(60,40,20,.25)}
.phone-frame img{display:block;width:100%;height:100%;object-fit:cover}
.phone.big .phone-frame{width:250px;height:508px;border-width:9px;border-radius:38px;box-shadow:0 26px 60px rgba(60,40,20,.3)}
.phone .phone-frame{width:224px;height:456px}
.phone span{font:500 12.5px/1 'Public Sans',sans-serif;color:var(--muted)}

/* Fonctionnalités */
.feats{margin-top:34px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.feat{padding:22px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.feat-top{display:flex;align-items:center;gap:11px}
.feat .icon-box{width:38px;height:38px;border-radius:11px}
.feat-title{font:600 15px/1.2 'Spectral',serif}
.soon{margin-left:8px;padding:3px 8px;border-radius:999px;background:var(--soft);font:600 9px/1 'Public Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.6px;color:var(--accent);vertical-align:middle}
.feat p{margin:11px 0 0;font:400 13px/1.5 'Public Sans',sans-serif;color:var(--muted)}

/* Contact */
.contact{max-width:640px;margin:0 auto;padding:60px 28px}
.cform{margin-top:30px;padding:28px;border-radius:20px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 14px 40px var(--card-shadow)}
.crow{display:flex;gap:14px;flex-wrap:wrap}
.cfield{flex:1;min-width:160px}
.cfield.full{flex-basis:100%;margin-top:14px}
.lab{display:block;font:500 12px/1 'Public Sans',sans-serif;color:var(--muted);margin-bottom:7px}
.cform input,.cform textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--input);color:var(--text);font:400 14px/1.4 'Public Sans',sans-serif;outline:none}
.cform input:focus,.cform textarea:focus{border-color:var(--accent)}
.cform textarea{min-height:110px;resize:vertical}
.cform .btn-accent{margin-top:18px;width:100%;padding:14px;font-size:14.5px;border-radius:12px}
.calt{margin-top:16px;text-align:center;font:400 13px/1.5 'Public Sans',sans-serif;color:var(--muted)}
.calt a{color:var(--accent);font-weight:600}
.cmsg{margin-top:14px;text-align:center;font:500 13.5px/1.5 'Public Sans',sans-serif}
.cmsg.ok{color:#5f7d3f}.cmsg.err{color:#b23c2a}
:root[data-theme="dark"] .cmsg.ok{color:#b6cf90}:root[data-theme="dark"] .cmsg.err{color:#e0745f}

/* Petits écrans (≤ 400px) : barre de nav plus compacte pour ne pas déborder */
@media(max-width:400px){
  .anav-in{padding:12px 16px;gap:10px}
  .btn-accent{padding:10px 15px}
  .brand{font-size:19px}
}

/* Footer : voir footer.css (partagé) */

/* Aperçu « navigateur / bureau » (page publique de partage) */
.browser{max-width:860px;margin:38px auto 0;border-radius:24px;overflow:hidden;border:9px solid var(--bezel);
  background:var(--card);box-shadow:0 26px 60px rgba(60,40,20,.3)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--band);border-bottom:1px solid var(--line)}
.bdot{width:11px;height:11px;border-radius:50%;background:var(--muted);opacity:.45;flex:none}
.bdot:nth-child(1){background:#d9765f;opacity:.75}
.bdot:nth-child(2){background:#d8a24a;opacity:.75}
.bdot:nth-child(3){background:#6f9463;opacity:.75}
.burl{margin-left:10px;flex:1;max-width:340px;padding:6px 14px;border-radius:8px;background:var(--bg);border:1px solid var(--line);
  font:500 12px/1 'Public Sans',sans-serif;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-screen{aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.browser-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
@media(max-width:560px){ .browser-screen{aspect-ratio:4/3} .burl{max-width:none} }

/* Mini-parcours réservation cadeau (bande Partage & cadeaux) */
.gift-steps{margin-top:30px;max-width:920px;margin-left:auto;margin-right:auto}