/* ==========================================================================
   help.css — Styles dédiés au menu Aide (lisibilité iPhone)
   Pages : /Aide/index.html et pages internes /Aide/* (Intro, Bio, Expo, etc.)
   Objectif : confort mobile + mise en page stable sous navbar fixed-top (desktop)
   ========================================================================== */

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

/* Décalage sous navbar fixed-top (desktop / tablette) */
body{
  padding-top: 95px !important;
}
@media (max-width: 576px){
  body{
    padding-top: 112px !important;
  }
}

/* ==========================================================================
   Zone HELP
   ========================================================================== */

.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 de styles globaux qui cassent sur mobile */
.container.help,
.container.help *{
  white-space: normal !important;
  max-width: 100%;
  min-width: 0;
}

/* ==========================================================================
   Titres & texte
   ========================================================================== */

.container.help .help-title{
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1rem 0;
}

/* Paragraphe d’intro */
.container.help .help-lead{
  margin-top: 0.1rem;
}

/* Texte courant — FORCÉ EN NOIR */
.container.help p{
  font-size: clamp(0.98rem, 3.6vw, 1.1rem);
  line-height: 1.75;
  margin: 0 0 0.75rem 0;

  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  color: #212529 !important;   /* <- verrou noir */
}

/* h5 explicatifs */
.container.help .help-h5,
.container.help h5{
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  line-height: 1.6;
  margin: 0.55rem 0 1rem 0;

  color: #212529 !important;
}

/* Liens */
.container.help a{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* ==========================================================================
   Listes
   ========================================================================== */

.container.help .help-list{
  padding-left: 1.15rem;
  margin: 0.35rem 0 1rem 0;
}

.container.help .help-list li{
  margin: 0.45rem 0;
  line-height: 1.7;
}

/* Sous-listes (ex. Bio, Activités...) */
.container.help .help-sublist{
  margin-top: 0.4rem;
}

/* ==========================================================================
   Exemple
   ========================================================================== */

.container.help .help-example{
  margin-top: 1.25rem;
}

/* ==========================================================================
   “Hero” image
   ========================================================================== */

.container.help .help-hero{
  display: flex;
  justify-content: center;
  align-items: center;
}

.container.help .help-hero-img{
  display: block;
  max-width: min(820px, 100%);
  height: auto;

  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* ==========================================================================
   Médias
   ========================================================================== */

img, svg, video, iframe, embed, object{
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   iPhone — NAVBAR AIDE (robuste)
   - Navbar non fixe sur iPhone => ne masque JAMAIS le contenu
   - Menu ouvert par défaut uniquement sur /Aide/index.html via "show" dans le HTML
   - Titre rouge, parfaitement centré en haut (centrage écran réel)
   - Ajout du logo AEL6 au-dessus du titre
   - Descente du titre + descente du menu ouvert
   ========================================================================== */

@media (max-width: 576px){

  /* iPhone : on neutralise fixed-top pour éviter de masquer le contenu */
  nav.navbar.fixed-top{
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
  }

  /* donc : plus besoin de padding-top sur iPhone */
  body{
    padding-top: 0 !important;
  }

  /* Barre du haut sur 2 lignes :
     1) logo centré
     2) hamburger (gauche) — titre centré écran réel (position absolute)
  */
  .ael-topbar{
    position: relative !important;

    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;

    column-gap: 0.5rem !important;
    row-gap: 0.6rem !important; /* espace logo / ligne titre */
  }

  /* LOGO */
  .ael-top-logo{
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    margin-top: 0.2rem !important;
  }

  .ael-top-logo img{
    height: 34px !important;
    width: auto !important;
    display: block !important;
  }

  /* HAMBURGER */
  .ael-topbar .navbar-toggler{
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    z-index: 2 !important; /* au-dessus du titre si chevauchement */
  }

  /* TITRE : centré sur l'écran, indépendant des colonnes
     + descendu de 20% (pour ne pas coller au logo)
  */
  .ael-topbar .ael-top-title{
    grid-row: 2 !important;

    position: absolute !important;
    left: 50% !important;
    top: 20% !important; /* <- descente verticale du titre */
    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #dc3545 !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: nowrap !important;

    float: none !important;
    display: inline-block !important;
    z-index: 1 !important;
  }

  /* Espaceur (optionnel mais inoffensif) */
  .ael-topbar .ael-top-spacer{
    grid-column: 3 !important;
    grid-row: 2 !important;
    width: 44px !important;
    height: 1px !important;
  }

  /* iPhone : si une page a une image hero, on la masque */
  .container.help .help-hero{
    display: none !important;
  }

  /* Descend tout le menu ouvert (le contenu du hamburger) */
  #navbarCollapse{
    margin-top: 20% !important;
  }
}