/*
 * Les parcours par public (page-enfants-et-ados.php, page-adultes.php,
 * template-parts/parcours.php) : sommaire, tranches d'âge, activités et leur
 * semaine, questions fréquentes.
 */

/* =========================================================================
   PARCOURS PAR PUBLIC (page-enfants-et-ados.php, page-adultes.php)
   ========================================================================= */
.parcours-sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.parcours-sommaire a {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--soleil-eau-2);
  font-weight: 700;
  color: var(--soleil-marine);
}
/* Au doigt, :hover reste collé après le tap : le liseré jaune ne se montre
   qu'aux écrans qui survolent vraiment. */
@media (hover: hover) {
  .parcours-sommaire a:hover { border-color: var(--soleil-jaune); background: #fffaf0; }
}
/* Sur téléphone, des pastilles de largeurs inégales s'empilent en vrac :
   le sommaire devient une liste à filets, une ligne par section. La flèche
   dit « plus bas sur cette page », pas « se déplie ». */
@media (max-width: 700px) {
  .parcours-sommaire {
    display: block;
    margin-bottom: 36px;
    border-top: 2px solid var(--soleil-eau-2);
  }
  .parcours-sommaire li { border-bottom: 2px solid var(--soleil-eau-2); }
  .parcours-sommaire a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 2px;
    border: 0;
    border-radius: 0;
  }
  .parcours-sommaire a::after {
    content: "↓";
    flex: none;
    font-weight: 400;
    color: var(--soleil-piscine);
  }
}

/* LE FILTRE D'ÂGE (page Enfants et ados) : quatre âges et « Tout voir ». Le
   choix retenu est plein, marine : le jaune reste aux actions. Il remplace le
   sommaire, deux rangées de pastilles en tête de page étaient une de trop. */
.filtre-age { margin: 0 0 44px; scroll-margin-top: 110px; }
.filtre-age__question {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--soleil-marine);
}
.filtre-age__choix {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filtre-age__choix a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid var(--soleil-eau-2);
  background: #ffffff;
  font-weight: 700;
  color: var(--soleil-marine);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .filtre-age__choix a:hover { border-color: var(--soleil-marine); }
}
.filtre-age__choix a:focus-visible { outline: 3px solid var(--soleil-piscine); outline-offset: 2px; }
.filtre-age__choix a[aria-current="true"] {
  border-color: var(--soleil-marine);
  background: var(--soleil-marine);
  color: #ffffff;
}
.page-standard .filtre-age__resultat {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--soleil-gris);
}
@media (max-width: 480px) {
  /* Cinq pastilles sur deux lignes, et non trois : « Tout voir » ne reste
     pas seul sur la sienne. */
  .filtre-age__choix { gap: 8px; }
  .filtre-age__choix a { padding: 9px 14px; font-size: 15px; }
}
/* Ce que le filtre cache : `hidden` doit l'emporter sur les display: grid des
   activités et des lignes de semaine (celles-ci en grille sur téléphone). */
.page-parcours [hidden] { display: none !important; }

/* Une tranche d'âge est un CHAPITRE, une activité une ligne du chapitre : la
   page en compte quatre et onze, et quand les deux se séparaient par le même
   filet l'œil ne savait plus où un âge commençait. Entre deux tranches, un
   grand blanc et la ligne de bouées (celle des titres de la page newsletter) ;
   entre deux activités, un filet fin. L'âge, la clé de lecture des parents
   (c'est lui que nomme le sommaire), passe au-dessus du titre en pastille ;
   il reste dans le h2 pour les lecteurs d'écran, d'où column-reverse. */
.tranche { padding: 8px 0 28px; scroll-margin-top: 110px; }
.tranche + .tranche { padding-top: 56px; }
.tranche + .tranche::before {
  content: "";
  display: block;
  width: 80px;
  height: 10px;
  margin: 0 0 28px;
  background: var(--bouees);
}
/* La première section AFFICHÉE ouvre la page, sans bouées ni grand blanc,
   même quand le filtre a caché celles d'avant. */
.tranche:nth-child(1 of .tranche:not([hidden])) { padding-top: 8px; }
.tranche:nth-child(1 of .tranche:not([hidden]))::before { display: none; }
.tranche__tete { max-width: 760px; margin-bottom: 20px; }
.tranche__tete h2 {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
}
.tranche__age {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--soleil-eau);
  font-family: var(--soleil-texte);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--soleil-marine);
  letter-spacing: 0;
}
.tranche__tete p { margin: 12px 0 0; font-size: 18px; color: var(--soleil-gris); max-width: 62ch; }

/* Aucune fiche (greffon absent, ou saison pas encore décrite) : une phrase qui
   renvoie aux horaires, à la voix des intros de tranche. */
.parcours-attente { margin: 8px 0 44px; font-size: 18px; color: var(--soleil-gris); max-width: 60ch; }

/* Une activité = une ligne d'eau : à gauche ce qu'on y fait, à droite sa
   semaine. La semaine est un vrai tableau (jours en colonnes, groupes en
   lignes, heures de DÉBUT dans les cases) : c'est ce que le parent compare
   avec son agenda, et un lecteur d'écran l'annonce comme tel. */
.nages { display: flex; flex-direction: column; }
.nage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 18px 48px;
  padding: 30px 0;
  border-top: 1px solid var(--soleil-eau-2);
}
.nage:first-child,
.nage:nth-child(1 of .nage:not([hidden])) { border-top: 0; padding-top: 10px; }
/* Le nom d'une activité en Figtree et non en Unbounded : onze titres dans la
   police d'affiche, large et ronde, faisaient autant de petites enseignes. Elle
   reste aux quatre titres de chapitre. */
.nage__tete h3 {
  margin: 0;
  font-family: var(--soleil-texte);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* La durée et le prix, deux pastilles côte à côte. Le prix est celui d'un
   nouvel adhérent (inc/parcours.php) et mène à la page Tarifs, qui dit le
   reste : réinscription, cours suivants, supplément hors commune. */
.nage__faits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.nage__prix {
  display: inline-block;
  padding: 1px 9px;
  border: 2px solid var(--soleil-eau-2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--soleil-marine);
  text-decoration: none;
}
.nage__prix:hover,
.nage__prix:focus-visible { border-color: var(--soleil-marine); text-decoration: underline; text-underline-offset: 3px; }
/* L'astérisque d'un prix : le bleu foncé du prix, dont il fait partie. */
.cnpr-prix-etoile { margin-left: 1px; }
/* L'âge de l'activité (page Enfants et ados) : la même pastille que la
   durée, qu'elle précède — c'est la première question du parent. */
.nage__age,
.nage__duree {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--soleil-eau);
  font-size: 14px;
  font-weight: 700;
  color: var(--soleil-marine);
}
.nage__texte { margin: 12px 0 0; font-size: 17px; max-width: 46ch; }
/* La mention de l'activité (un partenariat, une condition) : dite sous le
   texte, sur le fond de l'eau, pour qu'on ne la prenne pas pour la suite. */
.nage__mention {
  margin: 12px 0 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--soleil-eau);
  max-width: 46ch;
  font-size: 15px;
  font-weight: 600;
  color: var(--soleil-marine);
}
.nage__mention a { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: var(--soleil-ciel); text-underline-offset: 3px; }
/* Les formules d'une activité réglée à la séance (sans inscription en
   ligne) : toutes, libellé à gauche, prix à droite — un « dès » y mentirait. */
.nage__formules {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-width: 46ch;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.nage__formules li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-top: 1px solid var(--soleil-eau-2);
}
.nage__formules li:last-child { border-bottom: 1px solid var(--soleil-eau-2); }
.nage__formules strong { color: var(--soleil-marine); white-space: nowrap; }
.nage__semaine { display: flex; flex-direction: column; gap: 10px; }
.nage__lien { align-self: flex-end; font-weight: 600; font-size: 14.5px; }

.semainier {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.semainier__legende {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.semainier thead th {
  padding: 0 0 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--soleil-gris);
  text-align: center;
}
.semainier abbr { text-decoration: none; }
.semainier thead td,
.semainier tbody th { width: 26%; }
.semainier tbody th {
  padding: 8px 8px 8px 0;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--soleil-marine);
}
/* Les jours de cours en eau claire, les autres à peine marqués : onze
   semaines de pavés marine pleins faisaient la page la plus sombre du site,
   et le contraste allait aux cases, pas aux heures. Ici l'heure porte le
   contraste (marine sur eau, 9:1), le vide se tait. */
/* L'âge d'un groupe sous son nom, quand les groupes d'une activité n'ont pas
   tous le même (Avenirs 8 à 10 ans, Benjamins 11 à 13 ans…). */
.semainier__age {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--soleil-gris);
}
.semainier td {
  padding: 9px 2px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.35;
  background: #f7fbfe;
}
.semainier td.est-ouvert {
  background: var(--soleil-eau-2);
  color: var(--soleil-marine);
  font-weight: 700;
}
.semainier__vide { color: transparent; }

@media (max-width: 860px) {
  .nage { grid-template-columns: 1fr; gap: 14px; }
  .nage__lien { align-self: flex-start; }
}
@media (max-width: 480px) {
  /* Sur téléphone, le nom du groupe passe AU-DESSUS de sa semaine : six
     jours dans 340 px ne laissent pas de place à une colonne d'intitulé. */
  .semainier { border-spacing: 3px; }
  .semainier thead td { display: none; }
  .semainier thead tr,
  .semainier tbody tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .semainier tbody tr { margin-top: 4px; }
  .semainier tbody th { grid-column: 1 / -1; width: auto; padding: 6px 0 0; }
  .semainier thead th { display: block; }
  .semainier td { font-size: 13px; padding: 8px 0; }
}

.encart-test {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin: 0 0 28px;
  padding: 24px 26px;
  border-radius: 22px;
  background: #fff8e6;
  border: 2px solid #ffe3a1;
}
.encart-test__astre {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #ffe08a 0%, var(--soleil-jaune) 60%, var(--soleil-jaune-fonce) 100%);
}
.encart-test h3 { margin: 0 0 6px; font-size: 20px; }
.encart-test p { margin: 0; font-size: 17px; max-width: 70ch; }
/* Les paragraphes suivants (dates du test, ou comment prendre rendez-vous) :
   collés au premier, ils se lisaient comme un retour à la ligne accidentel. */
.encart-test p + p { margin-top: 10px; }
.encart-test a { white-space: nowrap; }

.parcours-fin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding: 30px 32px;
  border-radius: 26px;
  background: var(--soleil-marine);
  color: #ffffff;
}
.parcours-fin h2 { margin: 0 0 4px; color: #ffffff; font-size: 24px; }
.parcours-fin p { margin: 0; color: #cfdcff; }
.parcours-fin .btn-secondary { color: #ffffff; border-color: #ffffff; }
.parcours-fin .btn-secondary:hover { background: #ffffff; color: var(--soleil-marine); }
.parcours-fin__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .tranche + .tranche { padding-top: 40px; }
  .encart-test { grid-template-columns: 1fr; }
}

/* FAQ : des volets, parce qu'un parent n'a qu'UNE question en tête et qu'il
   doit la trouver d'un coup d'œil parmi les autres. */
/* Deux colonnes sur écran large : cinq questions d'une ligne sur une seule
   colonne laissaient la moitié droite vide. align-items: start, pour qu'une
   question ouverte n'étire pas sa voisine ; une grille et non des colonnes CSS,
   pour que rien ne saute d'une colonne à l'autre à l'ouverture. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px 16px;
}
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
}
.faq__item {
  border-radius: 18px;
  background: var(--soleil-eau);
  padding: 0 22px;
}
.faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 30px 18px 0;
  position: relative;
  font-weight: 700;
  font-size: 18px;
  color: var(--soleil-marine);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 14px;
  font-family: var(--soleil-titre);
  font-size: 22px;
  color: var(--soleil-piscine);
}
.faq__item[open] summary::after { content: "–"; }
.faq__reponse { padding-bottom: 20px; font-size: 17px; }
.faq__reponse > * { margin: 0 0 12px; }
.faq__reponse > :last-child { margin-bottom: 0; }
.faq__reponse ul, .faq__reponse ol { padding-left: 1.2em; }
/* Sous les volets, le renvoi vers la page Questions fréquentes : un lien de
   texte, pas un bouton — l'action de la page reste l'inscription, en bas. */
.faq__toutes { margin: 18px 0 0; font-size: 17px; }
.faq__toutes a { font-weight: 700; }
.page-parcours .calendar-hero { margin-bottom: 22px; }

/* Un seul groupe sans nom : pas de colonne d'intitulé (elle ne dirait que
   « Séances »), les six jours prennent toute la largeur. La légende du
   tableau nomme déjà l'activité pour les lecteurs d'écran. */
.semainier thead td { background: none; }