/* ==========================================================
   ligne5.css  (AEL/css/ligne5.css)
   iPhone UNIQUEMENT — Ligne 5 (Portraits)

   Demande :
   - Le bandeau iPhone (body::before) reste tel qu’il est (bleu ciel).
   - On préfère aligner le RESTE sur le bandeau => on met le titre + la card
     dans le même bleu ciel.
   - La liste iPhone : siècle | pointillés | artiste (aligné à droite)
   - ORDI : ne pas toucher (tout est dans max-width:576px)

   NOTE :
   - On ne scope PAS par body.ligne5 ni par .myline5d, pour éviter tout souci
     si la classe diffère dans la page.
   ========================================================== */

@media (max-width: 576px){

  /* ======================================================
     🎨 HARMONISATION COULEUR (RESTE = couleur bandeau bleu ciel)
     ====================================================== */

  /* Couleur “bleu ciel” la plus probable sur votre site (Bootstrap 4 primary) */
  :root{
    --l5-bleu-bandeau: #007bff;
  }

  /* Titre de la page */
  h1.titre-lignes{
    background-color: var(--l5-bleu-bandeau) !important;
  }

  /* Carte principale (celle qui contient intro + liste) */
  .card{
    background-color: var(--l5-bleu-bandeau) !important;
  }

  /* Si jamais un overlay/élément interne porte le fond */
  .card .card-body,
  .card .card-header,
  .card .card-footer{
    background-color: transparent !important;
  }

  /* ======================================================
     ✅ LISTE iPhone : siècle | pointillés | artiste (droite)
     ====================================================== */

  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;
  }

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

  /* ...et on ré-affiche UNIQUEMENT celui 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;
  }

  /* Artiste à droite + marge droite = marge gauche (48px) */
  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;
  }

  /* La bio est déjà masquée par lignes.css sur iPhone, on ne change rien. */
}