/* ============================================
   FICHIER : header.css
   VERSION : 2026.10.10a
   OBJET   : Bandeau titre (header) + scroll
   CHANGTS :
     - Bouton thème centré verticalement
     - Bouton admin fixé en haut à gauche
     - Transparence 0.75 clair & sombre
     - Hover réintégré sur bouton thème
     - Utilisation de --header-bg pour le fond
     - ✅ 2026.10.10a : en mobile, ☰ / 🔍 / ☀️ s'ancrent à la LIGNE DU
       TITRE (var --rezoo-titre-cy mesurée par ui.js) et non au centre du
       bandeau entier — ils « tombaient » sous la barre de titre quand la
       zone de recherche (ligne 2) s'affichait.
   ============================================ */

.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 10px;
  position: fixed;
  top: 0; left: 0; width: 100%;
  background-color: var(--header-bg);   /* <-- corrigé : variable */
  border-bottom: 3px solid var(--header-border);
  box-sizing: border-box;
  z-index: 1000;
  transition: padding 0.3s ease, background-color 0.3s ease;
}

/* Ligne titre
   ✅ 2026.09.30 : la ligne accueille désormais la recherche (#rezooFiltre) et
   le bouton ⚙️ (#outilsToggle) ; sur grand écran le titre est centré en
   absolu (voir le bloc « RECHERCHE DANS LE BANDEAU » en fin de fichier) et
   `#togglePlanning` porte `margin-left: auto` pour plaquer le groupe de droite. */
.title-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  min-width: 0;
}

/* --- Titre --- */
.page-header .title-text {
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--header-text);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.75);
  margin: 0 0.5em;
  transition: font-size 0.3s ease, color 0.3s ease;
}

/* --- Lien du titre --- */
.page-header .title-text .title-link {
  color: inherit;          /* garde la couleur du titre */
  text-decoration: none;   /* supprime le soulignement */
  cursor: pointer;         /* curseur main */
}

.page-header .title-text .title-link:visited,
.page-header .title-text .title-link:hover,
.page-header .title-text .title-link:active {
  color: inherit;          /* pas de changement de couleur */
  text-decoration: none;   /* pas de soulignement */
}

/* Mid */
.page-header.mid { padding: 6px 8px; }
.page-header.mid .title-text { font-size: 1.4rem; }

/* Shrink */
.page-header.shrink { padding: 2px 6px; }
.page-header.shrink .title-text { font-size: 1.2rem; }

/* --- Bouton Planning --- */
#togglePlanning {
  font-size: 1.4rem;
  background: transparent;       /* pas de fond */
  color: var(--accent);          /* texte doré */
  border: 2px solid var(--accent); /* contour doré */
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 6px;
  margin-left: 10px;
  transition: background 0.3s ease, color 0.3s ease, font-size 0.3s ease, padding 0.3s ease, margin 0.3s ease, border-width 0.3s ease;
}

/* Effet hover : inversion */
#togglePlanning:hover {
  background: var(--accent);     /* fond doré */
  color: #000;                   /* texte noir lisible */
}
.page-header #togglePlanning { font-size: 0.9rem; padding: 6px 10px; }
.page-header.mid #togglePlanning { font-size: 0.8rem; padding: 2px 5px; }
.page-header.shrink #togglePlanning {
  font-size: 0.7rem;
  padding: 1px 4px;
  margin: 0 2px;
}

.page-header .admin-btn { font-size: 0.9rem; padding: 6px 10px; }
.page-header.mid .admin-btn { font-size: 0.8rem; padding: 2px 5px; }
.page-header.shrink .admin-btn {
  font-size: 0.7rem;
  padding: 1px 4px;
}

/* --- Bouton Thème clair/sombre --- */
.theme-btn {
  position: absolute;
  right: 10px;
  top: 50%;                  /* centré sur la hauteur du header */
  transform: translateY(-50%);
  background: transparent;
  color: var(--header-text);
  border: none;
  cursor: pointer;
  opacity: 0.8;
  line-height: 1;
  padding: 0;
  font-size: 3.6rem;          /* normal */
  transition: opacity 0.1s ease, font-size 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.theme-btn:hover { opacity: 1; }

/* Hover déplacé ici depuis theme.css */
.page-header .theme-btn:hover {
  transform: translateY(-50%) scale(1.25);
}

.page-header.mid .theme-btn { font-size: 2.7rem; }
.page-header.shrink .theme-btn { font-size: 1rem; opacity: 0.7; }

/* --- Slider transparence (✅ 2026.09.30 : dans la ligne 2 du bandeau) --- */
#transparencySlider {
  margin-top: 6px;
  max-width: 300px;
  transition: max-width 0.3s ease, margin-top 0.3s ease;
}
.page-header.shrink #transparencySlider { display: none; }
/* Dans la ligne 2 (ReZoo.html) : format compact. proposals.html, qui garde son
   curseur dans le flux du bandeau, conserve exactement ses valeurs d'origine. */
.page-header__ligne2 #transparencySlider {
  width: 170px;
  max-width: 170px;
  margin: 0;
  flex: 0 0 auto;
}

/* --- Bouton Admin 🔧 (✅ 2026.09.30 : remis DANS le flux, en 1re position
       de la ligne 1 — il est injecté en premier par admin-button.js) --- */
.title-line #adminButton {
  position: relative;
  z-index: 2;
  margin-left: 0;
}

/* ✅ 2026.08.24-6 : Bouton "Se connecter" */
.auth-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: 8px;
  transition: all 0.3s ease;
}
.auth-btn:hover {
  background: var(--accent);
  color: #000;
}
/* Réduction au scroll */
.page-header.mid .auth-btn { font-size: 0.75rem; padding: 4px 8px; }
.page-header.shrink .auth-btn { font-size: 0.65rem; padding: 2px 6px; }

/* ✅ 2026.08.24-6 : Bouton Déconnexion — même style que ☀️ (thème) */
.logout-btn {
  position: absolute;
  right: 74px;   /* collé à gauche de ☀️ (right:10px) */
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--header-text);
  border: none;
  cursor: pointer;
  opacity: 0.8;
  line-height: 1;
  padding: 0;
  font-size: 3.6rem;
  transition: opacity 0.1s ease, font-size 0.2s ease-in-out, right 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.logout-btn:hover { opacity: 1; }
.page-header .logout-btn:hover {
  transform: translateY(-50%) scale(1.25);
}
.page-header.mid .logout-btn { font-size: 2.7rem; right: 60px; }  /* collé à ☀️ */
.page-header.shrink .logout-btn { font-size: 1rem; right: 28px; opacity: 0.7; }

/* Bannière d'invitation (dans .content) */
#authBanner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 0 12px 0;
  background: var(--accent);
  color: #2f2100;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 1px 4px var(--card-shadow);
}
#authBanner button {
  flex-shrink: 0;
  background: #2f2100;
  color: var(--accent);
  border: none;
  padding: 5px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.85rem;
}
#authBanner.hidden { display: none !important; }
/* ============================================
   MENU HAMBURGER MOBILE (2026.08.23-9)
   ============================================ */

/* Bouton hamburger ☰ — caché desktop, visible mobile */
.menu-toggle {
  display: none;
  font-size: 2.2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--header-text);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  line-height: 1;
  padding: 0;
  transition: opacity 0.3s;
}
.menu-toggle:hover { opacity: 0.8; }

/* ✅ 2026.08.24-5 : Le burger menu réduit aussi au scroll (comme le titre) */
.page-header.mid .menu-toggle { font-size: 1.8rem; }
.page-header.shrink .menu-toggle { font-size: 1.4rem; }

/* Menu latéral (slide-in) */
.mobile-menu {
  position: fixed;
  top: 0; left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100dvh;
  height: 100%;
  background: var(--header-bg, #1a1a1a);
  border-right: 2px solid var(--header-border, #333);
  z-index: 2100;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.mobile-menu.open {
  transform: translateX(0);
}

.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border-bottom: 1px solid var(--header-border, #333);
  flex-shrink: 0;
}
.menu-close {
  font-size: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--header-text);
  padding: 4px 8px;
  line-height: 1;
}

.mobile-menu-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.mobile-menu-body button,
.mobile-menu-body .statut-toggle button {
  padding: 12px 14px;
  font-size: 1rem;
  border-radius: 8px;
  background: var(--dark-surface, #333);
  color: var(--header-text, #eee);
  border: 1px solid var(--header-border, #555);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.mobile-menu-body button:active {
  background: var(--dark-accent, #666);
}
.mobile-menu-body .statut-toggle-placeholder {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.mobile-menu-body .statut-toggle-placeholder button {
  flex: 1;
  text-align: center;
  font-size: 1.2rem;
  min-width: 40px;
}

/* Slider transparence mobile */
.mobile-slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--header-border, #333);
}
.mobile-slider-row label {
  font-size: 0.85rem;
  color: var(--text-muted, #888);
}
.mobile-slider-row input[type="range"] {
  width: 100%;
}

/* Overlay sombre derrière le menu */
.menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  transition: opacity 0.3s;
}

/* Responsive : hamburger visible, boutons de title-line cachés */
@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .title-line #togglePlanning,
  .title-line #statutZone,
  .title-line #notifyZone,
  .title-line #proposalButton,
  .title-line #adminButton,
  .title-line #guideBtn {
    display: none !important;
  }
  .page-header #transparencySlider { display: none; }
}
/* Desktop : menu mobile et overlay cachés */
@media (min-width: 769px) {
  .mobile-menu, .menu-overlay { display: none !important; }
}

/* --- Bouton Proposer 🎮 dans le flux avant le titre --- */
.title-line #proposalButton {
  margin-left: 0;
}

/* --- Admin menu --- */
.admin-menu {
  position: absolute;
  top: 6px;
  right: 10px; /* aligné avec le bouton thème */
  display: none; /* caché par défaut */
  align-items: center;
  z-index: 998;
}

.admin-btn {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  margin-left: 10px;
}

.admin-btn:hover {
  background: var(--accent);
  color: #000;
}

.admin-dropdown {
  position: fixed;
  background-color: var(--header-bg);
  backdrop-filter: blur(8px);
  border: 2px solid var(--accent);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 150px;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 999999 !important;
  pointer-events: all !important;
}

.admin-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.admin-link {
  display: block;
  text-align: left !important;
  cursor: pointer !important;
  padding: 8px 12px;
  color: var(--header-text) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: background 0.3s ease;
}

.admin-link:not(:last-child) {
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.admin-link:hover {
  background: rgba(255,255,255,0.1) !important;
  color: var(--accent) !important;
}

.admin-link:last-child {
  border-bottom: none;
}

/* --- Surcharge mode sombre --- */
body[data-theme="dark"] .page-header {
  background-color: var(--header-bg);   /* <-- corrigé : variable */
  border-bottom: 3px solid var(--header-border);
}

/* ============================================================
   ✅ 2026.09.30 : RECHERCHE DANS LE BANDEAU + LIGNE 2 REPLIABLE
   ------------------------------------------------------------
   LIGNE 1 : 🔧 Admin · 🔍 recherche · 🎮 Proposer · TITRE centré ·
             📅 Planning · ❓ Aide · 🔐 connexion · ⚙️
   LIGNE 2 : à GAUCHE les outils du catalogue (recherche <1100px, tri,
             patch, compteur), à DROITE les réglages (Présence, alertes
             mail, transparence).
   La hauteur réelle du bandeau est mesurée en JS (`--rezoo-header-h`,
   voir ui.js) : la ligne 2 peut donc s'ouvrir / se replier sans que le
   contenu de la page passe dessous.
   ============================================================ */

/* --- Recherche de la ligne 1 (tous les écrans ≥ 769 px) --- */
.titre-recherche {
  font: inherit;
  font-size: 0.85rem;
  /* ⚙️ RÉGLAGE : padding vertical du champ de recherche.
     La valeur est surchargée par --recherche-pad en .mid / .shrink (voir plus bas)
     si le champ paraît trop haut ou trop bas selon l'état du bandeau. */
  padding: var(--recherche-pad, 5px) 12px;
  border-radius: 999px;
  border: 1px solid var(--header-border, #ccc);
  background: rgba(255, 255, 255, 0.14);
  color: var(--header-text, #eee);
  /* ✅ 2026.09.30f : la LARGEUR est portée par .recherche__boite, pilotée par
     --larg-recherche (paliers responsive, voir le bloc en fin de fichier). */
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 0 1 auto;
  transition: width 0.2s ease, max-width 0.2s ease, background 0.2s ease;
}
.titre-recherche::placeholder { color: currentColor; opacity: 0.7; }
.titre-recherche:focus { background: rgba(255, 255, 255, 0.24); }
/* ⚙️ VALEUR À RÉGLER ICI si le champ de recherche paraît mal centré verticalement
   dans le bandeau : --recherche-pad = padding vertical du champ (px).
   .mid = état intermédiaire, .shrink = barre réduite (au défilement). */
.page-header.mid .titre-recherche { font-size: 0.8rem; --recherche-pad: 3px; }
.page-header.shrink .titre-recherche { font-size: 0.75rem; --recherche-pad: 2px; }

/* --- Bouton ⚙️ : replie / déplie la ligne 2 --- */
.outils-toggle {
  background: transparent;
  color: var(--header-text);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 2px 6px;
  flex: 0 0 auto;
  transition: background 0.2s ease, opacity 0.2s ease, font-size 0.2s ease;
}
.outils-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.outils-toggle[aria-expanded="false"] { opacity: 0.6; }
.outils-toggle__large { display: inline; }
.outils-toggle__petit { display: none; }
.page-header.mid .outils-toggle { font-size: 1rem; }
.page-header.shrink .outils-toggle { font-size: 0.9rem; }

/* --- Ligne 2 --- */
.page-header__ligne2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--header-border, #ccc);
  font-size: 0.82rem;
  color: var(--header-text);
  box-sizing: border-box;
}
/* Repliée par le bouton ⚙️, ou automatiquement quand le bandeau est compact */
.page-header.filtres-fermes .page-header__ligne2 { display: none; }
.page-header.shrink .page-header__ligne2 { display: none; }

.ligne2__gauche,
.ligne2__droite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-width: 0;
}
.ligne2__droite { margin-left: auto; }

.page-header__ligne2 input[type="search"],
.page-header__ligne2 select {
  font: inherit;
  font-size: 0.82rem;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid var(--header-border, #ccc);
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
}
.page-header__ligne2 input[type="search"]::placeholder { color: currentColor; opacity: 0.7; }
.page-header__ligne2 select option { color: #111; background: #fff; }
body[data-theme="dark"] .page-header__ligne2 select option { color: #eee; background: #24282e; }

.ligne2__recherche { width: 200px; max-width: 200px; }
.ligne2__groupe { display: inline-flex; align-items: center; gap: 6px; }
/* ✅ 2026.09.30e : le Tri, le filtre « Patch » et le compteur vivent désormais
   dans les EN-TÊTES du tableau (tri par clic, compteur dans « Titre (76) ») :
   ce bloc ne sert plus qu'aux écrans qui n'ont pas ce tableau — ≤768 px, où la
   vue « cartes » le remplace. Les deux entrées restent synchronisées. */
.ligne2__outils-mobile {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-width: 0;
}
@media (min-width: 769px) { .ligne2__outils-mobile { display: none; } }
.ligne2__lab { opacity: 0.85; white-space: nowrap; }
.ligne2__bloc { display: flex; align-items: center; gap: 6px; }
.ligne2__bloc.hidden { display: none !important; }
/* ✅ Les éléments de la ligne 2 ne se compriment JAMAIS : quand la place manque
   ils passent à la ligne (sinon le texte débordait de sa boîte et se retrouvait
   tronqué par le bord de l'écran — vu à 390 px). */
.ligne2__groupe,
.ligne2__bloc,
.rezoo-toolbar__compte { flex: 0 0 auto; }
/* Les widgets du header (3 états, 📧) sont un peu compacts dans la ligne 2 */
.page-header__ligne2 .statut-toggle,
.page-header__ligne2 .notify-wrapper { transform: scale(0.85); transform-origin: left center; }

/* --- Répartition responsive de la recherche ---
   ✅ 2026.09.30f : la recherche reste TOUJOURS dans la ligne 1 dès 769 px (elle
   y est l'un des 3 éléments de gauche : 🔧 Admin · 🔍 recherche · 🎮 Proposer).
   Elle ne « descend » plus en ligne 2 sous 1360 px : sa LARGEUR est réduite par
   paliers (`--larg-recherche`, voir le bloc en fin de fichier). Le champ de la
   ligne 2 ne sert donc plus qu'aux écrans ≤ 768 px, où la vue « cartes »
   remplace le tableau et où la ligne 1 n'a plus ses zones gauche/droite. */
@media (min-width: 769px) {
  .ligne2__recherche { display: none; }
}

/* ≥769 px : titre centré (position absolue) + groupe de droite plaqué à droite */
@media (min-width: 769px) {
  /* Réserve à droite pour ☀️ / 🚪 (boutons en position absolue) : partagée par
     la ligne 1 et la ligne 2 pour que rien ne passe dessous.
     ✅ 2026.09.30d : cette valeur n'est plus qu'un REPLI. Sur ReZoo.html, ui.js
     publie la réserve RÉELLE (majReserveDroite) : elle rétrécit avec les boutons
     au fil des états du bandeau (normal ≈150 · .mid ≈113 · .shrink ≈54), sinon
     ❓ s'arrêtait loin de 🚪 en barre réduite et le titre se décentrait. */
  .page-header { --reserve-droite: 150px; }
  /* box-sizing indispensable : sans lui, le padding-right s'AJOUTE à la
     largeur (100%) et la ligne déborde. */
  .title-line,
  .page-header__ligne2 {
    padding-right: var(--reserve-droite);
    box-sizing: border-box;
  }
  /* ⚠️ 2026.09.30d : AUCUNE transition sur ce retrait. Une transition de
     `padding-right` ferait diverger pendant 0,2 s la valeur publiée
     (`--reserve-droite`) et le retrait réellement appliqué : ❓ chevaucherait 🚪
     et le titre glisserait à chaque changement d'état (défilement). Le retrait
     change d'un coup, en même temps que les boutons qu'il protège. */
  /* Titre centré sur la ZONE UTILE (la bande réservée à ☀️ / 🚪 est exclue).
     En position absolue, il ne peut JAMAIS pousser les boutons. */
  .page-header .title-line .title-text {
    position: absolute;
    left: calc(50% - var(--reserve-droite) / 2);
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .title-line #togglePlanning { margin-left: auto; }
  /* ✅ 2026.09.30g : le curseur de transparence suit l'axe du TITRE.
     Sur un bandeau à une seule ligne (proposals.html), le titre est en
     position absolue à `left: calc(50% - --reserve-droite / 2)` (centré sur
     la zone utile, la bande de ☀️ / 🚪 exclue) tandis que le curseur, simple
     enfant du bandeau en `align-items: center`, restait centré sur TOUTE la
     largeur : il apparaissait décalé de `--reserve-droite / 2` vers la droite
     (75 px à la réserve par défaut de 150 px — mesuré). On lui applique le
     même décalage, avec la MÊME variable : il reste donc sous le titre quand
     ui.js ajuste la réserve (aucune transition ici, comme pour le titre).
     ReZoo.html n'est pas touché : son curseur vit dans la ligne 2
     (`--ligne2`), où il est déjà aligné sur la zone utile par la grille. */
  .page-header:not(.page-header--ligne2) #transparencySlider {
    position: relative;
    left: calc(var(--reserve-droite, 150px) / -2);
  }
}

/* Titre un peu plus compact quand la place est comptée (sous le seuil où la
   recherche revient en ligne 1) */
@media (min-width: 769px) and (max-width: 1359px) {
  .page-header .title-text { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
}

/* Sur écrans moyens, on resserre le groupe de droite pour que le titre centré
   ne soit jamais percuté (le sélecteur de présence et les alertes mail, plus
   larges, vivent dans la ligne 2, donc rien n'est perdu). */
@media (max-width: 1099px) {
  .title-line #authBtn .auth-libelle { display: none; }
}
@media (max-width: 980px) {
  .title-line #togglePlanning .planning-libelle { display: none; }
}
/* Très petits téléphones (≤340px) : titre légèrement réduit pour rester à
   l'écart de ☰ et du bouton 🔍 */
@media (max-width: 340px) {
  .page-header .title-text { font-size: 1.5rem; }
}

/* ≤768 px (mobile) : le titre reste dans le flux (comme avant), la recherche
   et les réglages vivent dans la ligne 2, et Présence / alertes mail restent
   dans le menu ☰ (pas de doublon). */
@media (max-width: 768px) {
  .page-header .title-line .title-text {
    position: static;
    transform: none;
    margin: 0 0.5em;
  }
  .page-header .outils-toggle,
  .page-header.shrink .outils-toggle {
    position: absolute;
    left: 46px;          /* juste à droite du ☰ (10px + ~35px de large) */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;  /* assez petit pour ne pas percuter le titre (≤320px) */
    padding: 0;
    z-index: 1001;
  }
  .outils-toggle__large { display: none; }
  .outils-toggle__petit { display: inline; }
  /* ✅ 2026.10.10a : ☰ / 🔍 / ☀️ ancrés à la LIGNE DU TITRE (variable mesurée
     en JS par ui.js → majHauteurHeader) et non plus au centre du bandeau
     entier : quand la ligne 2 (zone de recherche) s'affichait, le bandeau
     grandissait et `top: 50%` faisait « tomber » les icônes sous la barre de
     titre. Scopé `.page-header--ligne2` (ReZoo.html) : le bandeau 1 ligne de
     proposals.html n'a pas de ligne 2 et gardait déjà le bon centrage. */
  .page-header--ligne2 .menu-toggle,
  .page-header--ligne2 .theme-btn,
  .page-header--ligne2 .outils-toggle,
  .page-header--ligne2.shrink .outils-toggle {
    top: var(--rezoo-titre-cy, 25px);
  }
  .page-header__ligne2 { font-size: 0.78rem; margin-top: 4px; }
  /* Chaque groupe prend sa propre rangée ; la recherche aussi (sinon son
     `width:100%` élargit le conteneur flex et le compteur déborde). */
  .ligne2__gauche { flex: 1 1 100%; }
  .ligne2__recherche { flex: 1 1 100%; width: auto; max-width: none; }
  /* Le compteur occupe sa propre ligne : rendu déterministe, insensible aux
     variations de largeur de police (sinon son texte pouvait être tronqué). */
  .rezoo-toolbar__compte { flex: 1 1 100%; }
  .ligne2__droite { margin-left: 0; }
  /* Ces réglages sont dans le menu ☰ sur mobile */
  .ligne2__bloc { display: none !important; }
}

/* ============================================================
   ✅ 2026.09.30e : ÉQUILIBRE VERTICAL DE LA LIGNE 2
   ------------------------------------------------------------
   Les items de la ligne 2 doivent être centrés entre le trait qui
   la sépare de la ligne 1 (`::before`) et la ligne de séparation du
   bandeau (le `border-bottom` de `.page-header`). Mesures avant :
   ~6 px au-dessus des items contre 13 à 26 px en dessous → ils
   paraissaient « posés haut ». On remonte donc le trait
   (margin-top 6 → 4 px) ET la ligne du bas (padding-bottom 10 → 5 px).
   Bénéfice secondaire : le bandeau est ~7 px plus court, donc la zone
   info remonte d'autant (`--rezoo-header-h`, voir ui.js).
   ⚠️ Les états `.mid` / `.shrink` gardent leurs paddings symétriques
   (règles plus spécifiques, plus haut dans ce fichier).
   ============================================================ */
.page-header--ligne2 { padding-bottom: 5px; }
.page-header--ligne2 .page-header__ligne2 { margin-top: 4px; }

/* ✅ 2026.09.30e : le padding haut de `.content` (10 px, layout.css) s'AJOUTAIT
   à la respiration calculée en JS : l'écart réel bandeau → zone info était donc
   de ECART_SOUS_BANDEAU + 10 + 3 px. On le neutralise sur la page à bandeau
   2 lignes, pour que `ECART_SOUS_BANDEAU` (assets/js/ui.js → ligne ~139) soit
   la SEULE valeur à modifier. Côtés et bas gardent leur inset.
   ⚠️ Uniquement ≥769 px : en mobile, le sélecteur `.mobile-nav-select` est
   collé au haut du contenu (margin-top négatif) et a besoin de ces 6 px. */
@media (min-width: 769px) {
  .page-header--ligne2 ~ .content { padding-top: 0; }
}

/* ============================================================
   ✅ 2026.09.30 (v2) : RÉPARTITION DÉFINITIVE DU BANDEAU 2 LIGNES
   ------------------------------------------------------------
   LIGNE 1 (grille 3 colonnes) :
     GAUCHE · 🔧 Admin (bord gauche) · 🔍 recherche (centrée entre Admin et
              🎮 Proposer) · 🎮 Proposer (collé à gauche du titre)
     CENTRE · titre, centré sur la zone utile (réserve ☀️ / 🚪 exclue)
     DROITE · 📅 Planning · ❓ Aide · 🔐 Se connecter, plaqués à droite :
              ❓ reste juste à gauche de 🚪 / ☀️, MÊME en barre réduite
              (.shrink) — le groupe ne glisse plus vers le centre.
   LIGNE 2 (grille 3 colonnes) :
     GAUCHE · Tri / Patch / compteur → centrés entre le bord gauche et le curseur
     CENTRE · curseur de transparence → centré sur la zone utile
     DROITE · Présence / alertes mail → centrés entre le curseur et la droite
   Le trait de séparation est un pseudo-élément qui s'arrête AVANT 🚪 / ☀️
   (réserve --reserve-droite) : il ne coupe plus les deux boutons.
   Tout est scopé .page-header--ligne2 (ReZoo.html) : le bandeau de
   proposals.html (1 ligne, sans recherche ni ⚙️) n'est pas touché.
   ============================================================ */

/* --- Boîte de recherche : champ + bouton ✕ (vide la recherche) --- */
.recherche__boite {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}
/* Le champ remplit sa boîte : les largeurs historiques sont portées par la boîte */
.page-header .recherche__boite > input[type="search"] {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 26px;   /* place pour le ✕ */
}
/* Le ✕ natif de WebKit ferait doublon avec le nôtre */
.page-header .recherche__boite > input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.recherche__boite .recherche__vider {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 2px 5px;
  opacity: 0.65;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.recherche__boite .recherche__vider:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.recherche__boite .recherche__vider[hidden] { display: none; }

/* --- Largeurs de la recherche : UNE variable, des paliers ---
   ✅ 2026.09.30f : `--larg-recherche` (définie par paliers plus bas) porte la
   largeur de la boîte ; les états .mid / .shrink en dérivent (ils étaient
   réglés « en dur » à 180/150 px, ce qui les rendait plus LARGES que la base
   sur les petits écrans). Un seul champ de recherche est actif à la fois :
   celui de la ligne 1 dès 769 px, celui de la ligne 2 (mobile) en dessous.
   ✅ 2026.09.30g : la réduction suit désormais une PROPORTION du palier.
   Avant, l'amplitude était en pixels fixes (−30 puis −50 px) : sur un
   palier de 240 px la boîte ne perdait que 21 % (à peine visible à l'œil),
   et sur 140 px le plancher `min-width: 110px` annulait la réduction
   (−50 px → 110 px au lieu de 90 px). `.shrink` vaut maintenant 55 % du
   palier et `.mid` 78 %, avec des planchers bas (72 / 96 px) qui ne
   mangent plus l'effet ; la largeur est animée pour que le repli se voie. */
@media (min-width: 769px) {
  .titre__gauche .recherche__boite {
    width: var(--larg-recherche, 240px);
    max-width: var(--larg-recherche, 240px);
    min-width: 72px;
    transition: width 0.2s ease, max-width 0.2s ease;
  }
  .page-header.mid .titre__gauche .recherche__boite {
    width: max(96px, calc(var(--larg-recherche, 240px) * 0.78));
    max-width: max(96px, calc(var(--larg-recherche, 240px) * 0.78));
  }
  .page-header.shrink .titre__gauche .recherche__boite {
    width: max(72px, calc(var(--larg-recherche, 240px) * 0.55));
    max-width: max(72px, calc(var(--larg-recherche, 240px) * 0.55));
  }
  .ligne2__gauche .recherche__boite { display: none; }
}

/* --- Desktop (≥769 px) : grille de la ligne 1 --- */
@media (min-width: 769px) {
  .page-header--ligne2 .title-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    padding-right: var(--reserve-droite);
    box-sizing: border-box;
  }
  .page-header--ligne2 .titre__gauche {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }
  /* 🔍 centrée entre 🔧 Admin (1er enfant) et 🎮 Proposer (dernier enfant) */
  .page-header--ligne2 .titre__gauche .recherche__boite { margin: 0 auto; }
  /* ✅ 2026.09.30d : les éléments de droite ne sont plus plaqués en bloc au bord :
     📅 Planning se colle à droite du titre (flex-start), et le couple
     [🔐 Se connecter · ❓ Aide] part au bord droit de la zone utile
     (`margin-left: auto` sur .titre__fin) → ❓ reste juste à gauche de 🚪. */
  .page-header--ligne2 .titre__droite {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
  }
  .page-header--ligne2 .titre__droite > .titre__fin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  /* Le titre est une cellule de la grille : centré sur la zone utile (les deux
     colonnes latérales ont la même largeur) et plus rien ne peut le percuter. */
  .page-header--ligne2 .title-line .title-text {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    margin: 0 0.5em;
  }
  /* Espacement par le `gap` de .titre__droite : plus de margin-left:auto ni de
     `margin: 0 2px` au repli (c'est ce qui recentrait tout le groupe). */
  .page-header--ligne2 .title-line #togglePlanning { margin-left: 0; }
  /* ⚙️ retiré du bandeau desktop (la ligne 2 y est toujours ouverte) : il ne
     reste que le 🔍 mobile comme accès à la recherche / aux filtres. */
  .page-header--ligne2 #outilsToggle { display: none; }

  /* --- Desktop (≥769 px) : grille de la ligne 2 --- */
  .page-header--ligne2 .page-header__ligne2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 6px 16px;
    border-top: 0;            /* remplacé par ::before, plus court */
    position: relative;
  }
  /* Trait de séparation : du bord gauche au bord de la zone utile → il s'arrête
     AVANT 🚪 et ☀️ (qui chevauchent les deux lignes du bandeau). */
  .page-header--ligne2 .page-header__ligne2::before {
    content: "";
    position: absolute;
    left: 0;
    right: var(--reserve-droite, 150px);
    top: 0;
    border-top: 1px solid var(--header-border, #ccc);
    pointer-events: none;
    /* Pas de transition ici non plus : le trait doit s'arrêter au même endroit
       que la zone utile, sans décalage pendant 0,2 s. */
  }
  .page-header--ligne2 .ligne2__gauche { justify-content: center; }
  .page-header--ligne2 .ligne2__droite { justify-content: center; margin-left: 0; }
  .page-header--ligne2 .ligne2__slider {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
}

/* --- Mobile (≤768 px) : zones de la ligne 1 masquées (leur contenu l'est déjà)
       et ligne 2 de nouveau empilée, comme avant. --- */
@media (max-width: 768px) {
  .page-header--ligne2 .titre__gauche,
  .page-header--ligne2 .titre__droite { display: none; }
  .page-header--ligne2 .ligne2__gauche .recherche__boite {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
  .page-header--ligne2 .page-header__ligne2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-top: 0;
    position: relative;
  }
  /* Trait plus court aussi sur mobile : il ne coupe pas le ☀️ (right: 10px) */
  .page-header--ligne2 .page-header__ligne2::before {
    content: "";
    position: absolute;
    left: 0;
    right: 52px;
    top: 0;
    border-top: 1px solid var(--header-border, #ccc);
  }
  .page-header--ligne2 .ligne2__slider { display: none; }  /* curseur dans le menu ☰ */
}

/* ============================================================
   ✅ 2026.09.30f : RECHERCHE TOUJOURS EN LIGNE 1 + LIBELLÉS-ICÔNES
   ------------------------------------------------------------
   1) La recherche de la ligne 1 ne « descend » plus en ligne 2 sous
      1360 px : sa largeur suit des paliers (`--larg-recherche`) pour que
      les 3 éléments de gauche (🔧 Admin · 🔍 recherche · 🎮 Proposer)
      tiennent dans leur colonne quel que soit l'écran ≥ 769 px.
      Les paliers se CHEVAUCHENT volontairement : même spécificité, donc
      c'est le dernier déclaré qui gagne (du plus large au plus étroit).
   2) Sous 1200 px, les libellés du bandeau passent en icônes (🔧, 🎮 ;
      📅 l'est sous 980 px et 🔐 sous 1100 px) : la place récupérée est
      réinvestie dans la recherche. Le sens reste porté par les
      `aria-label` / `title`.
   3) Pages à bandeau 1 LIGNE (proposer) : le titre y est en position
      absolue, si bien que le bouton Admin injecté par admin-button.js se
      retrouvait SEUL dans le flux de `.title-line` (justify-content:
      center) → il s'affichait au milieu du bandeau, comme le titre. On
      remet ce flux à gauche : Admin (et Proposer, s'il existait) se
      rangent au bord gauche, dans l'ordre du DOM, sans se chevaucher.
   ============================================================ */
.page-header { --larg-recherche: 240px; }
@media (min-width: 769px) and (max-width: 1359px) { .page-header { --larg-recherche: 210px; } }
@media (min-width: 769px) and (max-width: 1199px) { .page-header { --larg-recherche: 180px; } }
@media (min-width: 769px) and (max-width: 1023px) { .page-header { --larg-recherche: 160px; } }
@media (min-width: 769px) and (max-width: 899px)  { .page-header { --larg-recherche: 140px; } }

@media (max-width: 1199px) {
  .title-line #adminButton .admin-libelle,
  .title-line #proposalButton .proposal-libelle { display: none; }
}

@media (min-width: 769px) {
  .page-header:not(.page-header--ligne2) .title-line { justify-content: flex-start; }
}



/* ============================================================
   ✅ 2026.10.01b : VERSION DU SITE — étiquette discrète (version.js).
   Ligne 2 du bandeau, à gauche, juste sous 🔧 Admin.
   Position ABSOLUE : l'étiquette ne déplace RIEN (la recherche et le titre
   gardent exactement la géométrie validée des lots précédents).
   ✅ 2026.10.01e : VISIBLE SUR TOUTES LES LARGEURS (le `display:none` sous
   1360 px est supprimé) et posée en BAS À GAUCHE de la ligne 2.
   ✅ 2026.10.01f : valeurs de contraste rectifiées ci-dessous — le commentaire
   annonçait encore 9,8:1 (#bbb) alors que le fichier porte #c8c8c8.
   Contraste vérifié (sonde probe-version) : 6,5:1 en thème clair
   (#555 sur #f0f0f0), 11,3:1 en thème sombre (#c8c8c8 sur #111) — AA/AAA.
   ============================================================ */
.rezoo-version {
  font-size: 0.72em;
  color: #555;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: help;
  z-index: 2;
}
.page-header__ligne2 { position: relative; }
/* ✅ 2026.10.01d : ligne 2, à GAUCHE, sous 🔧 Admin.
   Positionnée en BAS À GAUCHE (et non centrée) pour ne jamais chevaucher la
   recherche, et VISIBLE SUR TOUTES LES LARGEURS (l'ancien `display:none` sous
   1360 px était la raison pour laquelle elle n'apparaissait pas). */
.page-header__ligne2 .ligne2__gauche .rezoo-version {
  position: absolute;
  left: 6px;
  bottom: 1px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  padding: 0 4px;
}
body[data-theme="dark"] .rezoo-version { color: #c8c8c8; }
.admin-header .rezoo-version,
.rezoo-version--admin { color: #bbbbbb; font-weight: 400; position: static; background: none; padding: 0; }