/* AEL/css/lignes.css */

/* ==========================================================================
   lignes.css — Styles dédiés à l’index des lignes
   ORDI : rendu validé (ne plus toucher)
   iPhone :
   - Bandeau titre haut (FIABLE) via body::before : "L1 : Les grands maîtres"
     (fond warning, texte blanc)
   - Intro sans débordement
   - Plan masqué
   - Liste iPhone (base) : siècle abrégé + artiste (sans bio)
   - AJUSTEMENT demandé (inspiré de ligne8.css qui fonctionne) :
     LIGNES 1 à 5 :
     - ligne en flex : siècle | pointillés | artiste
     - artistes alignés à droite
     - marge droite = marge gauche (48px)
     - pointillés UNIQUEMENT entre "siècles" et artiste
     - pas de pointillés ailleurs
   - En haut : pas de navbar (donc pas de "Accueil" qui traîne)
   - En bas : SEUL lien "Accueil" centré (barre fixe)
   IMPORTANT :
   - Le "Accueil" du bas est caché partout par défaut puis affiché
     uniquement sur iPhone tactile.
   - Sur ORDI, on supprime aussi tout lien "Accueil" du footer même
     s'il n'a pas la classe footer-home.
   ========================================================================== */

/* ==========================================================================
   POLICE PERSONNALISÉE
   - Fichier : AEL/fonts/Metropolitaines.otf
   - CSS     : AEL/css/lignes.css
   => Chemin relatif : ../fonts/Metropolitaines.otf
   ========================================================================== */

@font-face {
  font-family: 'Metropolitaines';
  src: url('../fonts/Metropolitaines.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Base */
* { box-sizing: border-box; }
html, body { width: 100%; }

/* =========================================================
   OFFSET SOUS NAVBAR FIXED-TOP (BASE)
   -> Fix : titre juste sous navbar (évite le "trou")
   ========================================================= */

/* Hauteur réelle de votre navbar (Bootstrap classique : 56px).
   Ajustez si votre navbar est plus haute. */
:root{
  --navbar-offset: 36px;
}

/* Décalage sous navbar fixed-top (base) */
body{
  padding-top: var(--navbar-offset);
  /* (Optionnel) Appliquer la police à toute la page :
     décommentez si vous le souhaitez.
     font-family: 'Metropolitaines', sans-serif;
  */
}

/* Sécurité : si le 1er bloc sous la navbar a une marge-top (h1, mt-*, etc.)
   on la neutralise pour éviter un espace en trop */
.container > :first-child{
  margin-top: 0 !important;
}

/* Titre (base) */
.titre-lignes{
  padding: 10px 12px;
  line-height: 1.25;
  border-radius: 6px;
  margin-bottom: 16px;
  margin-top: 0 !important; /* Fix : pas de marge au-dessus du titre */

  /* Appliquer la police au titre */
  font-family: 'Metropolitaines', sans-serif;
}

/* Plan : image-map => coords fixes, donc pas de scaling */
.plan-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
  padding-bottom: 6px;
}
.plan-scroll .myImageClass{
  display: block;
  max-width: none; /* IMPORTANT : ne pas réduire, sinon coords usemap fausses */
  height: auto;
}

/* Card deck */
.card-deck{
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   ZONE SCOPÉE "LIGNES" (inspiration about.css)
   -> coupe l’overflow horizontal
   ========================================================= */

.container{
  max-width: 980px;
  margin: 0 auto;
  overflow-x: clip;
}
@supports not (overflow: clip){
  .container{ overflow-x: hidden; }
}

.container,
.container *{
  max-width: 100%;
  min-width: 0; /* crucial pour flex children */
}

/* Intro : empêcher tout débordement */
.container .card-text{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto;
}

/* Médias */
img, svg, video, iframe, embed, object{
  max-width: 100%;
  height: auto;
}

/* =========================================================
   TIMELINE (ORDI) — rendu validé
   ========================================================= */

ul.timeline{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul.timeline > li{
  position: relative;
  margin: 0;
  padding-top: 5.1px;
  padding-bottom: 5.1px;
  padding-left: 48px;
  line-height: 1.20;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

ul.timeline .when{
  display: inline-block;
  width: 7.6em;
  white-space: nowrap;
  vertical-align: baseline;
}

ul.timeline .station{
  display: inline-block;
  width: 7.0em;
  white-space: nowrap;
  vertical-align: baseline;
  font-weight: 600;

  /* Appliquer la police aux noms d'artistes */
  font-family: 'Metropolitaines', sans-serif;
}

ul.timeline .bio{
  display: inline;
  white-space: nowrap;
  vertical-align: baseline;
}

ul.timeline a{
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  padding: 1px 0;
}

ul.timeline .sep{
  display: inline-block;
  width: clamp(10px, 8vw, 70px);
  height: 0;
  border-bottom: 2px dotted rgba(255,255,255,0.55);
  vertical-align: middle;
  transform: translateY(-2px);
  margin: 0 8px;
}

/* Sécurités sep parasites (ordi) */
ul.timeline > li > .sep:last-child{
  display: none !important;
}
ul.timeline > li .bio ~ .sep{
  display: none !important;
}

/* =========================================================
   iPHONE / PETITS ÉCRANS
   ========================================================= */

@media (max-width: 576px){

  /* ---------- NAVBAR : supprimer toute la navbar sur iPhone ---------- */
  .custom-navbar,
  .navbar,
  .navbar-nav,
  .navbar-collapse,
  #navbarCollapse,
  .navbar-toggler{
    display: none !important;
  }

  /* ---------- Bandeau titre iPhone (FIABLE) ---------- */
  .titre-lignes{
    display: none !important;
  }

  body::before{
    content: "L1 : Les grands maîtres";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;

    background-color: #c58609; /* couleur warning de votre ligne */
    color: #fff;

    text-align: center;
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 500;

    padding: 10px 12px;

    /* Appliquer la police au bandeau iPhone */
    font-family: 'Metropolitaines', sans-serif;
  }

  /* Place en haut pour le bandeau, et en bas pour la barre bas */
  body{
    padding-top: 56px !important;     /* hauteur du bandeau */
    padding-bottom: 60px !important;  /* place pour la barre bas */
  }

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

  /* ---------- Plan : masqué ---------- */
  .plan-scroll{
    display: none !important;
  }

  /* ---------- Intro : strict + neutralise card-deck Bootstrap ---------- */
  .card-deck{
    display: block !important;
  }
  .card{
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  .container .card-text{
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* ---------- Timeline iPhone : base ---------- */
  ul.timeline{
    overflow-x: hidden !important;
  }

  ul.timeline > li{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 48px !important;
    white-space: nowrap !important;
  }

  /* Siècle abrégé (votre JS s’en charge) */
  ul.timeline .when{
    width: auto !important;
    margin-right: 31px !important;
  }

  /* Artiste */
  ul.timeline .station{
    width: auto !important;
  }

  /* iPhone : masquer la bio (partout) */
  ul.timeline .bio{
    display: none !important;
  }

  /* Par défaut iPhone : on cache TOUS les pointillés */
  ul.timeline .sep{
    display: none !important;
  }

  ul.timeline > li a,
  ul.timeline > li span{
    font-size: 1.05rem !important;
    line-height: 1.20 !important;
  }

  /* =======================================================
     AJUSTEMENT (copie du principe ligne8.css)
     LIGNES 1 à 5 UNIQUEMENT :
     - ligne en flex
     - on ré-affiche UNIQUEMENT le .sep juste après .when
     - artiste à droite avec marge droite = marge gauche
     ======================================================= */

  /* Ligne en flex : siècle | pointillés | artiste */
  ul.timeline > li:nth-child(-n+5){
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
  }

  /* Siècle à gauche */
  ul.timeline > li:nth-child(-n+5) .when{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-right: 10px !important;
  }

  /* 1) Par défaut : on cache tous les .sep (déjà fait) */
  /* 2) On ré-affiche UNIQUEMENT le .sep situé juste après .when
        => pointillés entre "siècles" et artiste */
  ul.timeline > li:nth-child(-n+5) > .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) On s'assure que le .sep après l'artiste reste masqué */
  ul.timeline > li:nth-child(-n+5) > .station + .sep{
    display: none !important;
  }
  ul.timeline > li:nth-child(-n+5) > a.station + .sep{
    display: none !important;
  }

  /* Artiste : aligné à droite avec marge droite = marge gauche */
  ul.timeline > li:nth-child(-n+5) .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;
  }

  /* ---------- BAS DE PAGE : barre fixe minimaliste ---------- */
  .footer-basic footer p{
    display: none !important;
  }

  .footer-basic{
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2000 !important;

    background: #fff !important;
    padding: 10px 0 !important;
    border-top: 1px solid #ddd !important;
    text-align: center !important;
  }

  /* Cache tous les items... */
  .footer-basic ul li{
    display: none !important;
  }

  .footer-basic ul{
    padding-left: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   FOOTER HOME :
   - caché PARTOUT par défaut
   - affiché UNIQUEMENT sur iPhone tactile
   ========================================================= */

/* PARTOUT : on cache le lien Accueil du footer (footer-home) */
.footer-basic ul li.footer-home{
  display: none !important;
}

/* UNIQUEMENT iPhone / mobile tactile : on l’affiche, centré */
@media (max-width: 576px) and (hover: none) and (pointer: coarse){
  .footer-basic ul li.footer-home{
    display: inline-block !important;
    font-size: 1.1rem !important;

    /* (Optionnel) si vous voulez aussi la police sur le lien Accueil */
    font-family: 'Metropolitaines', sans-serif;
  }
}

/* =========================================================
   ORDI : supprimer TOUT "Accueil" en bas (footer)
   même si le lien n'a pas la classe footer-home
   ========================================================= */
@media (min-width: 577px){

  /* Si vous avez ajouté <li class="footer-home"> */
  .footer-basic ul li.footer-home{
    display: none !important;
  }

  /* Si le lien "Accueil" n'a pas la classe footer-home :
     on cache tout lien vers .../index.html DANS le footer */
  .footer-basic ul a[href$="index.html"],
  .footer-basic ul a[href*="/index.html"],
  .footer-basic ul a[href*="../index.html"]{
    display: none !important;
  }

  /* Si l’icône museum est utilisée dans ce lien */
  .footer-basic img[src*="museum.png"]{
    display: none !important;
  }

  /* Au cas où le footer a été "fixé" par le mode iPhone */
  .footer-basic{
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
  }

  body{
    padding-bottom: 0 !important;
  }
}