/*
 Theme Name:   Adventure Lite Child (Atelier)
 Template:     adventure-lite
 Description:  Thème enfant pour site hébergeant l'extension CotaGuidage Atelier. Reproduit l'apparence CotaGuidage (header gris, nav custom) SANS aucune logique CotaGuidage (rôles, switch, filtrage). Autonome.
 Version:      1.0
*/

/* =============================================================
   HEADER GRIS FIXE + NAV CUSTOM (apparence CotaGuidage)
   Le header lui-même est généré par functions.php (wp_body_open).
   Ici : uniquement l'habillage.
   ============================================================= */

/* Masquer l'en-tête du thème parent Adventure Lite (on le remplace). */
#masthead { display: none !important; }
.main-navigation { display: none !important; }
#site-header .main-navigation { display: flex !important; }
.heder-rightside { display: none; }
.logo { display: none; }

/* Header enfant gris, fixe en haut. */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: grey;
  color: #fff;
  padding: 10px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  box-sizing: border-box;
  font-family: system-ui;
  height: auto;
}

/* Décalage de la barre d'admin WP. */
.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #site-header { top: 46px; }
}

/* Réserver la hauteur du header fixe (sinon le contenu passe dessous). */
body::before { content: ""; display: block; height: 70px; }
.admin-bar body::before { height: 102px; }
@media screen and (max-width: 782px) {
  .admin-bar body::before { height: 116px; }
}

/* Bloc gauche : logo + titre. */
#site-header .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
#site-header .site-logo { height: 35px; width: auto; }
#site-header .site-title { font-weight: 600; font-size: 1.1em; }

/* Navigation principale (dans le header). */
#site-header .main-navigation { padding: 0; margin: 0; }
#site-header .main-navigation .nav-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#site-header .main-navigation .nav-menu li {
  display: inline-block;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
#site-header .main-navigation .nav-menu a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.1em;
  color: #fff !important;
  padding: 0.5rem 0.8rem;
  line-height: 1;
  border-radius: 6px;
  transition: color .3s ease, background-color .3s ease;
}
#site-header .main-navigation .nav-menu a:hover {
  color: #111 !important;
  background: #f3f4f6;
}

/* Mobile : la nav reste dans le header, sur plusieurs lignes si besoin. */
@media (max-width: 782px) {
  #site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    flex-wrap: wrap;
  }
  .admin-bar #site-header { top: 0 !important; }
  #site-header .main-navigation .nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    overflow: visible;
    gap: 4px 6px;
    padding: 0.2em 0;
  }
  #site-header .main-navigation .nav-menu a {
    padding: 0.3em 0.5em;
    font-size: 0.95em;
  }
}


/* =============================================================
   MISE EN PAGE — donner de la place au contenu (l'atelier)
   ============================================================= */
.container { width: 100%; margin: 0 auto; position: relative; }
.site-main { width: 100%; margin: 0; padding: 20px; }

html, body {
  width: 100%;
  overflow-x: visible;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}