/* =========================================================================
   Maël Fabre Radio
   =========================================================================
   Direction artistique tirée du logo : grotesque gras condensé italique,
   tranché par une bande de glitch horizontale à bords en dents de scie.

   Trois principes qui en découlent :
     - ANGLES FRANCS. Rayon 0 partout, 2 px au maximum sur les champs de
       saisie. Aucun cercle sauf les pastilles de statut.
     - GLITCH. Décalage chromatique cyan/magenta, tranches horizontales
       déplacées, balayage de lignes. Employé sur les accents, jamais en fond
       permanent : c'est une signature, pas une texture.
     - CONTRASTE. Noir profond, blanc cassé, une seule couleur de signal.

   La typographie serif de la maquette a été abandonnée : elle contredisait
   frontalement le logo. Archivo est conservé mais exploité sur ses axes de
   graisse et de chasse (900 / condensé / italique) pour retrouver le dessin
   du wordmark.

   Les animations sont pilotées par framer-motion (assets/js/motion.js).
   ========================================================================= */

/* ---- Jetons ------------------------------------------------------------ */

:root {
  --bg:    #0a0a0b;
  --bg2:   #131315;
  --card:  #131315;
  --brd:   rgba(244, 242, 236, 0.14);
  --brd2:  rgba(244, 242, 236, 0.30);
  --fg:    #f4f2ec;
  --mut:   rgba(244, 242, 236, 0.56);
  --mut2:  rgba(244, 242, 236, 0.32);

  /* Signal unique, repris du rouge « direct » de la maquette. */
  --sig:   #ff3b30;
  --sig2:  #ff7a72;

  /* Couleurs de décalage chromatique du glitch. */
  --gl-c:  #22d3ee;
  --gl-m:  #f0f;

  --ok:    #5a7355;

  /* Angles francs : le rayon n'est plus un jeton de style, c'est une exception. */
  --r:     0px;
  --r-in:  2px;

  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  --shell-max: 1440px;
  --rail: 244px;
  --player-h: 74px;

  /* Barre d'onglets : hauteur du rang lui-même, sans la réserve système. Elle
     reste au-dessus des 44px de la règle du pouce. */
  --tabbar-h: 52px;

  /* -- Zones sûres -------------------------------------------------------- *
     Dynamic Island, encoches, barre de geste : en application installée la page
     occupe la dalle entière, bords compris, et c'est à nous de dégager ce qui
     est recouvert. Les valeurs sont rangées dans des variables pour être
     réutilisées telles quelles partout — un `env()` semé au cas par cas finit
     toujours par manquer quelque part.

     La valeur nulle est posée d'abord : là où `env()` n'existe pas, la
     déclaration entière serait invalide et tout calcul qui s'en sert partirait
     avec elle, emportant la marge qu'il était censé produire. */
  --sa-t: 0px;
  --sa-b: 0px;
  --sa-l: 0px;
  --sa-r: 0px;

  /* Réserve du bas pour les barres, et hauteur totale de la barre d'onglets.
     Voir le bloc @supports juste dessous, où les deux prennent leur vraie
     valeur : ici, le repli sûr. */
  --sa-b-nav: 0px;
  --tabbar-total: var(--tabbar-h);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le test porte aussi sur `max()` : tout le reste de la feuille s'en sert pour
   composer avec les zones sûres, et une seule de ces fonctions manquante
   suffirait à emporter les déclarations qui l'utilisent. Mieux vaut alors ne
   rien tenter et rester sur les valeurs de repli, qui donnent une mise en page
   juste — simplement sans égard pour l'encoche. */
@supports (top: env(safe-area-inset-top)) and (height: max(1px, 2px)) {
  :root {
    --sa-t: env(safe-area-inset-top);
    --sa-b: env(safe-area-inset-bottom);
    --sa-l: env(safe-area-inset-left);
    --sa-r: env(safe-area-inset-right);

    /* Le système annonce large : 34px sur iPhone, jusqu'à une cinquantaine sur
       les Android à navigation gestuelle. C'est la mesure qu'il faut à un
       contenu qui défile, pas à une barre fixe — sous une rangée d'onglets,
       cet espace ne protège plus rien, il se voit et il se perd. On ne garde
       que de quoi dégager franchement le trait de geste. */
    --sa-b-nav: min(env(safe-area-inset-bottom), 14px);

    /* La réserve se prend DANS la hauteur de la barre, elle ne s'y ajoute pas.
       C'est tout le point : additionner donnait une barre qui enflait avec ce
       que l'appareil déclarait, sans plafond — 94px sur un iPhone. Ici la
       barre reste bornée, et la seule garantie qu'on tient est celle qui
       compte : 44px de rang cliquable, la course du pouce. */
    --tabbar-total: max(var(--tabbar-h), calc(44px + var(--sa-b-nav)));
  }
}

:root[data-theme="light"] {
  --bg:    #f4f2ec;
  --bg2:   #e8e5dd;
  --card:  #fffdf8;
  --brd:   rgba(10, 10, 11, 0.16);
  --brd2:  rgba(10, 10, 11, 0.34);
  --fg:    #0a0a0b;
  --mut:   rgba(10, 10, 11, 0.6);
  --mut2:  rgba(10, 10, 11, 0.36);

  --sig:   #d7261c;
  --sig2:  #a81b13;
  --gl-c:  #0891b2;
}

/* ---- Base -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

/* Rebond élastique.
   Sur un écran qui n'a presque rien à faire défiler, tirer dessus décolle la
   page entière puis la laisse revenir en place : la marge du haut s'en va et
   remonte toute seule, et l'application donne l'impression de déraper. Une
   page web s'en accommode, une application posée sur l'écran d'accueil non —
   aucune n'a ce comportement. La détente est donc coupée dans les deux sens.
   Le rechargement par traction disparaît avec, sans perte : les écrans se
   redemandent d'eux-mêmes, il n'y a pas de document à recharger. */
html, body { overscroll-behavior: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

button, input, select { font: inherit; color: inherit; }

/* Safari grossit le texte de son propre chef au basculement en paysage.
   Le dessin de la page ne le lui a pas demandé. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Zoom au doigt, dans l'application installée seulement.
   Pincer ou taper deux fois n'a plus de sens une fois l'application posée sur
   l'écran d'accueil : ce n'est plus une page qu'on consulte, c'est une
   interface qu'on manipule, et le moindre écart de doigt la déréglait. Sur le
   site en navigateur, rien ne change — le zoom y reste un droit. */
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) {
  html { touch-action: pan-x pan-y; }

  /* Exception : le curseur de volume se règle par un glissement horizontal,
     que le navigateur prendrait sinon pour un début de défilement et lui
     confisquerait. Il lui faut la main pleine sur le geste. */
  .volume input { touch-action: none; }
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection { background: var(--sig); color: #fff; }

:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

input[type="range"] { -webkit-appearance: none; appearance: none; background: none; }

/* Balayage de lignes très discret sur toute la page : c'est ce qui donne la
   matière « signal vidéo » sans jamais gêner la lecture. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.4;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}

:root[data-theme="light"] body::after { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Typographie ------------------------------------------------------- */

/* Le titrage reprend le dessin du wordmark : chasse resserrée, graisse
   maximale, italique, capitales. */
.display {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.9;
}

.eyebrow {
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mut);
}

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Glitch ------------------------------------------------------------ */

/* Décalage chromatique : deux copies du texte, l'une cyan à gauche, l'autre
   magenta à droite, révélées par tranches horizontales. Le mouvement est
   déclenché par framer-motion via la variable --gl. */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch::before {
  color: var(--gl-c);
  transform: translate(calc(var(--gl, 0) * -3px), calc(var(--gl, 0) * 1px));
  clip-path: polygon(0 12%, 100% 12%, 100% 34%, 0 34%);
}

.glitch::after {
  color: var(--sig);
  transform: translate(calc(var(--gl, 0) * 3px), calc(var(--gl, 0) * -1px));
  clip-path: polygon(0 58%, 100% 58%, 100% 78%, 0 78%);
}

.glitch.is-on::before,
.glitch.is-on::after { opacity: 0.9; }

/* Bande de tranche horizontale, reprise directe du logo. */
.slice { position: relative; overflow: hidden; }

.slice::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  height: 6%;
  top: var(--slice-y, 46%);
  background: var(--bg);
  transform: translateX(var(--slice-x, 0));
  pointer-events: none;
  opacity: 0;
}

.slice.is-on::after { opacity: 1; }

/* =========================================================================
   Ossature
   ========================================================================= */

.shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100%;

  /* La réserve du bas doit couvrir TOUT ce qui flotte par-dessus : le lecteur,
     la barre d'onglets, et la bande de geste du téléphone. L'oublier revenait à
     enterrer les derniers centimètres de chaque écran sous la barre. */
  padding-bottom: var(--tabbar-total);
}

/* Le lecteur n'est là qu'une fois une station chargée. Lui réserver sa hauteur
   en permanence creusait 74px de vide au bas de chaque écran, sous lesquels il
   n'y avait rien à cacher. */
:root.a-lecteur .shell { padding-bottom: calc(var(--player-h) + var(--tabbar-total)); }

@media (min-width: 1024px) {
  .shell {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    max-width: var(--shell-max);
    margin: 0 auto;
    padding-bottom: calc(var(--sa-b-nav) + 16px);
  }

  :root.a-lecteur .shell { padding-bottom: calc(var(--player-h) + var(--sa-b-nav) + 16px); }
}

/* ---- Barre latérale ---------------------------------------------------- */

.rail { display: none; }

@media (min-width: 1024px) {
  .rail {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* La réserve en bas laisse passer le lecteur, qui est fixe et couvrirait
       sinon la carte de compte. */
    padding: 26px 20px calc(var(--player-h) + var(--sa-b-nav) + 20px);
    border-right: 1px solid var(--brd);
    position: sticky;
    top: 0;
    /* `dvh` suit la barre d'outils escamotable des navigateurs mobiles, là où
       `vh` reste bloqué sur la fenêtre dépliée et fait dépasser la colonne. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }
}

.wordmark {
  display: block;
  width: 100%;
  max-width: 178px;
  aspect-ratio: 900 / 403;
  background-color: currentColor;
  -webkit-mask: var(--wordmark) no-repeat center / contain;
  mask: var(--wordmark) no-repeat center / contain;
}

.wordmark--sm { max-width: 112px; }

.rail__nav { display: flex; flex-direction: column; }

.rail__link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  color: var(--mut);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: color 140ms var(--ease), border-color 140ms var(--ease),
              background 140ms var(--ease);
}

.rail__link:hover { color: var(--fg); background: var(--bg2); }

.rail__link[aria-current="page"] {
  color: var(--fg);
  border-left-color: var(--sig);
  background: var(--bg2);
}

.rail__link svg { width: 16px; height: 16px; flex: none; }

.rail__section { display: flex; flex-direction: column; gap: 10px; }
.rail__folders { display: flex; flex-direction: column; }

.rail__folder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  color: var(--mut);
  border-left: 2px solid transparent;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.rail__folder:hover { color: var(--fg); border-left-color: var(--brd2); }
.rail__folder span:last-child { font-family: var(--mono); font-size: 10.5px; color: var(--mut2); }

.rail__foot { margin-top: auto; }

.rail__account {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--brd);
}

/* ---- En-tête ----------------------------------------------------------- */

.main { min-width: 0; }

/* L'en-tête est le premier à toucher l'heure et la pastille de la Dynamic
   Island. Sa réserve du haut les dégage ; le fond, lui, passe bien dessous,
   pour que la barre système se pose sur la couleur du site et non sur du vide.
   Les réserves latérales servent en paysage, où l'encoche mord sur un bord.

   La réserve REMPLACE la marge du haut au lieu de s'y ajouter : les 59px que
   déclare un iPhone à Dynamic Island descendent déjà bien plus bas que la
   pastille, l'air est compris dedans. Les cumuler enfonçait l'en-tête et
   poussait tout l'écran vers le bas. */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(14px, var(--sa-t)) calc(18px + var(--sa-r)) 14px calc(18px + var(--sa-l));
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--brd);
  z-index: 20;
}

@media (min-width: 1024px) {
  .topbar { padding: max(20px, var(--sa-t)) calc(28px + var(--sa-r)) 20px calc(28px + var(--sa-l)); }
  .topbar .wordmark { display: none; }
}

.topbar__spacer { flex: 1; }

.icon-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brd);
  color: var(--mut);
  transition: color 140ms var(--ease), border-color 140ms var(--ease),
              background 140ms var(--ease);
}

.icon-btn:hover { color: var(--fg); border-color: var(--fg); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---- Bascule clair / sombre -------------------------------------------- *
   Les deux astres occupent la même case de la grille : l'un s'en va en
   pivotant pendant que l'autre arrive, et la lune paraît se retourner en
   soleil. Un simple échange d'icônes aurait donné un clignotement — le geste
   compte ici autant que le réglage.
   ------------------------------------------------------------------------ */

.theme-toggle { overflow: hidden; }

.theme-toggle svg {
  grid-area: 1 / 1;
  transition: opacity 200ms var(--ease), transform 460ms var(--ease);
}

/* Astre absent : réduit et pivoté, chacun de son côté. */
:root[data-theme="dark"]  .theme-toggle__sun,
:root[data-theme="light"] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.3);
}

:root[data-theme="light"] .theme-toggle__moon { transform: rotate(-90deg) scale(0.3); }

:root[data-theme="dark"]  .theme-toggle__moon,
:root[data-theme="light"] .theme-toggle__sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ---- Installation (en-tête) -------------------------------------------- */

.icon-btn--install {
  position: relative;
  color: var(--sig);
  border-color: var(--sig);
}

.icon-btn--install:hover {
  background: var(--sig);
  border-color: var(--sig);
  color: #fff;
}

/* Pastille : réservée au cas où le navigateur installe vraiment en un clic. */
.icon-btn--install.icon-btn--ready::after {
  content: "";
  position: absolute;
  top: -3px; right: -3px;
  width: 7px; height: 7px;
  background: var(--sig);
  border: 2px solid var(--bg);
  border-radius: 50%;
  animation: install-pulse 2.4s var(--ease) infinite;
}

@keyframes install-pulse {
  0%, 70%, 100% { transform: scale(1);   opacity: 1; }
  35%           { transform: scale(1.5); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: opacity 120ms linear; }
  .icon-btn--install.icon-btn--ready::after { animation: none; }
}

.avatar {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  font: 900 12px var(--sans);
  font-style: italic;
  color: #fff;
  flex: none;
}

/* Réserve du bas : 12px, et pas un de plus.
   L'ossature réserve DÉJÀ la hauteur exacte des barres fixes — le contenu
   s'arrête donc pile au bord du lecteur. Les 46px qui traînaient ici s'y
   ajoutaient sans rien porter : c'était le trou béant qu'on voyait au bas de
   chaque écran, et aucun réglage de la barre d'onglets ne pouvait le combler,
   puisqu'il n'en venait pas. Il ne reste que de quoi ne pas coller au lecteur. */
.view { padding: 0 calc(18px + var(--sa-r)) 12px calc(18px + var(--sa-l)); }

@media (min-width: 1024px) { .view { padding: 0 calc(28px + var(--sa-r)) 28px calc(28px + var(--sa-l)); } }

/* ---- Titre de page ----------------------------------------------------- */

.page-head {
  padding: 26px 0 20px;
  border-bottom: 2px solid var(--fg);
  margin-bottom: 26px;
}

.page-head__title {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.88;
  font-size: clamp(38px, 8vw, 78px);
  margin: 10px 0 0;
}

.page-head__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut);
  margin-top: 12px;
  line-height: 1.7;
}

@media (min-width: 760px) {
  .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; }
  .page-head__sub { text-align: right; margin: 0 0 4px; flex: none; }
}

/* =========================================================================
   Vignettes
   ========================================================================= */

.thumb {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--brd);
  flex: none;
  container-type: inline-size;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* Repli : la marque de la station en capitales condensées, sur l'encre de son
   genre. Aucun arrondi, aucune ombre — la même grammaire que le logo. */
.thumb__fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  font-size: clamp(11px, 34cqw, 54px);
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
}

.thumb__fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.thumb--sm { width: 42px; }
.thumb--player { width: 46px; }

/* =========================================================================
   Carrousel
   ========================================================================= */

.hero { margin-bottom: 40px; }

.hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--card-w) * 1.03 + 84px);
  perspective: 1000px;
  touch-action: pan-y;
  user-select: none;

  /* Les cartes latérales sont translatées bien au-delà du cadre. Le masque
     seul ne clippe QUE le rendu : sans overflow, elles allongeaient la page et
     créaient une barre de défilement horizontale, y compris sur grand écran. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);

  /* La largeur de carte suit la place disponible, sans jamais dépasser une
     valeur lisible. C'est ce qui fait tenir le carrousel de 320 à 1440 px. */
  --card-w: clamp(148px, 58vw, 200px);
}

@media (min-width: 560px)  { .hero__stage { --card-w: clamp(200px, 40vw, 250px); } }
@media (min-width: 1024px) { .hero__stage { --card-w: clamp(230px, 26vw, 300px); } }

.hcard {
  position: absolute;
  width: var(--card-w);
  background: var(--bg2);
  border: 1px solid var(--brd2);
  cursor: pointer;
  will-change: transform, opacity;
}

/* Seule la carte active porte le liseré de signal. */
.hcard.is-active { border-color: var(--sig); }

.hcard__art {
  position: relative;
  aspect-ratio: 1;
  background: var(--ink, #2a2a2c);
  display: grid;
  place-items: center;
  container-type: inline-size;
  overflow: hidden;
}

.hcard__art img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

.hcard__mark {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  font-size: clamp(28px, 27cqw, 80px);
  color: rgba(255, 255, 255, 0.96);
  letter-spacing: -0.03em;
}

/* Graduations de cadran, en haut de la vignette de repli. */
.hcard__dial {
  position: absolute;
  inset: 0 0 auto 0;
  height: 24px;
  opacity: 0.55;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  pointer-events: none;
}

.hcard__art--logo .hcard__dial { display: none; }

.hcard__live {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  background: var(--sig);
  color: #fff;
  font: 700 9px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hcard__live::before {
  content: "";
  width: 5px; height: 5px;
  background: #fff;
}

.hcard__freq {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 4px 9px;
  background: rgba(10, 10, 11, 0.72);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #fff;
}

.hcard__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  background: var(--bg2);
  border-top: 1px solid var(--brd);
}

.hcard__body { min-width: 0; flex: 1; }

.hcard__name {
  font-weight: 800;
  font-size: 13.5px;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hcard__track {
  font-size: 11px;
  color: var(--mut);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Commandes --------------------------------------------------------- */

.hero__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.hero__arrow {
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--brd);
  color: var(--mut);
  flex: none;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.hero__arrow:hover { color: var(--fg); border-color: var(--fg); }
.hero__arrow svg { width: 15px; height: 15px; }

.hero__play {
  height: 44px;
  min-width: 210px;
  padding: 0 24px;
  background: var(--fg);
  color: var(--bg);
  font: 800 12px var(--sans);
  font-stretch: 88%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.hero__play:hover { background: var(--sig); color: #fff; }
.hero__play svg { width: 13px; height: 13px; }

/* ---- Pastilles de genre ------------------------------------------------ */

.genres {
  display: flex;
  gap: 0;
  overflow-x: auto;
  margin-bottom: 40px;
  border-top: 1px solid var(--brd);
  border-bottom: 1px solid var(--brd);
  scrollbar-width: none;
}

.genres::-webkit-scrollbar { display: none; }

.genre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
  color: var(--mut);
  border-right: 1px solid var(--brd);
  transition: color 140ms var(--ease), background 140ms var(--ease);
}

.genre:hover { color: var(--fg); background: var(--bg2); }
.genre__dot { width: 9px; height: 9px; background: var(--ink); flex: none; }

/* =========================================================================
   Rangées horizontales
   ========================================================================= */

.strip { margin-bottom: 40px; }

.strip__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--fg);
  margin-bottom: 16px;
}

.strip__title {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 24px;
  line-height: 0.95;
  margin: 0;
}

.strip__sub { font-family: var(--mono); font-size: 10.5px; color: var(--mut); margin-top: 6px; }
.strip__more { font-family: var(--mono); font-size: 10.5px; color: var(--mut); flex: none; }

.strip__scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.strip__scroll::-webkit-scrollbar { display: none; }

.tile { width: 140px; flex: none; scroll-snap-align: start; text-align: left; }

@media (min-width: 1024px) { .tile { width: 162px; } }

.tile__name {
  display: block;
  font-weight: 800;
  font-size: 12px;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mut);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================================
   Boutons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 11.5px;
  font-stretch: 88%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 140ms var(--ease), border-color 140ms var(--ease),
              color 140ms var(--ease);
}

.btn svg { width: 13px; height: 13px; }

.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover { background: var(--sig); color: #fff; }

.btn--ghost { border-color: var(--brd2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--fg); background: var(--bg2); }

.btn--sm { height: 36px; padding: 0 15px; font-size: 10.5px; }
.btn--block { width: 100%; }
.btn--danger { color: var(--sig); border-color: var(--brd); }
.btn--danger:hover { border-color: var(--sig); }

.heart { color: var(--mut); transition: color 140ms var(--ease); }
.heart:hover { color: var(--sig); }
.heart[aria-pressed="true"] { color: var(--sig); }
.heart[aria-pressed="true"] svg { fill: currentColor; }

/* ---- Direct / égaliseur ------------------------------------------------ */

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 9.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sig);
}

.live::before { content: ""; width: 6px; height: 6px; background: var(--sig); }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }

.eq i {
  width: 3px;
  height: 100%;
  background: currentColor;
  transform-origin: bottom;
  transform: scaleY(0.2);
}

/* =========================================================================
   Explorer
   ========================================================================= */

.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r-in);
  margin-bottom: 26px;
  transition: border-color 140ms var(--ease);
}

.search:focus-within { border-color: var(--sig); }
.search svg { width: 16px; height: 16px; color: var(--mut); flex: none; }

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
}

.search input::placeholder { color: var(--mut2); }

.filters__group { margin-bottom: 20px; }

.filters__label {
  font: 700 10px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brd);
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--brd);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mut);
  transition: background 140ms var(--ease), color 140ms var(--ease),
              border-color 140ms var(--ease);
}

.chip:hover { color: var(--fg); border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip__dot { width: 9px; height: 9px; flex: none; }
.chip__n { font-family: var(--mono); font-size: 10px; opacity: 0.62; }

.results-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--fg);
  margin-bottom: 18px;
}

.results-head h2 {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 0.95;
  margin: 0;
}

.results-head span { font-family: var(--mono); font-size: 10.5px; color: var(--mut); }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 10px;
}

@media (min-width: 560px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.card { position: relative; text-align: left; }

.card__name {
  display: block;
  font-weight: 800;
  font-size: 12px;
  font-stretch: 88%;
  text-transform: uppercase;
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mut);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__heart {
  position: absolute;
  top: 0; right: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 11, 0.78);
  color: #fff;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}

.card:hover .card__heart,
.card__heart[aria-pressed="true"] { opacity: 1; }
.card__heart[aria-pressed="true"] { color: var(--sig); }
.card__heart[aria-pressed="true"] svg { fill: currentColor; }

/* Squelettes : balayage horizontal, dans l'esprit du signal. */
.skeleton { pointer-events: none; }

.skeleton .thumb,
.skeleton .bar {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--card) 37%, var(--bg2) 63%);
  background-size: 200% 100%;
  animation: sweep 1.2s linear infinite;
}

.skeleton .bar { height: 10px; margin-top: 10px; }
.skeleton .bar--short { width: 55%; }

@keyframes sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.empty { padding: 60px 0; text-align: center; }

.empty h3 {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  font-size: 30px;
  margin: 0 0 10px;
}

.empty p { color: var(--mut); font-size: 13px; margin: 0 0 20px; }

/* =========================================================================
   Favoris
   ========================================================================= */

.folders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.folder {
  flex: 1 1 140px;
  padding: 14px;
  border: 1px solid var(--brd);
  text-align: left;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}

.folder:hover { border-color: var(--brd2); }
.folder[aria-pressed="true"] { border-color: var(--sig); background: var(--bg2); }

.folder__stack { display: flex; margin-bottom: 12px; }
.folder__stack .thumb { width: 40px; border: 1.5px solid var(--bg); }
.folder__stack .thumb + .thumb { margin-left: -16px; }

.folder__name {
  display: block;
  font-weight: 800;
  font-size: 12px;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.folder__meta { display: block; font-family: var(--mono); font-size: 10px; color: var(--mut); margin-top: 4px; }

.fav-row {
  display: grid;
  grid-template-columns: 16px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 12px;
  border: 1px solid var(--brd);
  border-bottom: 0;
  background: var(--bg);
  transition: background 140ms var(--ease);
}

.fav-row:last-of-type { border-bottom: 1px solid var(--brd); }
.fav-row:hover { background: var(--bg2); }
.fav-row[draggable="true"] { cursor: grab; }
.fav-row.is-dragging { opacity: 0.35; }
.fav-row.is-over { border-color: var(--sig); }
.fav-row__grip { color: var(--mut2); cursor: grab; letter-spacing: -2px; }

.row__body { display: block; min-width: 0; }

.row__name {
  display: block;
  font-weight: 800;
  font-size: 13px;
  font-stretch: 88%;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__sub {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row__tail { display: flex; align-items: center; gap: 8px; }

.row-play {
  width: 34px; height: 34px;
  background: var(--fg);
  color: var(--bg);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.row-play:hover { background: var(--sig); color: #fff; }
.row-play svg { width: 12px; height: 12px; }

/* =========================================================================
   Fiche station
   ========================================================================= */

.sheet {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 1024px) {
  .sheet {
    inset: 0 0 0 auto;
    width: min(580px, 100%);
    border-left: 2px solid var(--fg);
  }
}

/* Le panneau couvre l'écran entier, sa barre passe donc elle aussi sous
   l'encoche : même réserve que l'en-tête. */
.sheet__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: max(16px, var(--sa-t)) calc(18px + var(--sa-r)) 16px calc(18px + var(--sa-l));
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--brd);
  z-index: 2;
}

.sheet__body {
  padding: 22px calc(18px + var(--sa-r)) calc(140px + var(--sa-b)) calc(18px + var(--sa-l));
}

.sheet__head { display: flex; flex-direction: column; gap: 20px; padding-bottom: 26px; }

@media (min-width: 480px) { .sheet__head { flex-direction: row; align-items: flex-end; } }

.sheet__art { width: 158px; flex: none; border: 1px solid var(--brd2); }

@media (min-width: 1024px) { .sheet__art { width: 196px; } }

.sheet__name {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: 40px;
  margin: 12px 0 0;
}

.sheet__meta { font-family: var(--mono); font-size: 11px; color: var(--mut); margin-top: 10px; }
.sheet__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

.onair {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg2);
  border-left: 2px solid var(--sig);
  min-height: 58px;
}

.onair__label {
  font: 700 9.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mut2);
  flex: none;
}

.onair__text { font-size: 13.5px; min-width: 0; }
.onair__text strong { font-weight: 700; }
.onair__text span { color: var(--mut); }
.onair__none { color: var(--mut2); font-size: 12.5px; }

.section { padding: 30px 0 0; }

.section__title {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 0.95;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--fg);
}

.slot {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--brd);
}

.slot__time { font-family: var(--mono); font-size: 11.5px; color: var(--mut); }
.slot__name { display: block; font-size: 13px; font-weight: 500; }
.slot__host { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--mut); margin-top: 4px; }
.slot--current .slot__name { font-weight: 800; }
.slot--current .slot__time { color: var(--sig); }
.slot--past { opacity: 0.4; }

.badge-live {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  background: var(--sig);
  color: #fff;
  font: 700 9px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.notice {
  font-size: 12.5px;
  color: var(--mut);
  line-height: 1.7;
  background: var(--bg2);
  border-left: 2px solid var(--brd2);
  padding: 14px 16px;
}

.notice code { font-family: var(--mono); font-size: 11px; color: var(--fg); }

/* =========================================================================
   Lecteur
   ========================================================================= */

.player {
  position: fixed;
  left: 0; right: 0;
  /* Il se pose sur la barre d'onglets, réserve système comprise. */
  bottom: var(--tabbar-total);
  height: var(--player-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 calc(14px + var(--sa-r)) 0 calc(14px + var(--sa-l));
  background: var(--bg2);
  border-top: 2px solid var(--fg);
  z-index: 40;
}

@media (min-width: 1024px) {
  .player {
    /* Plus de barre d'onglets ici : seule la réserve système reste à dégager. */
    bottom: var(--sa-b-nav);
    padding: 0 24px;
    max-width: var(--shell-max);
    margin: 0 auto;

    /* Sur ordinateur le lecteur ne touche plus les bords de l'écran : sans
       montants, la barre restait ouverte sur les côtés et flottait au lieu de
       se poser. Le trait les referme et en fait un bloc. */
    border-left: 2px solid var(--fg);
    border-right: 2px solid var(--fg);
  }
}

.player__id { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; text-align: left; }
.player__body { display: block; min-width: 0; }

.player__name {
  display: block;
  font-weight: 800;
  font-size: 12.5px;
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.player__status {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__extra { display: none; align-items: center; gap: 16px; }

@media (min-width: 860px) { .player__extra { display: flex; } }

.player__play {
  width: 44px;
  height: 44px;
  background: var(--fg);
  color: var(--bg);
  display: grid;
  place-items: center;
  flex: none;
  transition: background 140ms var(--ease), color 140ms var(--ease);
}

.player__play:hover { background: var(--sig); color: #fff; }

/* Les deux glyphes tiennent la même case ; `is-playing` désigne le survivant.
   Le retrait se fait par un léger repli, pour que le triangle et les barres
   paraissent se remplacer plutôt que clignoter. */
.player__play svg {
  grid-area: 1 / 1;
  width: 14px; height: 14px;
  transition: opacity 130ms var(--ease), transform 220ms var(--ease);
}

.player__play [data-icon-pause],
.player__play.is-playing [data-icon-play] { opacity: 0; transform: scale(0.55); }

.player__play [data-icon-play],
.player__play.is-playing [data-icon-pause] { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .player__play svg { transition: opacity 100ms linear; }
}

.volume { display: flex; align-items: center; gap: 10px; }

.volume input { width: 86px; height: 3px; background: var(--brd2); }

.volume input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px; height: 14px;
  background: var(--fg);
  cursor: pointer;
}

.volume input::-moz-range-thumb {
  width: 4px; height: 14px;
  border: 0;
  background: var(--fg);
  cursor: pointer;
}

/* =========================================================================
   Barre d'onglets
   ========================================================================= */

/* La bande de geste du téléphone se glisse SOUS la barre au lieu de la
   rallonger : le rang d'onglets garde sa hauteur propre, la réserve système
   n'est qu'un socle vide en dessous. Compter les deux dans la même hauteur
   donnait des onglets flottant trop haut dans une barre démesurée. */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--tabbar-total);
  padding-bottom: var(--sa-b-nav);
  padding-left: var(--sa-l);
  padding-right: var(--sa-r);
  display: flex;
  background: var(--bg);
  border-top: 1px solid var(--brd);
  z-index: 45;
}

@media (min-width: 1024px) { .tabbar { display: none; } }

.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--mut);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 2px solid transparent;
  margin-top: -1px;
}

.tabbar__item svg { width: 18px; height: 18px; }
.tabbar__item[aria-current="page"] { color: var(--fg); border-top-color: var(--sig); }

/* =========================================================================
   Profil
   ========================================================================= */

.identity {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--brd);
  margin-bottom: 10px;
}

.identity .avatar { width: 60px; height: 60px; font-size: 22px; }

.identity__name {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 0.95;
}

.identity__meta { font-family: var(--mono); font-size: 10.5px; color: var(--mut); margin-top: 6px; }

.stats { display: flex; margin-bottom: 10px; border: 1px solid var(--brd); }

.stat { flex: 1; padding: 18px 16px; }
.stat + .stat { border-left: 1px solid var(--brd); }

.stat__value {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  font-size: 32px;
  line-height: 1;
}

.stat__label {
  font: 700 9.5px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mut);
  margin-top: 8px;
}

.hist-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--brd);
  transition: background 140ms var(--ease);
}

.hist-row:hover { background: var(--bg2); }
.hist-row__when { font-family: var(--mono); font-size: 10px; color: var(--mut); flex: none; }

.settings { border: 1px solid var(--brd); }

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border-bottom: 1px solid var(--brd);
}

.setting:last-child { border-bottom: 0; }
.setting__name { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.setting__hint { font-size: 11px; color: var(--mut); margin-top: 5px; }

/* Interrupteur carré, dans la grammaire du reste. */
.switch {
  width: 46px; height: 24px;
  background: var(--bg2);
  border: 1px solid var(--brd2);
  position: relative;
  flex: none;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--mut);
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}

.switch[aria-checked="true"] { border-color: var(--ok); }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--ok); }

/* =========================================================================
   Région
   ========================================================================= */

.regionbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
  border: 1px solid var(--brd);
  border-left: 2px solid var(--sig);
  margin-bottom: 34px;
  font-size: 12.5px;
}

.regionbar strong { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }

.regionbar__title {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 0.95;
}

.regionbar__hint { font-size: 11px; color: var(--mut); margin-top: 7px; max-width: 50ch; line-height: 1.6; }
.regionbar__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* =========================================================================
   Authentification
   ========================================================================= */

.auth { max-width: 400px; margin: 0 auto; padding: 30px 0; }

.auth__title {
  font-family: var(--sans);
  font-weight: 900;
  font-style: italic;
  font-stretch: 78%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: 38px;
  margin: 12px 0 14px;
}

.auth__sub { color: var(--mut); font-size: 13px; margin: 0 0 30px; line-height: 1.65; }

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font: 700 9.5px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 9px;
}

.field input {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r-in);
  outline: none;
  transition: border-color 140ms var(--ease);
}

.field input:focus { border-color: var(--sig); }

.form-error {
  font-size: 12.5px;
  color: var(--sig);
  border-left: 2px solid var(--sig);
  padding: 12px 14px;
  background: var(--bg2);
  margin-bottom: 16px;
}

.auth__switch { font-size: 12px; color: var(--mut); margin-top: 22px; text-align: center; }
.auth__switch button { color: var(--fg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* =========================================================================
   Notification
   ========================================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-total) + 22px);
  transform: translateX(-50%);
  padding: 13px 20px;
  background: var(--fg);
  color: var(--bg);
  font: 700 11px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 80;
  pointer-events: none;
  white-space: nowrap;
}

@media (min-width: 1024px) { .toast { bottom: calc(var(--sa-b-nav) + 26px); } }

/* Même règle que l'ossature : le lecteur ne compte que lorsqu'il existe. */
:root.a-lecteur .toast { bottom: calc(var(--player-h) + var(--tabbar-total) + 22px); }

@media (min-width: 1024px) {
  :root.a-lecteur .toast { bottom: calc(var(--player-h) + var(--sa-b-nav) + 26px); }
}

.loading {
  padding: 80px 0;
  text-align: center;
  color: var(--mut);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* =========================================================================
   Survol des vignettes
   =========================================================================
   Une seule mécanique, partagée par les tuiles, les cartes de la grille et
   celles du carrousel : le cadre passe à la couleur de signal, la vignette se
   désature légèrement, le nom se décale. Pas de soulèvement ni d'ombre — ce
   vocabulaire appartenait à la maquette arrondie, pas au logo tranché.
   ========================================================================= */

[data-lift] { position: relative; }

[data-lift] .thumb {
  transition: border-color 160ms var(--ease), filter 160ms var(--ease);
}

[data-lift] .thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease);
  /* Deux filets qui se croisent, comme une mire de cadrage. */
  background:
    linear-gradient(var(--sig), var(--sig)) left top / 100% 2px no-repeat,
    linear-gradient(var(--sig), var(--sig)) left bottom / 100% 2px no-repeat;
}

[data-lift]:hover .thumb { border-color: var(--sig); }
[data-lift]:hover .thumb::before { opacity: 1; }

/* Le nom change de couleur, mais ne se déplace pas : il est tronqué par
   `text-overflow`, et le décaler rognait ses derniers caractères. */
[data-lift] .tile__name,
[data-lift] .card__name {
  transition: color 160ms var(--ease);
}

[data-lift]:hover .tile__name,
[data-lift]:hover .card__name { color: var(--sig); }

[data-lift]:focus-visible .thumb { border-color: var(--sig); }

/* Sur écran tactile, il n'y a pas de survol : l'état actif prend le relais. */
@media (hover: none) {
  [data-lift]:active .thumb { border-color: var(--sig); }
  .card__heart { opacity: 1; }
}

/* Carte du carrousel : même grammaire, appliquée au cadre entier. */
.hcard { transition: border-color 160ms var(--ease); }
.hcard:hover { border-color: var(--sig); }

/* =========================================================================
   Responsive
   =========================================================================
   Trois tailles de référence : 390 px (mobile), 834 px (tablette),
   1440 px (bureau). Les règles ci-dessous corrigent ce que la grille de base
   ne gère pas seule.
   ========================================================================= */

/* Garde-fou général : rien ne doit pouvoir élargir la page. Un seul enfant
   trop large suffit à créer un défilement latéral qui casse tout sur mobile. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Les conteneurs à défilement horizontal débordent volontairement de la marge
   du contenu, pour que la première et la dernière vignette respirent. */
.strip__scroll,
.genres {
  margin-left: -18px;
  margin-right: -18px;
  padding-left: 18px;
  padding-right: 18px;
  scroll-padding-left: 18px;
}

@media (min-width: 1024px) {
  .strip__scroll,
  .genres {
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
    scroll-padding-left: 28px;
  }
}

/* ---- Mobile ------------------------------------------------------------ */

@media (max-width: 559px) {
  .view { padding-left: calc(16px + var(--sa-l)); padding-right: calc(16px + var(--sa-r)); }
  .topbar { padding: max(12px, var(--sa-t)) calc(16px + var(--sa-r)) 12px calc(16px + var(--sa-l)); }

  .strip__scroll, .genres {
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
  }

  .page-head { padding: 20px 0 16px; margin-bottom: 20px; }
  .page-head__title { font-size: clamp(30px, 10vw, 46px); }
  .page-head__sub { font-size: 10px; }

  /* Le bouton principal doit rester atteignable au pouce et ne pas pousser
     les flèches hors du cadre. */
  .hero__controls { gap: 8px; }
  .hero__play { min-width: 0; flex: 1; padding: 0 12px; font-size: 10.5px; letter-spacing: 0.1em; }
  .hero__arrow { width: 44px; }

  .tile { width: 124px; }

  /* Les cartes de dossier sur deux colonnes plutôt qu'une bande étroite. */
  .folder { flex: 1 1 calc(50% - 4px); }

  .fav-row { grid-template-columns: 14px 44px minmax(0, 1fr) auto; gap: 10px; padding: 0 10px; }

  .stats { flex-direction: column; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--brd); }

  .identity { flex-direction: column; align-items: flex-start; gap: 12px; }

  .regionbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .regionbar__actions { margin-left: 0; width: 100%; }
  .regionbar__actions .btn { flex: 1; }

  .sheet__body { padding: 20px 16px 150px; }
  .sheet__name { font-size: 30px; }
  .sheet__art { width: 128px; }

  .auth { padding: 16px 0; }
  .auth__title { font-size: 30px; }

  .results-head { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Le toast ne doit jamais dépasser l'écran. */
  .toast {
    white-space: normal;
    max-width: calc(100vw - 32px);
    text-align: center;
  }

  .player { gap: 10px; padding: 0 calc(12px + var(--sa-r)) 0 calc(12px + var(--sa-l)); }
  .player__name { font-size: 11.5px; }
  .player__status { font-size: 9.5px; }
}

/* Très petits écrans : on retire ce qui n'est pas indispensable. */
@media (max-width: 359px) {
  .thumb--player { width: 38px; }
  .hero__play { font-size: 9.5px; }
  .tabbar__item { font-size: 8px; }
}

/* ---- Tablette ---------------------------------------------------------- */

@media (min-width: 560px) and (max-width: 1023px) {
  .view { padding-left: calc(26px + var(--sa-l)); padding-right: calc(26px + var(--sa-r)); }
  .topbar { padding: max(16px, var(--sa-t)) calc(26px + var(--sa-r)) 16px calc(26px + var(--sa-l)); }

  .strip__scroll, .genres {
    margin-left: -26px; margin-right: -26px;
    padding-left: 26px; padding-right: 26px;
  }

  .page-head__title { font-size: clamp(44px, 7vw, 62px); }

  /* Le lecteur reste au-dessus de la barre d'onglets, plein cadre. */
  .player { padding: 0 calc(20px + var(--sa-r)) 0 calc(20px + var(--sa-l)); }

  .folder { flex: 1 1 calc(33.333% - 6px); }

  .sheet { width: min(560px, 100%); margin-left: auto; }
}

/* ---- Bureau ------------------------------------------------------------ */

@media (min-width: 1024px) {
  /* Le lecteur est centré par les marges automatiques, PAS par une
     transformation : framer-motion pose un `transform` en ligne à l'apparition
     du lecteur, qui écrasait un `translateX(-50%)` et projetait la barre hors
     de l'écran sur les grands écrans. */
  .player {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--shell-max);
  }
}

/* Écrans très larges : la grille gagne une colonne au lieu d'étirer les
   vignettes jusqu'à l'absurde. */
@media (min-width: 1700px) {
  .grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ---- Écrans bas (paysage mobile) --------------------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .hero__stage { --card-w: clamp(120px, 26vh, 170px); }
  .page-head { padding: 14px 0 12px; margin-bottom: 16px; }
  .page-head__title { font-size: 30px; }
}

/* ---- Encoches et barres système ---------------------------------------- */

/* Les zones sûres sont désormais traitées à la source, dans les variables
   --sa-* du haut du fichier, et reprises par chaque élément concerné : en-tête,
   contenu, lecteur, barre d'onglets, panneaux. Le rattrapage qui se trouvait
   ici ne couvrait que le bas de l'écran — le haut, les côtés et la réserve de
   défilement du contenu restaient oubliés. */

/* =========================================================================
   Écran de chargement
   =========================================================================
   Reprend l'animation du logo fournie : le wordmark se déchire en tranches
   horizontales décalées, comme la bande qui coupe le « RADIO ».

   Deux régimes, pour une raison de poids :
     - ARRIVÉE sur le site : la vidéo du logo (1 Mo) est jouée. C'est le moment
       de marque, il vaut son chargement, et le fichier est ensuite en cache.
     - CHANGEMENT DE VUE : uniquement le wordmark en CSS, qui part
       instantanément. Rejouer une vidéo d'un méga-octet à chaque onglet
       rendrait la navigation plus lente qu'elle ne l'est réellement.
   ========================================================================= */

/* IMPORTANT : l'écran n'a AUCUN fond à lui.
 *
 * Ce sont les bandes seules qui couvrent la page. Un fond posé ici resterait
 * derrière elles quand elles glissent, et le site n'apparaîtrait jamais — la
 * déchirure se voyait, mais ne découvrait rien. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Bandes qui composent le voile. À la sortie, chacune sort de l'écran de son
   côté et découvre la page par lambeaux. */
.loader__bands {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.loader__bands span {
  flex: 1;
  background: var(--bg);
  will-change: transform;
  /* Léger débord vertical : la répartition en flex tombe sur des hauteurs
     fractionnaires, et sans ce recouvrement des filets d'un pixel laisseraient
     voir la page à travers le voile avant l'heure. */
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.loader__mark {
  position: relative;
  z-index: 2;
  width: min(58vw, 420px);
  display: grid;
  place-items: center;
}

/* Wordmark en masque : il prend la couleur du texte et suit donc le thème. */
.loader__word {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 900 / 403;
  background-color: currentColor;
  -webkit-mask: var(--wordmark) no-repeat center / contain;
  mask: var(--wordmark) no-repeat center / contain;
}

/* Deux copies décalées en cyan et rouge, révélées par tranches : le décalage
   chromatique du logo animé. */
.loader__word::before,
.loader__word::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--wordmark) no-repeat center / contain;
  mask: var(--wordmark) no-repeat center / contain;
  opacity: 0;
  pointer-events: none;
}

.loader__word::before {
  background-color: var(--gl-c);
  transform: translateX(calc(var(--gl, 0) * -4px));
  clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
}

.loader__word::after {
  background-color: var(--sig);
  transform: translateX(calc(var(--gl, 0) * 4px));
  clip-path: polygon(0 55%, 100% 55%, 100% 76%, 0 76%);
}

.loader.is-glitching .loader__word::before,
.loader.is-glitching .loader__word::after { opacity: 0.95; }

/* Vidéo du logo, réservée à l'arrivée sur le site.
 *
 * Le fichier est noir sur blanc, sans transparence. On l'inverse puis on
 * l'incruste en `screen` : le noir devient neutre et seul le logo, désormais
 * clair, ressort sur le fond du site.
 *
 * Elle est posée en enfant direct de l'écran, PAS dans `.loader__mark` : ce
 * dernier voit son opacité animée, ce qui en fait un contexte d'empilement
 * isolé où le mélange n'a plus rien à fusionner — le cadre noir de la vidéo
 * restait alors visible.
 */
.loader__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(68vw, 520px);
  height: auto;
  mix-blend-mode: screen;
  filter: invert(1);
  pointer-events: none;
}

:root[data-theme="light"] .loader__video {
  filter: none;
  mix-blend-mode: multiply;
}

/* Quand la vidéo est prête, elle remplace le wordmark : les deux ne doivent
   jamais coexister à l'écran. */
.loader.has-video .loader__mark { visibility: hidden; }

.loader__status {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mut2);
  z-index: 2;
}

/* Barre de progression indéterminée, en bas : un filet qui balaie. */
.loader__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--brd);
  overflow: hidden;
  z-index: 2;
}

.loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sig);
  transform: translateX(-100%);
  animation: loader-sweep 1.1s var(--ease) infinite;
}

@keyframes loader-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Voile de bruit, très discret, pendant le chargement seulement. */
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px);
}

@media (prefers-reduced-motion: reduce) {
  .loader__bar::after { animation: none; transform: translateX(0); }
  .loader__word::before,
  .loader__word::after { display: none; }
}

/* Arêtes chromatiques pendant la déchirure.
 *
 * Nécessaire, pas décoratif : les bandes ont la couleur du fond de page, donc
 * les faire glisser ne révélait rien de perceptible là où la page est vide —
 * la sortie se lisait comme une coupure nette. Un liseré cyan d'un côté et
 * rouge de l'autre rend le déplacement visible, et c'est exactement le
 * décalage chromatique du logo. */
.loader__bands.is-tearing span {
  box-shadow:
    3px 0 0 var(--sig),
   -3px 0 0 var(--gl-c),
    0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Pendant la déchirure, tout ce qui n'est pas une bande s'efface : sans ça, la
   mention, la barre de progression et le voile de lignes resteraient suspendus
   au-dessus de la page qui vient d'apparaître. */
.loader.is-leaving .loader__status,
.loader.is-leaving .loader__bar {
  opacity: 0;
  transition: opacity 140ms var(--ease);
}

.loader.is-leaving::after {
  opacity: 0;
  transition: opacity 180ms var(--ease);
}


/* =========================================================================
   Gestion du compte
   ========================================================================= */

.identity { flex-wrap: wrap; }
.identity__body { flex: 1; min-width: 0; }
.identity__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* La photo de profil remplit le carré, quelles que soient ses proportions
   d'origine — le recadrage est fait côté serveur, ceci n'est qu'un garde-fou. */
.avatar--photo { padding: 0; overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; }

.account__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media (min-width: 620px) {
  .account__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.account__hint {
  font-size: 11px;
  color: var(--mut);
  margin: 2px 0 16px;
  line-height: 1.5;
}

/* =========================================================================
   Dossiers
   ========================================================================= */

/* Le dossier n'est plus un simple bouton : il porte une action d'ouverture et
   deux outils. Il faut donc un conteneur, et un bouton d'ouverture à
   l'intérieur. */
.folder { position: relative; display: flex; flex-direction: column; }

.folder__open {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
}

.folder__tools {
  display: flex;
  gap: 4px;
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}

.folder:hover .folder__tools,
.folder:focus-within .folder__tools { opacity: 1; }

.folder__tools .icon-btn {
  width: 28px;
  height: 28px;
  background: var(--bg);
}

.folder__tools .icon-btn svg { width: 13px; height: 13px; }

/* Sur écran tactile il n'y a pas de survol : les outils restent visibles. */
@media (hover: none) {
  .folder__tools { opacity: 1; }
}

.folder--new {
  align-items: flex-start;
  justify-content: center;
  border-style: dashed;
  color: var(--mut);
  min-height: 116px;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}

.folder--new:hover { color: var(--fg); border-color: var(--fg); }

.folder--new__plus {
  display: block;
  font-weight: 900;
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}

/* Sélecteur de dossier dans la liste des favoris. */
.row-folder {
  height: 30px;
  max-width: 120px;
  padding: 0 8px;
  background: var(--bg2);
  border: 1px solid var(--brd);
  border-radius: var(--r-in);
  color: var(--mut);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 140ms var(--ease), color 140ms var(--ease);
}

.row-folder:hover { color: var(--fg); border-color: var(--brd2); }
.row-folder:focus { outline: none; border-color: var(--sig); color: var(--fg); }

@media (max-width: 559px) {
  /* Sur mobile, la ligne est déjà dense : le sélecteur passe sous le nom. */
  .row-folder { max-width: 84px; font-size: 10px; }
}

/* Boutons d'une feuille de confirmation. */
.sheet__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Avatar dans la navigation : plus petit, et sans les proportions imposées
   aux icônes SVG voisines. */
.avatar--nav {
  width: 22px;
  height: 22px;
  font-size: 9px;
}

.tabbar__item .avatar--nav { width: 19px; height: 19px; font-size: 8px; }
.rail__link .avatar--nav { width: 20px; height: 20px; font-size: 8.5px; }
.icon-btn .avatar--nav { width: 24px; height: 24px; }

/* L'emplacement remplace un <svg> : il ne doit pas hériter de ses règles. */
[data-nav-avatar] { display: flex; align-items: center; justify-content: center; flex: none; }

/* =========================================================================
   Installation de l'application
   ========================================================================= */

.install {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--brd2);
  background: var(--bg2);
}

/* Exactement l'icône que l'application portera une fois posée sur l'écran
   d'accueil : montrer autre chose serait promettre autre chose. */
.install__mark {
  flex: none;
  width: 54px;
  height: 54px;
  background: var(--appicon) center / cover no-repeat, var(--bg);
  border: 1px solid var(--brd2);
}

.install__body { flex: 1; min-width: 0; }

.install__title {
  font-size: 15px;
  font-weight: 900;
  font-stretch: 80%;
  letter-spacing: -0.01em;
  margin: 3px 0 5px;
}

.install__hint { font-size: 11.5px; color: var(--mut); line-height: 1.6; }
.install__go { flex: none; }

@media (max-width: 559px) {
  .install { flex-wrap: wrap; }
  .install__go { width: 100%; }
}

/* Liste numérotée des étapes d'installation. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.steps li {
  position: relative;
  counter-increment: etape;
  padding: 11px 0 11px 38px;
  font-size: 12.5px;
  line-height: 1.6;
  border-bottom: 1px solid var(--brd);
}

.steps li:last-child { border-bottom: 0; }

.steps li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fg);
  color: var(--bg);
  font: 800 10px var(--sans);
}

/* Variante « ce que vous perdez » : puces rouges, pas de numérotation. */
.steps--loss { margin-top: 16px; }
.steps--loss li::before {
  content: "";
  width: 8px;
  height: 8px;
  top: 18px;
  background: var(--sig);
}

/* =========================================================================
   Zone sensible
   ========================================================================= */

.danger { border-top: 2px solid var(--sig); padding-top: 18px; margin-top: 34px; }
.danger__title { color: var(--sig); }
.danger .setting { border-color: var(--brd); }

/* Un bouton destructeur seul est plein : dans une feuille de confirmation il
   porte l'action principale, et doit se distinguer de « Annuler ». */
.btn.btn--danger:not(.btn--ghost) { background: var(--sig); color: #fff; border-color: var(--sig); }
.btn.btn--danger:not(.btn--ghost):hover { background: var(--sig2); border-color: var(--sig2); }
.btn.btn--danger:disabled { opacity: 0.55; cursor: default; }

.notice--danger { border-left-color: var(--sig); color: var(--fg); }

/* =========================================================================
   Seuil de saisie tactile
   =========================================================================
   Placé en toute fin de feuille, et non près de la remise à zéro : les tailles
   des champs sont posées bien plus bas dans le fichier, et à spécificité égale
   c'est la dernière écrite qui l'emporte. Une correction rangée « au bon
   endroit » thématiquement n'aurait jamais pris.

   Sous 16px dans un champ, iOS agrandit la page entière à la mise au point — et
   n'en revient jamais tout à fait. Ce n'est pas un réglage qu'on désactive,
   c'est un seuil qu'on respecte. Réservé au tactile : à la souris et au
   clavier, la typographie garde les tailles dessinées.
   ========================================================================= */

@media (pointer: coarse) {
  input:not([type="range"]),
  select,
  textarea,
  .search input,
  .field input { font-size: 16px; }
}