/*
 * La page Tarifs (page-tarifs.php ; balisage du greffon,
 * includes/front-tarifs-page.php).
 *
 * UNE audace, et c'est la réponse : dans l'en-tête, deux lignes d'eau — un
 * enfant, un adulte — séparées par une ligne de bouées, le prix d'un cours en
 * grand. Tout le reste est calme : des filets, des tableaux à trois colonnes
 * qui tiennent à 390 px, aucune ombre. Le jaune ne sert qu'au bouton final et
 * à la ligne qu'on vient viser depuis une fiche (:target).
 */

/* Les bouées, debout : la même ligne que --bouees, tournée d'un quart. */
.tarifs-reponse {
  --bouees-debout:
    radial-gradient(circle at 5px 5px, var(--soleil-piscine) 4.5px, transparent 5px) 0 0 / 10px 40px repeat-y,
    radial-gradient(circle at 5px 15px, var(--soleil-piscine) 4.5px, transparent 5px) 0 0 / 10px 40px repeat-y,
    radial-gradient(circle at 5px 25px, var(--soleil-jaune) 4.5px, transparent 5px) 0 0 / 10px 40px repeat-y,
    radial-gradient(circle at 5px 35px, var(--soleil-jaune) 4.5px, transparent 5px) 0 0 / 10px 40px repeat-y;
  margin-top: 26px;
}

/* --- L'en-tête : le titre, puis les deux couloirs ------------------------ */
.page-tarifs .calendar-hero { margin-bottom: 22px; }
.page-tarifs .calendar-hero h1 { max-width: none; }

.tarifs-reponse__couloirs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 20px;
  background: #ffffff;
}
.tarifs-reponse__couloir { position: relative; padding: 26px 32px 28px; }
.tarifs-reponse__couloir + .tarifs-reponse__couloir::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: -5px;
  width: 10px;
  background: var(--bouees-debout);
}
.tarifs-reponse__qui {
  margin: 0;
  font-family: var(--soleil-texte);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--soleil-gris);
}
.tarifs-reponse__prix {
  margin: 6px 0 14px;
  font-size: 18px;
  color: var(--soleil-gris);
}
.tarifs-reponse__prix strong {
  font-family: var(--soleil-titre);
  font-size: clamp(46px, 5.4vw, 68px);
  font-weight: 700;
  line-height: 1;
  color: var(--soleil-marine);
  font-variant-numeric: tabular-nums;
}
.tarifs-reponse__couloir p:not(.tarifs-reponse__prix) {
  margin: 6px 0 0;
  font-size: 17px;
  max-width: 42ch;
}
.tarifs-reponse__couloir .tarifs-reponse__autre { font-size: 15px; color: var(--soleil-gris); }
.tarifs-reponse__commune {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--soleil-marine);
  max-width: 70ch;
}

/* Sous le masque (tarifs pas encore votés) : la raison, à la place des prix. */
.tarifs-attente {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff8e6;
  border: 2px solid #ffe3a1;
  font-weight: 600;
  max-width: 70ch;
}

.tarifs-sommaire { margin: 0 0 12px; }

/* --- Les sections -------------------------------------------------------- */
.tarifs-section {
  padding: 44px 0 40px;
  border-top: 2px solid var(--soleil-eau-2);
  scroll-margin-top: 110px;
}
.tarifs-section__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 12px 40px;
  align-items: start;
  margin-bottom: 26px;
}
.tarifs-section__tete h2 { margin: 0; font-size: clamp(26px, 3.4vw, 40px); }
.tarifs-section__tete p { margin: 0; font-size: 18px; color: var(--soleil-gris); max-width: 60ch; }
.tarifs-section__tete .tarifs-attente { grid-column: 2; margin: 0; color: var(--soleil-encre); }

/* --- Les exemples : une addition par famille ----------------------------- */
/* Une famille par ligne, comme les groupes plus bas : la situation à gauche,
   l'addition à droite, qui tient ainsi sur UNE ligne. */
.tarifs-exemples { display: grid; gap: 14px; }
.tarifs-exemple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 14px 40px;
  padding: 26px 30px;
  border-radius: 20px;
  background: var(--soleil-eau);
}
.tarifs-exemple h3 { margin: 0; font-size: 20px; }
.tarifs-exemple__calculs { display: flex; flex-direction: column; gap: 14px; }
.tarifs-exemple__personne + .tarifs-exemple__personne {
  padding-top: 14px;
  border-top: 2px solid var(--soleil-eau-2);
}
.tarifs-exemple__qui { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--soleil-gris); }
.tarifs-calcul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 10px;
  margin: 0;
  font-family: var(--soleil-titre);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--soleil-marine);
  font-variant-numeric: tabular-nums;
}
.tarifs-calcul__terme { display: inline-flex; flex-direction: column; white-space: nowrap; }
.tarifs-calcul__terme small {
  max-width: 10em;
  margin-top: 3px;
  font-family: var(--soleil-texte);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  white-space: normal;
  color: var(--soleil-gris);
}
.tarifs-calcul__op { color: var(--soleil-piscine); }
.tarifs-calcul__egal { display: inline-flex; gap: 10px; white-space: nowrap; }
.tarifs-calcul__total { font-weight: 700; white-space: nowrap; }
.tarifs-exemple__somme {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding-top: 12px;
  border-top: 2px solid var(--soleil-marine);
  font-weight: 700;
  color: var(--soleil-marine);
}
.tarifs-exemple__somme strong { font-family: var(--soleil-titre); font-size: 26px; }
.tarifs-exemple__lecon { margin: 10px 0 0; font-size: 16px; color: var(--soleil-gris); max-width: 42ch; }

/* --- Les groupes : le titre à gauche, le tableau à droite ---------------- */
.tarifs-groupe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 14px 40px;
  padding: 30px 0;
  border-top: 2px solid var(--soleil-eau-2);
  scroll-margin-top: 110px;
}
.tarifs-section__tete + .tarifs-groupe { border-top: 0; padding-top: 4px; }
.tarifs-groupe__tete h3 { margin: 0 0 8px; font-size: 24px; }
.tarifs-groupe__tete p { margin: 0; font-size: 16px; color: var(--soleil-gris); max-width: 42ch; }
.tarifs-groupe__note { margin: 12px 0 0; font-size: 15px; color: var(--soleil-gris); max-width: 64ch; }
.tarifs-groupe__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.tarifs-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.tarifs-table thead th {
  padding: 0 0 8px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--soleil-gris);
  text-align: right;
  vertical-align: bottom;
}
.tarifs-table thead th:first-child { padding-left: 0; }
/* L'en-tête des colonnes (« Première inscription », « Déjà adhérent ») suit
   le défilement, juste sous l'en-tête du site, tant que son tableau est à
   l'écran : dans un long tableau, on lit le prix sans remonter savoir de
   quelle colonne il est. Fond blanc pour masquer les lignes qui passent
   dessous, et un filet pour le détacher d'elles. */
.tarifs-table thead th {
  position: sticky;
  top: var(--cnpr-hauteur-entete, 74px);
  z-index: 2;
  padding-top: 10px;
  background: #ffffff;
  box-shadow: 0 1px 0 var(--soleil-eau-2);
}
.tarifs-table tbody tr { border-top: 1px solid var(--soleil-eau-2); scroll-margin-top: 130px; }
.tarifs-table tbody tr:last-child { border-bottom: 1px solid var(--soleil-eau-2); }
.tarifs-table tbody th {
  padding: 11px 8px 11px 0;
  text-align: left;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--soleil-encre);
}
.tarifs-table tbody th a { color: var(--soleil-marine); text-decoration: none; }
.tarifs-table tbody th a:hover,
.tarifs-table tbody th a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.tarifs-table__precision {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--soleil-gris);
}
.tarifs-table__prix {
  width: 8.5em;
  padding: 11px 0 11px 14px;
  text-align: right;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  color: var(--soleil-marine);
}
.tarifs-table__prix--ancien { font-weight: 500; color: var(--soleil-gris); }
.tarifs-table--un-prix .tarifs-table__prix { width: 6em; }
/* La ligne qu'une fiche vise (« 190 € la saison ») : elle s'allume, le temps
   de la trouver. */
.tarifs-table tbody tr:target { background: #fff6dc; }
.tarifs-table tbody tr:target th { box-shadow: inset 4px 0 0 var(--soleil-jaune); padding-left: 12px; }

.tarifs-groupe__replie {
  margin-top: 16px;
  border-radius: 16px;
  background: var(--soleil-eau);
  padding: 0 18px;
}
.tarifs-groupe__replie summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 14px 28px 14px 0;
  font-weight: 700;
  color: var(--soleil-marine);
}
.tarifs-groupe__replie summary span { font-weight: 500; color: var(--soleil-gris); }
.tarifs-groupe__replie summary::-webkit-details-marker { display: none; }
.tarifs-groupe__replie summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 10px;
  font-family: var(--soleil-titre);
  font-size: 22px;
  color: var(--soleil-piscine);
}
.tarifs-groupe__replie[open] summary::after { content: "–"; }
.tarifs-groupe__replie .tarifs-table { margin-bottom: 14px; }
/* Replié, un module se désigne encore par l'ancre : ouvert à la main. */
.tarifs-groupe__replie tbody tr { border-color: var(--soleil-eau-2); }

/* --- Ce qu'il faut savoir, payer : des listes à filets ------------------- */
.tarifs-section--texte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 14px 40px;
}
.tarifs-section--texte .tarifs-section__tete { display: block; margin: 0; }
.tarifs-section--texte .tarifs-section__tete p { margin-top: 10px; font-size: 16px; }
.tarifs-liste { list-style: none; margin: 0; padding: 0; }
.tarifs-liste li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-top: 1px solid var(--soleil-eau-2);
  font-size: 17px;
  max-width: 70ch;
}
.tarifs-liste li:last-child { border-bottom: 1px solid var(--soleil-eau-2); }
/* Le filet sépare deux règles : au-dessus de la première, il ne sépare rien. */
.tarifs-liste li:first-child { border-top: 0; padding-top: 0; }
.tarifs-liste li:first-child::before { top: 8px; }
/* Une bouée par règle. */
.tarifs-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--soleil-piscine);
}
.tarifs-section--texte .cnpr-tarifs__stamp,
.tarifs-section--texte > p:last-child {
  grid-column: 2;
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--soleil-gris);
}

/* « Garder vos avantages d’adhérent » : sous les règles, dans leur colonne, sur le
   fond d'eau des exemples — une astuce, pas une règle de plus. */
.tarifs-section--texte .tarifs-encadre {
  grid-column: 2;
  max-width: 70ch;
  margin-top: 6px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--soleil-eau);
  border-left: 4px solid var(--soleil-piscine);
}
.tarifs-encadre h3 { margin: 0 0 6px; font-size: 19px; }
.tarifs-encadre p { margin: 0; font-size: 17px; }
/* Les aides : sous les modalités, dans leur colonne, sans cadre — un titre
   suffit à les trouver. */
.tarifs-section--texte .tarifs-aides { grid-column: 2; max-width: 70ch; margin-top: 18px; }
.tarifs-aides h3 { margin: 0 0 12px; font-size: 19px; }
.tarifs-aides__note { margin: 12px 0 0; font-size: 17px; }
.tarifs-liste__lien { text-decoration: underline; text-underline-offset: 3px; }

/* --- S'inscrire ----------------------------------------------------------
   DEUX CHEMINS DE MÊME RANG, tout ouvert : l'aiguillage en haut, puis chaque
   chemin sous son titre. Chaque chemin s'ouvre sur
   une ligne de bouées, comme les deux couloirs de l'en-tête : deux façons de
   s'inscrire, deux lignes d'eau, et aucune n'est dessinée plus fort. */

/* Le défilement doux, pour l'aiguillage et le sommaire — jamais imposé. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.page-tarifs) { scroll-behavior: smooth; }
}

/* La question se lit SOUS le titre, collée aux deux boutons qu'elle
   introduit : à droite, comme l'intro des autres sections, elle flottait. */
.tarifs-inscrire .tarifs-section__tete { display: block; margin-bottom: 18px; }
.tarifs-section__tete .tarifs-aiguillage__question {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 600;
  color: var(--soleil-encre);
}

/* L'aiguillage : deux gros liens, côte à côte, de même dessin. La flèche dit
   que le lien descend dans la page, pas qu'il en sort. */
.tarifs-aiguillage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tarifs-aiguillage__choix {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
  padding: 22px 76px 22px 26px;
  border: 2px solid var(--soleil-marine);
  border-radius: 20px;
  background: #ffffff;
  color: var(--soleil-encre);
  text-decoration: none;
  transition: background-color .15s ease;
}
.tarifs-aiguillage__choix::after {
  content: "↓";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: 999px;
  background: var(--soleil-marine);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 38px;
  text-align: center;
}
.tarifs-aiguillage__choix:hover { background: var(--soleil-eau); }
.tarifs-aiguillage__choix:focus-visible { outline: 3px solid var(--soleil-piscine); outline-offset: 3px; }
.tarifs-aiguillage__nom {
  font-family: var(--soleil-titre);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--soleil-marine);
}
.tarifs-aiguillage__detail { font-size: 16px; line-height: 1.45; color: var(--soleil-gris); }

/* Les deux chemins. Les titres, mêmes corps et même couleur ; tabindex="-1"
   leur donne le focus quand l'aiguillage y mène (le halo n'apparaît qu'au
   clavier). */
.tarifs-chemin {
  position: relative;
  margin-top: 48px;
  padding-top: 34px;
}
.tarifs-chemin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--bouees);
}
.tarifs-chemin__titre {
  margin: 0 0 24px;
  font-size: clamp(24px, 2.8vw, 32px);
  color: var(--soleil-marine);
}
.tarifs-chemin__titre:focus { outline: none; }
.tarifs-chemin__titre:focus-visible { outline: 3px solid var(--soleil-piscine); outline-offset: 6px; border-radius: 4px; }

/* Le renvoi vers la rubrique Payer des questions fréquentes, sous les étapes
   de l'inscription en ligne : une phrase, l'action reste le bloc marine. */
.tarifs-faq { margin: 22px 0 24px; font-size: 17px; color: var(--soleil-gris); }
.tarifs-faq a { font-weight: 700; }

.tarifs-inscrire__fin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 30px;
  padding: 28px 30px;
  border-radius: 24px;
  background: var(--soleil-marine);
}
.tarifs-inscrire__fin h4 { margin: 0 0 4px; color: #ffffff; font-size: 24px; }
.tarifs-inscrire__fin p { margin: 0; color: #cfdcff; }
.tarifs-inscrire__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tarifs-inscrire__fin .btn-secondary { color: #ffffff; border-color: #ffffff; }
.tarifs-inscrire__fin .btn-secondary:hover { background: #ffffff; color: var(--soleil-marine); }

/* Le papier : les pièces sur une ligne de lecture, le secrétariat à côté. */
.tarifs-papier {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 20px 40px;
  align-items: start;
}
.tarifs-papier__pieces { max-width: 75ch; }
.tarifs-papier__pieces > :first-child { margin-top: 0; }
.tarifs-papier__pieces > :last-child { margin-bottom: 0; }
.tarifs-papier__pieces p,
.tarifs-papier__pieces li { font-size: 17px; }
.tarifs-papier__pieces ol { padding-left: 22px; }
.tarifs-papier__pieces li { margin: 8px 0; padding-left: 4px; }
.tarifs-papier__ou {
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--soleil-eau);
}
.tarifs-papier__ou h4 { margin: 0 0 8px; font-size: 19px; color: var(--soleil-marine); }
.tarifs-papier__ou p { margin: 8px 0 0; font-size: 16px; }
.tarifs-papier__joindre a { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tarifs-papier__joindre a + a { margin-top: 4px; }

/* --- Tablette, téléphone ------------------------------------------------- */
@media (max-width: 980px) {
  .tarifs-papier { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .tarifs-section__tete,
  .tarifs-groupe,
  .tarifs-section--texte { grid-template-columns: 1fr; gap: 10px; }
  .tarifs-section__tete .tarifs-attente,
  .tarifs-section--texte .cnpr-tarifs__stamp,
  .tarifs-section--texte > p:last-child,
  .tarifs-section--texte .tarifs-encadre,
  .tarifs-section--texte .tarifs-aides { grid-column: 1; }
  .tarifs-groupe__tete p { max-width: 60ch; }
  .tarifs-exemple { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Les couloirs s'empilent : la ligne de bouées passe à l'horizontale. */
  .tarifs-reponse__couloirs { grid-template-columns: 1fr; }
  .tarifs-reponse__couloir { padding: 22px 20px 22px; }
  .tarifs-reponse__couloir + .tarifs-reponse__couloir::before {
    top: -5px;
    bottom: auto;
    left: 16px;
    right: 16px;
    width: auto;
    height: 10px;
    background: var(--bouees);
  }
  .tarifs-section { padding: 34px 0 30px; }
  .tarifs-exemple { padding: 20px 18px; }
  .tarifs-calcul { font-size: 20px; }
  .tarifs-table thead th { padding-left: 8px; font-size: 12px; }
  .tarifs-table tbody th { font-size: 16px; }
  .tarifs-table__prix { width: 5.6em; padding-left: 8px; font-size: 16px; }
  .tarifs-table thead th:not(:first-child) { width: 5.6em; }
  .tarifs-aiguillage { grid-template-columns: 1fr; gap: 12px; }
  .tarifs-aiguillage__choix { min-height: 0; padding: 18px 66px 18px 20px; }
  .tarifs-aiguillage__choix::after { right: 16px; }
  .tarifs-aiguillage__nom { font-size: 20px; }
  .tarifs-papier__ou { padding: 18px 20px; }
  .tarifs-chemin { margin-top: 38px; padding-top: 28px; }
  .tarifs-inscrire__fin { padding: 22px 20px; }
  .tarifs-inscrire__actions { flex: 1 1 100%; }
  .tarifs-inscrire__fin .btn { flex: 1 1 100%; text-align: center; }
  /* Dix entrées : sur deux colonnes, le sommaire tient en un demi-écran. */
  .tarifs-sommaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}