/* ═══════════════════════════ Niveau supérieur : la console rétro ═══════════════════════════
 *
 * Un anniversaire comme un passage de niveau sur l'écran d'une console portable des années 90.
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Cinq coques, un seul écran ──
 *
 * La coque, le fond de l'affiche et les boutons changent ; l'écran garde ses quatre tons de vert,
 * parce que c'est lui qu'on reconnaît. **Aucune marque** (`lib/retro-affiche.js`) : ni le nom de la
 * console d'origine, ni ses couleurs de coque, ni la phrase imprimée autour de l'écran.
 * - **Classique** : gris pierre sur marine, la coque qu'on a tous en tête.
 * - **Citron** : jaune sur violet nuit.
 * - **Violet** : violet sur crème.
 * - **Menthe** : turquoise sur rose pâle.
 * - **Rouge** : rouge sur bleu poudre.
 *
 * Police : Press Start 2P, servie par nous (point 2), **dessinée sur une grille de huit points** —
 * c'est ce qui permet de poser tout l'écran sur une grille de vingt cases par dix-huit (`--t`, la
 * case) sans rien mesurer : un caractère est une case, le niveau en occupe trois sur trois.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en
 * tête, et nulle part ailleurs. `[data-style]` ne nomme pas `.rg` exprès, pour que les échantillons
 * du formulaire se colorent avec les mêmes variables.
 * --r-fond / --r-texte : le mur et ce qu'on y écrit (la dédicace) ; --r-coque / --r-bord : la
 * coque et son ombre propre ; --r-cadre : le tour de l'écran ; --r-cadre-texte : ce qu'on y lit ;
 * --r-croix : la croix et les pilules ; --r-bouton : les deux boutons ronds ; --r-marque : le nom
 * de la console. **Contrastes mesurés** (`tests/retro.test.js`) : texte de l'écran ≥ 7 sur le fond
 * de l'écran, dédicace ≥ 7 sur le mur.
 */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* L'écran : quatre tons de vert, communs aux cinq coques. --l0 le fond, --l1 la piste des barres,
   --l2 le ton moyen des sprites, --l3 l'encre, le seul qui porte du texte. */
[data-style], .rg-styles, .rg-dessins {
  --l0: #b3c675; --l1: #94ab5a; --l2: #566f3a; --l3: #1c2e16;
  /* Les deux filets de couleur du cadre, de part et d'autre de la mention, et le voyant. */
  --r-filet-a: #8a2c6b; --r-filet-b: #2f4a9a; --r-voyant: #e0343c;
}
[data-style="Classique"] { --r-fond: #1f2c4d; --r-texte: #f3ecd8; --r-coque: #cdc8ba; --r-bord: #a29d8f; --r-cadre: #565a6c; --r-cadre-texte: #dcdceb; --r-croix: #2b2d38; --r-bouton: #a2285d; --r-marque: #232f73; }
[data-style="Citron"] { --r-fond: #2a2359; --r-texte: #fbf0d0; --r-coque: #f2c626; --r-bord: #c79c0c; --r-cadre: #4b4358; --r-cadre-texte: #ece5f2; --r-croix: #2c2634; --r-bouton: #c42b3a; --r-marque: #3a2a78; }
[data-style="Violet"] { --r-fond: #f6eedb; --r-texte: #2a2359; --r-coque: #7a4cb8; --r-bord: #5d3790; --r-cadre: #3d3350; --r-cadre-texte: #e6def2; --r-croix: #241d33; --r-bouton: #e2527f; --r-marque: #f0e8ff; }
[data-style="Menthe"] { --r-fond: #fbe4df; --r-texte: #1d3f3a; --r-coque: #3fb8a3; --r-bord: #2a8a79; --r-cadre: #3f4b52; --r-cadre-texte: #dff0ee; --r-croix: #20282c; --r-bouton: #d8456b; --r-marque: #123c36; }
[data-style="Rouge"] { --r-fond: #dfe9f2; --r-texte: #1f2c4d; --r-coque: #c9322a; --r-bord: #9a2119; --r-cadre: #4a4a56; --r-cadre-texte: #ececf4; --r-croix: #25252d; --r-bouton: #2a3f8f; --r-marque: #fdeae8; }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur. Les rapports vendus vont de 1,333
 * (30 × 40) à 1,5 (40 × 60) ; la console garde sa taille et c'est l'air autour d'elle qui absorbe
 * l'écart (`justify-content: center`), jamais une taille de texte qui changerait avec le format.
 *
 * **La console suit les proportions de la vraie** : 70 cqw de large pour environ 105 de haut
 * (la vraie fait 0,61 ; 0,67 ici, parce que le 30 × 40 est le format qui se vend et qu'il lui faut
 * encore sa dédicace), un écran qui n'occupe que 62 % de la largeur dans un cadre large, un voyant
 * de batterie et deux filets de couleur sur le cadre, une croix posée dans son creux, deux
 * boutons ronds et deux pilules dans leur logement, une grille de haut-parleur. `--u` est le
 * quatre-vingtième de la largeur : toutes les mesures de la coque s'écrivent en `u`, donc elles
 * suivent la largeur sans qu'on les réécrive. Le nom et le logo de la console d'origine ne sont pas repris. */
.rg {
  --fond: var(--r-fond); --texte: var(--r-texte);
  --c: 70cqw;             /* la largeur de la console */
  --u: calc(var(--c) / 80);
  --t: calc(var(--c) * .031); /* la case de l’écran : 1/20 de sa largeur (43,4 cqw pour 70 de coque) */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5.6cqw;
  padding: 5cqw 0 5cqw; line-height: 1;
  font-family: "Press Start 2P", ui-monospace, monospace;
}
.rg :where(p, ul) { margin: 0; padding: 0; }
.rg [hidden] { display: none !important; }

/* La coque : un rectangle au coin bas-droit très arrondi, un liseré clair en haut à gauche et sombre
   en bas à droite pour le plastique, une ombre portée dure puis douce. L'interrupteur dépasse du
   bord supérieur, à gauche. */
.rg__console {
  position: relative; flex: none; width: var(--c); padding: calc(4 * var(--u)) calc(4 * var(--u)) 0; box-sizing: border-box;
  background: var(--r-coque); border-radius: calc(2.4 * var(--u)) calc(2.4 * var(--u)) calc(16 * var(--u)) calc(2.4 * var(--u));
  box-shadow:
    inset calc(.7 * var(--u)) calc(.7 * var(--u)) 0 rgba(255, 255, 255, .38), inset calc(-.8 * var(--u)) calc(-.8 * var(--u)) 0 var(--r-bord),
    0 calc(1.4 * var(--u)) 0 var(--r-bord), 0 calc(3.6 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .32);
}
.rg__console::before {
  content: ""; position: absolute; left: calc(11 * var(--u)); top: calc(-1.3 * var(--u)); width: calc(8 * var(--u)); height: calc(1.6 * var(--u));
  background: var(--r-bord); border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 0; box-shadow: inset 0 calc(.3 * var(--u)) 0 rgba(255, 255, 255, .25);
}

/* Le tour de l'écran : un cadre sombre aux coins arrondis, large sur les côtés, le coin bas-droit
   plus rond, comme sur l'original. La mention du haut est coincée entre deux filets de couleur ;
   le voyant et sa légende sont sur le côté gauche. */
.rg__cadre {
  position: relative; background: var(--r-cadre); border-radius: calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(8 * var(--u)) calc(1.6 * var(--u));
  padding: calc(2.6 * var(--u)) calc(11.2 * var(--u)) calc(5.4 * var(--u)); box-shadow: inset 0 calc(.5 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .35);
}
.rg__cadre-ligne {
  display: flex; align-items: center; gap: calc(1.4 * var(--u)); margin-bottom: calc(1.6 * var(--u));
  font-family: Inter, system-ui, sans-serif; font-style: italic; font-weight: 700; font-size: calc(1.5 * var(--u)); letter-spacing: .1em;
  color: var(--r-cadre-texte); text-transform: uppercase; white-space: nowrap;
}
.rg__cadre-ligne::before, .rg__cadre-ligne::after {
  content: ""; flex: 1; height: calc(.9 * var(--u));
  border-top: calc(.35 * var(--u)) solid var(--r-filet-a); border-bottom: calc(.35 * var(--u)) solid var(--r-filet-b);
}
.rg__batterie {
  position: absolute; left: calc(1.8 * var(--u)); top: calc(2.6 * var(--u) + 4.6 * var(--u) + var(--t) * 5.5); width: calc(8 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(.9 * var(--u));
  font-family: Inter, system-ui, sans-serif; font-weight: 700; font-size: calc(1.05 * var(--u)); letter-spacing: .06em; color: var(--r-cadre-texte); text-transform: uppercase;
}
.rg__led { flex: none; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: 50%; background: var(--r-voyant); box-shadow: 0 0 calc(1.6 * var(--u)) rgba(224, 52, 60, .75); }

/* L'écran lui-même : vingt cases par dix-huit, sur quatre tons de vert. Un quadrillage de points à
   peine visible fait lire un écran à matrice (deux dégradés, une case de large : à l'impression
   c'est un grain, pas un motif). Le contenu est posé sur la grille par rangée. */
.rg__ecran {
  --pt: calc(var(--t) / 8);
  position: relative; width: calc(var(--t) * 20); height: calc(var(--t) * 18); overflow: hidden;
  background: var(--l0); color: var(--l3);
  box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(0, 0, 0, .28), inset calc(.5 * var(--u)) calc(.6 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .22);
}
.rg__ecran::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, .10) 0 calc(var(--pt) * .5), transparent 0),
    linear-gradient(0deg, rgba(0, 0, 0, .10) 0 calc(var(--pt) * .5), transparent 0);
  background-size: var(--pt) var(--pt);
}
.rg__lcd {
  display: grid; width: 100%; height: 100%;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(18, var(--t));
  font-size: var(--t); line-height: var(--t); text-transform: uppercase;
}
.rg__lcd > * { min-width: 0; white-space: nowrap; }

/* Rangée 1 : la barre du haut, en négatif. « JOUEUR 1 » à gauche, trois cœurs à droite. */
.rg__haut { grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--t) * .5); background: var(--l3); color: var(--l0); }
.rg__coeurs { display: flex; gap: calc(var(--t) * .25); }
/* Un pictogramme de huit points sur huit : un cœur, une flèche. Il prend la couleur du texte. */
.rg__mini { display: inline-block; flex: none; width: var(--t); height: var(--t); vertical-align: top; shape-rendering: crispEdges; }
.rg__mini .a { fill: currentColor; }
/* Rangées 3 et 4 : le prénom, centré (la rangée 2 est vide : le double ne colle pas à la barre).
   Double jusqu'à dix signes, simple au-delà : une règle de nombre de signes (`prenomDouble`), pas
   une mesure, donc la même sur la page, à l'éditeur et à la fabrication. */
.rg__nom { grid-row: 3 / 5; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--t); line-height: var(--t); }
.rg__nom[data-double] { font-size: calc(var(--t) * 2); line-height: calc(var(--t) * 2); }
/* Rangée 5 : le mot « NIVEAU », en petit. */
.rg__niveau-mot { grid-row: 5; text-align: center; }
/* Rangées 6 à 8 : un sprite de chaque côté du nombre, trois cases de haut chacun. */
.rg__hero { grid-row: 6 / 9; display: flex; align-items: center; justify-content: center; gap: var(--t); }
.rg__nombre { font-size: calc(var(--t) * 2.75); line-height: calc(var(--t) * 3); }
.rg__sprite { flex: none; width: calc(var(--t) * 2.75); height: calc(var(--t) * 2.75); shape-rendering: crispEdges; }
.rg__sprite .a { fill: var(--l3); }
.rg__sprite .b { fill: var(--l2); }
/* Rangée 9 : le mot qui suit, « DÉBLOQUÉ ! ». */
.rg__debloque { grid-row: 9; text-align: center; }

/* Rangées 11 à 16 : trois compétences de deux rangées — le libellé et le score, puis la barre.
   La barre compte dix-neuf segments de six points sur huit (`--seg` en est le nombre de pleins, posé
   par le serveur puis par le script) : la piste en ton clair, le plein en encre. */
.rg__stat { display: grid; grid-template-rows: var(--t) var(--t); }
.rg__stat[data-n="1"] { grid-row: 11 / 13; }
.rg__stat[data-n="2"] { grid-row: 13 / 15; }
.rg__stat[data-n="3"] { grid-row: 15 / 17; }
.rg__stat-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--t); padding: 0 calc(var(--t) * .5); }
.rg__stat-libelle { min-width: 0; overflow: hidden; text-overflow: clip; }
.rg__stat-score { flex: none; font-variant-numeric: tabular-nums; }
.rg__barre { position: relative; margin: calc(var(--pt) * 1) calc(var(--t) * .5) 0; height: calc(var(--pt) * 6); }
.rg__barre::before, .rg__barre i {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, var(--l1) 0 calc(var(--pt) * 6), transparent 0 calc(var(--pt) * 8));
}
.rg__barre::before { right: 0; }
.rg__barre i { width: calc(var(--pt) * 8 * var(--seg, 0)); background: repeating-linear-gradient(90deg, var(--l3) 0 calc(var(--pt) * 6), transparent 0 calc(var(--pt) * 8)); }

/* Rangée 18 : « ▶ APPUYEZ SUR START », en bas, comme un écran-titre. */
.rg__start { grid-row: 18; text-align: center; }

/* Le nom de la console, en italique gras sous l'écran, puis les commandes. */
.rg__marque {
  display: block; margin: calc(4 * var(--u)) 0 0 calc(4.5 * var(--u)); font-family: Inter, system-ui, sans-serif; font-style: italic; font-weight: 900;
  font-size: calc(4.6 * var(--u)); letter-spacing: .02em; color: var(--r-marque); text-transform: uppercase; line-height: 1;
}

/* Les commandes. **Chaque légende voyage avec son bouton** : A, B, SELECT et START sont dans le même
   bloc incliné que ce qu'elles nomment. Posées à part et tournées séparément, elles dérivaient
   chacune autour de son propre centre — SELECT finissait sur le bord de la coque. */
.rg__commandes { position: relative; height: calc(53 * var(--u)); }
/* La croix, dans son creux circulaire : deux barres qui se croisent, un point au centre. */
.rg__croix { position: absolute; left: calc(9 * var(--u)); top: calc(12 * var(--u)); width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.rg__croix s {
  position: absolute; left: calc(-2.4 * var(--u)); top: calc(-2.4 * var(--u)); width: calc(21.8 * var(--u)); height: calc(21.8 * var(--u)); border-radius: 50%;
  background: rgba(0, 0, 0, .06); box-shadow: inset calc(.5 * var(--u)) calc(.6 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .28), 0 calc(.35 * var(--u)) 0 rgba(255, 255, 255, .3);
}
.rg__croix::before, .rg__croix::after {
  content: ""; position: absolute; z-index: 1; background: var(--r-croix); border-radius: calc(.9 * var(--u));
  box-shadow: 0 calc(.5 * var(--u)) 0 rgba(0, 0, 0, .3), inset 0 calc(.3 * var(--u)) 0 rgba(255, 255, 255, .14);
}
.rg__croix::before { left: 0; right: 0; top: calc(5.7 * var(--u)); height: calc(5.6 * var(--u)); }
.rg__croix::after { top: 0; bottom: 0; left: calc(5.7 * var(--u)); width: calc(5.6 * var(--u)); }
.rg__croix i { position: absolute; z-index: 2; left: calc(6.8 * var(--u)); top: calc(6.8 * var(--u)); width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: inset 0 calc(.3 * var(--u)) 0 rgba(0, 0, 0, .25); }

/* Deux boutons ronds dans leur logement incliné : B à gauche, A à droite, et l'inclinaison
   les met l'un plus haut que l'autre. Légende sous chacun, dans le même bloc. */
.rg__boutons {
  position: absolute; right: calc(6 * var(--u)); top: calc(7 * var(--u)); display: flex; gap: calc(5.2 * var(--u));
  padding: calc(3 * var(--u)) calc(4.4 * var(--u)) calc(1.8 * var(--u)); border-radius: 99cqw; transform: rotate(-24deg); transform-origin: center;
  background: rgba(0, 0, 0, .06); box-shadow: inset calc(.5 * var(--u)) calc(.6 * var(--u)) calc(.9 * var(--u)) rgba(0, 0, 0, .22), 0 calc(.35 * var(--u)) 0 rgba(255, 255, 255, .3);
}
.rg__bouton { display: flex; flex-direction: column; align-items: center; gap: calc(1.3 * var(--u)); }
.rg__bouton b {
  display: block; width: calc(9.4 * var(--u)); height: calc(9.4 * var(--u)); border-radius: 50%; background: var(--r-bouton);
  box-shadow: 0 calc(.7 * var(--u)) 0 rgba(0, 0, 0, .3), inset calc(.6 * var(--u)) calc(.6 * var(--u)) 0 rgba(255, 255, 255, .25);
}
.rg__bouton span { font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: calc(2.6 * var(--u)); color: var(--r-marque); letter-spacing: .04em; line-height: 1; }

/* Les deux pilules, dans leur logement incliné, chacune avec sa légende dessous. */
.rg__pilules {
  position: absolute; left: calc(21 * var(--u)); bottom: calc(8 * var(--u)); display: flex; gap: calc(3.6 * var(--u));
  padding: calc(2.4 * var(--u)) calc(3.2 * var(--u)) calc(1.4 * var(--u)); border-radius: 99cqw; transform: rotate(-24deg); transform-origin: center;
  background: rgba(0, 0, 0, .06); box-shadow: inset calc(.4 * var(--u)) calc(.5 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .2), 0 calc(.3 * var(--u)) 0 rgba(255, 255, 255, .3);
}
.rg__pilule { display: flex; flex-direction: column; align-items: center; gap: calc(1.2 * var(--u)); }
.rg__pilule i { display: block; width: calc(8.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 99cqw; background: var(--r-croix); box-shadow: 0 calc(.45 * var(--u)) 0 rgba(0, 0, 0, .28); }
.rg__pilule span { font-family: Inter, system-ui, sans-serif; font-weight: 800; font-size: calc(1.7 * var(--u)); letter-spacing: .1em; color: var(--r-marque); line-height: 1; }
/* La grille du haut-parleur : six fentes en diagonale, en bas à droite, dans le grand arrondi. */
.rg__haut-parleur { position: absolute; right: calc(7 * var(--u)); bottom: calc(4.5 * var(--u)); width: calc(12 * var(--u)); height: calc(12.5 * var(--u)); transform: rotate(-24deg); display: flex; gap: calc(1.7 * var(--u)); justify-content: center; }
.rg__haut-parleur i { display: block; width: calc(1.2 * var(--u)); height: 100%; border-radius: 99cqw; background: var(--r-bord); box-shadow: inset calc(.3 * var(--u)) calc(.3 * var(--u)) 0 rgba(0, 0, 0, .3); }

/* La dédicace : posée sur le mur, une seule ligne de quarante signes au plus. Facultative ; son
   exemple est estompé au premier affichage et ne s'imprime pas (`affiche-exemple`). */
.rg__dedicace {
  flex: none; width: 88%; text-align: center; font-size: 2cqw; line-height: 1.7; color: var(--r-texte);
  text-transform: uppercase; letter-spacing: 0; overflow-wrap: anywhere;
}
.rg__dedicace[hidden] { display: none; }

/* ── Le formulaire ── */
.rg-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rg-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.rg-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.rg-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.rg-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.rg-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : un fond de mur, une petite coque dessus, un petit écran vert. */
.rg-echantillon {
  position: relative; width: 100%; max-width: 12rem; height: 6.4rem; background: var(--r-fond); border-radius: .4rem; overflow: hidden;
}
.rg-echantillon::before {
  content: ""; position: absolute; left: 50%; top: .8rem; width: 4.6rem; height: 7rem; margin-left: -2.3rem;
  background: var(--r-coque); border-radius: .4rem .4rem 1.8rem .4rem; box-shadow: inset -.2rem -.2rem 0 var(--r-bord);
}
.rg-echantillon::after {
  content: ""; position: absolute; left: 50%; top: 1.5rem; width: 3rem; height: 2.7rem; margin-left: -1.5rem;
  background: var(--l0); box-shadow: 0 0 0 .35rem var(--r-cadre);
}
.rg-dessins { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; }
.rg-dessins input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rg-dessins label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0; padding: .6rem .2rem;
  font-size: 1.15rem; font-weight: 600; text-align: center; line-height: 1.2;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem;
}
.rg-dessins svg { width: 3.2rem; height: 3.2rem; shape-rendering: crispEdges; background: var(--l0); padding: .3rem; box-sizing: content-box; }
.rg-dessins svg .a { fill: var(--l3); }
.rg-dessins svg .b { fill: var(--l2); }
.rg-dessins input:checked + label { border-color: rgb(var(--color-foreground)); }
.rg-dessins input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.rg-stats { display: grid; gap: 1.2rem; }
.rg-stat-champ { padding: 0; border: 0; margin: 0; min-width: 0; }
.rg-stat-champ legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.rg-stat { display: grid; grid-template-columns: minmax(0, 1fr) 8.4rem; gap: .8rem; align-items: end; }
.rg-stat label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.rg-stat input { width: 100%; }
.rg-score { position: relative; }
.rg-score input { text-align: right; }
.rg-stat-rang { display: flex; gap: .6rem; align-items: end; }
.rg-stat-rang > div:first-child { flex: 1; min-width: 0; }
.rg-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer; flex: none;
}
.rg-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rg-de svg circle { fill: currentColor; stroke: none; }
.rg-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.rg-idees button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
@media (min-width: 750px) { .rg-styles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }