/* entete.css — nouvel en-tête commun de la GMAO (lot A, 27/10/2026). Voir entete.php.
   Une seule ligne, légèrement floutée, collée en haut de la page (position: sticky, dans le flux : la page n'a plus besoin
   de réserver de la place avec un padding-top). Deux fonds :
     data-fond="photo" : verre sombre (pages à fond photo, comme aujourd'hui) ;
     data-fond="theme" : clair ou sombre selon <html data-theme="dark"> (pages KPI, Idées…). */

body.gm-on { padding-top: 0 !important; margin-top: 0; }
/* le bouton maison flottant des anciennes pages (aides…) fait doublon avec celui de l'en-tête */
body.gm-on .btn-floating-nav { display: none !important; }
.gm-hd { margin-bottom: 10px; }

.gm-hd {
  --gm-h: 64px;
  position: sticky; top: 0; z-index: 1000; box-sizing: border-box; width: 100%;
  height: var(--gm-h); display: flex; align-items: center; gap: 14px; padding: 0 20px;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; font-size: 14px; line-height: 1.4; text-align: left;
  color: var(--gm-i); background: var(--gm-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--gm-line); box-shadow: var(--gm-sh);
  transition: height .25s, background .3s, box-shadow .3s, transform .25s;
}
.gm-hd *, .gm-hd *::before, .gm-hd *::after { box-sizing: border-box; }
.gm-hd.scrolled { --gm-h: 56px; }
.gm-hd.gm-hidden { transform: translateY(-100%); }

/* ---- fonds ---- */
.gm-hd[data-fond="photo"], html[data-theme="light"] .gm-hd[data-fond="photo"] {
  --gm-i: #fff; --gm-bg: linear-gradient(rgba(10,16,28,.42), rgba(10,16,28,.42)); --gm-line: rgba(255,255,255,.16);
  --gm-sh: 0 10px 26px -14px rgba(0,0,0,.6); --gm-g: rgba(255,255,255,.13); --gm-gl: rgba(255,255,255,.3); --gm-gh: rgba(255,255,255,.24);
  --gm-s: rgba(255,255,255,.72); --gm-menu: #fff; --gm-mink: #14203a; --gm-msoft: #5d6b86; --gm-mline: #e6ebf4;
}
.gm-hd[data-fond="theme"] {
  --gm-i: #14203a; --gm-bg: rgba(255,255,255,.76); --gm-line: rgba(20,32,58,.09); --gm-sh: 0 10px 26px -18px rgba(20,50,110,.5);
  --gm-g: #fff; --gm-gl: #d6dff0; --gm-gh: #eef3fc; --gm-s: #5d6b86; --gm-menu: #fff; --gm-mink: #14203a; --gm-msoft: #5d6b86; --gm-mline: #e6ebf4;
}
html[data-theme="dark"] .gm-hd[data-fond="theme"] {
  --gm-i: #eef3ff; --gm-bg: rgba(14,22,40,.74); --gm-line: rgba(255,255,255,.09); --gm-sh: 0 12px 28px -16px rgba(0,0,0,.8);
  --gm-g: rgba(255,255,255,.07); --gm-gl: rgba(255,255,255,.14); --gm-gh: rgba(255,255,255,.13); --gm-s: #9aa8c4;
  --gm-menu: #16213b; --gm-mink: #eef3ff; --gm-msoft: #9aa8c4; --gm-mline: #26324f;
}

/* ---- bouton maison / retour ---- */
.gm-hd .gm-home, .gm-hd .gm-back {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; text-decoration: none; font-size: 1rem;
  color: var(--gm-i); background: var(--gm-g); border: 1px solid var(--gm-gl); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: .2s;
}
.gm-hd .gm-home:hover { background: rgba(46,204,113,.28); border-color: rgba(46,204,113,.65); transform: translateY(-1px); }
.gm-hd .gm-back { display: none; }

/* ---- fil d'Ariane ---- */
.gm-crumb { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.gm-crumb a, .gm-crumb span.mid { color: var(--gm-s); text-decoration: none; transition: .15s; }
.gm-crumb a:hover { color: var(--gm-i); text-decoration: underline; }
.gm-crumb .sep { font-size: .55rem; opacity: .55; }
.gm-crumb .cur { color: var(--gm-i); font-weight: 800; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gm-grow { flex: 1; min-width: 8px; }

/* ---- pastilles ---- */
.gm-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 99px; font-size: .7rem; font-weight: 700; color: var(--gm-i); background: var(--gm-g); border: 1px solid var(--gm-gl); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-decoration: none; white-space: nowrap; transition: .15s; }
.gm-pill:hover { background: var(--gm-gh); }
.gm-lang { display: inline-flex; gap: 2px; padding: 3px; height: 36px; border-radius: 12px; background: var(--gm-g); border: 1px solid var(--gm-gl); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gm-lang a { display: grid; place-items: center; padding: 0 10px; border-radius: 9px; font-size: .7rem; font-weight: 800; color: var(--gm-s); text-decoration: none; transition: .15s; }
.gm-lang a:hover { color: var(--gm-i); }
.gm-lang a.on { background: var(--gm-gh); color: var(--gm-i); box-shadow: inset 0 0 0 1px var(--gm-gl); }
.gm-regime { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; cursor: default; border: 1px solid var(--gm-gl); color: var(--gm-i); }
.gm-regime.r4 { background: rgba(46,204,113,.28); border-color: rgba(46,204,113,.6); }
.gm-regime.r3 { background: rgba(243,156,18,.3); border-color: rgba(243,156,18,.7); }

/* ---- bouton clair / sombre (pages qui le demandent) ---- */
.gm-theme { position: relative; width: 64px; height: 36px; flex: none; border-radius: 12px; border: 1px solid var(--gm-gl); background: var(--gm-g); cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: space-between; }
.gm-theme .knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 9px; background: var(--gm-i); transition: transform .28s cubic-bezier(.3,1.3,.5,1); box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); }
html[data-theme="dark"] .gm-theme .knob { transform: translateX(28px); }
.gm-theme i { position: relative; z-index: 1; width: 32px; text-align: center; font-size: .78rem; color: var(--gm-s); }
html:not([data-theme="dark"]) .gm-theme .fa-sun { color: var(--gm-bg-ink, #fff); }
html[data-theme="dark"] .gm-theme .fa-moon { color: #0a1020; }
.gm-hd[data-fond="photo"] .gm-theme .fa-sun { color: #14203a; }

/* ---- badge de connexion + menu ---- */
.gm-user { position: relative; flex: none; }
.gm-ubtn { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 99px; background: var(--gm-g); border: 1px solid var(--gm-gl); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--gm-i); cursor: pointer; transition: .15s; max-width: 300px; font: inherit; }
.gm-ubtn:hover, .gm-ubtn[aria-expanded="true"] { background: var(--gm-gh); }
.gm-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; position: relative; flex: none; }
.gm-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: gm-pl 2s infinite; opacity: .6; }
@keyframes gm-pl { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.gm-uav { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; flex: none; background: var(--gm-gh); border: 1px solid var(--gm-gl); }
.gm-utx { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; text-align: left; }
.gm-utx b { font-size: .8rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.gm-utx small { font-size: .62rem; font-weight: 700; color: var(--gm-s); letter-spacing: .05em; text-transform: uppercase; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-ubtn .gm-chev { font-size: .6rem; opacity: .65; transition: .2s; }
.gm-ubtn[aria-expanded="true"] .gm-chev { transform: rotate(180deg); }
.gm-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; max-width: calc(100vw - 24px); background: var(--gm-menu); color: var(--gm-mink); border: 1px solid var(--gm-mline); border-radius: 18px; box-shadow: 0 26px 60px -18px rgba(0,0,0,.55); padding: 8px; display: none; z-index: 5; }
.gm-menu.on { display: block; animation: gm-mn .18s ease; }
@keyframes gm-mn { from { opacity: 0; transform: translateY(-6px); } }
.gm-mid { display: flex; gap: 12px; align-items: center; padding: 12px 12px 14px; border-bottom: 1px solid var(--gm-mline); margin-bottom: 6px; }
.gm-mid .big { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #2f6fed, #5b9bff); color: #fff; display: grid; place-items: center; font-size: 1.05rem; font-weight: 800; flex: none; }
.gm-mid b { display: block; font-size: .92rem; } .gm-mid span { font-size: .74rem; color: var(--gm-msoft); }
.gm-mit { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 11px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--gm-mink); text-decoration: none; cursor: pointer; }
.gm-mit:hover { background: rgba(47,111,237,.09); } .gm-mit i { width: 18px; text-align: center; color: var(--gm-msoft); } .gm-mit small { margin-left: auto; color: var(--gm-msoft); font-weight: 700; }
.gm-mit.out, .gm-mit.out i { color: #e0483a; } .gm-mit.out:hover { background: rgba(224,72,58,.1); }
.gm-mlang { display: none; padding: 8px 12px 10px; border-top: 1px solid var(--gm-mline); margin-top: 6px; }
.gm-mlang .gm-lang { background: transparent; border-color: var(--gm-mline); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gm-mlang .gm-lang a { color: var(--gm-msoft); } .gm-mlang .gm-lang a.on { background: rgba(47,111,237,.12); color: #2f6fed; box-shadow: none; }

/* ---- adaptation à la largeur de l'écran ---- */
@media (max-width: 1000px) {
  .gm-hd { padding: 0 14px; gap: 10px; }
  .gm-utx small, .gm-ver { display: none; }
  .gm-crumb .mid, .gm-crumb .mid + .sep { display: none; }
  .gm-regime .long { display: none; }
}
@media (max-width: 720px) {
  .gm-hd:not(.gm-anon) .gm-right > .gm-lang { display: none; } /* visiteur non connecté : pas de menu, la langue reste visible */
  .gm-mlang { display: block; }
}
@media (max-width: 560px) {
  .gm-hd { --gm-h: 60px; }
  .gm-hd .gm-home { display: none; } .gm-hd .gm-back { display: grid; }
  .gm-crumb .pre, .gm-crumb .pre + .sep, .gm-crumb .mid { display: none; }
  .gm-utx { display: none; } .gm-ubtn { padding: 0 10px; }
  .gm-regime { padding: 0 9px; } .gm-regime i { display: none; }
  .gm-menu { width: min(290px, calc(100vw - 24px)); }
}
@media screen and (max-height: 480px) { .gm-hd.scrolled { --gm-h: 52px; } }
@media print { .gm-hd { display: none !important; } }
body.tvmode .gm-hd { display: none; }

/* ---- pages avec une barre d'outils propre (Planning) : centre (navigation de période) + actions (vues, « Aujourd'hui »)
   Le groupe de droite (.gm-right) est un vrai bloc seulement dans ce cas : le script du Planning le mesure pour retirer, un à un,
   ses éléments secondaires quand la place manque (classes hd-sans-version, hd-today-icone, hd-nom-court, hd-sans-langue, hd-sans-nom). */
.gm-right { display: contents; }
.gm-multi { margin-bottom: 0; }
.gm-multi .gm-crumb { flex: none; } /* le titre de la page ne doit jamais être écrasé : la mesure retire d'abord des éléments à droite */
.gm-multi .gm-right { display: flex; align-items: center; gap: 12px; flex: none; }
.gm-actions { display: flex; align-items: center; gap: 12px; }
.gm-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; }
.gm-hd .gm-center .week-nav-center { position: static !important; transform: none !important; }
.gm-hd .hd-right.hd-sans-version .gm-ver { display: none; }
.gm-hd .hd-right.hd-nom-court .gm-utx b { max-width: 84px; }
.gm-hd .hd-right.hd-sans-langue > .gm-lang { display: none; }
.gm-hd .hd-right.hd-sans-nom .gm-utx { display: none; }
.gm-hd .hd-right.hd-sans-langue .gm-mlang { display: block; } /* la langue reste accessible dans le menu du badge */
.gm-hd.hd-flux .gm-center { position: static; transform: none; }
.gm-hd.hd-flux .gm-grow { display: none; }
.gm-hd.hd-flux .gm-crumb { margin-right: auto; }
.gm-hd.hd-compact .mode-vue-btn { padding: 7px 9px; font-size: .74rem; }
.gm-hd.hd-compact .week-label { min-width: 0; font-size: 1.3rem; }
.gm-hd.hd-compact .gm-ubtn { padding: 0 8px; gap: 6px; }
@media (min-width: 721px) and (max-width: 900px) {
  /* tablette : la période et les boutons de vue prennent la place ; le bouton maison suffit pour revenir à l'accueil */
  .gm-multi .gm-crumb { display: none; }
}
@media (max-width: 720px) {
  /* téléphone : la barre passe sur deux lignes (retour + titre + badge, puis période au centre, puis vues) */
  .gm-multi { height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .gm-multi .gm-right { display: contents; }
  .gm-multi .gm-center { position: static; transform: none; order: 10; flex: 1 0 100%; justify-content: center; }
  .gm-multi .gm-actions { order: 11; flex: 1 0 100%; justify-content: center; flex-wrap: wrap; gap: 8px; }
  .gm-hd.gm-multi .mode-vue-btn { white-space: nowrap; padding: 7px 10px; }
  .gm-hd.gm-multi .btn-today { padding: 8px 11px; }
  .gm-hd.gm-multi .btn-today .btn-today-ico { display: inline; }
  .gm-hd.gm-multi .btn-today .btn-today-txt { display: none; }
}

/* ---- « Mes BI » : pastille, compteurs et volet déroulant (maquette A du 29/10/2026) ---- */
.gm-bi { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.gm-bimini { display: flex; gap: 5px; }
.gm-bimini span { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 99px; font-size: .68rem; font-weight: 800; background: var(--gm-g); border: 1px solid var(--gm-gl); color: var(--gm-i); }
.gm-bimini span b { font-weight: 900; }
.gm-bimini .u { background: #fff; border-color: rgba(231,76,60,.55); color: #e74c3c; } /* urgent : texte rouge sur fond blanc */
.gm-udot { width: 9px; height: 9px; border-radius: 50%; background: #e74c3c; position: relative; flex: none; } /* point rouge qui pulse comme le point vert du badge de connexion */
.gm-udot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: gm-pl 2s infinite; opacity: .6; }
.gm-bimini .f b { color: #ffb84d; } .gm-bimini .e b { color: #7db8ff; }
.gm-hd[data-fond="theme"] .gm-bimini .f b { color: #b87300; } .gm-hd[data-fond="theme"] .gm-bimini .e b { color: #1d5fa8; }
html[data-theme="dark"] .gm-hd[data-fond="theme"] .gm-bimini .f b { color: #ffb84d; } html[data-theme="dark"] .gm-hd[data-fond="theme"] .gm-bimini .e b { color: #7db8ff; }
.gm-bibtn { white-space: nowrap; flex: none; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 13px; border-radius: 99px; background: var(--gm-g); border: 1px solid var(--gm-gl); color: var(--gm-i); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.gm-bibtn:hover, .gm-bibtn[aria-expanded="true"] { background: var(--gm-gh); }
.gm-bicnt { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: #2f6fed; color: #fff; font-size: .78rem; font-weight: 900; }
.gm-bibtn.hasurg .gm-bicnt { background: #e74c3c; position: relative; }
.gm-bibtn.hasurg .gm-bicnt::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background: #e74c3c; animation: gm-pl 2s infinite; opacity: .6; z-index: -1; } /* même pulsation que le badge de connexion */
.gm-bibtn.zero .gm-bicnt { background: rgba(46,204,113,.9); }
@keyframes gm-urg { 0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,.32); } 50% { box-shadow: 0 0 0 5px rgba(231,76,60,0); } }
@media (prefers-reduced-motion: reduce) { .gm-udot::after, .gm-bibtn.hasurg .gm-bicnt::after { animation: none; } }
.gm-bipanel { position: absolute; z-index: 1100; right: 0; top: calc(100% + 10px); width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); overflow-y: auto; background: var(--gm-menu); color: var(--gm-mink); border: 1px solid var(--gm-mline); border-radius: 18px; box-shadow: 0 26px 60px -18px rgba(0,0,0,.55); padding: 8px; display: none; text-align: left; }
.gm-bipanel.on { display: block; animation: gm-mn .18s ease; }
.gm-bih { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--gm-mline); margin-bottom: 6px; }
.gm-bih b { font-size: .9rem; } .gm-bih span { font-size: .72rem; color: var(--gm-msoft); font-weight: 700; }
.gm-bi-item { display: flex; gap: 11px; padding: 10px 12px; border-radius: 13px; text-decoration: none; color: var(--gm-mink); border-left: 4px solid #8695a3; margin: 3px 0; background: rgba(127,140,170,.06); }
.gm-bi-item.af { border-left-color: #f39c12; } .gm-bi-item.ec { border-left-color: #3498db; }
.gm-bi-item:hover { background: rgba(47,111,237,.1); }
.gm-bi-item.ur { border-left-color: #e74c3c; background: rgba(231,76,60,.07); }
.gm-bi-main { flex: 1; min-width: 0; }
.gm-bi-item .l1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .gm-bi-item .num { font-size: .8rem; font-weight: 900; }
.gm-bi-item .l2 { font-size: .78rem; font-weight: 600; margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.gm-bi-item .l3 { font-size: .7rem; color: var(--gm-msoft); margin-top: 2px; }
.gm-bi-item .ago { margin-left: auto; font-size: .66rem; color: var(--gm-msoft); font-weight: 700; white-space: nowrap; padding-top: 2px; }
.gm-st { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 2px 9px; font-size: .66rem; font-weight: 800; white-space: nowrap; }
.gm-st i { font-size: .56rem; } .gm-st.af { background: #fff1d4; color: #9a6200; } .gm-st.ec { background: #dcecff; color: #1d5fa8; }
.gm-urg { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 2px 8px; font-size: .62rem; font-weight: 900; letter-spacing: .05em; background: #fff; color: #e74c3c; border: 1px solid rgba(231,76,60,.55); }
.gm-bi-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 4px 2px; padding: 10px; border-radius: 11px; background: rgba(47,111,237,.1); color: #2f6fed; font-weight: 800; font-size: .8rem; text-decoration: none; }
.gm-bivide { padding: 22px 14px; text-align: center; color: var(--gm-msoft); font-size: .84rem; } .gm-bivide i { display: block; font-size: 1.6rem; color: #2ecc71; margin-bottom: 6px; }
@media (max-width: 1100px) { .gm-bimini { display: none; } }
@media (max-width: 720px) { .gm-bilt { display: none; } .gm-bibtn { padding: 0 6px 0 11px; } }
@media (max-width: 560px) { .gm-bipanel { position: fixed; left: 12px; right: 12px; width: auto; top: 68px; } }
.gm-multi .gm-bimini, .gm-multi .gm-bilt { display: none; } /* Planning : la place est comptée, seule la pastille avec le chiffre reste */
.gm-multi .gm-bibtn { padding: 0 6px 0 11px; }
.gm-bi-item .l2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* description longue : deux lignes au plus */
.gm-bi-centre .gm-bipanel { left: calc(50% - 200px); right: auto; } /* badges au centre de l'en-tête : le volet s'ouvre juste en dessous, centré */
@media (max-width: 560px) { .gm-bi-centre .gm-bipanel { position: fixed; left: 12px; right: 12px; width: auto; } } /* téléphone : le volet prend toute la largeur, comme avant */