/* ==========================================================
   ligne6.css  (AEL/css/ligne6.css)
   Spécifique à la LIGNE 6 uniquement.

   Structure type (L6) :
   <li>
     <span class="when">...</span>
     <span class="sep"></span>
     <a class="station">Mouvement</a>
     <span class="sep"></span>
     <a class="station">Artiste</a>
     <span class="sep"></span>
     <a class="bio">Titre bio</a>
   </li>

   État validé :
   - iPhone : OK (on ne touche plus)
   - Ordi : artistes OK + pointillés entre mouvement/artiste OK,
            mais on ajuste :
            * mouvements légèrement vers la droite
            * artistes ramenés d’autant vers la gauche
            * éviter absolument un retour à la ligne

   Correction demandée (iPhone uniquement) :
   - Bandeau iPhone : titre correct "L6 : Mouvements artistiques"
   - Couleur du bandeau : EXACTEMENT la même que .myline6 (darkblue)
   ========================================================== */


/* ----------------------------------------------------------
   Layout (sans casser la timeline)
   ---------------------------------------------------------- */
.card.myline6 .timeline li{
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
}


/* Artiste = 2e lien .station */
.card.myline6 .timeline li a.station:nth-of-type(2){
  margin-left: auto !important;
  text-align: right !important;
  display: inline-block !important;
  white-space: nowrap !important;
}


/* ==========================================================
   ORDI (desktop)
   ========================================================== */
@media (min-width: 992px){

  /* 1) Masquer la bio */
  .card.myline6 .timeline li a.bio{
    display: none !important;
  }

  /* 2) Supprimer le sep après l’artiste (pointillés à droite) */
  .card.myline6 .timeline li a.station:nth-of-type(2) + .sep{
    display: none !important;
  }

  /* 3) IMPORTANT : éviter absolument un retour à la ligne */
  .card.myline6 .timeline li{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* 4) Ramener les artistes vers la gauche (tout en gardant aligné à droite)
        -> on augmente la marge intérieure à droite du cadre bleu.
        (Avant : 15px ; maintenant : 35px) */
  .card.myline6{
    padding-right: 35px !important;
  }

  /* Artiste : collé au bord interne (donc plus à gauche qu’avant), aligné à droite */
  .card.myline6 .timeline li a.station:nth-of-type(2){
    padding-right: 0 !important;
    margin-right: 0 !important;

    background: none !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .card.myline6 .timeline li a.station:nth-of-type(2) u{
    text-decoration: none !important;
  }

  .card.myline6 .timeline li a.station:nth-of-type(2)::before,
  .card.myline6 .timeline li a.station:nth-of-type(2)::after{
    content: none !important;
    background: none !important;
  }

  /* 5) Mouvements : légèrement vers la droite (mieux centrés sous le titre)
        -> on augmente un peu la marge gauche du mouvement. */
  .card.myline6 .timeline li a.station:nth-of-type(1){
    margin-left: 18px !important; /* était 8px : +10px vers la droite */
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* 6) Pointillés ENTRE mouvement et artiste :
        -> sep juste après le mouvement
        -> on lui permet de se compresser pour éviter tout saut de ligne */
  .card.myline6 .timeline li a.station:nth-of-type(1) + .sep{
    display: block !important;

    /* Le sep prend l’espace restant, mais peut se réduire fortement */
    flex: 1 1 10px !important;
    min-width: 10px !important;

    height: 0 !important;
    background: none !important;
    border: none !important;
    border-bottom: 2px dotted rgba(255,255,255,0.55) !important;

    /* Espace réduit : évite d’allonger la ligne et de provoquer un retour */
    margin: 0 6px !important;

    transform: none !important;
    align-self: center !important;
  }

  /* Par sécurité : le "sep" entre when et mouvement reste tel quel (si besoin) */
  .card.myline6 .timeline li .when{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}


/* ==========================================================
   iPHONE (mobile) : OK chez vous, on ne touche plus
   + Correction bandeau L6 (titre + couleur)
   ========================================================== */
@media (max-width: 576px){

  /* ✅ Bandeau iPhone spécifique Ligne 6
     (écrase le bandeau global défini dans lignes.css) */
  body::before{
    content: "L6 : Mouvements artistiques" !important;
    background-color: darkblue !important; /* EXACTEMENT comme .myline6 */
    color: #fff !important;

    /* Taille standard des bandeaux (comme ailleurs) */
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  /* Cache le mouvement (1er lien .station) */
  .card.myline6 .timeline li a.station:nth-of-type(1){
    display: none !important;
  }

  /* Cache la bio */
  .card.myline6 .timeline li a.bio{
    display: none !important;
  }

  /* Cache tous les séparateurs */
  .card.myline6 .timeline li .sep{
    display: none !important;
  }

  /* Une seule ligne stable */
  .card.myline6 .timeline li{
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Colonne siècle (évite chevauchement avec la timeline) */
  .card.myline6 .timeline li .when{
    display: inline-block !important;
    padding-left: 32px !important;
    width: 130px !important;
    flex: 0 0 130px !important;
    margin-right: 10px !important;
    white-space: nowrap !important;
  }

  /* Artiste : à droite */
  .card.myline6 .timeline li a.station:nth-of-type(2){
    margin-left: auto !important;
    text-align: right !important;
    flex: 1 1 auto !important;
    padding-right: 16px !important;
    white-space: nowrap !important;

    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  .card.myline6 .timeline li a.station:nth-of-type(2) u{
    text-decoration: none !important;
  }

  .card.myline6 .timeline li a.station:nth-of-type(2)::before,
  .card.myline6 .timeline li a.station:nth-of-type(2)::after{
    content: none !important;
    background: none !important;
  }
}

/* ==========================================================
   Fin de ligne6.css
   ========================================================== */