/* Jeu de l'accueil (pages #/roue et #/machine aussi) : scène de casino pleine largeur,
   sélecteur de version, roue en SVG et clapet (V1), bouton TOURNER et fiche du concours tiré.
   La machine à concours (V2) a ses propres styles dans css/machine.css. Voir docs/ROUE.md,
   docs/MACHINE.md et js/roue.js.
   La scène reste sombre dans les deux modes. Chargé après jeu.css. */

/* --- Scène --------------------------------------------------------------- */
.scene-roue {
  --titre: #ffffff; --lien: #9cc3ff;
  position: relative; isolation: isolate; overflow: hidden; margin-top: 72px;
  padding: clamp(36px, 6vw, 64px) 16px clamp(40px, 6vw, 72px);
  color: #fff; text-align: center; background: var(--nuit);
}
/* Fond : la salle de casino sous un voile marine (#081530 à 45 %), bords assombris. */
.scene-roue-fond {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 75% 65% at 50% 48%, transparent 45%, rgba(5, 13, 34, 0.6) 100%),
    linear-gradient(rgba(8, 21, 48, 0.45), rgba(8, 21, 48, 0.45)),
    url("../img/roue/scene-large.webp") center 62% / cover no-repeat;
}
/* Téléphone : la version en hauteur de la même salle, recadrée au centre. */
@media (max-width: 700px) {
  .scene-roue-fond {
    background:
      radial-gradient(ellipse 90% 70% at 50% 45%, transparent 45%, rgba(5, 13, 34, 0.55) 100%),
      linear-gradient(rgba(8, 21, 48, 0.45), rgba(8, 21, 48, 0.45)),
      url("../img/roue/scene-haute.webp") center top / cover no-repeat;
  }
}
.scene-roue-faisceaux { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
/* Faisceau : une ellipse en dégradé, étirée depuis le projecteur. Ni flou, ni masque, ni
   découpe : le calque est peint une fois, puis seulement tourné (sinon, chaque image le repeint). */
.scene-roue-faisceaux span {
  position: absolute; top: -12%; width: max(30vw, 200px); height: 125%; transform-origin: 50% 0; will-change: transform;
  background: radial-gradient(ellipse 34% 100% at 50% 0, rgba(255, 236, 170, 0.2), rgba(255, 236, 170, 0.07) 55%, transparent 80%);
}
.scene-roue-faisceaux span:nth-child(1) { left: 4%; transform: rotate(16deg); }
.scene-roue-faisceaux span:nth-child(2) { right: 4%; transform: rotate(-16deg); }
.animations .scene-roue-faisceaux span:nth-child(1) { animation: roue-balayer-g 12s ease-in-out infinite alternate; }
.animations .scene-roue-faisceaux span:nth-child(2) { animation: roue-balayer-d 14s ease-in-out infinite alternate; }
@keyframes roue-balayer-g { from { transform: rotate(20deg); } to { transform: rotate(-6deg); } }
@keyframes roue-balayer-d { from { transform: rotate(-20deg); } to { transform: rotate(6deg); } }
.scene-roue-paillettes { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.scene-roue-contenu { position: relative; max-width: 1100px; margin: 0 auto; display: grid; justify-items: center; }

/* Page #/roue : la scène occupe l'écran, sous l'en-tête transparent. */
.scene-roue-grande { margin-top: -68px; padding-top: calc(68px + clamp(18px, 3vw, 34px)); min-height: 100vh; min-height: 100svh; }

/* --- Enseigne « ROUE DE FORTUNE », cadre d'ampoules qui défilent ------------ */
.enseigne-roue {
  position: relative; display: inline-block; max-width: 100%; padding: 14px clamp(20px, 4vw, 38px) 13px;
  border-radius: 20px; border: 3px solid #f5c542;
  background: linear-gradient(180deg, #0f2f7a, #061638);
  box-shadow: 0 0 0 5px rgba(5, 13, 34, 0.7), 0 0 38px rgba(251, 191, 36, 0.45), inset 0 0 22px rgba(251, 191, 36, 0.22);
}
.enseigne-roue h2 {
  margin: 0; font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; line-height: 1;
  letter-spacing: 0.08em; font-size: clamp(1.45rem, 5.6vw, 2.9rem); white-space: nowrap;
  background: linear-gradient(180deg, #fff7d6 0%, #fde68a 30%, #fbbf24 55%, #d97706 82%, #fcd34d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #92400e) drop-shadow(0 2px 0 #6b3a0a) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.enseigne-roue .ampoules i { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.enseigne-gros-lot { display: none; }
.enseigne-roue.gros-lot .enseigne-normal { display: none; }
.enseigne-roue.gros-lot .enseigne-gros-lot { display: inline; }
.animations .enseigne-roue.gros-lot .enseigne-gros-lot { animation: roue-clignote 0.45s steps(2, jump-none) 8; }
.enseigne-roue.gros-lot { box-shadow: 0 0 0 5px rgba(5, 13, 34, 0.7), 0 0 60px rgba(251, 191, 36, 0.8), inset 0 0 26px rgba(251, 191, 36, 0.35); }
@keyframes roue-clignote { 50% { opacity: 0.25; } }

.scene-roue-intro {
  max-width: 34em; margin: 16px auto 0; color: #e3eaff; font-weight: 600; line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* --- Sélecteur de version : V1 roue | V2 machine ------------------------------ */
.choix-jeu {
  display: inline-flex; max-width: 100%; margin: 0 auto 16px; padding: 4px; gap: 4px; border-radius: var(--rayon-plein);
  background: rgba(5, 13, 34, 0.82); border: 1.5px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.choix-jeu-option {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: var(--rayon-plein);
  background: transparent; color: #dbe5ff; font-family: var(--police-titre); font-weight: 800; font-size: var(--taille-s); white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.choix-jeu-option small {
  padding: 1px 6px; border-radius: 6px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em;
  background: rgba(251, 191, 36, 0.18); color: var(--or-clair);
}
.choix-jeu-option:hover:not([disabled]) { background: rgba(255, 255, 255, 0.1); color: #fff; }
.choix-jeu-option[aria-pressed="true"] { background: linear-gradient(180deg, #fcd34d, var(--or) 45%, var(--or-fonce)); color: var(--sur-or); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.choix-jeu-option[aria-pressed="true"] small { background: rgba(10, 27, 61, 0.15); color: var(--sur-or); }
.choix-jeu-option[disabled] { cursor: progress; }
.choix-jeu-option:focus-visible { border-radius: var(--rayon-plein); }
@media (max-width: 400px) {
  .choix-jeu-option { padding: 7px 10px; font-size: 0.8rem; gap: 4px; }
}

/* --- La zone du jeu (roue ou machine) ----------------------------------------- */
.roue-zone { position: relative; width: min(100%, 580px); margin: 0 auto; }
.scene-roue-grande .roue-zone { width: min(100%, 760px, max(300px, calc(100svh - 330px))); }
[data-version="machine"] .roue-zone { width: min(100%, 520px); }
.scene-roue-grande[data-version="machine"] .roue-zone { width: min(100%, 640px, max(300px, calc((100svh - 330px) * 0.896))); }
/* En attendant les concours : la forme dorée du jeu choisi. */
.jeu-attente {
  display: block; width: 100%; aspect-ratio: 1; margin-top: 8%; border-radius: 50%;
  border: clamp(10px, 4vw, 26px) solid rgba(251, 191, 36, 0.55);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.35), rgba(8, 21, 48, 0.75));
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.35), inset 0 0 40px rgba(0, 0, 0, 0.5);
}
[data-version="machine"] .jeu-attente { aspect-ratio: 1120 / 1250; margin-top: 0; border-radius: 8% / 7%; }
.animations .jeu-attente { animation: roue-attente 1.6s ease-in-out infinite; }
@keyframes roue-attente { 50% { opacity: 0.55; } }

/* --- La roue ---------------------------------------------------------------- */
/* Carré : le clapet dépasse au-dessus, d'où la marge (pourcentage de la largeur). */
.roue {
  position: relative; width: 100%; aspect-ratio: 1; margin-top: 8%; cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.roue.saisie { cursor: grabbing; }
.scene-roue-grande .roue { touch-action: none; }
.roue * { pointer-events: none; }
/* Halo doré derrière la roue et ombre portée sur la scène. */
.roue::before {
  content: ""; position: absolute; inset: -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.1) 72%, transparent);
}
.roue-ombre {
  position: absolute; left: 12%; right: 12%; bottom: -5%; height: 10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent);
}
.roue-rotor { position: absolute; left: 9%; top: 9%; width: 82%; height: 82%; z-index: 1; border-radius: 50%; will-change: transform; }
.roue-rotor > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.roue-cadre { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; overflow: visible; }
.roue-reflet {
  position: absolute; z-index: 2; left: 12%; top: 9%; width: 52%; height: 38%; border-radius: 50%;
  transform: rotate(-28deg);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 60%, transparent);
}
.roue-clapet {
  position: absolute; z-index: 3; left: 50%; top: -6.3%; width: 7%; height: auto; margin-left: -3.5%;
  transform-origin: 50% 12.5%; will-change: transform; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.55));
}
/* Valeurs écrites le long du rayon : blanches à contour sombre, marine sur l'or. */
.roue-valeur, .roue-mention {
  font-family: var(--police-titre); font-weight: 900; fill: #fff;
  stroke: #0a1b3d; stroke-width: 7px; stroke-linejoin: round; paint-order: stroke;
}
.roue-mention { letter-spacing: 0.08em; stroke-width: 5px; }
.sur-or .roue-valeur, .sur-or .roue-mention { fill: #0a1b3d; stroke: #fff6d6; stroke-width: 4px; }

/* Ampoules de la jante : un seul attribut (data-allume) dit lesquelles brillent. */
.ampoule-lumiere { opacity: 0; transition: opacity 80ms linear; }
.roue-ampoules[data-allume="p"] .ampoule-lumiere, .roue-ampoules[data-allume="i"] .ampoule-lumiere { transition-duration: 260ms; }
.roue-ampoules[data-allume="tout"] .ampoule-lumiere,
.roue-ampoules[data-allume="p"] .ap .ampoule-lumiere,
.roue-ampoules[data-allume="i"] .ai .ampoule-lumiere,
.roue-ampoules[data-allume="0"] .a0 .ampoule-lumiere,
.roue-ampoules[data-allume="1"] .a1 .ampoule-lumiere,
.roue-ampoules[data-allume="2"] .a2 .ampoule-lumiere { opacity: 1; }

/* Étoiles du GROS LOT (sur le calque qui tourne). */
.roue-etoile {
  position: absolute; z-index: 1; width: calc(3.6% * var(--t, 1)); aspect-ratio: 1; margin: calc(-1.8% * var(--t, 1)) 0 0 calc(-1.8% * var(--t, 1));
  background: radial-gradient(circle, #ffffff 0 22%, #fff6c9 40%, #fbbf24 75%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  will-change: transform, opacity;
}
.animations .roue-etoile { animation: roue-scintille 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes roue-scintille {
  0%, 100% { transform: scale(0.5) rotate(0deg); opacity: 0.5; }
  50% { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* Arrivée : le segment tiré s'illumine, les autres s'assombrissent. */
.roue-voile, .roue-eclat { opacity: 0; will-change: opacity; }
.roue-voile { fill: #050d22; transition: opacity 450ms ease; }
.roue.arrivee .roue-voile { opacity: 0.45; }
.roue-eclat path { fill: none; stroke-linejoin: round; }
.roue-eclat .eclat-large { stroke: rgba(251, 191, 36, 0.6); stroke-width: 24px; }
.roue-eclat .eclat-fin { stroke: #fff6d6; stroke-width: 7px; }
.roue.arrivee .roue-eclat { opacity: 1; }
.animations .roue.arrivee .roue-eclat { animation: roue-eclat 0.8s ease-in-out infinite alternate; }
@keyframes roue-eclat { from { opacity: 0.4; } to { opacity: 1; } }

/* Gros lot : éclat de pièces d'or qui jaillit du centre. */
.roue-pieces { position: absolute; z-index: 4; left: -5%; top: -5%; width: 110%; height: auto; opacity: 0; transform: scale(0.2); }
.animations .roue.gros-lot .roue-pieces { animation: roue-pieces 1.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes roue-pieces {
  0% { opacity: 0; transform: scale(0.15) rotate(-18deg); }
  16% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35) rotate(10deg); }
}

/* --- Bouton TOURNER : pilule de casino rouge et or, en relief ------------- */
.roue-commandes { display: grid; justify-items: center; margin-top: clamp(22px, 4vw, 34px); }
.bouton-casino {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: min(260px, 80vw); padding: 0.62em 1.9em 0.56em; border: 0; border-radius: var(--rayon-plein); cursor: pointer;
  font-family: var(--police-titre); font-weight: 900; font-size: clamp(1.35rem, 4.8vw, 1.8rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 0 #7f1d1d, 0 0 14px rgba(255, 255, 255, 0.3);
  background: radial-gradient(120% 95% at 50% 12%, #fb7185 0%, #e11d48 46%, #9f1239 100%);
  box-shadow: 0 0 0 4px #fbbf24, 0 0 0 7px #92400e, 0 9px 0 7px #5b1020, 0 20px 30px rgba(0, 0, 0, 0.5),
              inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -7px 14px rgba(80, 0, 20, 0.45);
  transition: translate 110ms ease, box-shadow 110ms ease, filter 200ms ease;
}
.bouton-casino::after {
  content: ""; position: absolute; inset: -12px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 34px 8px rgba(251, 191, 36, 0.6);
}
.bouton-casino:hover { filter: brightness(1.08); }
.bouton-casino:active:not([disabled]) {
  translate: 0 6px;
  box-shadow: 0 0 0 4px #fbbf24, 0 0 0 7px #92400e, 0 3px 0 7px #5b1020, 0 8px 16px rgba(0, 0, 0, 0.5),
              inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -5px 12px rgba(80, 0, 20, 0.5);
}
.bouton-casino:focus-visible { border-radius: var(--rayon-plein); outline-offset: 12px; }
.bouton-casino[disabled] { cursor: progress; filter: saturate(0.7) brightness(0.82); }
.animations .bouton-casino:not([disabled]) { animation: casino-pouls 2.4s ease-in-out infinite; }
.animations .bouton-casino:not([disabled])::after { animation: casino-halo 2.4s ease-in-out infinite; }
@keyframes casino-pouls { 50% { scale: 1.045; } }
@keyframes casino-halo { 50% { opacity: 1; } }
.bouton-casino:active { animation-play-state: paused; }

.roue-infos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 18px; }
.roue-tours { margin: 0; font-weight: 700; color: #e6edff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.roue-tours strong { color: var(--or); }
.roue-tours .lien-bouton { color: var(--or-clair); }

/* --- Fiche du concours tiré -------------------------------------------------- */
.roue-resultat { width: min(100%, 640px); margin: 22px auto 0; text-align: left; scroll-margin: 90px; }
.roue-resultat:empty { display: none; }
.roue-fiche {
  display: grid; gap: 12px; padding: 16px; border-radius: var(--rayon-l); color: #fff;
  background: rgba(8, 21, 48, 0.9);
  border: 1.5px solid rgba(251, 191, 36, 0.55); box-shadow: 0 0 40px rgba(251, 191, 36, 0.2), 0 20px 40px rgba(0, 0, 0, 0.45);
  animation: gagnant-entre 650ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.roue-fiche.gros-lot { border-color: var(--or); box-shadow: 0 0 70px rgba(251, 191, 36, 0.5), 0 20px 40px rgba(0, 0, 0, 0.45); }
.roue-fiche-surtitre {
  margin: 0; font-family: var(--police-titre); font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--taille-s); color: var(--or); text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.roue-fiche-lien { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; color: #fff !important; text-decoration: none !important; }
.roue-fiche-visuel {
  position: relative; width: 92px; height: 92px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.roue-fiche-visuel .objet-3d { width: 82%; height: 82%; object-fit: contain; }
.roue-fiche-visuel img:not(.objet-3d) { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.roue-fiche-texte { display: grid; gap: 4px; min-width: 0; }
.roue-fiche-texte small { color: var(--texte-nuit-doux); font-weight: 800; text-transform: uppercase; font-size: var(--taille-xs); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.roue-fiche-texte strong { font-family: var(--police-titre); font-weight: 900; font-size: 1.2rem; line-height: 1.2; overflow-wrap: anywhere; }
.roue-fiche-lien:hover strong { text-decoration: underline; text-decoration-color: var(--or); }
.roue-fiche-infos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.roue-fiche-infos .pastille-valeur { position: static; font-size: 1rem; box-shadow: none; }
.roue-fiche-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.roue-fiche-boutons .bouton { font-size: var(--taille-s); padding: 0.55em 1em; }
.roue-fiche-boutons .bouton-contour { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.roue-fiche-boutons .bouton-contour:hover { border-color: var(--or); color: var(--or); }
.roue-fiche-boutons .bouton-fantome { color: #fff; }
.roue-fiche-boutons .bouton-fantome:hover { background: rgba(255, 255, 255, 0.1); }
.roue-message {
  padding: 14px 16px; border-radius: var(--rayon-m); color: #fff6d6; font-size: var(--taille-s);
  background: rgba(8, 21, 48, 0.85); border: 1px solid rgba(251, 191, 36, 0.5);
}
.roue-message ul { margin: 6px 0; padding-left: 18px; }
@media (max-width: 480px) {
  .roue-fiche { padding: 14px 12px; }
  .roue-fiche-lien { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .roue-fiche-visuel { width: 72px; height: 72px; }
  .roue-fiche-boutons .bouton { flex: 1 1 calc(50% - 4px); }
  .roue-fiche-boutons .bouton-jackpot { flex-basis: 100%; }
}

/* Téléphone : texte plus serré pour que le jeu et son bouton tiennent dans l'écran. */
@media (max-width: 700px) {
  .scene-roue-intro { font-size: 0.93rem; margin-top: 12px; }
  .choix-jeu { margin-bottom: 12px; }
  .scene-roue-grande { padding-top: calc(68px + 10px); }
}

/* --- Grand écran : le texte à gauche du jeu, la fiche tirée à droite --------------- */
/* La fiche apparaît à côté du jeu : l'arrivée illuminée reste visible avec elle. */
@media (min-width: 1080px) {
  .scene-roue-contenu {
    --jeu: min(560px, max(380px, calc(100svh - 270px)));
    max-width: 1420px; column-gap: clamp(24px, 3vw, 48px); align-items: center;
    grid-template-columns: minmax(0, 1fr) var(--jeu) minmax(0, 1fr);
    grid-template-areas: "choix choix choix" "enseigne enseigne enseigne" "intro roue resultat" "infos commandes resultat";
  }
  /* Machine : elle et son bouton tiennent ensemble dans la hauteur de l'écran. */
  [data-version="machine"] .scene-roue-contenu { --jeu: min(520px, max(340px, calc((100svh - 360px) * 0.896))); }
  .choix-jeu { grid-area: choix; justify-self: center; }
  .roue-infos { grid-area: infos; justify-self: end; justify-content: flex-end; max-width: 300px; margin: clamp(22px, 4vw, 34px) 0 0; text-align: right; }
  .enseigne-roue { grid-area: enseigne; }
  .scene-roue-intro { grid-area: intro; justify-self: end; max-width: 300px; margin: 0; text-align: right; font-size: 1.12rem; }
  .roue-zone, [data-version="machine"] .roue-zone { grid-area: roue; width: var(--jeu); }
  /* Pages #/roue et #/machine : le sélecteur, l'enseigne, le jeu et le bouton tiennent dans l'écran. */
  .scene-roue-grande { padding-top: calc(68px + 12px); }
  .scene-roue-grande .scene-roue-contenu { --jeu: min(720px, max(380px, calc(100svh - 430px))); }
  .scene-roue-grande[data-version="machine"] .scene-roue-contenu { --jeu: min(640px, max(340px, calc((100svh - 400px) * 0.896))); }
  .scene-roue-grande .roue-zone, .scene-roue-grande[data-version="machine"] .roue-zone { width: var(--jeu); }
  .roue-commandes { grid-area: commandes; }
  .roue-resultat { grid-area: resultat; justify-self: start; width: 100%; max-width: 410px; margin: 0; }
  .roue-resultat .roue-fiche-lien { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .roue-resultat .roue-fiche-visuel { width: 76px; height: 76px; }
  .roue-resultat .roue-fiche-boutons .bouton { flex: 1 1 auto; }
}

/* --- Page #/roue : quelques mots sous la scène --------------------------------- */
.roue-regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.roue-regles .bloc { margin: 0; }
.roue-regles h3 { font-size: 1.1rem; }
.roue-regles p { margin: 0; color: var(--encre-douce); }