/* ============================================================
   TROKIN — la barre du bas, définie une seule fois

   Elle était écrite deux fois : dans `index.html` pour l'accueil, dans
   `styles.css` pour le reste du site. Les deux ont divergé — bouton central
   orange ici, vert là, tailles différentes — et le site changeait d'aspect
   d'une page à l'autre sans que rien ne le justifie.

   Ce fichier est donc la seule source. `index.html` le charge directement ;
   `styles.css` l'importe pour toutes les autres pages. Le balisage, lui, est
   produit à deux endroits (en dur dans `index.html`, par `shell()` dans
   `app.js`) : toute modification de structure doit toucher les deux.

   Les valeurs sont en pixels et non en rem : `index.html` a sa propre base
   rem, les autres pages non, et la barre doit être identique des deux côtés.
   ============================================================ */

.tk-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  /* La barre porte sa police comme elle porte ses tailles en pixels : l'accueil
     compose en Figtree, le reste du site en Plus Jakarta Sans, et les mêmes
     libellés y paraissaient plus gras d'un écran à l'autre. Hériter du corps de
     page revenait donc à laisser la maquette de chaque page décider. */
  font-family: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, sans-serif;
  width: min(412px, 100%);
  margin: 0 auto;
  height: calc(72px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -2px 16px rgba(6, 16, 40, .07);
  /* Cinq colonnes égales : c'est la seule façon que le bouton central tombe
     sur l'axe de la barre, et non à quelques pixels de là. */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
}

.tk-barre a {
  min-width: 0;
  /* L'ancre de la pastille : posée en absolu sur le coin de l'icône. */
  position: relative;
  /* Cible tactile : jamais moins de 44 px de haut, doigt compris. */
  min-height: 44px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  /* Fixé, et non hérité : l'accueil laissait l'interligne à `normal` quand le
     reste du site le tient à 1.5, et les libellés tombaient trois pixels plus
     haut d'un écran à l'autre. */
  line-height: 1.5;
  color: #6E6A66;
  text-align: center;
  text-decoration: none;
}
.tk-barre a svg,
.tk-barre a .ic { width: 21px; height: 21px; flex: none; }
.tk-barre a.actif,
.tk-barre a.active { color: #F5500F; }

/* Le bouton « publier » : un rond de 52 pour une croix de 22 — assez d'air
   autour d'elle. Le retrait négatif garde son centre sur l'axe des icônes
   voisines malgré sa taille, quitte à déborder un peu de la barre. */
.tk-barre .plus,
.tk-barre .publish {
  justify-self: center;
  align-self: start;
  /* Sans cela il hérite du `padding-top` des onglets, qui pousse sa croix six
     pixels sous le centre du rond. */
  padding-top: 0;
  width: 52px;
  height: 52px;
  margin-top: -2.9px;
  border-radius: 50%;
  background: #F5500F;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(245, 80, 15, .35);
}
.tk-barre .plus svg,
.tk-barre .publish svg,
.tk-barre .publish .ic { width: 22px; height: 22px; }

/* La pastille des messages non lus. Elle est décrite ici et pas seulement dans
   `styles.css` : l'accueil ne charge pas cette feuille-là, et sa pastille serait
   restée un « 3 » nu au milieu de la barre. Valeurs en dur, comme le reste du
   fichier — `index.html` n'a pas les variables du reste du site. */
.tk-barre .badge-count {
  /* Sur le coin haut-droit de l'icône, hors du flux : laissée dans la colonne
     de l'onglet, elle s'empilait sous le libellé et sortait de la barre. */
  position: absolute;
  top: 6px; left: 50%; margin-left: 4px;
  background: #F5500F;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
:root[data-theme="solia"] .tk-barre .badge-count { background: #F43F5E; }

/* Là où une colonne de navigation prend le relais, la barre ferait doublon —
   et réserverait 96 px de vide sous chaque page. L'accueil, qui n'a pas de
   colonne, la garde à toutes les largeurs. */
@media (min-width: 901px) {
  .tk-barre.avec-sidebar { display: none; }
}

/* Le mode Solia : mêmes rôles, autres couleurs (ADR-0007). */
:root[data-theme="solia"] .tk-barre .plus,
:root[data-theme="solia"] .tk-barre .publish {
  background: #4232B8;
  box-shadow: 0 8px 18px rgba(66, 50, 184, .35);
}
:root[data-theme="solia"] .tk-barre a.actif,
:root[data-theme="solia"] .tk-barre a.active { color: #4232B8; }

/* La vitrine du visiteur se déploie en deux colonnes sur un écran
   d'ordinateur, sa navigation passant dans l'en-tête. La barre du bas, qui est
   une convention du téléphone, y ferait doublon — et la page, qui tient en un
   écran, n'a rien à faire défiler sous elle. */
@media (min-width: 901px) {
  body.vitrine:not(.membre) .tk-barre { display: none; }
}

/* L'accueil du membre sur un écran d'ordinateur : la barre quitte le bas de la
   fenêtre, où elle flottait au milieu du vide comme un téléphone posé là par
   erreur, et remonte en haut à droite, à hauteur du logo. Mêmes destinations,
   même ordre, même bouton central — seule sa place change.

   Elle est écrite en fin de `<body>`, hors de la page : elle se recale donc sur
   la même colonne que le contenu, et réserve à sa droite la place de la cloche
   des notifications, qui appartient, elle, à l'en-tête de la page.

   Deux accueils la portent — celui du membre (`body.membre`, dans `index.html`)
   et celui du professionnel (`body.app-accueil`, dans `pro-accueil.html`). Ils
   se cadrent sur la même colonne de 1180 px, à dessein : ce sont deux écrans du
   même site, la barre ne doit pas sauter de l'un à l'autre. */
@media (min-width: 901px) {
  body.membre .tk-barre,
  body.app-accueil .tk-barre {
    position: absolute;
    top: 26px; bottom: auto;
    left: 50%; transform: translateX(-50%);
    width: min(1180px, 100% - 80px);
    height: 48px;
    margin: 0;
    padding: 0 54px 0 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }
  body.membre .tk-barre a,
  body.app-accueil .tk-barre a {
    flex: none;
    flex-direction: row;
    min-height: 40px;
    padding: 0 14px;
    gap: 8px;
    border-radius: 999px;
    font-size: 14px;
  }
  body.membre .tk-barre a:hover,
  body.app-accueil .tk-barre a:hover { background: rgba(6, 16, 40, .05); }
  body.membre .tk-barre a svg,
  body.membre .tk-barre a .ic,
  body.app-accueil .tk-barre a svg,
  body.app-accueil .tk-barre a .ic { width: 19px; height: 19px; }
  /* Le rond garde sa forme et sa couleur : c'est le geste qu'on veut provoquer,
     il ne devient pas un onglet comme les autres parce qu'on a changé d'écran. */
  body.membre .tk-barre .publish,
  body.app-accueil .tk-barre .publish {
    order: 9;
    align-self: center;
    width: 46px; height: 46px;
    margin: 0 0 0 10px;
    padding: 0;
  }
  body.membre .tk-barre .badge-count,
  body.app-accueil .tk-barre .badge-count { top: -2px; left: auto; right: 4px; margin-left: 0; }
}