/* ==========================================================================
   about.css — Styles dédiés à la page "A propos"
   Objectif : lisibilité iPhone, sans impacter le reste du site

   - iPhone : supprimer le "titre/Logo Art en lignes" à côté du hamburger
   - iPhone : garantir l'affichage du H1
   - iPhone : ne plus masquer le début du texte
   - iPhone : hamburger visible + menu fermé par défaut (ouvrable au clic)
   ========================================================================== */

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

/* ==========================================================================
   IMPORTANT : sur la page À propos, on NE garde PAS la navbar en fixed-top
   (c’est la cause n°1 du texte masqué sur iPhone).
   ========================================================================== */
.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)
   - On masque le brand mobile (logo) à côté du hamburger
   ========================================================================== */
@media (max-width: 991.98px){

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

  /* Masquer le logo mobile (navbar-brand d-lg-none) */
  .navbar-brand.d-lg-none{
    display: none !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;
  }
}

/* (On garde la classe au cas où elle servirait ailleurs) */
.about-mobile-logo{
  height: 34px;
  width: auto;
  display: block;
}

/* ==========================================================================
   Zone A PROPOS (scopée)
   ========================================================================== */
.container.about{
  max-width: 980px;
  margin: 0 auto;
  padding: 1.25rem 0.9rem;
  margin-top: 0 !important;

  /* empêche un scroll horizontal si un élément dépasse */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .container.about{ overflow-x: hidden; }
}
@media (max-width: 576px){
  .container.about{ padding: 1rem 0.75rem; }
}

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

/* Titre principal (votre H1 a class="about-title") */
.container.about .about-title{
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  line-height: 1.15;
  margin: 0 0 0.9rem 0;

  /* Sécurité iOS/iPhone */
  display: block;
  position: relative;
  z-index: 1;

  /* Si vous voulez le titre en rouge, décommentez la ligne suivante */
  /* color: #dc3545 !important; */
}

/* Sous-titres */
.container.about h5{
  font-size: clamp(1.05rem, 3.8vw, 1.25rem);
  line-height: 1.25;
  margin: 1.15rem 0 0.35rem 0;
}

/* Couleurs */
.container.about .paragraph1 { color: #dc3545 !important; }
.container.about .paragraph2 { color: #fd7e14 !important; }
.container.about .paragraph3 { color: #ffc107 !important; }
.container.about .paragraph4 { color: #28a745 !important; }
.container.about .paragraph5 { color: #20c997 !important; }
.container.about .paragraph6 { color: #17a2b8 !important; }
.container.about .paragraph7 { color: #007bff !important; }

/* Texte */
.container.about 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;
}

/* Petit “lead” */
.container.about .about-lead{
  margin-top: 0.2rem;
}

/* Accent rouge */
.container.about .about-accent{
  color: #dc3545 !important;
}

/* Listes */
.container.about .about-list{
  padding-left: 1.1rem;
  margin: 0.35rem 0 1rem 0;
}
.container.about .about-list li{
  margin: 0.35rem 0;
}
@media (max-width: 576px){
  .container.about .about-list{ padding-left: 1.05rem; }
}

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

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

/* ==========================================================================
   MOBILE : Footer — ne garder que "Accueil" centré
   (Votre footer est : <div class="footer-basic"><footer> ... </footer></div>)
   ========================================================================== */
@media (max-width: 576px){

  /* 1) On cache tout le footer */
  .footer-basic footer ul li{
    display: none !important;
  }
  .footer-basic footer p{
    display: none !important;
  }

  /* 2) On ne ré-affiche que le 1er item (Accueil) */
  .footer-basic footer ul li:first-child{
    display: block !important;
  }

  /* 3) On centre parfaitement l'ensemble */
  .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;
  }

  /* 4) Style du lien Accueil (facultatif, simple et propre) */
  .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;
  }
}