/* ==========================================================================
   LAYOUT — barre de progression, en-tête, navigation, hero, panneaux, footer
   ========================================================================== */

/* --- Barre de progression de lecture -------------------------------------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  background: linear-gradient(90deg, var(--mint), var(--ball));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .12s linear, opacity .3s;
  pointer-events: none;
}

/* --- En-tête -------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .4s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--cream) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity .45s var(--ease);
  z-index: -1;
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header.is-scrolled { height: 64px; }

.header-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 1.6vw, 1.75rem);
}
/* Seul le logo peut se réduire ; navigation, thème et bouton gardent leur taille */
.header-inner > .brand { flex: 0 1 auto; min-width: 0; }
.header-inner > .nav-desktop,
.header-inner > .theme-switch,
.header-inner > .header-cta,
.header-inner > .burger { flex: 0 0 auto; }

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  z-index: 2;
}
/* Logo du club détouré (PNG transparent, 213×141). Une partie de l'arc noir
   déborde de l'aplat orange : sur fond sombre elle disparaîtrait, d'où le
   halo clair qui épouse la forme du logo (drop-shadow suit la transparence,
   pas le rectangle de l'image).                                          */
.brand-mark {
  height: 46px;
  aspect-ratio: 213 / 141;
  flex: none;
  position: relative;
  display: block;
  transform-origin: 40% 60%;
  transition: transform .6s var(--ease), filter .45s var(--ease), height .4s var(--ease);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .16));
}
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.06); }
.site-header.on-dark .brand-mark {
  filter: drop-shadow(0 0 .6px rgba(248, 246, 241, .9))
          drop-shadow(0 0 9px rgba(248, 246, 241, .28));
}
.site-header.is-scrolled .brand-mark { height: 40px; }
@media (max-width: 599px) {
  .brand-mark { height: 40px; }
}

/* Header au-dessus d'un contenu sombre */
.site-header.on-dark { --header-fg: var(--cream); }
.site-header.on-dark::after {
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  border-bottom-color: color-mix(in oklab, #fff 10%, transparent);
}

/* --- Navigation onglets (desktop) ----------------------------------------- */
.nav-desktop { display: none; }

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: .1rem;
    position: relative;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--nav-line, var(--line));
    background: var(--nav-bg, color-mix(in oklab, #fff 45%, transparent));
    backdrop-filter: blur(10px);
    transition: background .4s var(--ease), border-color .4s var(--ease);
  }
  .site-header.on-dark .nav-desktop {
    --nav-line: color-mix(in oklab, #fff 16%, transparent);
    --nav-bg: color-mix(in oklab, #000 22%, transparent);
  }
  .nav-link {
    position: relative;
    z-index: 2;
    padding: .55rem 1.05rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--header-fg, var(--txt));
    opacity: .68;
    white-space: nowrap;
    transition: opacity .3s var(--ease), color .35s var(--ease);
  }
  .nav-link:hover { opacity: 1; }
  .nav-link.is-active { opacity: 1; color: var(--ink); font-weight: 600; }
  .nav-indicator {
    position: absolute;
    top: 4px; left: 0;
    height: calc(100% - 8px);
    border-radius: 999px;
    background: var(--ball);
    box-shadow: 0 6px 20px -6px color-mix(in oklab, var(--ball) 75%, transparent);
    transition: transform .55s var(--ease), width .55s var(--ease), opacity .3s;
    opacity: 0;
    z-index: 1;
    will-change: transform, width;
  }
  .nav-indicator.is-ready { opacity: 1; }
}

.site-header .header-cta { display: none; }
@media (min-width: 1200px) { .site-header .header-cta { display: inline-flex; } }

/* --- Bouton burger -------------------------------------------------------- */
.burger {
  position: relative;
  z-index: 2;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in oklab, #fff 35%, transparent);
  backdrop-filter: blur(8px);
  transition: background .4s, border-color .4s, transform .35s var(--ease);
}
.site-header.on-dark .burger {
  border-color: color-mix(in oklab, #fff 20%, transparent);
  background: color-mix(in oklab, #000 25%, transparent);
}
.burger:active { transform: scale(.93); }
.burger-lines { position: relative; width: 20px; height: 12px; }
.burger-lines span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--header-fg, var(--txt));
  transition: transform .5s var(--ease), opacity .3s, width .4s var(--ease), background .4s;
}
.burger-lines span:nth-child(1) { top: 0; }
.burger-lines span:nth-child(2) { top: 5px; width: 68%; }
.burger-lines span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger-lines span { background: var(--cream); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; transform: translateX(-12px); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 1024px) { .burger { display: none; } }

/* --- Menu plein écran (mobile) -------------------------------------------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  /* « center » rogne le début du contenu quand il dépasse : on centre
     seulement s'il y a la place, sinon on aligne en haut.               */
  justify-content: flex-start;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter)
           calc(2rem + env(safe-area-inset-bottom, 0px));
  clip-path: circle(0% at calc(100% - 46px) 44px);
  transition: clip-path .85s var(--ease-out), visibility .85s;
  visibility: hidden;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
@supports (justify-content: safe center) {
  .nav-overlay { justify-content: safe center; }
}
.nav-overlay.is-open {
  clip-path: circle(155% at calc(100% - 46px) 44px);
  visibility: visible;
}
.nav-overlay::before {
  content: "";
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--green) 60%, transparent), transparent 70%);
  pointer-events: none;
}

.nav-overlay-list { display: grid; gap: .1rem; position: relative; }
.nav-overlay-item { overflow: hidden; }
.nav-overlay-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .3rem 0;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 11vw, 3.8rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.08;
  color: var(--cream);
  transform: translateY(110%);
  opacity: 0;
  transition: transform .8s var(--ease-out), opacity .5s, color .3s;
}
.nav-overlay.is-open .nav-overlay-link {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(.15s + var(--i) * .06s);
}
.nav-overlay-link .num {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ball);
  opacity: .75;
}
.nav-overlay-link.is-active { color: var(--ball); }

.nav-overlay-foot {
  margin-top: clamp(2rem, 7vh, 3.5rem);
  display: grid;
  gap: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s .5s, transform .6s .5s var(--ease-out);
  font-size: .9rem;
  color: color-mix(in oklab, var(--cream) 62%, transparent);
  position: relative;
}
.nav-overlay.is-open .nav-overlay-foot { opacity: 1; transform: none; }
.nav-overlay-foot a { transition: color .3s; }
.nav-overlay-foot a:hover, .nav-overlay-foot a:active { color: var(--ball); }
.nav-overlay-socials { display: flex; gap: 1.4rem; flex-wrap: wrap; font-weight: 500; }

/* --- HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  isolation: isolate;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -3;
}
.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  background:
    radial-gradient(45% 55% at 18% 24%, color-mix(in oklab, var(--green) 80%, transparent), transparent 70%),
    radial-gradient(40% 50% at 82% 66%, color-mix(in oklab, var(--clay) 48%, transparent), transparent 72%),
    radial-gradient(70% 60% at 50% 108%, color-mix(in oklab, var(--mint) 42%, transparent), transparent 70%);
  filter: blur(8px);
  opacity: .85;
  animation: heroDrift 24s var(--ease-in-out) infinite alternate;
}
.hero-grain {
  position: absolute; inset: 0; z-index: -1;
  opacity: .45; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.hero::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 42%;
  background: linear-gradient(to top, var(--ink), transparent);
  z-index: -1;
  pointer-events: none;
}

.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + 3.5rem) var(--gutter) clamp(3.5rem, 10vh, 6.5rem);
  display: grid;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  will-change: transform, opacity;
}

.hero-eyebrow {
  color: color-mix(in oklab, var(--cream) 68%, transparent);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .2s forwards;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .9;
  margin: 0;
}
.hero-line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-line > span {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  animation: lineIn 1.2s var(--ease-out) forwards;
  animation-delay: calc(.3s + var(--i) * .11s);
}
.hero-line--accent > span {
  background: linear-gradient(96deg, var(--ball), var(--mint) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  padding-right: .08em;
}

.hero-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) .9s forwards;
}
.hero-text {
  max-width: 44ch;
  color: color-mix(in oklab, var(--cream) 72%, transparent);
  font-size: var(--fs-lead);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 52%, transparent);
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) 1.5s forwards;
}
@media (min-width: 900px) { .hero-scroll { display: flex; } }
.hero-scroll i {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--ball));
  animation: scrollCue 2.4s var(--ease-in-out) infinite;
}

/* --- Panneaux (mode onglets desktop) -------------------------------------- */
.panel { position: relative; }
body.mode-tabs .panel.is-entering { animation: panelIn .75s var(--ease-out) both; }

/* --- Bandeau défilant ----------------------------------------------------- */
.marquee {
  --speed: 42s;
  position: relative;
  overflow: hidden;
  padding-block: clamp(1rem, 2.4vw, 1.5rem);
  background: var(--ink);
  color: var(--cream);
  user-select: none;
}
.marquee-track {
  display: flex;
  width: max-content;
  /* WebKit gère mal une var() placée dans le raccourci « animation » : il
     lui arrive d'ignorer la déclaration entière, et le bandeau reste figé
     sur iPhone. Les propriétés détaillées ne posent pas ce problème.     */
  animation-name: marquee;
  animation-duration: var(--speed, 42s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3.5vw, 2.75rem);
  padding-right: clamp(1.4rem, 3.5vw, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marquee-group span { opacity: .9; }
.marquee-group i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ball);
  flex: none;
}

/* --- Pied de page --------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6rem) 1.5rem;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: auto -10% -65% -10%;
  height: 90%;
  background: radial-gradient(50% 100% at 50% 100%, color-mix(in oklab, var(--green) 42%, transparent), transparent 70%);
  pointer-events: none;
}
.footer-top {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.75rem;
  border-bottom: 1px solid color-mix(in oklab, var(--cream) 12%, transparent);
  position: relative;
}
@media (min-width: 860px) {
  .footer-top { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; }
}
.footer-title {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  letter-spacing: -.04em;
  max-width: 16ch;
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--cream) 48%, transparent);
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.footer-col li { margin-bottom: .5rem; color: color-mix(in oklab, var(--cream) 76%, transparent); }
.footer-col a { transition: color .3s; }
.footer-col a:hover { color: var(--ball); }
.footer-bottom {
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  font-size: .78rem;
  color: color-mix(in oklab, var(--cream) 45%, transparent);
  position: relative;
}
.footer-wordmark {
  font-family: var(--font-display);
  /* valeur de repli si JavaScript ne tourne pas : calibrée pour tenir.
     ajusterWordmark() l'affine ensuite au pixel.                          */
  font-size: clamp(1.5rem, 11vw, 9rem);
  max-width: 100%;
  line-height: .82;
  letter-spacing: -.055em;
  font-weight: 700;
  color: color-mix(in oklab, var(--cream) 4%, transparent);
  -webkit-text-stroke: 2px color-mix(in oklab, var(--cream) 32%, transparent);
  margin-top: 2.5rem;
  text-align: center;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* --- Ajustements du mode onglets (desktop) -------------------------------- */
body.mode-tabs .panel:not(#accueil) > .section:first-child {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vh, 5rem));
}

/* --- Menu ouvert : l'en-tête passe en clair ------------------------------- */
body.menu-open .site-header { --header-fg: var(--cream); }
body.menu-open .site-header::after { background: transparent; border-color: transparent; }
body.menu-open .site-header::after { opacity: 0; }
body.menu-open .site-header .header-cta,
body.menu-open .site-header .nav-desktop { opacity: 0; pointer-events: none; }

/* --- Lien externe Ten'Up -------------------------------------------------- */
.ico-ext {
  width: 11px; height: 11px;
  flex: none;
  opacity: .75;
  transition: transform .4s var(--ease), opacity .3s;
}
a:hover > .ico-ext { transform: translate(2px, -2px); opacity: 1; }

@media (min-width: 1024px) {
  .nav-sep {
    width: 1px;
    height: 18px;
    margin-inline: .35rem;
    background: var(--nav-line, var(--line));
    flex: none;
  }
  .nav-link--ext {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    opacity: .8;
  }
  .nav-link--ext:hover { opacity: 1; color: var(--ball); }
  .site-header:not(.on-dark) .nav-link--ext:hover { color: var(--green); }
}

/* En-tête plus compact entre 1024 et 1280 px, pour tout faire tenir */
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-inner { gap: .9rem; }
  .nav-link { padding: .5rem .78rem; font-size: .82rem; }
  .nav-desktop { gap: 0; }
}

.nav-overlay-link--ext { color: var(--ball); }
.nav-overlay-link--ext .num { display: inline-flex; }
.nav-overlay-link--ext .ico-ext { width: 16px; height: 16px; opacity: 1; }

.footer-col .lien-ext {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* --- Hero mobile : le contenu occupe toute la hauteur ---------------------
   Sur petit écran, l'alignement en bas laissait une large bande vide sous
   l'en-tête. Le surtitre remonte en haut de l'écran, le titre et le texte
   restent groupés en bas : le vide devient une respiration, plus un trou.  */
@media (max-width: 767px) {
  .hero { align-items: stretch; min-height: 88svh; }
  .hero-inner {
    padding-top: calc(var(--header-h) + 1.1rem);
    padding-bottom: clamp(2.5rem, 7vh, 4rem);
    grid-template-rows: auto 1fr auto;
  }
  .hero-title { align-self: end; }
}

/* --- Hero desktop : s'adapte aussi à la HAUTEUR de la fenêtre -------------
   Le titre ne dépendait que de la largeur : sur un écran large mais peu
   haut (la plupart des portables), le contenu dépassait et les boutons
   comme l'indicateur de défilement se retrouvaient hors écran. Toutes les
   dimensions du bandeau se plient maintenant à la hauteur disponible, pour
   un rendu équivalent de 640 à 1400 px de haut.                          */
@media (min-width: 768px) {
  .hero-inner {
    padding-top: calc(var(--header-h) + clamp(1.25rem, 4vh, 3.5rem));
    padding-bottom: clamp(2.25rem, 7.5vh, 6.5rem);
    gap: clamp(.9rem, 3vh, 2.75rem);
  }
  .hero-title { font-size: min(var(--fs-hero), 15vh); }
  .hero-text  { font-size: clamp(1rem, 2.4vh, 1.35rem); }
}

/* Sous 700 px de haut, l'indicateur de défilement n'a plus sa place */
@media (min-width: 768px) and (max-height: 700px) {
  .hero-scroll { display: none; }
}