:root {
  --fond: #14091f;
  --carte: #21123a;
  --carte-2: #2c1a4d;
  --texte: #f6f0ff;
  --discret: #b3a3d1;
  --accent: #e83e8c;
  --accent-2: #ff9a3c;
  --violet: #7b2ff7;
  --grad: linear-gradient(135deg, var(--violet), var(--accent) 55%, var(--accent-2));
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(110px + var(--decal-bas, 0px));
}

header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(20, 9, 31, 0.92);
  backdrop-filter: blur(10px);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "marque actions" "recherche recherche";
  align-items: center;
  gap: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--grad);
  opacity: 0.75;
}
.marque { grid-area: marque; min-width: 0; }
.actions { grid-area: actions; display: flex; align-items: center; gap: 8px; }
.recherche-boite { grid-area: recherche; position: relative; min-width: 0; }
.recherche-boite svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--discret); pointer-events: none; }
@media (min-width: 760px) {
  header {
    grid-template-columns: auto minmax(220px, 560px) auto;
    grid-template-areas: "marque recherche actions";
    justify-content: space-between;
    gap: 16px;
  }
}

.bouton-icone, .bouton-installer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bouton-icone { width: 42px; height: 42px; border-radius: 50%; padding: 0; flex: none; }
.bouton-icone:hover, .bouton-icone[aria-expanded="true"], .bouton-icone[aria-pressed="true"] { background: var(--carte-2); border-color: var(--accent); }
.bouton-icone[hidden], .bouton-installer[hidden] { display: none; }
.bouton-installer {
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px rgba(232, 62, 140, 0.35);
}
@media (max-width: 480px) {
  /* le logo et le nom passent avant : le bouton du pays ne garde que son code */
  .bouton-icone.bouton-pays { width: 42px; min-width: 42px; padding: 0; border-radius: 50%; font-size: 12px; }
  .bouton-pays svg { display: none; }
  .bouton-installer { width: 42px; padding: 0; }
  .bouton-installer span { display: none; }
  .actions { gap: 6px; }
}
@media (max-width: 400px) {
  .bouton-installer { width: 42px; padding: 0; }
  .bouton-installer span { display: none; }
  .actions { gap: 6px; }
  .marque h1 { font-size: 1.3rem; }
}
.bouton-installer:hover { transform: translateY(-1px); }
.bouton-installer:active, .bouton-icone:active { transform: scale(0.96); }

.marque { display: flex; align-items: center; gap: 10px; }
.marque img { width: 40px; height: 40px; border-radius: 10px; }
.marque h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#recherche {
  display: block;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 14px 0 42px;
  border-radius: 999px;
  border: 1px solid var(--carte-2);
  background: var(--carte);
  color: var(--texte);
  font-size: 1rem;
}
#recherche:focus { outline: 2px solid var(--accent); }

/* Écran plein (appli installée, encoches, barres système) : le contenu reste dans la zone sûre. */
header {
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
#lecteur {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
#plein-ecran { flex: none; font-size: 1.1rem; }
#plein-ecran[hidden] { display: none; }
.elia { flex: none; font-weight: 700; border: 1px solid hsl(var(--teinte, 330) 85% 62%); }
.elia[aria-pressed="true"] { border-color: transparent; }
.elia { display: inline-flex; align-items: center; gap: 6px; }
.avatar-elia { border-radius: 50%; object-fit: cover; }
#bouton-suivant[hidden], #bouton-rejouer[hidden] { display: none; }
.lien-elia {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 10px;
  border-radius: 999px;
  border: 1px solid hsl(var(--teinte, 330) 85% 62%);
  color: var(--texte);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}
.lien-elia[hidden] { display: none; }
.lien-elia:hover, .lien-elia:focus-visible { background: var(--carte-2); }
/* Photo d'Elia : cerclage scintillant (anneau de couleurs qui tourne, halo, étincelles). */
#lecteur-logo.vers-elia {
  cursor: pointer;
  border-radius: 50%;
  overflow: visible;
  isolation: isolate;
  background: #14091f !important;
  box-shadow: 0 0 calc(8px + var(--niveau, 0) * 14px) hsl(var(--teinte, 330) 90% 60% / 0.75);
}
#lecteur-logo.vers-elia img { border-radius: 50%; object-fit: cover; }
#lecteur-logo.vers-elia::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(#ffd166, #ef476f, #c77dff, #4cc9f0, #ffd166);
  animation: anneau-tourne 3.2s linear infinite;
}
#lecteur-logo.vers-elia::after {
  content: "✦";
  position: absolute;
  top: -9px;
  right: -7px;
  font-size: 0.95rem;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px #ffd166, 0 0 12px #ef476f;
  animation: etincelle 1.8s ease-in-out infinite;
}
@keyframes anneau-tourne { to { transform: rotate(360deg); } }
@keyframes etincelle {
  0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(45deg); }
}
.avatar-elia {
  padding: 2px;
  box-sizing: content-box;
  background: conic-gradient(#ffd166, #ef476f, #c77dff, #4cc9f0, #ffd166);
  animation: anneau-halo 3.2s linear infinite;
}
@keyframes anneau-halo {
  0%, 100% { box-shadow: 0 0 6px #ffd166; }
  25% { box-shadow: 0 0 9px #ef476f; }
  50% { box-shadow: 0 0 6px #c77dff; }
  75% { box-shadow: 0 0 9px #4cc9f0; }
}
@media (prefers-reduced-motion: reduce) {
  #lecteur-logo.vers-elia::before { animation: none; }
  #lecteur-logo.vers-elia::after { animation: none; opacity: 1; }
  .avatar-elia { animation: none; box-shadow: 0 0 6px #ef476f; }
}
.installer { background: var(--grad); color: #fff; font-weight: 600; flex: none; }
.installer[hidden], .aide-ios[hidden] { display: none; }
.aide-ios {
  margin: 0;
  padding: 12px 16px;
  background: var(--carte-2);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.puce {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
.puce[aria-pressed="true"] { background: var(--grad); font-weight: 600; }

#etat { color: var(--discret); min-height: 1.4em; margin: 6px 0 12px; }

#grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.station {
  position: relative;
  background: var(--carte);
  border-radius: 16px;
  padding: 14px 10px 12px;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  min-width: 0;
}
.station:hover, .station:focus-within { background: var(--carte-2); }
.station.active { border-color: var(--accent); }

.station .jeu {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  border-radius: 14px;
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--violet);
}
.logo { position: relative; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.logo img.ok { opacity: 1; }

.nom {
  font-weight: 600;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail { color: var(--discret); font-size: 0.8rem; margin-top: 2px; }

.coeur {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--discret);
  font-size: 1.3rem;
  cursor: pointer;
}
.coeur[aria-pressed="true"] { color: var(--accent); }

#plus {
  display: block;
  margin: 18px auto;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--carte-2);
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
#plus[hidden] { display: none; }

.mentions {
  max-width: 1100px;
  margin: 28px auto 0;
  padding: 0 16px;
  color: var(--discret);
  font-size: 0.8rem;
}
.mentions a { color: var(--accent-2); }

/* Pages de texte (mentions légales). */
.page-texte { padding-bottom: 24px; }
.page-texte .marque { text-decoration: none; }
.titre-marque {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.retour { text-decoration: none; margin-left: auto; }
.texte { max-width: 760px; margin: 0 auto; padding: 8px 16px 0; line-height: 1.6; }
.texte h1 { font-size: 1.6rem; margin: 18px 0 4px; }
.texte h2 { font-size: 1.15rem; margin: 26px 0 6px; color: var(--accent-2); }
.texte a { color: var(--accent-2); overflow-wrap: anywhere; }
.texte .version { color: var(--discret); font-size: 0.85rem; margin: 0 0 8px; }
.texte ul { padding-left: 20px; }
.texte li { margin-bottom: 8px; }

/* Crédit d'Elia, sous les mentions (26 oct., Géry : « on ne voit pas qu'elle l'a créée »). */
.cree-par { margin: 18px auto 0; padding: 0 16px; text-align: center; }
.cree-par a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  text-align: left;
  line-height: 1.35;
  padding: 6px 16px 6px 8px;
  border-radius: 24px;
  border: 1px solid rgba(232, 62, 140, 0.45);
  background: var(--carte);
  color: var(--texte);
  text-decoration: none;
  font-size: 0.95rem;
}
.cree-par a:hover, .cree-par a:focus-visible { background: var(--carte-2); }
.cree-par img { flex: none; }

/* Pastille e-med-cyber.fr, identique à celle des autres sites (2026-10-20, Géry). */
.propulse {
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 0 16px;
  color: var(--discret);
  font-size: 0.85rem;
  text-align: center;
}
@media (min-width: 900px) {
  .propulse { max-width: 1400px; padding: 0 32px; }
}
.emc-lien{position:relative;display:inline-flex;align-items:center;gap:.4em;min-height:28px;padding:0 .8em;border-radius:999px;border:1px solid rgba(167,139,250,.5);background:linear-gradient(120deg,rgba(236,72,153,.14),rgba(124,58,237,.14),rgba(37,99,235,.14),rgba(236,72,153,.14));background-size:300% 100%;text-decoration:none;color:var(--texte);overflow:hidden;isolation:isolate;animation:emc-degrade 8s linear infinite,emc-lueur 3s ease-in-out infinite}
.emc-lien::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-130%);background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);animation:emc-reflet 3.5s ease-in-out infinite}
.emc-etoile{display:inline-block;animation:emc-scintille 1.6s ease-in-out infinite}
@keyframes emc-degrade{to{background-position:300% 0}}
@keyframes emc-lueur{0%,100%{box-shadow:0 0 0 rgba(167,139,250,0)}50%{box-shadow:0 0 10px rgba(192,132,252,.55)}}
@keyframes emc-reflet{0%,50%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes emc-scintille{0%,100%{opacity:.35;transform:scale(.75) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}
@keyframes emc-clignote{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.emc-lien{animation:emc-lueur 3s ease-in-out infinite}.emc-lien::after{display:none}.emc-etoile{animation:emc-clignote 1.6s ease-in-out infinite}}

#lecteur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--decal-bas, 0px);
  z-index: 10;
  background: var(--carte);
  border-top: 1px solid var(--carte-2);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
}
#visu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  width: 100%;
  height: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
#visu.actif { opacity: 0.9; }

#lecteur-logo, .station.active .logo {
  transform: scale(calc(1 + var(--niveau, 0) * 0.16));
}
.station.active {
  border-color: hsl(var(--teinte, 330) 85% 58%);
  box-shadow: 0 0 calc(4px + var(--niveau, 0) * 26px) hsl(var(--teinte, 330) 85% 58% / calc(0.25 + var(--niveau, 0) * 0.6));
}
#bouton-lecture:not(:disabled) {
  background: linear-gradient(135deg, hsl(var(--teinte, 270) 85% 55%), hsl(calc(var(--teinte, 330) + 60) 85% 58%));
}

@media (prefers-reduced-motion: reduce) {
  #lecteur-logo, .station.active .logo { transform: none; }
  .station.active { box-shadow: none; }
}

#lecteur .logo { margin: 0; width: 52px; height: 52px; flex: none; font-size: 1.3rem; }
#info { flex: 1; min-width: 0; }
#info .nom { -webkit-line-clamp: 1; }
#statut { color: var(--discret); font-size: 0.85rem; overflow-wrap: anywhere; }

#bouton-lecture {
  flex: none;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
#bouton-lecture:disabled { opacity: 0.4; cursor: default; }

.petit {
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 12px;
  background: var(--carte-2);
  color: var(--texte);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
#bouton-son { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#menu-son {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 8px);
  width: min(300px, calc(100vw - 24px));
  max-height: min(60vh, 440px);
  overflow-y: auto;
  background: var(--carte);
  border: 1px solid var(--carte-2);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  z-index: 20;
}
#menu-son[hidden] { display: none; }
#menu-son button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#menu-son button span { color: var(--discret); font-size: 0.8rem; }
#menu-son button:hover, #menu-son button:focus-visible { background: var(--carte-2); }
#menu-son button[aria-checked="true"] { background: var(--grad); color: #fff; }
#menu-son button[aria-checked="true"] span { color: rgba(255, 255, 255, 0.85); }
.petit[aria-pressed="true"] { background: var(--grad); color: #fff; }
#bouton-son.indispo { opacity: 0.45; }

.saut { display: none; }
#volume { flex: 0 1 110px; min-width: 60px; accent-color: var(--accent); }

/* Grands écrans : contenu plus large, cartes et lecteur plus grands. */
@media (min-width: 900px) {
  main, .mentions { max-width: 1400px; }
  #grille { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
  .logo { width: 84px; height: 84px; }
  header { padding: 14px 32px; }
  main, .mentions { padding-left: 32px; padding-right: 32px; }
  #visu { height: 72px; }
}
@media (min-width: 1600px) {
  body { font-size: 18px; }
  main, .mentions { max-width: 1800px; }
  #grille { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .logo { width: 96px; height: 96px; }
}

/* Écran bas (téléphone en paysage) : l'en-tête ne reste pas collé. */
@media (max-height: 500px) {
  header { position: static; }
  body { padding-bottom: calc(90px + var(--decal-bas, 0px)); }
  #visu { height: 36px; }
}

@media (max-width: 480px) {
  #volume { display: none; }
  /* Petit écran : le nom de la radio sur une ligne, les boutons sur la suivante. */
  body { padding-bottom: calc(150px + var(--decal-bas, 0px)); }
  #lecteur { gap: 8px; padding-left: 10px; padding-right: 10px; flex-wrap: wrap; justify-content: space-between; }
  #info { flex: 1 1 0; }
  .saut { display: block; flex-basis: 100%; height: 0; }
  #bouton-son { max-width: none; }
  #bouton-lecture { margin-left: auto; }
  .petit { min-width: 38px; height: 40px; padding: 0 6px; }
  #bouton-lecture { width: 50px; height: 50px; }
  #lecteur .logo { width: 44px; height: 44px; }
}

button:focus-visible, .puce:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* Partager ONDE6 */
#menu-partage {
  position: absolute;
  top: 100%;
  right: max(16px, env(safe-area-inset-right));
  z-index: 20;
  width: min(260px, calc(100vw - 32px));
  background: var(--carte);
  border: 1px solid var(--carte-2);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#menu-partage[hidden] { display: none; }
#menu-partage a, #menu-partage button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
#menu-partage a:hover, #menu-partage button:hover, #menu-partage a:focus-visible, #menu-partage button:focus-visible { background: var(--carte-2); }

/* Pays et langue */
.bouton-icone.bouton-pays { width: auto; min-width: 42px; padding: 0 12px; border-radius: 21px; gap: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
#menu-pays {
  position: absolute;
  top: 100%;
  right: max(16px, env(safe-area-inset-right));
  z-index: 20;
  width: min(340px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--carte);
  border: 1px solid var(--carte-2);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#menu-pays[hidden] { display: none; }
#recherche-pays {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--carte-2);
  background: var(--fond, #14091f);
  color: var(--texte);
  font: inherit;
}
#liste-pays { overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
#liste-pays .titre-liste { padding: 8px 12px 4px; font-size: 12px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.05em; }
#liste-pays p { padding: 8px 12px; margin: 0; opacity: 0.75; }
#liste-pays button, .langues button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  cursor: pointer;
}
#liste-pays button small { opacity: 0.6; font-size: 12px; white-space: nowrap; }
#liste-pays button:hover, .langues button:hover, #liste-pays button:focus-visible, .langues button:focus-visible { background: var(--carte-2); }
#liste-pays button.actif, .langues button.actif { background: var(--carte-2); outline: 1px solid var(--accent); }
.langues { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--carte-2); padding-top: 8px; }
.langues button { width: auto; padding: 6px 12px; border: 1px solid var(--carte-2); border-radius: 18px; font-size: 13px; }