/*
 * Co'hop! — la navigation commune
 *
 * Chargée par tous les modules depuis la racine du site, avant leur propre
 * feuille. Elle attend trois variables de couleur, déjà présentes partout :
 *
 *   --navy   #1F4E79   le bandeau du module
 *   --orange #F07020   ce qui est actif
 *   --bord             les filets
 *
 * Elle en pose deux autres, propres à la navigation :
 *
 *   --rail   #16385A   le rail, plus sombre que le bandeau
 *   --bande  #1B4368   le bandeau, légèrement assombri
 *
 * ---------------------------------------------------------------------------
 * Deux bleus et non un
 *
 * Le rail est au-dessus des modules ; le bandeau appartient au module courant.
 * Sur un aplat unique, l'angle en haut à gauche devient une grande tache bleue
 * sans structure, et rien ne dit où finit ce qui est commun et où commence ce
 * qui est propre à l'outil.
 *
 * ---------------------------------------------------------------------------
 * Trois formats
 *
 *   au-dessus de 1180 px   rail + bandeau à libellés
 *   de 700 à 1180 px       rail + bandeau à pictogrammes seuls
 *   en dessous de 700 px   pas de rail, barre basse, bandeau sur deux lignes
 */

/*
 * ---------------------------------------------------------------------------
 * Pourquoi `nav.barre` et non `.barre`
 *
 * /portefeuille/ appelle « barre » ses jauges de progression :
 * `<div class="barre"><div style="width:62%"></div></div>`. Une règle sur
 * `.barre` seule les transformerait en bandeaux navy collants de 56 px, et le
 * diagnostic prendrait une demi-heure.
 *
 * Le bandeau est toujours un `<nav>`. La restriction ne coûte rien et ferme la
 * porte pour de bon.
 */

/*
 * ---------------------------------------------------------------------------
 * Pourquoi les états sont préfixés `etat-`
 *
 * Ils s'appelaient `chantier`, `ouvert`, `bientot`. /contrat-copro/ a déjà une
 * classe `.chantier` — son bandeau orange « les inscriptions partent dans le
 * bac d'essai » — avec un fond beige. Les six icônes de modules en chantier en
 * héritaient : un rectangle gris clair derrière chaque pictogramme du rail.
 *
 * Rien ne signale ce genre de collision. Un préfixe coûte cinq caractères et
 * ferme la porte pour de bon, y compris pour les modules qui n'existent pas
 * encore.
 */

:root {
  --rail: #16385A;
  --bande: #1B4368;
  --rail-large: 54px;
}

/* ================================================================== rail */

/*
 * Fixe, donc posé sur <body> et non dans <main> : un élément fixe placé dans un
 * conteneur centré hérite de ses marges et se retrouve décalé.
 */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-large);
  background: var(--rail); z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 0; gap: 3px;
  overflow-y: auto; scrollbar-width: none;
}
.rail::-webkit-scrollbar { width: 0; }

body.avec-rail { padding-left: var(--rail-large); }

.rail-marque {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: rgba(255,255,255,.13); position: relative; overflow: hidden;
  margin-bottom: 7px; display: block;
}
.rail-logo { position: absolute; inset: 0; }
.rail-logo::before {
  content: ''; position: absolute; left: 7px; bottom: 7px;
  width: 6px; height: 9px; background: var(--orange, #F07020); border-radius: 1px;
}
.rail-logo::after {
  content: ''; position: absolute; left: 16px; bottom: 7px;
  width: 7px; height: 14px; background: #F5A05A; border-radius: 1px;
}

.rail-icone {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .68; text-decoration: none;
  transition: background .12s, opacity .12s;
}
.rail-icone svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-icone:hover { background: rgba(255,255,255,.12); opacity: 1; }

/* Le seul orange plein de l'écran. L'œil y va sans chercher. */
.rail-icone.actif, .rail-icone.actif:hover { background: var(--orange, #F07020); opacity: 1; }

.rail-icone.etat-bientot { opacity: .3; cursor: default; }
.rail-icone.etat-bientot:hover { background: none; opacity: .3; }

/*
 * Le pied du rail : les réglages, mon compte, sortir.
 *
 * `margin-top: auto` le colle en bas quelle que soit la hauteur de l'écran et
 * le nombre de modules. Le rail garde ainsi sa lecture : en haut ce sur quoi on
 * travaille, en bas ce qu'on règle.
 *
 * Le filet du dessus est plus large que ceux qui séparent les familles : il ne
 * sépare pas deux groupes d'outils, il sépare les outils du reste.
 */
.rail-pied {
  margin-top: auto; padding-top: 9px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border-top: 1px solid rgba(255,255,255,.18);
  width: 34px;
}
.rail-icone.rail-reglage { opacity: .5; }
.rail-icone.rail-reglage:hover { opacity: 1; }

/* Les trois familles, séparées par un filet court. Pas de libellé : dans 54 px
   un mot ne tient pas, et le groupement se voit sans qu'on l'explique. */
.rail-separation {
  width: 22px; height: 1px; flex: none;
  background: rgba(255,255,255,.15); margin: 5px 0;
}

/* =============================================================== bandeau */

/*
 * Le bandeau prend toute la largeur, et son contenu commence au bord.
 *
 * Il était d'abord aligné sur la colonne de 960 px du contenu, comme les
 * titres. Mauvais calcul : /contrat-copro/ a neuf onglets et /gestion-copro/
 * treize, et l'alignement leur volait deux cents pixels de chaque côté. Sur une
 * fenêtre ordinaire, Calcul et Réglages passaient hors de vue et il fallait
 * faire défiler une barre dont rien ne dit qu'elle défile.
 *
 * Une barre d'application n'est pas du texte : elle appartient à la fenêtre, pas
 * à la colonne de lecture.
 *
 * Les marges négatives annulent le centrage du conteneur, quel qu'il soit : que
 * la barre vive dans un <main> limité à 960 px ou directement dans <body>, elle
 * se retrouve collée au rail. La demi-largeur de rail compense le
 * `padding-left` posé sur <body>.
 */
nav.barre {
  position: sticky; top: 0; z-index: 50;
  margin-left: calc(50% - 50vw + var(--rail-large) / 2);
  margin-right: calc(50% - 50vw + var(--rail-large) / 2);
  padding-left: 18px;
  padding-right: 18px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bande); color: #fff;
  border-bottom: 2px solid var(--orange, #F07020);
  margin-bottom: 22px; height: 56px;
}

/*
 * Quand un second bandeau suit immédiatement — /vote/ et son titre d'assemblée,
 * /DEPOT/ et son en-tête — les 22 px de respiration deviennent une bande claire
 * entre deux bleus, et la jointure se voit.
 *
 * La classe est posée à l'appel, par le module. Elle ne peut pas l'être depuis
 * sa propre feuille : celle-ci se charge avant celle-ci, donc perd à égalité de
 * spécificité. C'est exactement l'erreur que j'ai faite la première fois.
 */
nav.barre.barre-collee { margin-bottom: 0; }

/* Le filet orange ferme le bandeau : c'est la deuxième couleur de la maison qui
   fait un travail structurel, marquer où finit la navigation et où commence le
   travail. Cette limite n'était marquée par rien. */

nav.barre .marque {
  display: flex; align-items: center; gap: 9px; flex: none;
  background: none; border: 0; cursor: pointer; color: #fff;
  font-family: inherit; padding: 5px 9px 5px 6px; border-radius: 8px;
  transition: background .12s;
}
nav.barre .marque:hover, nav.barre .marque.deplie { background: rgba(255,255,255,.12); }

nav.barre .logo {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: rgba(255,255,255,.13); position: relative; overflow: hidden;
}
nav.barre .logo::before {
  content: ''; position: absolute; left: 6px; bottom: 6px;
  width: 6px; height: 9px; background: var(--orange, #F07020); border-radius: 1px;
}
nav.barre .logo::after {
  content: ''; position: absolute; left: 15px; bottom: 6px;
  width: 7px; height: 14px; background: #F5A05A; border-radius: 1px;
}

nav.barre .nom { text-align: left; line-height: 1.1; }
nav.barre .nom em {
  display: block; font-style: normal; font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
nav.barre .nom strong {
  display: block; font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px; font-weight: 600; color: #fff;
}
nav.barre .chevron {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s;
}
nav.barre .marque.deplie .chevron { transform: rotate(180deg); }

.onglets-barre {
  display: flex; align-items: center; gap: 2px; height: 56px;
  overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
}
.onglets-barre::-webkit-scrollbar { height: 0; }

nav.barre .onglet {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: rgba(255,255,255,.82); white-space: nowrap;
  transition: background .12s, color .12s;
}
nav.barre .onglet svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
nav.barre .onglet:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Orange pour ce qui se travaille, blanc pour le reste. Deux traitements
   suffisent — trois couleurs sur fond navy deviennent illisibles. */
nav.barre .onglet.actif { color: var(--bande); background: #fff; }
nav.barre .onglet.flux.actif { background: var(--orange, #F07020); color: #fff; }

nav.barre .separation {
  width: 1px; height: 22px; flex: none;
  background: rgba(255,255,255,.16); margin: 0 3px;
}

nav.barre .version {
  font-size: 10px; color: rgba(255,255,255,.32); flex: none; padding-left: 12px;
  font-family: ui-monospace, Menlo, monospace;
}

/* =============================================================== panneau */

.panneau {
  position: sticky; top: 58px; z-index: 49;
  margin-left: calc(50% - 50vw + var(--rail-large) / 2);
  margin-right: calc(50% - 50vw + var(--rail-large) / 2);
  padding: 16px 18px 6px;
  margin-top: -22px; margin-bottom: 22px;
  background: #fff; border-bottom: 1px solid var(--bord, #E3E3E0);
  box-shadow: 0 6px 18px rgba(20,50,80,.10);
}
.panneau[hidden] { display: none; }

.panneau-famille {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--doux, #5F5E5A); margin: 0 0 8px;
}
.panneau-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 7px; margin-bottom: 15px;
}

.carte-module {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff; border: 1px solid var(--bord, #E3E3E0); border-radius: 8px;
  padding: 9px 10px; text-decoration: none; color: inherit;
  transition: border-color .12s;
}
.carte-module:hover { border-color: var(--navy, #1F4E79); }
.carte-module.etat-bientot { opacity: .45; cursor: default; }
.carte-module.etat-bientot:hover { border-color: var(--bord, #E3E3E0); }
.carte-module.module-courant { background: #FFF6EE; border-color: var(--orange, #F07020); }

.carte-pic {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy, #1F4E79);
}
.carte-pic svg {
  width: 16px; height: 16px;
  fill: none; stroke: #fff; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* La pastille verte dit « celui-ci tourne pour de bon ». Les autres sont en
   chantier, et il vaut mieux que ça se voie depuis n'importe où. */
.carte-module.etat-ouvert .carte-pic, .feuille-ligne.etat-ouvert .carte-pic { background: var(--succes, #0F6E56); }
.carte-module.etat-bientot .carte-pic, .feuille-ligne.etat-bientot .carte-pic { background: var(--doux, #888780); }

.carte-mots { line-height: 1.25; min-width: 0; }
.carte-nom {
  display: block; font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13.5px; font-weight: 600; color: var(--texte, #2C2C2A);
}
.carte-module.module-courant .carte-nom, .feuille-ligne.module-courant .carte-nom { color: #C05010; }
.carte-quoi {
  display: block; font-size: 11.5px; color: var(--doux, #5F5E5A); margin-top: 2px;
}

/* ============================================================ barre basse */

.basse { display: none; }
.feuille { display: none; }

/* ================================================ de 700 à 1180 pixels */

@media (max-width: 1180px) {
  /* Les libellés s'effacent avant que la barre ne déborde : treize
     pictogrammes tiennent partout, treize mots non. L'onglet actif garde le
     sien, sinon on ne saurait plus où l'on est. */
  nav.barre .onglet span { display: none; }
  nav.barre .onglet.actif span { display: inline; }
  nav.barre .onglet { padding: 8px 9px; }
}

/* ============================================= en dessous de 700 pixels */

@media (max-width: 700px) {
  /*
   * Le rail disparaît : 54 px sur 340 font un sixième de la largeur, et le coin
   * haut gauche est le point le plus difficile à atteindre au pouce. Les
   * icônes descendent en bas, là où la main est déjà.
   */
  .rail { display: none; }
  body.avec-rail { padding-left: 0; padding-bottom: 62px; }

  nav.barre {
    height: auto; flex-wrap: wrap; padding: 0 12px 8px; gap: 0;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + 12px); padding-right: calc(50vw - 50% + 12px);
  }
  nav.barre .marque { height: 46px; padding: 0; gap: 8px; width: 100%; }
  nav.barre .marque:hover, nav.barre .marque.deplie { background: none; }
  nav.barre .logo { width: 24px; height: 24px; border-radius: 7px; }
  nav.barre .logo::before { left: 5px; bottom: 5px; width: 5px; height: 8px; }
  nav.barre .logo::after { left: 13px; bottom: 5px; width: 6px; height: 12px; }
  nav.barre .nom { flex: 1; min-width: 0; }
  nav.barre .nom strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Le chevron et la version s'en vont : la barre basse fait déjà le travail du
     sélecteur, et deux sélecteurs pour la même chose créent une hésitation à
     chaque fois. La version reste lisible dans le panneau du lanceur. */
  nav.barre .chevron { display: none; }
  nav.barre .version { display: none; }
  nav.barre > .separation { display: none; }

  .onglets-barre { height: auto; width: 100%; flex: none; gap: 2px; }
  nav.barre .onglet { padding: 5px 9px; font-size: 12.5px; }

  .panneau { display: none !important; }

  .basse {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--rail); border-top: 1px solid rgba(255,255,255,.1);
    padding: 5px 4px calc(7px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: stretch;
  }
  .basse-item {
    flex: 1; min-width: 0; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px 4px; border-radius: 9px; text-decoration: none;
    color: rgba(255,255,255,.62); font-family: inherit;
  }
  .basse-item svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .basse-item span {
    font-size: 9.5px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .basse-item.actif { background: var(--orange, #F07020); color: #fff; }

  .feuille {
    display: flex; position: fixed; inset: 0; z-index: 70;
    background: rgba(20,45,72,.42);
    flex-direction: column; justify-content: flex-end;
  }
  .feuille[hidden] { display: none; }
  .feuille-carte {
    background: #fff; border-radius: 18px 18px 0 0;
    max-height: 82vh; overflow-y: auto;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .feuille-poignee {
    display: block; width: 34px; height: 4px; border-radius: 2px;
    background: #D8D6D0; margin: 0 auto 14px;
  }
  /* Une liste s'attrape par le bas sur téléphone. Le panneau qui descend du
     haut oblige à remonter le pouce jusqu'en haut de l'écran. */
  .feuille-ligne {
    display: flex; gap: 11px; align-items: center;
    padding: 11px 2px; border-bottom: 1px solid #EFEEEA;
    text-decoration: none; color: inherit;
  }
  .feuille-ligne.etat-bientot { opacity: .4; }
  .feuille-ligne.module-courant { background: #FFF6EE; }
  .feuille-carte .carte-pic { width: 32px; height: 32px; border-radius: 8px; }
  .feuille-carte .carte-pic svg { width: 17px; height: 17px; }
  .feuille-carte .carte-nom { font-size: 14px; }
  .feuille-carte .panneau-famille { margin: 14px 0 6px; }

  /* Les réglages, au bas de la feuille. Pas de pastille colorée : ce ne sont
     pas des outils, et un carré de couleur les ferait passer pour tels. */
  .feuille-reglage .carte-mots { padding-left: 2px; }
  .feuille-reglage .carte-nom { color: var(--doux, #5F5E5A); }
}

@media (prefers-reduced-motion: reduce) {
  nav.barre .chevron, .rail-icone, nav.barre .onglet, .carte-module, nav.barre .marque {
    transition: none;
  }
}

/* ============================================================== pastille */

/*
 * Un compte non lu, posé sur un onglet. /reprise-copro/ s'en sert pour les
 * messages du demandeur : c'est le seul chiffre qui doit se voir depuis
 * n'importe quel écran du module.
 *
 * Elle survit au repli des libellés sous 1180 px : c'est justement là qu'on en
 * a le plus besoin, quand l'onglet n'est plus qu'un pictogramme.
 */
nav.barre .onglet { position: relative; }
.pastille-alerte {
  /* `display` et `margin` sont remis explicitement : /reprise-copro/ et
     /gestion-copro/ ont leur propre .pastille-alerte, en inline-block avec une
     marge à gauche. Elle perd sur les propriétés que je redéclare, mais garde
     celles que j'omets — et une marge sur un élément positionné le décale. */
  display: block; margin: 0;
  position: absolute; top: 1px; right: 1px;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--orange, #F07020); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  border: 1.5px solid var(--bande);
}
nav.barre .onglet.actif .pastille-alerte { border-color: #fff; }
nav.barre .onglet.flux.actif .pastille-alerte { background: var(--bande); border-color: var(--orange, #F07020); }

/* ============================================================ impression */

/*
 * Rien de la navigation ne sort sur le papier.
 *
 * Sans ceci, le registre des mandats s'imprimerait avec un rail navy de 54 px
 * dans la marge gauche et un bandeau en haut de la première page. Le registre
 * est un document légal, article 65 du décret Hoguet : il se présente nu.
 *
 * `!important` parce que la barre est en `position: sticky`, et qu'un élément
 * collant se comporte mal à l'impression même caché par une règle ordinaire.
 */
@media print {
  .rail, .basse, .feuille, .panneau, nav.barre { display: none !important; }
  body.avec-rail { padding-left: 0 !important; padding-bottom: 0 !important; }
}
