/* AEL/css/ligne2.css
   Correctif iPhone UNIQUEMENT pour la Ligne 2 :
   - Tous les items en flex : siècle | pointillés | artiste
   - Artiste aligné à droite
   - Pointillés uniquement entre siècle et artiste
   - Ne touche PAS à la version ordi
*/

@media (max-width: 576px){

  /* 0) Base : on cache tous les pointillés (puis on réactive le bon) */
  ul.timeline .sep{
    display: none !important;
  }

  /* 1) Tous les <li> (et pas seulement les 5 premiers) */
  ul.timeline > li{
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;

    /* on garde vos espacements iPhone existants */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 48px !important;
  }

  /* 2) Siècle à gauche */
  ul.timeline > li > .when{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 10px !important; /* remplace le grand margin-right “base” */
  }

  /* 3) Pointillés UNIQUEMENT juste après .when */
  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;
  }

  /* 4) Artiste à droite avec marge droite = marge gauche */
  ul.timeline > li > a.station{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
    text-align: right !important;
    padding-right: 48px !important;
    white-space: nowrap !important;
  }

  /* 5) On masque tout ce qui suit (sep après artiste + bio) */
  ul.timeline > li > a.station + .sep{
    display: none !important;
  }

  ul.timeline > li > a.bio{
    display: none !important;
  }
}