/* ══════════════ Autour de Maman — feuille de style du site vitrine ══════════════
   Direction « Cocon lumineux ». Bleu cocon en tête d'affiche, rose poudré + miel en douceur.
   Fraunces (titres) / Nunito Sans (corps) / Caveat (manuscrit). */
:root {
  --rose: #E8B4B8;
  --terracotta: #D9A48F;
  --sable: #F5EDE4;
  --creme: #FBF7F2;
  --cocon: #4C6E8A;
  --cocon-deep: #3A566E;
  --nuit: #2B3A4A;
  --sauge: #A9BCA1;
  --miel: #E0A074;
  --brume: #8A8578;
  --ink: var(--nuit);
  --bg: var(--sable);
  --card: var(--creme);
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 14px 38px -14px rgba(43,58,74,.22);
  --shadow-warm: 0 16px 40px -16px rgba(217,164,143,.4);
  --maxw: 1180px;
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#20262e; --card:#262d37; --sable:#20262e; --creme:#262d37; --ink:#EEE7DD; --nuit:#EEE7DD; --brume:#A7A090; --cocon:#8FB2CE; --cocon-deep:#A8C5DD; }
}
:root[data-theme="dark"] { --bg:#20262e; --card:#262d37; --sable:#20262e; --creme:#262d37; --ink:#EEE7DD; --nuit:#EEE7DD; --brume:#A7A090; --cocon:#8FB2CE; --cocon-deep:#A8C5DD; }
:root[data-theme="light"] { --bg:#F5EDE4; --card:#FBF7F2; --sable:#F5EDE4; --creme:#FBF7F2; --ink:#2B3A4A; --nuit:#2B3A4A; --brume:#8A8578; --cocon:#4C6E8A; --cocon-deep:#3A566E; }

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.65; overflow-x:clip; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
h1,h2,h3 { font-family:var(--font-head); font-weight:500; line-height:1.1; color:var(--ink); }
a { color:var(--cocon); }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(20px,5vw,40px); }
.hand { font-family:var(--font-hand); color:var(--terracotta); font-weight:700; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cocon); }
.eyebrow::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--miel); }
.btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:600; font-size:1.02rem; padding:15px 30px; border-radius:999px; cursor:pointer; border:none; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
/* Bouton principal : fond bleu cocon FIXE (#4C6E8A) + texte blanc → contraste garanti dans les
   deux thèmes. Avant, var(--cocon) passait en bleu clair (#8FB2CE) en mode sombre → texte blanc
   peu lisible sur le bouton « Découvrir » du header. */
.btn-primary { background:#4C6E8A; color:#fff !important; box-shadow:0 12px 26px -10px rgba(76,110,138,.6); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 34px -10px rgba(76,110,138,.7); background:#3A566E; color:#fff !important; }
.btn-primary svg { stroke:#fff; }
.btn-ghost { background:transparent; color:var(--cocon); }
.btn-ghost:hover { color:var(--cocon-deep); }
.arrow { width:18px; height:18px; }

/* Header */
.adm-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent); }
.adm-header .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:15px; }
.logo { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-head); font-size:1.5rem; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
/* Logo = emblème PNG détouré (transparent), sans cadre : grand et net. */
.logo-mark { width:60px; height:60px; flex:none; display:grid; place-items:center; }
.logo-mark svg, .logo-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.logo > span:last-child span { color:var(--terracotta); }
.adm-header { padding-block:6px; }
.adm-header .logo-mark { width:56px; height:56px; }
.adm-footer .logo-mark { width:52px; height:52px; }
.nav { display:flex; align-items:center; gap:26px; }
.nav a { color:var(--ink); text-decoration:none; font-weight:600; font-size:.96rem; opacity:.82; transition:opacity .2s; }
.nav a:hover { opacity:1; color:var(--cocon); }
.nav .btn { padding:12px 24px; font-size:.95rem; }
.theme-toggle { background:color-mix(in srgb,var(--ink) 8%,transparent); border:none; width:44px; height:44px; border-radius:50%; cursor:pointer; color:var(--ink); display:grid; place-items:center; flex:none; }
/* Bouton hamburger (mobile only) */
.nav-toggle { display:none; background:color-mix(in srgb,var(--ink) 8%,transparent); border:none; width:44px; height:44px; border-radius:12px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; flex:none; }
.nav-toggle svg { width:24px; height:24px; }

/* ── MENU MOBILE (≤860px) : la nav devient un panneau déroulant (avant : liens cachés = nav morte) ── */
@media (max-width:860px){
  .nav-toggle { display:inline-flex; }
  .nav {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    background:var(--card); padding:14px 16px 18px;
    box-shadow:0 20px 40px -18px rgba(43,58,74,.35);
    border-bottom:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .adm-header .wrap { position:relative; }
  .nav.open { transform:translateY(0); opacity:1; visibility:visible; }
  .nav a { opacity:1; padding:14px 12px; font-size:1.05rem; border-radius:10px; min-height:44px; display:flex; align-items:center; }
  .nav a:hover { background:color-mix(in srgb,var(--cocon) 8%,transparent); }
  .nav .btn { justify-content:center; margin-top:8px; padding:15px 22px; }
}
/* Groupe d'actions du header (toggle thème + hamburger), toujours visible dans la barre. */
.header-actions { display:inline-flex; align-items:center; gap:10px; }
@media (min-width:861px){ .header-actions .nav-toggle { display:none; } }

/* Section head */
.sec { padding-block:clamp(52px,7vw,92px); }
.sec-head { max-width:620px; margin:0 auto clamp(36px,5vw,54px); text-align:center; }
.sec-head .eyebrow { justify-content:center; margin-bottom:16px; }
.sec-head .eyebrow::after { content:""; width:22px; height:2px; border-radius:2px; background:var(--miel); }
.sec-head h2 { font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:12px; }
.sec-head p { color:var(--brume); font-size:1.05rem; }
.page-hero { padding-block:clamp(44px,6vw,72px) clamp(20px,3vw,32px); text-align:center; }
.page-hero h1 { font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:12px; }
.page-hero p { color:var(--brume); max-width:60ch; margin:0 auto; font-size:1.08rem; }

/* Catalogue */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card { background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease; text-decoration:none; color:inherit; border:1px solid color-mix(in srgb,var(--ink) 5%,transparent); }
.card:hover { transform:translateY(-6px); box-shadow:0 24px 50px -18px rgba(43,58,74,.3); }
/* Les couvertures de livres sont PORTRAIT (2:3) → cadre portrait + object-fit:contain sur un fond
   doux dégradé, pour montrer la couverture ENTIÈRE (façon vitrine) au lieu d'en croper une bande. */
.card-cover { aspect-ratio:4/5; position:relative; overflow:hidden; display:grid; place-items:center; padding:22px 22px 0;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--rose) 34%,var(--card)), color-mix(in srgb,var(--cocon) 12%,var(--card))); }
.card-cover img { max-width:82%; max-height:100%; width:auto; height:auto; object-fit:contain;
  border-radius:6px 10px 10px 6px; box-shadow:0 18px 34px -14px rgba(43,58,74,.5), -3px 0 0 rgba(0,0,0,.06); align-self:end; }
.card-tag { position:absolute; top:12px; left:12px; background:var(--sauge); color:#223; font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:999px; letter-spacing:.03em; }
.card-body { padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.card-body h3 { font-size:1.28rem; margin-bottom:6px; }
.card-body .benefit { color:var(--brume); font-size:.93rem; margin-bottom:14px; flex:1; }
.card-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-meta .stars { color:var(--miel); font-size:.9rem; }
.card-meta .price { font-family:var(--font-head); font-size:1.4rem; color:var(--cocon); font-weight:600; }
.card-meta .price s { font-size:.85rem; color:var(--brume); font-weight:400; margin-right:5px; }
.card-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:var(--radius-sm); background:color-mix(in srgb,var(--cocon) 10%,transparent); color:var(--cocon); font-family:var(--font-head); font-weight:600; font-size:.96rem; transition:background .2s ease; text-decoration:none; }
.card:hover .card-btn { background:var(--cocon); color:#fff; }
.card.soon { opacity:.82; }
.card.soon .card-cover { filter:grayscale(.3); }
.card.soon .card-btn { background:color-mix(in srgb,var(--brume) 16%,transparent); color:var(--brume); }
.cat-empty { text-align:center; color:var(--brume); padding:40px; }

/* Footer */
/* Fond TOUJOURS sombre (fixe) : le texte du footer est blanc, donc le fond ne doit jamais
   basculer en clair. En mode sombre, var(--nuit) devenait crème → texte blanc invisible (bug). */
.adm-footer { background:#2B3A4A; color:#E9E4DA; padding-block:clamp(44px,6vw,64px) 30px; margin-top:clamp(40px,6vw,72px); }
.adm-footer .wrap { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.adm-footer .logo { color:#fff; margin-bottom:14px; }
.adm-footer .f-about { color:color-mix(in srgb,#fff 66%,transparent); font-size:.92rem; max-width:30ch; }
.adm-footer h4 { font-family:var(--font-head); font-size:1rem; margin-bottom:14px; color:#fff; }
.adm-footer ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.adm-footer a { color:color-mix(in srgb,#fff 68%,transparent); text-decoration:none; font-size:.92rem; }
.adm-footer a:hover { color:#FCE7B8; }
.f-bottom { border-top:1px solid color-mix(in srgb,#fff 14%,transparent); margin-top:36px; padding-top:20px; font-size:.82rem; color:color-mix(in srgb,#fff 55%,transparent); text-align:center; }

/* Contenu long (à-propos, légal) */
.prose { max-width:760px; margin:0 auto; }
.prose h2 { font-size:1.5rem; margin:28px 0 12px; }
.prose p { color:var(--brume); margin-bottom:14px; }
.prose strong { color:var(--ink); }
.prose .sign { font-family:var(--font-hand); font-size:1.7rem; color:var(--terracotta); margin-top:14px; }

@media (max-width:900px){ .cat-grid{ grid-template-columns:1fr; } .adm-footer .wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .adm-footer .wrap{ grid-template-columns:1fr; } }