/* =========================================================================
   css/lucian-report.css
   Système de design partagé — pages de livraison Projet Lucian
   (blessure.php, rapport_5b.php, et futures pages produit)

   Base extraite telle quelle de blessure.php pour garantir une cohérence
   visuelle stricte entre toutes les pages. Toute évolution de palette,
   typographie ou composant commun doit se faire ICI, pas dans les pages.
   ========================================================================= */

:root {
  --gold: #b8862f;
  --gold-light: #d8ac5c;
  --gold-pale: #ecd6a4;
  --bg: #0d0a06;
  --bg2: #14100a;
  --card: #17130c;
  --card-border: rgba(184,134,47,0.20);
  --card-border-soft: rgba(184,134,47,0.10);
  --text: rgba(238,226,202,0.94);
  --text-dim: rgba(214,198,168,0.66);
  --text-faint: rgba(184,164,124,0.42);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

/* ── HEADER (persistant, centré) ──────────────────────── */
.page-header {
  text-align: center;
  padding: 32px 0 8px;
}
.header-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 22px;
}
.header-badge-line {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light));
  opacity: .4;
}
.avatar-ring {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  margin: 0 auto 16px;
  padding: 2px;
  background: conic-gradient(from 0deg, #7a4c1a, #d8ac5c, #b8862f, #7a4c1a);
  box-shadow: 0 0 26px rgba(184,134,47,.28);
}
.avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg);
  background: linear-gradient(160deg, #2a2010, #1a1408);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.avatar-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-inner-fallback {
  width: 100%; height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--gold-pale);
}
.header-name {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--gold-pale);
  margin-bottom: 6px;
}
.header-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ── PROGRESS ─────────────────────────────────────────── */
.progress-zone { padding-bottom: 22px; }
.progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}
.progress-step {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.progress-name {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  text-align: right;
}
.progress-track {
  height: 3px;
  border-radius: 3px;
  background: rgba(184,134,47,.12);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ── PAGES ────────────────────────────────────────────── */
.pages { flex: 1; position: relative; }
.page { display: none; animation: pageIn .35s ease both; padding-bottom: 28px; }
.page.active { display: block; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.eyebrow .num-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
}

.page-title {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--gold-pale);
  margin-bottom: 10px;
}
.page-subtitle {
  font-family: var(--serif);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 22px;
}
.page-lede {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-dim);
}
.page-lede p { margin-bottom: 14px; }
.page-lede p:last-child { margin-bottom: 0; }

.divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--card-border-soft);
}
.divider span { color: var(--gold); font-size: 10px; opacity: .6; }

/* ── HERO ILLUSTRATION ────────────────────────────────── */
.hero-figure {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(184,134,47,.14), transparent 70%), var(--card);
  border: 1px solid var(--card-border);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── CARD (illustration + texte) ──────────────────────── */
.figure-card {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--card);
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.figure-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chakra-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(184,134,47,.06);
  border: 1px solid var(--card-border);
  border-radius: 50px;
  padding: 7px 16px 7px 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.chakra-pill-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── NUMEROLOGIE : fond décoratif + médaillons chiffres ──── */
.num-hero { position: relative; }
.num-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.num-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.num-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  font-family: var(--serif);
  color: var(--gold-pale);
  font-weight: 600;
  background: radial-gradient(circle at 38% 30%, rgba(216,172,92,.22), rgba(23,19,12,.9) 72%);
  border: 1px solid rgba(216,172,92,.5);
  box-shadow: 0 0 0 1px rgba(184,134,47,.12), 0 0 30px rgba(184,134,47,.22), inset 0 0 22px rgba(216,172,92,.10);
}
.num-circle::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(184,134,47,.22);
}
.num-circle.big    { width: 128px; height: 128px; font-size: 44px; }
.num-circle.small  { width: 96px;  height: 96px;  font-size: 34px; margin-left: -22px; margin-top: 34px; }
.num-circle.single { width: 138px; height: 138px; font-size: 50px; }

/* ── RITUALS GRID ─────────────────────────────────────── */
.ritual-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ritual-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
}
.ritual-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ritual-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.ritual-icon svg { width: 15px; height: 15px; }
.ritual-tag {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ritual-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.ritual-desc {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
}

/* ── NAV (bas de page) ─────────────────────────────────── */
.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--card-border-soft);
}
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  padding: 10px 4px;
  color: var(--text-dim);
  transition: color .15s;
}
.nav-btn:hover { color: var(--gold-light); }
.nav-btn.prev { color: var(--text-faint); }
.nav-btn.next {
  margin-left: auto;
  background: linear-gradient(135deg, #8a6420, var(--gold), #a8781f);
  color: #0d0a06;
  border-radius: 50px;
  padding: 12px 22px;
}
.nav-btn.next:hover { color: #0d0a06; filter: brightness(1.08); }
.nav-btn[disabled] { opacity: 0; pointer-events: none; }
.nav-btn svg { width: 13px; height: 13px; }

/* ── CTA / UPSELL PAGES ───────────────────────────────── */
.cta-box {
  background: linear-gradient(160deg, #1a140b, #16110a);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px 22px;
  margin-top: 4px;
}
.cta-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--card-border-soft);
}
.cta-item:last-child { border-bottom: none; }
.cta-item-icon { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.cta-item-icon svg { width: 16px; height: 16px; }
.cta-item-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.cta-item-desc { font-size: 12px; font-weight: 400; color: var(--text-faint); line-height: 1.55; }

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 16px;
}
.price-old { font-size: 12.5px; color: var(--text-faint); text-decoration: line-through; }
.price-main { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--gold-pale); }
.price-note { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }

.cta-button {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #8a6420, var(--gold), #a8781f);
  color: #0d0a06;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(184,134,47,.22);
  margin-bottom: 10px;
}
.cta-secure {
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.cta-skip {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px;
}

.legal-note {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-faint);
  line-height: 1.7;
  margin-top: 12px;
  text-align: center;
}
.legal-note a { color: var(--text-faint); }

/* ── STATES (error / pending) ─────────────────────────── */
.state-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 10px;
  gap: 12px;
}
.state-title { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--gold-pale); }
.state-text { font-size: 14px; color: var(--text-dim); line-height: 1.8; max-width: 380px; }
.state-text a { color: var(--gold-light); }

/* ── FOOTER ───────────────────────────────────────────── */
.page-footer {
  text-align: center;
  padding: 24px 0 32px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: .04em;
}
.page-footer a { color: var(--text-faint); text-decoration: none; margin: 0 8px; }

/* =========================================================================
   COMPOSANTS PARTAGÉS SUPPLÉMENTAIRES
   Ajoutés pour rapport_5b.php — réutilisables par toute future page produit
   (Programme 21 jours, Cercle de Lucian…) qui aurait besoin des mêmes motifs.
   ========================================================================= */

/* ── ICÔNES DE BLESSURE (remplace les emojis colorés) ─────
   Mêmes proportions que .ritual-icon : monochrome, ton or, sobre. */
.wound-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.wound-icon svg { width: 16px; height: 16px; }
.wound-icon.small { width: 26px; height: 26px; border-radius: 7px; }
.wound-icon.small svg { width: 13px; height: 13px; }

/* ── VUE D'ENSEMBLE : barres d'intensité des 5 blessures ── */
.wound-bars { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 6px; }
.wound-row { display: flex; align-items: center; gap: 14px; }
.wound-row .w-body { flex: 1; min-width: 0; }
.wound-row .w-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.dom-badge {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--gold-light);
  border-radius: 20px;
  padding: 2px 9px;
}
.bar-track { height: 6px; border-radius: 6px; background: rgba(184,134,47,.12); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.bar-fill.dominant { background: linear-gradient(90deg, #8a6420, var(--gold), #a8781f); }
.w-pct { width: 34px; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--text-faint); flex-shrink: 0; }

/* ── LIEN VERS UN AUTRE RAPPORT (ex : renvoi vers blessure.php) ── */
.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(184,134,47,.06);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  margin-top: 14px;
  transition: border-color .15s;
}
.link-card:hover { border-color: rgba(184,134,47,.4); }
.link-card-icon { color: var(--gold); flex-shrink: 0; }
.link-card-icon svg { width: 20px; height: 20px; }
.link-card-title { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.link-card-desc { font-size: 11.5px; font-weight: 400; color: var(--text-faint); }
.link-card-arrow { margin-left: auto; color: var(--text-faint); flex-shrink: 0; }
.link-card-arrow svg { width: 16px; height: 16px; }

/* ── BLESSURE SECONDAIRE : badge d'intensité ─────────────── */
.intensity-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(184,134,47,.08);
  border: 1px solid var(--card-border);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: .02em;
  margin-bottom: 18px;
}

/* ── ENCADRÉ D'INTERACTION ENTRE BLESSURES ───────────────── */
.interaction-box {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0;
}
.interaction-box .it {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.interaction-box .it svg { width: 13px; height: 13px; color: var(--gold); }
.interaction-box p { font-size: 13.5px; font-weight: 400; color: var(--text-dim); line-height: 1.75; }

/* ── AFFIRMATION DE GUÉRISON ──────────────────────────────── */
.affirmation-block { text-align: center; padding: 18px 6px 4px; }
.affirmation-block p {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--gold-pale);
  line-height: 1.65;
}

/* ── CITATION DE CLÔTURE (synthèse) ───────────────────────── */
.quote-box {
  border-left: 2px solid var(--gold);
  padding: 14px 18px;
  background: rgba(184,134,47,.05);
  border-radius: 0 12px 12px 0;
  margin: 20px 0;
}
.quote-box p {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1.7;
}

/* ── PLAN DE GUÉRISON (liste d'axes numérotés) ────────────── */
.plan-list { display: flex; flex-direction: column; margin-top: 4px; }
.plan-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--card-border-soft); }
.plan-item:last-child { border-bottom: none; }
.plan-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.plan-axe { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.plan-action { font-size: 13px; font-weight: 400; color: var(--text-dim); line-height: 1.7; }

@media (min-width: 620px) {
  .page-title { font-size: 42px; }
  .hero-figure { aspect-ratio: 2.2 / 1; }
  .figure-card { aspect-ratio: 2.2 / 1; }
}

/* =========================================================================
   JOURNAL DE GUÉRISON 21 JOURS
   Composants ajoutés pour journal.php — un jour par page (pas de
   pagination JS), navigation par grille de 21 cases liées en dur.
   ========================================================================= */

/* ── CONTENU DU JOUR ───────────────────────────────────────
   Volontairement distinct de .page (qui est display:none par défaut,
   réservé au système de pagination JS de blessure.php/rapport_5b.php).
   journal.php affiche un seul jour par chargement de page : ce contenu
   doit donc être visible par défaut, sans classe "active" à ajouter. */
.day-content {
  padding-bottom: 28px;
  animation: pageIn .35s ease both;
}

/* ── GRILLE DE NAVIGATION (21 JOURS) ─────────────────────── */
.nav-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 26px;
}
.nav-square {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .1s;
}
.nav-square.done {
  background: rgba(184,134,47,.12);
  border: 1px solid var(--card-border);
  color: var(--gold-light);
}
.nav-square.done:hover { transform: translateY(-1px); border-color: rgba(184,134,47,.4); }
.nav-square.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--bg);
  border: 1px solid transparent;
  box-shadow: 0 0 0 2px rgba(184,134,47,.28);
}
.nav-square.locked {
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--card-border-soft);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* ── EN-TÊTE DU JOUR ──────────────────────────────────────── */
.day-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.day-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(184,134,47,.08);
  border: 1px solid var(--card-border);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-light);
}

/* ── CARTE PRATIQUE DU JOUR ───────────────────────────────── */
.practice-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.practice-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}
.practice-icon svg { width: 16px; height: 16px; }
.practice-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.practice-duration { font-size: 12px; color: var(--text-faint); }

/* ── ZONE DE JOURNALING ───────────────────────────────────── */
.question-block { margin: 22px 0; }
.question-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.6;
}
.question-textarea {
  width: 100%;
  min-height: 110px;
  background: rgba(184,134,47,.04);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.7;
  resize: vertical;
}
.question-textarea::placeholder { color: var(--text-faint); }
.question-textarea:focus { outline: none; border-color: var(--gold); background: rgba(184,134,47,.06); }
.save-indicator {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 6px;
  height: 15px;
  opacity: 0;
  transition: opacity .3s;
}
.save-indicator.visible { opacity: 1; color: var(--gold-light); }

/* ── BOUTON IMPRESSION ────────────────────────────────────── */
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 50px;
  cursor: pointer;
}
.print-btn:hover { border-color: var(--gold); color: var(--gold-light); }
.print-btn svg { width: 14px; height: 14px; }

/* ── IMPRESSION : n'affiche que le contenu du jour courant ── */
@media print {
  body * { visibility: hidden; }
  .printable, .printable * { visibility: visible; }
  .page-header, .nav-squares, .day-nav-footer, .print-btn, .page-footer { display: none !important; }
  .printable { position: absolute; left: 0; top: 0; width: 100%; }
}

/* =========================================================================
   COMPOSANTS PARTAGÉS — teasers / formulaires pré-achat (rapport.php,
   rapport_b.php, blessure_attente.php). Ajoutés pour permettre à ces pages
   de s'appuyer sur le même système que blessure.php, sans styles inline
   ni emoji colorés.
   ========================================================================= */

/* ── LISTE DE MANIFESTATIONS (puces simples) ─────────────── */
.manif-list { display: flex; flex-direction: column; gap: 12px; margin: 4px 0; }
.manif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.7;
}
.manif-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 8px;
}

/* ── BOUTONS DE CHOIX (ex : sélection du genre) ──────────── */
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.choice-btn {
  flex: 1;
  min-width: 110px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.choice-btn:hover { border-color: rgba(184,134,47,.4); color: var(--text); }
.choice-btn.selected {
  background: linear-gradient(135deg, #8a6420, var(--gold), #a8781f);
  border-color: transparent;
  color: var(--bg);
}

/* ── CHAMPS DE FORMULAIRE (label + input) ────────────────── */
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.form-input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--gold); }
.form-input.invalid { border-color: #c0392b; }
.form-note {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: 10px;
  letter-spacing: .02em;
}

/* ── TÉMOIGNAGES ──────────────────────────────────────────── */
.testi-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.testi-card {
  background: rgba(184,134,47,.05);
  border-left: 2px solid rgba(184,134,47,.35);
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
}
.testi-stars { color: var(--gold); font-size: 12px; margin-bottom: 8px; letter-spacing: .05em; }
.testi-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 8px;
}
.testi-author { font-size: 11.5px; font-weight: 600; color: var(--text-faint); }

/* ── ICÔNE DE RÉVÉLATION COMPACTE (remplace un hero-figure vide) ──
   Pour les pages sans photo (rapport_b.php...) : un badge centré, sans
   grand encart vide autour. */
.icon-reveal {
  display: flex;
  justify-content: center;
  margin: 6px 0 18px;
}
.icon-reveal .wound-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(184,134,47,.08);
}
.icon-reveal .wound-icon svg { width: 28px; height: 28px; }

/* =========================================================================
   PAGE D'ACCUEIL
   Composants ajoutés pour index.php — vitrine légère des 5 blessures,
   sans données d'intensité (contrairement à .wound-bars sur rapport_5b.php).
   ========================================================================= */

.hero-cta-wrap { text-align: center; margin: 28px 0 8px; }
.hero-cta-wrap .cta-button { display: inline-block; width: auto; padding: 17px 40px; }

.wound-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.wound-showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
}
.wound-showcase-item .wound-icon { width: 44px; height: 44px; border-radius: 12px; }
.wound-showcase-item .wound-icon svg { width: 20px; height: 20px; }
.wound-showcase-name { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.4; }