/* misoua.css — base styles, living-hero animation, shared keyframes.
   Theme COLOURS are applied inline from misoua-data.js (each city's
   `pal`); this file holds only structure + motion. */

html, body { margin: 0; padding: 0; }
:root {
  --ak-pad: 96px;
  --ak-vy: 72px;
  --grid-cols-2: 1fr 1fr;
  --grid-cols-3: 1fr 1fr 1fr;
  --grid-cols-4: 1fr 1fr 1fr 1fr;
}
* { box-sizing: border-box; }
body { background: #FAF4E7; }
button { font-family: inherit; white-space: nowrap; }
input::placeholder { color: rgba(0,0,0,0.38); }

@media (max-width: 860px) {
  :root {
    --ak-pad: 24px;
    --ak-vy: 48px;
    --grid-cols-2: 1fr;
    --grid-cols-3: 1fr;
    --grid-cols-4: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  :root {
    --grid-cols-4: 1fr;
  }
}

@keyframes akfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes akpop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes akslide { from { transform: translateX(40px); } to { transform: none; } }
@keyframes aktoast { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes aktype { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ak-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.ak-scroll::-webkit-scrollbar { display: none; }

/* ===== Living hero — Mont Korhogo ===== */
.lh { position: relative; width: 100%; overflow: hidden; background: #1b2417; }
.lh-stage { position: absolute; inset: 0; }
.lh-photo {
  position: absolute; inset: -4%; background-size: cover; background-position: 50% 42%;
  transform-origin: 56% 46%; will-change: transform;
  animation: lh-kenburns 38s ease-in-out infinite alternate;
}
@keyframes lh-kenburns {
  0%   { transform: scale(1.06) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(-1.6%, -1.8%, 0); }
}
.lh-haze { position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none; mix-blend-mode: screen; opacity: 0.5; will-change: transform; }
.lh-haze1 { width: 60vw; height: 26vh; left: -10vw; top: 32%; background: radial-gradient(closest-side, rgba(244,236,218,0.55), transparent 72%); animation: lh-drift1 34s ease-in-out infinite alternate; }
.lh-haze2 { width: 48vw; height: 22vh; right: -8vw; top: 14%; background: radial-gradient(closest-side, rgba(255,255,255,0.4), transparent 72%); animation: lh-drift2 46s ease-in-out infinite alternate; }
.lh-haze3 { width: 40vw; height: 18vh; left: 24vw; bottom: 8%; background: radial-gradient(closest-side, rgba(230,222,201,0.4), transparent 72%); animation: lh-drift1 52s ease-in-out infinite alternate-reverse; }
@keyframes lh-drift1 { 0% { transform: translate3d(-6%,0,0); } 100% { transform: translate3d(10%,-3%,0); } }
@keyframes lh-drift2 { 0% { transform: translate3d(6%,0,0); } 100% { transform: translate3d(-9%,4%,0); } }
.lh-sheen {
  position: absolute; inset: -20% -30%; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.8;
  background: linear-gradient(108deg, transparent 38%, rgba(255,248,224,0.55) 50%, transparent 62%);
  animation: lh-sheen 16s ease-in-out infinite; will-change: transform;
}
@keyframes lh-sheen { 0% { transform: translateX(-26%); } 50% { transform: translateX(26%); } 100% { transform: translateX(-26%); } }
.lh-birds { position: absolute; inset: 0; pointer-events: none; }
.lh-bird { position: absolute; will-change: transform; opacity: 0.62; }
.lh-bird > svg { display: block; animation: lh-flap 0.9s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes lh-flap { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }
.lh-b1 { top: 26%; animation: lh-fly1 26s linear infinite; }
.lh-b2 { top: 38%; animation: lh-fly2 34s linear infinite; animation-delay: -6s; }
.lh-b3 { top: 31%; animation: lh-fly1 30s linear infinite; animation-delay: -14s; }
.lh-b4 { top: 46%; animation: lh-fly2 40s linear infinite; animation-delay: -22s; }
@keyframes lh-fly1 { 0% { transform: translate3d(-8vw, 4vh, 0); } 100% { transform: translate3d(112vw, -6vh, 0); } }
@keyframes lh-fly2 { 0% { transform: translate3d(112vw, 2vh, 0); } 100% { transform: translate3d(-10vw, -5vh, 0) scaleX(-1); } }
.lh-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,15,9,0.42) 0%, rgba(20,15,9,0.05) 26%, rgba(20,15,9,0.12) 56%, rgba(20,15,9,0.78) 100%); }
.lh-grain { position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.8) 0.5px, transparent 0.5px); background-size: 3px 3px; }
.lh-scrollcue { animation: lh-bob 2.4s ease-in-out infinite; }
@keyframes lh-bob { 0%,100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(7px); opacity: 1; } }
.lh-rise { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .lh-rise { animation: lh-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes lh-rise { from { transform: translateY(18px); } to { transform: none; } }
.fnav { transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.fnav-menu { animation: akpop .26s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .lh-photo, .lh-haze, .lh-sheen, .lh-bird, .lh-bird > svg, .lh-scrollcue, .lh-rise { animation: none !important; }
  .lh-rise { transform: none; }
  .lh-birds { display: none; }
}

/* hover affordances that React did with JS — kept as CSS for vanilla */
.hover-lift { transition: transform .14s, box-shadow .14s; }
.hover-lift:hover { transform: translateY(var(--lift-y, -4px)); box-shadow: var(--lift-shadow, 0 18px 40px -24px rgba(0,0,0,0.4)); }
.hover-accent:hover .h-title { color: var(--accent); }

/* btn hover (replicates React translateY + opacity) */
.akbtn { transition: transform .12s, opacity .12s, background .15s; }
.akbtn:hover { transform: translateY(-1px); opacity: 0.92; }

/* chip / quick / menu-item hovers */
.fnav-link:hover { background: var(--cream) !important; }
.quick-chip:hover { background: var(--cream) !important; border-color: var(--accent) !important; }

/* ── Responsive : les tailles de police des titres sont fixées inline par le
   JS (héros à 106px, sections à 40-52px) ; on les borne ici pour le mobile.
   !important nécessaire pour surclasser les styles inline. ── */
@media (max-width: 700px) {
  html, body { overflow-x: hidden; }
  #app { overflow-x: hidden; }
  #app h1 { font-size: clamp(40px, 12.5vw, 64px) !important; }
  #app h2 { font-size: clamp(27px, 8.5vw, 42px) !important; }
  #app h3 { font-size: clamp(17px, 5.5vw, 22px) !important; }
}
@media (max-width: 420px) {
  #app h1 { font-size: clamp(34px, 12vw, 48px) !important; }
}
@media (max-width: 700px) {
  /* les boutons/labels posés en inline avec nowrap font déborder les lignes
     agenda/saveurs et coupent la page : on les laisse passer à la ligne. */
  #app [style*="white-space:nowrap"] { white-space: normal !important; }
  #app section { min-width: 0; }
  #app section > div { min-width: 0; }
}