/*
 * header-gardiennage.css — composant header + burger PARTAGÉ (β)
 * #BURGER-BETA-T1-COMPOSANT-PILOTE
 *
 * Header responsive unique (nav desktop + burger mobile, drawer piloté
 * par rôle) extrait de index-hpv2-earlyaccess.html (famille A role-driven).
 * Réutilisable sur toutes les pages publiques gardiennage.nounou.nc.
 *
 * AUTONOME : ne dépend d'aucune variable CSS page-spécifique. Les couleurs
 * utilisent les tokens gardiennage (--lagon*) avec fallback codé en dur,
 * et le composant définit lui-même --gard-header-height / --gard-eco-height
 * (absentes des pages famille C — cf. Phase 0).
 *
 * Sélecteurs scopés sous .site-header / #mobileDrawer pour éviter toute
 * fuite (.logo notamment, réutilisé par le footer).
 */

:root {
  --gard-header-height: 76px;
  --gard-eco-height: 36px;

  /* Tokens auto-contenus du modal de choix de rôle (valeurs HP — #BURGER-BETA-PORT-MODAL-INSCRIPTION) */
  --gard-white: #FFFFFF;
  --gard-sand: #FDF6EC;
  --gard-text-soft: #6B6B6B;
  --gard-lagon: #1F5F7A;
  --gard-lagon-clair: #4A8AAB;
  --gard-lagon-fonce: #143F52;
  --gard-radius-card: 20px;
  --gard-radius-ui: 12px;
  --gard-shadow-strong: 0 18px 44px rgba(20, 63, 82, 0.12);
  --gard-font-title: 'Playfair Display', Georgia, serif;
}

/* ===== Header sticky ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20, 63, 82, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(20, 63, 82, 0.1); }

.site-header .header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--gard-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lagon-fonce, #143F52);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.site-header .logo-img { height: 66px; width: auto; max-width: none; display: block; }
@media (max-width: 768px) { .site-header .logo-img { height: 51px; } }
@media (max-width: 480px) { .site-header .logo-img { height: 40px; } }

/* ===== Nav desktop (masquée en mobile) ===== */
.desktop-nav, .desktop-actions { display: none; }

.desktop-nav a, .login-link {
  color: var(--lagon-fonce, #143F52);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.desktop-actions a { white-space: nowrap; }

.desktop-nav a:hover, .login-link:hover { color: var(--lagon-clair, #4A8AAB); }
.desktop-nav a.active { color: var(--lagon, #1F5F7A); text-decoration: underline; text-underline-offset: 4px; }

/* ===== Boutons (scopés au composant) ===== */
.desktop-actions .btn,
#mobileDrawer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-ui, 12px);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.desktop-actions .btn-primary,
#mobileDrawer .btn-primary {
  color: #fff;
  background: var(--lagon, #1F5F7A);
}

.desktop-actions .btn-primary:hover,
#mobileDrawer .btn-primary:hover { background: var(--lagon-clair, #4A8AAB); }

/* ===== Burger (mobile only) ===== */
.burger {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(31, 95, 122, 0.22);
  border-radius: var(--radius-ui, 12px);
  background: #fff;
  color: var(--lagon, #1F5F7A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
  content: '';
}

.burger span::before { transform: translateY(-7px); }
.burger span::after { transform: translateY(5px); }

.burger[aria-expanded="true"] span { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::before { transform: translateY(0) rotate(90deg); }
.burger[aria-expanded="true"] span::after { opacity: 0; }

/* ===== Badge messages non lus (#BADGE-MESSAGES-NON-LUS) ===== */
/* Pastille coral sur le ☰ + compteur sur l'entrée « Mes messages ».
   Charte : coral #E8613A sur fond blanc. */
.burger { position: relative; }

.burger-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #E8613A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-style: normal;
  box-shadow: 0 0 0 2px #fff;
}

.msg-count {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #E8613A;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

/* Override UA [hidden] : .burger-badge/.msg-count posent display, donc
   il faut un sélecteur explicite pour le masquage (cf. mea culpa #UX-2-FIX-INIT). */
.burger-badge[hidden],
.msg-count[hidden] { display: none; }

/* ===== Drawer mobile ===== */
.mobile-drawer {
  position: fixed;
  inset: calc(var(--gard-eco-height) + var(--gard-header-height)) 0 0 0;
  z-index: 45;
  background: #fff;
  padding: 28px 24px 36px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: -20px 0 40px rgba(20, 63, 82, 0.12);
  overflow-y: auto;
}

.mobile-drawer.is-open { transform: translateX(0); }

.mobile-drawer a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 63, 82, 0.08);
  color: var(--lagon-fonce, #143F52);
  font-weight: 700;
}

/* Le bouton "S'inscrire" du drawer garde un texte blanc lisible
   sur fond --lagon (sinon .mobile-drawer a impose --lagon-fonce). */
.mobile-drawer a.btn-primary { color: #fff; }

.mobile-drawer .btn { margin-top: 12px; width: 100%; }

/* #drawerNavLinks wrappe les liens nav (rendu dynamique par rôle).
   Comme .mobile-drawer est flex-column, on restaure l'empilement des <a>
   imbriqués dans ces <div> blocs (fix récent HP — #drawerNavLinks). */
#drawerNavLinks { display: flex; flex-direction: column; gap: 16px; }
#drawerAuthActions { display: flex; flex-direction: column; gap: 16px; }
#drawerAuthActions .btn { margin-top: 0; }

body.menu-open { overflow: hidden; }

/* ===== Bascule desktop ===== */
@media (min-width: 769px) {
  :root { --gard-header-height: 82px; }
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
  }
  .desktop-actions {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .burger { display: none; }
  .mobile-drawer { display: none; }
}

/* ===== Modal choix de rôle (porté de la HP — #BURGER-BETA-PORT-MODAL-INSCRIPTION) =====
   Overlay z-index 200 > drawer (45) + header (50) : s'ouvre proprement par-dessus
   le drawer mobile. Styles auto-contenus via tokens --gard-*. */
.role-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 63, 82, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.role-modal-overlay.is-open { display: flex; }

.role-modal {
  background: var(--gard-white, #FFFFFF);
  border-radius: var(--gard-radius-card, 20px);
  padding: 32px 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--gard-shadow-strong, 0 18px 44px rgba(20, 63, 82, 0.12));
}
.role-modal h3 {
  font-family: var(--gard-font-title, 'Playfair Display', Georgia, serif);
  color: var(--gard-lagon-fonce, #143F52);
  margin: 0 0 8px;
  font-size: 22px;
}
.role-modal p { color: var(--gard-text-soft, #6B6B6B); margin: 0 0 20px; }
.role-modal .role-options { display: grid; gap: 12px; }
.role-modal .role-option {
  display: block;
  padding: 16px 20px;
  border-radius: var(--gard-radius-ui, 12px);
  border: 2px solid var(--gard-lagon-clair, #4A8AAB);
  color: var(--gard-lagon-fonce, #143F52);
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.role-modal .role-option:hover { background: var(--gard-sand, #FDF6EC); border-color: var(--gard-lagon, #1F5F7A); }
.role-modal .role-option strong { display: block; font-size: 16px; margin-bottom: 4px; }
.role-modal .role-option span { font-size: 13px; color: var(--gard-text-soft, #6B6B6B); font-weight: 400; }
.role-modal .role-modal-close {
  background: none;
  border: 0;
  color: var(--gard-text-soft, #6B6B6B);
  font-size: 14px;
  margin-top: 16px;
  cursor: pointer;
  text-decoration: underline;
}

/* ===== Fil d'Ariane (#BREADCRUMB-IMPL-1-COMPOSANT) =====
   Injecté par js/breadcrumb.js sous #siteHeader. Aligné comme .container
   (max-width copiée par le JS depuis le .container de la page + padding 24px).
   Aucun fond / bordure / bouton. */
.breadcrumb {
  max-width: 1100px; /* défaut ; surchargé en inline par breadcrumb.js selon .container */
  margin: 14px auto 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
}

.breadcrumb a {
  color: var(--gard-lagon, #1F5F7A);
  text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb .breadcrumb-sep {
  margin: 0 8px;
  color: #B4B2A9;
}

.breadcrumb .breadcrumb-current {
  color: #888780;
}

@media (max-width: 480px) {
  .breadcrumb { padding: 0 16px; }
}