/* LE SOCLE COMMUN DU SITE : couleurs, en-tête, modale de compte.

   Tout ce qui doit être identique d'une page à l'autre vit ici, et nulle part
   ailleurs. Le balisage de l'en-tête est dans _entete.html, son comportement
   dans compte.js. Les pages qui chargent cette feuille (le catalogue, la
   radio) ne redéfinissent aucune de ces règles : si l'une d'elles a besoin
   d'autre chose, c'est une variante déclarée ici, pas une copie chez elle. */

/* l'attribut hidden l'emporte sur le display d'une règle : sans cela, un
   élément masqué tant qu'il n'a rien à dire (l'onglet des sorties en salle,
   tant que la table est vide) s'afficherait quand même */
[hidden] { display: none !important; }

/* --------------------------------------------------------------- couleurs */
:root {
  --bg: #ffffff;
  --card: #f5f5f5;
  --card-hover: #ededed;
  --line: rgba(0,0,0,.07);
  --ink: #111114;
  --muted: #8a8a91;
  --accent: #111114;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.05);
}
/* Trois préférences possibles, posées par theme.js dans localStorage sous
   `suki_theme` et reflétées dans l'attribut data-theme de <html> :
     absent (défaut « Système ») → suit prefers-color-scheme, comme avant
     "light" / "dark" → choix figé de l'utilisateur, quel que soit l'OS
   Les deux blocs ci-dessous doivent rester à la même spécificité que
   `body.sur-media` (élément + attribut/classe) et passer avant lui dans la
   feuille : sur une surface média (scène, lecteur), c'est toujours ce bloc-là
   qui doit gagner, quel que soit le thème choisi. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0d0d0f; --card: #17171a; --card-hover: #202024; --line: rgba(255,255,255,.08);
    --ink: #f2f2f5; --muted: #86868f; --accent: #f2f2f5;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
  }
}
html[data-theme="dark"] {
  --bg: #0d0d0f; --card: #17171a; --card-hover: #202024; --line: rgba(255,255,255,.08);
  --ink: #f2f2f5; --muted: #86868f; --accent: #f2f2f5;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* Une page posée sur un visuel plein écran, la radio et sa pochette floutée,
   garde le jeu sombre à toute heure. Un en-tête clair au-dessus d'une image
   sombre ne serait pas le même en-tête, ce serait un bandeau rapporté. C'est
   la même règle que dans l'application de streaming : une surface média reste
   sombre quelle que soit l'heure. */
body.sur-media {
  --bg: #0d0d0f; --card: #17171a; --card-hover: #202024; --line: rgba(255,255,255,.12);
  --ink: #f2f2f5; --muted: rgba(255,255,255,.55); --accent: #f2f2f5;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* ------------------------------------------------------------ barre du haut */
header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: none;
}
header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  left: calc(50% - (100vw - var(--barre-defilement, 0px)) / 2);
  width: calc(100vw - var(--barre-defilement, 0px));
  background: var(--bg);
}
/* La barre tient dans la même colonne que le reste du site. Sur le catalogue
   c'est le corps de page qui la pose déjà, cette largeur ne change donc rien ;
   sur une page pleine largeur, c'est elle qui aligne l'en-tête sur le site. */
.hbarre {
  max-width: 1350px; margin: 0 auto; height: 78px;
  display: flex; align-items: center; gap: 22px;
}
body.sur-media .hbarre { padding: 0 22px; }
/* le fond de l'en-tête est le visuel de la page : le poser en aplat le
   découperait du reste */
body.sur-media header { z-index: 2; }
body.sur-media header::before { display: none; }

/* logotype Suki, repris de l'app de streaming (static/index.html) : mêmes
   tracés, mêmes ids, même écartement des lettres au survol. Les lettres sont
   en currentColor, l'app est sur fond sombre et le site est clair. */
.brand { display: flex; align-items: center; flex-shrink: 0; overflow: visible; cursor: pointer; }
.brand-svg { height: 27px; width: auto; display: block; }
.brand-svg path { transition: transform .5s cubic-bezier(.34, 1.26, .64, 1); }
/* le nouveau logo tient dans un viewBox bien plus petit (84 unités de large
   contre 887 avant) : les écarts au survol sont réduits dans la même
   proportion, sinon les lettres se seraient envolées bien trop loin */
.brand:hover #sl-s { transform: translateX(-2.7px); }
.brand:hover #sl-u { transform: translateX(-.9px); }
.brand:hover #sl-k { transform: translateX(.9px); }
.brand:hover #sl-i { transform: translateX(2.7px); }
.brand:hover #sl-accent { transform: translateX(5px); }

header nav { display: flex; gap: 18px; align-items: center; margin: 0 auto; }
header nav a {
  position: relative; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--muted); padding: 4px 0; text-decoration: none;
  white-space: nowrap;
}
header nav a:hover { color: var(--ink); }
header nav a.on { color: var(--ink); }
header nav a.on::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 3px; height: 3px; border-radius: 50%;
  /* même dégradé que le repère du logo, plutôt qu'un point neutre */
  background: linear-gradient(135deg, #A96BFF, #6FECFF, #FFD16F);
  transform: translateX(-50%);
}
/* les deux blocs latéraux ont la même base (0) et grandissent pareil : la barre
   de recherche est donc centrée sur l'en-tête quoi qu'il y ait à gauche ou à
   droite (« Se connecter » ou un pseudo, court ou long) */
/* pas de min-width: 0 ici : les côtés ne descendent pas sous leur contenu,
   c'est la barre qui rétrécit quand la fenêtre devient étroite */
.hleft, .side { flex: 1 1 0; display: flex; align-items: center; }
.hleft { gap: 22px; }
.side { justify-content: flex-end; gap: 12px; color: var(--muted); font-size: 13px; }

/* La recherche tient dans une icône, sur bureau comme au doigt : l'entrée
   de menu en toutes lettres a laissé sa place aux Actualités. */
#loupe {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 999px; background: none; color: var(--muted);
  cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease;
}
#loupe:hover, #loupe.on { color: var(--ink); background: var(--card); }
#loupe svg { width: 19px; height: 19px; }
.pilule {
  border: 0; background: var(--ink); color: var(--bg); font: inherit; font-size: 13px;
  font-weight: 600; border-radius: 999px; padding: 9px 20px; cursor: pointer;
  white-space: nowrap;
}
.pilule:hover { opacity: .85; }
/* une fois connecté, il n'y a plus rien à rejoindre */
body.connecte #rejoindre { display: none; }
/* Avant que verifierSession() ait répondu, on ne sait pas encore si le
   visiteur est connecté : le HTML statique dit "Se connecter" par défaut,
   ce qui clignote faux pour un membre déjà connecté (cookie reconnu
   quelques dizaines de ms plus tard). Un blanc bref est moins perturbant
   qu'un mauvais état affiché. Sans effet SEO : ces boutons ne portent
   aucune donnée indexable, contrairement au SSR de #app. */
#auth, #rejoindre { visibility: hidden; }
body.auth-pret #auth, body.auth-pret #rejoindre { visibility: visible; }

/* ------------------------------------------------- boutons et liens communs */
.btn {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  font: inherit; color: inherit; padding: 8px 16px; cursor: pointer;
}
.btn:hover { background: var(--card-hover); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { opacity: .88; }
.link {
  color: var(--ink); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line);
}
.who-btn {
  border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
  padding: 0; white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
/* le pseudo est tronqué : sans borne, un pseudo long élargit le bloc de droite
   et décale la barre de recherche du centre */
.who-btn .who-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.pp {
  /* un cercle a l'air plus petit qu'un logo de même hauteur, à hauteur
     réellement égale (moins d'encre dans les coins) : quelques px de plus
     pour paraître aligné, pas pour l'être au pixel près */
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid transparent;
  /* contour en dégradé (même palette que le logo) : le calque du dessus
     (uni, couleur de fond) couvre tout sauf l'anneau du bord, où le calque
     du dessous — le dégradé — reste seul visible */
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, #A96BFF, #6FECFF, #FFD16F) border-box;
}
.pp-vide { display: grid; place-items: center; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------ modale compte */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(0,0,0,.42); padding: 20px; }
.modal .box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; width: 100%; max-width: 350px; display: grid; gap: 11px;
  color: var(--ink);
}
.modal h3 { margin: 0; font-weight: 600; }
.modal p { margin: 0; color: var(--muted); font-size: 13px; }
.modal input {
  width: 100%; border: 1px solid var(--line); background: var(--bg); color: inherit;
  border-radius: 11px; padding: 10px 12px; font: inherit; outline: none;
}
.modal input:focus { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.modal .err { color: #d94a4a; font-size: 13px; }
.modal .box.large { max-width: 640px; max-height: 82vh; overflow-y: auto; }
/* le bouton Google se rend lui-même (iframe Google) : juste le centrer et
   masquer la place s'il n'a jamais réussi à se rendre (script ou Client ID
   absent, le formulaire pseudo/mot de passe reste utilisable dans ce cas) */
.modal .box .google-btn { display: flex; justify-content: center; }
.modal .box .google-btn:empty { display: none; }
.modal .box .separateur-ou {
  display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px;
}
.modal .box .separateur-ou::before, .modal .box .separateur-ou::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.modal .box .google-btn:empty + .separateur-ou { display: none; }

/* inscription et connexion (openAuth, compte.js). Une carte sur le fond de
   page plutôt que sur le gris des cartes, un peu plus large, champs à
   libellé, action pleine largeur : la mise en page qu'on attend d'un écran
   de connexion, pour qu'il inspire confiance au premier coup d'œil. */
.modal:has(.auth-box) {
  /* au-dessus de la barre d'onglets du téléphone (z-index 900) */
  z-index: 950;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal .box.auth-box {
  position: relative; max-width: 460px; gap: 16px; padding: 48px 48px 40px;
  background: var(--bg);
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.auth-fermer {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
}
.auth-fermer:hover { background: var(--card); color: var(--ink); }
.auth-fermer svg { width: 18px; height: 18px; }
.auth-tete { display: grid; justify-items: center; gap: 8px; text-align: center; margin-bottom: 12px; }
.auth-logo { color: var(--ink); line-height: 0; }
.auth-logo svg { height: 26px; width: auto; }
.modal .auth-box h3 { font-size: 22px; letter-spacing: -.01em; margin-top: 10px; }
.modal .auth-tete p { font-size: 14px; line-height: 1.45; max-width: 300px; }
.auth-box .champ { display: grid; gap: 6px; }
.auth-box .champ > span:first-child { font-size: 13px; font-weight: 500; }
.auth-box .champ small { font-size: 12px; color: var(--muted); }
.modal .auth-box input {
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 10px; padding: 11px 13px; font-size: 15px;
}
.modal .auth-box input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent);
}
.auth-box .mdp { position: relative; display: block; }
.modal .auth-box .mdp input { padding-right: 44px; }
.auth-box .voir {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.auth-box .voir:hover, .auth-box .voir[aria-pressed="true"] { color: var(--ink); }
.auth-box .voir svg { width: 18px; height: 18px; }
.modal .auth-box .err {
  padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, #d94a4a 10%, transparent);
}
.auth-box .auth-go {
  width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600;
  border-radius: 10px; margin-top: 4px;
}
.auth-box .auth-go:disabled { opacity: .55; cursor: progress; }
.modal .auth-box .auth-bascule { text-align: center; font-size: 14px; }
.auth-box .auth-bascule .link {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  text-decoration: none;
}
.auth-box .auth-bascule .link:hover { text-decoration: underline; }
.modal .auth-box .auth-legal {
  text-align: center; font-size: 12px; line-height: 1.5;
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px;
}
.auth-box .auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 480px) {
  .modal:has(.auth-box) { padding: 14px; }
  .modal .box.auth-box { padding: 40px 26px 30px; }
}

/* le choix du portrait, dernière étape de l'inscription. L'onglet « Portrait »
   du profil affiche exactement la même grille. */
.serie-titre {
  font-size: 13px; color: var(--muted); margin: 16px 0 8px;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.portraits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.portrait {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 2px solid transparent; transition: border-color .14s ease, transform .14s ease;
}
.portrait:hover img { transform: scale(1.06); }
.portrait.on img { border-color: var(--ink); }
.portrait span {
  font-size: 11px; color: var(--muted); text-align: center; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.portrait.on span { color: var(--ink); }

/* --------------------------------------------------------------- téléphone */
@media (max-width: 700px) {
  /* l'en-tête se réduit à la marque et au compte : la navigation descend en
     bas de l'écran, là où le pouce arrive */
  header nav { display: none; }
  .hbarre { height: auto; padding: 10px 0; gap: 10px; }
  body.sur-media .hbarre { padding: 10px 14px; }
  .hleft { flex: 0 0 auto; }
  .side { flex: 1 1 auto; gap: 8px; }
  #auth { font-size: 13px; white-space: nowrap; }
  #loupe {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none;
    border: 0; border-radius: 999px; background: var(--card); color: var(--ink);
    cursor: pointer;
  }
  #loupe svg { width: 18px; height: 18px; }

  .onglets-bas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .onglets-bas a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 0; background: none; font: inherit; font-size: 11px; cursor: pointer;
    color: var(--muted); padding: 6px 0; text-decoration: none;
  }
  .onglets-bas a svg { width: 22px; height: 22px; }
  .onglets-bas a.on { color: var(--ink); }
}
/* hors téléphone, la barre du bas n'a pas lieu d'être */
@media (min-width: 701px) { .onglets-bas { display: none; } }