/* ============================================================
   inscription.css — Page Inscription CTT Brunoy v2
   Design cohérent avec le reste du site : pas de bords arrondis,
   carte "Modalités de paiement" alignée à droite du tableau de
   tarifs sur desktop, empilée sur mobile.

   IMPORTANT : ce fichier ne touche JAMAIS à .page-wrapper ni à
   aucune classe utilisée par nav.php / footer.php. Tous les fonds
   d'image sont appliqués sur des conteneurs propres à cette page
   (préfixe .inscription-*), jamais sur des classes partagées.

   Dossier des fonds : metadonnee/Image/Fond/

   Breakpoint mobile unique : 800px (aligné sur nav.css / accueil.css)
   ============================================================ */

/* ============================================================
   0. (Fond général de page supprimé — géré section par section)
   ============================================================ */

/* ============================================================
   1. INTRODUCTION
   ============================================================ */
/* .inscription-intro, .inscription-titre, .inscription-titre::after et .inscription-texte : voir global.css §10 */

/* ============================================================
   2. TITRES DE SECTION (rouge, comme l'existant)
   ============================================================ */
.inscription-soustitre-section {
  font-family   : var(--font-sous-titre);
  font-size     : var(--taille-h2);
  color         : #c0202c;
  text-align    : center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom : var(--espace-lg);
}

/* ============================================================
   3. DOCUMENTS À FOURNIR
   Le fond (Part1) est posé sur la section PLEINE LARGEUR.
   Le contenu (grille des cartes) reste dans un conteneur centré
   indépendant, donc le fond couvre toute la largeur même si le
   contenu est plus étroit.

   Le nombre de colonnes desktop est fixé en inline par le PHP
   (repeat(N, 1fr)) ; la media query mobile ci-dessous le surcharge
   avec !important pour rester prioritaire.
   ============================================================ */
.section-documents {
  width     : 100%;
  background: url('../Image/Fond/Inscription_Part1.png') center / cover no-repeat;
  padding   : var(--espace-lg) 0;
  margin-bottom: var(--espace-xl);
}

.documents-grille {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--espace-lg);
  max-width            : var(--largeur-max);
  margin               : 0 auto;
  padding              : 0 var(--espace-sm);
}

.document-carte {
  background   : var(--blanc);
  border       : 1px solid var(--gris-bordure);
  border-radius: 0;
  box-shadow   : var(--ombre-carte);
  padding      : var(--espace-md) var(--espace-lg);
}

.document-carte h3 {
  font-family  : var(--font-sous-titre);
  font-size    : var(--taille-h3);
  color        : var(--bleu-titre);
  text-align   : center;
  margin-bottom: var(--espace-md);
}

.document-ligne {
  display      : flex;
  align-items  : flex-start;
  gap          : var(--espace-xs);
  margin-top   : var(--espace-sm);
  margin-bottom: var(--espace-xs);
  font-family  : var(--font-texte);
  font-size    : var(--taille-texte);
  color        : var(--noir-texte);
}

.document-ligne svg {
  flex-shrink : 0;
  width       : 20px;
  height      : 20px;
  margin-top  : 2px;
  color       : var(--bleu-bouton);
}

.document-sous-bloc {
  background    : var(--gris-clair);
  border-left   : 3px solid var(--bleu-bouton);
  border-radius : 0;
  padding       : var(--espace-sm) var(--espace-md);
  margin-top    : var(--espace-sm);
  font-family   : var(--font-texte);
  font-size     : var(--taille-petit);
  color         : var(--noir-texte);
  line-height   : 1.6;
}

.document-sous-bloc strong {
  color: var(--bleu-titre);
}

.document-sous-bloc + .document-sous-bloc {
  margin-top: var(--espace-sm);
}

/* ============================================================
   4. INSCRIPTION EN LIGNE
   Même logique : fond (Part2) sur la section pleine largeur,
   contenu texte centré à 76% à l'intérieur (92% sur mobile).
   ============================================================ */
.section-inscription-en-ligne {
  width     : 100%;
  background-image: url('../Image/Fond/Inscription_Part2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  padding   : var(--espace-lg) 0;
  margin-bottom: var(--espace-xl);
}

.section-inscription-en-ligne .inscription-soustitre-section {
  margin-bottom: var(--espace-lg);
}

.inscription-en-ligne {
  max-width  : 76%;
  margin     : 0 auto;
  padding    : var(--espace-lg) var(--espace-sm);
  text-align : center;
}

.inscription-en-ligne p {
  font-family  : var(--font-texte);
  font-size    : var(--taille-texte);
  color        : var(--gris-texte);
  line-height  : 1.7;
  margin-bottom: var(--espace-md);
}

.inscription-boutons {
  display        : flex;
  justify-content: center;
  gap            : var(--espace-md);
  flex-wrap      : wrap;
  margin-top     : var(--espace-lg);
}

.btn-inscription {
  display        : inline-block;
  padding        : 14px 32px;
  font-family    : var(--font-sous-titre);
  font-weight    : 700;
  font-size      : var(--taille-petit);
  letter-spacing : 0.5px;
  text-transform : uppercase;
  text-decoration: none;
  border-radius  : 0;
  transition     : background var(--transition), color var(--transition);
}

.btn-inscription-plein {
  background: var(--bleu-bouton);
  color     : var(--blanc);
  border    : 1px solid var(--bleu-bouton);
}

.btn-inscription-plein:hover {
  background: var(--bleu-bouton-hover);
  border-color: var(--bleu-bouton-hover);
}

.btn-inscription-outline {
  background: transparent;
  color     : var(--bleu-titre);
  border    : 1px solid var(--bleu-titre);
}

.btn-inscription-outline:hover {
  background: var(--bleu-titre);
  color     : var(--blanc);
}

/* ============================================================
   5. TARIFS + MODALITÉS DE PAIEMENT
   ============================================================ */
.section-tarifs {
  display              : grid;
  grid-template-columns: 2fr 1fr;
  gap                  : var(--espace-xl);
  align-items          : center;
  width                : 100%;
  margin               : 0 auto var(--espace-xl);
  padding              : var(--espace-sm) var(--espace-lg);
  justify-items        : stretch;
}

/* --- Bloc tableau --- */
.tarifs-bloc {
  min-width: 0; /* empêche le contenu (tableau) de forcer l'élargissement de toute la grille/page */
}

.tarifs-bloc h2 {
  font-family   : var(--font-sous-titre);
  font-size     : var(--taille-h3);
  color         : #c0202c;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom : var(--espace-sm);
}

/* Le tableau peut être plus large que l'écran sur mobile : on
   l'enveloppe dans un conteneur scrollable plutôt que de tasser
   le texte. Le scroll horizontal n'apparaît que si nécessaire. */
.tarifs-tableau-scroll {
  width       : 100%;
  overflow-x  : auto;
  -webkit-overflow-scrolling: touch;
}

.table-tarifs {
  width          : 100%;
  border-collapse: collapse;
  background     : var(--blanc);
  box-shadow     : var(--ombre-carte);
}

.table-tarifs thead th {
  background  : var(--bleu-titre);
  color       : var(--blanc);
  font-family : var(--font-sous-titre);
  font-weight : 700;
  font-size   : var(--taille-texte);
  text-align  : left;
  padding     : 18px var(--espace-lg);
}

.table-tarifs tbody td {
  font-family: var(--font-texte);
  font-size  : var(--taille-texte);
  color      : var(--noir-texte);
  padding    : 16px var(--espace-lg);
  border-bottom: 1px solid var(--gris-bordure);
}

.table-tarifs tbody tr:nth-child(even) {
  background: var(--gris-clair);
}

.table-tarifs td.montant {
  text-align : right;
  font-weight: 600;
  white-space: nowrap;
}

.table-tarifs th.col-categorie,
.table-tarifs td.col-categorie {
  width      : 130px;
  text-align : center;
}

.cellule-categorie {
  width         : 130px;
  text-align    : center;
  vertical-align: middle;
  font-family   : var(--font-sous-titre);
  font-size     : var(--taille-petit);
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right  : 1px solid var(--gris-bordure);
}

.cellule-categorie.badge-jeune {
  background: #e3f0fc;
  color     : var(--bleu-titre);
}

.cellule-categorie.badge-adulte {
  background: #fdeaea;
  color     : #c0202c;
}

.cellule-categorie.badge-autre {
  background: var(--gris-clair);
  color     : var(--gris-texte);
}

.tarifs-criterium {
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  color      : var(--noir-texte);
  text-align : center;
  margin-top : var(--espace-md);
}

/* --- Carte modalités de paiement --- */
.carte-paiement {
  min-width: 0;
  background-color: var(--violet-footer, #3d2b6b);
  border-radius: 0;
  min-height   : 420px;
  padding      : var(--espace-lg) var(--espace-md);
  color        : var(--blanc);
  display      : flex;
  flex-direction: column;
  justify-content: space-between;
  gap          : var(--espace-md);
}

.carte-paiement-texte {
  display      : flex;
  flex-direction: column;
  gap          : var(--espace-sm);
}

.carte-paiement h2 {
  font-family   : var(--font-sous-titre);
  font-size     : var(--taille-h3);
  color         : var(--blanc);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align    : center;
}

.carte-paiement p {
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  line-height: 1.7;
  text-align : center;
  color      : rgba(255,255,255,0.9);
}

.carte-paiement-bouton {
  text-align: center;
}

.carte-paiement .btn-paiement {
  display        : inline-block;
  padding        : 12px 24px;
  background     : var(--blanc);
  color          : var(--violet-footer, #3d2b6b);
  font-family    : var(--font-sous-titre);
  font-weight    : 700;
  font-size      : var(--taille-petit);
  letter-spacing : 0.5px;
  text-transform : uppercase;
  text-decoration: none;
  border-radius  : 0;
  transition     : background var(--transition), color var(--transition);
}

.carte-paiement .btn-paiement:hover {
  background: var(--bleu-bouton-hover);
  color     : var(--blanc);
}

/* ============================================================
   6. RESPONSIVE — breakpoint unique 800px (aligné sur nav.css)
   ============================================================ */
@media (max-width: 800px) {

  /* Le style inline (grid-template-columns: repeat(N,1fr)) généré
     en PHP est plus spécifique qu'une règle de classe : on doit
     forcer avec !important pour repasser en 1 colonne sur mobile. */
  .documents-grille {
    grid-template-columns: 1fr !important;
  }

  .section-tarifs {
    grid-template-columns: 1fr;
    padding: var(--espace-sm);
  }

  .inscription-intro,
  .inscription-en-ligne {
    max-width: 92%;
  }

  .section-documents,
  .section-inscription-en-ligne {
    background-size: cover;
  }

  .carte-paiement {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .table-tarifs thead th,
  .table-tarifs tbody td {
    padding  : 10px var(--espace-sm);
    font-size: var(--taille-petit);
  }

  .table-tarifs th.col-categorie,
  .table-tarifs td.col-categorie,
  .cellule-categorie {
    width  : 80px;
    padding: 10px 6px;
  }

  .table-tarifs {
    min-width: 360px; /* évite l'écrasement du texte : on préfère le scroll horizontal interne */
  }
}