/* ==========================================================================
   Header — Desktop + Mega Menu + Mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */
:root {
  --color-primary:    #025253;
  --color-accent:     #21b593;
  --color-dark:       #003c3d;
  --color-white:      #ffffff;
  --color-bg-light:   #f7f9f8;
  --color-border:     rgba(0, 0, 0, 0.1);
  --header-height:    107px;
  --header-height-mobile: 73px;
  --mega-panel-width: 493px;
  --mobile-panel-max: 394px;
}

/* --------------------------------------------------------------------------
   Site Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}

/* Barre d'admin WordPress — décale le header et le mega menu (32px desktop) */
.admin-bar .site-header {
  top: 32px;
}

.admin-bar .mega-menu {
  top: calc(var(--header-height) + 32px);
}

/* Barre d'admin en mobile (46px en dessous de 782px) */
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 184px;
  height: 100%;
  gap: 32px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.site-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo__img {
  height: 48px;
  width: auto;
  display: block;
}

.site-logo__text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   Desktop Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  height: 100%;
}

.site-nav__list {
  display: flex;
  align-items: stretch; /* items s'étirent sur toute la hauteur du header */
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  height: 100%;
}

/* Nav item — pleine hauteur pour que le hover soit actif jusqu'au bord bas */
.nav-item {
  display: flex;
  align-items: center;
  list-style: none;
  position: relative;
}

.nav-item__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 100%;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, font-weight 0.2s;
  cursor: pointer;
}

.nav-item__link:hover,
.nav-item.has-mega-menu:hover > .nav-item__link,
.nav-item.is-open > .nav-item__link {
  font-weight: 600;
  color: var(--color-dark);
}

.nav-item__link.is-active {
  font-weight: 600;
}

/* Pont invisible qui comble l'espace entre le header et le mega menu */
.nav-item.has-mega-menu::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px; /* couvre tout espace résiduel */
  pointer-events: none;
}

.nav-item.has-mega-menu.is-open::after,
.nav-item.has-mega-menu.is-closing::after {
  pointer-events: auto;
}

.nav-chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--color-dark);
}

.nav-item.is-open > .nav-item__link .nav-chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Desktop Actions
   -------------------------------------------------------------------------- */
.site-header__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Lang switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--color-dark);
}

.lang-switcher__current {
  font-weight: 700;
}

.lang-switcher__sep {
  opacity: 0.4;
}

.lang-switcher__alt {
  color: var(--color-dark);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lang-switcher__alt:hover {
  opacity: 1;
}

/* Bouton Nous contacter — même logique que hero-btn--primary, couleurs inversées */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  background-color: var(--color-primary);   /* #025253 — inversé vs hero (#21b593) */
  color: var(--color-white);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
  text-decoration: none;
  border-radius: 40px;
  border: 2px solid transparent;
  height: 50px;
  /* Largeur fixe : le bouton ne bouge jamais de taille */
  width: 206px;
  flex-shrink: 0;
  white-space: nowrap;
  /* Padding : left=30px, right=10px. Au hover left→20px, ce qui libère 10px
     compensé par margin-right: 10px sur le label → déplacement purement interne */
  padding: 0 10px 0 30px;
  transition: padding 0.3s ease;
  cursor: pointer;
}

/* Zone icône */
.btn-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 30px;
  background-color: transparent;
  flex-shrink: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
  color: #d4f7a5;
}

/* Label */
.btn-contact__label {
  line-height: 1;
  margin-right: 0;
  transition: margin-right 0.3s ease;
}

/* Hover : padding-left réduit de 10px → libère de l'espace pour le label */
.btn-contact:hover,
.btn-contact:focus-visible {
  padding-left: 20px;
  color: var(--color-white);
}

/* Hover : label prend les 10px libérés → se décale visuellement vers la droite */
.btn-contact:hover .btn-contact__label,
.btn-contact:focus-visible .btn-contact__label {
  margin-right: 10px;
}

/* Hover : icône tourne et prend la couleur accent inversée */
.btn-contact:hover .btn-contact__icon,
.btn-contact:focus-visible .btn-contact__icon {
  background-color: #21b593;
  transform: rotate(45deg);
}

.btn-contact__arrow {
  flex-shrink: 0;
}

/* Hamburger — masqué desktop */
.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.hamburger__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   Mega Menu
   -------------------------------------------------------------------------- */

/* Masquer tout sous-menu <ul> fallback dans la nav desktop */
.site-nav .nav-item > ul {
  display: none !important;
}

/* Animation d'entrée — dévoilement de haut en bas */
@keyframes megaMenuReveal {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0% 0);
  }
}

/* Fade-in du contenu interne, légèrement décalé */
@keyframes megaMenuContentFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animation fermeture — dévoilement de bas en haut */
@keyframes megaMenuHide {
  from { clip-path: inset(0 0 0% 0); }
  to   { clip-path: inset(0 0 100% 0); }
}

@keyframes megaMenuContentFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.mega-menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  width: 100vw;
  background: var(--color-white);
  border-bottom: 1px solid #d0d6d2;
  display: none;
  z-index: 199;
  overflow: hidden;
}

/* Ouverture — géré exclusivement par JS (.is-open) */
.nav-item.has-mega-menu.is-open > .mega-menu {
  display: grid;
  grid-template-columns: var(--mega-panel-width) 1fr;
  grid-template-rows: 1fr auto;
  animation: megaMenuReveal 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nav-item.has-mega-menu.is-open > .mega-menu > * {
  animation: megaMenuContentFade 0.3s ease 0.08s both;
}

/* Fermeture — menu encore visible, animation inverse */
.nav-item.has-mega-menu.is-closing > .mega-menu {
  display: grid;
  grid-template-columns: var(--mega-panel-width) 1fr;
  grid-template-rows: 1fr auto;
  animation: megaMenuHide 0.26s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.nav-item.has-mega-menu.is-closing > .mega-menu > * {
  animation: megaMenuContentFadeOut 0.15s ease forwards;
}

/* Panneau gauche — colonne 1, s'étend sur les 2 lignes */
.mega-menu__panel {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  background-color: var(--color-accent);
  display: flex;
  align-items: flex-start;
  padding: 89px 68px;
  overflow: hidden;
  min-height: 420px;
}

/* Contenu droite — colonne 2, ligne 1 */
.mega-menu__content {
  grid-column: 2;
  grid-row: 1;
}

/* Barre CTA — colonne 2, ligne 2 */
.mega-menu__cta-bar {
  grid-column: 2;
  grid-row: 2;
}

.mega-menu__panel-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mega-menu__panel-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 23px;
  color: var(--color-white);
  margin: 0;
  line-height: 1.3;
}

.mega-menu__panel-body {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: var(--color-white);
  margin: 0;
  line-height: 1.6;
}

.mega-menu__panel-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0;
  transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.mega-menu__panel-link:hover {
  color: #d4f7a5;
  letter-spacing: 0.02em;
}

/* Forme décorative dans le panneau */
/* Forme décorative du panneau gauche */
.mega-menu__panel-deco {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 441px;
  height: 332px;
  background-image: url('../img/mega-menu-bg.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  z-index: 1;
  pointer-events: none;
}

/* Contenu droite du mega menu */
.mega-menu__content {
  flex: 1;
  padding: 56px 80px;
  overflow: hidden;
}

.mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------- Solutions : groupes de liens ------- */
.mega-menu__list--solutions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}

.mega-link-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.mega-link-group__title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-primary);
  text-decoration: none;
  display: block;
  transition: opacity 0.2s;
}

.mega-link-group__title:hover {
  opacity: 0.8;
}

.mega-link-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mega-sub-link {
  list-style: none;
}

.mega-sub-link__anchor {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgba(2, 82, 83, 0.8);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
}

.mega-sub-link__anchor:hover {
  color: var(--color-primary);
}

/* ------- Sectors : cartes ------- */
.mega-menu__list--sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.mega-sector-item {
  list-style: none;
}

.mega-sector-card {
  display: flex;
  align-items: stretch;
  border-radius: 7px;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.2s;
  border: 1px solid transparent;
}

.mega-sector-card:hover {
  background-color: rgba(250, 250, 250, 1);
  border-color: var(--color-border);
}

.mega-sector-card__accent {
  width: 6px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.mega-sector-card:hover .mega-sector-card__accent {
  opacity: 1;
}

.mega-sector-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 50px 20px 20px;
  flex: 1;
}

.mega-sector-card__title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-dark);
  display: block;
}

.mega-sector-card__desc {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  display: block;
}

.mega-sector-card__arrow {
  display: flex;
  align-items: center;
  padding-right: 20px;
  color: rgba(0, 60, 61, 0.35);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.mega-sector-card:hover .mega-sector-card__arrow {
  color: #003C3D;
}

/* ------- Barre CTA bas du mega menu ------- */
.mega-menu__cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-bg-light);
  padding: 20px 80px;
  gap: 24px;
}

.mega-menu__cta-text {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-dark);
  margin: 0;
}

.mega-menu__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.mega-menu__cta-link:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Mobile Overlay
   -------------------------------------------------------------------------- */
.site-header__mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 299;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.site-header__mobile-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Mobile Panel
   -------------------------------------------------------------------------- */
.site-header__mobile-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: var(--mobile-panel-max);
  height: 100vh;
  background: var(--color-white);
  z-index: 300;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.site-header__mobile-panel.is-open {
  transform: translateX(0);
}

/* Mobile panel header */
.mobile-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.mobile-panel__close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Mobile panel body */
.mobile-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   Mobile Navigation
   -------------------------------------------------------------------------- */
.mobile-nav {
  flex: 1;
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__item {
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  min-height: 56px;
}

.mobile-nav__link {
  flex: 1;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 16px 0;
  transition: color 0.2s;
}

.mobile-nav__item.is-open > .mobile-nav__row > .mobile-nav__link {
  color: var(--color-accent);
}

.mobile-nav__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  border-radius: 4px;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.mobile-nav__toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.mobile-nav__toggle .mobile-chevron {
  transition: transform 0.3s ease;
  color: var(--color-dark);
}

.mobile-nav__item.is-open > .mobile-nav__row > .mobile-nav__toggle .mobile-chevron {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Sous-menu accordéon */
.mobile-nav__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-nav__submenu[hidden] {
  display: block !important; /* override hidden pour l'animation CSS */
  max-height: 0 !important;
}

.mobile-nav__submenu-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 16px 0;
}

/* --------------------------------------------------------------------------
   Mobile sous-items — Solutions
   -------------------------------------------------------------------------- */
.mobile-sub-item {
  list-style: none;
}

.mobile-sub-item__link {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-dark);
  text-decoration: none;
  padding: 10px 24px;
  transition: color 0.2s;
}

.mobile-sub-item__link:hover {
  color: var(--color-accent);
}

.mobile-sub-group {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 0;
}

.mobile-sub-link {
  list-style: none;
}

.mobile-sub-link__anchor {
  display: block;
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: rgba(0, 60, 61, 0.75);
  text-decoration: none;
  padding: 8px 24px 8px 36px;
  transition: color 0.2s;
}

.mobile-sub-link__anchor:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Mobile sous-items — Sectors
   -------------------------------------------------------------------------- */
.mobile-sector-item {
  list-style: none;
  padding: 8px 16px;
}

.mobile-sector-card {
  display: flex;
  align-items: stretch;
  background: #fafafa;
  border: 0.637px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.2s;
}

.mobile-sector-card:hover {
  background-color: #f0f5f4;
}

.mobile-sector-card__accent {
  width: 6px;
  flex-shrink: 0;
  border-radius: 7px 0 0 7px;
}

.mobile-sector-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  flex: 1;
}

.mobile-sector-card__title {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-dark);
  display: block;
}

.mobile-sector-card__desc {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  display: block;
}

/* --------------------------------------------------------------------------
   Mobile Panel Footer
   -------------------------------------------------------------------------- */
.mobile-panel__footer {
  padding: 24px 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.mobile-panel__lang {
  justify-content: center;
  margin-bottom: 4px;
}

/* CTAs footer */
.mobile-panel__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 50px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  text-align: center;
}

.mobile-panel__cta--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.mobile-panel__cta--primary:hover {
  background-color: #013f40;
  color: var(--color-white);
}

.mobile-panel__cta--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.mobile-panel__cta--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Promo box */
.mobile-panel__promo {
  background-color: var(--color-bg-light);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.mobile-panel__promo-text {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.5;
}

.mobile-panel__promo-link {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.2s;
}

.mobile-panel__promo-link:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Responsive — Desktop / Mobile breakpoints
   -------------------------------------------------------------------------- */

/* ── ≤ 1415px : bascule en version mobile ── */
@media (max-width: 1415px) {
  .site-header {
    height: var(--header-height-mobile);
  }

  .site-header__inner {
    padding: 0 24px;
    gap: 16px;
  }

  .site-nav {
    display: none;
  }

  .site-header__actions {
    display: none;
  }

  .site-header__hamburger {
    display: flex;
  }
}

/* ── ≥ 1416px : version desktop (masquer hamburger + panneau mobile) ── */
@media (min-width: 1416px) {
  .site-header__hamburger {
    display: none;
  }

  .site-header__mobile-panel,
  .site-header__mobile-overlay {
    display: none !important;
  }
}

/* ── 1416–1600px : réduire le padding de la barre ── */
@media (min-width: 1416px) and (max-width: 1600px) {
  .site-header__inner {
    padding: 0 25px;
  }

  .mega-menu__cta-bar {
    padding: 20px 25px;
  }

  .mega-menu__content {
    padding: 56px 40px;
  }
}

/* ── 1416–1460px : supprimer le gap entre les entrées de menu ── */
@media (min-width: 1416px) and (max-width: 1460px) {
  .site-nav__list {
    gap: 0;
  }
}