/* Mentions légales — styles spécifiques à la page
   Cette feuille n'affecte QUE cette page (elle est chargée localement). */

/* 1) Réglages de page : annule le centrage global défini dans styles.css pour .page */
.page {
    text-align: left;                 /* Ramène l'alignement à gauche pour tous les blocs */
    padding-top: 4.5rem;              /* Garde l'espace sous la nav fixe (60px) */
  }
  
  /* 2) Conteneur et largeur de lecture confortable */
  .page,
  .section {
    max-width: 70rem;                 /* Largeur maxi globale */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .section > p {
    max-width: 72ch;                  /* Longueur de ligne lisible */
    margin-left: 0;                   /* Aligne à gauche le bloc de paragraphe */
    margin-right: auto;
    line-height: 1.7;
  }
  
  /* 3) Titres */
  h1 {
    /* h1 reste centré via styles.css ; on harmonise la marge ici */
    margin-top: 2rem;
    margin-bottom: 1.25rem;
  }
  
  /* h2 clairement à gauche, avec un repère visuel léger */
  .section > h2 {
    text-align: left !important;      /* Prioritaire sur les règles globales */
    margin: 0 0 .75rem 0;
    font-size: clamp(1.15rem, 2.1vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
    max-width: none;                  /* Laisse le titre occuper la largeur utile */
    position: relative;
  }
  
  /* Soulignement discret du h2 (accroche visuelle) */
  .section > h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: .35rem;
    background: rgba(255,255,255,.35);
  }
  
  /* 4) Paragraphes & texte
     - Par défaut, styles.css applique "justify" au site -> utile pour une page légale.
     - On ajuste juste les espacements. */
  .section p {
    margin: 0 0 0.9rem 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  
  /* 5) Liens d’action (.hlink) — visibles et accessibles sur fond sombre */
  .hlink,
  a.hlink {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    color: #fff;
  }
  .hlink:hover,
  a.hlink:hover {
    text-decoration-thickness: 2px;
    opacity: .95;
  }
  
  /* 6) Listes (au cas où) */
  .section ul,
  .section ol {
    padding-left: 1.1rem;
    margin: 0 0 .9rem 0;
  }
  .section li {
    margin: .25rem 0;
  }
  
  /* 7) Blocs multi-lignes avec <br> — garde une bonne lisibilité */
  .section p br {
    line-height: 1.6;
  }
  
  /* 8) Accessibilité & petits écrans */
  @media (max-width: 768px) {
    .section {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .section > h2::after { width: 44px; }
  }
  
  /* 9) Impression (optionnel : lisibilité noire sur blanc) */
  @media print {
    body { background: #fff !important; color: #000 !important; }
    .nav, footer { display: none !important; }
    .section > h2::after { background: #000; }
  }
  
  /* 10) Sécurité scroll (si une règle héritée bloquait le défilement) */
  html, body {
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }