/* ============================================================
   YOZENGA JOURNAL — thème poétique et fluide
   crème / sauge / or doux / blush — inspiré des vraies couvertures
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  --jr-cream: #faf6ee;
  --jr-cream-deep: #f2ead9;
  --jr-paper: #fffdf7;
  --jr-sage: #93a377;
  --jr-sage-deep: #5f6e46;
  --jr-sage-pale: #e9edE1;
  --jr-gold: #c8a153;
  --jr-gold-pale: #ecdcb8;
  --jr-blush: #e3b9a4;
  --jr-ink: #40382c;
  --jr-ink-soft: #5f5647;
  --jr-rule: #e2d8c3;

  --jr-display: 'Fraunces', serif;
  --jr-body: 'Lora', serif;
  --jr-punch: 'Fraunces', serif;
}

.journal-theme {
  font-family: var(--jr-body);
  color: var(--jr-ink);
  background-color: var(--jr-cream);
  background-image: linear-gradient(rgba(240,230,210,0.32), rgba(240,230,210,0.32)), url('images/papier-froisse.jpg');
  background-size: auto, 900px;
  background-repeat: repeat, repeat;
  line-height: 1.75;
  position: relative;
}
.journal-theme h1, .journal-theme h2, .journal-theme h3, .journal-theme h4 {
  font-family: var(--jr-display); font-weight: 500; color: var(--jr-ink);
}
.journal-theme a { color: inherit; }
.journal-theme em { font-style: italic; }

/* Ornement ✦ — comme dans le vrai journal papier */
.ornament { text-align: center; color: var(--jr-gold); font-size: 14px; letter-spacing: 12px; margin: 10px 0 30px; }
.ornament::before, .ornament::after { content: '✦'; }

/* Header */
.journal-theme .site-header { position: sticky; z-index: 10; background: rgba(255, 255, 255, 0.97); border-bottom: 1px solid var(--jr-rule); }
.journal-theme .wordmark { font-family: var(--jr-display); font-size: 23px; letter-spacing: 0.5px; color: var(--jr-ink); font-weight: 700; }
.journal-theme .wordmark .zen { font-style: italic; font-weight: 500; color: var(--jr-gold); }
.journal-theme .universe-switch { background: var(--jr-cream-deep); }
.journal-theme .universe-switch a { font-family: var(--jr-body); font-size: 12.5px; letter-spacing: 1px; padding: 7px 16px; border-radius: 40px; color: var(--jr-ink-soft); transition: background 0.25s ease, color 0.25s ease; }
.journal-theme .universe-switch a.active { background: var(--jr-ink); color: var(--jr-paper); }
.journal-theme .main-nav a { font-family: var(--jr-body); font-style: italic; font-size: 14px; color: var(--jr-ink-soft); transition: color 0.2s ease; }
.journal-theme .main-nav a:hover { color: var(--jr-sage-deep); }

/* Boutons — sobres, soulignés, pas de blocs pleins */
.journal-theme .btn {
  display: inline-block; position: relative;
  font-family: var(--jr-body); font-style: italic; font-size: 15px;
  color: var(--jr-sage-deep); border-bottom: 1px solid var(--jr-sage);
  padding-bottom: 3px; transition: color 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}
.journal-theme .btn:hover { color: var(--jr-gold); border-color: var(--jr-gold); padding-left: 4px; }
.journal-theme .btn-fill {
  font-style: normal; letter-spacing: 1px; text-transform: uppercase; font-size: 12.5px;
  color: var(--jr-ink); border: 1px solid var(--jr-ink); border-radius: 30px; padding: 13px 26px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}
.journal-theme .btn-fill:hover { background: var(--jr-ink); color: var(--jr-paper); transform: translateY(-2px); }
.journal-theme .btn-block { display: block; text-align: center; }

/* Hero split (accueil) */
.journal-theme .split-panel.panel-journal { align-items: stretch; padding: 0; }
.journal-theme .panel-journal::before { display: none; }
.journal-theme .panel-content { color: var(--jr-ink); max-width: 460px; }
.journal-theme .panel-title { font-family: var(--jr-display); font-size: clamp(28px,3.6vw,42px); line-height: 1.15; margin-bottom: 14px; }
.journal-theme .panel-title em { font-style: italic; color: var(--jr-sage-deep); }
.journal-theme .panel-desc { font-family: var(--jr-body); font-size: 16px; color: var(--jr-ink-soft); margin-bottom: 22px; }
.journal-theme .panel-content .btn { color: var(--jr-sage-deep); border-color: var(--jr-sage); }

/* Bannière poétique (page Journal) */
.journal-hero { padding: 30px 0 0; text-align: center; position: relative; overflow: hidden; }
.journal-hero .logo-mark { max-width: 300px; width: 60%; height: auto; margin: 10px auto 6px; display: block; }
.journal-hero .tagline { font-family: var(--jr-display); font-style: italic; font-size: clamp(22px,3.2vw,32px); max-width: 660px; margin: 18px auto 8px; line-height: 1.45; }
.journal-hero .sub { font-family: var(--jr-body); font-size: 15.5px; color: var(--jr-ink-soft); max-width: 460px; margin: 0 auto 30px; }
.journal-hero .cover-wrap { display: inline-block; transform: rotate(-3deg); margin-top: 6px; transition: transform 0.4s ease; }
.journal-hero .cover-wrap:hover { transform: rotate(0deg) scale(1.02); }
.journal-hero .cover-wrap img { width: 230px; max-width: 60vw; box-shadow: 0 18px 40px rgba(64,56,44,0.18); border: 6px solid var(--jr-paper); }
.journal-hero .wave { display: block; width: 100%; height: 60px; margin-top: -2px; }
.journal-banner { width: 100%; display: block; }

/* Eventail de couvertures */
.cover-fan { display: flex; align-items: center; justify-content: center; gap: -20px; margin-top: 10px; }
.cover-fan .side { width: 130px; box-shadow: 0 14px 28px rgba(64,56,44,0.16); border: 5px solid var(--jr-paper); transition: transform 0.35s ease; }
.cover-fan .side.left { transform: rotate(-9deg) translateX(18px); z-index: 1; }
.cover-fan .side.right { transform: rotate(9deg) translateX(-18px); z-index: 1; }
.cover-fan .main { width: 220px; box-shadow: 0 22px 46px rgba(64,56,44,0.22); border: 6px solid var(--jr-paper); z-index: 2; position: relative; }
.cover-fan a:hover img { transform: scale(1.03); }
.cover-fan img { transition: transform 0.35s ease; display: block; }
@media (max-width: 600px) { .cover-fan .side { width: 90px; } .cover-fan .main { width: 150px; } }

/* Typo punchy pour les accents */
.punch { font-family: var(--jr-punch); text-transform: uppercase; letter-spacing: 1px; color: var(--jr-gold); }

/* Journal Digital */
.digital-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .digital-grid { grid-template-columns: 1fr; } }
.digital-card {
  position: relative; z-index: 2;
  background: var(--jr-paper); color: var(--jr-ink);
  padding: 32px 26px; border-radius: 4px;
  border-top: 4px solid var(--jr-sage);
  box-shadow: 0 3px 6px rgba(64,56,44,0.05), 0 20px 40px rgba(64,56,44,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.digital-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 6px 10px rgba(64,56,44,0.08), 0 30px 54px rgba(64,56,44,0.16); }
.digital-card:nth-child(1) { border-top-color: var(--jr-sage); }
.digital-card:nth-child(2) { border-top-color: var(--jr-gold); }
.digital-card:nth-child(3) { border-top-color: var(--jr-blush); }
.digital-card .num { font-family: var(--jr-display); font-weight: 600; font-size: 15px; color: var(--jr-gold); letter-spacing: 1px; }
.digital-card h3 { font-family: var(--jr-display); color: var(--jr-ink); font-size: 21px; margin: 8px 0 12px; }
.digital-card p { font-family: var(--jr-body); font-size: 14px; color: var(--jr-ink-soft); }
.digital-card .num { font-family: var(--jr-punch); font-size: 15px; color: var(--jr-gold); letter-spacing: 2px; }
.digital-card h3 { font-family: var(--jr-display); color: var(--jr-paper); font-size: 21px; margin: 8px 0 12px; }
.digital-card p { font-family: var(--jr-body); font-size: 14px; color: var(--jr-gold-pale); }

/* Sections */
.journal-theme .section-cream { background: var(--jr-cream); }
.journal-theme .section-paper { background: var(--jr-paper); }
.journal-theme h2.title { font-size: clamp(30px, 3.8vw, 44px); font-weight: 700; margin-bottom: 22px; color: var(--jr-ink); }
.journal-theme h2.title em { font-style: italic; color: var(--jr-sage-deep); }
.journal-theme .eyebrow { font-family: var(--jr-body); font-weight: 600; font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--jr-sage-deep); margin-bottom: 12px; display: block; }
.journal-theme .lede { font-family: var(--jr-body); font-size: 16.5px; color: var(--jr-ink-soft); max-width: 620px; }

.journal-theme .mantra { font-family: var(--jr-display); font-style: italic; font-size: clamp(20px, 2.4vw, 27px); text-align: center; color: var(--jr-ink); max-width: 680px; margin: 0 auto; line-height: 1.6; }

/* Vision — texte qui coule, pas de frise */
.vision-flow { max-width: 640px; margin: 0 auto; text-align: center; }
.vision-flow p { font-size: 16.5px; line-height: 1.9; color: var(--jr-ink-soft); margin: 0 0 8px; }
.vision-flow strong { color: var(--jr-ink); font-weight: 500; }

/* Articles / blog */
.journal-theme .article-card { border-bottom: 1px solid var(--jr-rule); padding: 30px 0; }
.journal-theme .article-card:first-child { padding-top: 0; }
.journal-theme .article-card:last-child { border-bottom: none; padding-bottom: 0; }
.journal-theme .article-meta { font-family: var(--jr-body); font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--jr-sage-deep); margin-bottom: 10px; }
.journal-theme .article-title { font-family: var(--jr-display); font-size: 25px; margin-bottom: 10px; }
.journal-theme .article-title a:hover { color: var(--jr-gold); }
.journal-theme .article-excerpt { font-family: var(--jr-body); color: var(--jr-ink-soft); font-size: 15px; }
.journal-theme .read-more { font-family: var(--jr-body); font-style: italic; font-size: 14px; color: var(--jr-gold); border-bottom: 1px solid var(--jr-gold); padding-bottom: 2px; }
.blog-badge { display: inline-block; font-family: var(--jr-body); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--jr-sage-deep); background: var(--jr-sage-pale); padding: 4px 12px; margin-bottom: 10px; border-radius: 20px; }

.journal-theme .media-embed { aspect-ratio: 16/9; background: var(--jr-cream-deep); border: 1px solid var(--jr-rule); display: flex; align-items: center; justify-content: center; color: var(--jr-ink-soft); font-family: var(--jr-body); font-size: 13.5px; text-align: center; padding: 20px; }
.journal-theme .audio-embed { background: var(--jr-paper); border: 1px solid var(--jr-rule); padding: 18px 20px; font-family: var(--jr-body); font-size: 14px; color: var(--jr-ink-soft); }

/* Blocs "papier" doux */
.paper-block {
  position: relative; z-index: 2;
  background: var(--jr-paper);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 3px 6px rgba(64,56,44,0.07), 0 24px 48px rgba(64,56,44,0.14);
  padding: 40px 40px; border-radius: 3px;
  border-top: 4px solid var(--jr-gold);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.paper-block:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 10px rgba(64,56,44,0.1), 0 32px 56px rgba(64,56,44,0.2);
}
.paper-block.accent-sage { border-top-color: var(--jr-sage); }
.paper-block.accent-blush { border-top-color: var(--jr-blush); }
.paper-block.accent-gold { border-top-color: var(--jr-gold); }
@media (max-width: 700px) { .paper-block { padding: 28px 22px; } }

.shop-panel { border: 1px solid var(--jr-rule); padding: 30px; background: var(--jr-paper); }
.shop-panel h3 { font-size: 22px; margin-bottom: 10px; }
.price-tag { font-family: var(--jr-display); font-size: 24px; color: var(--jr-sage-deep); margin: 12px 0; }
.note { font-family: var(--jr-body); font-style: italic; font-size: 13px; color: var(--jr-ink-soft); }
.pill { font-family: var(--jr-body); font-size: 12px; padding: 5px 14px; border-radius: 20px; background: var(--jr-sage-pale); color: var(--jr-sage-deep); margin-right: 6px; display: inline-block; }

/* Numéros / aperçu feuilletage */
.issue-meta { font-family: var(--jr-body); font-size: 12px; color: var(--jr-ink-soft); letter-spacing: 1px; text-transform: uppercase; }
.issue-title { font-family: var(--jr-display); font-size: 19px; margin: 4px 0 8px; }
.preview-strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.preview-strip img { width: 140px; flex-shrink: 0; border: 1px solid var(--jr-rule); }

.round-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.round-btn {
  font-family: var(--jr-body); font-size: 13.5px; letter-spacing: 0.5px;
  padding: 12px 24px; border-radius: 50px; border: 1px solid var(--jr-ink);
  color: var(--jr-ink); background: transparent;
  transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease;
}
.round-btn:hover { background: var(--jr-ink); color: var(--jr-paper); transform: translateY(-2px); }
.round-btn.filled { background: var(--jr-ink); color: var(--jr-paper); }
.round-btn.filled:hover { background: var(--jr-gold); border-color: var(--jr-gold); color: var(--jr-ink); }

/* Footer */
.journal-theme .site-footer { background: var(--jr-ink); color: var(--jr-gold-pale); padding: 56px 0 30px; font-size: 13px; font-family: var(--jr-body); }
.journal-theme .site-footer h4 { font-family: var(--jr-display); color: var(--jr-paper); font-size: 15px; letter-spacing: 0.5px; margin-bottom: 14px; font-weight: 600; }
.journal-theme .site-footer a { color: var(--jr-gold-pale); transition: color 0.2s ease; }
.journal-theme .site-footer a:hover { color: var(--jr-paper); }
.journal-theme .footer-bottom { border-top: 1px solid rgba(250,246,238,0.15); padding-top: 20px; color: var(--jr-ink-soft); }

/* Pétales et feuilles qui tombent doucement */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.petal {
  position: absolute;
  top: -6%;
  opacity: 0.8;
  will-change: transform;
}
.petal.leaf { width: 13px; height: 13px; background: var(--jr-sage); border-radius: 0 100% 0 100%; }
.petal.pink { width: 11px; height: 9px; background: var(--jr-blush); border-radius: 50% 0 50% 50%; }
.petal.gold { width: 9px; height: 9px; background: var(--jr-gold); border-radius: 50%; opacity: 0.7; }

@keyframes fall-a {
  0%   { transform: translate(0, -10vh) rotate(0deg); }
  50%  { transform: translate(40px, 55vh) rotate(160deg); }
  100% { transform: translate(-15px, 112vh) rotate(320deg); }
}
@keyframes fall-b {
  0%   { transform: translate(0, -10vh) rotate(0deg); }
  50%  { transform: translate(-45px, 50vh) rotate(-140deg); }
  100% { transform: translate(20px, 112vh) rotate(-300deg); }
}
@keyframes fall-c {
  0%   { transform: translate(0, -10vh) rotate(0deg); }
  50%  { transform: translate(25px, 60vh) rotate(200deg); }
  100% { transform: translate(-30px, 112vh) rotate(380deg); }
}
@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}

/* Fond cactus en transparence — section numéro d'été */
.section-cactus {
  position: relative;
  background-image: linear-gradient(rgba(250,246,238,0.86), rgba(250,246,238,0.86)), url('images/cactus.jpg');
  background-size: cover;
  background-position: center;
}

/* Fond papier kraft — section Journal Digital */
.section-kraft {
  background-color: #d8c4a0;
  background-image: linear-gradient(rgba(216,196,160,0.35), rgba(216,196,160,0.35)), url('images/kraft-paper.jpg');
  background-size: auto, 500px;
  background-repeat: repeat, repeat;
}
.section-kraft .digital-card { background: rgba(255,253,247,0.94); }

/* Lire la suite — dépliant en accordéon dans le blog */
.read-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--jr-body); font-style: italic; font-size: 14px; color: var(--jr-gold);
  border-bottom: 1px solid var(--jr-gold); padding-bottom: 2px;
}
.read-toggle .arrow { display: inline-block; transition: transform 0.3s ease; margin-left: 4px; }
.read-toggle.open .arrow { transform: rotate(90deg); }
.read-panel {
  max-height: 0; overflow: hidden; transition: max-height 0.5s ease;
}
.read-panel.open { max-height: 3000px; }
.read-panel-inner { padding-top: 24px; border-top: 1px solid var(--jr-rule); margin-top: 20px; }
.read-panel-inner p { font-family: var(--jr-body); font-size: 15.5px; color: var(--jr-ink-soft); margin: 0 0 14px; }
.read-panel-inner h4 { font-family: var(--jr-display); font-size: 17px; color: var(--jr-ink); margin: 20px 0 8px; }
.read-panel-inner .pull-quote { font-family: var(--jr-display); font-style: italic; font-size: 19px; color: var(--jr-sage-deep); margin: 18px 0; line-height: 1.5; }
.read-panel-inner .spread { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }
.read-panel-inner .spread img { width: calc(50% - 5px); border: 1px solid var(--jr-rule); }
@media (max-width: 600px) { .read-panel-inner .spread img { width: 100%; } }