/* ============================================
   COMMON STYLES - Menu sticky & corrections mobiles
   ============================================ */

/* NOTE: Les styles de débordement sont dans les media queries mobile
   pour ne pas casser le position: sticky sur desktop */

/* ============================================
   MENU STICKY - Style glassmorphism unifié
   ============================================ */

/* Cacher l'effet liquid glass original */
.menu-form-sticky #draggableButton {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Fix flash de background au chargement - pas de background tant que menu n'est pas sticky */
.navbar-logo-left:not(.menu-form-sticky) .navbar-brand {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Position du menu sticky - marge en haut et a gauche */
.menu-form-sticky {
  top: 20px !important;
  left: 20px !important;
  margin-left: 0 !important;
  transform: none !important;
}

/* Reset des containers en sticky pour alignement */
.menu-form-sticky .navbar-logo-left-container {
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  background: transparent !important;
}

.menu-form-sticky .container-nav {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* Fond du S plié - liquid glass iOS */
.menu-form-sticky:not(.menu-isopen) .navbar-brand {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%),
    rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(20px) saturate(200%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  border-left-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
  border-radius: 50% !important;
}

/* Fond du menu déplié - liquid glass iOS sur navbar-wrapper */
.menu-form-sticky.menu-isopen .navbar-wrapper {
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%),
    rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(20px) saturate(200%) brightness(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  border-left-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
  border-radius: 999px !important;
  max-width: calc(100vw - 40px) !important;
}

/* Retirer le fond du S quand menu ouvert (le wrapper a deja le fond) */
.menu-form-sticky.menu-isopen .navbar-brand {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Couleurs du S et typo - LIGHT */
.menu-form-sticky[color-mode="light"] .navbar-brand img {
  filter: brightness(0) invert(1) !important;
}
.menu-form-sticky[color-mode="light"] .nav-link {
  color: #ffffff !important;
}
.menu-form-sticky[color-mode="light"] .nav-link:hover {
  border-color: #ffffff !important;
}

/* Couleurs du S et typo - DARK */
.menu-form-sticky[color-mode="dark"] .navbar-brand img {
  filter: brightness(0) invert(0) !important;
}
.menu-form-sticky[color-mode="dark"] .nav-link {
  color: #000000 !important;
}
.menu-form-sticky[color-mode="dark"] .nav-link:hover {
  border-color: #000000 !important;
}

/* ============================================
   LIENS ACTIFS - Page en cours soulignée
   ============================================ */
.nav-link.w--current,
.nav-link.active {
  border-bottom: 1px solid currentColor !important;
}

/* Liens actifs en mode light (menu sticky) */
.menu-form-sticky[color-mode="light"] .nav-link.w--current,
.menu-form-sticky[color-mode="light"] .nav-link.active {
  border-bottom-color: #ffffff !important;
}

/* Liens actifs en mode dark (menu sticky) */
.menu-form-sticky[color-mode="dark"] .nav-link.w--current,
.menu-form-sticky[color-mode="dark"] .nav-link.active {
  border-bottom-color: #000000 !important;
}

/* ============================================
   MENU STICKY MOBILE - Pas d'effet glassmorphism
   ============================================ */
@media screen and (max-width: 991px) {
  /* FIX DÉBORDEMENT - Mobile uniquement */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative;
    width: 100%;
  }

  /* Reset position sticky pour mobile */
  .menu-form-sticky {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  /* Pas de fond glassmorphism sur le S en mobile */
  .menu-form-sticky:not(.menu-isopen) .navbar-brand {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Container prend toute la largeur */
  .menu-form-sticky .navbar-logo-left-container {
    width: 100% !important;
    padding: 15px 20px !important;
  }

  .menu-form-sticky .container-nav {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Navbar wrapper en flex pour aligner logo et burger */
  .menu-form-sticky .navbar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Burger menu toujours a droite, position fixe */
  .menu-form-sticky .mobile-menu-toggle {
    position: relative !important;
    right: auto !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Logo a gauche */
  .menu-form-sticky .navbar-brand {
    position: relative !important;
    left: auto !important;
    margin-right: auto !important;
  }

  /* ============================================
     NAVBAR INITIALE (non sticky) - MOBILE
     ============================================ */
  .navbar-logo-left {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 15px 20px !important;
  }

  .navbar-logo-left .navbar-logo-left-container {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .navbar-logo-left .container-nav {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .navbar-logo-left .navbar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .navbar-logo-left .navbar-brand {
    width: auto !important;
    height: 28px !important;
  }

  .navbar-logo-left .navbar-brand img {
    width: auto !important;
    height: 28px !important;
  }

  /* Burger couleur selon mode */
  .navbar-logo-left[color-mode="light"] .mobile-menu-toggle {
    color: #ffffff !important;
  }

  .navbar-logo-left[color-mode="dark"] .mobile-menu-toggle {
    color: #000000 !important;
  }

  /* Logo couleur selon mode */
  .navbar-logo-left[color-mode="light"] .navbar-brand img {
    filter: brightness(0) invert(1) !important;
  }

  .navbar-logo-left[color-mode="dark"] .navbar-brand img {
    filter: brightness(0) invert(0) !important;
  }

  /* ============================================
     FIX DÉBORDEMENT MOBILE
     ============================================ */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  .page-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Tous les conteneurs principaux */
  section,
  .section,
  .container,
  .container-large,
  .container-medium,
  .container-medium-1,
  .w-container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ============================================
   STYLES COMMUNS MOBILES
   ============================================ */

/* Smooth scrolling */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* Selection text */
::selection {
  background-color: #000000;
  color: #ffffff;
}

/* Page wrapper */
.page-wrapper {
  overflow: clip;
}

/* Reveal text animation */
.reveal-text {
  overflow: hidden;
}

/* Fix z-index pour que le bouton soit cliquable */
.footer-contact .div-block-17 {
  position: relative;
  z-index: 2;
}

.footer-contact .div-block-45 {
  z-index: 1;
}

/* ============================================
   BANDEAU RESEAUX SOCIAUX MOBILE
   ============================================ */
@media screen and (max-width: 991px) {
  .rs-content.pos-abs {
    position: relative !important;
    inset: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
    padding: 2rem 0 !important;
    margin-bottom: 2rem !important;
  }

  .rs-content .titre-rs h3.heading {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .rs-lien-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  .rs-lien-footer .titre-rs {
    padding-right: 0 !important;
  }

  .rs-lien-footer .titre-rs::after {
    display: inline-block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: 0.5rem !important;
    width: 14px !important;
    height: 12px !important;
    background-size: contain !important;
  }

  .rs-lien-footer .titre-rs a {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    margin-bottom: 0.25rem !important;
  }
}

@media screen and (max-width: 479px) {
  .mise-en-avant-img img {
    height: 100% !important;
  }
  .rs-content.pos-abs {
    padding: 1.5rem 0 !important;
    gap: 1rem !important;
  }

  .rs-content .titre-rs h3.heading {
    font-size: 1.25rem !important;
  }

  .rs-lien-footer {
    gap: 0.5rem !important;
  }

  .rs-lien-footer .titre-rs a {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  .rs-lien-footer .titre-rs::after {
    width: 12px !important;
    height: 10px !important;
    margin-left: 0.4rem !important;
  }
  .image-5 {
    width: 100px !important;
    height: auto !important;
  }
}

/* ============================================
   FOOTER STYLES
   ============================================ */
.rs-lien-footer .titre-rs {
  position: relative;
  padding: 0 1.5rem 0 0;
}

.rs-lien-footer .titre-rs::after {
  content: "";
  background-image: url(https://cdn.prod.website-files.com/692032b85b5c5bf0694113c5/695cf076b502ce2bccb6504f_arroxpng.png);
  width: 20px;
  height: 17px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============================================
   BLOC VALEURS (CARRIERE) - Style RSEponsables
   ============================================ */

/* Chiffres en BLEU pour les valeurs (au lieu du vert RSE) */
.valeurs .rsepnsables-chiffre.valeur-chiffre {
  color: #2196F3 !important;
}