/* ==========================================================================
   Les univers des créations (V3), partagés par l'accueil et Créations.
   Chaque création garde sa couleur et la police de son site. La couleur de fond
   est dans --fond-univers : la page la pose sur le fond fixe pendant les animations,
   ou directement sur la section quand les univers sont les uns sous les autres.
   Polices hébergées sur le site, licence OFL (Fontsource 5.3.0).
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-latin-800-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Fichier variable : toutes les graisses, et des lettres qui s'ajustent à leur taille (comme les maquettes) */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

.univers__nom { margin: 0 0 22px; line-height: .95; letter-spacing: -.04em; font-weight: 600; text-wrap: initial; }
.univers__type { margin: 0 0 14px; font-size: 19px; line-height: 1.45; }
.univers__fait { margin: 0 0 26px; max-width: 470px; font-size: 16px; line-height: 1.6; opacity: .78; }
.univers__lien { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.univers__lien .icone { width: 16px; height: 16px; fill: currentColor; flex: none; }
.univers__note { font-size: 14px; opacity: .6; }

/* Shop Pépite : bordeaux profond, le nom en italique comme sur son site */
.u-pepite { --fond-univers: #2a070c; color: #f3ebdd; }
.u-pepite .univers__nom { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 800; letter-spacing: -.02em; }

/* CLESS GAME RP : béton froid, images du jeu en grand comme au cinéma */
.u-cless { --fond-univers: #151618; color: #e4e4e1; }
.u-cless .univers__nom { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: 0; }

/* Glace Pétard : un rose fraise plus doux que le rose fluo de son site (choix de Marco en V9), sa police
   et ses gros contours noirs */
.u-glace { --fond-univers: #f3779f; color: #140b22; }
.u-glace .univers__nom { font-family: "Bricolage Grotesque", var(--font); font-weight: 800; letter-spacing: -.06em; }
.u-glace .univers__fait { opacity: 1; }
.u-glace :focus-visible { outline-color: #140b22; }

/* Rappel : le vert de l'outil */
.u-rappel { --fond-univers: #0e2118; color: #f1f3ee; }
.u-rappel .univers__nom { font-weight: 700; letter-spacing: -.05em; }
.u-rappel .univers__nom i { font-style: normal; color: #3fb57a; }

/* Dans la mise en scène, les liens d'une création ne reçoivent les clics que lorsqu'on les voit (accueil.js, creations.js) */
.immersion .univers__lien { pointer-events: none; }