/*
 * Le calendrier de la saison ([cnpr_calendar]) : son style par défaut.
 *
 * Une frise par mois. Chaque date dit d'abord ce qu'elle change pour les
 * nageurs (pas de cours, à noter, rendez-vous du club), le reste est du texte.
 *
 * LE CONTRAT AVEC LE THÈME (docs/theme-et-extensions.md) :
 * - ce fichier ne lit QUE les jetons --cnpr-*, toujours avec une valeur de
 *   repli : sans thème qui les définit, le calendrier reste propre, aux
 *   couleurs du logo ;
 * - ses sélecteurs restent bas (une classe, deux au plus) : une retouche du
 *   thème, chargée après, l'emporte à sélecteur égal ;
 * - il s'adapte à la largeur de SON conteneur (requêtes @container), pas à
 *   celle de l'écran : posé dans une colonne étroite, il passe en une colonne.
 */

.cnpr-calendar {
  container-type: inline-size;
  color: var(--cnpr-couleur-texte, #16284f);
  font-family: var(--cnpr-police-texte, inherit);
}
.cnpr-calendar .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Un mois : son nom à gauche, qui reste en vue pendant qu'on lit ses dates. */
.cnpr-calendar__mois {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 32px;
  padding: 26px 0;
}
.cnpr-calendar__mois + .cnpr-calendar__mois { border-top: 2px solid var(--cnpr-filet, #d3eefb); }
.cnpr-calendar__mois-titre {
  align-self: start;
  position: sticky;
  top: var(--cnpr-decalage-haut, 24px);
  margin: 0;
  padding: 14px 0 18px;
  font-family: var(--cnpr-police-titre, inherit);
  font-size: 20px;
  line-height: 1.15;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
/* Un trait sous le nom du mois : le repère par défaut. Un thème peut le
   remplacer par son propre motif. */
.cnpr-calendar__mois-titre::after {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--cnpr-couleur-accent, #009fe0);
}

.cnpr-calendar__lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cnpr-calendar__ligne {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 11rem;
  gap: 6px 24px;
  align-items: baseline;
  padding: 16px 0;
}
.cnpr-calendar__ligne + .cnpr-calendar__ligne { border-top: 1px solid var(--cnpr-filet, #d3eefb); }
.cnpr-calendar__quand {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  color: var(--cnpr-couleur-titre, #1e3f94);
  font-variant-numeric: tabular-nums;
}
.cnpr-calendar__quand time,
.cnpr-calendar__borne { white-space: nowrap; }
.cnpr-calendar__quoi { min-width: 0; }
.cnpr-calendar .cnpr-calendar__titre {
  margin: 0;
  font-family: var(--cnpr-police-texte, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--cnpr-couleur-texte, #16284f);
}
.cnpr-calendar__texte { color: var(--cnpr-couleur-texte-doux, #4c5f80); font-size: 16px; }
.cnpr-calendar__texte p { margin: 2px 0 0; }

/* Ce que la date change : une pastille de couleur et trois mots. */
.cnpr-calendar__genre {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cnpr-couleur-texte-doux, #4c5f80);
}
.cnpr-calendar__genre::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cnpr-couleur-accent, #009fe0);
  transform: translateY(-1px);
}
/* Pas de cours : c'est ce que les familles viennent chercher, la ligne le
   dit dans la couleur des titres, sans détour. */
.cnpr-calendar__ligne--closure .cnpr-calendar__genre { color: var(--cnpr-couleur-titre, #1e3f94); font-weight: 700; }
.cnpr-calendar__ligne--closure .cnpr-calendar__genre::before { background: var(--cnpr-couleur-titre, #1e3f94); }
.cnpr-calendar__ligne--event .cnpr-calendar__genre::before {
  background: var(--cnpr-couleur-action, #ffc53d);
  box-shadow: 0 0 0 2px var(--cnpr-couleur-action-survol, #f5a900) inset;
}

/* La prochaine date sort de la frise : un fond clair, et un repère. */
.cnpr-calendar__ligne--prochaine {
  margin: 4px 0;
  padding: 20px 22px;
  border-radius: var(--cnpr-rayon, 20px);
  background: var(--cnpr-fond-doux, #eaf7fd);
  grid-template-columns: calc(15rem - 22px) minmax(0, 1fr) calc(11rem - 22px);
}
.cnpr-calendar__ligne--prochaine,
.cnpr-calendar__ligne--prochaine + .cnpr-calendar__ligne { border-top-color: transparent; }
.cnpr-calendar__repere {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cnpr-couleur-accent, #009fe0);
}
.cnpr-calendar__vide {
  margin: 0;
  padding: 22px 24px;
  border-radius: var(--cnpr-rayon, 20px);
  background: var(--cnpr-fond-doux, #eaf7fd);
  font-size: 18px;
}

/* Les dates passées : repliées, et plus pâles une fois dépliées. */
.cnpr-calendar__passees {
  margin-top: 28px;
  border-top: 2px solid var(--cnpr-filet, #d3eefb);
}
.cnpr-calendar__passees summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 30px 20px 0;
  position: relative;
  font-weight: 700;
  font-size: 18px;
  color: var(--cnpr-couleur-titre, #1e3f94);
}
.cnpr-calendar__passees summary::-webkit-details-marker { display: none; }
.cnpr-calendar__passees summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-family: var(--cnpr-police-titre, inherit);
  font-size: 22px;
  color: var(--cnpr-couleur-accent, #009fe0);
}
.cnpr-calendar__passees[open] summary::after { content: "–"; }
.cnpr-calendar__passees .cnpr-calendar__mois:first-of-type { padding-top: 0; }
.cnpr-calendar__passees .cnpr-calendar__mois-titre { font-size: 18px; position: static; }
.cnpr-calendar__passees .cnpr-calendar__quand,
.cnpr-calendar__passees .cnpr-calendar__titre,
.cnpr-calendar__passees .cnpr-calendar__genre { color: var(--cnpr-couleur-texte-doux, #4c5f80); }
.cnpr-calendar__passees .cnpr-calendar__genre::before { opacity: .5; }

/* Conteneur moyen : le nom du mois passe au-dessus de ses dates. */
@container (max-width: 1032px) {
  .cnpr-calendar__mois { grid-template-columns: 1fr; }
  .cnpr-calendar__mois-titre { position: static; margin-bottom: 6px; }
}
/* Conteneur étroit : une date par bloc, la période, puis ce qu'elle change,
   puis son titre ; le repère « Prochaine date » passe en tête. */
@container (max-width: 652px) {
  .cnpr-calendar__ligne,
  .cnpr-calendar__ligne--prochaine {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .cnpr-calendar__ligne--prochaine { padding: 18px 18px; margin: 4px -4px; }
  .cnpr-calendar__quoi { display: contents; }
  .cnpr-calendar__repere { order: 0; margin: 0; }
  .cnpr-calendar__quand { order: 1; }
  .cnpr-calendar__genre { order: 2; }
  .cnpr-calendar .cnpr-calendar__titre { order: 3; margin-top: 4px; }
  .cnpr-calendar__texte { order: 4; }
}