/* ============================================================
   Mobile App-like layer (FEAT-010)
   - Bottom-nav fixe sur mobile (< 768px)
   - Masquage de la navbar burger sur mobile
   - Padding bottom pour ne pas masquer le contenu
   - Safe area iOS

   Architecture : desktop-first à dessein.
   Ce fichier est une layer mobile au-dessus du CSS Webflow desktop.
   Toutes les règles mobiles sont sous @media (max-width: 767px) et
   regroupées dans un bloc unique pour limiter la duplication des MQ.
   ============================================================ */

:root {
  /* Bottom-nav tokens */
  --bottom-nav-height: 60px;
  --bottom-nav-bg: #0a0a0a;
  --bottom-nav-border: rgba(255, 255, 255, 0.08);
  --bottom-nav-color: rgba(255, 255, 255, 0.55);
  --bottom-nav-color-active: var(--principal, #6bd96e);

  /* Espacement (échelle géométrique 4px) */
  --adc-space-1: 4px;
  --adc-space-2: 8px;
  --adc-space-3: 12px;
  --adc-space-4: 16px;
  --adc-space-5: 20px;
  --adc-space-6: 24px;
  --adc-space-7: 36px;
  --adc-space-8: 44px;  /* tap target minimum WCAG */

  /* Border radius */
  --adc-radius-xs: 2px;
  --adc-radius-sm: 10px;
  --adc-radius-md: 22px;
  --adc-radius-pill: 999px;

  /* Alias historique conservé pour rétrocompatibilité */
  --space-inline-mobile: var(--adc-space-5);
}

/* Focus visible global : clavier-only (ne pollue pas le hover souris) */
:focus-visible {
  outline: 2px solid var(--principal, #6bd96e);
  outline-offset: 2px;
  border-radius: var(--adc-radius-xs);
}

/* Bottom nav cachée par défaut (desktop) */
.bottom-nav {
  display: none;
}

/* Bottom-nav et sheet : strictement mobile uniquement */
@media (min-width: 768px) {
  .bottom-nav,
  .more-sheet {
    display: none !important;
  }
}

@media (max-width: 767px) {

  /* Affichage et style de la bottom-nav.
     padding-left/right intègrent les safe-areas iPhone en orientation paysage. */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    background-color: var(--bottom-nav-bg);
    border-top: 1px solid var(--bottom-nav-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--bottom-nav-color);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    min-height: var(--adc-space-8);
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease, transform 150ms ease;
  }

  .bottom-nav__item:active {
    transform: scale(0.94);
  }

  .bottom-nav__item--active {
    color: var(--bottom-nav-color-active);
  }

  .bottom-nav__icon {
    width: 24px;
    height: 24px;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .bottom-nav__label {
    font-family: inherit;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Espace en bas du body pour ne pas masquer le contenu derrière la nav.
     La transition match celle de la nav pour éviter un saut visuel. */
  body {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    transition: padding-bottom 240ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Quand la bottom-nav est cachée par le scroll-down, on retire l'espace
     correspondant : sinon il reste une bande blanche en bas du viewport
     (= la zone que la nav occupait, désormais vide). Cf mobile-ux.js. */
  body.bottom-nav-is-hidden {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Sur mobile, le footer est caché : la bottom-nav (liens principaux)
     et la more-sheet (mentions légales, réseaux sociaux) le remplacent
     fonctionnellement. */
  .footer {
    display: none;
  }

  /* Sur mobile, on masque la nav du haut (le menu Webflow) puisque la
     bottom-nav prend le relais. Le burger Webflow a été retiré du HTML. */
  .nav_menu_wrapper {
    display: none !important;
  }

  /* Navbar plus compacte sur mobile + logo centré.
     Le padding-top intègre le notch en mode PWA standalone (iPhone). */
  .navbar_container {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
  }

  .navbar_wrapper {
    justify-content: center;
  }

  .navbar_brand {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Tap targets globaux : minimum 44px (WCAG 2.5.5) */
  a, button, .w-button, [role="button"] {
    min-height: var(--adc-space-8);
  }

  /* Suppression du highlight tap par défaut iOS */
  a, button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================================
   Bouton « Plus » dans la bottom-nav
   ============================================================ */
.bottom-nav__item--more {
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* État ouvert : couleur d'accent + petite rotation des points */
.bottom-nav__item--more[aria-expanded="true"] {
  color: var(--bottom-nav-color-active);
}

.bottom-nav__item--more .bottom-nav__icon circle {
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: center;
}

.bottom-nav__item--more[aria-expanded="true"] .bottom-nav__icon circle {
  transform: scale(1.15);
}

/* ============================================================
   Bottom sheet « Plus »
   ============================================================ */
.more-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  pointer-events: none;
}

.more-sheet[aria-hidden="false"] {
  display: block;
  pointer-events: auto;
}

.more-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.more-sheet[aria-hidden="false"] .more-sheet__backdrop {
  opacity: 1;
}

.more-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 6px;
  padding-right: max(var(--space-inline-mobile), env(safe-area-inset-right, 0px));
  padding-bottom: calc(var(--space-inline-mobile) + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--space-inline-mobile), env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--adc-radius-md) var(--adc-radius-md) 0 0;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.more-sheet[aria-hidden="false"] .more-sheet__panel {
  transform: translateY(0);
}

.more-sheet__handle {
  width: 40px;
  height: 4px;
  margin: var(--adc-space-2) auto var(--adc-space-1);
  border-radius: var(--adc-radius-pill);
  background: rgba(255, 255, 255, 0.22);
}

.more-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 12px;
}

.more-sheet__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
}

.more-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--adc-space-7);
  height: var(--adc-space-7);
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--adc-radius-pill);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.more-sheet__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.more-sheet__close:active {
  transform: scale(0.92);
}

.more-sheet__close svg {
  width: 16px;
  height: 16px;
}

.more-sheet__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.more-sheet__list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.more-sheet__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: color 150ms ease;
}

.more-sheet__link:active {
  color: var(--principal, #6bd96e);
}

.more-sheet__link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--adc-space-7);
  height: var(--adc-space-7);
  border-radius: var(--adc-radius-sm);
  background: rgba(107, 217, 110, 0.1);
  color: var(--principal, #6bd96e);
  flex-shrink: 0;
}

.more-sheet__link-icon svg {
  width: 18px;
  height: 18px;
}

.more-sheet__link-label {
  flex: 1;
  min-width: 0;
}

.more-sheet__chevron {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.more-sheet__section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.more-sheet__section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.more-sheet__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.more-sheet__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--adc-space-8);
  height: var(--adc-space-8);
  border-radius: var(--adc-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.more-sheet__social:hover {
  background: rgba(107, 217, 110, 0.12);
  border-color: rgba(107, 217, 110, 0.4);
}

.more-sheet__social:active {
  transform: scale(0.94);
}

.more-sheet__social img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.more-sheet__legal {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  letter-spacing: 0.3px;
}

.more-sheet__legal:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Body scroll-lock quand le sheet est ouvert */
body.more-sheet-open {
  overflow: hidden;
  touch-action: none;
}

/* ============================================================
   Site-wide responsive fixes mobile (FEAT-011)
   - Typo body 16px + clamp() titres
   - Padding inline standardisé
   - Articles : grille 1 colonne (fix débordement)
   - Home : carrousel events snap-scroll
   - Home : H1 kicker remonté à taille lisible
   - Auto-hide bottom-nav au scroll
   ============================================================ */

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Titres fluides */
  .heading_h2 {
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.05;
  }

  .heading {
    font-size: clamp(18px, 4.5vw, 22px);
    line-height: 1.25;
  }

  .paragraph {
    font-size: 16px;
    line-height: 1.55;
  }

  /* H1 « kicker » sur la home : était 10px, illisible */
  h1.paragraph.h1,
  .paragraph.h1 {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 8px;
  }

  /* Padding inline standardisé sur sections de contenu.
     max() intègre les safe-areas iPhone en orientation paysage. */
  .section_about,
  .section_partenaires,
  .section_meet_and_connect {
    padding-left: max(var(--space-inline-mobile), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-inline-mobile), env(safe-area-inset-right, 0px));
  }

  .section_afterworks {
    padding-left: max(var(--space-inline-mobile), env(safe-area-inset-left, 0px));
    padding-right: max(var(--space-inline-mobile), env(safe-area-inset-right, 0px));
    overflow-x: hidden;
  }

  /* Articles : forcer 1 colonne (fix débordement +43%) */
  .w-layout-grid.grid {
    grid-template: none !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding-inline: var(--space-inline-mobile);
  }

  .main_card_contain {
    width: 100%;
    min-width: 0;
  }
}

/* Articles : grille tablet (768-1199px) — 2 colonnes pour éviter le débordement
   du grid Webflow d'origine (areas nommées qui forcent 1118px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .w-layout-grid.grid {
    grid-template: none !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px;
    padding-inline: 24px;
    max-width: 100%;
  }

  .main_card_contain {
    width: 100%;
    min-width: 0;
  }

  /* Home : carrousel snap-scroll horizontal pour les events */
  .section_afterworks .events {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 14px;
    padding-inline: var(--space-inline-mobile);
    margin-inline: calc(-1 * var(--space-inline-mobile));
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-inline-mobile);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  .section_afterworks .events::-webkit-scrollbar {
    display: none;
  }

  .section_afterworks .events > * {
    flex: 0 0 82vw;
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  /* Le bouton « Voir plus » du carrousel reste accessible mais en-dehors du flux carrousel */
  .section_afterworks .events .button_div {
    flex: 0 0 60vw;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
  }

  /* Auto-hide bottom-nav (transition pilotée par JS via classe) */
  .bottom-nav {
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .bottom-nav--hidden {
    transform: translateY(110%);
  }
}

/* ============================================================
   Reduced motion : désactive toutes les transitions et animations
   pour les utilisateurs qui ont activé prefers-reduced-motion.
   Couvre bottom-nav, more-sheet et tout le reste.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Mode standalone (PWA installée sur l'écran d'accueil).
   Hook prêt à recevoir des optimisations UX (navbar masquée,
   transitions natives, etc.) selon décisions produit.
   ============================================================ */
@media (display-mode: standalone) {
  /* Empêche la sélection de texte par défaut sur les éléments interactifs
     pour un comportement plus proche d'une app native. */
  .bottom-nav,
  .more-sheet,
  .navbar {
    user-select: none;
    -webkit-user-select: none;
  }
}