/**
* MIL — bouton et menu des destinations · ACTIF PARTAGÉ v1
* =========================================================
*
* Source de vérité : MilHub, protected/modules/coopmil-customizations/assets/
* (mil-destinations.css + mil-destinations.js + MIL-DESTINATIONS.md).
* MilPlatform en embarque une COPIE CONFORME — deux piles, un seul
* comportement. Toute retouche se fait ICI, puis se recopie ; ne jamais
* diverger d'un côté seulement.
*
* Autonome : aucune dépendance (pas de Bootstrap, pas de thème). Les jetons
* ci-dessous portent tous une valeur de repli, donc le composant se suffit ;
* l'application hôte peut les surcharger sur :root pour l'accorder à sa
* palette (le Hub le fait avec ses --mil-*).
*/
.mil-dest-root {
--mild-accent: var(--mil-accent, #008ce4);
--mild-accent-2: var(--mil-accent-dark, #0070bd);
--mild-accent-soft: var(--mil-accent-soft, #e7f3ff);
--mild-glow: var(--mil-glow, rgba(0, 140, 228, 0.45));
--mild-surface: var(--mil-surface, #ffffff);
--mild-text: var(--mil-text, #050505);
--mild-text-2: var(--mil-text-2, #65676b);
--mild-hover: var(--mil-hover, #f2f2f2);
--mild-btn: var(--mil-btn-grey, #e4e6eb);
--mild-btn-hover: var(--mil-btn-grey-hover, #d8dadf);
--mild-shadow: var(--mil-shadow-pop, 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1));
position: relative;
display: flex;
align-items: center;
}
/* ---------- Le bouton : le logo, en tuile arrondie ---------- */
.mil-dest-btn {
display: block;
font: inherit; /* le repli ci-dessous écrit du texte */
width: 44px;
height: 44px;
padding: 2px;
margin: 0;
border: none;
border-radius: 10px;
background: transparent;
cursor: pointer;
line-height: 0;
transition: background-color .15s ease, box-shadow .15s ease;
}
/* Le repli : quand l'hôte donne un logo SANS ![]()
(un monogramme, un SVG
inline), le JS l'emballe tel quel plutôt que de le perdre. Il faut alors lui
rendre la hauteur de ligne que l'image, elle, n'utilise pas. Aucune taille
en dur : le texte suit la typographie de l'hôte, donc son zoom. */
.mil-dest-btn > :not(img) {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 8px;
line-height: 1.1;
color: var(--mild-text);
}
/* !important assumé : l'app hôte colle volontiers ses propres utilitaires sur
le logo (dans HumHub, la classe Bootstrap .rounded, elle-même !important,
écrasait le rayon de la tuile). Le composant doit tenir chez n'importe quel
hôte sans qu'on aille lui retirer ses classes. */
.mil-dest-btn img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
border-radius: 8px !important; /* la tuile blanche du logo */
object-fit: cover !important;
display: block !important;
margin: 0 !important;
}
/* Survol / focus : halo accent (le même que le rappel, plus bas). */
.mil-dest-btn:hover,
.mil-dest-btn:focus-visible {
box-shadow: 0 0 0 3px var(--mild-glow), 0 0 14px 2px var(--mild-glow);
outline: none;
}
/* Menu ouvert — et SEULEMENT là : le bouton passe en accent plein.
L'app hôte doit alors servir un logo qui LIT sur l'accent, faute de quoi
c'est sa propre tuile qu'on voit au milieu du bleu : dans le Hub, un PNG à
fond blanc opaque y posait une pastille blanche, quand le même bouton en
sombre montrait une silhouette nette — deux modes, deux boutons cliqués.
Le thème MilHub bascule sur logo-white.png à l'ouverture (_nav.scss) ;
l'état de repos, lui, ne bouge pas. Demande d'Eric, 2026-08-10. */
.mil-dest-root.is-open .mil-dest-btn {
background-color: var(--mild-accent);
box-shadow: none;
}
/* ---------- Le rappel : le bouton bat tant qu'il n'a pas été découvert ---------- */
.mil-dest-root.is-hinting .mil-dest-btn {
animation: mil-dest-pulse 1.6s ease-out 2;
}
@keyframes mil-dest-pulse {
0% { box-shadow: 0 0 0 0 var(--mild-glow); }
70% { box-shadow: 0 0 0 11px rgba(0, 0, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mil-dest-root.is-hinting .mil-dest-btn {
animation: none;
}
}
/* ---------- Le menu ---------- */
/* La hauteur du panneau est celle de son contenu, et le catalogue grandit : à
trois entrées ça tenait partout, à quatre non. Mesuré sur 812×375 — un
téléphone tourné de côté — avec le zoom texte à 150 % : 67px sous le bord de
la fenêtre, et INATTEIGNABLES, parce que le panneau pend d'une barre collante
que faire défiler la page ne déplace pas. Le menu s'ouvrait, `aria-expanded`
passait à `true`, et la dernière destination manquait — le symptôme le plus
coûteux à diagnostiquer qui soit.
Les 80px sont la distance du haut de la fenêtre au haut du panneau, avec de
la marge : ~54px sous la barre du Hub, 60px sous le rail de MilPlatform. Sur
toute fenêtre assez haute, la `max-height` ne mord jamais et `overflow-y`
ne rend aucune barre — vérifié sur 1280×800, panneau identique au pixel. */
.mil-dest-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1050;
display: none;
min-width: 300px;
max-height: calc(100vh - 80px);
overflow-y: auto;
margin: 0;
padding: 8px 0;
list-style: none;
background: var(--mild-surface);
border-radius: 4px;
box-shadow: var(--mild-shadow);
/* `white-space` S'HÉRITE, et le point de montage appartient à l'hôte : le
Hub accroche le menu dans `.topbar-brand`, que HumHub met en `nowrap`
pour tronquer un nom de coop trop long. Hérité jusqu'aux tuiles, ce
nowrap interdisait à « Matières résiduelles » de se replier — le mot
débordait de sa tuile au lieu de prendre deux lignes. La valeur se
redéclare donc à la racine du panneau ; ce qui veut nowrap À L'INTÉRIEUR
(l'adresse de `.mil-dest-me-sub`) le dit déjà lui-même. */
white-space: normal;
}
.mil-dest-root.is-open .mil-dest-menu {
display: block;
}
/* Une destination = une ligne. `.mil-dest-link` quand toute la ligne est
cliquable, `.mil-dest-block` quand elle ne l'est pas et porte des boutons
(Office 365) : même gabarit, seul le survol de pleine largeur diffère. */
.mil-dest-link,
.mil-dest-block {
display: block;
padding: 12px 20px;
text-decoration: none;
color: inherit;
}
.mil-dest-link:hover,
.mil-dest-link:focus {
background-color: var(--mild-hover);
text-decoration: none;
}
/* Le DESSIN et le mot, côte à côte — une rangée à eux plutôt que sur
`.mil-dest-link`, qui sert aussi aux entrées à actions et les empile.
`center` ici et `baseline` dans `.mil-dest-head` : l'icône se centre sur la
ligne entière, la pastille s'aligne sur le texte. Deux alignements parce que
ce sont deux questions. */
.mil-dest-row {
display: flex;
align-items: center;
gap: 14px;
}
/* 22 px, comme les tuiles de la rangée d'apps : c'est la taille à laquelle une
forme pleine se reconnaît sans se lire, et la même des deux côtés.
`currentColor` plutôt qu'un jeton : l'icône suit la couleur du texte de la
ligne, donc l'état courant (`aria-current`) la teinte avec le reste sans
qu'une règle de plus ait à le prévoir. */
.mil-dest-icon {
flex: none;
display: flex;
color: var(--mild-text-2);
}
.mil-dest-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
}
/* Le titre et sa pastille, côte à côte. `baseline` plutôt que `center` : la
pastille s'aligne sur le texte, pas sur la hauteur de ligne du titre. */
.mil-dest-head {
display: flex;
align-items: baseline;
gap: 8px;
}
/* Les deux tailles passent par `--mil-fs`, le multiplicateur de zoom texte de
l'app hôte. Absent — c'est le cas du Hub — il vaut 1 et `calc(17px * 1)`
rend exactement 17px : rien ne bouge. Posé, le menu suit le réglage, et il
le doit : c'est le seul contrôle présent dans les deux apps, donc le seul
endroit où le zoom de la coop aurait l'air de ne pas marcher. */
.mil-dest-menu .mil-dest-title {
display: block;
font-size: calc(17px * var(--mil-fs, 1));
font-weight: 700;
line-height: 1.3;
color: var(--mild-text);
}
.mil-dest-menu .mil-dest-sub {
display: block;
margin-top: 2px;
font-size: calc(14px * var(--mil-fs, 1));
line-height: 1.3;
color: var(--mild-text-2);
}
/* La pastille d'état (« bêta ») — à côté du titre, jamais dedans. Elle suit le
zoom texte comme le reste, et ne se laisse pas écraser par un titre long. */
.mil-dest-menu .mil-dest-badge {
flex: none;
padding: 1px 7px;
border-radius: 999px;
background-color: var(--mild-accent-soft);
color: var(--mild-accent-2);
font-size: calc(11px * var(--mil-fs, 1));
font-weight: 700;
line-height: 1.5;
letter-spacing: .04em;
text-transform: uppercase;
}
/* ---------- Une destination à plusieurs portes ---------- */
/* « Ouvrir Office 365 » ne veut rien dire : on va dans OneDrive ou dans
Outlook. La ligne garde donc son titre et son sous-titre, et pose ses deux
portes en dessous, sur une seule ligne, à parts égales (`flex: 1 1 0` —
largeur égale quel que soit le libellé). */
.mil-dest-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.mil-dest-actions .mil-dest-action {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 10px;
border-radius: 6px;
background-color: var(--mild-btn);
color: var(--mild-text);
font-size: calc(14px * var(--mil-fs, 1));
font-weight: 600;
line-height: 1.3;
text-decoration: none;
transition: background-color .15s ease;
}
.mil-dest-actions .mil-dest-action:hover,
.mil-dest-actions .mil-dest-action:focus {
background-color: var(--mild-btn-hover);
text-decoration: none;
}
/* Sortie du domaine coop (Office 365) : le chevron sortant, après le titre. */
.mil-dest-menu .mil-dest-ext {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 8px;
vertical-align: -1px;
fill: currentColor;
}
/* Dans un bouton, c'est le `gap` du flex qui espace : la marge ferait double. */
.mil-dest-actions .mil-dest-ext {
width: 13px;
height: 13px;
margin-left: 0;
}
/* ---------- La rangée des apps voisines (demande 7, 2026-08-11) ---------- */
/* Ce que le catalogue au-dessus ne peut pas décrire : les outils que CHAQUE
coop utilise ailleurs — un Slack, un Zoom, une facturation. Le catalogue
décrit le Hub, qui héberge une coop ; MilPlatform en héberge N.
LE FILET FAIT LA GRAMMAIRE, et remplace un titre : au-dessus les apps de la
coop, en dessous ce qui appartient à quelqu'un d'autre. Un titre serait un
mot de plus, et la rangée est écrite pour des gens dont on ne suppose pas la
lecture — c'est le logo qui porte le sens, pas l'intertitre.
`auto-fill` plutôt qu'un nombre de colonnes : quatre par rangée sur un menu
de 300 px, et davantage si l'hôte l'élargit. Une coop à huit apps obtient
deux rangées propres au lieu d'une ligne qui déborde. */
.mil-dest-apps {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 2px;
margin: 8px 8px 0;
padding-top: 8px;
border-top: 1px solid var(--mild-hover);
}
/* 44 px de haut : la cible tactile minimale, la même que le bouton du logo.
Une tuile plus petite serait plus jolie et se raterait au pouce. */
.mil-dest-app {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-height: 44px;
padding: 8px 2px;
border-radius: 6px;
color: var(--mild-text-2);
text-decoration: none;
transition: background-color .15s ease;
}
.mil-dest-app:hover,
.mil-dest-app:focus {
background-color: var(--mild-hover);
color: var(--mild-text-2);
text-decoration: none;
}
/* LE DESSIN NE SUIT PAS LE ZOOM TEXTE, et c'est la seule exception du fichier.
C'est un logo, pas un mot : à 200 % il déborderait de sa tuile, et un
fournisseur reconnu à 26 px ne se reconnaît pas mieux à 52. Le MOT, lui,
grossit — c'est lui qui porte le sens quand le dessin ne dit rien. */
.mil-dest-app-mark {
display: block;
width: 26px;
height: 26px;
flex: none;
line-height: 0;
}
.mil-dest-app-mark svg {
width: 26px;
height: 26px;
display: block;
}
.mil-dest-app-label {
font-size: calc(12px * var(--mil-fs, 1));
line-height: 1.3;
text-align: center;
word-break: break-word;
}
/* ---------- DEMANDE 8 (brouillon) — l'identité et la sortie ---------- */
/* En haut, sous un filet, avant le catalogue. L'ordre porte le sens : qui je
suis, où je peux aller, ce qui est à quelqu'un d'autre, la sortie. */
.mil-dest-me-row {
margin: 0 8px 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--mild-hover);
}
.mil-dest-me-main {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 6px;
color: var(--mild-text);
text-decoration: none;
}
.mil-dest-me-main:hover,
.mil-dest-me-main:focus {
background-color: var(--mild-hover);
color: var(--mild-text);
text-decoration: none;
}
/* 44 px : la cible tactile du reste du composant. L'avatar EST le lien vers la
fiche, donc il doit se viser au pouce comme le bouton du logo. */
.mil-dest-me-avatar {
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
background-color: var(--mild-accent-soft);
display: flex;
align-items: center;
justify-content: center;
}
.mil-dest-me-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Le repli est du TEXTE, et il suit le zoom comme le reste : c'est un numéro
d'appartement — « le 304 » — qui doit se lire pour ceux à qui les initiales
ne disent rien. */
.mil-dest-me-avatar.is-text {
color: var(--mild-accent-2);
font-size: calc(15px * var(--mil-fs, 1));
font-weight: 700;
line-height: 1;
}
.mil-dest-me-text { min-width: 0; }
.mil-dest-me-name {
display: block;
font-size: calc(16px * var(--mil-fs, 1));
font-weight: 700;
line-height: 1.3;
color: var(--mild-text);
}
/* L'ADRESSE SE TRONQUE PLUTÔT QUE DE POUSSER LE MENU. C'est ce qui remplit
cette ligne depuis le 2026-08-11 (« Appt 304 · adresse »), et une adresse
de coop peut être plus longue que le panneau : sans l'ellipse, elle
élargirait le menu ou déborderait sous l'avatar. Le début reste lisible, et
c'est le début qui identifie le compte.
`min-width: 0` sur `.mil-dest-me-text` est ce qui rend l'ellipse possible
dans un flex — sans lui, l'enfant refuse de rétrécir sous son contenu et
rien ne se tronque. */
.mil-dest-me-sub {
display: block;
margin-top: 1px;
font-size: calc(14px * var(--mil-fs, 1));
line-height: 1.3;
color: var(--mild-text-2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Les comités. Elles vont quelque part — c'est ce qui les distingue du rôle,
qui vit dans `sub` et n'est jamais cliquable. */
.mil-dest-me-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0 8px;
}
.mil-dest-chip {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
background-color: var(--mild-accent-soft);
color: var(--mild-accent-2);
font-size: calc(12px * var(--mil-fs, 1));
line-height: 1.4;
text-decoration: none;
}
.mil-dest-chip:hover,
.mil-dest-chip:focus {
background-color: var(--mild-accent);
color: #fff;
text-decoration: none;
}
/* En bas, seule, loin de tout ce qu'on touche souvent : c'est le seul geste du
menu qui ait un effet de bord. Un `