/**
 * bande-haut.css
 * ─────────────────────────────────────────────────────────────
 * La bande du haut, la même sur toutes les pages d'un utilisateur connecté, animation allumée comme éteinte
 * (templates/base/base.html.twig, décision du pilote du 16/10/2026) : le fil d'Ariane à gauche, et, quand la page a des
 * boutons à y mettre, ces boutons à droite :
 *
 *   - fiche d'un bâtiment, mode fiche : rien (les onglets de l'aperçu vivent dans l'aperçu, atelier-batiment.css) ;
 *   - fiche d'un bâtiment, mode tiers : le fil « Bâtiments > nom du bâtiment > Mode tiers » à gauche (le nom
 *     revient à la fiche, comme Retour), et à droite le titre du mode, l'autre mode, Retour, Enregistrer et revenir. La maquette passe alors en plein écran, par-dessus le menu : la bande reste au-dessus.
 *
 * Fond plein (pas de transparence sur la ville ou la scène) pour que le texte reste lisible. La variable --bande-haut
 * donne la hauteur à tous ceux qui doivent se ranger dessous (scène de la ville, fiches, maquette).
 *
 *   - ≥ 851px : bande fixe, en haut, à droite du menu de gauche ;
 *   - ≤ 850px : bande dans la page, collante en haut, une ligne ; en mode tiers, une seconde ligne porte les
 *     boutons (icônes seules).
 */
:root { --bande-haut: 56px; }

/* La bande n'est plus une barre : un conteneur transparent, et dedans le fil d'Ariane posé sur la page, sans cadre, aligné
   sur le bord gauche de son contenu (--bande-marge). Seul le fil reçoit les clics : la ville, ou la
   page, reste cliquable tout autour. */
.bande-haut {
    display: flex; align-items: center; gap: 12px; box-sizing: border-box;
    min-height: var(--bande-haut); padding: 0 var(--bande-marge, 10px);
    background: transparent; border: 0; box-shadow: none; pointer-events: none;
}
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane {
    pointer-events: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; box-sizing: border-box; margin: 0; padding: 4px 0;
    position: static; white-space: nowrap; overflow: hidden; gap: 0.5em; font-size: 0.95rem;
    /* Plus de pastille blanche autour du fil (décision du pilote du 18/10/2026) : le texte seul, posé sur la page. */
    background: transparent; border: 0; box-shadow: none;
}
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane > * { flex: none; }
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane .material-symbols-outlined { font-size: 1.45em; }
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane a { color: var(--muted); }
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane a:hover { color: var(--primary); }
/* Les pages à grand en-tête : le fil d'Ariane juste sous l'en-tête, dans la page, même pastille (templates/base/base.html.twig). */
.fil-sous-entete__bande { display: flex; margin: -4px 0 8px; width: 0; min-width: 100%; }
.fil-sous-entete__bande .fil-ariane { max-width: 100%; }
/* Dans la tête de la liste « Mes bâtiments », le fil est juste sous la barre : aucune marge de rattrapage. */
.ville__tete .fil-sous-entete__bande { margin: 0; }
/* Fiche d'un bâtiment : la copie du fil rangée dans la bande ne sert qu'en mode tiers (plein écran), où l'en-tête
   n'est plus visible ; le fil de la page, lui, cède alors la place à cette copie. */
.bande-haut--modes { display: none; }
body.fiche--mode-grand .bande-haut--modes { display: flex; }
body.fiche--mode-grand .fil-sous-entete__bande { display: none; }
/* L'en-tête du bâtiment passe derrière la maquette plein écran : sa partie qui dépasse au-dessus d'elle (la bande est transparente)
   ne doit pas se voir. */
body.fiche--mode-grand .contenu__header { visibility: hidden; }

/* Séparateur discret : un petit chevron à la place du « > ». */
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane .breadcrumb-sep { font-size: 0; line-height: 0; opacity: 0.55; color: var(--muted); }
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane .breadcrumb-sep::before { content: '\203A'; font-size: 1.3rem; line-height: 1; }
/* Le dernier maillon (la page) : en gras et en couleur, et il cède la place avant les autres, avec des points de suspension. */
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane > :last-child:not(.breadcrumb-sep) {
    flex: 0 1 auto; min-width: 5em; overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: var(--primary);
}
/* Les maillons du milieu (nom d'un bâtiment, d'une rubrique…) se raccourcissent aussi avec « … » : sans ça, un fil long sur
   téléphone ne laissait plus de place à la page en cours. Le premier (l'icône Bâtiments) ne rétrécit jamais. */
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane > a:not(:first-child), :is(.bande-haut, .fil-sous-entete__bande) .fil-ariane > span:not(.breadcrumb-sep):not(:last-child) {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
:is(.bande-haut, .fil-sous-entete__bande) .fil-ariane a { white-space: nowrap; }

@media (min-width: 851px) {
    .bande-haut {
        position: fixed; top: 0; left: var(--menu-largeur, 188px); right: 0; height: var(--bande-haut); z-index: 150;
    }
    /* Les pages dont `main` défile : leur contenu commence juste sous la pastille. */
    body > main { padding-top: var(--bande-haut); box-sizing: border-box; }
    /* Fil d'Ariane sous l'en-tête : aucune bande en haut, donc rien à réserver. */
    body.fil-sous-entete > main { padding-top: 0; }
    /* Les pages plein écran (la liste des bâtiments, site et groupement) : pas de bande, la scène monte jusqu'en haut ; le fil est
       sous l'en-tête de la page (ville.css pour la liste, fiche-ville.css pour site et groupement). */
    html body.page-ville > main { padding-top: 0; }

    /* Mode tiers : la maquette est en plein écran par-dessus le menu (z-index 1000) mais commence SOUS la
       bande (atelier-batiment.css) : la bande prend toute la largeur et reste visible, jamais recouverte. Les boutons du mode
       (dans la scène) viennent se poser sur sa droite. */
    body.fiche--mode-grand { --bande-marge: 16px; }
    /* Fond plein (capture du pilote du 23/10/2026) : la bande était transparente, et la fiche défilée derrière (la case
       « Informations » et sa pastille « À renseigner », la question des tiers) se voyait au travers du fil d'Ariane, « Mode tiers »
       à moitié caché. Pas de z-index plus haut : la barre du mode, dans la maquette (z-index 1000), doit rester au-dessus. */
    body.fiche--mode-grand .bande-haut { left: 0; background: var(--bg, #f6f8fc); }
}

@media (max-width: 850px) {
    .bande-haut {
        position: sticky; top: 0; z-index: 150; width: 0; min-width: 100%; min-height: 0; margin: -4px 0 10px; padding: 4px 0; overflow: hidden;
    }
    /* Mode tiers sur téléphone : la bande fait deux lignes (le fil, puis les boutons du mode) et couvre le haut de
       la maquette : fond plein, le fil s'y pose sans marge. */
    body.fiche--mode-grand .bande-haut {
        position: fixed; top: 0; left: 0; right: 0; width: auto; min-width: 0; min-height: var(--bande-haut); margin: 0; padding: 0 8px; pointer-events: auto;
        background: var(--panneau-fond, #fff); border-bottom: 1px solid var(--panneau-bord, var(--border-color)); box-shadow: var(--panneau-ombre, none);
    }
}