/* AEL/css/ligne3.css
   Correctifs iPhone UNIQUEMENT pour la ligne 3 (carte bg-success)
   Objectif : toute la liste = siècle | pointillés | artiste aligné à droite
   Sans toucher au rendu ORDI (lignes.css reste la base)
*/

@media (max-width: 576px){

  /* On cible uniquement la carte verte de la ligne 3 */
  .card.bg-success ul.timeline > li{
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
  }

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

  /* On ré-affiche UNIQUEMENT le sep juste après .when (les pointillés) */
  .card.bg-success 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é */
  .card.bg-success ul.timeline > li > .station + .sep,
  .card.bg-success ul.timeline > li > a.station + .sep{
    display: none !important;
  }

  /* Artiste à droite + marge droite ≈ marge gauche (48px) */
  .card.bg-success ul.timeline > li .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;
  }

  /* Bio toujours masquée sur iPhone */
  .card.bg-success ul.timeline .bio{
    display: none !important;
  }
}