/* ============================================================================
   CABINETS REVOLUTION — REFONTE COMPLETE DU MENU DE NAVIGATION
   ----------------------------------------------------------------------------
   Auteur : refonte senior front-end
   But    : remplacer la nav native Zoho (Spark) par une nav custom propre.
            Plus de patches, plus de superposition search/menu, drawer mobile
            stable, mega-menu Boutique en colonne texte (pattern Best Buy B2B).

   Architecture
   ------------
   - 3 zones fixes (logo gauche / nav centre / actions droite)
   - 4 breakpoints :
       <=767  : mobile          -> burger + drawer full-screen
       768-1023: tablet         -> burger + drawer full-screen
       1024-1279: desktop comp. -> nav inline + search collapsible (icone)
       >=1280: desktop complet  -> nav inline + search deployee

   Hierarchie z-index (coherente, pas de 9999 partout)
   ---------------------------------------------------
   - Sticky filters Zoho (Trier|Filtres)  : 50  (heritage)
   - Mega-menu Boutique                    : 100
   - Header sticky                         : 900
   - Drawer mobile + overlay               : 1000
   - Search overlay desktop (collapsible)  : 1100

   Couleurs brand
   --------------
   - Fond                : #000  (--cr-bg)
   - Texte               : #fff  (--cr-text)
   - Accent / hover      : #F0A020 (--cr-accent)
   - Bordure subtile     : rgba(255,255,255,.12) (--cr-border)
============================================================================ */


/* ============================================================================
   1) MASQUAGE DE LA NAV NATIVE ZOHO
   On cache TOUS les conteneurs du header Zoho. La nav custom est injectee
   par le code de pied de page (JS). On garde le panier natif Zoho cache mais
   accessible (data-zs-view-cart) pour pouvoir le declencher.
============================================================================ */
.theme-header,
.theme-mobile-header-top,
.theme-mobile-header-bottom,
.theme-mobile-header-slidewrapper,
.theme-search-field-container-floater,
.theme-mobile-header-search-floater {
  display: none !important;
}

/* On compense le retrait du header natif Zoho : on s'assure que le body
   ne garde pas de padding-top inutile, sauf si on est en sticky (gere par notre header). */
body.cr-nav-loaded { padding-top: 0 !important; }


/* ============================================================================
   2) VARIABLES BRAND
============================================================================ */
:root {
  --cr-bg: #000;
  --cr-bg-elev: #111;
  --cr-text: #fff;
  --cr-text-muted: rgba(255,255,255,.72);
  --cr-accent: #F0A020;
  --cr-border: rgba(255,255,255,.12);
  --cr-border-strong: rgba(255,255,255,.24);

  --cr-header-h: 68px;            /* hauteur header desktop */
  --cr-header-h-mobile: 60px;     /* hauteur header mobile */

  --cr-z-sticky-filters: 50;
  --cr-z-mega: 100;
  --cr-z-header: 900;
  --cr-z-drawer: 1000;
  --cr-z-search-overlay: 1100;

  --cr-easing: cubic-bezier(.2, .8, .2, 1);
}


/* ============================================================================
   3) RESET LOCAL (scope a notre nav)
============================================================================ */
.cr-nav,
.cr-nav *,
.cr-nav *::before,
.cr-nav *::after {
  box-sizing: border-box;
}

.cr-nav button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.cr-nav a {
  color: inherit;
  text-decoration: none;
}

.cr-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ============================================================================
   4) HEADER PRINCIPAL — Layout 3-zones
   Grille : [logo] [nav-centre] [actions]
   - 1280+ : 3 colonnes (auto | 1fr | auto), search deployee dans actions
   - 1024-1279 : 3 colonnes, search collapsible (icone)
   - <1024 : 2 colonnes simplifies (logo | actions) + burger
============================================================================ */
.cr-nav {
  position: sticky;
  top: 0;
  z-index: var(--cr-z-header);
  background: var(--cr-bg);
  color: var(--cr-text);
  border-bottom: 1px solid var(--cr-border);
  -webkit-font-smoothing: antialiased;
}

.cr-nav__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: var(--cr-header-h);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Zone 1 : Logo (gauche) ----- */
.cr-nav__logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.cr-nav__logo img {
  display: block;
  height: 36px;
  width: auto;
}

/* ----- Zone 2 : Nav principale (centre) ----- */
.cr-nav__primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;             /* permet flex-shrink des labels */
}
.cr-nav__primary > li { position: relative; }

.cr-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--cr-header-h);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--cr-text);
  white-space: nowrap;
  transition: color .15s var(--cr-easing);
}
.cr-nav__link:hover,
.cr-nav__link:focus-visible,
.cr-nav__link[aria-expanded="true"] {
  color: var(--cr-accent);
  outline: none;
}
.cr-nav__link[aria-current="page"] {
  color: var(--cr-accent);
}

/* Chevron pour items avec dropdown */
.cr-nav__chevron {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .2s var(--cr-easing);
}
.cr-nav__link[aria-expanded="true"] .cr-nav__chevron {
  transform: rotate(180deg);
}

/* ----- Zone 3 : Actions (droite) ----- */
.cr-nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Search desktop --- */
.cr-nav__search {
  display: flex;
  align-items: center;
}
.cr-nav__search-form {
  display: flex;
  align-items: center;
  background: var(--cr-bg-elev);
  border: 1px solid var(--cr-border);
  border-radius: 999px;
  height: 38px;
  padding: 0 14px;
  width: 240px;
  transition: border-color .15s var(--cr-easing), width .2s var(--cr-easing);
}
.cr-nav__search-form:focus-within {
  border-color: var(--cr-accent);
  width: 280px;
}
.cr-nav__search-form svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  color: var(--cr-text-muted);
  flex-shrink: 0;
}
.cr-nav__search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--cr-text);
  font-size: 14px;
  padding: 0 0 0 8px;
}
.cr-nav__search-input::placeholder { color: var(--cr-text-muted); }

/* --- Bouton icone search (mode collapsible 1024-1279 + mobile) --- */
.cr-nav__search-toggle {
  display: none;            /* visible uniquement < 1280px */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cr-text);
}
.cr-nav__search-toggle:hover { color: var(--cr-accent); }
.cr-nav__search-toggle svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* --- Switch FR | EN --- */
.cr-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 8px;
  border: 1px solid var(--cr-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.cr-nav__lang button {
  padding: 2px 8px;
  border-radius: 999px;
  color: var(--cr-text-muted);
}
.cr-nav__lang button.is-active {
  color: var(--cr-accent);
  font-weight: 700;
}
.cr-nav__lang-sep {
  color: var(--cr-border-strong);
  padding: 0 2px;
  user-select: none;
}

/* --- Panier --- */
.cr-nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cr-text);
}
.cr-nav__cart:hover { color: var(--cr-accent); }
.cr-nav__cart svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.cr-nav__cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--cr-accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: none;            /* gere via JS */
}
.cr-nav__cart-count.is-visible { display: block; }

/* --- Burger (visible <1024) --- */
.cr-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cr-text);
}
.cr-nav__burger:hover { color: var(--cr-accent); }
.cr-nav__burger svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
}


/* ============================================================================
   5) MEGA-MENU BOUTIQUE (desktop >=1024)
   1 colonne texte + lien "Voir tout". Pattern Best Buy B2B / NN/g recommande
   pour catalogues moyens (<10 sous-cats).
============================================================================ */
.cr-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  max-width: 360px;
  background: var(--cr-bg);
  border: 1px solid var(--cr-border);
  border-radius: 8px;
  padding: 12px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .18s var(--cr-easing), transform .18s var(--cr-easing), visibility 0s linear .18s;
  z-index: var(--cr-z-mega);
}
.cr-nav__primary > li.is-open .cr-mega {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity .18s var(--cr-easing), transform .18s var(--cr-easing), visibility 0s linear 0s;
}
.cr-mega__item {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--cr-text);
  transition: background .12s, color .12s;
}
.cr-mega__item:hover,
.cr-mega__item:focus-visible {
  background: var(--cr-bg-elev);
  color: var(--cr-accent);
  outline: none;
}
.cr-mega__divider {
  height: 1px;
  margin: 8px 12px;
  background: var(--cr-border);
}
.cr-mega__see-all {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-accent);
  letter-spacing: .02em;
  text-transform: uppercase;
}


/* ============================================================================
   6) OVERLAY SEARCH (1024-1279 quand on clique icone loupe)
   Une barre qui descend pleine largeur sous le header.
============================================================================ */
.cr-search-overlay {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--cr-bg);
  border-bottom: 1px solid var(--cr-border);
  padding: 16px 24px;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .18s var(--cr-easing), transform .18s var(--cr-easing), visibility 0s linear .18s;
  z-index: var(--cr-z-search-overlay);
}
.cr-nav.is-search-open .cr-search-overlay {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .18s var(--cr-easing), transform .18s var(--cr-easing), visibility 0s linear 0s;
}
.cr-search-overlay__form {
  display: flex;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  background: var(--cr-bg-elev);
  border: 1px solid var(--cr-border);
  border-radius: 999px;
  padding: 0 16px;
  height: 44px;
}
.cr-search-overlay__form:focus-within { border-color: var(--cr-accent); }
.cr-search-overlay__form svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  color: var(--cr-text-muted);
}
.cr-search-overlay__form input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--cr-text);
  font-size: 15px;
  padding: 0 12px;
}
.cr-search-overlay__form input::placeholder { color: var(--cr-text-muted); }


/* ============================================================================
   7) DRAWER MOBILE (full-screen, accordeon)
============================================================================ */
.cr-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s var(--cr-easing), visibility 0s linear .2s;
  z-index: calc(var(--cr-z-drawer) - 1);
}
body.cr-drawer-open .cr-drawer-overlay {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s var(--cr-easing), visibility 0s linear 0s;
}

.cr-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: min(100vw, 380px);
  height: 100vh;
  height: 100dvh;             /* viewport unit moderne, evite saut iOS */
  background: var(--cr-bg);
  color: var(--cr-text);
  z-index: var(--cr-z-drawer);
  transform: translateX(-100%);
  transition: transform .25s var(--cr-easing);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.cr-drawer-open .cr-drawer {
  transform: translateX(0);
}

/* En-tete du drawer (logo + close) */
.cr-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--cr-header-h-mobile);
  padding: 0 16px;
  border-bottom: 1px solid var(--cr-border);
  flex-shrink: 0;
}
.cr-drawer__logo img {
  display: block;
  height: 30px;
  width: auto;
}
.cr-drawer__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cr-text);
  border-radius: 50%;
}
.cr-drawer__close:hover { color: var(--cr-accent); }
.cr-drawer__close svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
}

/* Search dans le drawer */
.cr-drawer__search {
  padding: 16px;
  border-bottom: 1px solid var(--cr-border);
  flex-shrink: 0;
}
.cr-drawer__search-form {
  display: flex;
  align-items: center;
  background: var(--cr-bg-elev);
  border: 1px solid var(--cr-border);
  border-radius: 999px;
  padding: 0 14px;
  height: 42px;
}
.cr-drawer__search-form svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  color: var(--cr-text-muted);
}
.cr-drawer__search-form input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--cr-text); font-size: 14px;
  padding: 0 0 0 10px;
}
.cr-drawer__search-form input::placeholder { color: var(--cr-text-muted); }

/* Liste des items (scrollable) */
.cr-drawer__list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}
.cr-drawer__list > li { border-bottom: 1px solid var(--cr-border); }
.cr-drawer__list > li:last-child { border-bottom: 0; }

.cr-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 500;
  color: var(--cr-text);
  text-align: left;
}
.cr-drawer__item:hover { color: var(--cr-accent); }
.cr-drawer__item .cr-nav__chevron {
  width: 12px; height: 12px;
}

/* Sous-liste accordeon */
.cr-drawer__sub {
  max-height: 0;
  overflow: hidden;
  background: var(--cr-bg-elev);
  transition: max-height .25s var(--cr-easing);
}
.cr-drawer__list > li.is-open .cr-drawer__sub {
  max-height: 600px;        /* large mais borne, pas auto pour animer */
}
.cr-drawer__list > li.is-open > .cr-drawer__item .cr-nav__chevron {
  transform: rotate(180deg);
}
.cr-drawer__sub a {
  display: block;
  padding: 12px 20px 12px 36px;
  font-size: 15px;
  color: var(--cr-text);
  border-top: 1px solid var(--cr-border);
}
.cr-drawer__sub a:hover { color: var(--cr-accent); }

/* Pied du drawer : Lang + panier */
.cr-drawer__footer {
  flex-shrink: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--cr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cr-drawer__footer .cr-nav__lang { background: var(--cr-bg-elev); }


/* ============================================================================
   8) FOCUS VISIBLE (accessibilite)
============================================================================ */
.cr-nav a:focus-visible,
.cr-nav button:focus-visible {
  outline: 2px solid var(--cr-accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ============================================================================
   9) RESPONSIVE — 4 breakpoints
============================================================================ */

/* ----- >=1280 : Desktop complet (search deployee) ----- */
/* (etat par defaut, rien a changer) */

/* ----- 1024-1279 : Desktop intermediaire (search collapsible) ----- */
@media (max-width: 1279px) {
  .cr-nav__search-form { display: none; }     /* on cache la barre */
  .cr-nav__search-toggle { display: inline-flex; }  /* on affiche l'icone */
  .cr-nav__bar { gap: 16px; padding: 0 20px; }
  .cr-nav__link { padding: 0 10px; font-size: 14px; }
}

/* ----- 768-1023 : Tablet (burger) ----- */
@media (max-width: 1023px) {
  .cr-nav__primary { display: none; }
  .cr-nav__search { display: none; }
  .cr-nav__search-toggle { display: none; }
  .cr-nav__lang { display: none; }            /* on le met dans le drawer */
  .cr-nav__burger { display: inline-flex; }
  .cr-nav__bar {
    grid-template-columns: auto 1fr auto;
    height: var(--cr-header-h-mobile);
  }
  .cr-nav__logo { grid-column: 2; justify-self: center; }
  .cr-nav__burger { grid-column: 1; }
  .cr-nav__actions { grid-column: 3; }
  .cr-nav__logo img { height: 30px; }
}

/* ----- <=767 : Mobile ----- */
@media (max-width: 767px) {
  .cr-nav__bar { padding: 0 12px; gap: 8px; }
}


/* ============================================================================
   10) BODY SCROLL LOCK quand drawer ouvert
   On verrouille body et html. position:fixed est plus robuste sur iOS que
   overflow:hidden (qui peut laisser scroller).
============================================================================ */
body.cr-drawer-open {
  overflow: hidden;
  /* le decalage scrollTop est gere en JS via top: -Npx */
}


/* ============================================================================
   11) CORRECTIFS LIES AU MENU NATIF DEJA SUPPRIME
   Si Zoho re-injecte un sticky filters apres notre header, on s'assure que
   nous on a un z-index plus haut (deja le cas avec --cr-z-header=900).
   Pas besoin de overrider .theme-collections-filter-bar.
============================================================================ */

/* fin du fichier */