/* ============================================================
   Télé CHANNEL 02 — lecteur rétro argenté.
   Tout est placé sur une grille de 1000 × 900 : 1 unité = 0,1cqw
   (la largeur du lecteur), donc tout grandit et rétrécit ensemble.
   ============================================================ */
.tv {
  --chrome-fond: radial-gradient(circle at 35% 28%, #ffffff 0%, #dfe2e8 45%, #a2a6b0 100%);
  --chrome-bord: #61656e;
  --icone: #39404f;
  --lcd: #23301c;
  position: relative;
  width: min(100%, 860px);
  margin: 8px auto 0;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.tv__coque { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.tv__logo { position: absolute; left: 70cqw; top: 68.2cqw; width: 12.5cqw; height: auto; transform: rotate(-8deg); filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.35)); pointer-events: none; }

.tv button { font: inherit; cursor: var(--doigt); padding: 0; }
.tv svg { display: block; }

/* ---------- Écran ---------- */
.tv__ecran {
  position: absolute; left: 15.5cqw; top: 6.5cqw; width: 69cqw; height: 47cqw;
  border-radius: 5.8cqw; overflow: hidden; background: #050506;
}
.tv__video { position: absolute; left: 0; top: 0; width: 100%; height: 82.55%; overflow: hidden; background: #000; }
.tv__video:fullscreen { background: #000; }
.tv__yt, .tv__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv__yt { pointer-events: none; } /* les clics passent par nos boutons */

.tv__neige { position: absolute; inset: 0; background: #777 url("../img/neige.gif") center / cover; opacity: 0; transition: opacity .15s; pointer-events: none; }
.tv--neige .tv__neige { opacity: 1; }
.tv__lignes {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,.22) 1px 3px);
}
.tv--sans-effet .tv__lignes { display: none; }

.tv__osd {
  position: absolute; left: 3.5cqw; top: 2.4cqw; margin: 0; pointer-events: none;
  font-family: var(--pixel); font-size: max(13px, 3.4cqw); line-height: 1.1; color: #8dff76;
  text-shadow: 0 0 6px rgba(141,255,118,.8), 2px 2px 0 #000; opacity: 0; transition: opacity .4s;
}
.tv__osd.est-visible { opacity: 1; }
.tv__osd small { display: block; font-size: .55em; color: #fff; }

.tv__message {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: .6em; padding: 0 6%; text-align: center; pointer-events: none;
  font-family: var(--pixel); font-size: max(12px, 2.6cqw); color: #fff; text-shadow: 2px 2px 0 #000;
}
.tv__message strong { font-family: var(--titre); font-weight: 400; font-size: 2em; letter-spacing: .02em; color: var(--rose); }
.tv--message .tv__message { display: flex; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), #555 url("../img/neige.gif") center / cover; } /* cache aussi les messages de YouTube */

.tv__allumer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5em;
  background: radial-gradient(ellipse at center, rgba(181,140,240,.25), rgba(0,0,0,.65));
  border: 0; color: #fff; font-family: var(--pixel) !important; font-size: max(14px, 3.2cqw) !important; text-transform: uppercase;
}
.tv__allumer span { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--lilas); color: var(--noir); animation: tv-pulse 1.6s ease-in-out infinite; }
@keyframes tv-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 .4em rgba(181,140,240,.25); } }
.tv--allumee .tv__allumer { display: none; }

/* Extinction façon tube cathodique */
.tv__video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, #000;
}
.tv--eteinte .tv__video::after { opacity: 1; animation: tv-extinction .45s ease-in forwards; }
@keyframes tv-extinction {
  0% { background-size: 100% 60%, auto; }
  60% { background-size: 100% 2px, auto; }
  100% { background-size: 0 2px, auto; }
}
.tv--eteinte .tv__lcd { filter: brightness(.45); }

/* Panneaux (chaînes / vidéos) */
.tv__panneau {
  position: absolute; inset: 0; overflow: auto; padding: 12px; background: #08080c;
  font-family: var(--pixel); font-size: 12px; color: #fff; z-index: 2;
}
.tv__panneau[hidden] { display: none; }
.tv__panneau-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; text-transform: uppercase; }
.tv__fermer { background: none; border: 2px solid #fff; color: #fff; width: 28px; height: 28px; }
.tv__vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tv__vignette { position: relative; border: 2px solid transparent; background: #000; aspect-ratio: 16 / 9; overflow: hidden; }
.tv__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv__vignette span { position: absolute; left: 4px; top: 4px; background: rgba(0,0,0,.75); padding: 1px 5px; font-family: var(--pixel); font-size: 11px; color: #fff; }
.tv__vignette[aria-current="true"] { border-color: var(--rose); }
.tv__chaines { display: grid; gap: 6px; }
.tv__chaine-btn { display: flex; gap: 12px; align-items: center; text-align: left; background: none; border: 2px solid rgba(255,255,255,.3); color: #fff; padding: 10px 12px !important; font-family: var(--pixel) !important; text-transform: uppercase; }
.tv__chaine-btn b { color: #8dff76; font-weight: 400; }
.tv__chaine-btn[aria-current="true"] { border-color: var(--rose); }

/* Afficheur LCD sous l'image */
.tv__lcd {
  position: absolute; left: 3%; right: 3%; top: 84.4%; height: 11.9%; border-radius: 1.6cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 2.2cqw;
  background: linear-gradient(#d6e2c6, #a5b892); box-shadow: inset 0 .3cqw .6cqw rgba(0,0,0,.35);
  font-family: var(--pixel); font-size: max(10px, 2.2cqw); color: var(--lcd); text-transform: uppercase; white-space: nowrap;
}
.tv__titre { flex: 1; min-width: 0; overflow: hidden; }
.tv__titre > span { display: inline-block; }
.tv__titre.defile > span { padding-left: 100%; animation: tv-defile var(--duree, 12s) linear infinite; }
@keyframes tv-defile { to { transform: translateX(-100%); } }

/* ---------- Barre de lecture et volume ---------- */
.tv input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 100%; margin: 0; background: transparent; cursor: var(--doigt); }
.tv input[type="range"]::-webkit-slider-runnable-track { height: 1.1cqw; min-height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--rose) var(--p, 0%), #3b3e46 var(--p, 0%)); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.tv input[type="range"]::-moz-range-track { height: 1.1cqw; min-height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--rose) var(--p, 0%), #3b3e46 var(--p, 0%)); }
.tv input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 2.6cqw; height: 2.6cqw; min-width: 12px; min-height: 12px; margin-top: calc((max(1.1cqw, 5px) - max(2.6cqw, 12px)) / 2); border-radius: 50%; background: var(--chrome-fond); border: 1px solid var(--chrome-bord); }
.tv input[type="range"]::-moz-range-thumb { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--chrome-fond); border: 1px solid var(--chrome-bord); }

.tv__progres {
  position: absolute; left: 38cqw; top: 56cqw; width: 50cqw; height: 3.4cqw; display: flex; align-items: center;
  padding: 0 1.2cqw; border-radius: 99px; background: linear-gradient(#b9bdc6, #eef0f4); box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}

/* ---------- Boutons chromés ---------- */
.tv__pilule, .tv__rond, .tv__cote, .tv__lecture {
  position: absolute; display: grid; place-items: center; color: var(--icone);
  background: var(--chrome-fond); border: max(1px, .3cqw) solid var(--chrome-bord);
  box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.35), inset 0 -.4cqw .6cqw rgba(0,0,0,.18);
  transition: filter .15s, transform .1s;
}
.tv__pilule svg, .tv__cote svg { width: 46%; height: 46%; fill: currentColor; }
.tv__pilule:active, .tv__rond:active, .tv__cote:active, .tv__lecture:active { transform: scale(.94); }
.tv button:focus-visible, .tv__volume:focus-within, .tv__progres:focus-within { outline: 3px solid var(--rose); outline-offset: 2px; }

.tv__pilule { top: 61cqw; height: 6.4cqw; border-radius: 99px; }
.tv__pilule svg { width: auto; height: 50%; }
.tv__prec { left: 38cqw; width: 11cqw; }
.tv__suiv { left: 50.5cqw; width: 11cqw; }
.tv__volume { left: 63cqw; width: 25cqw; display: flex; gap: 1.4cqw; padding: 0 2cqw; cursor: var(--doigt); }
.tv__volume svg { flex: none; height: 46%; width: auto; }

.tv__cote { width: 6.8cqw; height: 6.8cqw; border-radius: 50%; }
.tv__g1 { left: 2.6cqw; top: 38.6cqw; } .tv__g2 { left: 2.6cqw; top: 47.1cqw; } .tv__g3 { left: 2.6cqw; top: 55.6cqw; }
.tv__d1 { left: 90.6cqw; top: 38.6cqw; } .tv__d2 { left: 90.6cqw; top: 47.1cqw; } .tv__d3 { left: 90.6cqw; top: 55.6cqw; }
.tv__cote[aria-pressed="true"] { color: #6b3fc0; box-shadow: 0 0 1.4cqw rgba(181,140,240,.8), inset 0 -.4cqw .6cqw rgba(0,0,0,.18); }
.tv__d1 { color: #b4141c; }
.tv__d3 .i-barre { display: none; }
.tv__d3[aria-pressed="true"] .i-barre { display: block; }

.tv__lecture {
  left: 12.2cqw; top: 66.2cqw; width: 15.6cqw; height: 15.6cqw; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 35% 28%, #f6f0ff 0%, #b58cf0 45%, #5b3a9e 100%); border-color: #4a2f80;
}
.tv__lecture svg { width: 42%; height: 42%; fill: currentColor; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.tv__lecture .i-pause { display: none; }
.tv--lecture .tv__lecture .i-pause { display: block; }
.tv--lecture .tv__lecture .i-lecture { display: none; }

.tv__rond { width: 6cqw; height: 6cqw; border-radius: 50%; font-family: var(--pixel) !important; font-size: max(8px, 1.5cqw) !important; }
.tv__rond svg { width: 42%; height: 42%; fill: currentColor; }
.tv__chplus { left: 17cqw; top: 59.5cqw; }
.tv__chmoins { left: 17cqw; top: 82.5cqw; }
.tv__stop { left: 28.8cqw; top: 71cqw; }

@media (hover: hover) and (pointer: fine) {
  .tv__pilule:hover, .tv__rond:hover, .tv__cote:hover, .tv__lecture:hover { filter: brightness(1.08) saturate(1.1); }
  .tv__vignette:hover { border-color: #fff; }
  .tv__chaine-btn:hover, .tv__fermer:hover { background: #fff; color: var(--noir); }
  .tv__chaine-btn:hover b { color: var(--noir); }
  .guide__chaine:hover { background: var(--blanc); color: var(--noir); }
  .guide__chaine:hover b { color: var(--noir); }
}

/* ---------- Guide des chaînes ---------- */
.guide { max-width: 860px; margin: 36px auto 0; }
.guide__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.guide__chaine {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; cursor: var(--doigt);
  background: var(--noir-2); color: var(--blanc); border: 2px solid var(--trait); font-family: var(--pixel); font-size: 14px; text-transform: uppercase;
}
.guide__chaine b { font-family: var(--titre); font-weight: 400; font-size: 28px; color: var(--lilas); }
.guide__chaine small { display: block; font-family: var(--texte); text-transform: none; font-size: 13px; color: var(--gris); }
.guide__chaine[aria-current="true"] { border-color: var(--rose); }
.guide__aide { margin-top: 16px; color: var(--gris); font-size: 14px; }
.guide__aide kbd { font-family: var(--mono); border: 1px solid var(--trait); padding: 0 6px; }
@media (hover: none) { .guide__aide { display: none; } }


/* ============================================================
   Salon : le menu des chaînes OU la télé, jamais les deux.
   ============================================================ */
.salon { position: relative; }
.salon[data-vue="menu"] .tv { display: none; }
.salon[data-vue="tv"] .console { display: none; }
.salon[data-vue="tv"] .tv { animation: salon-entree .35s ease-out; }
.salon[data-vue="menu"] .console { animation: salon-entree .3s ease-out; }
@keyframes salon-entree { from { opacity: 0; transform: scale(.96); } }

/* ---------- Menu façon console ---------- */
.console {
  --cyan: #f041e1; /* accent du menu : le rose de l'étoile */
  --tuile-bord: #a3a8b1;
  position: relative; width: min(100%, 960px); margin: 8px auto 0; container-type: inline-size;
  border-radius: 18px; overflow: hidden; color: #4a4f59; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  background: repeating-linear-gradient(to bottom, #f7f8fa 0 3px, #eceef2 3px 4px);
}
.console__ecran { position: relative; padding: 5cqw 7cqw 3cqw; min-height: 52cqw; }
.console__pages { display: flex; transition: transform .45s cubic-bezier(.3,.7,.2,1); }
.console__page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2cqw; }

.tuile {
  position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: var(--doigt);
  border-radius: 2.4cqw; border: .35cqw solid var(--tuile-bord); background: #fff;
  box-shadow: inset 0 0 0 .35cqw #fff, 0 .3cqw .6cqw rgba(0,0,0,.12);
  transition: transform .18s ease, border-color .18s, box-shadow .18s;
  font: inherit; color: inherit; text-align: left;
}
.tuile--vide {
  cursor: var(--main); border-color: #c7cbd2; box-shadow: none;
  background: repeating-linear-gradient(to bottom, #dfe2e6 0 3px, #d3d6dc 3px 4px);
}
.tuile:not(.tuile--vide):focus-visible { outline: none; }
.tuile:not(.tuile--vide):hover, .tuile:not(.tuile--vide):focus-visible {
  transform: scale(1.07); z-index: 1; border-color: var(--cyan);
  box-shadow: inset 0 0 0 .35cqw #fff, 0 0 0 .5cqw rgba(240,65,225,.3), 0 .8cqw 1.6cqw rgba(0,0,0,.2);
}
.tuile__visuel { position: absolute; inset: .35cqw; border-radius: 1.8cqw; overflow: hidden; background: #000 center / cover no-repeat; }
.tuile__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuile__visuel--defile { transition: background-image .6s; }
.tuile__grand {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 6%; text-align: center;
  font-family: var(--titre); text-transform: uppercase; font-size: 4.2cqw; line-height: .95; color: var(--noir);
}
.tuile__badge {
  position: absolute; left: 1cqw; top: 1cqw; padding: .2em .5em; border-radius: 99px; background: rgba(255,255,255,.92);
  font-family: var(--pixel); font-size: max(9px, 1.35cqw); color: #3b3f48; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.tuile__badge--j { left: auto; right: 1cqw; background: var(--rose); color: #fff; }
.tuile__nom {
  position: absolute; left: 50%; bottom: 1cqw; transform: translate(-50%, 30%); opacity: 0; white-space: nowrap;
  padding: .35em .9em; border-radius: 99px; background: #fff; border: 2px solid var(--cyan);
  font-family: var(--texte); font-weight: 600; font-size: max(11px, 1.5cqw); color: #3b3f48;
  transition: opacity .18s, transform .18s; pointer-events: none;
}
.tuile:hover .tuile__nom, .tuile:focus-visible .tuile__nom { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .tuile__nom { opacity: 1; transform: translate(-50%, 0); } }
.tuile__jeux { display: grid; place-items: center; align-content: center; gap: .6cqw; width: 100%; height: 100%; background: linear-gradient(160deg, #2a2140, #120f1a); color: #fff; font-family: var(--pixel); font-size: max(9px, 1.5cqw); text-transform: uppercase; }
.tuile__jeux svg { width: 40%; height: auto; fill: var(--lilas); }

.console__fleche {
  position: absolute; top: 27cqw; width: 4cqw; height: 6cqw; padding: 0; border: 0; cursor: var(--doigt); background: none;
}
.console__fleche::before {
  content: ""; position: absolute; inset: 0; background: var(--cyan);
  clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 2px #8a1c80);
}
.console__fleche--d { right: 1.6cqw; }
.console__fleche--g { left: 1.6cqw; transform: scaleX(-1); }
.console__fleche:hover::before { background: #ff8df6; }

/* Barre du bas */
.console__barre { position: relative; aspect-ratio: 1000 / 220; }
.console__forme { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.console__rond {
  position: absolute; top: 4.6cqw; width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #ffffff, #e4e7ec 55%, #c4c9d1); color: #6b717c;
  border: .3cqw solid #e7b3e2; box-shadow: 0 0 0 .35cqw rgba(240,65,225,.6), 0 .5cqw 1cqw rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
}
.console__rond--g { left: 5cqw; }
.console__rond--d { right: 5cqw; }
.console__rond img { width: 68%; height: auto; }
.console__rond svg { width: 46%; height: 46%; }
.console__rond:hover, .console__rond:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 .5cqw var(--cyan), 0 .5cqw 1cqw rgba(0,0,0,.2); outline: none; }
.console__heure {
  position: absolute; left: 50%; top: 13.2cqw; transform: translateX(-50%); margin: 0; text-align: center; line-height: 1;
  font-family: var(--texte); font-weight: 600; font-size: 4.8cqw; color: #8c919b; letter-spacing: .02em;
}
.console__heure small { display: block; margin-top: .5cqw; font-size: 1.9cqw; font-weight: 600; color: #9aa0aa; letter-spacing: .04em; }

/* Aperçu d'une chaîne (avant d'entrer) */
.apercu {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2cqw; padding: 3.5cqw 5cqw;
  background: repeating-linear-gradient(to bottom, #f7f8fa 0 3px, #eceef2 3px 4px); animation: apercu-zoom .3s ease-out;
}
.apercu[hidden] { display: none; }
@keyframes apercu-zoom { from { opacity: 0; transform: scale(.85); } }
.apercu__visuel { position: relative; flex: 1; min-height: 0; border-radius: 2.4cqw; overflow: hidden; border: .35cqw solid var(--cyan); background: #000; }
.apercu__visuel .tuile__visuel { inset: 0; border-radius: 0; }
.apercu__visuel .tuile__grand { font-size: 9cqw; }
.apercu__visuel .tuile__badge { font-size: max(11px, 2cqw); left: 1.6cqw; top: 1.6cqw; }
.apercu__visuel .tuile__jeux { font-size: max(12px, 2.6cqw); }
.apercu__bas { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; flex-wrap: wrap; }
.apercu__titre { margin: 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: max(22px, 3.6cqw); color: #2f333b; line-height: 1; }
.apercu__texte { margin: .4em 0 0; font-size: max(13px, 1.6cqw); color: #666b75; }
.apercu__boutons { display: flex; gap: 1.6cqw; }
.pilule {
  display: inline-grid; place-items: center; min-width: 17cqw; min-height: 44px; padding: .5em 1.4em; border-radius: 99px; cursor: var(--doigt);
  background: linear-gradient(#ffffff, #e3e6eb); border: .3cqw solid #b4b9c2; color: #3b3f48; text-decoration: none;
  font-family: var(--texte); font-weight: 600; font-size: max(14px, 1.9cqw); box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.12);
  transition: border-color .15s, box-shadow .15s;
}
.pilule:hover, .pilule:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 .4cqw rgba(240,65,225,.3); outline: none; }
.pilule--action { border-color: var(--cyan); }
.pilule[aria-disabled="true"] { opacity: .5; cursor: var(--main); }

/* Téléphone : 2 colonnes, toutes les cases à la suite */
@media (max-width: 640px) {
  .console__ecran { padding: 18px 16px 10px; min-height: 0; }
  .console__pages { flex-direction: column; gap: 12px; transform: none !important; }
  .console__page { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .console__page .tuile--vide:nth-child(n+7) { display: none; }
  .console__fleche { display: none; }
  .tuile { border-radius: 14px; border-width: 2px; }
  .tuile__visuel { inset: 2px; border-radius: 11px; }
  .tuile__grand { font-size: 22px; }
  .tuile__badge { font-size: 10px; left: 6px; top: 6px; }
  .tuile__badge--j { left: auto; right: 6px; }
  .tuile__nom { font-size: 12px; bottom: 6px; }
  .tuile__jeux { font-size: 11px; gap: 4px; }
  .tuile:not(.tuile--vide):hover { transform: none; }
  .apercu { position: fixed; z-index: 120; padding: 24px 16px; overflow: auto; }
  .apercu__visuel { flex: 0 0 auto; aspect-ratio: 4 / 3; border-width: 3px; border-radius: 16px; }
  .apercu__visuel .tuile__grand { font-size: 44px; }
  .apercu__boutons { width: 100%; }
  .apercu__boutons .pilule { flex: 1; }
}


/* Allumage façon tube cathodique : la ligne blanche s'ouvre */
.tv--allumage .tv__video::after { opacity: 1; animation: tv-allumage .6s ease-out forwards; }
@keyframes tv-allumage {
  0% { background-size: 0 2px, auto; opacity: 1; }
  35% { background-size: 100% 2px, auto; opacity: 1; }
  75% { background-size: 100% 100%, auto; opacity: .9; }
  100% { background-size: 100% 100%, auto; opacity: 0; }
}

/* Bouton son du menu, à côté de l'heure */
.console__son {
  position: absolute; right: 21cqw; bottom: 2cqw; width: 5.4cqw; height: 5.4cqw; min-width: 28px; min-height: 28px;
  display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: var(--doigt);
  background: radial-gradient(circle at 38% 30%, #ffffff, #e4e7ec 60%, #c4c9d1); color: #6b717c;
  border: .25cqw solid #e7b3e2; box-shadow: 0 .3cqw .6cqw rgba(0,0,0,.15);
}
.console__son svg { width: 58%; height: 58%; fill: currentColor; }
.console__son .i-barre { display: none; }
.console__son[aria-pressed="true"] .i-ondes { display: none; }
.console__son[aria-pressed="true"] .i-barre { display: block; }
.console__son:hover, .console__son:focus-visible { box-shadow: 0 0 0 .4cqw rgba(240,65,225,.35); outline: none; color: var(--rose); }