/* AEL/css/ligne1.css
   Correctif iPhone UNIQUEMENT pour la Ligne 1
   Objectif : toute la liste = siècle | pointillés | artiste aligné à droite
   Ne touche pas au rendu ORDI.
*/

@media (max-width: 576px){

  /* Chaque ligne en flex : siècle | pointillés | artiste */
  ul.timeline > li{
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
  }

  /* Siècle */
  ul.timeline > li .when{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 10px !important;
  }

  /* On garde la bio cachée sur iPhone (déjà dans lignes.css, mais on sécurise) */
  ul.timeline > li .bio{
    display: none !important;
  }

  /* Par défaut : on cache tous les pointillés... */
  ul.timeline > li .sep{
    display: none !important;
  }

  /* ...et on ré-affiche UNIQUEMENT le .sep juste après .when (entre siècle et artiste) */
  ul.timeline > li > .when + .sep{
    display: inline-block !important;
    flex: 1 1 auto !important;
    height: 0 !important;
    border-bottom: 2px dotted rgba(255,255,255,0.55) !important;
    margin: 0 10px !important;
    transform: translateY(-2px) !important;
  }

  /* On s'assure que le .sep après l'artiste reste masqué */
  ul.timeline > li > a.station + .sep{
    display: none !important;
  }

  /* Artiste aligné à droite + marge droite = marge gauche */
  ul.timeline > li .station{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    text-align: right !important;
    padding-right: 48px !important; /* même valeur que le padding-left des li */
    white-space: nowrap !important;
  }
}