/* ========== KÕRABOX — Base (Livre palette) ========== */
:root{
  --bg: #D0CBC4;                 /* papier */
  --text: #0E3D37;               /* encre */
  --muted: rgba(14,61,55,.72);
  --accent: #0E3D37;
  --accent-2: rgba(14,61,55,.88);
  --card: rgba(255,255,255,.78); /* japandi: léger */
  --line: rgba(14,61,55,.14);
  --maxw: 960px;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* ========== Typography ========== */
h1,h2,h3{
  font-family:"Playfair Display", serif;
  margin:0 0 .5rem;
}
.display{ font-size: clamp(2rem, 5vw, 3rem); }
.subtitle{ opacity:.9; font-weight:600; letter-spacing:.06em; }
.tagline{ font-style: italic; margin-top:.35rem; color: var(--muted); }

/* ========== Layout helpers ========== */
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
.section{ padding: 3rem 0; }
.text-center{ text-align:center; }
.content{ max-width: 800px; margin: 0 auto; }
.content p{ margin: 0 0 1rem; }

/* ========== Header / Nav ========== */
.site-header{
  background: rgba(255,255,255,.86);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgba(14,61,55,.10);
  backdrop-filter: blur(6px);
}

.header-grid{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:64px;
}

.brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  color: var(--text);
  text-decoration:none;
}

.brand-name{ font-weight:700; letter-spacing:.01em; }
.brand-logo{ width:32px; height:auto; }

.menu-toggle{
  margin-left:auto;
  background:none;
  border:1px solid rgba(14,61,55,.18);
  border-radius:.55rem;
  padding:.4rem .6rem;
  font-size:1rem;
  cursor:pointer;
  color: var(--text);
}

.site-nav{ display:none; }

.site-nav.open{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1rem;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(14,61,55,.12);
  border-radius:.85rem;
  position:absolute;
  right:1rem;
  top:64px;
}

.nav-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:0;
  margin:0;
}

.nav-list a{
  color: var(--text);
  text-decoration:none;
}
.nav-list a:hover{ color: var(--accent); }

.lang-switch{
  display:flex;
  align-items:center;
  gap:.5rem;
  color: var(--text);
}
.lang-switch a{
  color: var(--text);
  text-decoration:none;
}
.lang-switch a:hover{ color: var(--accent); }

@media (min-width: 900px){
  .menu-toggle{ display:none; }
  .site-nav,
  .site-nav.open{
    display:flex;
    align-items:center;
    gap:1.25rem;
    margin-left:auto;
    position:static;
    border:none;
    background:none;
    padding:0;
  }
  .nav-list{ flex-direction:row; gap:1rem; }
}

/* ========== Hero ========== */
.hero{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.25));
  text-align:center;
}
.hero-logo{
  display:block;
  margin:0 auto 1rem;
  width:192px;
  height:auto;
}

/* ========== Buttons (STYLE UNIQUE – Amazon / Bookelis / PayPal) ========== */
a.btn,
a.btn:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-width:220px;
  padding:.85rem 1.35rem;
  border-radius:.85rem;
  text-decoration:none;
  font-weight:650;
  letter-spacing:.01em;
  cursor:pointer;

  color:#D0CBC4 !important;
  background:var(--accent);
  border:1px solid var(--accent);

  transition:
    transform .12s ease,
    opacity .12s ease,
    background .12s ease,
    border-color .12s ease;
}

a.btn:hover{
  opacity:.92;
  transform: translateY(-1px);
}

a.btn:active{
  transform: translateY(0);
}

/* Anti-bleu navigateur */
a{ color: inherit; }
a:visited{ color: inherit; }

/* ========== About KÕRABOX & Auteur (centré) ========== */
.about,
.about-author{
  text-align:center;
}

.about .content,
.about-author .content{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ========== Book section ========== */
.book-lead{
  color: var(--muted);
  margin:.5rem 0 1.25rem;
}

/* Ancien support video (si tu réutilises plus tard, ça reste propre) */
.book-video{
  display:block;
  width:100%;
  max-width:720px;
  margin:0 auto 1.5rem;
  border-radius:14px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(14,61,55,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* Nouveau support image (PNG mockup) */
.book-image{
  display:block;
  width:100%;
  max-width: 520px;           /* clé: taille maîtrisée */
  height:auto;
  margin: 0 auto 1.5rem;
  border-radius: 14px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(14,61,55,.12);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}

/* Si tu veux un rendu encore plus “maquette” (optionnel) */
/*
.book-image{
  padding: 18px;
}
*/

.book-actions{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 1rem;
}

.book-note{
  color: var(--muted);
  margin-top:.75rem;
  line-height:1.5;
}

/* ========== Support block ========== */
.support .support-note{ color: var(--muted); margin-top:.25rem; }

.support-actions{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin:1.25rem 0 .75rem;
}

.support-legal{
  color: var(--muted);
  margin:.5rem 0 0;
}

/* ========== Social ========== */
.social-links{
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  padding:0;
  margin:1rem 0;
}

.social-links img{
  display:block;
  width:24px;
  height:24px;
  opacity:.9;
  transition: opacity .2s;
}
.social-links img:hover{ opacity:1; }

/* ========== Footer ========== */
.site-footer{
  background: rgba(255,255,255,.86);
  border-top: 1px solid rgba(14,61,55,.10);
  padding:1rem 0;
  color: var(--text);
}

/* ========== Small screens ========== */
@media (max-width: 600px){
  .section{ padding:2rem 0; }
  .hero-logo{ width:150px; }
  .container{ padding:0 .75rem; }
  a.btn{ width:100%; max-width:360px; min-width:0; }
  .book-video{ max-width:100%; }
  .book-image{ max-width: 100%; }
}

/* ========== Ritual cards ========== */
.ritual-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:1rem;
  margin-top:1rem;
}

@media (max-width: 980px){
  .ritual-cards{ grid-template-columns:1fr; }
}

.ritual-card{
  background: rgba(255,255,255,.86);
  border:1px solid rgba(14,61,55,.14);
  border-radius:14px;
  padding:1rem 1rem 1.1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.ritual-card .bar{
  height:4px;
  margin:-1rem -1rem .75rem;
  background:var(--accent);
}

.ritual-card h4{
  margin:.25rem 0 .5rem;
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.ritual-card p{
  margin:.3rem 0;
  color:var(--text);
  line-height:1.65;
}

/* ========== Closing signature ========== */
.page-closing{
  text-align: center;
  margin: 3rem 0 2rem;
}

.page-closing span{
  display: inline-block;
  font-family: "Playfair Display", serif;
  font-size: .85rem;
  letter-spacing: .25em;
  color: var(--muted);
  opacity: .6;
}