/* ============================================================
   reglement.css — Règlement intérieur CTT Brunoy v2
   ============================================================ */


/* ============================================================
   0. FOND DE PAGE (vagues, identique à creneaux / boutique)
   ============================================================ */
.page-wrapper.page-reglement {
  background-image  : url('../Image/Fond/Reglement.png');
  background-repeat  : no-repeat;
  background-size    : cover;
  background-position: top center;
}


/* ============================================================
   1. INTRODUCTION (même format que creneaux.css)
   ============================================================ */
.reg-hero {
  padding: 0;
}

.reg-hero-inner {
  margin       : 0 auto;
  padding      : var(--espace-xl) var(--espace-sm) var(--espace-lg);
  text-align   : center;
  display      : flex;
  flex-direction: column;
  align-items  : center;
  gap          : var(--espace-sm);
}

/* .reg-hero-titre et .reg-hero-titre::after : voir global.css §10 (composants partagés) */

.reg-hero-intro {
  font-family: var(--font-texte);
  font-size  : var(--taille-texte);
  color      : var(--gris-texte);
  line-height: 1.7;
  letter-spacing: normal;
}

.reg-btn-pdf {
  display    : inline-flex;
  align-items: center;
  gap        : 10px;
  margin-top : var(--espace-xs);
  padding    : 12px 26px;
  border-radius: 999px;
  background : var(--bleu-bouton);
  color      : var(--blanc);
  font-family: var(--font-sous-titre);
  font-weight: 600;
  font-size  : var(--taille-petit);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow : 0 6px 16px rgba(37, 99, 235, 0.22);
  transition : transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.reg-btn-pdf:hover {
  background: var(--bleu-bouton-hover);
  transform : translateY(-2px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
}

.reg-btn-pdf-icone {
  font-size  : 1.1em;
  line-height: 1;
}


/* ============================================================
   2. CORPS : grille sommaire + sections (desktop)
   ============================================================ */
.reg-corps {
  display              : grid;
  grid-template-columns: 260px 1fr;
  gap                  : var(--espace-xl);
  align-items          : start;
  padding              : var(--espace-xl) 0 var(--espace-xl);
}


/* ============================================================
   3. SOMMAIRE DESKTOP (sticky, rail de progression)
   ============================================================ */
.reg-sommaire {
  position  : sticky;
  top       : var(--espace-lg);
  align-self: start;
}

.reg-sommaire-label {
  font-family   : var(--font-sous-titre);
  font-weight   : 600;
  font-size     : var(--taille-petit);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : var(--gris-texte);
  margin-bottom : var(--espace-sm);
}

.reg-sommaire-liste {
  position    : relative;
  display     : flex;
  flex-direction: column;
  gap         : 4px;
  padding-left: 18px;
  border-left : 2px solid var(--gris-bordure);
}

.reg-sommaire-lien {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 8px 10px;
  border-radius: var(--rayon-sm);
  font-family: var(--font-sous-titre);
  font-size  : var(--taille-petit);
  color      : var(--gris-texte);
  transition : color var(--transition), background var(--transition);
}

.reg-sommaire-puce {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--gris-bordure);
  flex-shrink  : 0;
  margin-left  : -23px;
  transition   : background var(--transition), box-shadow var(--transition);
}

.reg-sommaire-lien:hover {
  color     : var(--bleu-titre);
  background: var(--gris-clair);
}

.reg-sommaire-lien.actif {
  color      : var(--bleu-titre);
  font-weight: 600;
}

.reg-sommaire-lien.actif .reg-sommaire-puce {
  background: var(--bleu-bouton);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}


/* ============================================================
   4. SECTIONS — cartes (texte toujours visible)
   ============================================================ */
.reg-sections {
  display       : flex;
  flex-direction: column;
  gap           : var(--espace-md);
  min-width     : 0;        /* évite le débordement dans le grid */
  width         : 100%;
}

.reg-carte {
  width          : 100%;
  min-width      : 0;       /* critique : empêche les cartes de dépasser */
  box-sizing     : border-box;
  background     : var(--blanc);
  border         : 1px solid var(--gris-bordure);
  border-radius  : var(--rayon-md);
  padding        : var(--espace-md) var(--espace-lg);
  box-shadow     : var(--ombre-carte);
  scroll-margin-top: var(--espace-lg);
  overflow       : hidden;  /* rien ne déborde de la carte */
}

.reg-carte-titre {
  display    : flex;
  align-items: center;
  gap        : 12px;
  font-family: var(--font-section);
  font-weight: 700;
  font-size  : var(--taille-h3);
  color      : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
  /* le titre lui-même peut wrapper sur plusieurs lignes */
  flex-wrap  : wrap;
}

.reg-carte-icone {
  font-size  : 1.1em;
  line-height: 1;
  flex-shrink: 0;
}

.reg-carte-texte {
  font-family: var(--font-texte);
  font-size  : var(--taille-texte);
  line-height: 1.8;
  color      : var(--noir-texte);
  margin-bottom: var(--espace-xs);
  /* force le retour à la ligne dans la carte */
  word-break : break-word;
  overflow-wrap: break-word;
}

.reg-carte-texte:last-child {
  margin-bottom: 0;
}


/* ============================================================
   5. COMBOBOX MOBILE (injectée par JS dans .reg-sommaire)
   Masquée par défaut, visible uniquement sur mobile.
   ============================================================ */
.reg-combobox {
  display: none;
}

/* ============================================================
   6. RESPONSIVE — Tablette / Mobile (< 900px)
   ============================================================ */
@media (max-width: 900px) {

  /* La grille laisse place à un empilement bloc */
  .reg-corps {
    display: block;
    padding: 0 0 var(--espace-xl);
  }

  /* Sommaire : sticky en haut, centré */
  .reg-sommaire {
    position       : sticky;
    top            : 0;
    z-index        : 30;
    align-self     : auto;
    display        : flex;
    justify-content: center;
    padding        : var(--espace-md) 0 var(--espace-sm);
    background     : var(--blanc);
    border-bottom  : 1px solid var(--gris-bordure);
    box-shadow     : 0 2px 6px rgba(0,0,0,0.06);
  }

  /* Liste de liens desktop : masquée */
  .reg-sommaire-label,
  .reg-sommaire-liste { display: none; }

  /* Combobox : visible et centré */
  .reg-combobox {
    display            : block;
    width              : 100%;
    max-width          : 360px;
    padding            : 10px 40px 10px 16px;
    border             : 2px solid var(--bleu-nav-clair);
    border-radius      : var(--rayon-md);
    background-color   : var(--blanc);
    color              : var(--bleu-titre);
    font-family        : var(--font-sous-titre);
    font-weight        : 600;
    font-size          : 15px;
    cursor             : pointer;
    appearance         : none;
    -webkit-appearance : none;
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235784ae' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 12px center;
    box-shadow         : 0 2px 8px rgba(3, 44, 100, 0.08);
    transition         : border-color var(--transition), box-shadow var(--transition);
  }

  .reg-combobox:focus {
    outline     : none;
    border-color: var(--bleu-bouton);
    box-shadow  : 0 0 0 3px rgba(37, 99, 235, 0.18);
  }

  /* Sections */
  .reg-sections {
    margin-top: var(--espace-sm);
    gap       : var(--espace-sm);
  }

  .reg-carte {
    padding      : var(--espace-md);
    border-radius: var(--rayon-sm);
  }

  /* Intro */
  .reg-hero-inner {
    max-width: 90%;
    padding  : var(--espace-lg) var(--espace-xs) var(--espace-md);
  }
}


/* ============================================================
   6. RESPONSIVE — Mobile (< 520px)
   ============================================================ */
@media (max-width: 520px) {

  .reg-hero-inner {
    max-width: 100%;
    padding  : var(--espace-md) 0 var(--espace-sm);
  }

  .reg-hero-intro { font-size: 14px; }

  .reg-btn-pdf {
    padding  : 10px 18px;
    font-size: 12px;
  }

  .reg-sommaire {
    padding: 8px 5vw;
  }

  .reg-sommaire-lien {
    padding  : 5px 12px;
    font-size: 12px;
  }

  .reg-carte {
    padding: 14px 14px;
  }

  .reg-carte-titre {
    font-size: 1.05rem;
    gap      : 8px;
  }

  .reg-carte-texte {
    font-size  : 14px;
    line-height: 1.65;
  }
}


/* ============================================================
   7. RESPONSIVE — Plancher 375px (iPhone SE, petits Android)
   ============================================================ */
@media (max-width: 375px) {

  .reg-hero-inner { padding: var(--espace-sm) 0; }

  .reg-sommaire-lien {
    padding  : 4px 10px;
    font-size: 11px;
  }

  .reg-carte { padding: 12px 10px; }

  .reg-carte-titre { font-size: 0.95rem; }

  .reg-carte-texte { font-size: 13px; }
}


/* Réduction des animations */
@media (prefers-reduced-motion: reduce) {
  .reg-btn-pdf,
  .reg-sommaire-lien { transition: none; }
}

/* ============================================================
   PIED DE RÈGLEMENT : date de modification + changelog
   ============================================================ */
.reg-pied {
  margin-top   : var(--espace-lg);
  padding      : var(--espace-md) var(--espace-lg);
  border-top   : 2px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  background   : var(--gris-clair);
  display      : flex;
  flex-direction: column;
  gap          : var(--espace-sm);
  margin-bottom: var(--espace-xl);
}

.reg-pied-date {
  display    : flex;
  align-items: center;
  gap        : 8px;
  font-family: var(--font-sous-titre);
  font-size  : var(--taille-petit);
  color      : var(--gris-texte);
  line-height: 1;
}

.reg-pied-date-icone { font-size: 1rem; }

.reg-pied-date strong {
  color      : var(--bleu-titre);
  font-weight: 700;
}

/* Bouton "Voir les modifications" */
.reg-changelog-btn {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  font-family: var(--font-sous-titre);
  font-size  : var(--taille-petit);
  font-weight: 600;
  color      : var(--bleu-bouton);
  background : none;
  border     : none;
  padding    : 0;
  cursor     : pointer;
  transition : color var(--transition);
}

.reg-changelog-btn:hover { color: var(--bleu-bouton-hover); }

.reg-changelog-chevron {
  display   : inline-block;
  transition: transform var(--transition);
  font-style: normal;
}

.reg-changelog-btn[aria-expanded="true"] .reg-changelog-chevron {
  transform: rotate(180deg);
}

/* Contenu déroulant */
.reg-changelog-contenu {
  margin-top: var(--espace-xs);
}

.reg-changelog-contenu[hidden] { display: none; }

.reg-changelog-liste {
  list-style    : none;
  padding-left  : 0;
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}

.reg-changelog-liste li {
  display    : flex;
  align-items: baseline;
  gap        : 8px;
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  color      : var(--noir-texte);
  line-height: 1.5;
}

.reg-changelog-liste li::before {
  content    : "•";
  color      : var(--bleu-bouton);
  font-weight: 700;
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 520px) {
  .reg-pied { padding: var(--espace-sm); }
}

/* ============================================================
   DIFF DANS LE CHANGELOG (del = supprimé, ins = ajouté)
   ============================================================ */
.reg-changelog-contenu del {
  text-decoration: line-through;
  color           : var(--rouge-erreur);
  background      : #fee2e2;
  padding         : 0 2px;
  border-radius   : 2px;
}

.reg-changelog-contenu ins {
  text-decoration: none;
  color           : var(--vert-succes);
  background      : #d1fae5;
  padding         : 0 2px;
  border-radius   : 2px;
}