/* ============================================================================
   Rouge Hexagone — Header V3 (refonte graphique)
   Re-skin du header existant (markup header.php + logique header.js inchangés).
   Cible les classes existantes : .rh-header / .rh-nav-item / .rh-mega-menu …
   Tokens : --rhv3-* (définis dans v3.css, chargé avant).
   Desktop : ouverture via :hover ET [aria-expanded="true"] (posé par header.js).
   Mobile (<=992px) : ouverture via classe .active (posée par header.js).
   ========================================================================== */

:root{
  --rh-font-family:"Plus Jakarta Sans", sans-serif;
  --rh-header-height:64px;
}

.rh-header *{ box-sizing:border-box; }

/* ------------------------------------------------------------------ Barre */
.rh-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rhv3-line);
  font-family:var(--rh-font-family);
}
.rh-header-container{
  max-width:1200px; margin:0 auto;
  padding:12px clamp(18px,4vw,40px);
  display:flex; align-items:center; gap:20px;
}
.rh-header-logo{ flex:0 0 auto; display:flex; }
.rh-header-logo a{ display:flex; align-items:center; }
.rh-header-logo img{ height:38px; width:auto; display:block; }

/* --------------------------------------------------------- Nav (desktop) */
.rh-header-nav{ display:flex; align-items:center; }
.rh-nav-menu{
  display:flex; align-items:center; gap:26px;
  margin:0 0 0 18px; padding:0; list-style:none;
  font-size:15px; font-weight:600;
}
.rh-nav-item{ position:relative; }
.rh-nav-item > a,
.rh-nav-item > .rh-mega-menu-toggle{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 0; color:var(--rhv3-ink);
  background:none; border:0; cursor:pointer;
  font:inherit; text-decoration:none;
  transition:color .15s;
}
.rh-nav-item > a:hover,
.rh-nav-item > .rh-mega-menu-toggle:hover,
.rh-nav-item:hover > a,
.rh-nav-item:hover > .rh-mega-menu-toggle{ color:var(--rhv3-violet); }

/* Chevron sur les items à sous-menu / mega */
.rh-has-dropdown > .rh-dropdown-toggle,
.rh-has-mega-menu > .rh-mega-menu-toggle{ position:relative; }
.rh-dropdown-toggle{
  width:18px; height:18px; padding:0; margin-left:2px;
  background:none; border:0; cursor:pointer; color:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
.rh-has-dropdown > .rh-dropdown-toggle::after,
.rh-has-mega-menu > .rh-mega-menu-toggle::after{
  content:""; width:9px; height:9px; margin-left:5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s;
}
.rh-nav-item:hover .rh-dropdown-toggle::after,
.rh-nav-item:hover .rh-mega-menu-toggle::after{ transform:rotate(-135deg) translateY(0); }
/* neutralise le fond rose/rouge par défaut de style.css (button:hover/focus) sur les toggles nav */
.rh-dropdown-toggle:hover, .rh-dropdown-toggle:focus,
.rh-mega-menu-toggle:hover, .rh-mega-menu-toggle:focus{ background:none; color:var(--rhv3-violet); }

/* ---------------------------------------------------------- Dropdown menu */
.rh-dropdown-menu{
  position:absolute; top:100%; left:0;
  min-width:220px; margin:0; padding:8px; list-style:none;
  background:#fff; border:1px solid var(--rhv3-line); border-radius:14px;
  box-shadow:var(--rhv3-shadow);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s, visibility .18s, transform .18s; z-index:60;
}
.rh-nav-item:hover > .rh-dropdown-menu,
.rh-dropdown-toggle[aria-expanded="true"] ~ .rh-dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.rh-dropdown-menu .rh-nav-item{ display:block; }
.rh-dropdown-menu .rh-nav-item > a{
  display:block; padding:9px 12px; border-radius:9px;
  font-size:14.5px; font-weight:600; color:var(--rhv3-ink);
}
.rh-dropdown-menu .rh-nav-item > a:hover{ background:var(--rhv3-lav); color:var(--rhv3-violet); }

/* ------------------------------------------------------------- Mega menu */
.rh-mega-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
  width:min(980px,94vw); padding-top:14px; z-index:60;
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s, transform .2s;
}
.rh-nav-item:hover > .rh-mega-menu,
.rh-mega-menu-toggle[aria-expanded="true"] ~ .rh-mega-menu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.rh-mega-menu-container{
  background:#fff; border:1px solid var(--rhv3-line); border-radius:16px;
  box-shadow:var(--rhv3-shadow); padding:24px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
/* Pied du méga-menu : lien vers la page hub « Nos services » */
.rh-mega-menu-footer{ grid-column:1 / -1; margin-top:6px; padding-top:16px; border-top:1px solid var(--rhv3-line); display:flex; justify-content:flex-end; }
.rh-mega-menu-all{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:var(--rhv3-violet); text-decoration:none;
  padding:9px 16px; border-radius:999px; border:1.5px solid var(--rhv3-line); transition:border-color .15s, background .15s;
}
.rh-mega-menu-all:hover{ border-color:var(--rhv3-violet); background:var(--rhv3-lav); }
.rh-mega-menu-all svg{ transition:transform .2s; }
.rh-mega-menu-all:hover svg{ transform:translateX(3px); }
.rh-mega-menu-column{ display:flex; flex-direction:column; gap:14px; }
.rh-mega-menu-column .submenu-title{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--rhv3-orange); margin:6px 0 2px;
}

.rh-mega-menu-column ul{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:2px; }
.rh-mega-menu-column ul li a{
  display:block; padding:6px 8px; border-radius:8px;
  font-size:13.5px; font-weight:600; line-height:1.35;
  color:var(--rhv3-ink); text-decoration:none;
}
.rh-mega-menu-column ul li a:hover{ background:var(--rhv3-lav); color:var(--rhv3-violet); }


/* --------------------------------------------------------------- Actions */
.rh-header-actions{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.rh-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:14px; text-decoration:none; line-height:1;
  border-radius:999px; transition:background .15s, color .15s, border-color .15s;
}
.rh-btn-phone{ color:var(--rhv3-ink); }
.rh-btn-phone:hover{ color:var(--rhv3-violet); }
.rh-btn-phone svg{ width:16px; height:16px; }
.rh-btn-primary{
  background:var(--rhv3-violet); color:#fff;
  padding:11px 20px; box-shadow:var(--rhv3-shadow-sm);
}
.rh-btn-primary:hover{ background:var(--rhv3-violet-deep); color:#fff; }

/* ---------------------------------------------------------- Burger (mobile) */
.rh-mobile-menu-toggle{
  display:none; margin-left:auto; align-items:center; gap:8px;
  width:auto; height:42px; padding:0 14px;
  border:1px solid var(--rhv3-line); border-radius:12px; background:#fff;
  color:var(--rhv3-ink); cursor:pointer; font:inherit; font-weight:700; font-size:13px;
}
.rh-menu-icon{ display:inline-flex; flex-direction:column; gap:4px; }
.rh-menu-icon span{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:.2s; }
.rh-mobile-menu-toggle[aria-expanded="true"] .rh-menu-icon span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.rh-mobile-menu-toggle[aria-expanded="true"] .rh-menu-icon span:nth-child(2){ opacity:0; }
.rh-mobile-menu-toggle[aria-expanded="true"] .rh-menu-icon span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* =============================================================== Responsive */
@media (max-width:992px){
  .rh-mobile-menu-toggle{ display:inline-flex; }
  .rh-header-actions{ display:none; }

  /* IMPORTANT : sans backdrop-filter le header ne crée plus de bloc conteneur
     pour le tiroir position:fixed → il s'ancre au viewport (pleine hauteur). */
  #site-header.rh-header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:#fff !important; }

  /* Tiroir mobile (!important pour battre les règles #site-header de blocks.css) */
  #site-header .rh-header-nav{
    position:fixed !important; top:var(--rh-header-height) !important; right:0 !important;
    bottom:0 !important; left:auto !important;
    width:min(360px,86vw) !important; max-width:86vw !important; height:auto !important;
    display:block !important; background:#fff !important;
    border-left:1px solid var(--rhv3-line);
    box-shadow:var(--rhv3-shadow);
    transform:translateX(100%); transition:transform .25s ease;
    overflow-y:auto; padding:14px clamp(16px,4vw,24px); z-index:55 !important;
  }
  #site-header .rh-header-nav.active{ transform:translateX(0) !important; }
  /* S'assurer que la liste s'affiche en colonne pleine dans le tiroir */
  #site-header .rh-header-nav .rh-nav-menu{
    display:flex !important; flex-direction:column !important; align-items:stretch !important;
    width:100% !important; max-width:100%; gap:2px; margin:0 !important; padding:0 !important;
  }
  .rh-nav-menu{ flex-direction:column; align-items:stretch; gap:2px; margin:0; }
  .rh-nav-item{ width:100%; max-width:100%; border-bottom:1px solid var(--rhv3-lav-2); }
  .rh-nav-item > a,
  .rh-nav-item > .rh-mega-menu-toggle{
    width:100%; max-width:100%; min-height:48px;
    padding:13px 0; justify-content:space-between;
  }
  .rh-has-dropdown{ position:relative; }
  .rh-has-dropdown > a{ padding-right:48px; }
  .rh-has-dropdown > .rh-dropdown-toggle{
    position:absolute; top:0; right:0;
    width:44px; height:48px; margin:0; padding:0;
  }
  .rh-has-mega-menu > .rh-mega-menu-toggle::after{
    margin-left:auto;
  }

  /* Sous-menus & mega : repliés, ouverts via .active */
  .rh-dropdown-menu, .rh-mega-menu{
    position:static; width:100%; max-width:none; min-width:0; box-shadow:none;
    display:block; max-height:0; overflow:hidden;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    border:0; padding:0 0 0 12px; background:transparent;
    transition:
      max-height .34s ease,
      opacity .22s ease,
      transform .22s ease,
      padding .22s ease,
      visibility 0s linear .34s;
  }
  .rh-dropdown-menu.active, .rh-mega-menu.active{
    max-height:80vh; opacity:1; visibility:visible; transform:none;
    padding-bottom:8px;
    transition:
      max-height .34s ease,
      opacity .22s ease,
      transform .22s ease,
      padding .22s ease,
      visibility 0s;
  }
  .rh-mega-menu{
    left:auto; top:auto; margin:0; padding-left:0;
  }
  .rh-mega-menu.active{
    padding-bottom:12px;
  }
  .rh-nav-item:hover > .rh-mega-menu,
  .rh-mega-menu-toggle[aria-expanded="true"] ~ .rh-mega-menu{
    transform:none;
  }
  .rh-mega-menu-container{
    display:flex; flex-direction:column; gap:12px;
    width:100%; padding:8px 0 0; border:0; border-radius:0; box-shadow:none;
    background:transparent;
  }
  .rh-mega-menu-column{ gap:8px; margin:0; }
  .rh-mega-menu-column .submenu-title{
    margin:8px 0 4px; font-size:11px; line-height:1.35;
  }
  .rh-mega-menu-column ul{ gap:0; margin:0; }
  .rh-mega-menu-column ul li a{
    padding:9px 8px; border-radius:8px; font-size:14px; line-height:1.35;
  }
  .rh-mega-menu-footer{
    margin-top:2px; padding-top:12px; justify-content:stretch;
  }
  .rh-mega-menu-all{
    width:100%; justify-content:space-between; border-radius:10px;
    padding:11px 12px; font-size:14px;
  }
  .rh-has-dropdown > .rh-dropdown-toggle::after,
  .rh-has-mega-menu > .rh-mega-menu-toggle::after{ transform:rotate(45deg); }
  .rh-dropdown-toggle[aria-expanded="true"]::after,
  .rh-mega-menu-toggle[aria-expanded="true"]::after{ transform:rotate(-135deg); }

  /* Actions clonées dans le tiroir */
  .rh-dropdown-menu .rh-nav-item{ border-bottom:0; }
  .rh-dropdown-menu .rh-nav-item > a{
    padding:9px 8px; border-radius:8px; font-size:14px; line-height:1.35;
  }

  @media (prefers-reduced-motion:reduce){
    .rh-dropdown-menu, .rh-mega-menu,
    .rh-dropdown-menu.active, .rh-mega-menu.active{
      transition:none;
    }
  }

  .rh-header-actions.mobile-visible{
    display:flex; flex-direction:column; align-items:stretch; gap:10px;
    margin:14px 0 0; padding-top:14px; border-top:1px solid var(--rhv3-lav-2);
  }
  .rh-header-actions.mobile-visible .rh-btn{ justify-content:center; padding:13px; font-size:15px; }
  .rh-header-actions.mobile-visible .rh-btn-phone{ border:1px solid var(--rhv3-line); }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}