/* =====================================================================
   Gabarits de l'or — public/assets/or.css

   Le commun des écrans de l'or. Chargé en plus de screens.css par
   page.php, puis complété de la feuille de l'écran servi :

     or.css       le cadre et la grille — ici
     pieces.css   les deux faces d'une pièce
     bijoux.css   le visuel unique, et le vrac

   Ce fichier ne décrit donc rien de ce qu'on voit dans une case : il
   décrit la case. C'est ce qui permet de supprimer un contenu en
   supprimant deux fichiers, sans laisser de règles orphelines dans une
   feuille partagée.

   Le footer n'est pas ici non plus : il a son composant PHP, il a sa
   feuille — public/assets/footer.css.

   .or porte un modificateur par écran : .or.or--pieces, .or.or--bijoux.
   Toute règle d'une feuille d'écran qui surcharge le cadre commun doit
   passer par lui. En playlist, les feuilles des deux écrans sont dans
   le même document, et une surcharge nue les atteindrait tous les
   deux.

   Pas de fond, pas de décor : la vue est posée sur le navy de la
   maison. Rien n'est donc réservé à une image, et la mise en page
   n'obéit qu'à elle-même — c'est ce qui la distingue des vues devise,
   dont la géométrie est figée pour que les fonds se composent une fois.

   Trois bandes, dans l'ordre du regard : ce qu'on achète, ce à quoi ça
   ressemble, qui l'achète.

     header    le titre de l'écran, centré — fixe
     main      les contenus empilés, tout l'espace restant
     pied      la signature — fixe

   Header et footer appartiennent à l'écran et ne bougent pas quand le
   main tourne. Le main prend la hauteur libre : rien n'est calé sur un
   pourcentage, donc un sous-titre absent agrandit la grille au lieu de
   laisser un trou.

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

   Couleurs : celles de la maison, lues dans les variables d'identité.
   Rien de réglable par écran — deux écrans de l'or n'ont aucune raison
   d'avoir des couleurs différentes, contrairement à deux devises dont
   chacune porte celles de son pays.
   ===================================================================== */

/* Enfant direct de body.screen, qui est déjà une colonne flex portant
   la compensation d'affichage en padding. Surtout pas position:absolute
   ici : sans ancêtre positionné, la vue se calerait sur la fenêtre
   entière et sortirait du padding, donc de la zone visible sur un
   téléviseur qui rogne les bords. */
.or {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--cpcb-navy, #14304d);
    font-family: var(--font, 'Roboto', Arial, sans-serif);
    overflow: hidden;
}


/* --- L'écran dans une playlist --------------------------------------
   Servi seul par page.php, .or est enfant direct de body.screen : il
   prend sa hauteur du flex et vit dans le padding de compensation.
   Rien à ajouter.

   Dans une playlist, il est à l'intérieur d'une .view, elle-même en
   position absolue dans .stage. Un enfant en flux n'y a aucune hauteur
   de référence : la grille s'effondre et le mur de photos disparaît.
   Il faut donc l'y ancrer explicitement.

   Cette règle est bien portée par .view > .or, et pas par .or : rendu
   absolu dans une page autonome, sans ancêtre positionné, il se
   calerait sur la fenêtre entière et sortirait de la zone visible du
   téléviseur — la compensation d'affichage serait perdue.
   -------------------------------------------------------------------- */

.view > .or {
    position: absolute;
    inset: 0;
}


/* --- Header ---------------------------------------------------------
   Centré : sans fond à ménager, le titre n'a aucune raison d'être
   poussé à gauche, et un titre centré sur un écran de vitrine se lit
   de plus loin.

   Le filet sous le titre sépare sans meubler. Il tient la largeur du
   texte le plus long, pas celle de l'écran — une règle pleine largeur
   couperait la vue en deux.
   -------------------------------------------------------------------- */

.or-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2vh;
    padding: 3vh 4vw 0;
}

.or-titre {
    color: var(--cpcb-gold, #c9a063);
    font-family: var(--font-cond, 'Roboto Condensed', sans-serif);
    font-size: 7.5vh;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Dégradé plutôt qu'un trait plein : les extrémités s'éteignent, le
   filet se termine sans buter. */
.or-filet {
    width: 34vw;
    height: 2px;
    background: linear-gradient(90deg,
                transparent,
                var(--cpcb-gold, #c9a063) 20%,
                var(--cpcb-gold, #c9a063) 80%,
                transparent);
    opacity: .5;
}


/* --- Main -----------------------------------------------------------
   Les contenus sont tous rendus au chargement et superposés : la
   bascule joue sur l'opacité, jamais sur display. Aucun recalcul de
   mise en page au changement — même principe que .view dans
   screens.css, un niveau plus bas.

   Le fondu est un peu plus long que celui des diapos de playlist :
   passer d'une grille de pièces à une autre est un changement plus
   discret que passer d'une devise à l'autre, et gagne à être vu.
   -------------------------------------------------------------------- */

.or-main {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    padding: 1.6vh 4vw 1.6vh;
}

.or-item {
    position: absolute;
    inset: 1.6vh 4vw 1.6vh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 0;
    transition: opacity .8s ease;
}

.or-item.active { opacity: 1; }





/* --- Grille ---------------------------------------------------------
   3 x 2 : six cases, le compte que les contenus attendent. Le nombre
   n'est pas contraint par le code, il l'est par le format — une
   septième entrée créerait une troisième rangée et écraserait la mise
   en page.

   La grille prend toute la hauteur disponible du contenu, et la
   mention la sienne en bas : c'est le comportement d'un empilement
   flex, rien à déclarer. Sans fond à ménager, elle est franchement
   plus grande que celle des vues devise.
   -------------------------------------------------------------------- */

.or-grille {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.2vh 2vw;
}

/* La case, quel que soit son contenu : une pièce, un bijou, ce qui
   viendra. Cibler > figure et non une classe par écran évite d'avoir à
   ajouter un sélecteur ici chaque fois qu'un écran naît.

   min-height: 0 partout où une case doit pouvoir rétrécir : sans lui,
   une image impose sa taille naturelle et fait déborder la grille. */
/* margin: 0 — le navigateur donne 1em/40px à toute <figure>, et une
   marge horizontale empêche l'étirement dans la cellule de grille : la
   case perdait 80 px de large, donc la pièce autant. C'est la seule
   règle de ce fichier qui corrige un défaut du navigateur plutôt que
   d'exprimer une intention.

   height: 100% pour la même raison en hauteur. Les pixels perdus le
   sont sur la pièce, pas sur le vide. */
.or-grille > figure {
    margin: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2vh;
}


/* Légende : capitales condensées, comme les libellés des cartes de
   cours. Une seule ligne — un nom qui déborderait est un nom à
   raccourcir, pas une ligne à replier. */

.or-legende {
    flex: 0 0 auto;
    color: var(--cpcb-gold, #c9a063);
    font-family: var(--font-cond, 'Roboto Condensed', sans-serif);
    font-size: 2.4vh;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}