/* =====================================================================
   Gabarit devise — public/assets/devise.css

   Chargé en plus de screens.css par playlist.php, via le champ
   stylesheet de la table playlists.

   Zones en positions fixes : elles ne bougent pas d'une devise à
   l'autre, quelle que soit la longueur des textes. C'est ce qui permet
   au concepteur des fonds de composer en connaissant l'emplacement
   exact de ce qui viendra par-dessus.

   Grille verticale (en % de la hauteur d'écran, hors marges) :
     en-tête    0 → 22
     billets   22 → 48
     cours     48 → 92
     pied      92 → 100

   La bande de billets et les cartes de cours occupent la même largeur,
   pleine : deux blocs alignés font une composition, deux blocs de
   largeurs différentes font un empilement.

   Tailles en vh : elles suivent l'écran, quelle que soit sa taille.

   Couleurs : toutes réglables par devise, via devises.json. Chaque
   règle lit une variable et applique un défaut si elle est absente —
   une devise sans couleurs déclarées rend l'habillage CPCB standard.

   Géométrie : jamais réglable. Positions, tailles, épaisseurs et
   gouttières sont les mêmes pour toutes les devises. C'est ce qui
   permet au concepteur des fonds de composer une fois.
   ===================================================================== */

.dv {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 4vh 3.5vw 3vh;
    font-family: var(--font, 'Roboto', Arial, sans-serif);
    overflow: hidden;
}

/* Fond : image ou fragment HTML, toujours dessous. Le z-index est posé
   ici et non par le fond, pour qu'un fragment ne puisse jamais passer
   devant le texte quoi qu'il contienne. */
.dv-fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--dv-fond, none) center/cover no-repeat,
                var(--cpcb-navy, #14304d);
}

.dv > *:not(.dv-fond) { position: relative; z-index: 1; }


/* --- En-tête ------------------------------------------------------- */

.dv-tete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2vw;
    margin-top: 4vh;
}

/* Hauteur fixe, largeur libre : les drapeaux n'ont pas tous le même
   rapport, mais leur ligne de base reste alignée. */
.dv-drapeau {
    flex: 0 0 auto;
    height: 11vh;
    width: auto;
    border: 2px solid var(--dv-drapeau, rgba(255, 255, 255, .3));
}

.dv-noms {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dv-pays {
    color: var(--dv-pays, #fff);
    font-family: var(--font-cond, 'Roboto Condensed', sans-serif);
    font-size: 7.5vh;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.dv-devise {
    color: var(--dv-devise, #fff);
    font-size: 3.6vh;
    font-weight: 500;
    line-height: 1.2;
    margin-top: .8vh;
    white-space: nowrap;
}

.dv-iso { color: var(--dv-iso, #c9a063); font-weight: 700; }


/* --- Billets --------------------------------------------------------
   Bande générée par mosaic.py en mode collage : plusieurs coupures
   superposées, plus vivant qu'un recto-verso posé à plat.

   Le conteneur porte la hauteur et le débordement — sans lui, l'image
   s'affiche à sa taille réelle et écrase tout ce qui suit. Il occupe
   toute la largeur, alignée sur celle des cartes de cours.

   L'image est recadrée dans sa boîte (cover) : elle ne se déforme pas
   et ne déborde jamais, quelle que soit sa taille d'origine.
   --------------------------------------------------------------------- */

.dv-billets {
    flex: 0 0 26vh;
    height: 26vh;
    overflow: hidden;
    border-radius: 1.2vh;
    margin-top: 9vh;
}

.dv-bande {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left center;
}


/* --- Cours ---------------------------------------------------------- */

.dv-cours {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    align-content: center;
    margin: 0;
}

/* Carte à bord arrondi, fond légèrement voilé : le texte reste lisible
   quelle que soit l'image derrière, sans imposer de couleur au fond. */
.dv-carte {
    background: var(--dv-carte, rgba(0, 0, 0, .38));
    border: 3px solid var(--dv-bordure, #c9a063);
    border-radius: 1.6vh;
    padding: 3vh 2.5vw;
    text-align: center;
}

.dv-libelle {
    font-family: var(--font-cond, 'Roboto Condensed', sans-serif);
    font-size: 3.8vh;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dv-libelle, #c9a063);
}

.dv-libelle small {
    display: block;
    margin-top: .6vh;
    font-size: .5em;
    font-weight: 400;
    font-style: italic;
    letter-spacing: .03em;
    text-transform: none;
    opacity: .85;
}

/* Le taux domine, le cours le complète. Les deux tiennent sur une
   ligne : la chaîne la plus longue attendue est « 1000 IDR = 0.0388 € ».
   Si une devise débordait, c'est ici qu'on réduirait. */
.dv-taux {
    color: var(--dv-taux, #fff);
    font-family: var(--font-cond, 'Roboto Condensed', sans-serif);
    font-size: 7vh;
    font-weight: 700;
    line-height: 1;
    margin-top: 2.5vh;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dv-prix {
    color: var(--dv-cours, #fff);
    font-size: 3.4vh;
    line-height: 1;
    margin-top: 1.6vh;
    opacity: .85;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* --- Pied ----------------------------------------------------------- */

.dv-pied {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    opacity: .7;
}

/* Signature : deux couleurs séparées de celles des cartes. Une vue peut
   harmoniser sa signature avec son fond sans pour autant lui donner la
   couleur de ses libellés — ce sont deux décisions différentes.

   Le balisage vient de cpcb_signature() ; ces règles ne valent que sous
   .dv-pied, la signature garde ailleurs les couleurs de la maison. */

.dv-pied .footer-mark,
.dv-pied .footer-brand-tag {
    color: var(--dv-signature-accent, var(--text-secondary, #c9a063));
}

.dv-pied .footer-mark {
    border-color: var(--dv-signature-accent, var(--text-secondary, #c9a063));
}

.dv-pied .footer-brand-name {
    color: var(--dv-signature, var(--text-primary, #fff));
}


/* =====================================================================
   Vues sans en-tête (_taux.php)

   Ni drapeau, ni nom de pays, ni nom de devise : le tiers supérieur
   revient au fond, qui peut y porter un titre gravé dans l'image,
   plusieurs drapeaux, un logo de zone.

   Sert aux zones monétaires — le franc CFA n'a ni pays ni drapeau
   unique — et aux vues destinées à un public plutôt qu'à un pays :
   des cours en dollars sous un habillage congolais.

   La zone est vide mais réservée : sa hauteur ne varie pas d'une vue à
   l'autre, ce qui permet de composer les fonds une fois pour toutes.
   ===================================================================== */

.dv-reserve {
    flex: 0 0 22vh;
}

/* Sans bande de billets, les cartes prennent la hauteur libérée. Rien
   à déclarer : c'est le comportement d'un empilement flex quand un
   élément disparaît. */