/* =====================================================================
   Footer des écrans — public/assets/footer.css

   La feuille du composant components/footer.php. Elle est ici et non
   à côté de lui parce qu'une feuille se sert : components/ est hors
   racine web, et doit y rester — ses fichiers sont faits pour être
   inclus, pas téléchargés.

   Chargée par page.php après screens.css : elle s'appuie sur les
   variables d'identité et sur la signature, dont les règles sont dans
   screens.css.

   Elle est ici et non dans or.css parce que le footer ne dépend pas
   de l'or : le jour où un écran de cours l'utilise, il charge cette
   feuille et rien d'autre.

   Les règles, ici. Les valeurs — les mentions elles-mêmes — dans
   config/footers.json. Aucune couleur en dur : la palette vient de
   l'identité.
   ===================================================================== */


/* --- La bande -------------------------------------------------------
   D'un bord à l'autre de l'écran, collée en bas. C'est la forme du
   pied de l'écran des cours, et elle vaut pour la même raison : les
   mentions engagent, elles doivent se lire comme un bandeau et non
   flotter au milieu du navy.

   Une rangée : la signature à gauche, les mentions à côté. Le bloc qui
   les porte prend toute la place restante et centre son texte — elles
   sont donc centrées sur l'espace disponible, pas sur l'écran entier.

   Fond légèrement plus sombre que la page : la bande se détache sans
   qu'il faille un trait.
   -------------------------------------------------------------------- */

.or-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2vw;
    padding: 1.8vh 3vw;
    background: rgba(0, 0, 0, .22);
}

.or-footer .footer-logo {
    flex: 0 0 auto;
    opacity: .85;
}


/* --- Les mentions ---------------------------------------------------
   Une à trois lignes, empilées. Le bloc existe même vide : sans lui,
   chaque ligne deviendrait un élément de la rangée et les deux se
   poseraient côte à côte au lieu de s'empiler.
   -------------------------------------------------------------------- */

.or-footer-mentions {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8vh;
}

/* margin: 0 — le navigateur donne 1em en haut et en bas à tout <p>,
   et screens.css ne remet à zéro que l'intérieur de .view. Une mention
   seule le cachait ; trois mentions écartaient le footer d'une centaine
   de pixels. L'espacement des lignes appartient au gap du bloc, pas aux
   marges des paragraphes.

   Les mentions se lisent, la signature se reconnaît. */
.or-footer-mention {
    margin: 0;
    line-height: 1.25;
    letter-spacing: .06em;
    text-align: center;
}


/* Les rangs. Trois tailles décroissantes : la première annonce, les
   suivantes précisent. Un footer à une seule ligne — le cas des
   pièces — n'utilise que le rang 1.

   Blanc et grand, le rang 1 : c'est une information de vente, pas une
   petite ligne de bas de page. Le blanc porte plus loin que l'or sur
   ce fond, et les capitales espacées deviennent lourdes à cette taille
   — donc du bas de casse.

   4.2vh, contre 3.2 au départ. Ce rang porte l'argument qui décide :
   on vend son or parce qu'on a besoin d'argent maintenant, et
   "paiement immédiat" est ce que le passant doit pouvoir lire avant
   d'avoir ralenti. Il est donc plus gros que les légendes des pièces
   (2.6vh) et lisible de plus loin qu'elles — c'est l'ordre voulu : ce
   qu'on propose d'abord, le détail de ce qu'on achète ensuite.

   Au-delà de 4.2vh la ligne commence à disputer sa place au titre
   (7.5vh) et le footer mange la grille : elle est près du plafond, pas
   au milieu d'une plage. */

.or-footer-mention-1 {
    color: var(--text-primary, #fff);
    font-size: 4.2vh;
    font-weight: 500;
    letter-spacing: .02em;
}

.or-footer-mention-2 {
    color: var(--cpcb-gold, #c9a063);
    font-size: 2.6vh;
    font-weight: 500;
}

/* Le rang 3 ne descend pas sous 2vh : plus petit, il n'est plus lu de
   la rue, il n'est qu'un gris au bas de l'écran. Une ligne qui ne
   mérite pas 2vh ne mérite pas d'être là. */
.or-footer-mention-3 {
    color: var(--cpcb-gold, #c9a063);
    font-size: 2.2vh;
    font-weight: 400;
    opacity: .85;
}