/* L'Observatoire, coque.css : la coque des pages connectées : barre du haut (logo, navigation, espaces, compte),
   menus déroulants, pied de page, en-têtes de page. Une seule feuille de fond gris très clair ; les cadres blancs du
   contenu se posent dessus. */

/* ================================================================ la marque */
.logo { display: block; height: 26px; width: auto; color: var(--produit); }
.logo.blanc { color: #fff; }
.marque { width: 24px; height: 24px; color: var(--produit); }

/* ================================================================ la barre du haut */
.haut { position: sticky; top: 0; height: var(--haut); z-index: 60; background: var(--fond); border-bottom: 1px solid var(--filet); }
.haut-i { max-width: var(--largeur); margin: 0 auto; height: 100%; display: flex; align-items: center; gap: 6px; padding: 0 20px; }
.haut .burger { display: none; width: 40px; height: 40px; border-radius: var(--r); place-items: center; color: var(--encre-2); } .haut .burger:hover { background: var(--appuye); }
.haut .logo-l { display: flex; align-items: center; height: 40px; padding: 0 8px; margin-left: -8px; border-radius: var(--r); color: var(--produit); text-decoration: none; }
.haut .logo-l:hover { background: var(--appuye); }
.haut .zone { display: flex; align-items: center; gap: 12px; margin-left: 10px; padding-left: 14px; font-size: 14px; font-weight: 500; color: var(--encre-3); white-space: nowrap; border-left: 1px solid var(--filet-fort); height: 22px; }
.nav-h { display: flex; align-items: center; gap: 2px; margin-left: 18px; height: 100%; }
.nav-h a { position: relative; display: flex; align-items: center; gap: 7px; height: var(--haut); padding: 0 12px; color: var(--encre-2); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-h a:hover { color: var(--encre); text-decoration: none; } .nav-h a.on { color: var(--encre); font-weight: 600; }
.nav-h a.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--jaune); }
.nav-h a .nb { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--jaune); color: var(--encre); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.haut-d { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.rond { position: relative; width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; color: var(--encre-2); }
.rond:hover, .rond[aria-expanded="true"] { background: var(--appuye); color: var(--encre); } .rond .lucide { width: 19px; height: 19px; }
.moi-b { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 6px 0 5px; margin-left: 4px; border-radius: var(--r); color: var(--encre); }
.moi-b:hover, .moi-b[aria-expanded="true"] { background: var(--appuye); }
.moi-b .qui { display: grid; text-align: left; line-height: 1.2; } .moi-b .qui b { font-size: 13px; font-weight: 600; } .moi-b .qui span { font-size: 11.5px; color: var(--encre-3); }
.moi-b .lucide { width: 15px; height: 15px; color: var(--encre-3); }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--appuye); color: var(--encre-2); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; flex: none; }
.moi-b .av { box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--jaune); }
.av.g { width: 40px; height: 40px; font-size: 14px; }

/* ================================================================ menus déroulants */
@keyframes deroule { from { opacity: 0; transform: translateY(-4px); } }
.deroulant { position: absolute; z-index: 120; top: calc(100% + 6px); right: 0; min-width: 250px; max-width: calc(100vw - 16px); background: var(--surface); border-radius: var(--r-g); box-shadow: var(--ombre-pop); padding: 6px; animation: deroule .14s var(--doux); }
.deroulant a, .deroulant button.item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r); color: var(--encre-2); font-size: 14px; text-decoration: none; text-align: left; }
.deroulant a:hover, .deroulant button.item:hover { background: var(--survol); color: var(--encre); text-decoration: none; }
.deroulant .lucide { width: 16px; height: 16px; color: var(--encre-3); }
.deroulant hr { margin: 6px 4px; border-color: var(--filet-2); }
.menu-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px 10px; }
.menu-tete div { display: grid; line-height: 1.3; min-width: 0; } .menu-tete b { font-size: 14px; } .menu-tete span { font-size: 12.5px; color: var(--encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tete .av { width: 36px; height: 36px; font-size: 13px; }
.deroulant .danger { color: var(--rouge); } .deroulant .danger .lucide { color: var(--rouge); }
.deroulant .titre-m { display: block; padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.z-menu { position: relative; }
/* le sélecteur d'espaces : les applications du réseau */
.espaces { width: 340px; padding: 10px; }
.espaces header { display: grid; gap: 2px; padding: 6px 10px 10px; border-bottom: 1px solid var(--filet-2); margin-bottom: 6px; }
.espaces header b { font-size: 14px; } .espaces header span { font-size: 12.5px; color: var(--encre-3); }
.espace { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: var(--r); color: inherit; text-decoration: none; }
.espace:hover { background: var(--survol); text-decoration: none; } .espace.on { background: var(--miel); }
.espace b { display: block; font-size: 13.5px; } .espace small { display: block; font-size: 12px; color: var(--encre-3); line-height: 1.35; }
.espace em { font-size: 11px; font-weight: 600; color: var(--jaune-texte); font-style: normal; white-space: nowrap; }
.espace-l { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--encre-2); }
.espace-l.obs { background: var(--produit); } .espace-l.obs .marque { color: #fff; width: 26px; height: 26px; }
.espace-l.trousseau { background: var(--encre-2); } .espace-l .lucide { width: 20px; height: 20px; }
.espaces .note-m { padding: 8px 10px 2px; font-size: 12px; color: var(--encre-3); }

/* ================================================================ la page */
.page { max-width: var(--largeur); margin: 0 auto; padding: 24px 20px 72px; }
.page.pleine { max-width: none; }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.tete-t h1 { margin: 0; } .tete-t p { margin-top: 6px; color: var(--encre-3); max-width: 760px; font-size: 14.5px; }
.tete .sur { margin-bottom: 8px; }
.tete .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ariane { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-3); margin-bottom: 12px; }
.ariane a { color: var(--encre-3); } .ariane a:hover { color: var(--encre); } .ariane .lucide { width: 14px; height: 14px; }
.ariane b { font-weight: 500; color: var(--encre-2); }

/* ================================================================ le pied : la bande du réseau, le champ de tuiles */
.pied { position: relative; overflow: hidden; margin-top: 24px; background: linear-gradient(170deg, #0A5F57 0%, var(--vert-fort) 50%, var(--vert-nuit) 100%); color: rgba(255, 255, 255, .8); }
.pied .tuiles { position: absolute; right: -10px; top: -24px; width: 44%; max-width: 560px; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.pied .tuiles .t { fill: rgba(255, 255, 255, .08); } .pied .tuiles .j { fill: var(--jaune); } .pied .tuiles .v { fill: var(--vert); } .pied .tuiles .o { fill: var(--orange); }
.pied-i { position: relative; max-width: var(--largeur); margin: 0 auto; padding: 30px 20px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; font-size: 12.5px; }
.pied-i .reseau { display: flex; align-items: center; gap: 16px; } .pied-i .reseau .cerfrance { height: 30px; width: auto; flex: none; }
.pied-i .reseau span { display: grid; line-height: 1.35; max-width: 520px; } .pied-i .reseau b { color: #fff; font-weight: 600; font-size: 14px; }
.pied-i .gages { grid-column: 1; display: flex; gap: 18px; flex-wrap: wrap; color: rgba(255, 255, 255, .85); } .pied-i .gages li { display: inline-flex; align-items: center; gap: 6px; } .pied-i .gages .lucide { width: 14px; height: 14px; color: var(--jaune); }
.pied-i .opere { grid-column: 2; grid-row: 1 / 3; align-self: end; display: inline-flex; align-items: center; gap: 6px; } .pied-i .opere img { height: 14px; width: auto; filter: brightness(0) invert(1); opacity: .85; }