/* Variables

   **Cette feuille ne déclare que ce qu'elle mesure** : la hauteur de la barre
   du bas. `--topbar-height` et `--bar-bg` vivent dans `topbar.css`, que
   `base.html.twig` charge juste avant celle-ci, toujours et sur toutes les
   pages.

   Elles étaient redéclarées ici, et à l'identique — ce qui donnait trois
   déclarations de `--bottombar-height` sur le site pour deux valeurs
   différentes, dont deux mortes par ordre de chargement. Nettoyé le
   1er septembre 2026 (A4) ; `tests/Unit/BarHeightTest.php` tient la règle,
   parce qu'elle ne se voit dans aucune des trois feuilles prise seule. */
:root {
    --bottombar-height: 43px;
}

/* Fondu sous les barres — gabarit canon, valable sur tout le site.

   Les deux barres sont translucides : le texte qui defile dessous transparait
   au lieu de disparaitre, et on lit deux choses superposees. Deux bandeaux
   fixes, en degrade, effacent le contenu **avant** qu il passe dessous.

   Ils sont ancres a la **fenetre** et non au contenu : un masque pose sur le
   conteneur defilerait avec lui et estomperait ses propres bords, pas ceux de
   l ecran. Ils vivent entre le contenu et les barres — z-index 900, contre 999
   et 1000 pour les barres, qui restent donc parfaitement lisibles.

   La couleur du fondu est une variable : chaque page fond vers **sa** couleur
   de fond. Blanc par defaut, y compris sous le voile de `page-backgrounds.css` ;
   sombre sur l accueil, dont le hero est une photo assombrie. Un fondu blanc y
   ferait une bande laiteuse au lieu de disparaitre. */
:root {
    --page-fade: 255, 255, 255;
    --page-fade-size: 26px;
}

body::before,
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: 900;
    pointer-events: none;
}

/* Corrige le 11 aout. Les bandeaux commencaient au **bord interieur** des
   barres : ils estompaient bien le texte a l approche, et pas du tout celui qui
   passait derriere. Or les deux barres sont translucides — noir a 75 %. Un
   paragraphe glissant dessous restait donc parfaitement lisible au travers,
   exactement ce qu on voulait eviter, et cela se voyait des qu une page etait
   assez longue pour defiler.

   Les bandeaux couvrent desormais la barre elle-meme : opaques sur toute sa
   hauteur, puis en degrade au-dela. Ils restent sous les barres — z-index 900
   contre 999 et 1000 — donc la barre se peint par-dessus le masque et garde son
   aspect. Ce qu on voit au travers, c est la couleur de la page, plus le texte. */
body::before {
    top: 0;
    height: calc(var(--topbar-height) + var(--page-fade-size));
    background: linear-gradient(
        to bottom,
        rgba(var(--page-fade), 1) 0,
        rgba(var(--page-fade), 1) var(--topbar-height),
        rgba(var(--page-fade), 0) 100%
    );
}

body::after {
    bottom: 0;
    height: calc(var(--bottombar-height) + var(--page-fade-size));
    background: linear-gradient(
        to top,
        rgba(var(--page-fade), 1) 0,
        rgba(var(--page-fade), 1) var(--bottombar-height),
        rgba(var(--page-fade), 0) 100%
    );
}

/* L accueil : le hero est une photo assombrie par un voile noir a 38 %. */
body:has(.homepage-bg) {
    --page-fade: 26, 28, 33;

    /* PAS DE DEGRADE SUR L ACCUEIL — 29 aout 2026, demande d Arnaud sur
       capture annotee.

       Le bandeau restait dimensionne pour une page qui DEFILE : 26 px de
       degrade au-dela de la barre, pour effacer un texte a l approche. L accueil
       ne defile pas — le hero fait exactement une hauteur de fenetre — donc ce
       degrade n effacait rien. Il ne faisait qu une chose : poser une bande
       sombre de 26 px sur la photo, en haut et en bas.

       Sur les pages qui defilent, il garde tout son sens et il reste. Ici il
       tombe a zero : le masque se reduit a la hauteur exacte des barres, qui le
       recouvrent entierement. Rien ne change sous les barres, la photo reprend
       26 px en haut et 26 px en bas.

       Ce qui a rendu ce degrade inutile sans qu on s en apercoive : les barres
       PARAISSENT opaques. Elles sont a 75 % de noir, mais posees sur un masque
       opaque elles rendent un aplat — le masque etait donc le seul a avoir
       besoin du degrade, et il servait a masquer sa propre presence. */
    --page-fade-size: 0px;
}

/* L ecran de salle est une page autonome, plein ecran et sans barres : rien a
   estomper, et un bandeau y couperait le QR. */
body.room::before,
body.room::after,
body.live::before,
body.live::after {
    display: none;
}

.bottom-bar {
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottombar-height);
    background: var(--bar-bg);
    color: #ddd;
    text-align: center;
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 0.82em;
    line-height: 1.25;
    z-index: 999;
}

.bottom-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    height: 100%;
}

.bb-copyright {
    color: #bbb;
    font-size: 0.9em;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
}

.bottom-nav {
    display: flex;
    gap: 16px;
    height: 100%;
    align-items: center;
}

.bottom-link {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-family: 'Funnel Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
}

.bottom-link:hover {
    color: #fff;
    text-decoration: underline;
}

.bottom-link:focus {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Mobile — refait le 1er septembre 2026 (A4).

   « La bottom bar, c'est un peu très moche. » Elle chevauchait le contenu et
   coupait les liens légaux. Mesuré sur 375 × 812 : le lien « Politique de
   confidentialité » commençait à 808 px et finissait à 822, pour une fenêtre
   de 812. Il était **hors de l'écran, et la page ne défilait pas** — il n'y
   avait donc aucun geste pour aller le chercher.

   La cause tient en deux lignes de l'ancien bloc : `.bottom-bar-inner` et
   `.bottom-nav` passaient tous deux en colonne, ce qui empile quatre lignes —
   le copyright et les trois liens — dans une barre dont la hauteur reste
   clouée à `--bottombar-height`. Une barre de 43 px avec 80 px de contenu
   dedans : le débordement était arithmétique.

   Ce qui change :

   1. **les liens restent en ligne**, et ils tiennent. Mesuré à 375 px et à
      0,8em : les trois font 333 px de large pour 375 disponibles. `flex-wrap`
      couvre le cas d'une langue plus bavarde plutôt que de le supposer absent ;
   2. **la barre suit son contenu** — `height: auto`, `min-height` pour le
      plancher. Une hauteur fixe posée sur un contenu variable ne peut que
      couper ou laisser du vide ;
   3. **`--bottombar-height` passe à 64 px sur téléphone**, parce que c'est la
      place que la barre occupe vraiment. Tout ce qui la réserve — le
      rembourrage bas du hero, celui de `.page-container`, le masque de
      `body::after` — se recale du même coup, sans qu'aucun de ces trois
      endroits ait à connaître la mise en page de la barre.

   Et le texte **grossit** au lieu de rétrécir : 0,78em → 0,8em. Les liens
   étaient à 11,5 px sur un téléphone, sous le minimum de 17 px qu'on s'impose
   ailleurs — on ne le tient pas ici, ce sont des mentions légales et non du
   contenu, mais on ne va pas dans l'autre sens. */
@media (max-width: 768px) {
    :root {
        --bottombar-height: 64px;
    }

    .bottom-bar {
        font-size: 0.8em;
        height: auto;
        min-height: var(--bottombar-height);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .bottom-bar-inner {
        flex-direction: column;
        gap: 6px;
        padding: 0 12px;
        width: 100%;
        height: auto;
    }

    /* En LIGNE, et qui se replie si besoin : c'est la colonne qui empilait
       quatre lignes dans une barre qui n'en tient qu'une. */
    .bottom-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 14px;
        height: auto;
    }

    /* `height: 100%` sur les enfants d'une barre dont la hauteur devient
       automatique n'a plus rien à mesurer, et vaut alors zéro. */
    .bb-copyright,
    .bottom-link {
        height: auto;
    }

    .bottom-link {
        padding: 2px 0;
    }
}