/* Mon Puzzle Intérieur — Brand override, valeurs exactes de l'accueil */

/* ── Variables ── */
:root {
  --hp-h-font:    'Cardo', Georgia, serif;
  --hp-b-font:    'Mona Sans', system-ui, sans-serif;
  --hp-btn-txt:   #1C0F02;
  --hp-btn-r:     5px;
  --hp-h-size:    76px;
  --hp-s-size:    17.5px;
  --hp-b-size:    16px;
  --hp-lh:        1.62;
  --hp-h-color:   var(--text);
  --hp-b-color:   var(--text);
  --hp-s-color:   var(--text-soft);
  --hp-a-color:   var(--copper);
  --hp-btn-bg:    var(--copper-dark);
  --hp-nav-color: #E8D7C3;
  --hp-header-bg: #1C0F02;
}

/* ── FOND — treasure map sur le body, palette-responsive ── */
html { background-color: var(--bg, #E8D7C3); }
body {
  background-color:      var(--bg, #E8D7C3) !important;
  background-image:      url('/assets/treasure-map.png') !important;
  background-size:       cover !important;
  background-position:   center !important;
  background-attachment: fixed !important;
  background-repeat:     no-repeat !important;
  color:       var(--hp-b-color) !important;
  font-family: var(--hp-b-font) !important;
  font-size:   var(--hp-b-size) !important;
  line-height: var(--hp-lh) !important;
  -webkit-font-smoothing: antialiased;
}
@media (hover: none) and (pointer: coarse), (max-width: 1024px) {
  body { background-attachment: scroll !important; }
}
/* Mobile portrait ≤900px : portrait dédié */
@media (max-width: 900px) {
  body { background-image: url('/assets/treasure-map-portrait.jpg') !important; background-position: center top !important; }
}
/* Tablette/mobile paysage : paysage dédié */
@media (orientation: landscape) and (max-width: 932px) {
  body { background-image: url('/assets/treasure-map-paysage.png') !important; background-position: center center !important; }
}

/* ── TOPBAR — encre de chine, texte parchemin ── */
.topbar,
.site-header,
.site-header.scrolled {
  background:    var(--hp-header-bg, #1C0F02) !important;
  border-bottom: 1px solid rgba(232, 215, 197, .10) !important;
}
.topbar,
.site-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 50 !important;
  padding: 0 !important;
}

/* ── Topbar inner ── */
.topbar-inner {
  max-width:       1160px !important;
  margin:          0 auto !important;
  padding:         18px 24px !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
}
@media (max-width: 600px) {
  .topbar-inner { padding: 14px 18px !important; }
}

/* ── Brand + wordmark ── */
.brand {
  display: flex !important; align-items: center !important;
  gap: 10px !important; text-decoration: none !important;
}
.brand-mark { width: 36px !important; height: 36px !important; flex: 0 0 36px !important; }
.brand-mark img { width: 100% !important; height: 100% !important; display: block !important; }
.wordmark {
  font-family:    var(--hp-h-font) !important;
  font-size:      14px !important;
  font-weight:    500 !important;
  letter-spacing: .04em !important;
  white-space:    nowrap !important;
  color:          var(--hp-nav-color, #E8D7C3) !important;
}
.wordmark em { font-style: italic !important; color: var(--hp-nav-color, #E8D7C3) !important; }
.brand:hover .wordmark,
.brand:hover .wordmark em { color: #A63828 !important; }

/* ── Nav ── */
.topbar .nav, .site-header .nav, .topbar-inner .nav {
  display: flex !important; align-items: center !important; gap: 20px !important;
}
.topbar .nav a, .site-header .nav a, .topbar-inner .nav a {
  font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: .02em !important;
  color: var(--hp-nav-color, #E8D7C3) !important;
  text-decoration: none !important; transition: color .2s !important;
}
.topbar .nav a:hover, .topbar-inner .nav a:hover { color: #A63828 !important; }
.nav .nav-account {
  border: 1px solid rgba(232, 215, 197, .35) !important;
  padding: 5px 12px !important; border-radius: 4px !important;
  font-size: 11.5px !important; letter-spacing: .06em !important;
}
.nav .nav-account:hover {
  color: #A63828 !important; border-color: #A63828 !important;
}

/* ── Typographie ── */
h1, h2, h3 { font-family: var(--hp-h-font) !important; color: var(--hp-h-color) !important; }
h4, h5, h6 { color: var(--hp-s-color) !important; }
p           { color: var(--hp-b-color); }
strong      { color: var(--hp-h-color); }
.copper     { color: var(--hp-a-color) !important; }
a           { color: var(--hp-b-color); transition: color .2s; }
a:hover     { color: var(--hp-a-color); }

/* ── Bouton principal ── */
.btn-primary, button.btn-primary, a.btn-primary {
  background:    var(--hp-btn-bg) !important;
  color:         var(--hp-btn-txt, #DEC89E) !important;
  border-radius: var(--hp-btn-r) !important;
  border-color:  transparent !important;
}
.btn-primary:hover {
  background: var(--hp-btn-bg) !important;
  filter: brightness(.88); transform: translateY(-1px);
}

/* ── Back link ── */
.topbar-inner .back, .topbar-inner a.back {
  font-size: 13px !important; color: rgba(232, 215, 197, .7) !important;
  text-decoration: none !important; transition: color .2s !important;
}
.topbar-inner .back:hover { color: #A63828 !important; }

/* ── Cards / inputs ── */
.card, [class*="-card"] {
  background:   rgba(255,255,255,.35) !important;
  border-color: rgba(28,15,2,.12) !important;
}
input:not(#notes-area):not(#notes-area-2), textarea:not(#notes-area):not(#notes-area-2), select {
  background:   rgba(255,255,255,.6) !important;
  color:        var(--hp-b-color) !important;
  border-color: rgba(28,15,2,.18) !important;
}
input:not(#notes-area):not(#notes-area-2)::placeholder, textarea:not(#notes-area):not(#notes-area-2)::placeholder { color: var(--hp-s-color) !important; opacity: .7; }

/* ── Focus de marque + accent-color (fin du halo/radio bleu système) ──
   Halo rouge doux au focus (sans !important → les champs à focus dédié, chat & notes,
   gardent le leur). accent-color rouge hérité sur tous les radios/cases/sliders. */
input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(166,56,40,.16); }
:root { accent-color: #A63828; }

/* ── Responsive hero h1 ── */
@media (max-width: 480px) {
  section.hero h1, .hero h1 { font-size: 26px !important; line-height: 1.15 !important; }
}

/* ── Bandeau « Mon Puzzle Intérieur continue » (offre 72 h) ──────────────────
   FIXE + FIN + en HAUT, en surimpression : ne pousse PLUS le contenu de la page
   (choix Yann 2026-07-19). Override centralisé du `.renewal-banner` défini page
   par page (CSS inline dupliqué) → `!important` pour gagner quel que soit l'ordre
   de chargement. N'apparaît que si DATA.renewalOffer (fenêtre < 72 h), donc
   inoffensif sur les pages sans offre. */
.renewal-banner {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 7px 18px !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(201, 154, 78, .55) !important;
  border-radius: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.25 !important;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6) !important;
}
.renewal-banner strong { font-size: 15px !important; }
.renewal-banner .rb-mark { font-size: 16px !important; }
@media (max-width: 540px) {
  .renewal-banner { padding: 6px 12px !important; font-size: 12.5px !important; }
  .renewal-banner strong { font-size: 13px !important; }
}