/* ============ ATELIER GLAMMCAKES — LE LIVRE ============ */
:root {
  --ivory: #FFFDFB; --paper: #FDFAF5; --ink: #2A2320; --ink-soft: #4a4038;
  --gold: #B08D57; --gold-soft: rgba(176,141,87,.4); --blush: #F4E8DD;
  --display: 'Fraunces', serif; --body: 'Jost', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background: var(--ivory); color: var(--ink); font-family: var(--body); font-weight:400; line-height:1.75; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }

@font-face { font-family:'Fraunces'; src:url('../assets/fonts/fraunces-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('../assets/fonts/fraunces-latin-wght-italic.woff2') format('woff2'); font-weight:100 900; font-style:italic; font-display:swap; }
@font-face { font-family:'Jost'; src:url('../assets/fonts/jost-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Jost'; src:url('../assets/fonts/jost-latin-500-normal.woff2') format('woff2'); font-weight:500; font-display:swap; }

/* ---- progress + chrome ---- */
.bk-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--gold); z-index:50; }
.bk-chrome { position:fixed; top:14px; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:0 26px; z-index:49; pointer-events:none; mix-blend-mode:multiply; }
.bk-chrome a { pointer-events:auto; text-decoration:none; color:var(--gold); font-size:11px; letter-spacing:.3em; text-transform:uppercase; font-weight:500; }
.bk-chrome .bk-where { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }

/* ---- digital cover ---- */
.bk-cover { min-height:100vh; min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; background:var(--ivory); }
.bk-cover-photo { position:absolute; inset:0; background:url('../assets/livre/cover-photo.jpg') no-repeat; background-size:cover; background-position:50% 32%; }
.bk-cover-veil { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(255,253,251,.88) 0%, rgba(255,253,251,.38) 40%, rgba(255,253,251,.08) 72%, rgba(255,253,251,.82) 100%); }
.bk-cover-inner { position:relative; text-align:center; padding:8vh 24px; }
.bk-cover-inner .rule { width:64px; height:1px; background:var(--gold); margin:34px auto; position:relative; }
.bk-cover-inner .rule::after { content:''; position:absolute; left:50%; top:50%; width:6px; height:6px; background:var(--gold); transform:translate(-50%,-50%) rotate(45deg); }
.bk-cover-inner .thin { font-family:var(--display); font-style:italic; font-weight:260; font-size:clamp(28px,4.6vw,58px); color:var(--ink-soft); }
.bk-cover-inner h1 { font-family:var(--display); font-weight:330; font-size:clamp(52px,9.4vw,118px); line-height:1.02; font-variation-settings:"opsz" 144; }
.bk-cover-inner .tagline { margin-top:26px; font-size:clamp(12px,1.5vw,19px); letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:#6b5b49; }
.bk-cover-inner .author { margin-top:8vh; font-size:15px; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase; font-weight:500; }
.bk-cover-hint { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); }

/* ---- generic page ---- */
.bk-page { position:relative; max-width:820px; margin:0 auto; padding:11vh 34px; }
.bk-page + .bk-page::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:56px; height:1px; background:var(--gold-soft); }
.bk-page h3 { font-family:var(--display); font-weight:400; font-size:clamp(26px,3.4vw,38px); line-height:1.15; margin-bottom:26px; }
.bk-page p { margin-bottom:18px; color:var(--ink-soft); font-size:17px; }
.bk-page p strong { color:var(--ink); }

/* chapter opener */
.bk-open { max-width:none; padding:0; min-height:92vh; display:grid; align-items:end; background-size:cover; background-position:center; }
.bk-open .bk-open-inner { width:100%; padding:16vh 8vw 10vh; background:linear-gradient(to top, rgba(255,253,251,.96) 20%, rgba(255,253,251,.75) 60%, rgba(255,253,251,0)); }
.bk-kicker { font-size:12px; letter-spacing:.44em; text-transform:uppercase; color:var(--gold); font-weight:500; margin-bottom:16px; }
.bk-open h2 { font-family:var(--display); font-weight:340; font-size:clamp(44px,7vw,86px); line-height:1.04; margin-bottom:20px; }
.bk-lead { font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(19px,2.3vw,25px); color:var(--ink-soft); max-width:640px; }

/* duo: image + text */
.bk-duo { max-width:1180px; display:grid; grid-template-columns:5fr 6fr; gap:6vw; align-items:center; }
.bk-duo .bk-duo-img { aspect-ratio:4/5; background-size:cover; background-position:center; box-shadow:0 30px 70px -30px rgba(42,35,32,.35); }
.bk-duo.alt { grid-template-columns:6fr 5fr; }
.bk-duo.alt .bk-duo-img { order:2; }

/* full-bleed */
.bk-full { max-width:none; padding:0; min-height:96vh; background-size:cover; background-position:center; display:grid; align-items:end; }
.bk-caption { font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(17px,2vw,22px); color:var(--ink); padding:5vh 8vw; background:linear-gradient(to top, rgba(255,253,251,.9), rgba(255,253,251,0)); width:100%; margin:0; }

/* recipe */
.bk-recipe { max-width:960px; background:var(--paper); border:1px solid rgba(176,141,87,.25); padding:8vh 6vw; margin-top:9vh; margin-bottom:9vh; }
.bk-recipe h3 { text-align:center; }
.rcp-pictos { display:flex; justify-content:center; gap:34px; margin:8px 0 26px; flex-wrap:wrap; }
.rcp-pictos span { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.rcp-pictos span::before { content:''; width:18px; height:18px; background-color:var(--gold); -webkit-mask:var(--pi) no-repeat center/contain; mask:var(--pi) no-repeat center/contain; }
.rcp-pictos span[data-picto="time"] { --pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.rcp-pictos span[data-picto="level"] { --pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M12 3l2.7 5.6 6.3.9-4.5 4.3 1 6.2-5.5-3-5.5 3 1-6.2L3 9.5l6.3-.9z'/%3E%3C/svg%3E"); }
.rcp-pictos span[data-picto="yield"] { --pi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4'%3E%3Cpath d='M4 13h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3Cpath d='M7 13c0-3 2-4 5-4s5 1 5 4'/%3E%3Cpath d='M12 9V6'/%3E%3C/svg%3E"); }
.rcp-head { font-family:var(--display); font-style:italic; font-weight:300; font-size:19px; text-align:center; max-width:620px; margin:0 auto 34px; }
.rcp-cols { display:grid; grid-template-columns:2fr 3fr; gap:5vw; margin-bottom:26px; }
.rcp-ing { list-style:none; border-top:1px solid var(--gold-soft); }
.rcp-ing li { padding:10px 0; border-bottom:1px solid rgba(176,141,87,.18); font-size:15.5px; }
.rcp-ing li em { color:var(--gold); font-style:normal; font-size:13px; }
.rcp-method { counter-reset:step; list-style:none; }
.rcp-method li { counter-increment:step; position:relative; padding:0 0 18px 46px; font-size:16px; color:var(--ink-soft); }
.rcp-method li::before { content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:14px; color:var(--gold); }
.rcp-note { background:var(--blush); padding:18px 22px; font-size:15.5px; margin-bottom:14px; }
.rcp-fix summary { cursor:pointer; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:500; padding:8px 0; }
.rcp-fix ul { list-style:none; padding:12px 0 0; }
.rcp-fix li { padding:8px 0; font-size:15.5px; color:var(--ink-soft); border-top:1px solid rgba(176,141,87,.15); }

/* front matter */
.bk-fm-halftitle, .bk-fm-title, .bk-fm-dedicace { min-height:88vh; display:grid; place-items:center; text-align:center; }
.bk-fm-halftitle h2, .bk-fm-title h2 { font-family:var(--display); font-weight:330; font-size:clamp(38px,6vw,72px); }
.bk-fm-title .tagline { margin-top:20px; font-size:14px; letter-spacing:.4em; text-transform:uppercase; color:#6b5b49; }
.bk-fm-title .author { margin-top:9vh; font-size:14px; letter-spacing:.32em; text-transform:uppercase; font-weight:500; }
.bk-fm-colophon { font-size:13px; color:var(--ink-soft); text-align:center; padding-top:30vh; }
.bk-fm-dedicace p { font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(20px,2.6vw,28px); color:var(--ink-soft); max-width:560px; }
.bk-fm-toc ol { list-style:none; margin-top:10px; }
.bk-fm-toc li { border-bottom:1px solid rgba(176,141,87,.2); }
.bk-fm-toc a { display:flex; align-items:baseline; gap:22px; padding:20px 4px; text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:350; font-size:clamp(20px,2.6vw,28px); transition:color .25s; }
.bk-fm-toc a:hover { color:var(--gold); }
.toc-num { font-size:14px; color:var(--gold); font-family:var(--body); letter-spacing:.2em; min-width:34px; }
.bk-fm-glossaire dl { display:grid; grid-template-columns:1fr; gap:2px; }
.bk-fm-glossaire dt { font-family:var(--display); font-weight:500; font-size:17px; margin-top:16px; }
.bk-fm-glossaire dd { font-size:15.5px; color:var(--ink-soft); }

/* page number footer */
.bk-folio { position:fixed; bottom:16px; right:26px; font-size:11px; letter-spacing:.28em; color:var(--gold); z-index:49; font-weight:500; }

@media (max-width: 760px) {
  .bk-page { padding:9vh 22px; }
  .bk-duo, .bk-duo.alt { grid-template-columns:1fr; gap:26px; }
  .bk-duo.alt .bk-duo-img { order:0; }
  .rcp-cols { grid-template-columns:1fr; gap:26px; }
  .bk-chrome { padding:0 16px; }
  .bk-recipe { padding:6vh 24px; }
}

/* ---- wave 2 : galleries, insets, emblems ---- */
.bk-gallery { max-width:1180px; }
.bk-gallery h3 { text-align:center; }
.bk-gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; margin-top:30px; }
.bk-gallery-cell { aspect-ratio:3/2.6; background-size:cover; background-position:center; box-shadow:0 18px 44px -22px rgba(42,35,32,.35); }
.bk-gallery-grid .bk-gallery-cell:nth-child(3n+2) { transform:translateY(18px); }

.bk-inset { max-width:none; padding:0; min-height:96vh; background-size:cover; background-position:center; position:relative; display:grid; align-items:end; }
.bk-inset-card { position:absolute; top:9vh; right:7vw; width:min(300px,34vw); aspect-ratio:1/1; background-size:cover; background-position:center; border:10px solid var(--ivory); box-shadow:0 26px 60px -18px rgba(42,35,32,.5); transform:rotate(2.5deg); }
.bk-inset .bk-caption { position:relative; }
.bk-planche { min-height:88vh; background-size:contain; background-repeat:no-repeat; background-color:#FBF6EC; background-position:center 40%; }
.bk-planche .bk-caption { background:none; text-align:center; padding-bottom:6vh; }

.bk-emblem { width:76px; height:76px; border-radius:50%; background-size:140%; background-position:center; margin:0 auto 22px; border:1px solid var(--gold-soft); }
.bk-open .bk-emblem { margin:0 0 22px; }

/* ---------- 2026-07-15 phone pass ---------- */
@media (max-width: 660px) {
  .bk-chrome { padding: 0 14px; top: 12px; }
  .bk-chrome a, .bk-chrome .bk-where { font-size: 9px; letter-spacing: .2em; white-space: nowrap; }
  .bk-chrome .bk-where { overflow: hidden; text-overflow: ellipsis; max-width: 58vw; text-align: right; }
  .bk-cover-veil { background: linear-gradient(to bottom, rgba(255,253,251,.92) 0%, rgba(255,253,251,.62) 46%, rgba(255,253,251,.3) 74%, rgba(255,253,251,.88) 100%); }
  .bk-cover-inner .author { margin-top: 5vh; font-size: 12px; }
  .bk-open .bk-open-inner { padding: 14vh 7vw 8vh; }
  .bk-inset-card { top: auto; bottom: 16vh; right: 5vw; width: 38vw; border-width: 6px; }
  .bk-full, .bk-inset { min-height: 72vh; }
  .bk-planche { min-height: 58vh; }
  .bk-folio { bottom: 10px; right: 14px; font-size: 9px; }
  .bk-gallery-grid .bk-gallery-cell:nth-child(3n+2) { transform: none; }
  .rcp-pictos { gap: 16px; }
}
html { overflow-x: clip; }