/* =========================================================
   PCR Énergie — HEADER (header/nav/offcanvas + sous-menus slide)
   Fichier : assets/css/header.css
   Dépend de : assets/css/variables.css
   ========================================================= */


/* =========================================================
   HEADER
   ========================================================= */

.pcr-header{
  position: sticky;
  top: 0;
  z-index: var(--pcr-z-header);
  background: var(--pcr-header-bg);
  border-bottom: 1px solid var(--pcr-header-border);
}

.pcr-header__inner{
  max-width: var(--pcr-container-max);
  margin: 0 auto;
  padding: var(--pcr-space-4) var(--pcr-container-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--pcr-space-4);
}

/* Logo */
.custom-logo{
  max-height: 44px;
  width:auto;
  height:auto;
  display:block;
}

.pcr-brand__text{
  font-weight: var(--pcr-weight-bold);
  font-size: var(--pcr-text-lg);
  color: var(--pcr-color-text);
}

/* =========================================================
   NAVIGATION DESKTOP
   ========================================================= */

.pcr-nav--desktop{ display:none; }

.pcr-nav__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: var(--pcr-space-4);
}

.pcr-nav__menu li{ margin:0; }

.pcr-nav__menu a{
  display:inline-block;
  padding: var(--pcr-menu-link-pad-y) var(--pcr-menu-link-pad-x);
  border-radius: var(--pcr-menu-link-radius);
  color: var(--pcr-menu-text);
  text-decoration:none;
  transition: background var(--pcr-dur-fast) var(--pcr-ease),
              color var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-nav__menu a:hover{
  background: var(--pcr-menu-hover-bg);
  text-decoration:none;
}

/* =========================================================
   BOUTON HAMBURGER (MOBILE)
   ========================================================= */

.pcr-nav-toggle{
  appearance:none;
  border: 1px solid var(--pcr-color-border);
  background: var(--pcr-color-surface);
  border-radius: var(--pcr-radius-md);
  width: 46px;
  height: 46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.pcr-burger{
  width: var(--pcr-burger-size);
  height: var(--pcr-burger-thickness);
  background: var(--pcr-color-text);
  position:relative;
  display:block;
}

.pcr-burger::before,
.pcr-burger::after{
  content:"";
  position:absolute;
  left:0;
  width: var(--pcr-burger-size);
  height: var(--pcr-burger-thickness);
  background: var(--pcr-color-text);
}

.pcr-burger::before{ top: calc(var(--pcr-burger-gap) * -1); }
.pcr-burger::after { top: var(--pcr-burger-gap); }

/* =========================================================
   BREAKPOINT DESKTOP
   ========================================================= */

@media (min-width: 900px){
  .pcr-nav--desktop{ display:block; }
  .pcr-nav-toggle{ display:none; }
}

/* =========================================================
   OVERLAY
   ========================================================= */

.pcr-overlay{
  position: fixed;
  inset: 0;
  background: var(--pcr-overlay-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pcr-dur) var(--pcr-ease);
  z-index: var(--pcr-z-overlay); /* sous admin bar */
}

/* =========================================================
   OFFCANVAS (MOBILE)
   ========================================================= */

.pcr-offcanvas{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--pcr-offcanvas-w);
  background: var(--pcr-offcanvas-bg);
  border-left: 1px solid var(--pcr-offcanvas-border);
  transform: translateX(100%);
  transition: transform var(--pcr-dur) var(--pcr-ease);
  z-index: var(--pcr-z-offcanvas); /* sous admin bar */
  display:flex;
  flex-direction:column;
}

/* Header offcanvas (top bar) */
.pcr-offcanvas__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: var(--pcr-offcanvas-pad);
  border-bottom: 1px solid var(--pcr-color-border);
  gap: var(--pcr-space-3);
}

.pcr-offcanvas__title{
  font-size: var(--pcr-text-md);
  font-weight: var(--pcr-weight-semibold);
  color: var(--pcr-color-heading);
  margin: 0;
}

.pcr-offcanvas__close{
  appearance:none;
  border: 1px solid var(--pcr-color-border);
  background: var(--pcr-color-surface);
  border-radius: var(--pcr-radius-md);
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  color: var(--pcr-color-danger);
}

/* Zone scroll menu */
.pcr-offcanvas__nav{
  position: relative;
  flex: 1;
  overflow: hidden; /* important pour l’effet slide */
  padding: 0;
}

/* =========================================================
   PANELS SLIDE (menu principal -> sous-menu)
   ========================================================= */

.pcr-offcanvas__panels{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Chaque panel prend toute la zone et se translate */
.pcr-panel{
  position: absolute;
  inset: 0;
  padding: var(--pcr-offcanvas-pad);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--pcr-offcanvas-bg);
  transform: translateX(0);
  transition: transform var(--pcr-dur) var(--pcr-ease);
}

.pcr-panel--sub{
  transform: translateX(100%);
}

/* Quand on est dans un sous-menu : principal part à gauche, sub arrive */
.pcr-offcanvas.pcr-offcanvas--sub .pcr-panel--main{
  transform: translateX(-100%);
}
.pcr-offcanvas.pcr-offcanvas--sub .pcr-panel--sub{
  transform: translateX(0);
}

/* Header interne du sous-menu (bouton retour + titre) */
.pcr-subhead{
  display: flex;
  align-items: center;
  gap: var(--pcr-space-3);
  margin: 0 0 var(--pcr-space-4);
  padding-bottom: var(--pcr-space-3);
  border-bottom: 1px solid var(--pcr-color-border);
}

.pcr-back{
  appearance: none;
  border: 1px solid var(--pcr-color-border);
  background: var(--pcr-color-surface);
  border-radius: var(--pcr-radius-md);
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pcr-back::before{
  content: "";
  width: 10px;
  height: 10px;
  border-left: 3px solid var(--pcr-color-secondary);
  border-bottom: 3px solid var(--pcr-color-secondary);
  transform: rotate(45deg); /* chevron < */
  display: inline-block;
}

.pcr-subtitle{
  font-size: var(--pcr-text-md);
  font-weight: var(--pcr-weight-semibold);
  color: var(--pcr-color-heading);
  margin: 0;
}

/* =========================================================
   MENUS (liste)
   ========================================================= */

.pcr-offcanvas__menu,
.pcr-submenu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: var(--pcr-space-3);
}

.pcr-offcanvas__menu li,
.pcr-submenu li{
  margin:0;
}

/* Item */
.pcr-offcanvas__menu a,
.pcr-submenu a{
  display:block;
  padding: var(--pcr-space-3);
  border-radius: var(--pcr-radius-md);
  background: var(--pcr-color-surface-2);
  color: var(--pcr-color-text);
  text-decoration:none;
  transition: background var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-offcanvas__menu a:hover,
.pcr-submenu a:hover{
  background: var(--pcr-menu-hover-bg);
  text-decoration:none;
}

/* Bouton flèche “aller au sous-menu” (à droite) */
.pcr-sub-toggle{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: var(--pcr-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.pcr-sub-toggle::before{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--pcr-color-secondary);
  border-bottom: 3px solid var(--pcr-color-secondary);
  transform: rotate(-45deg); /* chevron > */
  display: inline-block;
}

.pcr-sub-toggle:hover{
  background: rgba(0,0,0,.05);
}

/* Ligne parent = lien + bouton flèche */
.pcr-has-children-row{
  display:flex;
  align-items:center;
  gap: var(--pcr-space-2);
}

/* Le lien prend tout l'espace */
.pcr-has-children-row > a{
  flex: 1 1 auto;
}

/* Cache les UL imbriqués WP dans le panel main (on les pilote en slide) */
.pcr-offcanvas__menu .sub-menu{
  display: none !important;
}

/* =========================================================
   ÉTAT MENU OUVERT (piloté par menu.js)
   ========================================================= */

html.pcr-nav-open,
html.pcr-nav-open body{
  overflow: hidden;
}

.pcr-nav-open .pcr-overlay{
  opacity: 1;
  pointer-events: auto;
}

.pcr-nav-open .pcr-offcanvas{
  transform: translateX(0);
}

/* =========================================================
   WP ADMIN BAR
   ========================================================= */

#wpadminbar{
  z-index: var(--pcr-z-adminbar) !important;
}

body.admin-bar .pcr-offcanvas{
  top: var(--pcr-adminbar-h-desktop);
  height: calc(100vh - var(--pcr-adminbar-h-desktop));
}

@media (max-width: 782px){
  body.admin-bar .pcr-offcanvas{
    top: var(--pcr-adminbar-h-mobile);
    height: calc(100vh - var(--pcr-adminbar-h-mobile));
  }
}

/* =========================================================
   OFFCANVAS — Actions bas (Téléphone + Devis)
   ========================================================= */

/* IMPORTANT : le nav ne doit pas passer sous la barre d’actions */
.pcr-offcanvas__nav{
  padding-bottom: 92px; /* hauteur approx de la barre actions */
}

/* Barre collée en bas */
.pcr-offcanvas__actions{
  position: sticky;
  bottom: 0;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;

  padding: 14px var(--pcr-offcanvas-pad);
  border-top: 1px solid var(--pcr-color-border);
  background: var(--pcr-offcanvas-bg);
}

/* Mobile très étroit : on empile */
@media (max-width: 360px){
  .pcr-offcanvas__actions{
    grid-template-columns: 1fr;
  }
  .pcr-offcanvas__nav{
    padding-bottom: 140px;
  }
}

/* Boutons */
.pcr-offcanvas__btn{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 52px;
  padding: 0 14px;

  border-radius: var(--pcr-radius-md);
  border: 1px solid var(--pcr-color-border);

  text-decoration: none;
  font-weight: var(--pcr-weight-semibold);
  font-size: var(--pcr-text-sm);
  line-height: 1;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Bouton téléphone : fond BLANC, texte sombre */
/* Bouton téléphone : VERT APPEL */
.pcr-offcanvas__btn--phone{
  background: var(--pcr-color-success);
  color: #ffffff;
  border-color: rgba(0,0,0,.12);
}

/* Bouton devis : bleu du site, texte blanc */
.pcr-offcanvas__btn--devis{
  background: var(--pcr-color-primary);
  color: #ffffff;
  border-color: rgba(255,255,255,.10);
}

/* Hover/active (desktop + touch) */
.pcr-offcanvas__btn--phone:hover{ filter: brightness(.97); }
.pcr-offcanvas__btn--devis:hover{ background: var(--pcr-color-primary-hover); }
.pcr-offcanvas__btn:active{ transform: translateY(1px); }

/* Dashicons parfaitement centrés */
.pcr-offcanvas__btn .dashicons{
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 22px;
  display: inline-block;
  vertical-align: middle;
}

/* Texte : pas de wrap brutal */
.pcr-offcanvas__btnText{
  white-space: nowrap;
}

/* Téléphone : on veut le combiné orienté dans l'autre sens */
.pcr-offcanvas__btn--phone .dashicons{
  transform: scaleX(-1);
}





/* =========================================================
   DESKTOP DROPDOWN (niveau 2) — version premium
   - hover + focus-within
   - accessible clavier
   - stable (pas de flicker)
   ========================================================= */

@media (min-width: 900px){

  /* Le conteneur nav doit permettre l’overlay dropdown sans couper */
  .pcr-header{ overflow: visible; }
  .pcr-header__inner{ position: relative; }

  .pcr-nav__menu{
    align-items: center;
    gap: var(--pcr-space-2);
  }

  /* Item parent (position pour le dropdown) */
  .pcr-nav__menu > li{
    position: relative;
  }

  /* Lien parent : style plus “desktop” */
  .pcr-nav__menu > li > a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--pcr-radius-md);
    font-weight: var(--pcr-weight-semibold);
    letter-spacing: -0.01em;
  }

  /* Indicateur visuel si sous-menu */
  .pcr-nav__menu > li.menu-item-has-children > a::after{
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .75;
    margin-left: 2px;
  }

  /* Etat actif / hover du parent */
  .pcr-nav__menu > li > a:hover{
    background: var(--pcr-menu-hover-bg);
  }
  .pcr-nav__menu > li:focus-within > a{
    background: rgba(64,196,255,.12);
    box-shadow: var(--pcr-focus-ring);
  }

  /* ---------------------------------------------------------
     Sous-menu (dropdown)
     --------------------------------------------------------- */

  /* Reset WP */
  .pcr-nav__menu .sub-menu{
    list-style: none;
    margin: 0;
    padding: 10px;
  }

  /* Panel dropdown */
  .pcr-nav__menu > li > .sub-menu{
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    min-width: 260px;
    max-width: 340px;

    background: var(--pcr-color-surface-3);
    border: 1px solid var(--pcr-color-border);
    border-radius: var(--pcr-radius-lg);
    box-shadow: var(--pcr-shadow-md);

    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;

    transition: opacity var(--pcr-dur) var(--pcr-ease),
                transform var(--pcr-dur) var(--pcr-ease);
    z-index: calc(var(--pcr-z-header) + 20);
  }

  /* Petite flèche “popover” */
  .pcr-nav__menu > li > .sub-menu::before{
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 12px;
    height: 12px;
    background: var(--pcr-color-surface-3);
    border-left: 1px solid var(--pcr-color-border);
    border-top: 1px solid var(--pcr-color-border);
    transform: rotate(45deg);
  }

  /* Ouverture dropdown : hover + focus clavier */
  .pcr-nav__menu > li:hover > .sub-menu,
  .pcr-nav__menu > li:focus-within > .sub-menu{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Liens du sous-menu */
  .pcr-nav__menu > li > .sub-menu a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 10px 12px;
    border-radius: var(--pcr-radius-md);

    color: var(--pcr-color-text);
    text-decoration: none;

    background: transparent;
    border: 1px solid transparent;

    transition: background var(--pcr-dur-fast) var(--pcr-ease),
                border-color var(--pcr-dur-fast) var(--pcr-ease);
  }

  .pcr-nav__menu > li > .sub-menu a:hover{
    background: rgba(255,255,255,.06);
    border-color: var(--pcr-color-border);
  }

  .pcr-nav__menu > li > .sub-menu a:focus-visible{
    outline: none;
    box-shadow: var(--pcr-focus-ring);
  }

  /* Niveau 3 : on le désactive volontairement en desktop dropdown simple
     (si tu veux un mega-menu ou flyout, on le fera ensuite) */
  .pcr-nav__menu .sub-menu .sub-menu{
    display: none;
  }
}