.nouv{--mono:ui-monospace,'SF Mono',SFMono-Regular,'JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace}
/* ==========================================================================
   LE JOURNAL DES NOUVEAUTES

   Ces regles vivaient dans une balise <style> a l'interieur de nouveautes.php.
   Elles en sont sorties parce que la MODALE de la barre du haut affiche
   exactement le meme journal : deux copies auraient voulu dire deux endroits
   ou corriger, et une seule des deux corrigee un jour sur deux.

   TOUT EST PREFIXE PAR .nouv. Cette feuille est chargee par index.php, qui a
   la sienne : .av, .sub et .vide s'y croisent, et le prefixe les enferme dans
   le journal, page comme modale.

   Ce qui n'est PAS ici est reste dans nouveautes.php : le corps de page et
   l'en-tete « Nouveautés », qui n'existent que sur la page.
   ========================================================================== */
/* La colonne reste etroite : c'est une page qui se lit. */


/* ---- l'en-tete, celui du reste du site ---- */
/* Cette page portait la bande des pages legales — un petit "D Dexly" et un
   lien "Retour au site" en texte. Elle prend le meme en-tete que "Mon compte",
   "Mes dresseurs" et la table des types : meme pictogramme que le bouton qui
   y mene, meme bouton de retour, au meme endroit. */








/* Sous 560 px, le bouton de retour passe SOUS le titre au lieu de lui disputer
   la largeur. La base a zero garde le titre a cote du pictogramme : le passage
   a la ligne se decide AVANT que les elements ne retrecissent. */


/* =============================================================================
   LE JOURNAL, EN FICHES

   Chaque entree est une fiche a deux colonnes. A gauche une TRANCHE etroite
   qui porte le genre trois fois : la dorsale coloree, le numero, et le libelle
   a la verticale. A droite le contenu.

   POURQUOI LA TRANCHE. Le genre etait une pastille de couleur posee au milieu
   d'une ligne qui portait deja la date, l'insigne « nouveau » et le bandeau
   Master Ball : quatre etiquettes de quatre formes, et il fallait les lire
   toutes pour trouver celle qu'on cherchait. Sorti de cette ligne, le genre
   se voit du coin de l'oeil, et la ligne du haut n'a plus que deux choses a
   dire.

   POURQUOI LE NUMERO. Il donne a la liste ce qu'un journal a et qu'une pile de
   cartes n'a pas : un ordre qu'on peut nommer. C'est l'identifiant de
   l'entree, donc aussi son ancre (#nouv-7), donc l'adresse qu'on partage.

   LA CHASSE FIXE partout dans les petits caracteres — numero, genre, date,
   en-tetes. C'est ce qui donne son air d'appareil a l'ensemble, et c'est une
   police deja installee sur la machine : rien a telecharger.
   ============================================================================= */

/* Plus de cadre autour de la liste : ce sont les fiches qui sont des cadres,
   et un cadre autour de cadres ne separe plus rien. */
.nouv .journal{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.nouv .journal.rien{margin-top:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:10px}

.nouv .item{display:grid;grid-template-columns:52px 1fr;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 88%,#0b0e15);
  border:1px solid var(--line);border-radius:9px}

/* ---- la tranche ---- */
.nouv .sp{position:relative;padding:13px 0;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  background:color-mix(in srgb,var(--surface) 60%,#080b12);
  border-right:1px solid var(--line)}
/* La dorsale. 3 px, sur toute la hauteur : c'est le seul aplat de couleur de
   la fiche, et il tient tout seul le genre de l'entree. */
.nouv .sp::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--line2,#39445c)}
.nouv .item.nv .sp::before{background:var(--ok)}
.nouv .item.in .sp::before{background:var(--gold)}
.nouv .item.co .sp::before{background:var(--blue)}
.nouv .num{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;
  color:var(--dim);white-space:nowrap}
/* Le numero passe a l'or quand l'entree n'a pas ete lue. C'est ce qui remplace
   la pastille doree d'avant, sans ajouter d'element : la couleur d'un element
   qui existe deja coute moins de place qu'un point de plus. */
.nouv .item.neuf .num{color:var(--gold)}
/* Le libelle du genre, a la verticale. rotate(180deg) apres writing-mode pour
   qu'il se lise du bas vers le haut : dans l'autre sens il faut pencher la
   tete du mauvais cote. */
.nouv .gl{font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;color:var(--dim);
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  white-space:nowrap;overflow:hidden}

/* ---- le contenu ---- */
.nouv .ct{padding:13px 16px 15px;min-width:0}
.nouv .meta{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap}
/* La date part a droite de sa rangee et y reste : c'est la seule information
   de cette ligne qu'on cherche du regard plutot que de lire. */
.nouv .date{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.nouv .item h3{margin:0 0 7px;font-size:15.5px;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;color:var(--txt)}
.nouv .item p{margin:0 0 8px;font-size:13.5px;line-height:1.62;color:var(--mut)}
.nouv .item p:last-child{margin-bottom:0}

/* Contour et non aplat : sur une fiche deja sombre, un rectangle dore plein
   pesait plus lourd que le titre a cote. */
.nouv .neufbadge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);padding:2px 7px;border-radius:4px;
  background:color-mix(in srgb,var(--gold-bg) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-bg) 30%,transparent)}
/* LE BANDEAU MASTER BALL.
   Violet et non dore : sur ce site l'or est la couleur des actions, le violet
   celle de l'abonnement. C'est la meme teinte que la bille de l'offre et que
   l'insigne des pages publiques, pour qu'on la reconnaisse sans la lire.

   La Ball dessinee dedans vient de assets/insignes.css, chargee par les trois
   pages ou ce journal s'affiche : la sienne, le site, et l'accueil. La valeur
   de repli n'est pas une deuxieme copie du dessin, c'est « rien » : si la
   feuille manquait, l'etiquette perdrait son picto, pas sa lisibilite. */
.nouv .mbtag{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 8px;border-radius:4px;white-space:nowrap;
  color:var(--shiny-t,#c9aefd);background:color-mix(in srgb,var(--shiny) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--shiny) 32%,transparent)}
.nouv .mbtag::after{content:"";display:block;width:10px;height:10px;flex:none;
  background:var(--ball-master,none) no-repeat center/contain}

/* La capture d'ecran d'une nouveaute. Cliquable pour la voir en grand, jamais
   plus haute qu'un tiers d'ecran : une entree ne doit pas devenir une image
   qu'on scrolle, le texte reste ce qu'on vient lire ici. */
.nouv .shot{display:block;margin-top:11px;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);line-height:0;transition:.15s}
.nouv .shot:hover{border-color:var(--blue)}
.nouv .shot img{display:block;width:100%;max-height:34vh;object-fit:cover;object-position:top}

/* Sous 420 px, la tranche mange trop de largeur : elle se couche en bandeau,
   le numero et le genre cote a cote, et la dorsale passe en haut. */
@media (max-width:420px){
  .nouv .item{grid-template-columns:1fr}
  .nouv .sp{flex-direction:row;justify-content:flex-start;gap:12px;padding:8px 14px;
    border-right:0;border-bottom:1px solid var(--line)}
  .nouv .sp::before{left:0;right:0;bottom:auto;width:auto;height:3px}
  .nouv .gl{writing-mode:horizontal-tb;transform:none;font-size:9px}
}

/* =============================================================================
   L'EN-TETE DE LA FENETRE

   Prefixe .jrn et non .nouv, et c'est voulu : .nouv enveloppe le CONTENU du
   journal, qui arrive par fetch dans le corps de la fenetre. L'en-tete, lui,
   est ecrit dans la page qui porte la fenetre — index.php et accueil.php — et
   se trouve donc en dehors.

   Il est quand meme ici, dans CETTE feuille, parce que les deux pages
   l'affichent : ecrit dans leurs feuilles respectives il aurait fallu le
   corriger a deux endroits, et une fois sur deux on en oublie un.

   La diode n'est pas un gadget. C'est ce qui fait basculer la fenetre du
   registre « boite de dialogue » vers celui d'un appareil qu'on allume, et
   c'est ce registre-la que le journal en fiches numerotees demande. */
.jrn .hd{gap:11px;background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface) 82%,#1b2740),
    color-mix(in srgb,var(--surface) 92%,#0b0e15))}
.jrn .led{width:11px;height:11px;border-radius:50%;flex:none;background:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-bg) 14%,transparent),
             0 0 12px color-mix(in srgb,var(--gold-bg) 55%,transparent)}
.jrn .hd b{font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase}
.jrn .cpt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);padding:3px 9px;border-radius:4px;white-space:nowrap;
  background:color-mix(in srgb,var(--gold-bg) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-bg) 26%,transparent)}
/* La croix garde sa place tout a droite quel que soit ce qu'il y a avant. */
.jrn .hd button{margin-left:auto}
/* La feuille est chargee par des pages qui n'ont pas toutes --mono : il est
   declare sur .nouv pour le journal, il l'est ici pour l'en-tete. */
.jrn{--mono:ui-monospace,'SF Mono',SFMono-Regular,'JetBrains Mono','Roboto Mono',Menlo,Consolas,monospace}

.nouv .vide{color:var(--dim);text-align:center;padding:40px 0}