/* ============================================================
   Fox Hollow -- Refonte 'Vallon Vivant' (Phase 1)
   ============================================================
   N'ECRASE PAS style.css : ce fichier ajoute le namespace .vv-*
   pour la nouvelle homepage immersive sur /v2/.
   ============================================================ */

:root {
  /* Palette additionnelle Vallon Vivant */
  --vv-night:        #1a1a14;     /* nuit du vallon */
  --vv-bark-deep:    #1f1810;     /* ecorce profonde */
  --vv-bark:         #3a2a1a;     /* ecorce */
  --vv-bark-warm:    #5a3e22;     /* bois chaud */
  --vv-moss-night:   #2d3826;     /* mousse de sous-bois */
  --vv-moss-deep:    #3f4f2f;     /* mousse profonde */
  --vv-moss-warm:    #5f6e44;     /* mousse chaude */
  --vv-parchment:    #f3e4c1;     /* parchemin chaud */
  --vv-parchment-2:  #ecd9a8;     /* parchemin patine */
  --vv-cream:        #f7ecd0;     /* creme paper */
  --vv-amber:        #c9974d;     /* ambre */
  --vv-amber-glow:   #e6883b;     /* lanterne allumee */
  --vv-honey:        #e0b266;     /* miel */
  --vv-gold:         #a87432;     /* or vieilli */
  --vv-foxi:         #b8552b;     /* roux Foxi */
  --vv-foxi-deep:    #8b3d1e;     /* roux profond */
  --vv-ink:          #2c241a;     /* encre brune */
  --vv-ink-soft:     #4a3e2a;     /* encre douce */
  --vv-leaf:         #6b8b3f;     /* feuille de trefle */
}

/* ===== BASE ===== */
.vv-body {
  margin: 0;
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--vv-bark-deep);
  color: var(--vv-ink-soft);
  line-height: 1.65;
  overflow-x: hidden;
}

.vv-body * {
  box-sizing: border-box;
}

/* ===== NAV TOP IMMERSIVE ===== */
.vv-nav {
  background: linear-gradient(180deg, var(--vv-bark) 0%, var(--vv-bark-deep) 100%);
  border-bottom: 3px double var(--vv-gold);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 24px rgba(0,0,0,0.55);
}
.vv-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  gap: 20px;
}
.vv-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.vv-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--vv-gold);
  box-shadow: 0 0 0 1px var(--vv-bark-deep), 0 2px 6px rgba(0,0,0,0.4);
}
.vv-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.vv-brand-nm {
  font-family: 'Berkshire Swash', 'IM Fell English', serif;
  font-size: 22px;
  color: var(--vv-parchment);
  letter-spacing: 0.02em;
}
.vv-brand-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--vv-honey);
  margin-top: 4px;
}
.vv-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vv-nav-links a {
  display: block;
  padding: 8px 14px;
  color: var(--vv-parchment);
  text-decoration: none;
  font-family: 'IM Fell DW Pica SC', 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: color 0.2s, background 0.2s;
}
.vv-nav-links a:hover {
  color: var(--vv-amber-glow);
  background: rgba(255,255,255,0.04);
}

/* ===== HERO ===== */
.vv-hero {
  position: relative;
  background: var(--vv-bark-deep);
  overflow: visible;
}
.vv-hero-image {
  width: 100%;
  height: clamp(360px, 56vw, 720px);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}
.vv-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(20,15,8,0.65) 100%);
}
.vv-hero-overlay > * {
  pointer-events: auto;
}

/* ===== CTAs ===== */
.vv-cta {
  display: inline-block;
  font-family: 'Cinzel', 'IM Fell English', serif;
  letter-spacing: 0.16em;
  font-size: 13px;
  text-transform: uppercase;
  padding: 14px 32px;
  background: linear-gradient(180deg, var(--vv-amber) 0%, var(--vv-amber-glow) 100%);
  color: var(--vv-bark-deep);
  text-decoration: none;
  border: 1.5px solid var(--vv-gold);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 4px 0 var(--vv-bark),
    0 8px 18px rgba(0,0,0,0.45);
  transition: transform 0.12s, box-shadow 0.12s;
}
.vv-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 5px 0 var(--vv-bark),
    0 10px 20px rgba(0,0,0,0.5);
}
.vv-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--vv-bark);
}
.vv-cta-secondary {
  background: var(--vv-moss-deep);
  color: var(--vv-parchment);
  border-color: var(--vv-gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 0 var(--vv-bark-deep);
}

/* ===== ROWS ===== */
.vv-row {
  display: grid;
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 28px;
}
.vv-row-2col {
  grid-template-columns: 1.4fr 1fr;
}
.vv-row-3col {
  grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(180deg, var(--vv-bark-deep) 0%, var(--vv-moss-night) 100%);
  max-width: none;
  padding-left: max(28px, calc(50vw - 700px));
  padding-right: max(28px, calc(50vw - 700px));
}

/* ===== CARDS GENERIQUES ===== */
.vv-card {
  position: relative;
  background: var(--vv-parchment);
  border: 1px solid var(--vv-bark-warm);
  border-radius: 6px;
  padding: 22px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.20) inset,
    0 18px 36px -14px rgba(0,0,0,0.55);
  overflow: hidden;
}
.vv-card-head {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--vv-amber);
}
.vv-card-head h2 {
  margin: 0;
  font-family: 'Berkshire Swash', 'IM Fell English', serif;
  font-size: 26px;
  color: var(--vv-bark);
  letter-spacing: 0.01em;
}
.vv-card-sub {
  display: block;
  margin-top: 2px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--vv-ink-soft);
}

.vv-kicker {
  display: inline-block;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--vv-foxi-deep);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vv-link {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vv-foxi);
  text-decoration: none;
  text-transform: uppercase;
}
.vv-link:hover { color: var(--vv-amber-glow); }

/* ===== CARTE DU VALLON ===== */
.vv-card-carte .vv-carte-frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--vv-bark);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}
.vv-card-carte .vv-carte-bg {
  display: block;
  width: 100%;
  height: auto;
}
.vv-carte-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vv-carte-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vv-amber-glow);
  border: 2px solid var(--vv-parchment);
  box-shadow: 0 0 8px rgba(230,136,59,0.85);
  transform: translate(-50%, -50%);
  animation: vvPulse 2.4s ease-in-out infinite;
}
@keyframes vvPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(230,136,59,0.5); }
  50%      { box-shadow: 0 0 14px rgba(230,136,59,1); }
}
.vv-carte-legende {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--vv-ink-soft);
}
.vv-carte-legende li::before {
  content: "\2756";
  color: var(--vv-amber);
  margin-right: 6px;
}

/* ===== TABLE DE FOXI ===== */
.vv-card-table .vv-table-frame {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}
.vv-card-table .vv-table-bg {
  display: block;
  width: 100%;
  height: auto;
}
.vv-table-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 14px;
}
.vv-table-nav a {
  text-align: center;
  padding: 8px 4px;
  border: 1px solid var(--vv-bark-warm);
  border-radius: 2px;
  background: var(--vv-cream);
  color: var(--vv-bark);
  text-decoration: none;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.vv-table-nav a:hover {
  background: var(--vv-amber);
  color: var(--vv-bark-deep);
  transform: translateY(-1px);
}

/* ===== ROW 3 COL : CONTE / GAZETTE / FICHE ===== */
.vv-row-3col .vv-card {
  display: flex;
  flex-direction: column;
  background: var(--vv-parchment);
  min-height: 360px;
}
.vv-row-3col .vv-card > [class$="-frame"] {
  margin: -22px -22px 16px;
  height: 160px;
  overflow: hidden;
  background: var(--vv-bark);
}
.vv-row-3col .vv-card > [class$="-frame"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vv-card-conte h3,
.vv-card-gazette h3,
.vv-card-fiche h3 {
  margin: 4px 0 8px;
  font-family: 'IM Fell English', serif;
  font-size: 22px;
  color: var(--vv-bark);
  line-height: 1.2;
}
.vv-conte-extrait,
.vv-gazette-extrait {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--vv-ink-soft);
  line-height: 1.55;
}
.vv-gazette-saison {
  display: block;
  font-family: 'Caveat', cursive;
  font-size: 17px;
  color: var(--vv-foxi-deep);
  margin-top: 2px;
}

/* Fiche Habitant : medaillon */
.vv-fiche-medaillon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 6px 0 10px;
  background: var(--vv-cream);
  border: 3px double var(--vv-amber);
  box-shadow: 0 0 0 4px var(--vv-parchment), 0 6px 14px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vv-fiche-medaillon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vv-fiche-initiale {
  font-family: 'Berkshire Swash', serif;
  font-size: 44px;
  color: var(--vv-foxi);
}
.vv-fiche-attrs {
  margin: 8px 0 6px;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--vv-ink-soft);
}
.vv-fiche-attrs dt {
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vv-foxi-deep);
  margin-top: 6px;
}
.vv-fiche-attrs dd {
  margin: 0;
  color: var(--vv-bark);
}
.vv-fiche-vide {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--vv-ink-soft);
}

/* ===== LE COMPTOIR ===== */
.vv-comptoir {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230,136,59,0.18), transparent 70%),
    linear-gradient(180deg, var(--vv-moss-night) 0%, var(--vv-bark-deep) 100%);
  padding: 60px 28px;
}
.vv-comptoir-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.vv-section-head {
  text-align: center;
  margin-bottom: 26px;
}
.vv-section-head h2 {
  margin: 0;
  font-family: 'Berkshire Swash', serif;
  font-size: 32px;
  color: var(--vv-parchment);
  letter-spacing: 0.01em;
}
.vv-section-sub {
  display: block;
  margin-top: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--vv-honey);
}
.vv-section-head-light h2,
.vv-section-head-light .vv-section-sub { color: var(--vv-parchment); }

.vv-comptoir-etagere {
  position: relative;
  background: var(--vv-bark);
  border: 6px solid var(--vv-bark);
  border-radius: 4px;
  padding: 24px 16px 32px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 20px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.vv-comptoir-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  pointer-events: none;
}
.vv-comptoir-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.vv-produit {
  background: var(--vv-cream);
  border: 1px solid var(--vv-amber);
  border-radius: 3px;
  padding: 18px 14px 16px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.vv-produit h4 {
  margin: 0 0 6px;
  font-family: 'IM Fell English', serif;
  font-size: 16px;
  color: var(--vv-bark);
}
.vv-produit p {
  margin: 0 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--vv-ink-soft);
}
.vv-prix {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--vv-foxi-deep);
  padding-top: 8px;
  border-top: 1px dashed var(--vv-amber);
  width: 100%;
}
.vv-comptoir-note {
  text-align: center;
  margin: 22px 0 0;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--vv-honey);
}

/* ===== NEWSLETTER ===== */
.vv-newsletter {
  background: linear-gradient(180deg, var(--vv-moss-night) 0%, var(--vv-night) 100%);
  padding: 56px 28px;
  border-top: 3px double var(--vv-gold);
  border-bottom: 3px double var(--vv-gold);
}
.vv-newsletter-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.vv-newsletter-illu img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55);
}
.vv-newsletter-form .vv-section-head { text-align: left; }

.vv-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.vv-form input[type="text"],
.vv-form input[type="email"] {
  padding: 12px 14px;
  border: 1px solid var(--vv-amber);
  background: var(--vv-parchment);
  color: var(--vv-bark);
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  border-radius: 2px;
}
.vv-form input:focus {
  outline: 2px solid var(--vv-amber-glow);
  outline-offset: 1px;
}
.vv-form button {
  grid-column: 1 / -1;
  cursor: pointer;
  border: 1.5px solid var(--vv-gold);
}

.vv-flash {
  padding: 10px 14px;
  border-radius: 3px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  margin-bottom: 12px;
}
.vv-flash-ok   { background: rgba(107,139,63,0.18); color: var(--vv-honey); border: 1px solid var(--vv-leaf); }
.vv-flash-info { background: rgba(184,85,43,0.18); color: var(--vv-honey); border: 1px solid var(--vv-foxi); }

/* ===== FOOTER ===== */
.vv-footer {
  background: var(--vv-bark-deep);
  color: var(--vv-parchment);
  padding: 36px 28px 28px;
}
.vv-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  align-items: center;
  gap: 24px;
}
.vv-footer-brand {
  display: flex;
  flex-direction: column;
}
.vv-footer-nm {
  font-family: 'Berkshire Swash', serif;
  font-size: 22px;
  color: var(--vv-parchment);
}
.vv-footer-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--vv-honey);
}
.vv-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vv-footer-links a {
  color: var(--vv-honey);
  text-decoration: none;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vv-footer-links a:hover { color: var(--vv-amber-glow); }
.vv-footer-meta {
  text-align: right;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--vv-honey);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== SECTION GENERIQUE ===== */
.vv-section {
  padding: 56px 28px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .vv-row-2col,
  .vv-row-3col,
  .vv-newsletter-inner,
  .vv-comptoir-grid,
  .vv-footer-inner {
    grid-template-columns: 1fr;
  }
  .vv-table-nav { grid-template-columns: repeat(3, 1fr); }
  .vv-row { padding: 36px 18px; }
  .vv-hero-image { height: clamp(280px, 70vw, 480px); }
  .vv-nav-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vv-nav-links { width: 100%; }
  .vv-footer-meta { text-align: left; }
  .vv-newsletter-illu { display: none; }
}

@media (max-width: 600px) {
  .vv-form { grid-template-columns: 1fr; }
  .vv-card-head h2 { font-size: 22px; }
  .vv-section-head h2 { font-size: 26px; }
}

/* ============================================================
   PHASE 2 -- BIBLIOTHEQUE DES CONTES + LIVRE OUVERT
   ============================================================ */

/* En-tete de page (contes liste, etc.) */
.vv-page-head {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230,136,59,0.16), transparent 60%),
    linear-gradient(180deg, var(--vv-bark-deep) 0%, var(--vv-moss-night) 100%);
  color: var(--vv-parchment);
  padding: 70px 28px 64px;
  text-align: center;
  border-bottom: 3px double var(--vv-gold);
}
.vv-page-head-inner {
  max-width: 760px;
  margin: 0 auto;
}
.vv-page-head h1 {
  margin: 8px 0 10px;
  font-family: 'Berkshire Swash', 'IM Fell English', serif;
  font-size: clamp(34px, 5vw, 50px);
  color: var(--vv-parchment);
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.vv-page-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--vv-honey);
  margin: 0;
}
.vv-kicker-light {
  display: inline-block;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--vv-amber-glow);
  text-transform: uppercase;
}

/* Sections : paper (clair) et dark (vallon de nuit) */
.vv-section-paper {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168,116,50,0.10), transparent 70%),
    linear-gradient(180deg, var(--vv-parchment) 0%, var(--vv-cream) 100%);
  padding: 56px 28px;
}
.vv-section-dark {
  background: linear-gradient(180deg, var(--vv-moss-night) 0%, var(--vv-bark-deep) 100%);
  padding: 56px 28px;
  border-top: 3px double var(--vv-gold);
}
.vv-section-inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* Etat vide (aucun conte) */
.vv-empty-state {
  text-align: center;
  padding: 60px 20px;
  font-family: 'Cormorant Garamond', serif;
}
.vv-empty-state p {
  font-size: 20px;
  font-style: italic;
  color: var(--vv-bark);
  margin: 0 0 10px;
}
.vv-empty-hint {
  font-size: 16px !important;
  color: var(--vv-ink-soft) !important;
  margin-bottom: 24px !important;
}

/* Grille des contes */
.vv-contes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 8px;
}
.vv-conte-card {
  display: flex;
  flex-direction: column;
  background: var(--vv-cream);
  border: 1px solid var(--vv-bark-warm);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,0.45);
  transition: transform 0.18s, box-shadow 0.18s;
}
.vv-conte-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.55);
}
.vv-conte-card-img {
  height: 180px;
  background: var(--vv-bark);
  overflow: hidden;
  position: relative;
}
.vv-conte-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vv-conte-card-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, var(--vv-bark-warm), var(--vv-bark) 70%);
  color: var(--vv-amber);
  font-size: 48px;
}
.vv-conte-card-body {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vv-conte-card-body h3 {
  margin: 4px 0 6px;
  font-family: 'IM Fell English', serif;
  font-size: 22px;
  color: var(--vv-bark);
  line-height: 1.2;
}
.vv-conte-card-sub {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  color: var(--vv-foxi-deep);
}
.vv-conte-card-extrait {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: var(--vv-ink-soft);
  margin: 0 0 12px;
  flex: 1;
}
.vv-conte-card-date {
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--vv-foxi-deep);
  text-transform: uppercase;
  border-top: 1px dashed var(--vv-amber);
  padding-top: 8px;
}

/* Variante sombre (sur section_dark : autres recits en bas du conte) */
.vv-conte-card-dark {
  background: rgba(247,236,208,0.96);
  border-color: var(--vv-gold);
}

/* ============================================================
   LIVRE OUVERT (conte detail)
   ============================================================ */
.vv-livre {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(230,136,59,0.10), transparent 60%),
    linear-gradient(180deg, var(--vv-moss-night) 0%, var(--vv-bark-deep) 100%);
  padding: 56px 16px 36px;
  min-height: 60vh;
}
.vv-livre-fond {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--vv-cream);
  border: 1px solid var(--vv-bark-warm);
  border-radius: 4px;
  box-shadow:
    inset 0 0 60px rgba(168,116,50,0.18),
    0 30px 60px -20px rgba(0,0,0,0.6);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.vv-livre-fond::before {
  /* Reliure centrale du livre */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% / 2.4);  /* alignement avec la colonne 1fr / 1.4fr */
  width: 3px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18), transparent);
  pointer-events: none;
}
.vv-livre-page-gauche {
  padding: 36px 28px;
  background:
    radial-gradient(ellipse at 100% 50%, rgba(0,0,0,0.05), transparent 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vv-livre-page-droite {
  padding: 40px 32px;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(0,0,0,0.05), transparent 50%);
}

.vv-livre-illustration {
  width: 100%;
  max-width: 280px;
  border-radius: 4px;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  border: 2px solid var(--vv-amber);
}
.vv-livre-vignette {
  width: 200px;
  height: 200px;
  margin-bottom: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--vv-amber), var(--vv-foxi-deep) 80%);
  border: 3px double var(--vv-gold);
  box-shadow: 0 0 0 6px var(--vv-parchment), 0 14px 30px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vv-livre-vignette-text {
  font-family: 'Berkshire Swash', serif;
  font-size: 96px;
  color: var(--vv-cream);
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

.vv-livre-meta {
  margin-top: 8px;
}
.vv-livre-meta h1 {
  margin: 4px 0 6px;
  font-family: 'Berkshire Swash', 'IM Fell English', serif;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--vv-bark);
  line-height: 1.1;
}
.vv-livre-soustitre {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  color: var(--vv-foxi-deep);
  margin: 0 0 14px;
}
.vv-livre-signature {
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--vv-ink-soft);
  text-transform: uppercase;
  border-top: 1px dashed var(--vv-amber);
  padding-top: 12px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vv-livre-date {
  color: var(--vv-foxi-deep);
}

.vv-livre-texte {
  font-family: 'EB Garamond', serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--vv-ink);
  column-count: 1;
}
.vv-livre-texte p {
  margin: 0 0 1em;
  text-indent: 1.4em;
}
.vv-livre-texte p:first-of-type {
  text-indent: 0;
}
.vv-livre-texte p:first-of-type::first-letter {
  font-family: 'Berkshire Swash', serif;
  font-size: 3.4em;
  float: left;
  line-height: 0.9;
  padding: 6px 8px 0 0;
  color: var(--vv-foxi);
}
.vv-livre-texte em {
  color: var(--vv-foxi-deep);
}
.vv-livre-vide-msg {
  text-align: center;
  margin-top: 30px;
  color: var(--vv-ink-soft);
}

.vv-livre-colophon {
  max-width: 1100px;
  margin: 16px auto 0;
  text-align: center;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--vv-honey);
  text-transform: uppercase;
}

/* Responsive livre */
@media (max-width: 800px) {
  .vv-livre-fond { grid-template-columns: 1fr; }
  .vv-livre-fond::before { display: none; }
  .vv-livre-page-gauche { padding: 28px 20px 12px; }
  .vv-livre-page-droite { padding: 24px 22px 32px; }
  .vv-livre-texte { font-size: 16px; line-height: 1.7; }
  .vv-livre-texte p:first-of-type::first-letter { font-size: 2.8em; }
}

/* =========================================================
   NAV — Bandeau de PANNEAUX DE BOIS suspendus
   (pour les pages internes, en remplacement de .vv-nav)
   ========================================================= */
.vv-nav-panneaux {
  background:
    linear-gradient(180deg, rgba(31,24,16,0.95) 0%, rgba(58,42,26,0.92) 100%);
  border-bottom: 3px solid rgba(168,116,50,0.6);
  padding: 10px 0 14px;
  position: relative;
}
.vv-nav-panneaux::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--vv-amber-glow), transparent);
  opacity: 0.5;
}
.vv-nav-panneaux-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 24px;
}
.vv-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--vv-honey);
}
.vv-nav-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--vv-amber);
  background: var(--vv-cream);
}
.vv-nav-brand-text { display: flex; flex-direction: column; }
.vv-nav-brand-nm {
  font-family: 'Berkshire Swash', 'IM Fell English', serif;
  font-size: 22px;
  color: var(--vv-honey);
  line-height: 1;
}
.vv-nav-brand-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--vv-amber-glow);
}

/* Les panneaux de bois suspendus */
.vv-nav-panneaux-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vv-nav-panneaux-menu li { display: block; }
.vv-nav-panneaux-menu a {
  display: inline-block;
  position: relative;
  padding: 8px 18px 9px;
  background:
    linear-gradient(180deg, #6b4626 0%, #4a3018 100%);
  border: 1px solid #2a1d10;
  border-radius: 4px;
  box-shadow:
    0 2px 0 #2a1d10,
    0 4px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,200,140,0.18);
  color: var(--vv-honey);
  font-family: 'IM Fell English', 'Cinzel', serif;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 #1a0f06, 0 0 8px rgba(230,136,59,0.25);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.vv-nav-panneaux-menu a::before,
.vv-nav-panneaux-menu a::after {
  /* petites cordes au-dessus */
  content: "";
  position: absolute;
  top: -8px;
  width: 2px;
  height: 8px;
  background: linear-gradient(180deg, #5a3e22, #3a2818);
}
.vv-nav-panneaux-menu a::before { left: 14%; }
.vv-nav-panneaux-menu a::after  { right: 14%; }
.vv-nav-panneaux-menu a:hover {
  color: var(--vv-cream);
  transform: translateY(-2px);
  box-shadow:
    0 4px 0 #2a1d10,
    0 8px 14px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,200,140,0.3),
    0 0 18px rgba(230,136,59,0.45);
}
.vv-nav-panneaux-menu a.active {
  color: var(--vv-amber-glow);
  background: linear-gradient(180deg, #8a5a2e 0%, #5e3c1c 100%);
  box-shadow:
    0 2px 0 #2a1d10,
    inset 0 1px 0 rgba(255,200,140,0.4),
    0 0 14px rgba(230,136,59,0.55);
}

@media (max-width: 760px) {
  .vv-nav-panneaux-inner { justify-content: center; }
  .vv-nav-panneaux-menu { justify-content: center; }
  .vv-nav-panneaux-menu a { font-size: 11.5px; padding: 6px 12px 7px; letter-spacing: 0.14em; }
}



/* =========================================================
   ACCUEIL — Zones cliquables sur les panneaux (mode invisible production)
   ========================================================= */
.vv-hero-pano-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.vv-hero-pano-zones a {
  position: absolute;
  display: block;
  pointer-events: auto;
  text-decoration: none;
  background: transparent;
  border-radius: 6px;
  transition: background .2s ease, box-shadow .2s ease;
}
.vv-hero-pano-zones a:hover {
  background: rgba(230,136,59,0.18);
  box-shadow: 0 0 24px rgba(230,136,59,0.5);
}
.vv-hero-pano-zones a span {
  position: absolute;
  left: -9999px;
}

/* =========================================================
   BANDEAU NEWSLETTER (positionnement absolu des champs sur l'image)
   ========================================================= */
.vv-newsletter-band { position: relative; width: 100%; line-height: 0; background: #1a1a14; }
.vv-newsletter-bg { display: block; width: 100%; height: auto; }
.vv-newsletter-overlay { position: absolute; inset: 0; pointer-events: none; }
.vv-newsletter-overlay > * { pointer-events: auto; }
.vv-newsletter-form { position: absolute; inset: 0; }
.vv-newsletter-msg {
  position: absolute;
  /* left/top/width/height en inline style (calibrable) */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
}
.vv-newsletter-msg-ok      { background: transparent; color: #cece9c; }
.vv-newsletter-msg-info    { background: transparent; color: #cece9c; }
.vv-newsletter-msg-welcome { background: transparent; color: #cece9c; }
.vv-nl-input {
  position: absolute;
  font-family: 'EB Garamond', serif;
  font-size: clamp(13px, 1.3vw, 18px);
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--vv-bark);
  text-align: center;
  outline: none;
}
/* Placeholder visible (les libellés "Votre prénom" / "Votre e-mail") */
.vv-nl-input::placeholder {
  color: rgba(60, 40, 20, 0.85);
  font-style: italic;
  opacity: 1;
}
/* Si l'utilisateur clique pour entrer du texte, fond léger pour l'aider à voir */
.vv-nl-input:focus { background: rgba(247, 236, 208, 0.35); }
.vv-nl-cta {
  position: absolute;
  font-size: 0;            /* texte invisible */
  color: transparent;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.vv-nl-cta:hover { background: rgba(230, 136, 59, 0.18); box-shadow: 0 0 18px rgba(230, 136, 59, 0.5); }

/* =========================================================
   BANDEAU FOOTER (partial _footer.html)
   ========================================================= */
.vv-footer-band {
  position: relative;
  width: 100%;
  line-height: 0;
  background: #0d0d09;
}
.vv-footer-bg { display: block; width: 100%; height: auto; }
/* Wrapper flex obsolete (refonte calibrable) — conserve au cas ou des includes l'utilisent encore */
.vv-footer-social-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vv-footer-social {
  /* position/size en inline style (calibrable) */
  display: block;
  pointer-events: auto;
  background: transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.vv-footer-social:hover { background: rgba(230,136,59,0.20); box-shadow: 0 0 20px rgba(230,136,59,0.5); }
/* Logo YouTube : image affichee (position+taille calibrables, inline styles) */
.vv-footer-yt-img {
  /* position absolute / left / top / width en inline */
  display: block;
  pointer-events: none;
  transition: filter .2s ease;
}
/* Bouton transparent par dessus le logo */
.vv-footer-yt-link {
  /* position absolute / left / top / width / height en inline */
  display: block;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
  transition: background .2s ease, box-shadow .2s ease;
}
.vv-footer-yt-link:hover {
  background: rgba(255, 80, 40, 0.18);
  box-shadow: 0 0 14px rgba(255, 100, 40, 0.45);
}
/* Quand on survole le bouton, on illumine le logo dessous */
.vv-footer-yt-link:hover ~ .vv-footer-yt-img,
.vv-footer-yt-img:hover {
  filter: drop-shadow(0 0 10px rgba(255,80,40,0.7));
}
.vv-footer-meta {
  position: absolute;
  left: 0; right: 0;
  bottom: 0.6em;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(208,176,128,0.7);
  line-height: 1.2;
  pointer-events: none;
}

/* =========================================================
   CARTE FICHE HABITANT (homepage — habitant aleatoire a la une)
   ========================================================= */
.vv-fiche-band {
  background: #14110a;
  padding: 60px 20px;
}
/* Elements INDIVIDUELS de la Fiche Habitant en overlay (chacun positionne en inline) */
.vv-fh-elem {
  pointer-events: auto;
  box-sizing: border-box;
}
.vv-fh-title {
  font-family: 'IM Fell DW Pica SC', 'IM Fell English', serif;
  font-size: clamp(14px, 1.5vw, 24px);
  text-align: center;
  letter-spacing: 0.08em;
  color: #f0e6ce;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.6);
}
.vv-fh-nom {
  font-family: 'IM Fell English', serif;
  font-size: clamp(12px, 1.2vw, 18px);
  text-align: center;
  color: #e6c878;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  font-style: italic;
  line-height: 1.15;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.vv-fh-img {
  /* width inline; le conteneur s'adapte a l'image (qui a son propre aspect-ratio) */
  line-height: 0;
}
.vv-fh-img img,
.vv-fh-img .vv-fh-ph {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover;
  clip-path: ellipse(48% 48% at 50% 50%);
  -webkit-clip-path: ellipse(48% 48% at 50% 50%);
  display: block;
  max-width: 100%;
}
.vv-fh-ph {
  background: rgba(20,15,8,0.4);
  color: rgba(240,230,200,0.7);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-family: 'IM Fell English', serif;
  font-size: 0.85em;
  text-align: center;
}
.vv-fh-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10px, 0.9vw, 14px);
  color: #f0e6ce;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  border-bottom: 1px solid rgba(240,230,200,0.25);
  padding-bottom: 3px;
  line-height: 1.4;
}
.vv-fh-line .vv-fl {
  font-family: 'IM Fell English', serif;
  font-weight: 600;
  color: #e6c878;
}
.vv-fh-line .vv-fv { font-style: italic; color: #f0e6ce; }
/* Valeurs seules (labels deja presents dans l'image de fond) */
.vv-fh-value {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #5e3c1c;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.vv-fh-cta {
  display: block;
  text-align: center;
  font-family: 'Cinzel', 'IM Fell English', serif;
  font-size: clamp(9px, 0.75vw, 12px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #e6c878;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(230,200,120,0.5);
  border-radius: 3px;
  background: rgba(20,15,8,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.vv-fh-cta:hover {
  background: rgba(255,200,100,0.18);
  color: #ffd47a;
  transform: scale(1.04);
}

/* (ancien wrapper, conserve sans effet pour compat eventuelle) */
.vv-fiche-overlay { background: transparent !important; border: none !important; box-shadow: none !important; }
.vv-fiche-title-tr {
  font-family: 'IM Fell DW Pica SC', 'IM Fell English', serif;
  font-size: clamp(14px, 1.5vw, 24px);
  text-align: center;
  letter-spacing: 0.08em;
  color: #f0e6ce;
  margin: 0 0 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.6);
}
.vv-fiche-nom-tr {
  font-family: 'IM Fell English', serif;
  font-size: clamp(12px, 1.2vw, 18px);
  text-align: center;
  color: #e6c878;
  margin: 0 0 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.vv-fiche-row-tr {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vv-fiche-ovale-tr {
  flex: 0 0 42%;
  aspect-ratio: 3 / 4;
  position: relative;
}
.vv-fiche-ovale-tr img,
.vv-fiche-ovale-tr .vv-fiche-placeholder-tr {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: ellipse(48% 48% at 50% 50%);
  -webkit-clip-path: ellipse(48% 48% at 50% 50%);
  display: block;
}
.vv-fiche-placeholder-tr {
  background: rgba(20,15,8,0.4);
  color: rgba(240,230,200,0.7);
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-style: italic;
  font-family: 'IM Fell English', serif;
  font-size: 0.85em;
  text-align: center;
}
.vv-fiche-info-tr {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10px, 0.9vw, 14px);
  color: #f0e6ce;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.vv-fiche-info-tr > div {
  border-bottom: 1px solid rgba(240,230,200,0.25);
  padding-bottom: 3px;
}
.vv-fiche-info-tr .vv-fl {
  font-family: 'IM Fell English', serif;
  font-weight: 600;
  color: #e6c878;
}
.vv-fiche-info-tr .vv-fv {
  font-style: italic;
  color: #f0e6ce;
}
.vv-fiche-cta-tr {
  display: block;
  text-align: center;
  margin: 12px auto 0;
  font-family: 'Cinzel', 'IM Fell English', serif;
  font-size: clamp(9px, 0.75vw, 12px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #e6c878;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(230,200,120,0.5);
  border-radius: 3px;
  background: rgba(20,15,8,0.35);
  width: max-content;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.vv-fiche-cta-tr:hover {
  background: rgba(255,200,100,0.18);
  color: #ffd47a;
  transform: scale(1.04);
}
.vv-fiche-card {
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at center, #f1e3c2 0%, #d9c293 75%, #b89860 100%);
  border: 2px solid #5e3c1c;
  border-radius: 10px;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.55),
    inset 0 0 60px rgba(120, 80, 30, 0.18),
    inset 0 0 0 6px rgba(94, 60, 28, 0.25);
  padding: 28px 32px 24px;
  font-family: 'Cormorant Garamond', serif;
  color: #2a1d10;
  position: relative;
}
.vv-fiche-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(94, 60, 28, 0.35);
  border-radius: 6px;
  pointer-events: none;
}
.vv-fiche-title {
  font-family: 'IM Fell DW Pica SC', 'IM Fell English', serif;
  font-size: clamp(20px, 2.4vw, 32px);
  text-align: center;
  letter-spacing: 0.08em;
  color: #3d2614;
  margin: 0 0 18px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.vv-fiche-row {
  display: flex;
  gap: 26px;
  align-items: flex-start;
}
.vv-fiche-ovale {
  flex: 0 0 38%;
  aspect-ratio: 3 / 4;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vv-fiche-ovale img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* L'image est contrainte dans un ovale */
  clip-path: ellipse(48% 48% at 50% 50%);
  -webkit-clip-path: ellipse(48% 48% at 50% 50%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.vv-fiche-ovale .vv-fiche-frame {
  position: absolute;
  inset: 0;
  border-radius: 50% / 50%;
  border: 3px solid rgba(94, 60, 28, 0.55);
  box-shadow: inset 0 0 18px rgba(70, 40, 15, 0.25);
  pointer-events: none;
}
.vv-fiche-ovale .vv-fiche-placeholder {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #c4a76e 0%, #8e6c3f 100%);
  clip-path: ellipse(48% 48% at 50% 50%);
  -webkit-clip-path: ellipse(48% 48% at 50% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.9em;
}
.vv-fiche-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
}
.vv-fiche-info .vv-fiche-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid rgba(94, 60, 28, 0.4);
  padding-bottom: 4px;
}
.vv-fiche-info .vv-fiche-label {
  flex: 0 0 auto;
  font-family: 'IM Fell English', serif;
  font-weight: 600;
  font-size: clamp(13px, 1.1vw, 16px);
  color: #3d2614;
}
.vv-fiche-info .vv-fiche-value {
  flex: 1 1 auto;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 16px);
  color: #2a1d10;
}
.vv-fiche-nom {
  text-align: center;
  font-family: 'IM Fell English', serif;
  font-size: clamp(16px, 1.6vw, 22px);
  margin: 0 0 6px;
  color: #3d2614;
}
.vv-fiche-liens {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(94, 60, 28, 0.4);
  text-align: center;
}
.vv-fiche-liens-title {
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  color: #3d2614;
}
.vv-fiche-liens-row {
  display: flex;
  justify-content: center;
  gap: clamp(24px, 4vw, 50px);
}
.vv-fiche-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #3d2614;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  transition: transform .2s ease, color .2s ease;
}
.vv-fiche-lien:hover { transform: scale(1.06); color: #8a5a2e; }
.vv-fiche-lien .vv-fiche-lien-icon {
  width: 44px; height: 44px;
  border: 2px solid #5e3c1c;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.15);
}
.vv-fiche-lien-count { font-size: 11px; color: rgba(94, 60, 28, 0.8); }
.vv-fiche-cta {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-family: 'Cinzel', 'IM Fell English', serif;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #8a5a2e 0%, #5e3c1c 100%);
  color: #f0e6ce;
  padding: 6px 14px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid #2a1d10;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  transition: filter .2s ease;
}
.vv-fiche-cta:hover { filter: brightness(1.15); }
@media (max-width: 640px) {
  .vv-fiche-row { flex-direction: column; align-items: center; }
  .vv-fiche-ovale { flex: 0 0 auto; width: 70%; max-width: 260px; }
  .vv-fiche-info { width: 100%; }
}

/* =========================================================
   BANDEAUX IMAGE — pour les pages internes (Habitants, Contes, Enquêtes, Annexes)
   ========================================================= */
.vv-page-img-band {
  width: 100%;
  background: #1a1a14;
  line-height: 0;
  display: block;
}
.vv-page-img-bg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* Plein écran sur toutes tailles (les images s'étirent même si source 1086px) */

/* =========================================================
   ZONES CLIQUABLES sur image entête (menu graphique des pages internes)
   ========================================================= */
.vv-page-entete-container { position: relative; }
.vv-menu-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.vv-menu-zones a {
  position: absolute;
  display: block;
  pointer-events: auto;
  background: transparent;
  text-decoration: none;
  border-radius: 4px;
  transition: background .2s ease, box-shadow .2s ease;
}
.vv-menu-zones a:hover {
  background: rgba(230,136,59,0.20);
  box-shadow: 0 0 18px rgba(230,136,59,0.5);
}
.vv-menu-zones a span { position: absolute; left: -9999px; }

/* Mode calibration des zones menu (activable via ?calib=1) */
body.calib-mode .vv-menu-zones a {
  background: rgba(230,136,59,0.28);
  border: 2px dashed #e6883b;
  color: #fff;
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: move;
}
body.calib-mode .vv-menu-zones a span {
  position: static; left: auto;
  background: rgba(0,0,0,0.6); padding: 2px 5px; border-radius: 3px;
}

/* =========================================================
   FORCE PLEINE LARGEUR sur toutes les images de pages
   ========================================================= */
html, body { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
.vv-body, .vv-body section { max-width: 100% !important; }
.vv-page-img-band {
  width: 100vw !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vv-page-img-bg, .vv-tpl-bg {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
}