/* =========================================================================
   base.css — Reset léger, typographie, en-tête héro, nav, conteneurs de vues
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; }
p { margin: 0 0 .9rem; }
a { color: var(--accent); }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.muted { color: var(--ink-faint); }

/* --- En-tête héro --- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: #2a241d;
  overflow: hidden;
}
/* Conteneur translaté par parallax.js (l'image défile plus lentement que la page). */
.hero__bgwrap {
  position: absolute; left: 0; right: 0; top: -18%;
  height: 136%; z-index: 0;
  will-change: transform;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06) brightness(.8);
  transform: scale(1.04);
  animation: kenburns 22s ease-out both;
}
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14); } }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,.15) 0%, rgba(20,17,13,.15) 45%, rgba(20,17,13,.78) 100%);
}
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 clamp(1.4rem, 5vw, 3.5rem) clamp(2.6rem, 6vw, 4.5rem);
  will-change: transform, opacity;
}
.hero__kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .74rem;
  font-weight: 600;
  opacity: .9;
  margin-bottom: .7rem;
  animation: heroUp .9s .15s both;
}
.hero__title {
  font-size: clamp(3.2rem, 10vw, 7.5rem);
  letter-spacing: -.015em;
  line-height: .92;
  text-shadow: 0 2px 30px rgba(0,0,0,.3);
  animation: heroUp 1s .3s both;
}
.hero__title em { font-style: italic; font-weight: 500; color: #f0d9a8; }
.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  max-width: 34ch;
  margin-top: 1rem;
  opacity: .95;
  animation: heroUp 1s .5s both;
}
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Compte à rebours complice du hero */
.hero__countdown {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin-top: 1.35rem;
  animation: heroUp 1s .7s both;
}
.hero__cd-num {
  font-family: var(--sans); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: #f0d9a8;
  border: 1px solid rgba(240,217,168,.5);
  border-radius: 999px;
  padding: .26rem .7rem;
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(4px);
}
.hero__cd-dot { opacity: .55; }
.hero__cd-msg {
  font-family: var(--hand);
  font-size: 1.34rem; line-height: 1;
  color: #fff; opacity: .96;
  transform: rotate(-1.5deg);
}

/* --- Barre de navigation --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: .2rem;
  justify-content: center;
  background: rgba(251,248,243,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .4rem;
}
.tab {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 0; background: transparent;
  color: var(--ink-soft);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-size: .92rem; font-weight: 500;
  transition: background .18s, color .18s;
}
.tab:hover { background: var(--paper-2); color: var(--ink); }
.tab.is-active { background: var(--ink); color: var(--paper); }
.tab__icon { font-size: 1rem; opacity: .9; }

/* Sur petit écran : 5 onglets → défilement horizontal plutôt que rognage. */
@media (max-width: 560px) {
  .nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; padding: .55rem .85rem; }
}

/* --- Vues --- */
.view { display: none; }
.view.is-visible { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.wrap { max-width: var(--readable); margin: 0 auto; padding: clamp(2.6rem, 5vw, 4.2rem) clamp(1.4rem, 5vw, 3rem) 6rem; }
.wrap--wide { max-width: var(--wide); }

/* --- Pied --- */
.site-foot {
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-faint);
  font-size: .82rem;
  padding: 2rem 1.4rem 3rem;
}
.site-foot a { color: var(--ink-soft); }