/* Réserve l’espace du header avant injection (évite le jump visuel) */
#header-container {
  min-height: 64px; /* doit matcher .header-inner height */
}
@media (max-width: 768px) {
  #header-container {
    min-height: 124px; /* réserve l'espace du header qui wrap */
  }
}


/* ============================================================
   HEADER — STRUCTURE GLOBALE
   ============================================================ */

#header-global {
  width: 100%;
  background: white;
  border-bottom: 1px solid var(--c-gris-200);

  position: relative;
  z-index: 10;
}

.header-inner {
  width: 100%;
  max-width: 1600px;
    min-width: 0;
  margin-left: auto;
  margin-right: auto;




  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Logo */
.logo-planif {
  height: 50px;
  width: auto;
}
/* Corrige l’écrasement du logo dans le flex du header */
.header-left-zone .logo-planif {
  max-width: none;
}



/* ============================================================
   MENU UTILISATEUR
   ============================================================ */

.user-menu-wrapper {
  position: relative;
}

.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

#user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* Dropdown */
.user-dropdown {
  position: absolute;
  right: 0;
  top: 48px;
  background: white;
  border: 1px solid var(--c-gris-200);
  padding: 8px 16px;
  min-width: 200px;
  border-radius: 12px;
  display: none;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.user-dropdown.open {
  display: block;
}

.user-dropdown a,
.user-dropdown button {
  display: block;
  width: 100%;
  padding: 6px 0;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
  background: var(--c-gris-200);
}

.dropdown-user-info {
  margin-bottom: 4px;
}

.dropdown-name {
  font-weight: 600;
}

.dropdown-email {
  font-size: 0.85rem;
  color: var(--c-gris-600);
}

.user-dropdown hr {
  margin: 4px 0;
  border: none;
  border-top: 1px solid var(--c-gris-200);
}

/* ============================================================
   HEADER — ZONE PROJET (MODULES SEULEMENT)
   ============================================================ */

.header-project-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24px;
  flex: 0 1 auto;
  min-width: 0;
}

/* Boîte qui contient nom projet + nav */
.project-box {
  display: flex;
  align-items: center;
  gap: 16px;

  background: #ffffff;
  border: 1px solid var(--c-gris-200);
  border-radius: 12px;

  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  max-width: 100%;
  min-width: 0;
}
.project-box {
  max-width: 100%;
  overflow: visible;
}
.project-box {
  position: relative;
}
.project-name {
  font-weight: 700;
  font-size: 1rem;

  border-right: 1px solid var(--c-gris-200);
  padding-right: 12px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

/* NAVIGATION ENTRE MODULES */
.project-nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-project-btn {
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 0.95rem;

  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;

  color: var(--c-texte);
  text-decoration: none;
}


.header-project-btn {
  overflow: visible;
}


/* Ligne animée depuis le centre — mêmes règles que project-name/maison */
.header-project-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--c-primaire);
  transition: width 0.2s ease, left 0.2s ease;
}

.header-project-btn:hover::after {
  width: 100%;
  left: 0;
}

.header-project-btn:hover {
  color: var(--c-primaire);
}

.project-separator {
  color: var(--c-gris-300);
  margin-right: 16px;
  margin-left: 8px;
  font-size: 1.1rem;
}
/* Zone gauche (logo + retour) */
.header-left-zone {
  display: flex;
  flex-direction: row;     /* ✔ aligné horizontalement */
  align-items: center;     /* ✔ bien aligné verticalement */
  gap: 16px;               /* espace logo <-> texte */
}
/* Stabilise la zone gauche du header (évite reflow horizontal) */
.header-left-zone {
  min-width: 140px; /* largeur visuelle logo + icône */
}

/* Lien "Retour au compte" – version discrète */
.header-back-inline {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--c-gris-600);
  text-decoration: none;
  margin-left: 6px;
}


/* Masquer le lien Retour au compte sur la page compte/index */
.page-compte .header-back-inline {
  display: none !important;
}
/* ============================================================
   HEADER — Ligne mauve animée depuis le centre (hover)
   ============================================================ */

/* Base commune */
.project-name,
.header-back-inline {
  position: relative;
  cursor: pointer;

}
.project-name {
  cursor: default;
}

/* Ligne invisible au repos */
.project-name::after,
.header-back-inline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--c-primaire);
 }
/* Transition uniquement au hover (évite animation au chargement) */
.project-name:hover::after,
.header-back-inline:hover::after,
.header-project-btn:hover::after {
  transition: width 0.2s ease, left 0.2s ease;
}





/* ============================================================
   HEADER — Module actif (état courant)
   ============================================================ */

.header-project-btn.is-active {
  color: var(--c-primaire);
}

/* Ligne mauve permanente pour le module actif */
.header-project-btn.is-active::after {
  width: 100%;
  left: 0;
}


/* ============================================================
   HEADER PUBLIC — Landing / pages ressources
   ============================================================ */

.header-public-inner {
  width: 100%;
  min-height: 64px;   /* hauteur minimale seulement */
  padding: 0 24px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  gap: 28px;

  box-sizing: border-box;
}
.header-public-top {
  grid-column: 1 / 2;
}

.project-box {
  justify-self: center;
}

.header-public-actions {
  justify-self: end;
}
/* zone gauche */

.header-public-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* slogan */

.header-public-tagline {
  font-size: 0.9rem;
  color: var(--c-gris-600);
  font-weight: 500;
  white-space: nowrap;
}

/* navigation centrale */

.header-public-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* boutons navigation type header projet */

.header-public-link {
  background: none;
  border: none;

  font-size: 0.95rem;
  cursor: pointer;

  position: relative;
  padding-bottom: 4px;
}

/* ligne animée */

.header-public-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 0;
  height: 2px;

  background: var(--c-primaire);

  transition: width 0.2s ease, left 0.2s ease;
}

.header-public-link:hover::after {
  width: 100%;
  left: 0;
}

.header-public-link:hover {
  color: var(--c-primaire);
}

/* zone droite */

.header-public-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================================
   HEADER — Tagline (header public)
   ============================================================ */
.header-public-tagline {
  font-family: var(--font-titres);
  font-size: 1.2rem;
  font-weight: 600;

  color: var(--c-primaire);

  
  letter-spacing: 0.2px;

  white-space: nowrap;
}
.tagline-accent {
  background: linear-gradient(
    90deg,
    var(--c-primaire),
    var(--c-accent)
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  font-weight: 700;
}
/* ============================================================
   HEADER — Branding public (Planif + slogan)
   ============================================================ */

.header-branding {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Logo typographique */

.logo-planif-wordmark {
  height: 28px;
  width: auto;
  display: block;
  transform: translateY(0px);
}

/* slogan */

.header-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--c-gris-700);
  white-space: nowrap;
}

/* ============================================================
   HEADER — Dropdown Ressources (style lien)
   ============================================================ */

.project-nav-links .dropdown__trigger {
  background: none;
  border: none;
  padding: 6px 4px;

  font-size: 0.95rem;
  color: var(--c-texte);

  width: auto;
  justify-content: flex-start;
  gap: 4px;
}
.project-nav-links .dropdown__trigger:hover {
  color: var(--c-primaire);
}
/* Chevron ouvert lorsque dropdown actif */
.dropdown--open .ui-chevron::before {
  transform: rotate(45deg);
}
/* =========================================================
   HEADER — Chevron compact (navigation publique)
   ========================================================= */

.header-project-btn .ui-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.header-project-btn .ui-chevron::before {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}


/* =========================================================
   HEADER PUBLIC — Responsive
   ========================================================= */

@media (max-width: 768px) {

 .header-public-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px 16px;
}

/* Ligne 1 : branding + actions */
.header-public-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Ligne 2 : navigation */
.header-public-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}


  /* branding plus compact */
  .header-public-tagline {
    display: none;
  }

  .logo-planif-wordmark {
    height: 22px;
  }

.project-box {
 
  display: flex;
  justify-content: center;
}
  .project-nav-links {
    gap: 16px;
  }



.header-public-top {

  align-items: center;
  justify-content: space-between;
  width: 100%;
}

}
.user-name {
  font-weight: 700;
}
.header-branding {
  text-decoration: none;
  color: inherit;
}

.header-branding:hover {
  text-decoration: none;
}

/* =========================================================
   HEADER PROJET — Menu déroulant mobile
   ========================================================= */

.project-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--c-gris-200);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  color: var(--c-texte);
  cursor: pointer;
  white-space: nowrap;
}
.project-nav-toggle {
  position: relative;
  z-index: 10;
}

@media (max-width: 1100px) {
  .header-project-zone {
    margin: 0 12px;
  }

  .project-box {
    position: relative;
    padding: 8px 12px;
    gap: 12px;
  }

  .project-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .project-nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    
    z-index: 2000;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    min-width: 220px;
    background: #fff;
    border: 1px solid var(--c-gris-200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 8px;
  }

  .project-nav-links.open {
    display: flex;
  }

  .project-nav-links .header-project-btn {
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .project-nav-links .header-project-btn:hover {
    background: var(--c-gris-100);
  }

  .project-nav-links .header-project-btn::after {
    display: none;
  }
}

.project-box {
  position: relative;
}
.project-nav-links {
  z-index: 2000;
}
@media (max-width: 768px) {
  .project-name {
    display: none;
  }
}
.header-public-top {
  align-items: center;
  justify-content: space-between;

  min-width: 0;
}
.header-public-left {

  min-width: 0;
}
.header-public-left {
  justify-self: start;
}

.project-box {
  justify-self: center;
}

.header-public-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-branding {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}