/* Pages rendues côté serveur (titre / genre / artiste). Volontairement sobres et légères :
   ce sont des pages d'entrée depuis un moteur de recherche, elles doivent s'afficher
   instantanément et rester lisibles sans JavaScript. */
.seo-page { background: #090d18; color: #e8ecf5; font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; }
.seo-wrap { max-width: 900px; margin: 0 auto; padding: 18px 20px 60px; }
.seo-page a { color: #8ab4ff; text-decoration: none; }
.seo-page a:hover { text-decoration: underline; }

.seo-nav { padding: 10px 0 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.seo-logo { font-weight: 800; letter-spacing: .3px; color: #e8ecf5 !important; font-size: 17px; }

.seo-crumb { font-size: 12.5px; opacity: .62; margin: 18px 0 10px; }
.seo-crumb span { opacity: .85; }
.seo-main h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.18; margin: 0 0 6px; }
.seo-main h2 { font-size: 18px; margin: 34px 0 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.09); }
.seo-sub { margin: 0 0 20px; opacity: .8; }

.seo-facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 9px; padding: 0; margin: 0 0 22px; }
.seo-facts li { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 9px 12px; }
.seo-facts span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.seo-facts b { font-size: 15px; font-variant-numeric: tabular-nums; }

.seo-cta { margin: 4px 0 8px; }
.seo-btn { display: inline-block; background: #25e6d3; color: #071018 !important; font-weight: 700;
  padding: 11px 20px; border-radius: 999px; }
.seo-btn:hover { text-decoration: none; filter: brightness(1.06); }

.seo-list { list-style: none; padding: 0; margin: 0; }
.seo-list li { display: flex; align-items: baseline; gap: 12px; padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06); }
.seo-rt { flex: 1; min-width: 0; }
.seo-rt b { display: block; font-weight: 600; }
.seo-rt span { font-size: 13px; opacity: .62; }
.seo-rm { font-size: 12.5px; opacity: .55; white-space: nowrap; font-variant-numeric: tabular-nums; }

.seo-grid { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.seo-grid a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 11px 14px; color: #e8ecf5 !important; }
.seo-grid a:hover { border-color: #8ab4ff; text-decoration: none; }
.seo-grid span { opacity: .5; font-variant-numeric: tabular-nums; font-size: 13px; }

.seo-foot { margin-top: 54px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px; opacity: .6; }
.seo-langs { margin-top: 6px; }

/* ── Page de contact ──
   Le <select> natif est volontairement conservé : sur mobile il ouvre le sélecteur du système,
   qui reste le composant le plus fiable et le plus accessible pour un choix parmi sept. On ne
   restyle donc que ce qui est stylable sans casser ce comportement. */
.ct-main { max-width: 640px; }
.ct-form { margin-top: 20px; }
.ct-aide { font-size: 13px; opacity: .6; margin: 0 0 14px; }
.ct-f { display: block; margin-bottom: 15px; }
.ct-f > span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  opacity: .6; margin-bottom: 6px; }
.ct-f input, .ct-f select, .ct-f textarea {
  width: 100%; box-sizing: border-box; font: inherit; color: #e8ecf5;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px; padding: 11px 13px; }
.ct-f textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.ct-f select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93ab' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px; }
.ct-f input:focus, .ct-f select:focus, .ct-f textarea:focus {
  outline: none; border-color: #25e6d3; background: rgba(37,230,211,.06); }
/* le menu déroulant natif s'ouvre en clair sur certains systèmes : on force l'encre sombre
   des options, sinon le texte blanc devient illisible sur fond blanc */
.ct-f select option { color: #101828; background: #ffffff; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .ct-row { grid-template-columns: 1fr; gap: 0; } }
.ct-note { font-size: 12.5px; line-height: 1.5; opacity: .55; margin: -6px 0 18px; }
.ct-go { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-flash { border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.ct-ok { background: rgba(37,230,211,.10); border: 1px solid rgba(37,230,211,.42); color: #d8fbf6; }
.ct-ko { background: rgba(255,99,99,.10); border: 1px solid rgba(255,99,99,.42); color: #ffdcdc; }

/* ── Page « nouveau mot de passe » ──
   Un seul champ visible à la fois compte : la page est atteinte depuis un email, souvent sur
   mobile, souvent en urgence. Tout ce qui n'aide pas à taper deux fois un mot de passe dégage. */
.rp-main { max-width: 460px; }
.rp-box { margin-top: 20px; }
/* `display:flex` bat l'attribut `hidden` (qui n'est qu'un display:none de la feuille du
   navigateur) : sans cette règle, « Vérification du lien… » restait affiché AU-DESSUS du
   formulaire une fois le code validé. Vu à l'écran, invisible dans le code. */
.rp-main [hidden] { display: none !important; }
.rp-load { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: var(--muted, #8b93ab); font-size: 14px; }
.rp-spin { width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid rgba(255,255,255,.16); border-top-color: #25e6d3; animation: rpSpin .8s linear infinite; }
@keyframes rpSpin { to { transform: rotate(360deg); } }
.rp-who { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; padding: 11px 13px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; }
.rp-who span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.rp-who b { font-size: 14px; word-break: break-all; }
.rp-pwrap { position: relative; display: block; }
.rp-pwrap input { padding-right: 78px !important; }
.rp-eye { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: 0;
  color: #8ab4ff; font: 600 12px/1 inherit; cursor: pointer; padding: 7px 8px; border-radius: 7px; }
.rp-eye:hover { background: rgba(255,255,255,.07); }
.rp-aide { font-size: 12.5px; line-height: 1.55; opacity: .55; margin: -4px 0 18px; }
.rp-go { border: 0; cursor: pointer; font: inherit; font-weight: 700; width: 100%; }
.rp-go[disabled] { opacity: .6; cursor: default; }
.rp-done { text-align: center; }
.rp-tick { width: 54px; height: 54px; margin: 6px auto 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 26px; color: #04121a; background: linear-gradient(135deg, #25e6d3, #8b5cff); }
.rp-done h2 { font-size: 20px; margin: 0 0 8px; border: 0; padding: 0; }
.rp-done p { color: var(--muted, #8b93ab); margin: 0 0 20px; }