/* Charte Zentitude Créative — reprise de index.html existant */
:root{
  --cream:#F6F0E7; --paper:#FCFAF5; --paper-2:#F1ECE0;
  --ink:#3E4A5B; --ink-soft:#6C7787; --ink-faint:#9AA3AF;
  --sage:#5F9A87; --sage-deep:#3E7C72; --lav:#9B8FC4; --gold:#C6A46B;
  --line:rgba(62,74,91,.14);
  --shadow:0 18px 50px -24px rgba(62,74,91,.28);
  --shadow-sm:0 8px 26px -18px rgba(62,74,91,.30);
  --maxw:1080px;
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Nunito Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(16px,1.05vw,18px); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:0; text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px))}
.eyebrow{font-weight:700; font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--sage-deep)}

/* Header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(246,240,231,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px max(24px,env(safe-area-inset-right,0px)) 12px max(24px,env(safe-area-inset-left,0px)); max-width:1180px; margin:0 auto}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:38px; width:auto}
.brand .wm{display:flex; flex-direction:column; line-height:1}
.brand .wm b{font-family:var(--font-display); font-weight:500; font-size:1.02rem; letter-spacing:.02em}
.brand .wm span{font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px}
.menu{display:flex; gap:6px; align-items:center; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-weight:600; font-size:.95rem; padding:8px 14px; border-radius:100px; color:var(--ink-soft); transition:background .2s,color .2s}
.menu a:hover{background:rgba(95,154,135,.1); color:var(--sage-deep)}
.menu a[aria-current="page"]{background:rgba(95,154,135,.14); color:var(--sage-deep)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.6em; cursor:pointer; border:none; border-radius:100px; text-decoration:none; font-family:var(--font-body); font-weight:700; font-size:1.02rem; padding:15px 30px; color:#fff;
  background:linear-gradient(135deg,var(--sage) 0%, var(--sage-deep) 55%, #366a80 100%);
  box-shadow:0 14px 30px -12px rgba(62,124,114,.55); transition:transform .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px); box-shadow:0 20px 40px -12px rgba(62,124,114,.6)}
.btn:focus-visible{outline:3px solid var(--lav); outline-offset:3px}
.btn.small{padding:11px 20px; font-size:.92rem}
.btn svg{width:18px;height:18px;flex:none;transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-ghost{background:transparent; color:var(--sage-deep); box-shadow:none; border:1.5px solid rgba(62,124,114,.45)}
.btn-ghost:hover{background:rgba(95,154,135,.08)}

/* Hero */
.hero{position:relative; overflow:hidden; text-align:center; padding:72px 0 56px}
.hero .mandala-bg{position:absolute; top:-6%; left:50%; width:min(760px,120%); opacity:.5; z-index:0; pointer-events:none; animation:breathe 11s ease-in-out infinite; transform:translateX(-50%)}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1); opacity:.42}50%{transform:translateX(-50%) scale(1.06); opacity:.6}}
.hero .inner{position:relative; z-index:1; max-width:820px; margin:0 auto; padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px))}
.hero .eyebrow{display:inline-block; margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.8rem); margin-bottom:.5em}
.hero h1 em{font-style:italic; color:var(--sage-deep)}
.hero .sub{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-soft); max-width:600px; margin:0 auto 10px}
.hero.compact{padding:56px 0 40px}
.hero.compact h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.crumb{font-size:.86rem; color:var(--ink-faint); margin-bottom:14px}
.crumb a{text-decoration:none; color:var(--ink-soft)}
.crumb a:hover{color:var(--sage-deep)}

/* Sections */
.band{padding:64px 0}
.band.tint{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(241,236,224,.6))}
.band.paper{background:var(--paper)}
.section-head{max-width:680px; margin:0 auto 40px; text-align:center}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:.35em}
.section-head p{color:var(--ink-soft)}
.divider{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 26px}
.divider svg{width:26px;height:26px;opacity:.8}
.divider .rule{height:1px; width:56px; background:var(--line)}

/* Choix des catégories (accueil) */
.choose{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:960px; margin:0 auto}
.cat{position:relative; display:flex; flex-direction:column; gap:14px; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:24px; padding:34px 32px 30px; box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; min-height:300px}
.cat:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.cat:focus-visible{outline:3px solid var(--lav); outline-offset:3px}
.cat .glow{position:absolute; inset:auto -20% -40% auto; width:70%; aspect-ratio:1; border-radius:50%; filter:blur(10px); opacity:.5; pointer-events:none}
.cat.coloriage .glow{background:radial-gradient(circle,rgba(95,154,135,.35),transparent 70%)}
.cat.ebook .glow{background:radial-gradient(circle,rgba(155,143,196,.38),transparent 70%)}
.cat .ic{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center}
.cat.coloriage .ic{background:rgba(95,154,135,.14)}
.cat.ebook .ic{background:rgba(155,143,196,.16)}
.cat .ic svg{width:32px;height:32px}
.cat h2{font-size:clamp(1.5rem,2.6vw,2rem); font-weight:500}
.cat p{color:var(--ink-soft); margin:0; max-width:40ch}
.cat .count{font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.cat .go{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--sage-deep)}
.cat .go svg{width:18px;height:18px; transition:transform .25s}
.cat:hover .go svg{transform:translateX(4px)}

/* Grille produits */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; margin:0 auto}
.product{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease}
.product:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.cover{aspect-ratio:4/3; max-width:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:22px; color:var(--ink-soft); position:relative;
  background:radial-gradient(120% 90% at 30% 20%, rgba(155,143,196,.16), transparent 60%), radial-gradient(120% 90% at 80% 90%, rgba(198,164,107,.16), transparent 55%), linear-gradient(135deg,#F3EFE6,#EFE9DC)}
.cover.c2{background:radial-gradient(120% 90% at 70% 20%, rgba(95,154,135,.2), transparent 60%), radial-gradient(120% 90% at 20% 90%, rgba(155,143,196,.16), transparent 55%), linear-gradient(135deg,#F3EFE6,#EFE9DC)}
.cover.c3{background:radial-gradient(120% 90% at 50% 10%, rgba(198,164,107,.2), transparent 60%), radial-gradient(120% 90% at 80% 90%, rgba(95,154,135,.16), transparent 55%), linear-gradient(135deg,#F3EFE6,#EFE9DC)}
.cover svg{width:56px;height:56px;margin:0 auto 10px;opacity:.9}
.cover small{font-size:.76rem; letter-spacing:.04em; display:inline-block; padding:4px 11px; border:1px dashed var(--ink-faint); border-radius:100px}
.tag{position:absolute; top:14px; left:14px; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:5px 11px; border-radius:100px; background:rgba(255,255,255,.75); color:var(--sage-deep); backdrop-filter:blur(4px)}
.tag.lav{color:#6f62a3}
.pbody{display:flex; flex-direction:column; gap:10px; padding:22px 24px 24px; flex:1}
.pbody h3{font-size:1.2rem; font-weight:500}
.pbody p{color:var(--ink-soft); font-size:.95rem; margin:0; flex:1}
.pfoot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; flex-wrap:wrap}
.price{font-family:var(--font-display); font-size:1.3rem; font-weight:500}
.price s{font-family:var(--font-body); font-size:.9rem; color:var(--ink-faint); font-weight:400; margin-right:6px}
.price.tbd{font-family:var(--font-body); font-size:.82rem; color:var(--ink-faint); font-weight:600; letter-spacing:.04em}
.format{font-size:.8rem; color:var(--ink-faint); font-weight:600}

/* Réassurance */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:900px; margin:0 auto}
.trust .t{text-align:center; padding:8px}
.trust .t svg{width:40px;height:40px;margin:0 auto 12px}
.trust .t b{display:block; font-family:var(--font-display); font-weight:500; font-size:1.1rem; margin-bottom:4px}
.trust .t span{color:var(--ink-soft); font-size:.92rem}

/* Bloc "autre catégorie" en bas de page catégorie */
.cross{max-width:760px; margin:0 auto; text-align:center; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:34px; box-shadow:var(--shadow-sm)}
.cross h2{font-size:1.6rem; font-weight:500; margin-bottom:.3em}
.cross p{color:var(--ink-soft)}

footer{border-top:1px solid var(--line); padding:34px 0; text-align:center; color:var(--ink-faint); font-size:.85rem; background:var(--paper)}
footer a{color:var(--ink-soft); text-decoration:none}
footer a:hover{text-decoration:underline}
footer .cols{display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin-bottom:12px}

@media(max-width:860px){
  .choose{grid-template-columns:1fr}
  .products{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr; gap:30px}
  .brand .wm span{display:none}
}
@media(max-width:560px){
  .products{grid-template-columns:1fr}
  .menu a{padding:7px 10px; font-size:.86rem}
  .band{padding:48px 0}
  .hero{padding:52px 0 40px}
  .cat{min-height:0; padding:28px 24px}
}
@media(prefers-reduced-motion:reduce){
  .hero .mandala-bg{animation:none}
  *{scroll-behavior:auto; transition:none!important}
}

/* ---------- Accueil : deux univers ---------- */
.universes{display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:1040px; margin:0 auto}
.uni{position:relative; display:flex; flex-direction:column; text-decoration:none; border-radius:26px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease; min-width:0}
.uni:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.uni:focus-visible{outline:3px solid var(--lav); outline-offset:3px}
.uni .visual{aspect-ratio:1/1; max-width:100%; position:relative; overflow:hidden}
.uni .visual img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.uni:hover .visual img{transform:scale(1.03)}
.uni .body{padding:28px 30px 30px; display:flex; flex-direction:column; gap:10px; flex:1}
.uni .ask{font-family:var(--font-display); font-size:clamp(1.45rem,2.4vw,1.9rem); font-weight:500; line-height:1.15; text-wrap:balance}
.uni .body p{margin:0; color:var(--ink-soft)}
.uni .sign{display:flex; align-items:baseline; gap:10px; margin-top:auto; padding-top:18px; border-top:1px dashed var(--line); font-size:.9rem; color:var(--ink-faint); flex-wrap:wrap}
.uni .sign b{font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--ink)}
.uni .go{display:inline-flex; align-items:center; gap:8px; font-weight:700; margin-top:10px}
.uni .go svg{width:18px;height:18px;transition:transform .25s}
.uni:hover .go svg{transform:translateX(4px)}
/* Zentitude : fond papier clair, végétal */
.uni.zc{background:var(--paper); color:var(--ink)}
.uni.zc .visual{background:radial-gradient(120% 90% at 30% 20%, rgba(155,143,196,.22), transparent 60%), radial-gradient(120% 90% at 80% 90%, rgba(198,164,107,.22), transparent 55%), linear-gradient(135deg,#F3EFE6,#EAF0E8)}
.uni.zc .go{color:var(--sage-deep)}
/* Encre Refuge : papier chaud, encre */
.uni.er{background:#FBF7F0; color:#2C2823; font-family:"Lora",Georgia,serif}
.uni.er .ask{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(1.6rem,2.6vw,2.1rem)}
.uni.er .visual{background:linear-gradient(135deg,#EEE5D6,#E3D7C3)}
.uni.er .body p{color:#5E554C}
.uni.er .sign{color:#968A7C; border-top-color:rgba(44,40,35,.16)}
.uni.er .sign b{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:1.15rem; color:#2C2823}
.uni.er .go{color:#33415E; font-family:"Nunito Sans",system-ui,sans-serif}
.common{max-width:720px; margin:0 auto; text-align:center}
.common .lead{font-family:var(--font-display); font-weight:300; font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.35; margin-bottom:.6em}
.common p{color:var(--ink-soft)}
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:900px; margin:36px auto 0}
.pillar{text-align:center; padding:8px}
.pillar b{display:block; font-family:var(--font-display); font-weight:500; font-size:1.1rem; margin-bottom:4px}
.pillar span{color:var(--ink-soft); font-size:.92rem}
@media(max-width:860px){.universes{grid-template-columns:1fr}.pillars{grid-template-columns:1fr; gap:26px}}
.cover.real{padding:0; background:#F6F0E7}
.cover.real img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.products:has(> :only-child){grid-template-columns:minmax(0,420px); justify-content:center}

/* ---------- Page de vente Zentitude (carnet) ---------- */
.zc-lead{font-family:var(--font-display); font-weight:300; font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.35; max-width:700px; margin:0 auto .7em; text-align:center}
.zc-prose{max-width:620px; margin:0 auto; color:var(--ink-soft); text-align:center}
.zc-prose .turn{font-weight:700; color:var(--sage-deep)}
.voices-zc{max-width:640px; margin:26px auto 0; display:grid; gap:8px}
.voices-zc p{font-family:var(--font-display); font-style:italic; font-size:1.2rem; margin:0; color:var(--ink); text-align:center}
.benefits-zc{max-width:680px; margin:0 auto; list-style:none; padding:0; display:grid; gap:12px}
.benefits-zc li{display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 20px; color:var(--ink-soft)}
.benefits-zc li svg{width:22px;height:22px;flex:none;margin-top:3px}
.book-wrap-zc{display:grid; grid-template-columns:minmax(0,360px) 1fr; gap:48px; max-width:1000px; margin:0 auto; align-items:center}
.book-scene-zc{perspective:1400px; display:flex; justify-content:center; padding:20px 0}
.book-zc{position:relative; width:min(260px,70vw); aspect-ratio:210/297; transform:rotateY(-24deg) rotateX(3deg); transform-style:preserve-3d; transition:transform .6s ease}
.book-scene-zc:hover .book-zc{transform:rotateY(-14deg) rotateX(2deg)}
.book-zc .front{position:absolute; inset:0; border-radius:3px 10px 10px 3px; overflow:hidden; box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.06) inset; background:#F6F0E7}
.book-zc .front img{width:100%; height:100%; object-fit:cover; display:block}
.book-zc .front::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.18) 0, rgba(255,255,255,.1) 3%, transparent 8%)}
.book-zc .spine{position:absolute; top:0; bottom:0; left:0; width:22px; background:linear-gradient(90deg,#d9cfbf,#EFE8DB); transform-origin:left; transform:rotateY(90deg) translateX(-22px)}
.book-zc .pages{position:absolute; top:4px; bottom:4px; right:-10px; width:12px; background:repeating-linear-gradient(180deg,#fff 0 2px,#E6DFD2 2px 3px); transform:translateZ(-6px); border-radius:0 2px 2px 0}
.facts-zc{list-style:none; margin:18px 0 26px; padding:0; display:grid; gap:10px; font-size:.95rem; color:var(--ink-soft)}
.facts-zc li{display:flex; gap:10px; align-items:center}
.facts-zc li::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--sage); flex:none}
.facts-zc b{color:var(--ink); font-weight:700}
.flip-zc{max-width:1000px; margin:48px auto 0}
.flip-zc .flip-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.flip-zc .flip-head h3{font-size:1.35rem; font-weight:500}
.flip-zc .count{font-size:.84rem; color:var(--ink-faint)}
.viewer-zc{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); display:grid; grid-template-columns:48px 1fr 48px; gap:14px; align-items:center}
.viewer-zc .stage{position:relative; max-width:100%; aspect-ratio:210/297; max-height:70vh; margin:0 auto; overflow:hidden; border-radius:6px; box-shadow:var(--shadow-sm); background:#fff}
.viewer-zc .stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; opacity:0; transition:opacity .35s ease}
.viewer-zc .stage img.on{opacity:1}
.viewer-zc .cap{position:absolute; left:0; right:0; bottom:0; padding:10px 14px; font-size:.8rem; color:#fff; background:linear-gradient(180deg,transparent,rgba(62,74,91,.7)); letter-spacing:.04em}
.viewer-zc .wm{position:absolute; top:12px; right:12px; font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sage-deep); background:rgba(252,250,245,.92); padding:5px 10px; border-radius:100px}
.vbtn-zc{width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--cream); color:var(--sage-deep); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s}
.vbtn-zc:hover{background:rgba(95,154,135,.12)}
.vbtn-zc:focus-visible{outline:3px solid var(--lav); outline-offset:2px}
.vbtn-zc svg{width:22px;height:22px}
.thumbs-zc{display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding:4px 2px 8px; scrollbar-width:thin}
.thumbs-zc button{flex:none; width:64px; aspect-ratio:210/297; padding:0; border:2px solid transparent; border-radius:4px; overflow:hidden; cursor:pointer; background:#fff; opacity:.7; transition:opacity .2s, border-color .2s}
.thumbs-zc button img{width:100%; height:100%; object-fit:cover; display:block}
.thumbs-zc button.on,.thumbs-zc button:hover{opacity:1; border-color:var(--sage)}
.flip-note-zc{font-size:.82rem; color:var(--ink-faint); margin-top:10px; text-align:center}
.imagine-zc{max-width:680px; margin:0 auto; display:grid; gap:14px}
.imagine-zc p{margin:0; font-family:var(--font-display); font-size:1.25rem; line-height:1.35; color:var(--ink); padding-left:22px; position:relative}
.imagine-zc p::before{content:"—"; position:absolute; left:0; color:var(--gold)}
.author-zc{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:40px; max-width:1000px; margin:0 auto; align-items:start}
.author-zc .photo{position:sticky; top:90px; max-width:100%}
.author-zc .photo img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:20px; box-shadow:var(--shadow)}
.author-zc .photo figcaption{font-size:.8rem; color:var(--ink-faint); text-align:center; margin-top:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.letter-zc{min-width:0; color:var(--ink-soft)}
.letter-zc h2{font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.5em; font-weight:500}
.letter-zc p{margin:0 0 1em}
.letter-zc .pull{font-family:var(--font-display); font-size:1.3rem; font-style:italic; color:var(--ink); line-height:1.4; border-left:2px solid var(--gold); padding-left:18px; margin:1.4em 0}
.letter-zc .sig{font-family:var(--font-display); font-size:1.4rem; font-style:italic; color:var(--ink); margin-top:1em}
.for-zc{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin:0 auto}
.for-zc .col{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 28px}
.for-zc h3{font-size:1.2rem; font-weight:500; margin-bottom:.5em}
.for-zc ul{margin:0; padding-left:18px; color:var(--ink-soft); font-size:.96rem}
.for-zc li{margin-bottom:6px}
.summary .mini{display:flex; gap:16px; align-items:center; margin:10px 0 16px}
.summary .mini img{width:72px; border-radius:4px; box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.summary .mini span{font-size:.86rem; color:#CFE3D8}
.pay .consent{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--ink-soft); margin:14px 0 4px}
.pay .consent input{width:auto; margin-top:4px}
.band.deep{background:linear-gradient(160deg,#42504a,#37544f 60%,#2f5a63); color:#F3F1EA}
.band.deep .eyebrow{color:#CFE3D8}
.band.deep .imagine-zc p{color:#fff}
.band.deep .imagine-zc p::before{color:var(--gold)}
@media(max-width:860px){
  .book-wrap-zc,.author-zc,.for-zc{grid-template-columns:1fr}
  .author-zc .photo{position:static; max-width:360px; margin:0 auto}
  .viewer-zc{grid-template-columns:1fr; padding:14px}
  .viewer-zc .vbtn-zc{display:none}
}

/* Bon de commande (carnets de coloriage) */
.order-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:26px; max-width:940px; margin:0 auto; align-items:start}
.order-grid > *{min-width:0}
.summary{background:linear-gradient(160deg,#42504a,#37544f 60%,#2f5a63); color:#F3F1EA; border-radius:22px; padding:34px; box-shadow:var(--shadow)}
.summary .eyebrow{color:#CFE3D8}
.summary h3{color:#fff; font-weight:500; font-size:1.5rem; margin:14px 0 20px}
.summary .row{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:.98rem}
.summary .row.total{border-bottom:none; margin-top:8px; font-size:1.35rem; align-items:baseline}
.summary .row.total b{font-family:"Fraunces",Georgia,serif; font-weight:500}
.summary .ship{color:#BFE0CE; font-weight:700}
.summary .seals{display:flex; gap:16px; margin-top:22px; font-size:.8rem; opacity:.85; flex-wrap:wrap}
.pay{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:34px; box-shadow:var(--shadow)}
.pay h3{font-weight:500; font-size:1.4rem; margin-bottom:6px}
.pay .btn{width:100%; justify-content:center; margin-top:8px}
.paylegal{text-align:center; font-size:.78rem; color:var(--ink-faint); margin-top:14px}
@media(max-width:860px){.order-grid{grid-template-columns:1fr}}
@media(max-width:560px){.summary,.pay{padding:24px 20px}}

/* Correctifs mobiles : en-tête et micro-mentions */
.menu a{white-space:nowrap}
.hero .micro{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:18px; font-size:.84rem; color:var(--ink-faint)}
@media(max-width:560px){
  .nav{gap:10px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
  .brand .wm{display:none}
  .menu{gap:2px}
  .menu a{padding:6px 9px; font-size:.82rem}
}

/* Correctifs : icônes, cartes, listes, feuilleteur */
.pillar svg{width:40px; height:40px; margin:0 auto 12px; display:block}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; max-width:960px; margin:0 auto}
.card{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px 26px; box-shadow:var(--shadow-sm)}
.card .ic{width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px; background:rgba(95,154,135,.14)}
.card:nth-child(2) .ic{background:rgba(155,143,196,.16)}
.card:nth-child(3) .ic{background:rgba(198,164,107,.18)}
.card h3{font-size:1.22rem; font-weight:500; margin-bottom:.4em}
.card p{color:var(--ink-soft); font-size:.97rem; margin:0}
.final{text-align:center; padding:76px 0}
.final h2{font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:.4em}
.final p{color:var(--ink-soft); max-width:520px; margin:0 auto 30px}
.btn .price-chip{background:rgba(255,255,255,.22); padding:2px 10px; border-radius:100px; font-size:.92em}
.facts-zc li{display:block; position:relative; padding-left:18px}
.facts-zc li::before{position:absolute; left:0; top:.6em}
.viewer-zc .stage{width:min(100%, calc(70vh * 210 / 297))}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
@media(max-width:560px){
  .final{padding:56px 0}
  footer .cols{gap:0 4px} footer .cols a{display:inline-block; padding:10px 8px}
}
@media(max-width:560px){.menu a{min-height:40px; display:inline-flex; align-items:center}}