/* ==========================================================================
   aide_intro_lignes.css — Styles dédiés à Aide > Intro > lignes.html
   Objectif : iPhone = hamburger fermé, titre rouge centré, texte non masqué
   (Sans impacter les autres pages / sans toucher l'ordi)
   ========================================================================== */

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

/* ==========================================================================
   IMPORTANT : sur CETTE page, on annule le fixed-top (cause fréquente de texte masqué)
   ========================================================================== */
.navbar.fixed-top{
  position: static !important;
  top: auto !important;
}

/* Comme on annule le fixed-top, on annule aussi tout padding-top compensatoire */
body{
  padding-top: 0 !important;
}

/* ==========================================================================
   MOBILE : gérer la navbar
   - Hamburger visible
   - Menu fermé par défaut mais ouvrable au clic (Bootstrap ajoute .show)
   ========================================================================== */
@media (max-width: 991.98px){

  /* Hamburger : toujours visible */
  .navbar-toggler{
    display: block !important;
  }

  /* Menu : fermé par défaut */
  #navbarCollapse{
    display: none !important;
  }

  /* Quand on clique, Bootstrap ajoute .show => on l'autorise à s'afficher */
  #navbarCollapse.show{
    display: block !important;
  }
}

/* ==========================================================================
   Zone AIDE (scopée)
   ========================================================================== */
.container.help{
  max-width: 980px;
  margin: 0 auto;
  padding: 1.25rem 0.9rem;
  margin-top: 0 !important;
  overflow-x: clip;
}
@supports not (overflow: clip){
  .container.help{ overflow-x: hidden; }
}
@media (max-width: 576px){
  .container.help{ padding: 1rem 0.75rem; }
}

/* Neutralisation d’éventuels styles globaux gênants */
.container.help,
.container.help *{
  white-space: normal !important;
  max-width: 100%;
  min-width: 0;
}

/* ==========================================================================
   H1 : rouge + centré (prioritaire sur iPhone)
   ========================================================================== */
.container.help .help-title{
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  line-height: 1.15;
  margin: 0 0 0.9rem 0;

  display: block;
  position: relative;
  z-index: 1;
}

/* iPhone : titre rouge et centré */
@media (max-width: 991.98px){
  .container.help .help-title{
    color: #dc3545 !important; /* rouge Bootstrap "danger" */
    text-align: center !important;
  }
}

/* Texte : lisible */
.container.help p{
  font-size: clamp(0.98rem, 3.6vw, 1.1rem);
  line-height: 1.75;
  margin: 0 0 0.6rem 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  color: #212529;
}

/* Listes */
.container.help ul{
  padding-left: 1.1rem;
}
@media (max-width: 576px){
  .container.help ul{ padding-left: 1.05rem; }
}

/* ==========================================================================
   MOBILE : Footer — garder "Accueil" centré, propre
   ========================================================================== */
@media (max-width: 576px){

  .footer-basic footer ul li{
    display: none !important;
  }

  .footer-basic footer ul li:first-child{
    display: block !important;
  }

  .footer-basic footer ul{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0.75rem 0 !important;
    list-style: none !important;
  }

  .footer-basic footer ul li:first-child a{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem;
    text-align: center !important;
    font-weight: 600 !important;
  }
}