/* === Case Zouzou — Hi-Fi styles === */
/* Direction C "Storytelling" — chaleureux, fidèle au logo (jaune/indigo/orange), baobab visible */

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

:root {
  --hf-yellow: #F4C81F;
  --hf-yellow-soft: #FCEFAE;
  --hf-yellow-paper: #FFF8DD;
  --hf-indigo: #2B2A7A;
  --hf-indigo-deep: #1E1D5C;
  --hf-indigo-soft: #B7B5DC;
  --hf-indigo-paper: #EDECF7;
  --hf-orange: #E45A1B;
  --hf-orange-soft: #FAB58A;
  --hf-orange-paper: #FCE3D2;
  --hf-cream: #FBF6E9;
  --hf-cream-2: #F5EFD8;
  --hf-paper: #FFFCF3;
  --hf-ink: #1A1838;
  --hf-ink-soft: #4A4870;
  --hf-pencil: #7A7898;
  --hf-line: #1A1838;
  --hf-radius-sm: 10px;
  --hf-radius: 18px;
  --hf-radius-lg: 28px;
  --hf-radius-xl: 40px;
  --hf-shadow-sm: 0 2px 8px rgba(26,24,56,0.08);
  --hf-shadow: 0 8px 28px rgba(26,24,56,0.12);
  --hf-shadow-lg: 0 24px 60px rgba(26,24,56,0.18);
  --hf-display: 'Fraunces', 'Times New Roman', serif;
  --hf-script: 'Caveat', cursive;
  --hf-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

.hf {
  font-family: var(--hf-body);
  color: var(--hf-ink);
  background: var(--hf-paper);
  line-height: 1.5;
  font-size: 16px;
}

.hf-eyebrow {
  font-family: var(--hf-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hf-indigo);
}
.hf-eyebrow.on-dark { color: var(--hf-yellow); }
.hf-script {
  font-family: var(--hf-script);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.5px;
}
.hf-display {
  font-family: var(--hf-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.hf-display em {
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.hf-body {
  font-family: var(--hf-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--hf-ink-soft);
}
.hf-body-lg {
  font-family: var(--hf-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--hf-ink);
  font-variation-settings: "opsz" 32, "SOFT" 30;
}
.hf-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hf-pencil);
  font-weight: 500;
}

.hf-h-display { font-size: clamp(56px, 8vw, 120px); }
.hf-h-1 { font-size: clamp(40px, 5vw, 72px); }
.hf-h-2 { font-size: clamp(28px, 3vw, 40px); }
.hf-h-3 { font-size: clamp(20px, 2vw, 26px); }

.hf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--hf-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--hf-ink);
  background: var(--hf-yellow);
  color: var(--hf-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 0 var(--hf-ink);
  white-space: nowrap;
}
.hf-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--hf-ink); }
.hf-btn-indigo { background: var(--hf-indigo); color: #fff; border-color: var(--hf-indigo-deep); box-shadow: 0 4px 0 var(--hf-indigo-deep); }
.hf-btn-orange { background: var(--hf-orange); color: #fff; border-color: #B14411; box-shadow: 0 4px 0 #B14411; }
.hf-btn-ghost {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--hf-ink);
}
.hf-btn-ghost:hover { background: var(--hf-ink); color: var(--hf-paper); transform: translateY(-1px); box-shadow: none; }
.hf-btn-sm { padding: 10px 18px; font-size: 14px; }

.hf-nav-link {
  font-family: var(--hf-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--hf-ink);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
}
.hf-nav-link.active {
  color: var(--hf-indigo);
  font-weight: 600;
}
.hf-nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 6px;
  background: var(--hf-yellow);
  border-radius: 6px;
  z-index: 0;
}

.hf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--hf-paper);
  border: 1.5px solid var(--hf-ink);
  font-size: 14px;
  font-weight: 500;
  color: var(--hf-ink);
}
.hf-pill .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hf-orange);
}

.hf-band-yellow { background: var(--hf-yellow); color: var(--hf-ink); }
.hf-band-yellow-soft { background: var(--hf-yellow-paper); }
.hf-band-indigo { background: var(--hf-indigo); color: #fff; }
.hf-band-indigo-soft { background: var(--hf-indigo-paper); }
.hf-band-orange { background: var(--hf-orange); color: #fff; }
.hf-band-orange-soft { background: var(--hf-orange-paper); }
.hf-band-cream { background: var(--hf-cream); }
.hf-band-cream-2 { background: var(--hf-cream-2); }
.hf-band-ink { background: var(--hf-ink); color: #fff; }

.hf-photo {
  position: relative;
  background:
    linear-gradient(135deg, rgba(244,200,31,0.18), rgba(228,90,27,0.16) 60%, rgba(43,42,122,0.20)),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
    var(--hf-cream-2);
  border-radius: var(--hf-radius);
  display: flex;
  align-items: flex-end;
  padding: 18px;
  overflow: hidden;
  isolation: isolate;
}
.hf-photo::after {
  content: attr(data-label);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26,24,56,0.55);
  background: rgba(255,252,243,0.85);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hf-photo-yellow {
  background:
    linear-gradient(135deg, rgba(244,200,31,0.7), rgba(228,90,27,0.4)),
    var(--hf-yellow-paper);
}
.hf-photo-indigo {
  background:
    linear-gradient(135deg, rgba(43,42,122,0.85), rgba(228,90,27,0.4)),
    var(--hf-indigo);
}
.hf-photo-indigo::after { background: rgba(255,252,243,0.95); }
.hf-photo-orange {
  background:
    linear-gradient(135deg, rgba(228,90,27,0.85), rgba(244,200,31,0.5)),
    var(--hf-orange);
}
.hf-photo-orange::after { background: rgba(255,252,243,0.95); }

.hf-card {
  background: var(--hf-paper);
  border: 1.5px solid var(--hf-ink);
  border-radius: var(--hf-radius-lg);
  padding: 28px;
  box-shadow: 0 4px 0 var(--hf-ink);
}

.hf-logo {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--hf-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  position: relative;
  height: 44px;
}
.hf-logo .word {
  background: var(--hf-yellow);
  color: var(--hf-indigo);
  padding: 0 14px 0 14px;
  display: flex;
  align-items: center;
  font-size: 22px;
  position: relative;
  border-top: 3px solid var(--hf-indigo);
  border-bottom: 3px solid var(--hf-indigo);
}
.hf-logo .word.first { border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding-right: 28px; }
.hf-logo .word.last  { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-left: 28px; }
.hf-logo .word::before,
.hf-logo .word::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  background: var(--hf-indigo);
  -webkit-mask: linear-gradient(135deg, #000 25%, transparent 25%) 0 0/8px 6px,
                linear-gradient(225deg, #000 25%, transparent 25%) 0 0/8px 6px;
          mask: linear-gradient(135deg, #000 25%, transparent 25%) 0 0/8px 6px,
                linear-gradient(225deg, #000 25%, transparent 25%) 0 0/8px 6px;
}
.hf-logo .word::before { top: -9px; }
.hf-logo .word::after  { bottom: -9px; }
.hf-logo .baobab {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--hf-orange);
  border: 3px solid var(--hf-indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -16px;
  z-index: 2;
  position: relative;
}
.hf-logo.sm { height: 32px; }
.hf-logo.sm .word { font-size: 16px; padding: 0 10px; }
.hf-logo.sm .word.first { padding-right: 22px; }
.hf-logo.sm .word.last { padding-left: 22px; }
.hf-logo.sm .baobab { width: 32px; height: 32px; }

.hf-baobab-sil {
  width: 60%;
  height: 60%;
  background: var(--hf-indigo);
  -webkit-mask: radial-gradient(ellipse 50% 32% at 50% 28%, #000 99%, transparent 100%) 0 0/100% 100% no-repeat,
                linear-gradient(#000, #000) 47% 28%/6% 50% no-repeat,
                radial-gradient(circle 5% at 35% 80%, #000 99%, transparent 100%),
                radial-gradient(circle 5% at 65% 80%, #000 99%, transparent 100%);
          mask: radial-gradient(ellipse 50% 32% at 50% 28%, #000 99%, transparent 100%) 0 0/100% 100% no-repeat,
                linear-gradient(#000, #000) 47% 28%/6% 50% no-repeat,
                radial-gradient(circle 5% at 35% 80%, #000 99%, transparent 100%),
                radial-gradient(circle 5% at 65% 80%, #000 99%, transparent 100%);
}

.hf-sun {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hf-yellow) 0%, var(--hf-yellow) 60%, transparent 70%);
  position: absolute;
  filter: blur(2px);
  opacity: 0.85;
  pointer-events: none;
}
.hf-sun-solid {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--hf-yellow);
  border: 3px solid var(--hf-indigo);
  position: absolute;
  pointer-events: none;
}
.hf-sun-solid::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 8deg, var(--hf-indigo) 8deg 11deg, transparent 11deg 45deg,
      transparent 45deg 53deg, var(--hf-indigo) 53deg 56deg, transparent 56deg 90deg,
      transparent 90deg 98deg, var(--hf-indigo) 98deg 101deg, transparent 101deg 135deg,
      transparent 135deg 143deg, var(--hf-indigo) 143deg 146deg, transparent 146deg 180deg,
      transparent 180deg 188deg, var(--hf-indigo) 188deg 191deg, transparent 191deg 225deg,
      transparent 225deg 233deg, var(--hf-indigo) 233deg 236deg, transparent 236deg 270deg,
      transparent 270deg 278deg, var(--hf-indigo) 278deg 281deg, transparent 281deg 315deg,
      transparent 315deg 323deg, var(--hf-indigo) 323deg 326deg, transparent 326deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 38%, black 41%, black 49%, transparent 50%);
          mask: radial-gradient(circle, transparent 38%, black 41%, black 49%, transparent 50%);
}

.hf-zigzag {
  height: 16px;
  background: var(--hf-indigo);
  -webkit-mask: linear-gradient(135deg, #000 25%, transparent 25%) 0 0/16px 16px,
                linear-gradient(225deg, #000 25%, transparent 25%) 0 0/16px 16px;
          mask: linear-gradient(135deg, #000 25%, transparent 25%) 0 0/16px 16px,
                linear-gradient(225deg, #000 25%, transparent 25%) 0 0/16px 16px;
}
.hf-zigzag.yellow { background: var(--hf-yellow); }
.hf-zigzag.orange { background: var(--hf-orange); }

.hf-tag-creole {
  display: inline-block;
  background: var(--hf-orange);
  color: #fff;
  font-family: var(--hf-script);
  font-size: 0.85em;
  padding: 0 10px;
  border-radius: 8px;
  transform: rotate(-2deg);
  vertical-align: 0.05em;
  font-weight: 700;
}

.hf-input {
  width: 100%;
  border: 1.5px solid var(--hf-ink);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--hf-paper);
  font-family: var(--hf-body);
  font-size: 15px;
  color: var(--hf-ink);
  appearance: none;
}
.hf-input::placeholder { color: var(--hf-pencil); }
.hf-input:focus { outline: none; box-shadow: 0 0 0 3px var(--hf-yellow); }
.hf-label {
  font-family: var(--hf-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--hf-ink);
  margin-bottom: 6px;
  display: block;
}

.hf-step-num {
  font-family: var(--hf-display);
  font-weight: 800;
  font-style: italic;
  font-size: 80px;
  line-height: 0.8;
  color: var(--hf-indigo);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.hf-quote-mark {
  font-family: var(--hf-display);
  font-style: italic;
  font-size: 200px;
  line-height: 0.5;
  color: var(--hf-yellow);
  display: inline-block;
}

/* utilities */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.middle { align-items: center; }
.wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}.gap-40{gap:40px}.gap-48{gap:48px}.gap-64{gap:64px}
.p-12{padding:12px}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}.p-32{padding:32px}.p-40{padding:40px}.p-48{padding:48px}.p-64{padding:64px}.p-80{padding:80px}
.px-40{padding-left:40px;padding-right:40px}.px-64{padding-left:64px;padding-right:64px}.px-80{padding-left:80px;padding-right:80px}
.py-40{padding-top:40px;padding-bottom:40px}.py-64{padding-top:64px;padding-bottom:64px}.py-80{padding-top:80px;padding-bottom:80px}.py-100{padding-top:100px;padding-bottom:100px}

/* site overrides */
html { scroll-behavior: smooth; }
a { cursor: pointer; }
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary > span:last-child { color: var(--hf-indigo); }
select.hf-input { cursor: pointer; }
textarea.hf-input { resize: vertical; }