/* ============================================================
   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. LES 4 ÉTAPES — TIMELINE VERTICALE NUMÉROTÉE
   Le fond (Part1) reste posé sur la section pleine largeur ;
   la timeline est un conteneur blanc centré au-dessus.
   ============================================================ */
.section-documents {
  width        : 100%;
  background   : url('../Image/Fond/Inscription_Part1.png') center / cover no-repeat;
  padding      : var(--espace-xl) 0;
  margin-bottom: var(--espace-xl);
}

.timeline {
  max-width : 860px;
  margin    : 0 auto;
  padding   : var(--espace-lg) var(--espace-lg) var(--espace-md);
  background : var(--blanc);
  border    : 1px solid var(--gris-bordure);
  box-shadow : var(--ombre-carte);
}

.timeline-titre {
  font-family   : var(--font-sous-titre);
  font-size     : var(--taille-h3);
  font-weight   : 700;
  color         : var(--bleu-titre);
  text-align    : center;
  margin-bottom : var(--espace-lg);
}

/* --- Liste des étapes : rail vertical continu --- */
.etapes {
  list-style: none;
  margin    : 0;
  padding   : 0;
}

.etape {
  position: relative;
  display : grid;
  grid-template-columns: 48px 1fr;
  gap     : var(--espace-md);
  padding-bottom: var(--espace-lg);
}

/* Le trait vertical reliant les pastilles : dessiné sur le rail,
   depuis le centre de la pastille jusqu'en bas de l'étape. */
.etape-rail {
  position       : relative;
  display        : flex;
  justify-content: center;
}

.etape-rail::before {
  content   : '';
  position  : absolute;
  top       : 44px;
  bottom    : calc(-1 * var(--espace-lg));
  width     : 2px;
  background: var(--gris-bordure);
}

.etape--last .etape-rail::before {
  display: none;
}

.etape-num {
  position       : relative;
  z-index        : 1;
  width          : 44px;
  height         : 44px;
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--bleu-titre);
  color          : var(--blanc);
  font-family    : var(--font-sous-titre);
  font-size      : 20px;
  font-weight    : 700;
  border-radius  : 50%;
}

.etape-corps {
  min-width: 0;
  padding-top: 6px;
}

.etape-titre {
  display     : flex;
  align-items : center;
  gap         : var(--espace-xs);
  font-family : var(--font-sous-titre);
  font-size   : var(--taille-h3);
  font-weight : 700;
  color       : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
}

.etape-ico svg {
  width      : 22px;
  height     : 22px;
  display    : block;
  color      : var(--bleu-bouton);
  flex-shrink: 0;
}

.etape-texte {
  font-family: var(--font-texte);
  font-size  : var(--taille-texte);
  color      : var(--noir-texte);
  line-height: 1.7;
}

.etape-texte a,
.medic-regle a,
.medic-note a {
  color          : var(--bleu-bouton);
  font-weight    : 700;
  text-decoration: underline;
  word-break     : break-word;
}

.etape-texte a:hover,
.medic-regle a:hover,
.medic-note a:hover {
  color: var(--bleu-bouton-hover);
}

/* --- Étape médicale : sous-cartes colorées par profil --- */
.medic-cas {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--espace-sm);
  margin-bottom        : var(--espace-sm);
}

.medic-carte {
  padding      : var(--espace-sm) var(--espace-md);
  border-left  : 4px solid var(--gris-bordure);
  background   : var(--gris-clair);
}

.medic-profil {
  font-family   : var(--font-sous-titre);
  font-size     : var(--taille-petit);
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom : 4px;
}

.medic-regle {
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  color      : var(--noir-texte);
  line-height: 1.6;
}

/* Couleurs par tranche : bleu (mineurs), vert (majeurs -65),
   ambre (65 et +), rouge (symptômes). */
.medic-carte--mineur   { background:#e8f1fb; border-left-color:#2563eb; }
.medic-carte--mineur   .medic-profil { color:#1e40af; }
.medic-carte--majeur   { background:#e9f6ec; border-left-color:#2f9e44; }
.medic-carte--majeur   .medic-profil { color:#217a35; }
.medic-carte--senior   { background:#fdf3e3; border-left-color:#d9820a; }
.medic-carte--senior   .medic-profil { color:#a5620a; }
.medic-carte--symptome { background:#fdeaea; border-left-color:#c0202c; }
.medic-carte--symptome .medic-profil { color:#c0202c; }
.medic-carte--autre    { background:var(--gris-clair); border-left-color:var(--gris-texte); }
.medic-carte--autre    .medic-profil { color:var(--gris-texte); }

/* Encart PPS : note explicative détachée des 4 cas. */
.medic-note {
  margin-top : var(--espace-sm);
  padding    : var(--espace-sm) var(--espace-md);
  background  : #fff;
  border     : 1px dashed var(--bleu-nav-clair);
  border-left: 4px solid var(--bleu-titre);
  font-family: var(--font-texte);
  font-size  : var(--taille-petit);
  color      : var(--noir-texte);
  line-height: 1.7;
}

.medic-note strong,
.etape-texte strong,
.medic-regle strong {
  color: var(--bleu-titre);
}

/* --- Bouton CTA « S'inscrire en ligne », placé APRÈS la note finale --- */
.timeline-cta {
  text-align : center;
  margin-top : var(--espace-lg);
}

.btn-cta-inscription {
  display        : inline-flex;
  align-items    : center;
  gap            : var(--espace-xs);
  padding        : 16px 40px;
  background     : var(--bleu-bouton);
  color          : var(--blanc);
  font-family    : var(--font-sous-titre);
  font-weight    : 700;
  font-size      : var(--taille-texte);
  letter-spacing : 0.5px;
  text-transform : uppercase;
  text-decoration: none;
  border         : 2px solid var(--bleu-bouton);
  transition     : background var(--transition), border-color var(--transition), transform var(--transition);
}

.btn-cta-inscription svg {
  width : 20px;
  height: 20px;
  transition: transform var(--transition);
}

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

.btn-cta-inscription:hover svg {
  transform: translateX(4px);
}

/* Note finale sous la timeline (« Votre inscription ne sera effective… ») */
.documents-note {
  max-width  : 860px;
  margin     : var(--espace-lg) auto 0;
  padding    : 0 var(--espace-sm);
  font-family: var(--font-sous-titre);
  font-size  : var(--taille-h3);
  font-weight: 700;
  color      : var(--bleu-titre);
  text-align : center;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   TIMELINE HORIZONTALE — desktop (≥ 981px)
   Disposition en 2 colonnes :
     ┌─────────────┬─────────────┐
     │ 1 Profil    │ 2 Formule   │
     ├─────────────┴─────────────┤
     │ 3 Déclaration médicale     │  (pleine largeur)
     │   mineurs | majeurs | 65+  │
     │   symptômes (pleine largeur)│
     │   encart PPS                │
     ├───────────────────────────┤
     │ 4 Paiement                 │  (pleine largeur)
     └───────────────────────────┘
   Les étapes courtes (1,2) se répartissent en haut ; l'étape
   médicale (3e enfant) et le paiement s'étalent sur toute la
   largeur. Le rail vertical mobile est neutralisé.
   ------------------------------------------------------------ */
@media (min-width: 981px) {

  .timeline {
    max-width: var(--largeur-max);
    padding  : var(--espace-lg) var(--espace-xl) var(--espace-lg);
  }

  /* Les étapes se répartissent sur 2 colonnes. */
  .etapes {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : var(--espace-lg) var(--espace-xl);
    align-items          : start;
  }

  /* L'étape médicale (3e) et le paiement (4e) prennent toute la largeur. */
  .etape:nth-child(3),
  .etape:nth-child(4) {
    grid-column: 1 / -1;
  }

  /* Chaque étape garde sa pastille à gauche (grille 44px + contenu),
     mais sans le trait vertical mobile : les étapes sont juxtaposées,
     pas empilées, donc le rail n'a pas lieu d'être. */
  .etape {
    padding-bottom: 0;
  }

  .etape-rail::before {
    display: none;
  }

  /* Les 3 cas d'âge côte à côte ; le cas symptômes passe en dessous
     sur toute la largeur. */
  .medic-cas {
    grid-template-columns: repeat(3, 1fr);
  }

  .medic-carte--symptome {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   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) {

  .timeline {
    padding: var(--espace-md) var(--espace-sm) var(--espace-sm);
  }

  /* Rail plus compact : pastille 36px, colonne réduite. */
  .etape {
    grid-template-columns: 36px 1fr;
    gap: var(--espace-sm);
  }

  .etape-num {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .etape-rail::before {
    top: 38px;
  }

  /* Sous-cartes médicales empilées sur mobile. */
  .medic-cas {
    grid-template-columns: 1fr;
  }

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

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

  .section-documents {
    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 */
  }
}