/* ==========================================================================
   responsive.css — site allzicradio uniquement
   --------------------------------------------------------------------------
   ROLE
   Accueille les regles d'adaptation aux petits ecrans.
   Ce fichier ne corrige rien de l'existant : il n'y a ici que ce qu'on
   y ecrit volontairement.

   ORDRE DE CHARGEMENT (header_view.php)
     1. bootstrap.min.css
     2. custom.css
     3. player.css
     4. $css de la page (homepage.css, votes.css)
     5. responsive.css   <-- CE FICHIER, toujours en dernier

   Etant charge en dernier, il gagne la cascade a specificite egale.
   REGLE : pas besoin de !important ici. Si une regle ne s'applique pas,
   c'est un probleme de specificite du selecteur, pas de priorite.

   PORTEE
   Charge uniquement quand PUBFOLDER vaut 'allzicradio' (header_view.php).
   Le site webradio n'est pas concerne et n'a pas ce fichier.

   GRILLE DE BREAKPOINTS (Bootstrap 4, mobile-first)
     base          < 576px   petit ecran  <-- ecrire ici par defaut
     sm    >=  576px         mobile paysage
     md    >=  768px         tablette portrait
     lg    >=  992px         tablette paysage / petit desktop
     xl    >= 1200px         desktop

   Mobile-first : le style de base s'applique aux petits ecrans, chaque
   media query ne fait qu'ajouter pour les ecrans plus larges. C'est
   l'inverse de custom.css, qui est en max-width.

   A SAVOIR : player.css bascule a 960px, pas a 992px. Une regle qui depend
   de la hauteur du lecteur doit utiliser 'min-width: 961px' (complement
   exact de son 'max-width: 960px'), sinon il reste un trou de 960 a 991px.
   ========================================================================== */


/* ==========================================================================
   BASE — petits ecrans (aucune media query)
   ========================================================================== */




/* ==========================================================================
   >= 576px — sm (mobile paysage)
   ========================================================================== */
@media (min-width: 576px) {

}


/* ==========================================================================
   >= 768px — md (tablette portrait)
   ========================================================================== */
@media (min-width: 768px) {

}


/* ==========================================================================
   >= 992px — lg (tablette paysage / petit desktop)
   ========================================================================== */
@media (min-width: 992px) {

}


/* ==========================================================================
   >= 1200px — xl (desktop)
   ========================================================================== */
@media (min-width: 1200px) {

}


/* ==========================================================================
   LECTEUR — petits ecrans
   --------------------------------------------------------------------------
   Section a part, en max-width et non en min-width : elle doit couvrir
   exactement la meme plage que le bloc @media de player.css (max-width 960px).
   Utiliser 992px ici laisserait un trou de 960 a 991px ou les deux fichiers
   se contrediraient.

   Ces regles etaient dans custom.css, donc chargees AVANT player.css : a
   specificite egale, player.css gagnait et une partie d'entre elles n'avait
   aucun effet. Depuis responsive.css, charge apres, elles s'appliquent.
   ========================================================================== */
@media screen and (max-width: 960px) {
  .player .playlist-artist-title-container {
    margin-top: 15px !important;
  }

  /* !important necessaire : player.css:385 cible ces div avec une
     specificite superieure (.player .onair-player div[class$="artist"]). */
  .playlist-artist-title-container div {
    font-size: 1em !important;
    margin-top: 10px !important;
  }

  .player .onair-player .playlist-next {
    left: 190px;
    width: 190px;
    top: 30px;
    height: 75px;
  }

  .playlist-next-title2+span {
    margin-bottom: 3px !important;
    font-size: 1.5em;
  }

  .playlist-next-title2+span+span {
    font-size: 1.5em;
  }

  /* !important necessaire sur margin-bottom : player.css:419 declare
     lui aussi !important. Sans lui, player.css reprend la main. */
  .playlist-next-title2 {
    font-size: 1.5em;
    margin-bottom: 10px !important;
  }

  .playlist-radio-claim.playlist-radio {
    font-size: 1.4em;
  }
}