/* ==========================================================================
   legal.css — Styles dédiés à la page "Dispositions légales"
   Objectif : lisibilité mobile + empêcher tout débordement horizontal
   ========================================================================== */

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

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

/* ==========================================================================
   MOBILE : logo centré dans la navbar (optionnel)
   Si vous n'avez pas de logo sur cette page, vous pouvez supprimer ce bloc.
   ========================================================================== */
@media (max-width: 576px){

  /* Navbar : on permet le centrage absolu du logo */
  .navbar.navbar-expand-lg.fixed-top{
    position: fixed;        /* déjà le cas, on sécurise */
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Bouton hamburger : reste à gauche */
  .navbar.navbar-expand-lg.fixed-top .navbar-toggler{
    margin-left: 0.75rem;
    margin-right: 0.25rem;
    position: relative;
    z-index: 3;
  }

  /* Lien brand : centré dans la barre */
  .navbar.navbar-expand-lg.fixed-top .navbar-brand{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    z-index: 2;
  }

  /* Image logo : taille adaptée iPhone */
  .legal-mobile-logo{
    height: 34px;   /* ajustez ici si besoin : 30–42px */
    width: auto;
    display: block;
  }
}

/* ==========================================================================
   Zone DISPOSITIONS LEGALES (scopée)
   IMPORTANT : ajoutez class="legal" à votre <div class="container">
   ========================================================================== */
.container.legal{
  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.legal{ overflow-x: hidden; }
}
@media (max-width: 576px){
  .container.legal{ padding: 1rem 0.75rem; }
}

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

/* Titre principal */
.container.legal h1{
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  line-height: 1.15;
  margin: 0 0 0.9rem 0;

  /* Rouge comme sur ordinateur */
  color: #dc3545 !important;

  /* Sécurités iPad/Safari : éviter qu'il soit "masqué" */
  display: block;
  position: relative;
  z-index: 1;
}

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

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

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

/* Liens : souvent responsables de débordements */
.container.legal a{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

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

/* 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;
  }
}