/*!
 * Atlas — gestionnaire immobilier. Version 1.85.0.
 * Copyright (c) 2026 Systegon. Tous droits reserves.
 *
 * Ce fichier et son contenu sont protégés par le droit d'auteur
 * (code de la propriété intellectuelle, art. L112-2 et L122-6).
 * Leur reproduction, adaptation ou réutilisation, même partielle,
 * est interdite sans autorisation écrite de Systegon.
 *
 * https://atlas.systegon.com — contact-atlas@systegon.com
 */

/* ══════════════════════════════════════════════════════════════════════════
   LES UNIVERS — cinq mondes, une seule finition
   ══════════════════════════════════════════════════════════════════════════

   CE QUI A ÉTÉ RETIRÉ, ET POURQUOI C'EST UN PROGRÈS.

   Il y avait quatre « parures » — Ardoise, Papier, Velours — qui réglaient la
   finition : angles, traits, ombres, polices, rythme des animations. Elles ont
   été supprimées. Quatre variations de la même chose n'apportaient rien qu'on
   ne puisse obtenir en changeant la teinte, et elles encombraient l'écran de
   choix d'une question qui n'en était pas une.

   Les univers gardent donc TOUS la finition d'Atlas. Ce qui les sépare tient
   en deux choses, et elles sont ailleurs :

     LA GÉOMÉTRIE, qui n'est plus ici. La grille de Calque, les parcelles de
     les voiles d'Aurore, le balayage de Terminal sont maintenant
     DESSINÉS, sur un canvas posé derrière l'application
     (`public/js/fondUnivers.js` et ses peintres). Un dégradé répété ne sait
     pas bouger ; un canvas, si — et le propriétaire a demandé que le fond
     vive.

     LA COULEUR, qui n'est plus la leur. C'était le défaut de la première
     version : chaque univers imposait ses surfaces, et Terminal confisquait
     même l'accent. On perdait sa teinte en changeant de monde. Désormais les
     surfaces restent déduites de la couleur du compte — un univers ne pose
     plus une seule couleur.

   Il ne reste donc, dans ce fichier, que trois choses : le canvas lui-même,
   ce qu'il remplace, et l'écran qui permet de choisir.
   ═══════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────────────
   LE CANVAS DU FOND
   ──────────────────────────────────────────────────────────────────────────
   Premier enfant de `#app`, en `z-index:-1` : `#app` porte `z-index:1`
   (base.css) et forme donc un contexte d'empilement — un enfant négatif se
   peint au-dessus du fond de `#app` et SOUS tous ses frères, sans qu'aucun
   d'eux ait à déclarer quoi que ce soit. C'est exactement la place
   qu'occupait `#app::before`.

   `position:fixed` et non `absolute` : `#app` est raccourci de 56 px par la
   barre d'onglets sur téléphone, et un fond qui s'arrêterait au-dessus de la
   barre laisserait une bande morte. Le viewport est la bonne référence.

   `pointer-events:none`, et hors du conteneur qui défile (`main`) : le fond
   ne peut ni intercepter un geste, ni peser sur le défilement.
   ────────────────────────────────────────────────────────────────────────── */
#fond-univers{
  position:fixed;inset:0;z-index:-1;
  display:block;width:100%;height:100%;
  pointer-events:none;
}

/* LA CLAIRIÈRE. Le premier plan vit au milieu de l'écran — le soleil de la
   scène 3D, les cartes des autres pages — et chaque monde s'y efface : ce
   n'est pas un trou, c'est une clairière, la lumière du fond remonte vers
   les bords. Elle était creusée par chaque peintre, à chaque image, avec un
   dégradé radial en `destination-out` : MESURÉ À 18 MS PAR IMAGE en rendu
   logiciel, davantage que tout le dessin du monde lui-même. Un masque CSS
   fait la même chose pour rien — le compositeur l'applique, pas le script.
   Atlas (aucun attribut) garde son fond entier : il n'a jamais été creusé.
   `46vmax` : 46 % du plus grand côté, le rayon que les peintres prenaient. */
[data-univers] #fond-univers{
  -webkit-mask-image:radial-gradient(circle 46vmax at center, rgba(0,0,0,.3) 0%, rgba(0,0,0,.68) 55%, #000 100%);
  mask-image:radial-gradient(circle 46vmax at center, rgba(0,0,0,.3) 0%, rgba(0,0,0,.68) 55%, #000 100%);
}

/* CE QUE LE CANVAS REMPLACE.
   Deux couches décoratives existaient en CSS : les deux halos de
   `body::before` (base.css) et les neuf points de `#app::before`
   (signature.css). Le peintre « Atlas » reprend les deux — les mêmes halos,
   la même poussière, mais qui descend. Les laisser produirait un doublon :
   des points fixes sous des points mobiles.

   La classe est posée par `fondUnivers.js` UNE FOIS LE CANVAS MONTÉ, jamais
   par le HTML. Si le script ne se charge pas, la classe n'apparaît pas et les
   deux couches d'origine restent en place : on perd l'animation, jamais le
   fond. */
html.fond-anime body::before,
html.fond-anime #app::before{content:none;}

/* ══════════════════════════════════════════════════════════════════════════
   LA VIGNETTE DE LA SCÈNE 3D S'ALLÈGE QUAND UN MONDE EST CHOISI
   ══════════════════════════════════════════════════════════════════════════
   `layout.css` assombrit les bords de l'organigramme à 92 % de `--void` : la
   profondeur de la scène, et un bon réglage tant que le fond était un dégradé.
   Mais un monde peint vit précisément sur les bords — chaque peintre creuse
   déjà le centre pour le premier plan. Vignette forte + clairière centrale :
   il ne restait qu'un anneau où l'on devinait le monde, et les planches le
   montraient éteint là où il devait se voir. La vignette est donc réduite de
   moitié dès qu'un univers est posé ; Atlas (sans attribut) garde la sienne. */
[data-univers] #scene-wrap{
  background:
    radial-gradient(ellipse 78% 78% at center,
      transparent 0%,
      color-mix(in srgb, var(--void) 22%, transparent) 62%,
      color-mix(in srgb, var(--void) 55%, transparent) 100%);
}


/* ══════════════════════════════════════════════════════════════════════════
   L'AMBIANCE PROPRE À CHAQUE UNIVERS
   ══════════════════════════════════════════════════════════════════════════
   Presque rien, et c'est voulu : tout ce qui faisait le monde est passé au
   canvas. Ne restent ici que les réglages qu'un canvas ne peut pas porter —
   c'est-à-dire ce qui concerne les surfaces POSÉES PAR-DESSUS lui.
   ────────────────────────────────────────────────────────────────────────── */

/* LES SURFACES S'EFFACENT UN PEU, ET SEULEMENT CHEZ CEUX QUI ONT QUELQUE
   CHOSE À MONTRER DESSOUS. Une carte parfaitement opaque sur un fond
   travaillé revient à ne pas avoir de fond du tout : on ne le verrait que
   dans les marges. `color-mix` garde la teinte du compte — on rend la surface
   translucide, on ne la remplace pas. 88 % pour les mondes faits de traits
   (Voie lactée, Plexus, Courbes, Lames, Orbites, Triangles), 85 % pour le voile diffus de Nébuleuse,
   qui pardonne davantage. Le clair garde ses cartes opaques : un grain de
   papier sous un feuillet de papier ne se voit pas, il salit. */
[data-univers="voielactee"] .card, [data-univers="voielactee"] .ly-carte, [data-univers="voielactee"] .auj-carte, [data-univers="voielactee"] .reg-carte,
[data-univers="plexus"] .card, [data-univers="plexus"] .ly-carte, [data-univers="plexus"] .auj-carte, [data-univers="plexus"] .reg-carte,
[data-univers="courbes"] .card, [data-univers="courbes"] .ly-carte, [data-univers="courbes"] .auj-carte, [data-univers="courbes"] .reg-carte,
[data-univers="lames"] .card, [data-univers="lames"] .ly-carte, [data-univers="lames"] .auj-carte, [data-univers="lames"] .reg-carte,
[data-univers="orbites"] .card, [data-univers="orbites"] .ly-carte, [data-univers="orbites"] .auj-carte, [data-univers="orbites"] .reg-carte,
[data-univers="triangles"] .card, [data-univers="triangles"] .ly-carte, [data-univers="triangles"] .auj-carte, [data-univers="triangles"] .reg-carte{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
}
[data-univers="nebuleuse"] .card, [data-univers="nebuleuse"] .ly-carte, [data-univers="nebuleuse"] .auj-carte, [data-univers="nebuleuse"] .reg-carte{
  background:color-mix(in srgb, var(--surface) 85%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ÉCRAN DE CHOIX
   ══════════════════════════════════════════════════════════════════════════
   Cinq cartes. Chacune montre la GÉOMÉTRIE de son univers — la grille, le
   grain, les voiles, les lignes — dessinée en CSS et teintée par la couleur
   du compte, comme le fera le fond lui-même.

   POURQUOI LA VIGNETTE N'EST PAS ANIMÉE. Cinq canvas animés côte à côte sur
   un écran de réglages, c'est cinq boucles de rendu pour une décision qui
   prend trois secondes. Le motif suffit à reconnaître le monde ; et l'aperçu
   véritable, c'est l'écran lui-même, qui change dès qu'on clique.
   ────────────────────────────────────────────────────────────────────────── */
/* 118 px : la largeur qui fait tenir les CINQ mondes sur une rangée dans la
   carte des réglages (mesuré : 5 × 118 + 4 × 10 = 630 pour 670 disponibles).
   À 150 px, le cinquième passait seul à la ligne — une grille de quatre plus
   un orphelin donne à croire qu'on a ajouté le dernier après coup. Sur
   téléphone, `auto-fit` en remet deux par rangée. */
.univ-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;}
.univ-carte{
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:12px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface2);cursor:pointer;text-align:left;
  color:var(--ink);font:inherit;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.univ-carte:hover{transform:translateY(-2px);border-color:var(--accent);}
.univ-carte.choisie{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.univ-carte-nom{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.univ-carte-nom b{font-size:14px;font-weight:600;}
.univ-carte-nom em{font-style:normal;font-size:11.5px;color:var(--mist);}
.univ-carte-mot{font-size:12px;line-height:1.45;color:var(--mist);margin:0;}

/* La vignette : le fond du monde, son motif par-dessus, et deux traits qui
   figurent du texte — de quoi juger, avant de choisir, si le motif reste
   assez discret pour qu'on lise par-dessus. */
.univ-vue{
  position:relative;overflow:hidden;
  height:86px;border-radius:10px;
  border:1px solid var(--line);
  background:var(--void);
  display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:9px;
}
.univ-vue::before{content:'';position:absolute;inset:0;pointer-events:none;}
.univ-vue-trait{
  position:relative;height:5px;border-radius:3px;
  background:color-mix(in srgb, var(--ink) 30%, transparent);
}
.univ-vue-trait.courte{width:55%;}

/* ATLAS — deux halos et une poussière. Les points sont posés à la main : un
   motif aléatoire n'existe pas en CSS, et cinq positions écrites suffisent à
   donner l'idée. */
.univ-vue[data-univers="atlas"]::before{
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 70%, transparent), transparent),
    radial-gradient(1px 1px at 62% 16%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 60%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 84% 38%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 65%, transparent), transparent),
    radial-gradient(1px 1px at 34% 46%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 55%, transparent), transparent),
    radial-gradient(1px 1px at 72% 62%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 60%, transparent), transparent),
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 16%, transparent), transparent 70%);
}

/* NÉBULEUSE — deux nuées, l'une dans la teinte, l'autre tournée par
   `hue-rotate` sur une couche à part, et une poussière d'étoiles. */
.univ-vue[data-univers="nebuleuse"]::before{
  background:
    radial-gradient(1px 1px at 22% 30%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 80%, #fff), transparent),
    radial-gradient(1px 1px at 70% 22%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 70%, #fff), transparent),
    radial-gradient(1.4px 1.4px at 48% 68%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 80%, #fff), transparent),
    radial-gradient(1px 1px at 84% 74%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 60%, #fff), transparent),
    radial-gradient(45% 60% at 28% 60%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 34%, transparent), transparent 70%),
    radial-gradient(40% 55% at 74% 34%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 26%, transparent), transparent 70%);
}
.univ-vue[data-univers="nebuleuse"]::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 50% at 60% 62%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 30%, transparent), transparent 70%);
  filter:hue-rotate(62deg);
}

.univ-vue[data-univers="voielactee"]::before{
  background:
    radial-gradient(circle at 18% 70%, rgba(255,255,255,.9) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 34% 58%, rgba(255,255,255,.7) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 47% 50%, rgba(255,255,255,.95) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 58% 44%, rgba(255,255,255,.6) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 70% 34%, rgba(255,255,255,.8) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 84% 24%, rgba(255,255,255,.7) 0 .6px, transparent 1.1px),
    radial-gradient(circle at 26% 80%, rgba(255,255,255,.5) 0 .5px, transparent 1px),
    radial-gradient(circle at 62% 60%, rgba(255,255,255,.5) 0 .5px, transparent 1px),
    radial-gradient(circle at 40% 36%, rgba(255,255,255,.5) 0 .5px, transparent 1px),
    radial-gradient(circle at 90% 12%, rgba(255,255,255,.6) 0 .5px, transparent 1px),
    linear-gradient(-32deg, transparent 30%, rgba(255,255,255,.14) 48%, rgba(255,255,255,.05) 52%, rgba(255,255,255,.16) 58%, transparent 74%);
  opacity:.9;
}
.univ-vue[data-univers="plexus"]::before{
  background:
    radial-gradient(circle at 22% 66%, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle at 44% 42%, rgba(255,255,255,.95) 0 1.1px, transparent 2px),
    radial-gradient(circle at 63% 58%, rgba(255,255,255,.9) 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.95) 0 1.1px, transparent 2px),
    radial-gradient(circle at 36% 20%, rgba(255,255,255,.8) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,.8) 0 .9px, transparent 1.6px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' preserveAspectRatio='none'%3E%3Cpolygon points='26,53 53,34 76,46' fill='%23fff' fill-opacity='.07'/%3E%3Cpolygon points='53,34 96,24 76,46' fill='%23fff' fill-opacity='.05'/%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='.8'%3E%3Cpath d='M26 53 L53 34 L76 46 L26 53 M53 34 L96 24 L76 46 M43 16 L53 34 M43 16 L26 53 M76 46 L84 66 M96 24 L112 8 M26 53 L6 70 M84 66 L96 24'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
    linear-gradient(-28deg, transparent 34%, rgba(255,255,255,.12) 52%, transparent 70%);
  opacity:.9;
}
/* COURBES — quatre courbes de niveau emboîtées, la maîtresse plus épaisse,
   un chemin en tirets et une croix. */
.univ-vue[data-univers="courbes"]::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23f2e9d6' stroke-opacity='.55' stroke-width='.8'%3E%3Cpath d='M20 62 C10 44 22 22 44 20 C66 18 84 30 92 46 C100 62 84 76 62 74 C40 72 30 80 20 62 Z'/%3E%3Cpath d='M30 56 C24 44 32 30 48 28 C64 26 78 36 82 48 C86 60 74 68 60 66 C46 64 36 70 30 56 Z'/%3E%3Cpath d='M46 50 C44 42 50 38 56 38 C64 38 70 44 70 50 C70 56 64 60 56 58 C50 56 48 58 46 50 Z'/%3E%3C/g%3E%3Cpath d='M38 54 C34 44 40 34 52 32 C66 30 76 40 78 50 C80 60 70 66 58 64 C48 62 42 66 38 54 Z' fill='none' stroke='%23f2e9d6' stroke-opacity='.85' stroke-width='1.6'/%3E%3Cpath d='M0 20 C30 24 50 10 80 14 C100 16 110 8 124 12' fill='none' stroke='%23c9c2b4' stroke-opacity='.55' stroke-width='.8' stroke-dasharray='3 2.5'/%3E%3Cpath d='M98 60 h6 M101 57 v6 M14 30 h6 M17 27 v6' stroke='%23c9c2b4' stroke-opacity='.7' stroke-width='.9'/%3E%3Crect x='84' y='22' width='3' height='3' fill='%23c9c2b4' fill-opacity='.7'/%3E%3Crect x='89' y='25' width='2.5' height='2.5' fill='%23c9c2b4' fill-opacity='.7'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity:.9;
}
/* LAMES — trois plans de verre en diagonale, arêtes claires. */
.univ-vue[data-univers="lames"]::before{
  background:
    linear-gradient(-32deg, transparent 30%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 60%, #fff) 30.5%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 14%, transparent) 31.5%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 4%, transparent) 46%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 40%, #fff) 46.5%, transparent 47%),
    linear-gradient(28deg, transparent 52%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 55%, #fff) 52.5%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 12%, transparent) 53.5%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 3%, transparent) 70%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 35%, #fff) 70.5%, transparent 71%),
    linear-gradient(-32deg, transparent 62%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 50%, #fff) 62.5%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 10%, transparent) 63.5%, transparent 80%),
    radial-gradient(60% 70% at 85% 20%, color-mix(in srgb, var(--teinte-fond, var(--accent)) 22%, transparent), transparent 70%);
  opacity:.9;
}
/* ORBITES — quatre ellipses emboîtées, inclinées, un corps sur deux d'entre
   elles, la ligne des apsides en tirets. */
.univ-vue[data-univers="orbites"]::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' preserveAspectRatio='none'%3E%3Cg transform='rotate(-20 52 46)' fill='none' stroke='%23dfe7f2' stroke-opacity='.6' stroke-width='.8'%3E%3Cellipse cx='52' cy='46' rx='14' ry='6'/%3E%3Cellipse cx='53' cy='46' rx='27' ry='12'/%3E%3Cellipse cx='51' cy='46' rx='41' ry='18'/%3E%3Cellipse cx='54' cy='46' rx='56' ry='25'/%3E%3Cpath d='M-10 46 H120' stroke-dasharray='2 4' stroke-opacity='.4'/%3E%3Cpath d='M49 46 h6 M52 43 v6'/%3E%3C/g%3E%3Cg transform='rotate(-20 52 46)' fill='%23fff'%3E%3Ccircle cx='79' cy='40' r='1.6' fill-opacity='.95'/%3E%3Ccircle cx='24' cy='55' r='1.3' fill-opacity='.9'/%3E%3Ccircle cx='96' cy='60' r='1.2' fill-opacity='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity:.9;
}
/* TRIANGLES — la trame de facettes, dense à gauche, rare à droite. */
.univ-vue[data-univers="triangles"]::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cpolygon points='0,0 20,0 10,17' fill-opacity='.18'/%3E%3Cpolygon points='10,17 20,0 30,17' fill-opacity='.08'/%3E%3Cpolygon points='20,0 40,0 30,17' fill-opacity='.26'/%3E%3Cpolygon points='30,17 40,0 50,17' fill-opacity='.12'/%3E%3Cpolygon points='40,0 60,0 50,17' fill-opacity='.1'/%3E%3Cpolygon points='0,34 10,17 20,34' fill-opacity='.3'/%3E%3Cpolygon points='10,17 30,17 20,34' fill-opacity='.14'/%3E%3Cpolygon points='20,34 30,17 40,34' fill-opacity='.22'/%3E%3Cpolygon points='30,17 50,17 40,34' fill-opacity='.06'/%3E%3Cpolygon points='40,34 50,17 60,34' fill-opacity='.16'/%3E%3Cpolygon points='0,34 20,34 10,51' fill-opacity='.12'/%3E%3Cpolygon points='10,51 20,34 30,51' fill-opacity='.28'/%3E%3Cpolygon points='20,34 40,34 30,51' fill-opacity='.08'/%3E%3Cpolygon points='30,51 40,34 50,51' fill-opacity='.2'/%3E%3Cpolygon points='0,68 10,51 20,68' fill-opacity='.22'/%3E%3Cpolygon points='10,51 30,51 20,68' fill-opacity='.1'/%3E%3Cpolygon points='20,68 30,51 40,68' fill-opacity='.16'/%3E%3Cpolygon points='0,68 20,68 10,85' fill-opacity='.14'/%3E%3Cpolygon points='60,0 80,0 70,17' fill-opacity='.1'/%3E%3Cpolygon points='50,51 60,34 70,51' fill-opacity='.12'/%3E%3Cpolygon points='70,17 80,0 90,17' fill-opacity='.06'/%3E%3Cpolygon points='60,68 70,51 80,68' fill-opacity='.08'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity:.9;
}


/* Le titre de la section, au-dessus des cinq cartes. */
.univ-titre{
  margin:20px 0 10px;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mist);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.univ-titre em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:12.5px;}

/* Le conseil de thème, sous la carte d'un univers qui en demande un autre que
   celui en cours. On conseille, on n'impose pas : quelqu'un peut vouloir un
   papier sur fond de nuit, et ce n'est pas à nous d'en décider. */
.univ-conseil{
  font-size:11.5px;color:var(--attente);
  display:inline-flex;align-items:center;gap:5px;line-height:1.4;
}