/* AEL/css/ligne4.css
   Correctif iPhone uniquement pour la ligne 4 :
   - toute la liste en flex "siècle | pointillés | artiste"
   - artistes alignés à droite
   - pointillés uniquement entre when et station
   - ne touche pas au rendu ORDI
*/

@media (max-width: 576px){

  /* Ligne en flex : siècle | pointillés | artiste (SUR TOUTE LA LISTE) */
  ul.timeline > li{
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
  }

  /* Siècle à gauche */
  ul.timeline > li .when{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 10px !important; /* remplace le 31px de lignes.css */
  }

  /* Ré-affiche UNIQUEMENT le .sep situé juste après .when
     => pointillés entre "siècles" 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 > .station + .sep,
  ul.timeline > li > a.station + .sep{
    display: none !important;
  }

  /* Artiste : aligné à droite avec 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;  /* marge droite ≈ marge gauche timeline */
    white-space: nowrap !important;
  }
}