/*
 * Les écrans de l'adhérent, au « soleil sur l'eau » : connexion, espace
 * inscriptions, les cinq étapes du tunnel, le règlement d'un dossier et le
 * règlement groupé.
 *
 * L'extension apporte leur style complet, aux jetons du contrat ; sa feuille
 * se charge AVANT celle-ci. Ici, le dessin du site :
 * - pas de carte à bordure autour de l'écran : il se pose sur la page, comme
 *   Enfants et ados ou Tarifs ;
 * - sur un écran de dossier, UN en-tête : l'aplat d'eau claire porte le nom de
 *   la personne (le titre de la page, inc/extensions.php) et la frise des
 *   étapes, numérotées dans des disques comme les étapes de l'accueil ;
 * - le jaune = agir : le bouton qui fait avancer est jaune, le retour est au
 *   contour ;
 * - les choix (Oui/Non, créneaux, moyens de paiement, cases à cocher) sont des
 *   tuiles à filet d'eau, pleines quand elles sont retenues.
 *
 * Les sélecteurs sont au moins aussi forts que ceux de l'extension qu'ils
 * remplacent ; l'ordre de chargement fait le reste. Ceux du thème historique
 * (`.page-content form input…`, (0,2,2)) sont battus par `.cnpr-insc` en tête.
 */

/* =========================================================================
   Le cadre : ni carte, ni double titre.
   `main.calendar-page` : les gabarits de page (page.php). La page Tarifs pose
   aussi une racine .cnpr-insc (« Comment se passe une inscription ») dans un
   autre gabarit, qui garde son dessin.
   overflow: visible : la carte de base coupe (overflow: hidden), ce qui
   tuerait le nom d'activité collant de l'étape des créneaux.
   ========================================================================= */
/* Le titre de page garde son aplat d'eau et sa ligne de bouées : l'extension
   les retire (cadre.css), elle dessine pour un thème sans aplat. */
main.layout:has(.cnpr-insc) .calendar-hero {
  margin: 28px 0 28px;
  padding: 40px 44px 46px;
  border-radius: 28px;
  background: var(--cnpr-fond-doux);
}
main.layout:has(.cnpr-insc) .calendar-hero::after { content: ""; }
@media (max-width: 700px) {
  main.layout:has(.cnpr-insc) .calendar-hero { padding: 28px 24px 34px; border-radius: 22px; }
}
main.calendar-page:has(.cnpr-insc, .cnpr-insc-groupe-reglement) .card {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  overflow: visible;
}
main.calendar-page:has(.cnpr-insc, .cnpr-insc-groupe-reglement) .card > .page-content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* Un écran de dossier porte son propre titre (h1, le nom de la personne) : le
   titre de page du thème s'efface. L'espace (en-tête « nu », sans titre) garde
   le sien. */
main.calendar-page:has(.cnpr-insc-head:not(.cnpr-insc-head--bare)) > .calendar-hero { display: none; }

/* =========================================================================
   L'en-tête d'un dossier : l'aplat d'eau claire, le retour, le nom, la frise.
   ========================================================================= */
.cnpr-insc .cnpr-insc-head:not(.cnpr-insc-head--bare) {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  margin: 28px 0 0;
  padding: 34px 44px 8px;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-head:not(.cnpr-insc-head--bare) .card-title {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.1;
  max-width: 20ch;
}
.cnpr-insc .cnpr-insc-head .cnpr-insc-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--soleil-fond);
}
/* La pastille d'état d'un dossier à corriger, posée après le titre. */
.cnpr-insc .cnpr-insc-head .cnpr-insc-derived-label { order: -1; }

/* Un écran de dossier sans frise (dépôt du certificat d'un dossier facturé,
   dossier annulé, correction) : l'aplat se ferme sous le titre, sur la ligne
   de bouées comme un titre de page. */
.cnpr-insc .cnpr-insc-head:not(.cnpr-insc-head--bare):not(:has(+ .cnpr-insc-steps)) {
  position: relative;
  padding-bottom: 46px;
  border-radius: 28px;
  margin-bottom: 36px;
  overflow: hidden;
}
.cnpr-insc .cnpr-insc-head:not(.cnpr-insc-head--bare):not(:has(+ .cnpr-insc-steps))::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--bouees);
}

/* --- La frise des étapes ---------------------------------------------------
   Cinq disques reliés par un filet d'eau : faits (bleu piscine, une coche),
   en cours (le soleil, jaune), à venir (blanc). La ligne de bouées ferme
   l'aplat en dessous, comme sous tout titre de page. */
.cnpr-insc .cnpr-insc-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 40px;
  padding: 22px 44px 40px;
  border-radius: 0 0 28px 28px;
  background: var(--soleil-eau);
  overflow: hidden;
}
.cnpr-insc .cnpr-insc-steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: var(--bouees);
}
.cnpr-insc .cnpr-insc-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--soleil-gris);
}
/* Le disque. */
.cnpr-insc .cnpr-insc-steps li::before {
  content: counter(step);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 50%;
  background: #ffffff;
  font-family: var(--soleil-titre);
  font-size: 17px;
  font-weight: 600;
  color: var(--soleil-gris);
}
/* Le filet qui mène au disque suivant. */
.cnpr-insc .cnpr-insc-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 44px;
  right: 0;
  height: 2px;
  background: var(--soleil-eau-2);
}
.cnpr-insc .cnpr-insc-steps .is-done { background: none; color: var(--soleil-marine); }
.cnpr-insc .cnpr-insc-steps .is-done::before {
  content: "✓";
  border-color: var(--soleil-piscine);
  background: var(--soleil-piscine);
  color: #ffffff;
}
.cnpr-insc .cnpr-insc-steps .is-done::after { background: var(--soleil-piscine); }
.cnpr-insc .cnpr-insc-steps .is-current { background: none; color: var(--soleil-marine); font-weight: 700; }
.cnpr-insc .cnpr-insc-steps .is-current::before {
  border-color: var(--soleil-jaune);
  background: var(--soleil-jaune);
  color: var(--soleil-marine);
}

@media (max-width: 700px) {
  .cnpr-insc .cnpr-insc-head:not(.cnpr-insc-head--bare) { padding: 26px 22px 6px; border-radius: 22px 22px 0 0; margin-top: 18px; }
  .cnpr-insc .cnpr-insc-head:not(.cnpr-insc-head--bare):not(:has(+ .cnpr-insc-steps)) { padding-bottom: 36px; border-radius: 22px; }
  .cnpr-insc .cnpr-insc-steps { padding: 18px 22px 34px; border-radius: 0 0 22px 22px; margin-bottom: 28px; }
  /* Sur téléphone, les disques seuls ; le nom de l'étape en cours reste. */
  .cnpr-insc .cnpr-insc-steps li { font-size: 0; gap: 8px; }
  .cnpr-insc .cnpr-insc-steps li::before { width: 36px; height: 36px; font-size: 15px; }
  .cnpr-insc .cnpr-insc-steps li:not(:last-child)::after { top: 17px; left: 36px; }
  .cnpr-insc .cnpr-insc-steps .is-current { font-size: 14px; white-space: nowrap; }
}

/* =========================================================================
   Le corps d'une étape.
   ========================================================================= */
.cnpr-insc > .card-title,
.cnpr-insc .cnpr-insc-form > .card-title {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 32px);
}
.cnpr-insc > .card-title + p,
.cnpr-insc .cnpr-insc-step-intro {
  max-width: 68ch;
  margin: 0 0 28px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--soleil-gris);
}

/* --- Les boutons ------------------------------------------------------------
   Le jaune fait avancer ; « Précédent » et les retours sont au contour.
   (0,3,0) : ceux de l'extension, à égalité, chargés avant. */
.cnpr-insc .cnpr-insc-actions {
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 2px solid var(--soleil-eau-2);
}
.cnpr-insc .cnpr-insc-actions .btn { min-height: 52px; padding: 13px 26px; font-size: 16px; }
.cnpr-insc .cnpr-insc-actions .btn-primary,
.cnpr-insc .cnpr-insc-form .btn-primary,
.cnpr-insc .btn-primary {
  background: var(--soleil-jaune);
  border: 2px solid var(--soleil-jaune);
  color: var(--soleil-marine);
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-actions .btn-primary:hover,
.cnpr-insc .cnpr-insc-form .btn-primary:hover,
.cnpr-insc .btn-primary:hover {
  background: var(--soleil-jaune-fonce);
  border-color: var(--soleil-jaune-fonce);
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-actions .btn-secondary,
.cnpr-insc .btn-secondary {
  background: #ffffff;
  border: 2px solid var(--soleil-marine);
  color: var(--soleil-marine);
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-actions .btn-secondary:hover,
.cnpr-insc .btn-secondary:hover { background: var(--soleil-marine); color: #ffffff; }
/* Un bouton pas encore permis : l'eau claire, pas un jaune délavé. */
.cnpr-insc .cnpr-insc-actions .btn:disabled,
.cnpr-insc .cnpr-insc-actions .btn.is-disabled,
.cnpr-insc .btn-primary:disabled,
.cnpr-insc .btn-primary.is-disabled {
  opacity: 1;
  background: var(--soleil-eau-2);
  border-color: var(--soleil-eau-2);
  color: var(--soleil-gris);
}

/* --- Les champs -------------------------------------------------------------
   Une seule hauteur (48 px), un filet d'eau de 2 px, le bleu piscine au focus.
   `.cnpr-insc` en tête : bat `.page-content form input[type=…]` (0,2,2). */
.cnpr-insc .cnpr-insc-form input[type="text"],
.cnpr-insc .cnpr-insc-form input[type="email"],
.cnpr-insc .cnpr-insc-form input[type="tel"],
.cnpr-insc .cnpr-insc-form input[type="number"],
.cnpr-insc .cnpr-insc-form input[type="date"],
.cnpr-insc .cnpr-insc-form select,
.cnpr-insc-groupe-reglement input[type="text"],
.cnpr-insc-groupe-reglement input[type="number"] {
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
  font-family: var(--soleil-texte);
  font-size: 16px;
  color: var(--soleil-encre);
}
.cnpr-insc .cnpr-insc-form input:focus,
.cnpr-insc .cnpr-insc-form select:focus,
.cnpr-insc-groupe-reglement input:focus {
  outline: none;
  border-color: var(--soleil-piscine);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--soleil-piscine) 22%, transparent);
}
.cnpr-insc .cnpr-insc-form .field > span,
.cnpr-insc .cnpr-insc-form .field > legend,
.cnpr-insc .cnpr-insc-dob__case > span {
  font-size: 14px;
  font-weight: 700;
  color: var(--soleil-encre);
}
/* Les cases et boutons radio du navigateur prennent la couleur du club et
   grandissent un peu : on vise au pouce. */
.cnpr-insc input[type="checkbox"],
.cnpr-insc input[type="radio"],
.cnpr-insc-groupe-reglement input[type="checkbox"],
.cnpr-insc-groupe-reglement input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--soleil-marine);
}

/* --- Les messages ----------------------------------------------------------- */
.cnpr-insc .cnpr-insc-notice,
.cnpr-insc-groupe-reglement .cnpr-insc-notice {
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.55;
}
.cnpr-insc .cnpr-insc-notice--info,
.cnpr-insc-groupe-reglement .cnpr-insc-notice--info {
  background: var(--soleil-eau);
  color: var(--soleil-encre);
}

/* =========================================================================
   Étape 1 — le questionnaire de santé : la question à gauche, Oui / Non à
   droite, un filet d'eau entre deux questions.
   ========================================================================= */
.cnpr-insc .cnpr-insc-q--bool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 40px;
  padding: 20px 0;
  border-bottom: 1px solid var(--soleil-eau-2);
}
.cnpr-insc .cnpr-insc-q--bool:last-of-type { border-bottom: 0; }
.cnpr-insc .cnpr-insc-q--bool legend {
  float: left;
  width: 100%;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--soleil-encre);
}
/* Oui / Non : deux segments jointifs. La case du navigateur s'efface, la
   tuile entière est la cible ; le focus clavier se voit sur la tuile. */
.cnpr-insc .cnpr-insc-choice { gap: 0; }
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill {
  position: relative;
  justify-content: center;
  min-width: 84px;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  font-size: 16px;
  color: var(--soleil-encre);
}
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill:first-child { border-radius: 999px 0 0 999px; }
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill:last-child { border-radius: 0 999px 999px 0; margin-left: -2px; }
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill:hover { z-index: 1; border-color: var(--soleil-piscine); }
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill:has(input:focus-visible) {
  z-index: 2;
  outline: 3px solid var(--soleil-jaune-fonce);
  outline-offset: 2px;
}
/* « Non » retenu : le marine du club. « Oui » retenu garde l'orangé de
   l'extension : il annonce un certificat à fournir. */
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill--no:has(input:checked) {
  z-index: 1;
  border-color: var(--soleil-marine);
  background: var(--soleil-marine);
  color: #ffffff;
}
.cnpr-insc .cnpr-insc-choice .cnpr-insc-pill--yes:has(input:checked) {
  z-index: 1;
  border-color: var(--cnpr-insc-alerte-vif);
  background: var(--cnpr-insc-alerte-fond);
  color: var(--cnpr-insc-alerte);
}
@media (max-width: 700px) {
  .cnpr-insc .cnpr-insc-q--bool { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* =========================================================================
   Étape 3 — le choix des créneaux, au rythme de la page Horaires : le nom de
   l'activité et sa durée à gauche, ses créneaux à droite, un filet d'eau
   entre deux activités.
   ========================================================================= */
.cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  column-gap: 40px;
  align-items: start;
  margin: 0;
  padding: 28px 0;
  border: 0;
  border-top: 2px solid var(--soleil-eau-2);
  border-radius: 0;
  background: none;
}
.cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) > h3.cnpr-insc-conteneur__name {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1.3;
  color: var(--soleil-marine);
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-conteneur__duree::before { content: none; }
.cnpr-insc .cnpr-insc-conteneur__duree {
  display: block;
  margin-top: 6px;
  font-family: var(--soleil-texte);
  font-size: 15px;
  font-weight: 500;
  color: var(--soleil-gris);
}
.cnpr-insc .cnpr-insc-conteneur .cnpr-insc-creneaux { border-top: 0; gap: 14px; }
/* La mention de l'activité (la compétition avec le Clan des Nageurs) : sous
   le nom, dans la colonne de gauche ; les créneaux gardent toute la droite. */
.cnpr-insc .cnpr-insc-conteneur__mention {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--soleil-eau);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) > .cnpr-insc-conteneur__mention { grid-column: 1; }
.cnpr-insc .cnpr-insc-conteneur__mention a { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: var(--soleil-ciel); text-underline-offset: 3px; }
/* Le nom garde sa hauteur : la place que prennent les créneaux va sous la
   mention, pas entre le nom et elle. */
.cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked):has(> .cnpr-insc-conteneur__mention) { grid-template-rows: auto 1fr; }
.cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) > .cnpr-insc-conteneur__mention + .cnpr-insc-creneaux { grid-column: 2; grid-row: 1 / span 2; }
/* Un jour, puis ses créneaux. */
.cnpr-insc .cnpr-insc-creneau-group--row { align-items: flex-start; gap: 16px; padding: 0; border: 0; }
.cnpr-insc .cnpr-insc-creneau-group .cnpr-insc-creneau-group__label,
.cnpr-insc .cnpr-insc-day-col .cnpr-insc-day-col__label {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--soleil-texte);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soleil-gris);
}
.cnpr-insc .cnpr-insc-creneau-group--row .cnpr-insc-creneau-group__label { flex: 0 0 96px; padding-top: 14px; }
/* Des colonnes égales : les heures s'alignent d'un jour à l'autre. */
.cnpr-insc .cnpr-insc-creneau-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 0;
}
.cnpr-insc .cnpr-insc-creneau-group--row .cnpr-insc-creneau-grid { flex: 1 1 auto; }

/* Le créneau : une tuile à filet d'eau ; retenu, il se remplit de marine. */
.cnpr-insc .cnpr-insc-creneau-grid .cnpr-insc-creneau-pill {
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-creneau-grid .cnpr-insc-creneau-pill:hover { border-color: var(--soleil-piscine); box-shadow: none; transform: none; }
.cnpr-insc .cnpr-insc-creneau-pill .cnpr-insc-creneau-pill__slot { font-size: 17px; font-weight: 700; color: var(--soleil-marine); }
.cnpr-insc .cnpr-insc-creneau-pill .cnpr-insc-creneau-pill__meta { font-size: 13px; color: var(--soleil-gris); }
.cnpr-insc .cnpr-insc-creneau-pill .cnpr-insc-creneau-pill__note {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
/* File d'attente : le filet reste plein (le pointillé disait « pas cliquable »),
   l'étiquette dit l'attente. */
.cnpr-insc .cnpr-insc-creneau-grid .cnpr-insc-creneau-pill--full { border-style: solid; }
.cnpr-insc .cnpr-insc-creneau-pill .cnpr-insc-creneau-pill__note--attente { color: var(--cnpr-insc-alerte); }
.cnpr-insc .cnpr-insc-creneau-grid .cnpr-insc-creneau-pill:has(input:checked) {
  border-color: var(--soleil-marine);
  background: var(--soleil-marine);
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__slot,
.cnpr-insc .cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__meta,
.cnpr-insc .cnpr-insc-creneau-pill:has(input:checked) .cnpr-insc-creneau-pill__note--attente { color: #ffffff; }
.cnpr-insc .cnpr-insc-creneau-grid .cnpr-insc-creneau-pill--off {
  border-color: var(--soleil-eau);
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-creneau-pill--off .cnpr-insc-creneau-pill__slot { color: var(--soleil-gris); }

/* Les activités au forfait : une case pour tout, puis les créneaux en lecture. */
.cnpr-insc .cnpr-insc-creneaux .cnpr-insc-creneau {
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 14px;
  box-shadow: none;
  font-size: 16px;
}
.cnpr-insc .cnpr-insc-creneaux .cnpr-insc-creneau:has(input:checked) {
  border-color: var(--soleil-marine);
  background: var(--soleil-eau);
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-day-grid { gap: 14px 10px; padding: 4px 0 0; }
.cnpr-insc .cnpr-insc-slot-pill {
  padding: 8px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--soleil-eau);
  font-size: 15px;
  font-weight: 700;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-slot-pill .cnpr-insc-slot-pill__meta { font-size: 13px; }

/* Les activités d'autres âges, repliées en bas : une liste calme. */
.cnpr-insc .cnpr-insc-picks-locked {
  margin-top: 12px;
  padding-top: 28px;
  border-top: 2px solid var(--soleil-eau-2);
}
.cnpr-insc .cnpr-insc-picks-locked__intro {
  font-family: var(--soleil-texte);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soleil-gris);
}

@media (max-width: 860px) {
  .cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) > .cnpr-insc-conteneur__mention + .cnpr-insc-creneaux { grid-column: 1; grid-row: auto; }
  .cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked) > .cnpr-insc-conteneur__mention { margin-top: 0; }
  .cnpr-insc .cnpr-insc-conteneur:not(.cnpr-insc-conteneur--locked):has(> .cnpr-insc-conteneur__mention) { grid-template-rows: none; }
}
@media (max-width: 560px) {
  .cnpr-insc .cnpr-insc-creneau-group--row { align-items: stretch; gap: 8px; }
  .cnpr-insc .cnpr-insc-creneau-group--row .cnpr-insc-creneau-group__label { flex: none; }
  .cnpr-insc .cnpr-insc-creneau-grid .cnpr-insc-creneau-pill { min-width: 0; }
}

/* =========================================================================
   Étapes 4 et règlement — le récapitulatif : des lignes sur filet, le total
   en titre.
   ========================================================================= */
.cnpr-insc .cnpr-insc-table {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-table td {
  padding: 16px 0;
  border-bottom: 1px solid var(--soleil-eau-2);
  font-size: 17px;
}
.cnpr-insc .cnpr-insc-table .cnpr-insc-supplement td { font-size: 16px; color: var(--soleil-gris); }
.cnpr-insc .cnpr-insc-table .cnpr-insc-total td {
  padding-top: 18px;
  border-top: 2px solid var(--soleil-marine);
  border-bottom: 0;
  background: none;
  font-family: var(--soleil-titre);
  font-size: 22px;
  font-weight: 600;
  color: var(--soleil-marine);
}

/* =========================================================================
   Étape 5 — confirmer : les moyens de paiement en pastilles, le règlement
   intérieur et le droit à l'image en tuiles.
   ========================================================================= */
.cnpr-insc .cnpr-insc-recap-total { font-size: 18px; }
.cnpr-insc .cnpr-insc-payinfo {
  margin: 28px 0 32px;
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-payinfo .cnpr-insc-payinfo__title { margin: 0 0 8px; font-size: 20px; }
.cnpr-insc .cnpr-insc-payinfo__list li {
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-form .cnpr-insc-q:not(.cnpr-insc-q--bool) {
  margin: 0;
  padding: 28px 0;
  border: 0;
  border-top: 2px solid var(--soleil-eau-2);
}
.cnpr-insc .cnpr-insc-form .cnpr-insc-q:not(.cnpr-insc-q--bool) > legend {
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--soleil-titre);
  font-size: 20px;
  font-weight: 600;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-form .cnpr-insc-q:not(.cnpr-insc-q--bool) > legend + * { clear: left; }

/* Une case ou un choix à cocher : une tuile, pleine d'eau claire quand
   elle est retenue. */
.cnpr-insc .cnpr-insc-form .cnpr-insc-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
  padding: 14px 18px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 14px;
  background: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
}
.cnpr-insc .cnpr-insc-form .cnpr-insc-radio:has(input:checked) {
  border-color: var(--soleil-marine);
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-form .cnpr-insc-radio input { flex: none; margin: 2px 0 0; }
/* Droit à l'image : l'extension pose la case AVANT son libellé (sœurs, pas
   parent et enfant). La case flotte et se peint sur le bord gauche de la
   tuile ; le libellé reste un bloc ordinaire (ni flex ni overflow, qui le
   feraient s'écarter du flottant) et garde la place à gauche. */
.cnpr-insc .cnpr-insc-photo input[type="radio"] { float: left; position: relative; margin: 17px 0 0 18px; }
.cnpr-insc .cnpr-insc-photo input[type="radio"] + label {
  display: block;
  overflow: visible;
  margin: 0 0 10px;
  padding: 14px 18px 14px 50px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 14px;
  background: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
}
.cnpr-insc .cnpr-insc-photo input[type="radio"]:checked + label {
  border-color: var(--soleil-marine);
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-photo .cnpr-insc-photo__note { clear: left; }

/* =========================================================================
   Règlement d'un dossier (?regler=1) et règlement groupé.
   ========================================================================= */
.cnpr-insc .cnpr-insc-paymethods > legend,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__title,
.cnpr-insc-groupe-reglement legend {
  font-family: var(--soleil-titre);
  font-size: 20px;
  font-weight: 600;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-paymethod,
.cnpr-insc-groupe-reglement .cnpr-insc-paymethod {
  padding: 14px 18px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
}
.cnpr-insc .cnpr-insc-paymethod:has(input:checked),
.cnpr-insc-groupe-reglement .cnpr-insc-paymethod:has(input:checked) {
  border-color: var(--soleil-marine);
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-paymethod .cnpr-insc-radio,
.cnpr-insc-groupe-reglement .cnpr-insc-paymethod .cnpr-insc-radio {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
}
.cnpr-insc .cnpr-insc-paymethod .cnpr-insc-radio:has(input:checked) { background: none; }
.cnpr-insc .cnpr-insc-paymethod.--blocked { border-color: var(--soleil-eau); background: var(--soleil-eau); }
.cnpr-insc .cnpr-insc-reco-badge {
  border-radius: 999px;
  background: var(--soleil-jaune);
  color: var(--soleil-marine);
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
}
.cnpr-insc .cnpr-insc-repartition {
  border: 0;
  border-radius: 20px;
  background: var(--soleil-eau);
  box-shadow: none;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal .cnpr-insc-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 14px;
  background: #ffffff;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal .cnpr-insc-radio:has(input:checked) {
  border-color: var(--soleil-marine);
  background: var(--soleil-eau);
}
.cnpr-insc-groupe-reglement .btn.btn-primary {
  background: var(--soleil-jaune);
  border: 2px solid var(--soleil-jaune);
  color: var(--soleil-marine);
  box-shadow: none;
}
.cnpr-insc-groupe-reglement .btn.btn-primary:hover { background: var(--soleil-jaune-fonce); border-color: var(--soleil-jaune-fonce); }
.cnpr-insc-groupe-reglement .btn:disabled,
.cnpr-insc-groupe-reglement .btn.is-disabled {
  opacity: 1;
  background: var(--soleil-eau-2);
  border-color: var(--soleil-eau-2);
  color: var(--soleil-gris);
}
/* L'écran prend la largeur de la page, comme le tunnel : sans carte autour,
   la colonne de 680 px de l'extension flottait au milieu (ou à gauche) d'une
   page vide. Les grilles s'élargissent en conséquence ; les textes gardent
   une longueur de ligne lisible. */
.page-content .cnpr-insc-groupe-retour,
.page-content form.cnpr-insc-groupe-reglement,
.page-content .cnpr-insc-groupe-indisponible { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__intro,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints > .cnpr-insc-muted { max-width: 68ch; font-size: 16px; line-height: 1.6; }
/* Trois temps, séparés par le filet d'eau des étapes du tunnel : les
   dossiers, les appoints, le moyen principal. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 2px solid var(--soleil-eau-2);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__title { margin-top: 12px; }
/* Les titres de ces temps sont des <legend> : le navigateur les pose DANS le
   filet du haut, qui les barrait. Flottants, ils redeviennent des titres
   ordinaires, sous le filet. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints > legend,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal > legend {
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints > legend + * { clear: left; }
/* Les trois titres à la même voix, celle des sections du tunnel. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfants__title,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints > legend,
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal > legend {
  font-family: var(--soleil-titre);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--soleil-marine);
}
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-enfant__head { font-size: 17px; }
@media (min-width: 900px) {
  .cnpr-insc-groupe-reglement .cnpr-insc-groupe-appoints .cnpr-insc-groupe-appoints__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 48px; }
  .cnpr-insc-groupe-reglement .cnpr-insc-groupe-principal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Le total, puis le bouton à droite, comme « Soumettre » au bout du tunnel. */
.cnpr-insc-groupe-reglement .cnpr-insc-groupe-total { margin-top: 28px; padding: 20px 24px; border-radius: 20px; }
.cnpr-insc-groupe-reglement .btn.btn-primary {
  display: flex;
  justify-content: center;
  width: auto;
  min-width: 320px;
  min-height: 52px;
  margin: 20px 0 24px auto;
}
@media (max-width: 560px) {
  .cnpr-insc-groupe-reglement .btn.btn-primary { width: 100%; min-width: 0; }
}

/* =========================================================================
   L'espace inscriptions.
   ========================================================================= */
/* « Se déconnecter » sur la ligne de la saison, à droite. */
.cnpr-insc .cnpr-insc-head--bare { float: right; margin: 0 0 0 16px; padding: 0; border: 0; }
.cnpr-insc .cnpr-insc-season { margin: 0 0 16px; font-size: 16px; }
.cnpr-insc .cnpr-insc-gestionnaire {
  clear: both;
  margin: 8px 0 12px;
  padding: 24px 28px;
  border: 0;
  border-radius: 22px;
  background: var(--soleil-eau);
}
.cnpr-insc .cnpr-insc-gestionnaire .cnpr-insc-gestionnaire__title { margin: 0 0 10px; font-size: 20px; }
.cnpr-insc .cnpr-insc-groupe-cta { justify-content: flex-start; margin: 0 0 24px; }
.cnpr-insc .cnpr-insc-adherents-title { margin: 44px 0 20px; font-size: clamp(24px, 3vw, 32px); }

/* Un adhérent : une carte à filet d'eau, son nom en titre. */
.cnpr-insc .cnpr-insc-list .cnpr-insc-item {
  gap: 12px 16px;
  margin: 0 0 16px;
  padding: 22px 24px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 20px;
  box-shadow: none;
}
/* Le nom sur sa ligne ; dessous, l'état du dossier puis ses gestes, partis de
   la gauche comme le reste de la carte (l'extension les colle à droite, sous
   un nom court ils flottaient loin de lui). */
.cnpr-insc .cnpr-insc-list .cnpr-insc-item__name { flex-basis: 100%; }
.cnpr-insc .cnpr-insc-list .cnpr-insc-item__right {
  flex-basis: 100%;
  margin-left: 0;
  justify-content: flex-start;
}
.cnpr-insc .cnpr-insc-list .cnpr-insc-item__right > .cnpr-insc-muted { flex-basis: 100%; font-size: 15px; }
.cnpr-insc .cnpr-insc-item .cnpr-insc-item__name {
  font-family: var(--soleil-titre);
  font-size: 20px;
  font-weight: 600;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-list .cnpr-insc-item__right .btn {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 15px;
}
.cnpr-insc .cnpr-insc-item .cnpr-insc-badge,
.cnpr-insc .cnpr-insc-item .cnpr-insc-derived-label { border-radius: 999px; font-size: 14px; }
.cnpr-insc .cnpr-insc-item__acts li {
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--soleil-marine);
}
/* Dans une carte comme ailleurs : le jaune fait avancer (Régler, Déposer le
   certificat), le contour marine reprend (Reprendre). (0,3,0) : ceux de
   l'extension, à égalité, chargés avant. */
.cnpr-insc .cnpr-insc-list .btn-primary,
.cnpr-insc .cnpr-insc-history .btn-primary {
  background: var(--soleil-jaune);
  border: 2px solid var(--soleil-jaune);
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-list .btn-primary:hover,
.cnpr-insc .cnpr-insc-history .btn-primary:hover { background: var(--soleil-jaune-fonce); border-color: var(--soleil-jaune-fonce); }
.cnpr-insc .cnpr-insc-list .btn-secondary,
.cnpr-insc .cnpr-insc-history .btn-secondary {
  background: #ffffff;
  border: 2px solid var(--soleil-marine);
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-list .btn-secondary:hover,
.cnpr-insc .cnpr-insc-history .btn-secondary:hover { background: var(--soleil-marine); color: #ffffff; }
/* Retirer, Supprimer : des gestes rares et destructeurs. Du texte rouge, pas
   des pastilles qui disputent la place de « Reprendre ». */
.cnpr-insc .cnpr-insc-inline .btn-danger,
.cnpr-insc .cnpr-insc-list .cnpr-insc-item__right .btn-danger {
  padding-left: 8px;
  padding-right: 8px;
  border-color: transparent;
  background: none;
  color: var(--cnpr-insc-erreur);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cnpr-insc .cnpr-insc-inline .btn-danger:hover,
.cnpr-insc .cnpr-insc-list .cnpr-insc-item__right .btn-danger:hover { background: var(--cnpr-insc-erreur-fond); }

/* « Ajouter un adhérent » et les panneaux dépliables : un aplat d'eau claire,
   le formulaire s'y pose en blanc. */
.cnpr-insc .cnpr-insc-panel {
  border: 2px dashed var(--soleil-eau-2);
  border-radius: 20px;
  background: #ffffff;
}
.cnpr-insc .cnpr-insc-panel > summary {
  font-size: 17px;
  font-weight: 700;
  color: var(--soleil-marine);
}
.cnpr-insc .cnpr-insc-panel[open] { border-style: solid; }

/* =========================================================================
   Connexion + « Avant de commencer » (inc/inscription.php). La connexion
   reste la première colonne — c'est ce qu'on vient faire ici — et passe en
   tête sur téléphone. Les repères sont une eau claire, pas une seconde carte :
   ils accompagnent le formulaire, ils ne lui disputent pas la page.
   ========================================================================= */
.cnpr-insc-auth-cadre {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 380px);
  justify-content: center;
  gap: 56px;
  align-items: start;
}
.cnpr-insc-auth-cadre .cnpr-insc-auth { margin: 8px 0; max-width: none; }
.inscription-avant {
  margin: 8px 0;
  padding: 26px 28px;
  border-radius: 22px;
  background: var(--soleil-eau);
}
.inscription-avant .inscription-avant__titre {
  margin: 0 0 18px;
  font-family: var(--soleil-titre);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--soleil-marine);
}
.inscription-avant__liste { list-style: none; margin: 0; padding: 0; }
.inscription-avant__repere + .inscription-avant__repere {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--soleil-eau-2);
}
.inscription-avant .inscription-avant__nom {
  margin: 0 0 4px;
  font-family: var(--soleil-texte);
  font-size: 1rem;
  font-weight: 700;
  color: var(--soleil-encre);
}
.inscription-avant__repere p { margin: 0 0 6px; color: var(--soleil-gris); font-size: .95rem; line-height: 1.5; }
.inscription-avant__repere a { font-weight: 700; color: var(--soleil-fond); }
@media (max-width: 860px) {
  .cnpr-insc-auth-cadre { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cnpr-insc-auth-cadre .cnpr-insc-auth { max-width: 440px; }
}
.inscription-avant .inscription-avant__intro { margin: -8px 0 18px; color: var(--soleil-gris); font-size: .95rem; line-height: 1.5; }
/* Sous le bouton de connexion, le renvoi vers les questions fréquentes
   (inc/inscription.php) : séparé du formulaire par un filet, pour ne pas se
   lire comme une consigne du formulaire. */
.cnpr-insc-auth .inscription-aide {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--soleil-eau-2);
  color: var(--soleil-gris);
  font-size: .95rem;
  line-height: 1.5;
}
.cnpr-insc-auth .inscription-aide a { font-weight: 700; color: var(--soleil-fond); }