/* ==========================================================
   ligne8.css  (AEL/css/ligne8.css)
   Spécifique LIGNE 8 — iPhone uniquement
   (ne change RIEN sur ordinateur)
   ========================================================== */

@media (max-width: 576px){

  /* ======================================================
     iPHONE — TITRE L8
     On veut :
     - la couleur EXACTE de la ligne 8 => on utilise le vrai <h1 class="myline8d titre-lignes">
     - une taille identique aux autres bandeaux (ex: ligne 7)
     ====================================================== */

  /* 1) On neutralise le bandeau global (L1) défini dans lignes.css */
  html body::before{
    content: none !important;
    display: none !important;
  }

  /* 2) On ré-affiche le vrai titre (caché dans lignes.css) */
  .titre-lignes{
    display: block !important;
  }

  /* 3) Uniformiser la taille du titre avec la ligne 7 (bandeau standard) */
  h1.titre-lignes{
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  /* 4) Comme il n’y a plus de bandeau fixe en haut,
        on annule le padding-top 56px imposé par lignes.css */
  body{
    padding-top: 10px !important;
    padding-bottom: 60px !important;  /* on garde la place pour la barre Accueil en bas */
  }

  .container{
    margin-top: 0 !important;
  }

  /* ======================================================
     iPHONE — LISTE (TIMELINE) L8
     Objectif :
     - TOUTES les stations : flex "siècle | pointillés | artiste"
     - pointillés UNIQUEMENT entre siècle et artiste
     - artiste aligné à droite, marge droite = 48px
     - bio masquée
     ====================================================== */

  /* Bio : masquée (sécurité) */
  .myline8d ul.timeline .bio{
    display: none !important;
  }

  /* Chaque ligne = flex (pour TOUTES les stations) */
  .myline8d ul.timeline > li{
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;

    /* on garde le padding-left 48px de lignes.css (OK),
       mais si besoin on le ré-affirme : */
    padding-left: 48px !important;
  }

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

  /* 1) Par défaut : on cache TOUS les .sep */
  .myline8d ul.timeline .sep{
    display: none !important;
  }

  /* 2) On ré-affiche UNIQUEMENT le .sep juste après .when */
  .myline8d 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;
  }

  /* 3) Jamais de pointillés après l’artiste */
  .myline8d ul.timeline > li > .station + .sep,
  .myline8d ul.timeline > li > a.station + .sep{
    display: none !important;
  }

  /* Artiste : poussé à droite + marge droite = 48px */
  .myline8d 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;
  }
}