/* ============================================================
   Menu Wii — feuille de style

   Les couleurs, la typo et les rayons viennent de kit/kit.css, charge
   avant celle-ci. On ne garde ici que ce qui est propre au menu : la
   grille de chaînes, le curseur Wiimote, l'écran de présentation.
   ============================================================ */

:root{
  /* Métriques propres au menu. Les jetons partagés (--k-*) sont
     définis par le kit, ne pas les redéfinir ici. */
  --dock-h: clamp(132px, 19dvh, 176px);
  --gap:    clamp(8px, 1.1vw, 17px);
  --label:  clamp(15px, 1.9vh, 21px);

  /* Les deux flèches de pagination et leurs gouttières encadrent la
     grille : cette place doit être retirée avant de dimensionner les
     tuiles, sinon les flèches sortent de l'écran. */
  --pager:      clamp(26px, 3.4vw, 44px);
  --pager-gap:  clamp(4px, 1.4vw, 22px);
  --pager-room: calc(2 * (var(--pager) + var(--pager-gap)));

  /* Largeur d'une chaîne : la plus petite contrainte entre
     la place horizontale et la place verticale disponibles. */
  --grid-w:  min(1060px, 88vw);
  /* 70px = padding du stage + hauteur des pastilles de page */
  --stage-h: calc(100dvh - var(--dock-h) - 70px);
  --tile: min(
    calc((var(--grid-w) - 3 * var(--gap)) / 4),
    calc((var(--stage-h) - 2 * var(--gap) - 3 * var(--label)) / 3 * 4 / 3)
  );
}

.noscript-note{
  max-width: 40ch;
  margin: 0 auto 18px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--k-ink);
}

/* Le menu tient dans un écran : rien ne défile jamais. Le reste des
   règles de base vient du kit. */
body{ overflow: hidden; }

/* Curseur Wiimote actif : on masque le pointeur système */
body.pointer-wii,
body.pointer-wii *{ cursor: none !important; }

/* Volontairement PAS .k-screen : celui du kit est prévu pour une page
   qui défile (min-height, fond fixe, trame en position fixed), ce qui
   déforme un menu qui doit tenir dans exactement un écran. Seules les
   couleurs sont partagées. */
.screen{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--k-bg-top) 0%, var(--k-bg-mid) 55%, var(--k-bg-bot) 100%);
}

/* Fine trame horizontale caractéristique du menu */
.screen::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.55) 0px,
    rgba(255,255,255,.55) 1px,
    rgba(150,170,180,.05) 1px,
    rgba(150,170,180,.05) 3px
  );
  opacity: .7;
}

/* ============================================================
   Zone haute : grille des chaînes
   ============================================================ */

.stage{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0 6px;
}

.stage-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pager-gap);
  width: 100%;
}

.grid-wrap{
  flex: 0 1 auto;
  min-width: 0;
}

.grid{
  display: grid;
  grid-template-columns: repeat(4, var(--tile));
  gap: var(--gap);
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity .16s ease, transform .16s ease;
}

.grid.is-turning{ opacity: 0; }
.grid.turn-left{  transform: translateX(-26px); }
.grid.turn-right{ transform: translateX(26px); }

.cell{ min-width: 0; }

/* ---- Une chaîne ---- */

.chan{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.chan-face{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--k-radius);
  background: var(--k-frame);
  padding: clamp(3px, .45vw, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 0 0 1px var(--k-frame-edge),
    0 2px 5px rgba(80,105,120,.16);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2),
              box-shadow .16s ease;
}

.chan-art{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--k-radius) - 5px);
  background-color: var(--c, #8fa3ad); /* repli si color-mix() absent */
  background-image: linear-gradient(155deg,
      color-mix(in srgb, var(--c, #8fa3ad) 78%, white 22%) 0%,
      var(--c, #8fa3ad) 55%,
      color-mix(in srgb, var(--c, #8fa3ad) 74%, black 26%) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

.chan-art img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chan-art.no-image img{ display: none; }

/* Reflet vitré par-dessus la vignette */
.chan-art::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.42) 0%,
    rgba(255,255,255,.10) 42%,
    rgba(255,255,255,0)   58%,
    rgba(0,0,0,.10)      100%);
}

.chan-fallback{
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25em;
  padding: 8%;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.chan-art.no-image .chan-fallback{ display: flex; }

.chan-fallback b{
  font-size: clamp(12px, calc(var(--tile) * .125), 26px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .01em;
}

.chan-fallback i{
  font-style: normal;
  font-size: clamp(9px, calc(var(--tile) * .072), 15px);
  opacity: .85;
}

.chan-label{
  display: block;
  height: var(--label);
  line-height: var(--label);
  padding: 0 2px;
  font-size: clamp(10px, calc(var(--tile) * .085), 15px);
  color: var(--k-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Survol / focus */
.chan:hover  .chan-face,
.chan:focus-visible .chan-face{
  transform: translateY(-3px) scale(1.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px var(--k-blue-soft),
    0 0 0 4px rgba(35,182,238,.22),
    0 8px 18px rgba(40,110,145,.24);
}

.chan:focus{ outline: none; }

.chan:focus-visible .chan-face{
  outline: 2px solid var(--k-blue);
  outline-offset: 4px;
}

.chan:active .chan-face{
  transform: translateY(-1px) scale(.99);
}

/* ---- Emplacement vide ---- */

.cell--empty .chan-face{
  background: linear-gradient(180deg, #eaeff2, #dde5e9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px #cdd6dc,
    0 1px 3px rgba(90,115,130,.10);
}

.slot-face{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--k-radius) - 5px);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 1px, rgba(0,0,0,0) 1px 5px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.75) 0 1px, rgba(0,0,0,0) 1px 5px),
    linear-gradient(180deg, #e3eaee, #d6dfe4);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-face .wii-mark{
  font-weight: 700;
  font-size: clamp(11px, calc(var(--tile) * .17), 30px);
  letter-spacing: .02em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 0 rgba(150,168,178,.55);
}

/* La place reste réservée pour que toutes les cases gardent la même
   hauteur, qu'elles aient une bannière ou non. */
.chan.has-banner .chan-label{ visibility: hidden; }

.cell--empty .chan{ pointer-events: none; }
.cell--empty .chan-label{ visibility: hidden; }

/* ---- Flèches de pagination ---- */

.pager{
  flex: 0 0 auto;
  width: var(--pager);
  height: clamp(72px, 13vh, 132px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--k-blue);
  background: linear-gradient(180deg, #ffffff, #e8f3f8);
  box-shadow:
    0 0 0 1px #c9d8e0,
    inset 0 1px 0 #fff,
    0 2px 6px rgba(70,105,125,.16);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.pager svg{ width: 45%; height: auto; }

.pager:hover:not(:disabled){
  transform: scale(1.07);
  box-shadow:
    0 0 0 1px var(--k-blue-soft),
    0 0 0 4px rgba(35,182,238,.18),
    0 4px 10px rgba(40,110,145,.2);
}

.pager:active:not(:disabled){ transform: scale(.97); }

.pager:disabled{
  opacity: 0;
  pointer-events: none;
}

.pager[hidden]{ display: none; }

/* ---- Pastilles de page ---- */

.dots{
  display: flex;
  gap: 7px;
  height: 18px;
  align-items: center;
  margin-top: 10px;
}

.dots span{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c6d2d9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: background .18s ease, transform .18s ease;
}

.dots span.on{
  background: var(--k-blue);
  transform: scale(1.25);
}

/* ============================================================
   Barre basse
   ============================================================ */

.dock{
  position: relative;
  z-index: 2;
  flex: 0 0 var(--dock-h);
  height: var(--dock-h);
}

/* L'arc bleu : un très large bloc au rayon elliptique énorme */
.dock-curve{
  position: absolute;
  left: -14%;
  right: -14%;
  top: 0;
  bottom: -40px;
  border-radius: 50% 50% 0 0 / clamp(34px, 6vh, 62px) clamp(34px, 6vh, 62px) 0 0;
  background: linear-gradient(180deg, #f2fbfe 0%, var(--k-blue-pale) 38%, #d3ecf8 100%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.9),
    0 -1px 14px rgba(30,140,185,.10);
  border-top: 2px solid var(--k-blue-soft);
}

.dock-content{
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(14px, 3.5vw, 60px);
}

/* Horloge */

/* Tous les éléments de la barre partagent la ligne 1. Sans `grid-row`
   explicite, l'auto-placement renvoie les suivants sur une 2e ligne. */
.clock{
  grid-column: 2;
  grid-row: 1;
  text-align: center;
  line-height: 1;
  padding-bottom: 4px;
}

.clock-time{
  font-size: clamp(30px, 5.6vh, 54px);
  font-weight: 400;
  letter-spacing: .02em;
  color: #5f6f78;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.clock-time .ampm{
  font-size: .42em;
  margin-left: .25em;
  color: var(--k-ink-soft);
}

.clock-date{
  margin-top: clamp(4px, 1vh, 10px);
  font-size: clamp(13px, 2.2vh, 21px);
  color: #7b8992;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.clock-owner{
  margin-top: clamp(5px, 1.1vh, 11px);
  font-size: clamp(10px, 1.5vh, 14px);
  letter-spacing: .04em;
  white-space: nowrap;
  color: #93a2ab;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

/* Boutons ronds */

.round-btn{
  --size: clamp(52px, 9.2vh, 86px);
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--k-ink);
  background: linear-gradient(180deg, #ffffff 0%, #f0f6f9 52%, #dceaf1 100%);
  box-shadow:
    0 0 0 1px #c4d2da,
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -3px 6px rgba(120,150,165,.16),
    0 3px 8px rgba(50,95,120,.18);
  transition: transform .14s ease, box-shadow .14s ease;
}

.round-btn--left{  grid-column: 1; grid-row: 1; justify-self: start; }
.round-btn--right{ grid-column: 3; grid-row: 1; justify-self: end; }

.round-btn:hover{
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px var(--k-blue-soft),
    0 0 0 5px rgba(35,182,238,.18),
    inset 0 2px 0 rgba(255,255,255,.95),
    0 5px 12px rgba(50,95,120,.22);
}

.round-btn:active{ transform: scale(.96); }

.round-btn:focus{ outline: none; }
.round-btn:focus-visible{ outline: 2px solid var(--k-blue); outline-offset: 4px; }

/* Le Mii remplace le logo « Wii » : portrait détouré, cadré sur la tête
   et rogné par le cercle du bouton, comme une vignette Mii Channel. */
.round-btn--mii{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #eaf5fa 58%, #cfe6f2 100%);
}

.mii{
  position: absolute;
  /* Cadrage : assez large pour que la tête reste lisible à 70px, assez
     descendu pour que la coiffure ne touche pas le bord du cercle. */
  width: 112%;
  height: auto;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  pointer-events: none;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2);
}

/* Le Mii avance d'un cheveu au survol, comme s'il saluait. */
.round-btn--mii:hover .mii{
  transform: translateX(-50%) translateY(-3%) scale(1.05);
}

.round-btn--mii:active .mii{
  transform: translateX(-50%) translateY(0) scale(1.01);
}

.round-btn svg{
  width: 46%;
  height: 46%;
  color: #7c8b94;
}

.ico-sound-off{ display: none; }

.round-btn.is-muted .ico-sound-on{  display: none; }
.round-btn.is-muted .ico-sound-off{ display: block; }
.round-btn.is-muted svg{ color: #a9b6bd; }

/* ============================================================
   Écran de présentation d'une chaîne
   ============================================================ */

.channel-screen{
  position: fixed;
  inset: 0;
  /* Sous le calque de zoom (60) et le flash (70) : partir d'ici doit
     pouvoir recouvrir le panneau. */
  z-index: 50;
}

.channel-screen[hidden]{ display: none; }

.cs-panel{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 80% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--k-bg-top) 0%, var(--k-bg-mid) 55%, var(--k-bg-bot) 100%);
  /* --ox / --oy sont posés en JS sur le centre de la vignette cliquée :
     le panneau grandit depuis la chaîne, comme sur la console. */
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(.16);
  opacity: 0;
  transition: transform .36s cubic-bezier(.2,.85,.3,1), opacity .22s ease;
}

.channel-screen.on .cs-panel{
  transform: scale(1);
  opacity: 1;
}

.cs-content{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 46px);
  /* `safe` : si le contenu dépasse, on retombe sur un alignement en
     haut plutôt que de rendre le début inatteignable au défilement.
     Navigateur trop ancien -> déclaration ignorée, donc `start`. */
  align-content: safe center;
  padding: clamp(20px, 4vh, 54px) clamp(20px, 5vw, 84px);
}

.cs-art{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--k-radius);
  background-color: var(--c, #8fa3ad);
  background-image: linear-gradient(155deg,
      color-mix(in srgb, var(--c, #8fa3ad) 78%, white 22%) 0%,
      var(--c, #8fa3ad) 55%,
      color-mix(in srgb, var(--c, #8fa3ad) 74%, black 26%) 100%);
  box-shadow: 0 0 0 1px var(--k-frame-edge), 0 6px 20px rgba(60,95,115,.20);
}

.cs-art img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-title{
  margin: 0;
  font-size: clamp(23px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  color: #5f6f78;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.cs-subtitle{
  margin: .35em 0 0;
  font-size: clamp(13px, 1.5vw, 19px);
  color: var(--k-ink-soft);
}

.cs-subtitle[hidden],
.cs-tech[hidden],
.cs-shots[hidden]{ display: none; }

.cs-tech{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(13px, 2vh, 22px) 0 0;
  padding: 0;
  list-style: none;
}

.cs-tech li{
  padding: .32em .85em;
  border-radius: 999px;
  font-size: clamp(11px, 1.05vw, 14px);
  color: #40788e;
  background: var(--k-blue-pale);
  box-shadow: inset 0 0 0 1px var(--k-blue-soft);
}

.cs-desc{
  margin-top: clamp(14px, 2.2vh, 24px);
  font-size: clamp(13px, 1.25vw, 17px);
  line-height: 1.62;
  color: #6b7a83;
}

.cs-desc p{ margin: 0 0 .85em; }
.cs-desc p:last-child{ margin-bottom: 0; }

.cs-shots{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22vw, 220px), 1fr));
  gap: 12px;
  margin-top: clamp(16px, 2.4vh, 26px);
}

.cs-shots img{
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--k-frame-edge), 0 3px 10px rgba(60,95,115,.16);
}

/* La barre d'actions reprend la courbe bleue du menu. */
.cs-dock{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  padding: clamp(14px, 2.6vh, 28px) clamp(14px, 3vw, 40px);
  background: linear-gradient(180deg, #f2fbfe 0%, var(--k-blue-pale) 40%, #d3ecf8 100%);
  border-top: 2px solid var(--k-blue-soft);
  border-radius: 50% 50% 0 0 / clamp(20px, 3.5vh, 40px) clamp(20px, 3.5vh, 40px) 0 0;
  box-shadow: 0 -1px 14px rgba(30,140,185,.10);
}

.cs-btn{
  appearance: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  padding: clamp(.55em, 1.3vh, .85em) clamp(1.4em, 3vw, 2.6em);
  transition: transform .14s ease, box-shadow .14s ease;
}

.cs-btn[hidden]{ display: none; }

.cs-btn--go{
  font-size: clamp(15px, 1.7vw, 22px);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,60,90,.35);
  background: linear-gradient(180deg, #5fd0f6 0%, var(--k-blue) 52%, #1793c4 100%);
  box-shadow:
    0 0 0 1px #1b9bcd,
    inset 0 2px 0 rgba(255,255,255,.45),
    0 4px 11px rgba(30,120,160,.32);
}

.cs-btn--back,
.cs-btn--repo{
  font-size: clamp(13px, 1.3vw, 17px);
  color: #6b7a83;
  background: linear-gradient(180deg, #ffffff 0%, #f0f6f9 55%, #dceaf1 100%);
  box-shadow:
    0 0 0 1px #c4d2da,
    inset 0 2px 0 rgba(255,255,255,.95),
    0 3px 8px rgba(50,95,120,.16);
}

.cs-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px var(--k-blue-soft),
    0 0 0 4px rgba(35,182,238,.20),
    0 6px 14px rgba(40,110,145,.24);
}

.cs-btn:active{ transform: translateY(0) scale(.98); }
.cs-btn:focus{ outline: none; }
.cs-btn:focus-visible{ outline: 2px solid var(--k-blue); outline-offset: 3px; }

/* ============================================================
   Transition d'ouverture
   ============================================================ */

.zoom-layer{
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.zoom-layer .flyer{
  position: fixed;
  margin: 0;
  transform-origin: center center;
  will-change: transform, border-radius;
  transition:
    transform .52s cubic-bezier(.55,0,.35,1),
    border-radius .52s ease,
    box-shadow .52s ease;
}

.flash{
  position: fixed;
  inset: 0;
  z-index: 70;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease;
}

.flash.on{ opacity: 1; }

/* ============================================================
   Curseur Wiimote
   ============================================================ */

.wii-pointer{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: clamp(34px, 2.9vw, 46px);
  pointer-events: none;
  will-change: transform;
  /* La main pivote autour du bout de l'index, qui reste collé
     au point visé — comme la vraie Wiimote. */
  transform-origin: 35% 2%;
  transform: translate3d(-999px, -999px, 0);
  filter: drop-shadow(0 3px 5px rgba(40,80,100,.3));
  opacity: 0;
  transition: opacity .18s ease;
}

.wii-pointer.on{ opacity: 1; }

.wii-pointer img{
  display: block;
  width: 100%;
  height: auto;
  /* Pixel art : surtout pas de lissage à l'agrandissement. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ============================================================
   Adaptations
   ============================================================ */

/* app.js réduit le nombre de chaînes par page à ces mêmes seuils, de
   sorte qu'on reste toujours sur trois rangées : la contrainte
   verticale est donc la même qu'en grand écran (2 gouttières,
   3 étiquettes). Changer un seuil ici = le changer dans app.js. */
@media (max-width: 760px){
  :root{
    /* Marge de confort pour que les flèches ne collent pas aux bords. */
    --grid-w: calc(100vw - var(--pager-room) - 16px);
    --tile: min(
      calc((var(--grid-w) - 2 * var(--gap)) / 3),
      calc((var(--stage-h) - 2 * var(--gap) - 3 * var(--label)) / 3 * 4 / 3)
    );
  }
  .grid{ grid-template-columns: repeat(3, var(--tile)); }

  /* Plus la place pour deux colonnes : la bannière passe au-dessus. */
  .cs-content{ grid-template-columns: minmax(0, 1fr); }
  .cs-art{ max-width: 380px; }
}

@media (max-width: 460px){
  :root{
    --tile: min(
      calc((var(--grid-w) - var(--gap)) / 2),
      calc((var(--stage-h) - 2 * var(--gap) - 3 * var(--label)) / 3 * 4 / 3)
    );
  }
  .grid{ grid-template-columns: repeat(2, var(--tile)); }
}

/* Écran tactile : pas de curseur Wiimote */
@media (hover: none){
  .wii-pointer{ display: none; }
  body.pointer-wii,
  body.pointer-wii *{ cursor: auto !important; }
}

/* Le respect de prefers-reduced-motion est assuré par le kit. */